/*
Theme Name: CEIP Villa de Guadarrama
Theme URI: https://villadeguadarrama.com
Author: CEIP Villa de Guadarrama
Description: Tema de bloques (Full Site Editing) para villadeguadarrama.com. Aplica la paleta azul eléctrico y gris, la tipografía, el fondo con manchas azules sutiles y la estructura de cabecera y pie de página del estilo aprobado. El contenido de cabecera, pie y páginas se rellena desde el Editor del sitio.
Version: 1.0.10
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ceip-villa-de-guadarrama
*/

/* ============ RESET BÁSICO ============
   Con esto, el padding y el borde de cualquier elemento se cuentan DENTRO de su
   ancho (no se suman aparte), que es lo que evita que un campo o caja con
   padding se salga de su columna. */
*,
*::before,
*::after{ box-sizing: border-box; }

/* ============ FONDO GLOBAL ============
   Mismas manchas azules sutiles, fijas al hacer scroll, que en la propuesta aprobada. */
body{
  background:
    radial-gradient(640px 500px at 6% -4%, color-mix(in srgb, var(--wp--preset--color--azul-electrico) 12%, transparent), transparent),
    radial-gradient(520px 440px at 96% 30%, color-mix(in srgb, var(--wp--preset--color--azul-electrico) 8%, transparent), transparent),
    radial-gradient(580px 480px at 12% 96%, color-mix(in srgb, var(--wp--preset--color--azul-electrico) 9%, transparent), transparent),
    var(--wp--preset--color--fondo);
  background-attachment: fixed;
}

/* ============ CABECERA ============ */
.site-header-bg{
  background:
    radial-gradient(320px 180px at 12% -80%, color-mix(in srgb, var(--wp--preset--color--azul-electrico) 40%, transparent), transparent),
    radial-gradient(280px 200px at 88% 180%, color-mix(in srgb, var(--wp--preset--color--azul-electrico) 25%, transparent), transparent),
    linear-gradient(120deg, var(--wp--preset--color--azul-marca), var(--wp--preset--color--azul-marca-2));
  border-bottom: 1px solid rgba(0,0,0,.2);
}
.site-header-bg .wp-block-site-title,
.site-header-bg .wp-block-site-title a{ color: var(--wp--preset--color--texto-sobre-azul); text-decoration: none; }
.site-header-bg .wp-block-navigation{ color: rgba(255,255,255,.85); }
.site-header-bg .wp-block-navigation a{ color: rgba(255,255,255,.85); }
.site-header-bg .wp-block-navigation a:hover{ color: #fff; }
.site-header-bg .wp-block-navigation__responsive-container-open svg,
.site-header-bg .wp-block-navigation__responsive-container-close svg{ fill: var(--wp--preset--color--texto-sobre-azul); }

/* ============ NAVEGACIÓN: SUBMENÚS (ESCRITORIO) ============
   Por defecto el submenú de WordPress es una caja blanca plana con un borde
   fino. Aquí lo convertimos en una tarjeta flotante azul marca (a juego con
   la cabecera, radio, sombra y aire respecto al menú), con texto blanco en
   reposo y un chip claro con texto azul en el estado "hover" de cada enlace. */
.site-header-bg .wp-block-navigation .wp-block-navigation__submenu-container{
  margin-top: 10px;
  padding: 8px;
  border: none;
  border-radius: 16px;
  background: var(--wp--preset--color--azul-marca);
  box-shadow: 0 20px 40px -20px rgba(23,35,82,.35), 0 4px 14px rgba(23,35,82,.14);
  min-width: 220px;
  transform: translateY(4px);
}
/* El margin-top de arriba deja un hueco de 10px sin ningún elemento entre el
   ítem del menú y la tarjeta del submenú. Al mover el ratón en línea recta
   hacia el submenú, el puntero cruza ese hueco "vacío", se pierde el :hover
   del <li> padre y el submenú se cierra antes de poder leerlo o pulsarlo.
   Este pseudo-elemento invisible tapa exactamente ese hueco para que el
   :hover no se interrumpa al bajar del ítem a la tarjeta. */
.site-header-bg .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
@media (min-width: 782px){
  .site-header-bg .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{
    margin-top: 0;
    margin-left: 6px;
  }
  /* En submenús anidados el hueco pasa a ser horizontal (margin-left) y ya
     lo cubre el puente que trae WordPress por defecto, así que aquí se
     desactiva el puente vertical para que no se superponga sobre el ítem
     padre. */
  .site-header-bg .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before{
    top: 0;
    height: 0;
  }
  /* Al usar justifyContent "right" en el menú, WordPress abre por defecto
     los submenús de segundo nivel hacia la IZQUIERDA de su padre (para no
     salirse por el borde derecho de la pantalla). Aquí se fuerza a que se
     abran hacia la derecha, como el resto de submenús. */
  .site-header-bg .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{
    left: 100%;
    right: auto;
  }
}
@media not (prefers-reduced-motion){
  .site-header-bg .wp-block-navigation .has-child .wp-block-navigation__submenu-container{
    transition: opacity .18s ease, transform .18s ease;
  }
}
.site-header-bg .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
.site-header-bg .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
.site-header-bg .wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container{
  transform: translateY(0);
}
.site-header-bg .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  border-radius: 10px;
  padding: .65em .9em;
  color: var(--wp--preset--color--texto-sobre-azul);
  font-weight: 600;
  white-space: nowrap;
}
.site-header-bg .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-header-bg .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus{
  background: var(--wp--preset--color--azul-tinte);
  color: var(--wp--preset--color--azul-electrico);
}

/* ============ NAVEGACIÓN: DESPLEGABLE (MÓVIL) ============
   El desplegable a pantalla completa heredaba la alineación "derecha" del
   menú de escritorio (quedaba en bandera, pegado a la derecha) y los
   elementos no tenían separación entre ellos. Lo forzamos a la izquierda,
   con más aire y una entrada más suave en vez del parpadeo por defecto. */
.site-header-bg .wp-block-navigation__responsive-container.is-menu-open{
  --navigation-layout-justification-setting: flex-start;
}
@media not (prefers-reduced-motion){
  .site-header-bg .wp-block-navigation__responsive-container.is-menu-open{
    animation: ceip-vg-menu-fade-in .28s ease-out forwards;
  }
}
@keyframes ceip-vg-menu-fade-in{
  from{ opacity: 0; transform: translateY(-10px); }
  to{ opacity: 1; transform: translateY(0); }
}
.site-header-bg .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  width: 100%;
  gap: .15rem;
}
.site-header-bg .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.site-header-bg .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child{
  border-bottom: none;
}
.site-header-bg .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  width: 100%;
  padding: .85em 0;
  font-size: 1.15rem;
  font-weight: 600;
}
/* El menú de escritorio usa justifyContent "right", lo que fija
   --navigation-layout-justification-setting en flex-end. Los ítems de
   primer nivel no se notan porque ya fuerzan width:100% arriba, pero el
   <ul> del submenú no tenía ancho propio y "flex-end" lo encogía y lo
   empujaba a la derecha, dejando sus enlaces descolgados respecto a las
   opciones principales (que quedan a la izquierda). */
.site-header-bg .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
  width: 100% !important;
  /* El margin-top:10px de la tarjeta flotante de escritorio (más abajo) no
     estaba limitado a escritorio, y se sumaba al padding-top que WordPress
     mete por defecto en el acordeón móvil, dejando un hueco enorme entre
     la opción y su primer enlace de submenú. */
  margin-top: 0;
  padding-top: 6px;
}
.site-header-bg .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  font-size: 1rem;
  font-weight: 400;
  opacity: .85;
  padding: .6em 0;
}
.site-header-bg .wp-block-navigation__responsive-container-open,
.site-header-bg .wp-block-navigation__responsive-container-close{
  padding: 8px;
  border-radius: 999px;
  transition: background-color .15s ease;
}
.site-header-bg .wp-block-navigation__responsive-container-open:hover,
.site-header-bg .wp-block-navigation__responsive-container-close:hover{
  background-color: rgba(255,255,255,.12);
}

/* ============ PIE DE PÁGINA ============ */
.site-footer-bg{
  background:
    radial-gradient(560px 420px at 6% -12%, color-mix(in srgb, var(--wp--preset--color--azul-electrico) 24%, transparent), transparent),
    radial-gradient(480px 400px at 96% 92%, color-mix(in srgb, var(--wp--preset--color--azul-electrico) 16%, transparent), transparent),
    var(--wp--preset--color--azul-marca);
}
.site-footer-bg a{ color: var(--wp--preset--color--texto-sobre-azul); text-decoration: none; transition: color .2s ease, transform .2s ease; }
.site-footer-bg .wp-block-social-link a{ color: var(--wp--preset--color--texto-sobre-azul); }
.site-footer-bg .wp-block-social-link a:hover{ transform: scale(1.15); }
.site-footer-bg .wp-block-navigation a{ color: var(--wp--preset--color--texto-sobre-azul-suave); }
.site-footer-bg .wp-block-navigation a:hover{ color: var(--wp--preset--color--texto-sobre-azul); }
.site-footer-bg ul.wp-block-list{ list-style: none; margin-left: 0; padding-left: 0; }
.site-footer-bg ul.wp-block-list a{ display: inline-block; color: var(--wp--preset--color--texto-sobre-azul-suave); }
.site-footer-bg ul.wp-block-list a:hover{ color: var(--wp--preset--color--texto-sobre-azul); transform: translateX(4px); }
.site-footer-bottom{
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: 2.5rem;
  padding-top: 1.1rem;
}

/* ============ ESTILOS DE ENCABEZADO ============
   "Antetítulo": rayita azul + texto azul, para usar encima del título normal (que queda en negro por defecto). */
.wp-block-heading.is-style-antetitulo{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--pequeno);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wp--preset--color--azul-electrico);
}
.wp-block-heading.is-style-antetitulo::before{
  content: "";
  width: 16px;
  height: 2px;
  flex: none;
  border-radius: 2px;
  background: var(--wp--preset--color--azul-electrico);
}

/* "Título de sección": grande y centrado, con una rayita azul debajo centrada.
   Para usar cuando un título va solo en medio, separando una sección de la página. */
.wp-block-heading.is-style-titulo-seccion{
  text-align: center;
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 1.1rem;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.2;
  position: relative;
}
.wp-block-heading.is-style-titulo-seccion::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--wp--preset--color--azul-electrico), var(--wp--preset--color--azul-marca-2));
}

/* ============ TARJETAS (COLUMNA) ============
   Para usar dentro de un bloque Columnas: selecciona una Columna y aplícale el estilo
   desde el panel "Estilos" del bloque. */

/* "Tarjeta etapa": caja con icono arriba, pensada para presentar una etapa/servicio.
   Si el primer bloque de la columna es una Imagen, se muestra como icono en una ficha azul. */
.wp-block-column.is-style-tarjeta-etapa{
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--borde);
  border-radius: 30px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.wp-block-column.is-style-tarjeta-etapa:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px color-mix(in srgb, var(--wp--preset--color--azul-electrico) 32%, transparent), 0 4px 10px rgba(38,32,20,.06);
  border-color: color-mix(in srgb, var(--wp--preset--color--azul-electrico) 45%, var(--wp--preset--color--borde));
}
.wp-block-column.is-style-tarjeta-etapa > .wp-block-image:first-child{
  width: 46px;
  margin: 0;
}
.wp-block-column.is-style-tarjeta-etapa > .wp-block-image:first-child img{
  width: 46px;
  height: 46px;
  object-fit: contain;
  padding: 11px;
  background: var(--wp--preset--color--azul-tinte);
  border-radius: 18px;
}

/* "Tarjeta etapa (azul)": igual que "Tarjeta etapa" (mismos márgenes, bordes,
   radio, padding y efecto hover) pero con fondo azul de marca y texto blanco. */
.wp-block-column.is-style-tarjeta-etapa-azul{
  background: var(--wp--preset--color--azul-marca);
  border: 1px solid var(--wp--preset--color--azul-marca);
  border-radius: 30px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--wp--preset--color--texto-sobre-azul);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.wp-block-column.is-style-tarjeta-etapa-azul:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px color-mix(in srgb, var(--wp--preset--color--azul-electrico) 32%, transparent), 0 4px 10px rgba(38,32,20,.06);
  border-color: color-mix(in srgb, var(--wp--preset--color--azul-electrico) 45%, var(--wp--preset--color--azul-marca));
}
.wp-block-column.is-style-tarjeta-etapa-azul h1,
.wp-block-column.is-style-tarjeta-etapa-azul h2,
.wp-block-column.is-style-tarjeta-etapa-azul h3,
.wp-block-column.is-style-tarjeta-etapa-azul h4,
.wp-block-column.is-style-tarjeta-etapa-azul h5,
.wp-block-column.is-style-tarjeta-etapa-azul h6{ color: var(--wp--preset--color--texto-sobre-azul); }
.wp-block-column.is-style-tarjeta-etapa-azul p{ color: var(--wp--preset--color--texto-sobre-azul-suave); }
.wp-block-column.is-style-tarjeta-etapa-azul a{ color: var(--wp--preset--color--texto-sobre-azul); }
.wp-block-column.is-style-tarjeta-etapa-azul > .wp-block-image:first-child{
  width: 46px;
  margin: 0;
}
.wp-block-column.is-style-tarjeta-etapa-azul > .wp-block-image:first-child img{
  width: 46px;
  height: 46px;
  object-fit: contain;
  padding: 11px;
  background: rgba(255,255,255,.16);
  border-radius: 18px;
}

/* "Tarjeta con imagen": mitad foto (a bordes, arriba) y mitad texto (con margen, abajo).
   Coloca primero un bloque Imagen y debajo los bloques de texto. Sin fecha, para uso general. */
.wp-block-column.is-style-tarjeta-imagen{
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--borde);
  border-radius: 18px;
  overflow: hidden;
  padding: 0;
  transition: transform .18s, box-shadow .18s;
}
.wp-block-column.is-style-tarjeta-imagen:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px color-mix(in srgb, var(--wp--preset--color--azul-electrico) 32%, transparent), 0 4px 10px rgba(38,32,20,.06);
}
.wp-block-column.is-style-tarjeta-imagen > .wp-block-image:first-child{
  margin: 0;
}
.wp-block-column.is-style-tarjeta-imagen > .wp-block-image:first-child img{
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.wp-block-column.is-style-tarjeta-imagen > *{
  margin-left: 18px;
  margin-right: 18px;
}
.wp-block-column.is-style-tarjeta-imagen > *:first-child{
  margin-left: 0;
  margin-right: 0;
}
.wp-block-column.is-style-tarjeta-imagen > *:last-child{
  margin-bottom: 18px;
}
.wp-block-column.is-style-tarjeta-imagen > *:not(:first-child){
  margin-top: 10px;
}

/* ============ BOTONES ============
   Relleno (por defecto) y "Contorno" (estilo nativo del bloque Botón). */
.wp-block-button__link{
  transition: background-color .15s, color .15s, border-color .15s;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{
  background-color: var(--wp--preset--color--azul-hover);
}
.wp-block-button.is-style-outline .wp-block-button__link{
  border: 1.5px solid var(--wp--preset--color--azul-electrico);
  color: var(--wp--preset--color--azul-electrico);
  background-color: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background-color: var(--wp--preset--color--azul-tinte);
}

/* "Tarjeta documento": para enlazar un PDF o documento como una caja entera
   clicable, con icono automático. Como es un bloque Botón normal, el enlace
   es toda la caja sin necesidad de nada más: solo escribe el texto y pon el
   enlace en el propio bloque Botón. */
.wp-block-button.is-style-tarjeta-documento .wp-block-button__link{
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  position: relative;
  background-color: var(--wp--preset--color--superficie);
  color: var(--wp--preset--color--tinta);
  border: 1px solid var(--wp--preset--color--borde);
  border-radius: 16px;
  padding: 14px 20px 14px 70px;
  font-weight: 700;
  text-align: left;
  transition: transform .18s, box-shadow .18s, border-color .18s, background-color .18s;
}
.wp-block-button.is-style-tarjeta-documento .wp-block-button__link::before{
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 42px;
  height: 42px;
  transform: translateY(-50%);
  border-radius: 12px;
  background-color: var(--wp--preset--color--azul-tinte);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232151FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}
.wp-block-button.is-style-tarjeta-documento .wp-block-button__link:hover{
  background-color: var(--wp--preset--color--superficie);
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--wp--preset--color--azul-electrico) 45%, var(--wp--preset--color--borde));
  box-shadow: 0 20px 40px -20px color-mix(in srgb, var(--wp--preset--color--azul-electrico) 32%, transparent), 0 4px 10px rgba(38,32,20,.06);
}

/* "Tarjeta documento" con 2 líneas (título + detalle): el bloque Botón no permite
   dos líneas con distinto peso, así que esta versión va en un bloque "HTML
   personalizado". Añade uno con este contenido, cambiando el enlace y los textos:

   <a class="tarjeta-doc" href="RUTA_AL_PDF" target="_blank" rel="noopener">
     <span class="tarjeta-doc__icono" aria-hidden="true"></span>
     <span class="tarjeta-doc__texto">
       <strong>Título del documento</strong>
       <span>Detalle o "PDF"</span>
     </span>
   </a>
*/
.tarjeta-doc{
  display: flex;
  align-items: center;
  gap: 14px;
  background-color: var(--wp--preset--color--superficie);
  color: var(--wp--preset--color--tinta);
  border: 1px solid var(--wp--preset--color--borde);
  border-radius: 16px;
  padding: 1.1rem 1.3rem;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.tarjeta-doc:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--wp--preset--color--azul-electrico) 45%, var(--wp--preset--color--borde));
  box-shadow: 0 20px 40px -20px color-mix(in srgb, var(--wp--preset--color--azul-electrico) 32%, transparent), 0 4px 10px rgba(38,32,20,.06);
}
.tarjeta-doc__icono{
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background-color: var(--wp--preset--color--azul-tinte);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232151FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}
.tarjeta-doc__texto{ display: flex; flex-direction: column; gap: 2px; }
.tarjeta-doc__texto strong{ font-size: .95rem; line-height: 1.3; font-weight: 700; }
.tarjeta-doc__texto span{ font-size: .8125rem; font-weight: 400; color: var(--wp--preset--color--tinta-suave); }

/* ============ IMÁGENES ============ */
.wp-block-image.is-style-redondeada img{
  border-radius: 18px;
  box-shadow:
    0 10px 24px -12px color-mix(in srgb, var(--wp--preset--color--azul-electrico) 32%, transparent),
    0 2px 6px rgba(38,32,20,.06);
}

/* ============ COLUMNAS: evitar desbordes ============
   Si un hijo (imagen, tabla, iframe de reCAPTCHA…) es más ancho que la columna,
   por defecto la desborda y pisa la columna de al lado. Esto lo evita. */
.wp-block-column{ min-width: 0; }
.wp-block-column img,
.wp-block-column svg,
.wp-block-column video,
.wp-block-column iframe,
.wp-block-column table,
.wp-block-column .wpcf7-form{ max-width: 100%; }

/* ============ TABLAS RESPONSIVE (bloque HTML personalizado) ============
   Para tablas anchas (horarios, rutas…) pegadas como HTML personalizado.
   Importante: en el bloque solo va el HTML de abajo, SIN la etiqueta
   <style> — WordPress la elimina al guardar si el usuario no es
   Administrador, y sin este CSS la tabla se ve fatal en móvil.

   <div class="mi-tabla-responsiva">
     <table>...</table>
   </div>
*/
.mi-tabla-responsiva{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 20px;
}
.mi-tabla-responsiva table{
  min-width: 550px;
}

/* ============ FORMULARIOS ============
   Gutenberg no trae un bloque de formulario con varios campos de serie (eso lo añade un
   plugin, p. ej. Contact Form 7, WPForms o el bloque "Formulario" de Jetpack). Estos estilos
   van sobre las etiquetas HTML normales (input, textarea, select, botón), así que se aplican
   igual sea cual sea el plugin que acabes usando. El bloque nativo Buscar (core/search)
   también queda cubierto. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
select,
textarea,
.wp-block-search__input{
  box-sizing: border-box;
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.95rem;
  color: var(--wp--preset--color--tinta);
  background-color: var(--wp--preset--color--superficie);
  border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--tinta-suave) 35%, var(--wp--preset--color--borde));
  border-radius: 14px;
  padding: 11px 13px;
  width: 100%;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
textarea{ min-height: 120px; resize: vertical; }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus,
.wp-block-search__input:focus{
  outline: none;
  border-color: var(--wp--preset--color--azul-electrico);
  background-color: var(--wp--preset--color--superficie);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--azul-electrico) 18%, transparent);
}

label{
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  font-size: .84rem;
}

input[type="checkbox"],
input[type="radio"]{
  accent-color: var(--wp--preset--color--azul-electrico);
  width: 16px;
  height: 16px;
}

input[type="submit"],
button[type="submit"],
.wp-block-search__button{
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 12px 22px;
  background-color: var(--wp--preset--color--azul-electrico);
  color: var(--wp--preset--color--texto-sobre-azul);
  transition: background-color .15s;
}
input[type="submit"]:hover,
button[type="submit"]:hover,
.wp-block-search__button:hover{
  background-color: var(--wp--preset--color--azul-hover);
}

/* ============ CONTACT FORM 7 ============ */
.wpcf7-form p{ margin: 0 0 20px; }
.wpcf7-form label{ display: block; margin-bottom: 7px; }

.wpcf7-not-valid{
  border-color: var(--wp--preset--color--error) !important;
}
.wpcf7-not-valid-tip{
  display: block;
  margin-top: 6px;
  font-size: .78rem;
  color: var(--wp--preset--color--error);
}

.wpcf7-response-output{
  margin-top: 1.5rem !important;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-size: .92rem;
}
.wpcf7-form.sent .wpcf7-response-output{
  background-color: var(--wp--preset--color--exito-suave);
  border-color: color-mix(in srgb, var(--wp--preset--color--exito) 35%, transparent);
  color: var(--wp--preset--color--tinta);
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output{
  background-color: var(--wp--preset--color--error-suave);
  border-color: color-mix(in srgb, var(--wp--preset--color--error) 35%, transparent);
  color: var(--wp--preset--color--tinta);
}

/* ============ CUADRO AZUL (estilo de bloque Columna) ============
   Tarjeta sólida en azul de marca, pensada para bloques de contacto directo
   (teléfonos, horarios…). Para las filas con divisor, añade la clase
   adicional "fila" a cada grupo hijo dentro de la columna (Ajustes de
   bloque > Avanzado). */
.wp-block-column.is-style-cuadro-azul{
  box-sizing: border-box;
  background:
    radial-gradient(420px 300px at 100% 0%, color-mix(in srgb, var(--wp--preset--color--azul-electrico) 30%, transparent), transparent),
    var(--wp--preset--color--azul-marca);
  color: var(--wp--preset--color--texto-sobre-azul);
  border-radius: 16px;
  padding: 1.75rem 1.6rem;
}
.wp-block-column.is-style-cuadro-azul h1,
.wp-block-column.is-style-cuadro-azul h2,
.wp-block-column.is-style-cuadro-azul h3,
.wp-block-column.is-style-cuadro-azul h4,
.wp-block-column.is-style-cuadro-azul h5,
.wp-block-column.is-style-cuadro-azul h6{ color: var(--wp--preset--color--texto-sobre-azul); }
.wp-block-column.is-style-cuadro-azul p{ color: var(--wp--preset--color--texto-sobre-azul-suave); }
.wp-block-column.is-style-cuadro-azul a{ color: var(--wp--preset--color--texto-sobre-azul); text-decoration: none; }
.wp-block-column.is-style-cuadro-azul a:hover{ text-decoration: underline; }
.wp-block-column.is-style-cuadro-azul .fila{ padding: .65rem 0; }
.wp-block-column.is-style-cuadro-azul .fila + .fila{ border-top: 1px solid rgba(255,255,255,.14); }

/* ============ CUADRO BLANCO (estilo de bloque Columna) ============
   Misma tarjeta pero en versión clara, sin acento lateral, para usar donde
   el azul sólido resulte demasiado. Mismo sistema de filas con clase "fila". */
.wp-block-column.is-style-cuadro-blanco{
  box-sizing: border-box;
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--borde);
  border-radius: 16px;
  padding: 1.75rem 1.6rem;
  color: var(--wp--preset--color--tinta);
}
.wp-block-column.is-style-cuadro-blanco p{ color: var(--wp--preset--color--tinta-suave); }
.wp-block-column.is-style-cuadro-blanco a{ color: var(--wp--preset--color--azul-electrico); }
.wp-block-column.is-style-cuadro-blanco a:hover{ color: var(--wp--preset--color--azul-hover); }
.wp-block-column.is-style-cuadro-blanco .fila{ padding: .65rem 0; }
.wp-block-column.is-style-cuadro-blanco .fila + .fila{ border-top: 1px solid var(--wp--preset--color--borde); }

/* ============ GRUPOS (SEPARACIÓN) ============
   Para usar en un bloque Grupo: selecciona el Grupo y aplícale el estilo
   desde el panel "Estilos" del bloque. */

/* "Separador de sección": añade bastante espacio arriba y abajo del grupo,
   para marcar el cambio de una sección a otra dentro de la misma página. */
.wp-block-group.is-style-separador-seccion{
  padding-top: clamp(2.75rem, 6vw, 5rem);
  padding-bottom: clamp(2.75rem, 6vw, 5rem);
}

/* ============ ANIMACIÓN DE ENTRADA ============
   Activable desde el panel "Animación de entrada" en bloques Grupo y Columna.
   La clase "tiene-js" la pone un script en el <head> ANTES de pintar la página
   (ver functions.php), así el bloque nace oculto y no hay parpadeo. Si JS
   estuviera desactivado, no se añade "tiene-js" y el bloque se ve siempre. */
html.tiene-js .anim-entrada{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
html.tiene-js .anim-entrada.en-vista{
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  html.tiene-js .anim-entrada{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============ HERO PORTADA (patrón) ============ */
.wp-block-cover.hero-portada .wp-block-cover__inner-container{
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* El párrafo del hero lleva max-width:46ch y alineación a la izquierda desde
   el editor; en móvil eso lo deja pegado al borde en vez de centrado. */
@media (max-width: 599px){
  .wp-block-cover.hero-portada .wp-block-cover__inner-container > p{
    max-width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Entrada escalonada desde la izquierda: título, luego texto, luego botones.
   Es un hero (lo primero que se ve al cargar la página), así que la animación
   se dispara sola al cargar, sin esperar a scroll. */
@media not (prefers-reduced-motion){
  .wp-block-cover.hero-portada .wp-block-cover__inner-container > .wp-block-heading,
  .wp-block-cover.hero-portada .wp-block-cover__inner-container > p,
  .wp-block-cover.hero-portada .wp-block-cover__inner-container > .wp-block-buttons{
    opacity: 0;
    animation: hero-entra-izquierda .7s ease-out forwards;
  }
  .wp-block-cover.hero-portada .wp-block-cover__inner-container > .wp-block-heading{ animation-delay: .1s; }
  .wp-block-cover.hero-portada .wp-block-cover__inner-container > p{ animation-delay: .35s; }
  .wp-block-cover.hero-portada .wp-block-cover__inner-container > .wp-block-buttons{ animation-delay: .6s; }
}
@keyframes hero-entra-izquierda{
  from{ opacity: 0; transform: translateX(-40px); }
  to{ opacity: 1; transform: translateX(0); }
}

/* ============ AVISO DE COOKIES ============ */
.aviso-cookies{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--wp--preset--color--azul-marca);
  color: var(--wp--preset--color--texto-sobre-azul);
  box-shadow: 0 -4px 24px rgba(0,0,0,.18);
  transform: translateY(100%);
  transition: transform .4s ease-out;
}
.aviso-cookies.esta-visible{
  transform: translateY(0);
}
.aviso-cookies__texto{
  margin: 0;
  max-width: 62ch;
  font-size: var(--wp--preset--font-size--pequeno);
  color: var(--wp--preset--color--texto-sobre-azul-suave);
}
.aviso-cookies__texto a{
  color: var(--wp--preset--color--texto-sobre-azul);
  text-decoration: underline;
}
.aviso-cookies__acciones{
  display: flex;
  flex-shrink: 0;
  gap: .75rem;
}
.aviso-cookies__boton{
  border: none;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--pequeno);
  cursor: pointer;
  background: var(--wp--preset--color--superficie);
  color: var(--wp--preset--color--azul-marca);
}
.aviso-cookies__boton:hover{
  background: var(--wp--preset--color--texto-sobre-azul);
}
@media (prefers-reduced-motion: reduce){
  .aviso-cookies{ transition: none; }
}

/* ============ VARIOS ============ */
:focus-visible{ outline: 2px solid var(--wp--preset--color--azul-electrico); outline-offset: 2px; }