/* Capa `base`: la declara este mismo archivo. Antes se la asignaba el
   `@import ... layer(base)` de main.css; ahora cada hoja se encola por
   separado para que descarguen en paralelo. Ver inc/enqueue.php. */
@layer base {
  /* ==========================================
   VARIABLES (temas claro/oscuro y tokens)
   ========================================== */
  :root:has(input.theme-controller[value="light"]:checked),
  [data-theme="light"] {
    /* ==========================================
     1. COLORES BASE (El esqueleto y fondos)
     ========================================== */
    /* Fondo principal de la web (100% luminosidad -> Blanco puro) */
    --color-base-100: oklch(100% 0 0);

    /* Capa intermedia para tarjetas o secciones (98% luminosidad -> Gris casi blanco) */
    --color-base-200: oklch(98% 0 0);

    /* Capa profunda, bordes sutiles o fondos de inputs (95% luminosidad -> Gris claro) */
    --color-base-300: oklch(94% 0 0);

    /* Color del texto principal sobre el fondo blanco (Un tono gris muy oscuro / casi negro) */
    --color-base-content: oklch(21% 0.006 285.885);

    /* Fondo de items/tarjetas; se sobreescribe en section--light/primary-light/secondary-light/halflight */
    --item-bg: var(--color-base-200);

    /* Fondo de componentes con items sobre sección blanca; se sobreescribe en secciones de color */
    --bg-component: var(--color-base-200);

    /* ==========================================
     2. COLORES DE IDENTIDAD Y MARCA
     ========================================== */
    /* Solo se declaran los TRES colores de marca. Todo lo demás
     (--color-*-content, --color-*-text, los fondos light) se DERIVA de ellos
     con `oklch(from ...)`, conservando la lightness que garantiza el contraste
     AA. Personalizar una web = redefinir esos tres en el CSS del tema HIJO. */

    /* Color Primario (Tu color de marca principal) */
    --color-primary: oklch(45% 0.24 277.023);
    /* Texto/Contenido sobre el color primario. Casi blanco con un matiz del
     propio primario (c * 0.14) para que no cante sobre el botón. */
    --color-primary-content: oklch(
      from var(--color-primary) 93% calc(c * 0.14) h
    );
    /* Fondo light del color primario */
    --color-base-primary: oklch(from var(--color-primary) 95% calc(c * 0.3) h);

    /* Color Secundario */
    --color-secondary: oklch(65% 0.241 354.308);
    /* Texto/Contenido sobre el color secundario */
    --color-secondary-content: oklch(
      from var(--color-secondary) 94% calc(c * 0.12) h
    );
    /* Variante para TEXTO de marca sobre fondo claro (WCAG AA, 5.0:1).
     El --color-secondary (65%) es para FONDOS; como texto no llega a 4.5:1.
     Se baja la lightness a 57% conservando croma y matiz de la marca. */
    --color-secondary-text: oklch(from var(--color-secondary) 57% c h);
    /* Fondo light del color secundario */
    --color-base-secondary: oklch(
      from var(--color-secondary) 95% calc(c * 0.3) h
    );

    /* Color de Acento (Destacados o llamadas a la acción) */
    --color-accent: oklch(77% 0.152 181.912);
    /* Texto/Contenido sobre el color de acento */
    --color-accent-content: oklch(
      from var(--color-accent) 38% calc(c * 0.41) h
    );
    /* Variante para TEXTO de acento sobre fondo claro (WCAG AA, ~4.7:1).
     El --color-accent (77%) NUNCA como texto sobre claro: solo 1.9:1. */
    --color-accent-text: oklch(from var(--color-accent) 52% c h);

    /* Color Neutral (Botones secundarios de cancelar, acciones oscuras fijos) */
    --color-neutral: oklch(14% 0.005 285.823);
    /* Texto/Contenido sobre el color neutral */
    --color-neutral-content: oklch(92% 0.004 286.32);

    /* ==========================================
     3. COLORES DE ESTADO (Feedback del sistema)
     ========================================== */
    /* Info: Mensajes informativos o alertas */
    --color-info: oklch(74% 0.16 232.661);
    --color-info-content: oklch(29% 0.066 243.157);

    /* Success: Éxito, confirmaciones o procesos correctos */
    --color-success: oklch(76% 0.177 163.223);
    --color-success-content: oklch(37% 0.077 168.94);

    /* Warning: Advertencias o estados de precaución */
    --color-warning: oklch(82% 0.189 84.429);
    --color-warning-content: oklch(41% 0.112 45.904);

    /* Error: Alertas críticas, fallos de validación o peligro */
    --color-error: oklch(71% 0.194 13.428);
    --color-error-content: oklch(27% 0.105 12.094);

    /* ==========================================
     4. EFECTOS VISUALES Y TEXTURAS
     ========================================== */
    /* Margen/Tamaño extra para elementos de selección */
    --size-selector: 0.25rem;

    /* Margen/Tamaño extra para campos de texto */
    --size-field: 0.25rem;

    /* Profundidad visual activa (Activa sombras sutiles o efectos de elevación) */
    --shadow:
      0 4px 20px -2px rgba(50, 65, 80, 0.05),
      0 2px 6px -1px rgba(50, 65, 80, 0.03);
  }

  :root:has(input.theme-controller[value="dark"]:checked),
  [data-theme="dark"] {
    /* Indica al navegador que renderice elementos nativos (scrollbars, inputs) en modo oscuro */
    color-scheme: dark;

    /* ==========================================
     1. COLORES BASE (El esqueleto y fondos oscuros)
     ========================================== */
    /* Fondo principal de la web (Luminosidad baja 25.33% -> Azul-grisáceo muy oscuro) */
    --color-base-100: oklch(25.33% 0.016 252.42);

    /* Capa intermedia para tarjetas o secciones (Un tono un poco más oscuro que el fondo) */
    --color-base-200: oklch(23.26% 0.014 253.1);

    /* Capa profunda, bordes sutiles o fondos de inputs en la oscuridad */
    --color-base-300: oklch(21.15% 0.012 254.09);

    /* Color del texto principal (Luminosidad alta 97.8% -> Blanco con un sutil matiz azulado) */
    --color-base-content: oklch(97.807% 0.029 256.847);

    /* Fondo de items/tarjetas; se sobreescribe en section--light/primary-light/secondary-light/halflight */
    --item-bg: var(--color-base-200);

    /* Fondo de componentes con items sobre sección base; se sobreescribe en secciones de color */
    --bg-component: var(--color-base-200);

    /* ==========================================
     2. COLORES DE IDENTIDAD Y MARCA (Adaptados al modo oscuro)
     ========================================== */
    /* Mismos tres colores de marca que el tema claro, con la LIGHTNESS adaptada
     al fondo oscuro (el primario sube de 45% a 58%). El resto se deriva igual
     que arriba.

     OJO al personalizar: este bloque NO puede derivar del --color-primary del
     tema claro (una custom property no puede referenciarse a sí misma: sería
     un ciclo y CSS descarta la declaración). Por eso lleva su propio valor
     literal — y por eso, si una web usa tema oscuro, el hijo debe redefinir
     los colores también aquí. Ver documentacion/3-guia-de-bloques-y-patrones.md §10.1. */

    /* Color Primario (Adaptado para que resalte correctamente sobre el fondo oscuro) */
    --color-primary: oklch(58% 0.233 277.117);
    /* Texto/Contenido sobre el color primario (96% luminosidad para alta legibilidad) */
    --color-primary-content: oklch(
      from var(--color-primary) 96% calc(c * 0.075) h
    );

    /* Color Secundario */
    --color-secondary: oklch(65% 0.241 354.308);
    /* Texto/Contenido sobre el color secundario */
    --color-secondary-content: oklch(
      from var(--color-secondary) 94% calc(c * 0.12) h
    );
    /* Variante para TEXTO de marca sobre fondo oscuro (WCAG AA, 5.0:1) */
    --color-secondary-text: oklch(from var(--color-secondary) 70% c h);
    --color-base-primary: oklch(from var(--color-primary) 20% calc(c * 0.3) h);
    --color-base-secondary: oklch(
      from var(--color-secondary) 20% calc(c * 0.2) h
    );

    /* Color de Acento (Llamadas a la acción en modo oscuro) */
    --color-accent: oklch(77% 0.152 181.912);
    /* Texto/Contenido sobre el color de acento */
    --color-accent-content: oklch(
      from var(--color-accent) 38% calc(c * 0.41) h
    );
    /* Variante para TEXTO de acento sobre fondo oscuro (WCAG AA, 8.3:1).
     Aquí el acento SÍ vale como texto: sobre oscuro da 8.3:1. */
    --color-accent-text: oklch(from var(--color-accent) 77% c h);

    /* Color Neutral (Botones secundarios o utilidades adaptadas al modo oscuro) */
    --color-neutral: oklch(14% 0.005 285.823);
    /* Texto/Contenido sobre el color neutral */
    --color-neutral-content: oklch(92% 0.004 286.32);

    /* ==========================================
     3. COLORES DE ESTADO (Feedback del sistema)
     ========================================== */
    /* Info: Mensajes informativos o alertas */
    --color-info: oklch(74% 0.16 232.661);
    --color-info-content: oklch(29% 0.066 243.157);

    /* Success: Éxito, confirmaciones o procesos correctos */
    --color-success: oklch(76% 0.177 163.223);
    --color-success-content: oklch(37% 0.077 168.94);

    /* Warning: Advertencias o estados de precaución */
    --color-warning: oklch(82% 0.189 84.429);
    --color-warning-content: oklch(41% 0.112 45.904);

    /* Error: Alertas críticas, fallos de validación o peligro */
    --color-error: oklch(71% 0.194 13.428);
    --color-error-content: oklch(27% 0.105 12.094);

    /* ==========================================
     4. EFECTOS VISUALES Y TEXTURAS
     ========================================== */
    /* Margen/Tamaño extra para elementos de selección */
    --size-selector: 0.25rem;

    /* Margen/Tamaño extra para campos de texto */
    --size-field: 0.25rem;

    /* Profundidad visual activa (Clave en modo oscuro para dar relieve con sombras) */
    --depth: 1;
    --shadow: 0 3px 16px -2px rgba(0, 0, 0, 0.1);

    /* Textura de ruido activa: en oscuro el grano da materialidad y rompe la planitud del pigmento */
    --noise: 1;
  }

  :root {
    /* ==========================================
     COLORES DE MARCA — dónde se cambian
     ==========================================
     No están aquí: viven en los bloques [data-theme="light"] / [data-theme="dark"]
     de arriba, y son solo TRES por tema — --color-primary, --color-secondary y
     --color-accent. El resto (--color-*-content, --color-*-text, los fondos
     light) se deriva de ellos con `oklch(from ...)`, conservando la lightness
     que garantiza el contraste WCAG AA.

     Para personalizar una web NO se edita este archivo (el padre se actualiza
     en bloque y lo pisaría): se redefinen esos mismos tres nombres en el CSS
     del tema HIJO — pg-wp-theme-child/assets/site.css. Ese archivo va sin
     @layer, así que gana a esta capa `base` sin necesidad de !important.

     Requisito: sintaxis de color relativa `oklch(from ...)` — Chrome 119+,
     Safari 16.4+, Firefox 128+. Ya se usaba para --color-base-primary. */

    /* Redes sociales */
    --color-whatsapp: #25d366;
    --color-youtube: #ff0000;
    --color-tiktok: #010101;
    --color-instagram: #e1306c;
    --color-x: #000000;
    --color-facebook: #0866ff;
    --color-linkedin: #0a66c2;
    --color-telegram: #229ed9;
    /* Fuentes */
    --font-size: 1rem; /* Tamaño base de la fuente */
    --line-height: 1.5; /* interlineado base de la fuente */
    --container-min: 360;
    --container-max: 1280;
    --bold1: 600;
    --bold2: 700;
    --font1: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font2: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --awesome: "Font Awesome 7 Pro";

    /* Ancho del container */
    --max-width: 1280px; /* Ancho máximo del container */
    /* Padding horizontal de los section */
    --padding-h: clamp(1rem, 1.5vw + 0.7rem, 3rem);
    /* Padding vertical de los section */
    --padding-v: clamp(3rem, 6vw + 2rem, 7rem);
    /* Espacio interior de los componentes  */
    --padding-inner: clamp(1rem, 2vw + 0.5rem, 2rem);

    /* Ritmo vertical entre subelementos apilados dentro de un componente
     (título → descripción → botón, o separar un bloque del siguiente). Es el
     "flujo": distinto de --padding-inner (padding del contenedor). Escala 8px. */
    --flow-gap: 1rem; /* estándar — 16px */
    --flow-gap-sm: 0.5rem; /* compacto — 8px */
    --flow-gap-lg: 1.5rem; /* amplio  — 24px */

    /* ==========================================
     SECTION IMAGE (overlays y paneles sobre imagen)
     ========================================== */
    /* Fondo del overlay/gradiente y del container en sectionImage--2 */
    --section-image-bg: var(--color-neutral);
    /* Panel translúcido sobre la imagen en sectionImage--1 */
    --section-image-panel: var(--color-base-300);

    /* Logo — escala continua en lugar de saltos por breakpoint. Pasa por los
     mismos valores de referencia que la escalera anterior: 120px a 600px de
     ancho de viewport y el tope de 160px a partir de 1200px. */
    --width-logo: clamp(100px, 6.67vw + 80px, 160px);

    /* Altura dispositivo y cabecera */
    --app-height: 100vh; /* Altura del dispositivo */
    --header-height: 0px; /* Altura de la cabecera */

    /* ==========================================
     GEOMETRÍA Y BORDES (Formas de los componentes)
     ========================================== */
    /* Redondeo para Checkboxes, Radios e interruptores */
    --radius-selector: 0.5rem;

    /* Redondeo para campos de texto/inputs */
    --radius-field: 0.25rem;

    /* Redondeo para Tarjetas (Cards), Modales y Alertas  */
    --radius-box: 0.5rem;

    /* Redondeo para Imágenes */
    --radius-img: 0.5rem;

    /* Redondeo para botones */
    --radius-button: 0.5rem;

    /* Grosor de los bordes por defecto en los componentes */
    --border: 1px;

    /* Color de borde por defecto. Usa --color-base-300 (definido por tema), así el
     mismo token se adapta a claro/oscuro. Evita hardcodear #ddd en componentes. */
    --color-border: var(--color-base-300);
  }

  *,
  *:after,
  *:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-text-size-adjust: none;
  }
  img {
    max-width: 100%;
    height: auto;
  }

  body:has(.nav--is-active) #__EAAPS_PORTAL > * {
    z-index: 0 !important;
  }

  /* ==========================================
   ELEMENTOS BASE (enlaces, texto, html/body)
   ========================================== */

  a {
    color: var(--color-primary);
  }

  b,
  strong {
    font-weight: var(--bold1);
  }

  a[href^="tel:"]:not([class]) {
    white-space: nowrap;
    color: currentColor;
    text-decoration: none;
  }

  html {
    background: var(--color-base-100);
    color: var(--color-base-content);
    font-family: var(--font1);
    font-size: var(--font-size);
    line-height: var(--line-height);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
  }

  body {
    min-width: 300px;
    overflow-x: hidden;
    position: relative;
  }

  body.no-scroll {
    overflow: hidden;
  }

  /* ==========================================
   PÁGINA 404
   ========================================== */
  /* La clase se llama .page404 (no .error404) porque WordPress añade la clase
   `error404` al <body>; reutilizar ese nombre haría que estas reglas de flex
   maquetaran el body entero (header/main/footer encogidos y centrados). */
  .page404 {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .page404__title {
    font-size: clamp(120px, 30vw, 300px);
    letter-spacing: 12px;
    font-family: var(--font1);
    font-weight: var(--bold1);
    line-height: 0.75em;
    margin: 0;
    color: var(--color-base-300);
  }
  .page404__container {
    background: var(--color-base-200);
    padding: var(--padding-v) var(--padding-h);
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .page404 .title--1 {
    color: var(--color-base-content);
    margin-bottom: 1.75rem;
  }

  /* ==========================================
   BLOG: ENTRADA (single.php) Y LISTADO (index.php)
   ========================================== */
  /* La estructura sigue la de serie de Astra 4.6+ (ver las cabeceras de
   index.php y single.php); los colores, radios y sombras son los del tema. */

  /* WordPress la usa en la navegación de entradas y en la paginación, pero
   solo la oculta el CSS de cada tema. Sin ella, «Navegación de entradas» se
   leía en pantalla. Es la regla que recomienda el manual de temas. */
  .screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
  }
  .section.post {
    border-top: 1px solid
      color-mix(in oklch, var(--color-base-content) 8%, transparent);
  }
  .entry-header {
    margin-bottom: 1.5rem;
  }
  .entry-meta {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: color-mix(in oklch, currentColor 75%, transparent);
  }
  .entry-meta a {
    color: var(--color-primary);
    text-decoration: none;
  }
  .entry-meta a:hover {
    text-decoration: underline;
  }
  .entry-meta__sep {
    margin-inline: 0.35em;
  }
  .entry-img {
    margin-bottom: 2rem;
  }
  .entry-img img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-img);
  }
  /* Los títulos del contenido no traían margen: iban pegados al párrafo
   siguiente y apenas separados del anterior. */
  .entry-content > * + h2 {
    margin-top: 2.5rem;
  }
  .entry-content > * + h3 {
    margin-top: 1.75rem;
  }
  .entry-content > h2,
  .entry-content > h3 {
    margin-bottom: 0.75rem;
  }
  /* normalize deja las listas con padding 0 y viñeta `outside`: la viñeta
   quedaba fuera de la columna, colgando a la izquierda del texto. */
  .entry-content ul,
  .entry-content ol {
    padding-left: 1.5rem;
  }
  .entry-content li + li {
    margin-top: 0.35rem;
  }
  .entry-content figure img {
    border-radius: var(--radius-img);
  }

  /* Cabecera del listado alineada a la izquierda, como las tarjetas. (Astra
   la centra; aquí se probó y se descartó.) */
  .blog-header {
    margin-bottom: 2rem;
  }
  .blog-header__desc {
    max-width: 48rem;
    margin-top: 0.75rem;
  }

  /* Anterior / Siguiente al pie de la entrada. */
  .entry-nav {
    margin: 3rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-base-300);
  }
  .entry-nav .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 2rem;
  }
  .entry-nav .nav-previous,
  .entry-nav .nav-next {
    flex: 1 1 14rem;
  }
  .entry-nav .nav-next {
    text-align: right;
  }
  .entry-nav a {
    display: block;
    color: inherit;
    text-decoration: none;
  }
  .entry-nav__label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
  }
  .entry-nav__title {
    font-weight: 600;
  }
  .entry-nav a:hover .entry-nav__title {
    text-decoration: underline;
  }

  /* Listado: rejilla regular, todas las tarjetas iguales. Antes era un
   .grid-mosaico, que alterna tamaños y con pocas entradas deja tarjetas
   gigantes junto a otras pequeñas. La imagen va recortada a 16/9 (la
   proporción de serie de Astra) para que los títulos arranquen a la misma
   altura. */
  .blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  @media (min-width: 768px) {
    .blog-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    .blog-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  /* overflow: hidden no es decorativo: sin él, aspect-ratio deja que la caja
   crezca hasta el alto de la imagen (su «tamaño mínimo automático») y las
   fotos más verticales descuadraban la fila. */
  .blog-grid .card__img {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  .blog-grid .card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Zoom suave al pasar por encima (el «zoom-in» de serie de Astra). */
  @media (prefers-reduced-motion: no-preference) {
    .blog-card .card__img img {
      transition: transform 0.4s ease;
    }
    .blog-card:hover .card__img img {
      transform: scale(1.05);
    }
  }
  .blog-card__cat {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .blog-card__cat a {
    color: var(--color-primary);
    text-decoration: none;
  }
  .blog-card__cat a:hover {
    text-decoration: underline;
  }
  .blog-card .card__title {
    margin-bottom: 0.25rem;
  }
  .blog-card .card__title a {
    color: inherit;
    text-decoration: none;
  }
  .blog-card .card__title a:hover {
    color: var(--color-primary);
  }
  .blog-card .entry-meta {
    margin: 0 0 0.75rem;
  }

  /* ==========================================
   COOKIES Y LEGAL
   ========================================== */
  div[data-tpc="rpl"] {
    background: #f5f5f5;
    padding: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: 120%;
    color: #333;
    height: 100%;
    width: 100%;
  }

  div[data-tpc="rpl"] span {
    display: block;
    padding: 16px;
    border: 2px dashed #ccc;
  }

  #dvAviso {
    text-align: left;
  }

  #dvAviso ul {
    padding-left: 22px;
    margin-bottom: 1.25rem;
  }

  #dvAviso .enc {
    font-weight: var(--bold1);
    font-size: 1.2rem;
  }

  /* ==========================================
   SECCIONES
   ========================================== */
  .section {
    /* Seccion normal */
    padding: var(--padding-v) var(--padding-h);
  }
  .section.section--s {
    /* Seccion con menos padding vertical */
    padding: min(var(--padding-v), 3rem) var(--padding-h);
  }
  .section > .section.container {
    border-radius: var(--radius-box);
  }
  main > .section:first-child:last-child:not(:has(.landing)) {
    padding-top: min(var(--padding-v), 3rem);
  }
  .section.section--gap-v {
    /* Section con padding sólo vertical */
    padding: var(--padding-v) 0;
  }
  .section.section--gap-h {
    /* Section con padding sólo horizontal */
    padding: 0 var(--padding-h);
  }
  .section.section--nogap {
    /* section sin padding */
    padding: 0;
  }
  .section.section--nogap-down {
    /* Section sin padding abajo */
    padding-bottom: 0;
  }
  .section.section--nogap-up {
    /* Section sin padding arriba */
    padding-top: 0;
  }
  .section--cta {
    padding: min(var(--padding-v), 3.5rem) var(--padding-h);
    text-align: center;
  }
  /* El posicionamiento de .section--pin vive en overrides.css (capa final)
   para ganar tambien a los componentes con @layer components */
  :where(.section--pin ~ *) {
    /* Fondo por defecto para tapar la sección fijada; :where() = especificidad
     0, cualquier modificador de fondo (--primary, --light, --dark...) gana */
    background-color: var(--color-base-100);
  }

  .section--border,
  *:not(.galeria-portada):not(.portada) + .section--comp,
  .section--comp:first-child {
    border-top: 1px solid var(--color-base-300);
  }

  .section--primary {
    /* color de fondo y texto de los section */
    background-color: var(--color-primary);
    color: var(--color-primary-content);
  }
  .section--primary a:not(.button) {
    /* color de fondo y texto de los section */
    color: var(--color-primary-content);
  }
  .section--secondary {
    background-color: var(--color-secondary);
    color: var(--color-secondary-content);
  }
  .section--secondary a:not(.button) {
    color: var(--color-secondary-content);
  }
  .section--light {
    background: var(--color-base-300);
    --bg-component: var(--color-base-100);
    --item-bg: var(--bg-component);
  }
  .section--primary-light {
    background: var(--color-base-primary);
    color: var(--color-base-content);
    --bg-component: var(--color-base-100);
    --item-bg: var(--bg-component);
  }
  .section--secondary-light {
    background: var(--color-base-secondary);
    color: var(--color-base-content);
    --bg-component: var(--color-base-100);
    --item-bg: var(--bg-component);
  }
  .section--halflight {
    background: linear-gradient(
      to bottom,
      var(--color-base-300) 50%,
      var(--color-base-100) 50%
    );
    --bg-component: var(--color-base-100);
    --item-bg: var(--bg-component);
  }
  .section--dark {
    background-color: var(--color-neutral);
    color: var(--color-neutral-content);
  }
  .section--dark a:not(.button) {
    color: var(--color-neutral-content);
  }

  .section--gradient {
    background: var(--bg-gradient);
  }
  .section--half {
    position: relative;
  }
  .section--half::after {
    content: "";
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    background: var(--bgcolor);
    z-index: -1;
    height: 50%;
    position: absolute;
  }
  .section--bg {
    /* section con imagen de fondo */
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Contenido de un section--bg cuando la sección es un core/group.
     El flex de arriba viene de Astro, donde el hijo era un <div class="container">
     de toda la vida: un bloque que se estiraba solo. En Gutenberg el hijo es un
     bloque, y el layout "constrained" le pone
     `margin-left:auto !important; margin-right:auto !important`.
     Un elemento flex con márgenes automáticos en el eje transversal deja de
     estirarse (`align-self: stretch` pasa a comportarse como `flex-start`) y se
     encoge a su ancho de contenido; si dentro hay un wp:columns, cuyas columnas
     son `flex-basis: 0`, ese ancho es CERO y la sección entera sale como dos
     hilos verticales.
     `width: 100%` devuelve el estirado sin tocar el `max-width` del container,
     así que la caja sigue centrada y con el ancho de contenido del tema. */
  .section--bg > * {
    width: 100%;
  }

  .section--filter:before {
    /* Section con filtro de color por detrás del texto */
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
  }
  .section--filter .container {
    position: relative;
    z-index: 1;
  }

  /* ==========================================
   PATTERNS (texturas geométricas de fondo)
   ==========================================
   Capa decorativa teñida con el color de texto de la sección (currentColor):
   se adapta sola a claro/oscuro y a section--primary/secondary/dark sin
   definir un color por tema. Va DETRÁS del contenido (z-index:-1 dentro de un
   stacking context aislado) y es puramente decorativa -> no afecta el
   contraste AA del texto. Se activa por clase junto a la sección:
     class="section section--primary pattern pattern--dots"
   Ajustables por variable: --pattern-opacity (def. .06) y --pattern-size.
   ========================================== */
  .pattern {
    position: relative;
    isolation: isolate;
  }
  .pattern::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    color: currentColor; /* el pigmento del pattern hereda el texto */
    opacity: var(--pattern-opacity, 0.06);
    background-image: var(--pattern-image);
    background-size: var(--pattern-size, 24px 24px);
    -webkit-mask-image: var(--pattern-fade, none);
    mask-image: var(--pattern-fade, none);
  }

  /* Puntos */
  .pattern--dots {
    --pattern-image: radial-gradient(currentColor 1.5px, transparent 1.6px);
    --pattern-size: 22px 22px;
  }
  /* Rejilla */
  .pattern--grid {
    --pattern-image:
      linear-gradient(currentColor 1px, transparent 1px),
      linear-gradient(90deg, currentColor 1px, transparent 1px);
    --pattern-size: 32px 32px;
  }
  /* Diagonales */
  .pattern--diagonal {
    --pattern-image: repeating-linear-gradient(
      45deg,
      currentColor 0 1px,
      transparent 1px 14px
    );
    --pattern-size: auto;
  }

  /* Modificador: desvanece el pattern hacia los bordes (más editorial) */
  .pattern--fade {
    --pattern-fade: radial-gradient(
      ellipse at center,
      #000 40%,
      transparent 85%
    );
  }

  .container {
    /* Container con ancho máximo */
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
  }
  .container--s {
    /* Container con ancho máximo al 75% */
    max-width: calc(var(--max-width) * 0.75);
  }
  .container--xl {
    /* Container con ancho máximo al 125% */
    max-width: calc(var(--max-width) * 1.25);
  }

  .container--xs {
    /* Container con ancho máximo al 45% */
    max-width: calc(var(--max-width) * 0.45);
  }
  .container[data-position="left"],
  .container__inner[data-position="left"] {
    /* posicionar el container a la izquierda */
    margin: 0 auto 0 0;
  }
  .container[data-position="right"],
  .container__inner[data-position="right"] {
    /* posicionar el container a la derecha */
    margin: 0 0 0 auto;
  }

  .container--box {
    /* container con fondo y padding */
    padding: var(--padding-inner);
    border-radius: var(--radius-box);
    background: var(--color-base-100);
  }

  /* ------------------------------------------
   DUAL — sección de dos columnas (wp:columns con 2 wp:column).
   Equivalente WP de Dual.astro: la clase .dual es el gancho que ya
   esperan animations.js (.dual div:has(img) → cortina), timeline-slider
   y .dual--radius de texto.

   .dual--invertir-movil = InvertirMovil del JSON de Astro. Invierte solo
   el orden VISUAL al apilar (el HTML mantiene ColA primero, mejor para
   SEO/accesibilidad), igual que --orden-movil en Grid.astro.

   El corte es 781px porque es donde core apila las columnas
   (wp-includes/blocks/columns/style.css); por encima siguen en fila y
   invertir cambiaria izquierda/derecha, que no es lo que se busca.
   Se usa `order` y no `flex-direction: column-reverse` porque core apila
   con flex-wrap: wrap y la direccion inversa pelea con ese wrap.
   ------------------------------------------ */
  @media screen and (max-width: 781px) {
    .dual--invertir-movil:not(.is-not-stacked-on-mobile)
      > .wp-block-column:first-child {
      order: 2;
    }
    .dual--invertir-movil:not(.is-not-stacked-on-mobile)
      > .wp-block-column:last-child {
      order: 1;
    }
  }

  .block {
    display: inline-block;
  }

  .container-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .button {
    --transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    padding: 0.7em 1.25em;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    border-radius: var(--radius-button);
    margin: 0;
    margin-block: 0;
    cursor: pointer;
    font-weight: 600;
    overflow: hidden;
    border: none;
    transition: var(--transition);
    z-index: 1;
    line-height: 1.2;
    user-select: none;
  }

  .button > span > span {
    font-size: 0.85rem;
    opacity: 0.75;
    display: block;
    text-align: left;
  }
  .button:has(> span > span) {
    padding: 0.5em 1em;
  }
  .button > span,
  .button > i {
    position: relative;
    z-index: 3;
    transition: var(--transition);
  }

  /* ICONOS */
  .button i:first-child:not(:only-child) {
    margin-right: 0.5em;
    margin-left: 0;
  }

  .button:hover i:first-child:not(:only-child) {
    transform: rotate(-15deg);
  }

  .button i:last-child:not(:only-child) {
    margin-left: 0.5em;
    margin-right: 0;
  }

  .button:hover i:last-child:not(:only-child) {
    transform: translateX(6px);
  }

  .button--ico i:first-child:last-child {
    margin: 0;
  }

  .button--ico:hover i {
    transform: scale(1.15);
  }

  /* HOVER Y ACTIVE */
  .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.2);
  }

  .button:active {
    transform: translateY(-1px);
  }

  /* Tamaños escalables */
  .button--s {
    font-size: 0.85rem;
  }
  .button--xl {
    font-size: 1.25rem;
  }

  /* VARIANTES DE FORMA */
  .button--ico {
    padding: 0;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .button--ico.button--s {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 0.9rem;
  }
  /* bg primary */
  .button--primary {
    background: var(--color-primary);
    color: var(--color-primary-content);
  }

  /* bg secondary */
  .button--secondary {
    background: var(--color-secondary);
    color: var(--color-secondary-content);
  }

  /* bg dark */
  .button--dark {
    background: var(--color-neutral);
    color: var(--color-neutral-content);
  }

  /* bg light */
  .button--light {
    background: var(--color-neutral-content);
    color: var(--color-neutral);
  }

  /* EFECTOS DE BORDE */
  .button--border-gradient {
    background: white;
    color: var(--color-neutral);
    z-index: 1;
    --grad: linear-gradient(45deg, #4f46e5, #ec4899);
  }

  .button--border-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-button);
    padding: 2px;
    background: var(--grad);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: var(--transition);
  }

  .button--border-gradient:hover::before {
    padding: 3px;
    filter: hue-rotate(90deg);
  }

  /* EFECTOS DE RELLENO */
  .button[class*="sweep"]::before,
  .button--radial::before {
    content: "";
    position: absolute;
    z-index: 2;
    background: rgba(255, 255, 255, 0.2);
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  }

  .button--sweep-right::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: scaleX(0);
    transform-origin: left;
  }

  .button--sweep-right:hover::before {
    transform: scaleX(1);
  }

  .button--radial::before {
    top: 50%;
    left: 50%;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s ease;
  }

  .button--radial:hover::before {
    transform: translate(-50%, -50%) scale(15);
  }

  /* EFECTOS DE SUBRAYADO */
  .button--underline {
    background: var(--color-neutral-content);
    color: var(--color-neutral);
  }

  .button--underline::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 3px;
    background: var(--color-primary);
    transition: var(--transition);
  }

  .button--underline-center::after {
    left: 50%;
    width: 0;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .button--underline-center:hover::after {
    width: 100%;
  }

  /* NEUMORFISMO */
  .button--neumorph {
    background: #f0f2f5;
    color: var(--color-neutral);
    box-shadow:
      6px 6px 12px #d1d9e6,
      -6px -6px 12px #ffffff;
  }

  .button--neumorph:hover {
    box-shadow:
      2px 2px 5px #d1d9e6,
      -2px -2px 5px #ffffff;
    transform: translateY(-2px);
  }

  /* SHINE */
  .button--shine {
    background: var(--color-primary);
    color: white;
  }

  .button--shine::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent
    );
    transform: skewX(-25deg);
    z-index: 2;
  }

  .button--shine:hover::after {
    left: 150%;
    transition: all 0.6s ease;
  }

  /* ESTILO OUTLINED */
  .button--outlined {
    color: var(--color-neutral);
    box-shadow: inset 0 0 0 2px currentColor;
    background: transparent;
  }

  .button--outlined:hover {
    box-shadow: inset 0 0 0 2px var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
  }

  .button--outlined-bold {
    color: var(--color-neutral);
    background: transparent;
    box-shadow: inset 0 0 0 3px var(--color-neutral);
  }

  .button--outlined-bold:hover {
    background: var(--color-neutral);
    color: white;
    box-shadow: inset 0 0 0 3px var(--color-neutral);
    transform: translateY(0);
  }

  /* ESTILO OPACITY */
  .button--opacity:hover {
    filter: brightness(1.2) opacity(0.85);
    transform: translateY(-2px);
  }

  /* bg redes sociales — color de marca (tokens en :root) */
  .button--whatsapp {
    background: var(--color-whatsapp);
    color: #fff;
  }

  .button--facebook {
    background: var(--color-facebook);
    color: #fff;
  }

  .button--instagram {
    background: var(--color-instagram);
    color: #fff;
  }

  .button--youtube {
    background: var(--color-youtube);
    color: #fff;
  }

  .button--tiktok {
    background: var(--color-tiktok);
    color: #fff;
  }

  .button--x {
    background: var(--color-x);
    color: #fff;
  }

  .button--linkedin {
    background: var(--color-linkedin);
    color: #fff;
  }

  .button--telegram {
    background: var(--color-telegram);
    color: #fff;
  }

  /* ==========================================
   TEXTOS
   ========================================== */
  p:not(:last-child) {
    margin: 0 0 1.125rem;
  }
  ul:not(:last-child) {
    margin: 0 0 1.125rem;
  }

  .blockquote {
    color: var(--color-primary);
    font-weight: var(--bold1);
    font-style: italic;
    margin: 0 0 1.25rem;
    font-size: 1.115rem;
    display: flex;
  }

  .blockquote .title {
    margin: 0 0 0.5rem;
  }
  .blockquote .title ~ p {
    color: var(--color-secondary-text);
  }

  .blockquote:before {
    content: "";
    width: 10%;
    height: 1px;
    background: var(--color-primary);
    display: block;
    margin-top: 10px;
    margin-right: 0.5rem;
    flex-shrink: 0;
  }
  .blockquote:last-child {
    margin-bottom: 0;
  }

  /* Títulos */
  .title {
    font-family: var(--font2);
    line-height: 1.25em;
    margin: 0 0 0.5em;
    font-weight: var(--bold2);
    text-wrap: balance;
    --font-size: calc(
      var(--min-size) * 1px + (var(--max-size) - var(--min-size)) *
        (100vw - var(--container-min) * 1px) /
        (var(--container-max) - var(--container-min))
    );
    font-size: clamp(
      var(--min-size) * 1px,
      var(--font-size),
      var(--max-size) * 1px
    );
  }
  .subtitle {
    font-weight: var(--bold1);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.95rem;
    line-height: 1.25em;
    margin: 0 0 0.5em;
  }
  .section:has(.title--1) .subtitle {
    color: var(--color-secondary-text);
  }

  .title:last-child {
    margin: 0;
  }

  .title--1 {
    --max-size: 36;
    --min-size: 28;
  }

  .title--2 {
    --max-size: 32;
    --min-size: 24;
  }

  .title--3 {
    --max-size: 24;
    --min-size: 22;
  }

  .title--4 {
    --max-size: 22;
    --min-size: 20;
  }

  .family--primary {
    font-family: var(--font1);
  }

  .family--secondary {
    font-family: var(--font2);
  }

  .font--xs,
  .font--s,
  .font--m,
  .font--l,
  .font--xl,
  .font--xxl,
  .font--3xl {
    --font-size: calc(
      var(--min-size) * 1px + (var(--max-size) - var(--min-size)) *
        (100vw - var(--container-min) * 1px) /
        (var(--container-max) - var(--container-min))
    );
    font-size: clamp(
      var(--min-size) * 1px,
      var(--font-size),
      var(--max-size) * 1px
    );
  }

  .font--3xl {
    --max-size: 60;
    --min-size: 48;
  }

  .font--xxl {
    --max-size: 48;
    --min-size: 36;
  }

  .font--xl {
    --max-size: 36;
    --min-size: 28;
  }

  .font--l {
    --max-size: 32;
    --min-size: 24;
  }

  .font--m {
    --max-size: 24;
    --min-size: 20;
  }

  .font--s {
    --max-size: 20;
    --min-size: 18;
  }

  .font--xs {
    --max-size: 14;
    --min-size: 12;
  }

  .font--center {
    text-align: center;
  }
  .font--right {
    text-align: right;
  }
  .font--primary {
    color: var(--color-primary);
  }
  .font--secondary {
    color: var(--color-secondary-text);
  }
  .font--invert {
    color: var(--color-primary-content);
  }
  .font--base {
    color: var(--color-base-content);
  }

  /* Peso. El tema no tenía utilidades de font-weight: los pesos solo existían
     dentro de .title y compañía. Estas tres hacen falta para poder resaltar un
     trozo suelto con el formato «Clase CSS» del editor, y reutilizan los mismos
     tokens que el resto para no colar un cuarto peso por la puerta de atrás. */
  .font--regular {
    font-weight: 400;
  }
  .font--semibold {
    font-weight: var(--bold1);
  }
  .font--bold {
    font-weight: var(--bold2);
  }

  /* ==========================================
   LISTAS
   ========================================== */
  .list {
    list-style: none;
  }
  .list li:not(:last-child) {
    margin: 0 0 0.4rem;
  }

  /* Lista items */
  .list-items {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
  }

  .list-items:not(:last-child) {
    margin: 0 0 1.25rem;
  }

  .list-items li {
    display: inline-flex;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: var(--color-primary-content);
    border-radius: var(--radius-box);
    margin: 0.2rem;
  }
  .list-items--light li {
    background: var(--color-neutral-content);
    color: var(--color-neutral);
  }

  .list-items--dark li {
    background: var(--color-neutral);
    color: var(--color-neutral-content);
  }

  /* Lista puntos */
  .list-points {
    padding-left: 1.25rem;
  }

  .list-points:not(:last-child) {
    margin: 0 0 1.25rem;
  }

  .list-points li:not(:last-child) {
    margin: 0 0 0.5rem;
  }

  .list-points ul {
    margin: 0 0 0 1.25rem;
    margin-top: 0.5rem;
  }

  .list-points--contact > li:not(:last-child) {
    margin: 0 0 1.25rem;
  }

  /* Lista iconos */
  .list-icons {
    margin: 0;
    list-style: none;
    text-align: left;
  }

  .list-icons:not(:last-child) {
    margin: 0 0 1.25rem;
  }

  .list-icons li {
    display: flex;
  }

  .list-icons li:not(:last-child) {
    margin: 0 0 0.8rem;
  }

  .list-icons:not(.list-icons--customize) li:before {
    content: "\f00c";
    font-family: var(--awesome);
    margin-right: 0.5rem;
    font-weight: 600;
    color: var(--color-primary);
  }
  .list-icons--customize li i:not(.fab):not(.fa-brands) {
    content: "\f00c";
    font-family: var(--awesome);
    margin-right: 0.5rem;
    line-height: var(--line-height);
    color: var(--color-primary);
  }

  .list-icons--inline {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1rem;
  }

  .list-icons.list-icons--inline li {
    padding: 0.5rem 1rem;
    margin: 0;
  }

  /* Lista marcas */
  .list-marcas {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.25em;
  }
  .list-marcas:not(:last-child) {
    margin: 0 0 1.25rem;
  }

  .list-marcas li {
    background: #fff;
    border: 1px solid var(--color-base-300);
    width: 100%;
    display: block;
    width: calc(50% - 0.5rem);
    padding: 0.25rem;
    max-width: 200px;
    transition: border-color 300ms ease;
  }

  .list-marcas li a {
    text-decoration: none;
    color: inherit;
    display: block;
  }

  .list-marcas li span {
    display: block;
    padding: 0.25rem 0.25rem 0;
  }

  .list-marcas li:has(a):hover {
    border: 1px solid var(--color-base-300);
  }

  .list-marcas img {
    display: block;
    aspect-ratio: 1;
    background: #fff;
    width: 100%;
    object-fit: contain;
    padding: 12px;
  }
  @media screen and (min-width: 601px) {
    .list-marcas li {
      width: calc(25% - 0.5rem);
    }
  }
  @media screen and (min-width: 821px) {
    .list-marcas li {
      width: calc(20% - 0.5rem);
    }
  }

  /* ==========================================
   IMÁGENES
   ========================================== */
  .img-responsive {
    display: block;
    width: 100%;
    border-radius: var(--radius-img);
  }

  .img-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: clip;
    border-radius: var(--radius-img);
  }
  .img-contain {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--radius-img);
  }

  /* ==========================================
   MAPA
   ========================================== */
  /* --mapa-alto lo pone el bloque pgweb/mapa (atributo «altura»). La altura
     tiene que ir en la caja: el iframe es flex: 1 (base 0), así que su
     atributo height no cuenta y sin esto el mapa se quedaba en 240px. */
  .mapa {
    min-height: var(--mapa-alto, 240px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
  }
  .mapa--portada {
    height: 60vh;
  }

  .mapa iframe {
    width: 100%;
    display: block;
    flex: 1;
  }

  /* ==========================================
   FLECHA GO TOP
   ========================================== */
  .go-top {
    cursor: pointer;
    padding: 0;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
    z-index: 3;
    position: fixed;
    bottom: 12px;
    right: 12px;
    display: flex;
    width: 46px;
    height: 46px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 300ms ease,
      visibility 0ms linear 300ms,
      background 200ms ease,
      transform 200ms ease;
  }

  .go-top.visible {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 300ms ease,
      background 200ms ease,
      transform 200ms ease;
  }

  .go-top:hover {
    background: rgba(0, 0, 0, 0.55);
    transform: translateY(-3px);
  }

  .go-top i {
    font-size: 20px;
    display: block;
  }

  /* ==========================================
   IFRAMES
   ========================================== */
  .iframe {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
  }

  .iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* ==========================================
   GRID MOSAICO
   ========================================== */
  .grid-mosaico {
    --gap: min(var(--padding-inner), 1.5rem);
    display: grid;
    grid-gap: var(--gap);
  }
  .grid-mosaico.gallery-light {
    --gap: 0.5rem;
  }
  .grid-mosaico > * {
    display: flex;
    flex-direction: column;
  }
  .grid-mosaico > * > * {
    flex: 1;
  }

  .grid-mosaico {
    grid-template-columns: repeat(12, 1fr);
  }
  /* 1 elementos */
  /****************/
  .grid-mosaico[data-items="1"] > * {
    grid-column-start: 1;
    grid-column-end: 13;
  }
  /* 2 elementos */
  /****************/
  .grid-mosaico[data-items="2"] > *:first-child,
  .grid-mosaico[data-items="2"] > *:nth-child(2n-1) {
    grid-column-start: 1;
    grid-column-end: 9;
  }

  .grid-mosaico[data-items="2"] > *:nth-child(2n) {
    grid-column-start: 9;
    grid-column-end: 13;
  }

  .grid-mosaico[data-items="2"] > *:nth-child(4n-1) {
    grid-column-start: 1;
    grid-column-end: 5;
  }

  .grid-mosaico[data-items="2"] > *:nth-child(4n) {
    grid-column-start: 5;
    grid-column-end: 13;
  }
  /* 3 elementos */
  /****************/
  .grid-mosaico[data-items="3"] > *:first-child,
  .grid-mosaico[data-items="3"] > *:nth-child(3n-2) {
    grid-column-start: 1;
    grid-column-end: 9;
    grid-row: span 2;
  }

  .grid-mosaico[data-items="3"] > *:nth-child(2),
  .grid-mosaico[data-items="3"] > *:nth-child(3n-1) {
    grid-column-start: 9;
    grid-column-end: 13;
  }

  .grid-mosaico[data-items="3"] > *:nth-child(3n) {
    grid-column-start: 9;
    grid-column-end: 13;
  }

  .grid-mosaico[data-items="3"] > *:nth-child(6n-1) {
    grid-column-start: 5;
    grid-column-end: 13;
    grid-row: span 2;
  }

  .grid-mosaico[data-items="3"] > *:nth-child(6n),
  .grid-mosaico[data-items="3"] > *:nth-child(6n-2) {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row: span 1;
  }

  /* 3B elementos */
  /****************/
  .grid-mosaico[data-items="3b"] > *:first-child,
  .grid-mosaico[data-items="3b"] > *:nth-child(3n-2) {
    grid-column-start: 1;
    grid-column-end: 13;
  }

  .grid-mosaico[data-items="3b"] > *:nth-child(2),
  .grid-mosaico[data-items="3b"] > *:nth-child(3n-1) {
    grid-column-start: 1;
    grid-column-end: 6;
  }

  .grid-mosaico[data-items="3b"] > *:nth-child(3n) {
    grid-column-start: 6;
    grid-column-end: 13;
  }

  .grid-mosaico[data-items="3b"] > *:nth-child(6n-1) {
    grid-column-start: 1;
    grid-column-end: 8;
  }

  .grid-mosaico[data-items="3b"] > *:nth-child(6n-2) {
    grid-column-start: 1;
    grid-column-end: 13;
  }

  .grid-mosaico[data-items="3b"] > *:nth-child(6n) {
    grid-column-start: 8;
    grid-column-end: 13;
  }

  /* 4 elementos */
  /****************/
  .grid-mosaico[data-items="4"] > *:first-child,
  .grid-mosaico[data-items="4"] > *:nth-child(4n-3) {
    grid-column-start: 1;
    grid-column-end: 8;
  }

  .grid-mosaico[data-items="4"] > *:nth-child(2),
  .grid-mosaico[data-items="4"] > *:nth-child(4n-2) {
    grid-column-start: 8;
    grid-column-end: 13;
  }

  .grid-mosaico[data-items="4"] > *:nth-child(3),
  .grid-mosaico[data-items="4"] > *:nth-child(4n-1) {
    grid-column-start: 6;
    grid-column-end: 13;
    grid-row: 2;
  }

  .grid-mosaico[data-items="4"] > *:nth-child(4n) {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row: 2;
  }
  /* 4B elementos */
  /****************/
  @media screen and (max-width: 820px) {
    .grid-mosaico[data-items="4b"] {
      grid-template-columns: repeat(2, 1fr);
    }
    .grid-mosaico[data-items="4b"] > *:first-child,
    .grid-mosaico[data-items="4b"] > *:nth-child(4n-3) {
      grid-column-start: 1;
      grid-column-end: 2;
    }

    .grid-mosaico[data-items="4b"] > *:nth-child(2),
    .grid-mosaico[data-items="4b"] > *:nth-child(4n-2) {
      grid-column-start: 2;
      grid-column-end: 3;
      grid-row: span 2;
    }

    .grid-mosaico[data-items="4b"] > *:nth-child(3),
    .grid-mosaico[data-items="4b"] > *:nth-child(4n-1) {
      grid-column-start: 1;
      grid-column-end: 2;
    }

    .grid-mosaico[data-items="4b"] > *:nth-child(4n) {
      grid-column-start: 1;
      grid-column-end: 3;
    }
  }

  @media screen and (min-width: 821px) {
    .grid-mosaico[data-items="4b"] > *:first-child,
    .grid-mosaico[data-items="4b"] > *:nth-child(4n-3) {
      grid-column-start: 1;
      grid-column-end: 5;
    }

    .grid-mosaico[data-items="4b"] > *:nth-child(2),
    .grid-mosaico[data-items="4b"] > *:nth-child(4n-2) {
      grid-column-start: 5;
      grid-column-end: 9;
    }

    .grid-mosaico[data-items="4b"] > *:nth-child(3),
    .grid-mosaico[data-items="4b"] > *:nth-child(4n-1) {
      grid-column-start: 9;
      grid-column-end: 13;
      grid-row: span 2;
    }

    .grid-mosaico[data-items="4b"] > *:nth-child(4n) {
      grid-column-start: 1;
      grid-column-end: 9;
    }
  }
  /* 5 elementos */
  /****************/
  .grid-mosaico[data-items="5"] > *:first-child,
  .grid-mosaico[data-items="5"] > *:nth-child(5n-4) {
    grid-column-start: 1;
    grid-column-end: 7;
  }

  .grid-mosaico[data-items="5"] > *:nth-child(2),
  .grid-mosaico[data-items="5"] > *:nth-child(5n-3) {
    grid-column-start: 7;
    grid-column-end: 13;
  }

  .grid-mosaico[data-items="5"] > *:nth-child(3),
  .grid-mosaico[data-items="5"] > *:nth-child(5n-2) {
    grid-column-start: 1;
    grid-column-end: 5;
  }

  .grid-mosaico[data-items="5"] > *:nth-child(4),
  .grid-mosaico[data-items="5"] > *:nth-child(5n-1) {
    grid-column-start: 5;
    grid-column-end: 9;
  }

  .grid-mosaico[data-items="5"] > *:nth-child(5n) {
    grid-column-start: 9;
    grid-column-end: 13;
  }
  /* 5b elementos */
  /****************/
  .grid-mosaico[data-items="5b"] > *:first-child,
  .grid-mosaico[data-items="5b"] > *:nth-child(3n-2) {
    grid-column-start: 1;
    grid-column-end: 9;
    grid-row: span 2;
  }

  .grid-mosaico[data-items="5b"] > *:nth-child(2),
  .grid-mosaico[data-items="5b"] > *:nth-child(3n-1) {
    grid-column-start: 9;
    grid-column-end: 13;
  }

  .grid-mosaico[data-items="5b"] > *:nth-child(3n) {
    grid-column-start: 9;
    grid-column-end: 13;
  }

  .grid-mosaico[data-items="5b"] > *:nth-child(6n-1) {
    grid-column-start: 7;
    grid-column-end: 13;
    grid-row: span 1;
  }

  .grid-mosaico[data-items="5b"] > *:nth-child(6n),
  .grid-mosaico[data-items="5b"] > *:nth-child(6n-2) {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row: span 1;
  }

  @media screen and (min-width: 821px) {
    .grid-mosaico[data-items="5b"] > *:first-child,
    .grid-mosaico[data-items="5b"] > *:nth-child(5n-4) {
      grid-column-start: 1;
      grid-column-end: 7;
      grid-row: span 2;
    }

    .grid-mosaico[data-items="5b"] > *:nth-child(2),
    .grid-mosaico[data-items="5b"] > *:nth-child(5n-3) {
      grid-column-start: 7;
      grid-column-end: 10;
    }

    .grid-mosaico[data-items="5b"] > *:nth-child(3),
    .grid-mosaico[data-items="5b"] > *:nth-child(5n-2) {
      grid-column-start: 10;
      grid-column-end: 13;
    }

    .grid-mosaico[data-items="5b"] > *:nth-child(4),
    .grid-mosaico[data-items="5b"] > *:nth-child(5n-1) {
      grid-column-start: 7;
      grid-column-end: 10;
    }

    .grid-mosaico[data-items="5b"] > *:nth-child(5n) {
      grid-column-start: 10;
      grid-column-end: 13;
    }

    .grid-mosaico[data-items="5b"] > *:nth-child(10n-4) {
      grid-column-start: 1;
      grid-column-end: 4;
      grid-row: span 1;
    }

    .grid-mosaico[data-items="5b"] > *:nth-child(10n-3) {
      grid-column-start: 4;
      grid-column-end: 7;
      grid-row: auto;
    }

    .grid-mosaico[data-items="5b"] > *:nth-child(10n-2) {
      grid-column-start: 7;
      grid-column-end: 13;
      grid-row: span 2;
    }

    .grid-mosaico[data-items="5b"] > *:nth-child(10n-1) {
      grid-column-start: 1;
      grid-column-end: 4;
    }

    .grid-mosaico[data-items="5b"] > *:nth-child(10n) {
      grid-column-start: 4;
      grid-column-end: 7;
    }
  }

  /* 6 elementos */
  /****************/
  .grid-mosaico[data-items="6"] > *:first-child,
  .grid-mosaico[data-items="6"] > *:nth-child(6n-5) {
    grid-column-start: 1;
    grid-column-end: 9;
    grid-row: span 2;
  }

  .grid-mosaico[data-items="6"] > *:nth-child(2),
  .grid-mosaico[data-items="6"] > *:nth-child(6n-4) {
    grid-column-start: 9;
    grid-column-end: 13;
  }

  .grid-mosaico[data-items="6"] > *:nth-child(3),
  .grid-mosaico[data-items="6"] > *:nth-child(6n-3) {
    grid-column-start: 9;
    grid-column-end: 13;
  }

  .grid-mosaico[data-items="6"] > *:nth-child(4),
  .grid-mosaico[data-items="6"] > *:nth-child(6n-2) {
    grid-column-start: 1;
    grid-column-end: 5;
  }

  .grid-mosaico[data-items="6"] > *:nth-child(5),
  .grid-mosaico[data-items="6"] > *:nth-child(6n-1) {
    grid-column-start: 5;
    grid-column-end: 9;
  }

  .grid-mosaico[data-items="6"] > *:nth-child(6n) {
    grid-column-start: 9;
    grid-column-end: 13;
  }

  .grid-mosaico[data-items="6"] > *:nth-child(12n-4) {
    grid-column-start: 5;
    grid-column-end: 13;
    grid-row: span 2;
  }

  .grid-mosaico[data-items="6"] > *:nth-child(9n),
  .grid-mosaico[data-items="6"] > *:nth-child(12n-5) {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row: span 1;
  }
  /* 6b elementos */
  /****************/
  .grid-mosaico[data-items="6b"] > *:first-child,
  .grid-mosaico[data-items="6b"] > *:nth-child(6n + 1) {
    grid-column-start: 1;
    grid-column-end: 8;
    grid-row: span 2;
  }

  .grid-mosaico[data-items="6b"] > *:nth-child(2),
  .grid-mosaico[data-items="6b"] > *:nth-child(6n + 2) {
    grid-column-start: 8;
    grid-column-end: 13;
  }

  .grid-mosaico[data-items="6b"] > *:nth-child(3),
  .grid-mosaico[data-items="6b"] > *:nth-child(6n + 3) {
    grid-column-start: 8;
    grid-column-end: 13;
  }

  .grid-mosaico[data-items="6b"] > *:nth-child(4),
  .grid-mosaico[data-items="6b"] > *:nth-child(6n + 4) {
    grid-column-start: 1;
    grid-column-end: 6;
  }

  .grid-mosaico[data-items="6b"] > *:nth-child(5),
  .grid-mosaico[data-items="6b"] > *:nth-child(6n + 5) {
    grid-column-start: 6;
    grid-column-end: 13;
    grid-row: span 2;
  }

  .grid-mosaico[data-items="6b"] > *:nth-child(6),
  .grid-mosaico[data-items="6b"] > *:nth-child(6n + 6) {
    grid-column-start: 1;
    grid-column-end: 6;
  }

  @media screen and (min-width: 821px) {
    .grid-mosaico[data-items="6b"] > *:first-child,
    .grid-mosaico[data-items="6b"] > *:nth-child(6n + 1) {
      grid-column-start: 1;
      grid-column-end: 7;
      grid-row: span 2;
    }

    .grid-mosaico[data-items="6b"] > *:nth-child(2),
    .grid-mosaico[data-items="6b"] > *:nth-child(6n + 2) {
      grid-column-start: 7;
      grid-column-end: 10;
    }

    .grid-mosaico[data-items="6b"] > *:nth-child(3),
    .grid-mosaico[data-items="6b"] > *:nth-child(6n + 3) {
      grid-column-start: 10;
      grid-column-end: 13;
    }

    .grid-mosaico[data-items="6b"] > *:nth-child(4),
    .grid-mosaico[data-items="6b"] > *:nth-child(6n + 4) {
      grid-column-start: 7;
      grid-column-end: 13;
      grid-row: span 2;
    }

    .grid-mosaico[data-items="6b"] > *:nth-child(5),
    .grid-mosaico[data-items="6b"] > *:nth-child(6n + 5) {
      grid-column-start: 1;
      grid-column-end: 4;
      grid-row: span 1;
    }

    .grid-mosaico[data-items="6b"] > *:nth-child(6),
    .grid-mosaico[data-items="6b"] > *:nth-child(6n + 6) {
      grid-column-start: 4;
      grid-column-end: 7;
    }
  }

  /* Mosaico fuera de GalleryLight: en móvil apila de 1 en 1.
   Va al final de la sección y con :nth-child(n) para igualar la
   especificidad de las variantes data-items y ganarles por orden.
   GalleryLight (.gallery-light) conserva su patrón de mosaico. */
  @media screen and (max-width: 600px) {
    .grid-mosaico:not(.gallery-light) {
      grid-template-columns: 1fr;
    }

    .grid-mosaico:not(.gallery-light) > *:nth-child(n) {
      grid-column: 1 / -1;
      grid-row: auto;
    }
  }

  /* ==========================================
   MAIN
   ========================================== */
  main {
    min-height: 50vh;
  }
}