/* ============================================================
   IHSC · ESTILOS DEL TEMA HIJO
   ihsc-tt4-child/assets/ihsc-tema.css

   Este archivo sustituye por completo al CSS adicional del Editor
   de estilos. Si se dejan los dos, se pisan entre si.
   ANTES DE SUBIR ESTE TEMA: vacie el campo CSS adicional
   (Apariencia -> Editor -> Estilos -> tres puntos -> CSS adicional).

   Se carga desde functions.php con el numero de version del tema,
   asi que basta con subir el numero de Version en style.css para
   que las caches lo actualicen solas.

   Reparto de responsabilidades:
     theme.json ........ colores, tipografia, espaciado, anchos
     plugin ihsc-marca . componentes: cabecera, tarjetas de colegio,
                         burbuja, cifras, escudo enmascarado
     este archivo ...... hero, formulario, noticias, pie, encabezado
                         por hora, saltos de ancla

   Nota sobre .ihsc-btn--3: el plugin ya define esa clase para
   enlaces sueltos, con fondo transparente. Aqui se define para el
   caso del bloque «Boton» de WordPress, con fondo blanco, que es lo
   que pide el diseno sobre las secciones en crema. Son dos
   selectores distintos y conviven a proposito.
   ============================================================ */

/* ------------------------------------------------------------
   1 · ENCABEZADO SEGUN LA HORA
   El fondo crema vive en un grupo interno de la barra, no en el
   elemento que lleva la clase. De ahi que el selector abarque
   tambien los descendientes con fondo.
   ------------------------------------------------------------ */
html[data-tema="azul"] .ihsc-header,
html[data-tema="azul"] .ihsc-header .wp-block-group.has-background,
html[data-tema="azul"] .ihsc-header-wrap .wp-block-group.has-background{
  background-color: #F7F1E3 !important;
}
html[data-tema="rojo"] .ihsc-header,
html[data-tema="rojo"] .ihsc-header .wp-block-group.has-background,
html[data-tema="rojo"] .ihsc-header-wrap .wp-block-group.has-background{
  background-color: #8B1A1A !important;
}

/* ------------------------------------------------------------
   2 · HERO SEGUN LA HORA
   Va aqui y no como atributo del bloque: un atributo es un valor
   fijo y no puede seguir al reloj.
   ------------------------------------------------------------ */
html[data-tema="azul"] .ihsc-hero{
  background-color: #0F2248 !important;
  background-image: linear-gradient(150deg, #0F2248 0%, #1B3A6B 60%, #1E3C66 100%) !important;
}
html[data-tema="rojo"] .ihsc-hero{
  background-color: #8B1A1A !important;
  background-image: linear-gradient(150deg, #6B1414 0%, #8B1A1A 58%, #5E1220 100%) !important;
}

/* ------------------------------------------------------------
   3 · LA OLA DEL HERO
   Forma clara y curva que entra por la derecha y pasa por detras
   del escudo. Su borde izquierdo es un corte limpio, no un
   desvanecido: eso es lo que la hace legible como forma. Las
   medidas estan tomadas del prototipo.
   El pie del hero queda recto.
   ------------------------------------------------------------ */
.ihsc-hero{ position: relative; overflow: hidden; }
.ihsc-hero > *{ position: relative; z-index: 2; }
.ihsc-hero::after{
  content: "";
  position: absolute;
  right: -12%;
  top: -30%;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
html[data-tema="azul"] .ihsc-hero::after{
  background: radial-gradient(circle at 34% 34%, rgba(201,162,39,.28) 0%, rgba(201,162,39,0) 62%);
}
html[data-tema="rojo"] .ihsc-hero::after{
  background: radial-gradient(circle at 34% 34%, rgba(239,217,164,.22) 0%, rgba(239,217,164,0) 62%);
}

/* ------------------------------------------------------------
   4 · TIPOGRAFIA
   ------------------------------------------------------------ */
.ihsc-hero h1{
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: clamp(32px, 4vw, 44px) !important;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-transform: none;
  max-width: 22ch;
}
.ihsc-seccion h2{
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.ihsc-hero .ihsc-lead,
.ihsc-hero p:not(.ihsc-over){
  font-family: Lato, system-ui, sans-serif !important;
  text-transform: none;
  letter-spacing: normal;
}
.ihsc-hero .ihsc-lead{ font-size: 1.1rem; font-weight: 400; max-width: 52ch; }
.ihsc-hero .ihsc-over{
  font-family: Lato, system-ui, sans-serif !important;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   5 · BOTONES DENTRO DEL BLOQUE «BOTON»
   Neutraliza el caso de la clase puesta en el bloque en lugar de
   en el enlace, que producia un boton dentro de otro.
   ------------------------------------------------------------ */
.wp-block-button.ihsc-btn{
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: inline-block !important;
}
.wp-block-button.ihsc-btn .wp-block-button__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 32px;
  border-radius: 8px;
  border: 2px solid transparent;
  font-family: Lato, system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 900;
  text-decoration: none;
  text-transform: none;
  box-shadow: none;
}
.wp-block-button.ihsc-btn--1 .wp-block-button__link{
  background-color: #1B3A6B !important; color: #fff !important; border-color: #1B3A6B;
}
.wp-block-button.ihsc-btn--2 .wp-block-button__link{
  background-color: #C9A227 !important; color: #0F2248 !important; border-color: #C9A227;
}
.wp-block-button.ihsc-btn--3 .wp-block-button__link{
  background-color: #FFFFFF !important; color: #1B3A6B !important; border-color: #1B3A6B;
}
.wp-block-button.ihsc-btn--3 .wp-block-button__link:hover{
  background-color: #F7F1E3 !important;
}
.wp-block-button.ihsc-btn--inv .wp-block-button__link{
  background-color: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.7);
}

/* ============================================================
   6 · EL FORMULARIO DE CONTACTO
   Contact Form 7 entrega los campos sin ningun estilo.
   ============================================================ */
.ihsc-form{
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid #EFE6D2;
  border-radius: 22px;
  padding: clamp(24px, 3.4vw, 44px);
  box-shadow: 0 18px 50px rgba(15,34,72,.09);
  font-family: Lato, system-ui, sans-serif;
  color: #14181F;
}
/* WordPress no aplica box-sizing global: sin esto los campos con
   ancho 100 % mas relleno se salen de su columna. */
.ihsc-form *,
.ihsc-form *::before,
.ihsc-form *::after{ box-sizing: border-box; }
.wpcf7 form.wpcf7-form{ margin: 0; }

.ihsc-form-fila{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}
@media (max-width: 640px){
  .ihsc-form-fila{ grid-template-columns: 1fr; }
}

.ihsc-campo{ margin: 0 0 20px; }
.ihsc-form label{
  display: block;
  font-size: .92rem;
  font-weight: 700;
  color: #0F2248;
  line-height: 1.4;
  margin: 0 0 8px;
}
.ihsc-req{ color: #756017; font-weight: 700; }
.ihsc-label-nota{ font-weight: 400; color: #5B6472; }
.ihsc-label-nota::before{ content: " — "; }
.ihsc-ayuda{
  display: block;
  margin-top: 7px;
  font-size: .82rem;
  color: #5B6472;
}

.ihsc-form .wpcf7-form-control-wrap{ display: block; }
/* borde a 3.05:1 sobre blanco. El del prototipo daba 1.46:1, por
   debajo del 3:1 que necesita el contorno de un campo. */
.ihsc-form input[type="text"],
.ihsc-form input[type="email"],
.ihsc-form input[type="tel"],
.ihsc-form select,
.ihsc-form textarea{
  width: 100%;
  max-width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid #9F9370;
  border-radius: 10px;
  background: #FFFFFF;
  font-family: Lato, system-ui, sans-serif;
  font-size: 1rem;
  color: #14181F;
  line-height: 1.5;
  appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.ihsc-form select{
  padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, #0F2248 50%), linear-gradient(135deg, #0F2248 50%, transparent 50%);
  background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.ihsc-form textarea{ min-height: 148px; resize: vertical; }
/* placeholder a 4.74:1. El gris del prototipo daba 3.11:1. */
.ihsc-form ::placeholder{ color: #6B7480; opacity: 1; }
.ihsc-form input:focus,
.ihsc-form select:focus,
.ihsc-form textarea:focus{
  outline: none;
  border-color: #756017;
  box-shadow: 0 0 0 3px rgba(201,162,39,.32);
}

.ihsc-aviso{
  margin: 4px 0 22px;
  padding: 14px 18px;
  border-radius: 10px;
  background: #F5E9C0;
  color: #0F2248;
  font-size: .92rem;
  line-height: 1.5;
}
.ihsc-aviso strong{ font-weight: 900; }

/* Contact Form 7 mete el texto DENTRO de la etiqueta, junto a la
   casilla. Por eso la fila se arma en la etiqueta y no en el
   parrafo: si se arma en el parrafo, el enlace parte el texto en
   trozos y cada trozo se va a una columna distinta. */
.ihsc-consent{ display: block; margin: 0 0 26px; }
.ihsc-consent .wpcf7-form-control-wrap{ display: block; }
.ihsc-consent .wpcf7-list-item{ margin: 0; }
.ihsc-consent .wpcf7-list-item label{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.55;
  color: #14181F;
  cursor: pointer;
}
.ihsc-consent input[type="checkbox"]{
  width: 21px;
  height: 21px;
  margin: 2px 0 0;
  accent-color: #756017;
  flex: 0 0 auto;
}
.ihsc-consent .wpcf7-list-item-label{ flex: 1 1 auto; }
.ihsc-consent a{ color: #756017; text-decoration: underline; }
.ihsc-consent a:hover{ text-decoration: none; }

.ihsc-enviar{ margin: 0; }
.ihsc-form input[type="submit"]{
  min-height: 52px;
  padding: 0 34px;
  border: 0;
  border-radius: 10px;
  background-color: #C9A227 !important;
  color: #0F2248 !important;
  font-family: Lato, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  transition: background-color .15s, transform .12s;
}
.ihsc-form input[type="submit"]:hover{ background-color: #BE9822 !important; }
.ihsc-form input[type="submit"]:active{ transform: translateY(1px); }
.ihsc-form input[type="submit"]:focus-visible{
  outline: 3px solid #0F2248;
  outline-offset: 2px;
}

.ihsc-form .wpcf7-not-valid{
  border-color: #8B1A1A;
  box-shadow: 0 0 0 3px rgba(139,26,26,.14);
}
.ihsc-form .wpcf7-not-valid-tip{
  display: block;
  margin-top: 7px;
  font-size: .82rem;
  font-weight: 700;
  color: #8B1A1A;
}
/* la caja de respuesta no debe ocupar sitio mientras esta vacia */
.wpcf7 .wpcf7-response-output:empty,
.wpcf7 .wpcf7-response-output[aria-hidden="true"]{
  display: none !important;
}
.wpcf7 .wpcf7-response-output{
  margin: 22px 0 0 !important;
  padding: 14px 18px !important;
  border: 0 !important;
  border-radius: 10px;
  font-size: .92rem;
  line-height: 1.5;
  background: #F5E9C0;
  color: #0F2248;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{
  background: #F6E2E2;
  color: #6B1414;
}
.wpcf7 form.sent .wpcf7-response-output{
  background: #E7F0E4;
  color: #1E4620;
}
.ihsc-form .wpcf7-spinner{ margin: 0 0 0 14px; }

/* ============================================================
   7 · LAS TARJETAS DE NOTICIAS
   Para el bloque «Bucle de consulta», no para «Ultimas entradas».
   ============================================================ */

/* 7.0 el ancho. Sin esto el bloque hereda el ancho de lectura del
   tema, 620 px, y las tres columnas quedan de 189 px: el texto se
   parte cada dos palabras y la tarjeta se estira hacia abajo. */
.ihsc-noticias{
  width: 100%;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 7.1 la rejilla */
.ihsc-noticias .wp-block-post-template{
  gap: 26px !important;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 900px){
  .ihsc-noticias .wp-block-post-template.is-layout-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 620px){
  .ihsc-noticias .wp-block-post-template.is-layout-grid{
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* 7.2 la tarjeta. height 100 % para que las tres midan igual
   aunque un titular ocupe dos lineas y otro solo una. */
.ihsc-noticia{
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FFFFFF;
  border: 1px solid #EFE6D2;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(15,34,72,.07);
  transition: box-shadow .18s, transform .18s;
}
.ihsc-noticia:hover{
  box-shadow: 0 20px 44px rgba(15,34,72,.13);
  transform: translateY(-3px);
}
.ihsc-noticia *{ box-sizing: border-box; }

/* 7.3 la imagen. Recorta a 16:10 para que las tres coincidan. Si
   la entrada no tiene imagen destacada queda el recuadro crema con
   el rotulo, en lugar de un hueco que descuadra la fila. */
.ihsc-noticia-media{
  position: relative;
  aspect-ratio: 16 / 10;
  background: #F5E9C0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
}
.ihsc-noticia-media .wp-block-post-featured-image{
  margin: 0;
  width: 100%;
  height: 100%;
}
.ihsc-noticia-media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ihsc-noticia-media:not(:has(img))::after{
  content: "FOTOGRAFÍA PROPIA";
  font-family: Lato, system-ui, sans-serif;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .13em;
  color: #756017;
}

/* 7.4 el cuerpo */
.ihsc-noticia-cuerpo{
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  padding: 26px 28px 28px;
}
.ihsc-noticia-fecha{
  margin: 0;
  font-family: Lato, system-ui, sans-serif;
  font-size: .85rem;
  color: #5B6472;
}
.ihsc-noticia-titulo{
  margin: 0;
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: 1.32rem !important;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.ihsc-noticia-titulo a{
  color: #0F2248 !important;
  text-decoration: none !important;
}
.ihsc-noticia-titulo a:hover{
  text-decoration: underline !important;
  text-decoration-color: #C9A227;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.ihsc-noticia-extracto{
  margin: 0;
  font-family: Lato, system-ui, sans-serif;
  font-size: .96rem;
  line-height: 1.6;
  color: #14181F;
}
.ihsc-noticia-extracto p{ margin: 0; }

/* margin-top auto: el «Leer mas» se pega al fondo, asi queda a la
   misma altura en las tres tarjetas. */
.ihsc-noticia-mas{
  margin: auto 0 0;
  font-family: Lato, system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 900;
  padding-top: 6px;
}
.ihsc-noticia-mas a{
  color: #756017 !important;
  text-decoration: none !important;
}
.ihsc-noticia-mas a:hover{ text-decoration: underline !important; }

/* ============================================================
   8 · DESPLAZAMIENTO A LAS SECCIONES DESDE EL MENU
   ============================================================ */
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

/* La barra de menu es fija, asi que sin reservar espacio el titulo
   de la seccion aterriza DEBAJO de ella y parece que el enlace
   apunto mal. Si le queda corto o largo, cambie solo este numero.
   Con la barra de administracion visible se suman 32 px, pero los
   visitantes no la ven. */
:target,
[id="colegios"],
[id="carisma"],
[id="proyectos"],
[id="formacion"],
[id="noticias"],
[id="contacto"],
.ihsc-seccion[id]{
  scroll-margin-top: 96px;
}

/* ============================================================
   9 · EL PIE DE PAGINA
   ============================================================ */

/* 9.1 el fondo segun la hora */
.ihsc-footer{
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 6vw, 84px) clamp(20px, 4vw, 56px) 28px;
  background-color: #0F2248;
  font-family: Lato, system-ui, sans-serif;
}
html[data-tema="azul"] .ihsc-footer{ background-color: #0F2248 !important; }
html[data-tema="rojo"] .ihsc-footer{ background-color: #6B1414 !important; }

/* 9.2 todo el texto en claro. Hace falta ser explicito porque
   theme.json fija el color de los titulos en Marino Profundo, y
   sobre azul oscuro eso es invisible. */
.ihsc-footer,
.ihsc-footer p,
.ihsc-footer li,
.ihsc-footer h2{
  color: #FFFFFF;
}
.ihsc-footer a{
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.ihsc-footer a:hover{
  text-decoration: underline !important;
  text-decoration-color: #C9A227;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.ihsc-footer a:focus-visible{
  outline: 2px solid #C9A227;
  outline-offset: 3px;
  border-radius: 3px;
}

/* 9.3 el contenido por encima de la marca de agua */
.ihsc-footer > .wp-block-columns,
.ihsc-footer > .ihsc-footer-baja{
  position: relative;
  z-index: 2;
}
.ihsc-footer-cols{ gap: clamp(24px, 3vw, 48px) !important; }
/* una sola fila en escritorio. Si los anchos de las columnas
   sumaran 100 %, los huecos sobran y la cuarta se cae a una
   segunda fila. */
@media (min-width: 782px){
  .ihsc-footer-cols{ flex-wrap: nowrap !important; }
  .ihsc-footer-cols > .wp-block-column{ min-width: 0; }
}

/* 9.4 el bloque de marca */
.ihsc-footer-marca{
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 22px;
}
.ihsc-footer-esc{ margin: 0 !important; flex: 0 0 auto; }
.ihsc-footer-esc img{ display: block; width: 56px; height: auto; }
.ihsc-footer-marca-txt{ display: block; }
.ihsc-footer-nombre{
  margin: 0 !important;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.1;
}
.ihsc-footer-provincia{
  margin: 4px 0 0 !important;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #C9A227 !important;
}
.ihsc-footer-mision{
  margin: 0 0 26px !important;
  font-size: .96rem;
  line-height: 1.65;
  max-width: 42ch;
  color: rgba(255,255,255,.85) !important;
}

/* 9.5 los rotulos de columna. Son titulos de verdad, h2, para que
   quien navega con lector de pantalla pueda saltar de una columna
   a otra. El aspecto pequeno lo da el CSS, no la jerarquia. */
.ihsc-footer-tit{
  margin: 0 0 20px !important;
  font-family: Lato, system-ui, sans-serif !important;
  font-size: .78rem !important;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #C9A227 !important;
}

/* 9.6 las listas de enlaces */
.ihsc-footer-lista{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.ihsc-footer-lista li{
  margin: 0 0 14px;
  font-size: .96rem;
  line-height: 1.45;
}
.ihsc-footer-lista li::marker{ content: none; }
.ihsc-footer-dato{
  margin: 0 0 16px !important;
  font-size: .96rem;
  line-height: 1.55;
}

/* 9.7 los iconos sociales. 45 % de blanco en el borde, no 35 %: al
   35 % daba 2.63:1 sobre el rojo, por debajo del 3:1 que necesita
   el contorno de un control. 44 px de lado para el dedo. */
.ihsc-footer-social{ gap: 12px !important; margin: 0 !important; }
.ihsc-footer-social .wp-block-social-link{
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 10px;
}
.ihsc-footer-social .wp-block-social-link-anchor{
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ihsc-footer-social .wp-block-social-link-anchor svg{ width: 20px; height: 20px; fill: #FFFFFF; }
.ihsc-footer-social .wp-block-social-link:hover{
  border-color: #C9A227;
  background-color: rgba(201,162,39,.16);
}

/* 9.8 la barra inferior */
.ihsc-footer-baja{
  margin-top: clamp(36px, 5vw, 64px) !important;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.16);
  gap: 14px 28px !important;
  align-items: center !important;
}
.ihsc-footer-baja p{
  margin: 0 !important;
  font-size: .86rem;
  line-height: 1.5;
  color: rgba(255,255,255,.70) !important;
}
.ihsc-footer-baja a{ color: rgba(255,255,255,.70) !important; }
.ihsc-footer-baja a:hover{ color: #FFFFFF !important; }

/* 9.9 la marca de agua. Se inserta a color y aqui se desvanece.
   TIENE QUE SER PNG CON FONDO TRANSPARENTE: con fondo se ve un
   rectangulo palido en la esquina, no un escudo.
   Se esconde en pantallas estrechas, donde estorba mas que aporta. */
.ihsc-footer-agua{
  position: absolute !important;
  right: -1.5%;
  bottom: -4%;
  width: clamp(200px, 22vw, 340px) !important;
  margin: 0 !important;
  opacity: .08;
  pointer-events: none;
  z-index: 1;
}
.ihsc-footer-agua img{ display: block; width: 100%; height: auto; }
@media (max-width: 780px){
  .ihsc-footer-agua{ display: none !important; }
}

/* 9.10 en movil, una columna */
@media (max-width: 780px){
  .ihsc-footer-cols{ gap: 34px !important; }
  .ihsc-footer-baja{ justify-content: flex-start !important; }
}

/* ------------------------------------------------------------
   10 · MENOS MOVIMIENTO
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .ihsc-noticia,
  .ihsc-noticia:hover{ transition: none; transform: none; }
  .ihsc-form input,
  .ihsc-form select,
  .ihsc-form textarea,
  .ihsc-form input[type="submit"]{ transition: none; }
}

/* ============================================================
   11 · LOS DATOS CON ICONO  ·  sede y horario
   Los dos iconos del prototipo (alfiler y reloj) nunca los porté
   a WordPress. Los SVG van copiados del prototipo, no redibujados,
   así que el trazo es exactamente el mismo.
   Los iconos son decorativos: el rótulo de al lado ya dice qué es
   cada dato, por eso llevan aria-hidden y no texto alternativo.
   Anunciarlos sería repetir dos veces lo mismo a quien usa lector
   de pantalla.
   ============================================================ */
.ihsc-datos{
  display: grid;
  gap: 20px;
  margin-top: 28px;
}
.ihsc-dato{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ihsc-dato svg{
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: #756017;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ihsc-dato-tit{
  display: block;
  font-family: Lato, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #0F2248;
  line-height: 1.35;
}
.ihsc-dato-txt{
  display: block;
  margin-top: 3px;
  font-family: Lato, system-ui, sans-serif;
  font-size: .92rem;
  line-height: 1.55;
  color: #5B6472;
}

/* ============================================================
   12 · TARJETAS DE VIDEO
   WordPress no tiene «video destacado»: la imagen destacada solo
   acepta imagenes. La tarjeta muestra entonces un fotograma del
   video con este distintivo de reproduccion encima, y el video
   vive dentro del articulo.
   Se activa solo: basta con que la entrada tenga la categoria o la
   etiqueta «video». WordPress escribe esa categoria como clase en
   cada elemento de la lista, y el CSS la aprovecha.
   El distintivo es decorativo. Si quiere que un lector de pantalla
   lo anuncie, escriba la palabra Video en el propio titular: lo
   que se dibuja con CSS no se anuncia de forma fiable.
   ============================================================ */
.wp-block-post.category-video .ihsc-noticia-media::before,
.wp-block-post.tag-video .ihsc-noticia-media::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2064'%3E%3Ccircle%20cx='32'%20cy='32'%20r='30'%20fill='%23FFFFFF'%20fill-opacity='0.94'/%3E%3Cpath%20d='M26%2021.5%20L45%2032%20L26%2042.5%20Z'%20fill='%230F2248'/%3E%3C/svg%3E") no-repeat center / 58px 58px,
    radial-gradient(circle at 50% 50%, rgba(15,34,72,.34) 0%, rgba(15,34,72,.12) 58%, rgba(15,34,72,0) 76%);
  transition: background-size 180ms ease;
}
/* Al pasar el puntero, el distintivo crece un poco: la misma senal
   que ya da la tarjeta al levantarse. */
.wp-block-post.category-video .ihsc-noticia:hover .ihsc-noticia-media::before,
.wp-block-post.tag-video .ihsc-noticia:hover .ihsc-noticia-media::before{
  background-size: 66px 66px, auto;
}
@media (prefers-reduced-motion: reduce){
  .wp-block-post.category-video .ihsc-noticia-media::before{ transition: none }
  .wp-block-post.category-video .ihsc-noticia:hover .ihsc-noticia-media::before,
  .wp-block-post.tag-video .ihsc-noticia:hover .ihsc-noticia-media::before{
    background-size: 58px 58px, auto;
  }
}
/* Si la entrada de video aun no tiene fotograma, el rotulo del
   hueco lo dice, en lugar de pedir una fotografia. */
.wp-block-post.category-video .ihsc-noticia-media:not(:has(img))::after,
.wp-block-post.tag-video .ihsc-noticia-media:not(:has(img))::after{
  content: "FALTA EL FOTOGRAMA";
  align-self: end;
  margin-bottom: 18px;
}

/* ============================================================
   13 · LA PAGINA DE ARCHIVO  ·  categorias, etiquetas, fechas
   La plantilla «Archivo» del tema no sabe nada de las tarjetas de
   la portada, asi que /category/noticias/ salia con el listado de
   fabrica: titulos dorados subrayados, fotos sin recortar y una
   linea de datos en ingles a medio traducir.
   Estas reglas visten la cabecera y la paginacion. Las tarjetas en
   si reutilizan la seccion 7: una sola definicion para portada y
   archivo, no dos que se separan con el tiempo.
   ============================================================ */
.ihsc-archivo{ padding-block: clamp(40px, 6vw, 76px) }

.ihsc-archivo-cab{ text-align: center; margin-bottom: clamp(32px, 4vw, 56px) }
.ihsc-archivo-tit{
  margin: 6px 0 0 !important;
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: clamp(30px, 3.6vw, 44px) !important;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: #0F2248 !important;
}
.ihsc-archivo-desc{
  margin: 18px auto 0 !important;
  max-width: 62ch;
  font-family: Lato, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #5B6472;
}

/* Paginacion. 44 px de lado minimo: es lo que necesita un dedo.
   El borde va en #8E856A y no en el color de linea de la marca,
   porque ese sobre crema se queda en 2.71:1, por debajo del 3:1
   que pide el contorno de un control. Aqui da 3.68 sobre blanco y
   3.26 sobre crema. */
.ihsc-paginacion{
  margin-top: clamp(36px, 5vw, 64px) !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  font-family: Lato, system-ui, sans-serif;
}
.ihsc-paginacion .wp-block-query-pagination-numbers{
  display: flex;
  gap: 8px;
  align-items: center;
}
.ihsc-paginacion a,
.ihsc-paginacion .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #8E856A;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 700;
  color: #1B3A6B !important;
  text-decoration: none !important;
  background: #FFFFFF;
}
.ihsc-paginacion a:hover{
  background: #F5E9C0;
  border-color: #756017;
}
.ihsc-paginacion .page-numbers.current{
  background: #1B3A6B;
  border-color: #1B3A6B;
  color: #FFFFFF !important;
}
.ihsc-paginacion .wp-block-query-pagination-previous,
.ihsc-paginacion .wp-block-query-pagination-next{
  color: #756017 !important;
  font-weight: 900;
}
.ihsc-paginacion a:focus-visible{
  outline: 3px solid #0F2248;
  outline-offset: 2px;
}

/* Cuando no hay entradas. Sale centrado y con la misma voz que el
   resto: decir que no hay nada tambien es diseno. */
.ihsc-sin-entradas{
  margin: 0 auto !important;
  max-width: 46ch;
  text-align: center;
  font-family: Lato, system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #5B6472;
}