/* =========================================================================
   Canoser — main.css (REHECHO 2026-06-08)
   Estilos compartidos entre todas las páginas del maquetado estático.
   Mobile-first: estilos base = 320px+, escalamos con min-width media queries.
   Breakpoints del proyecto: 480 / 768 / 1024 / 1280px

   Rehecho para reflejar el diseño REAL verificado en
   https://celulapublicidad.my.canva.site/pruebas-color (capturas + CSS
   computado). Reemplaza la versión anterior basada en un design-system
   oscuro/teal que no correspondía al sitio real — ver tokens.css y
   .claude/docs/canva-reference/REAL-DESIGN-TOKENS.md.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Reset / Base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-base);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* El drawer off-canvas del navbar (.canoser-navbar__menu, position:fixed +
     translateX(100%)) queda fuera del viewport pero WordPress/Chromium lo
     siguen contando en document.documentElement.scrollWidth, habilitando un
     scroll horizontal "fantasma" (sitio "corrido" reportado por Frank en
     mobile/tablet). overflow-x:hidden en html+body recorta ese scroll sin
     afectar position:sticky/fixed de otros elementos (solo recorta en el eje X
     a nivel de viewport). */
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-base);
  font-weight: 700;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
  color: var(--color-text);
}

/* Escala REAL verificada (Ronda 2 — getComputedStyle del sitio real):
   CRÍTICO — esta escala es COMPACTA. El h1 del hero es el ÚNICO texto
   grande del sitio (~35px). h2 (títulos de sección como "Nuestros
   proyectos destacados", "Contacto") y h3 (títulos de card/proyecto)
   NO son grandes — viven en el mismo orden que los botones (21px) y
   las cards (18px). NO inflar estos valores — Frank confirmó
   explícitamente "el h2 no es grande". Ver REAL-DESIGN-TOKENS.md. */
h1 {
  font-size: var(--text-hero);            /* 34.67px */
  font-weight: 700;
  line-height: var(--leading-hero);        /* 34px */
  letter-spacing: var(--tracking-hero);    /* 2.22px */
}
h2 {
  font-size: var(--text-section-h2);       /* 21.33px — MISMO orden que botones, no 2rem+ */
  font-weight: 700;
  line-height: var(--leading-section-h2);  /* 21px */
  letter-spacing: var(--tracking-cta);     /* 1.37px */
}
h3 {
  font-size: var(--text-card-title);       /* 18.67px */
  font-weight: 700;
  line-height: var(--leading-card-title);  /* 18px */
  letter-spacing: var(--tracking-card-title); /* 1.19px */
}
h4 {
  font-size: var(--text-sm);               /* 16px — no documentado explícitamente; se alinea al
                                               siguiente peldaño de la escala compacta (footer h4) */
  line-height: 1.2;
}

p { margin: 0 0 var(--space-4); color: var(--color-text); }

a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-link-hover); }

ul, ol { padding-left: var(--space-6); }

/* Foco visible accesible — nunca remover sin alternativa */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* Skip link — accesibilidad teclado */
.canoser-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-modal);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  padding: var(--space-4) var(--space-6);
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: 600;
}
.canoser-skip-link:focus {
  left: 0;
}

/* -------------------------------------------------------------------------
   2. Layout / Container
   ------------------------------------------------------------------------- */
.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.canoser-section {
  padding-block: var(--section-py);
}

.canoser-section-detpro-fi {
  padding-block-start: clamp(2rem, 8vw, 4rem); 
}
.canoser-section[aria-labelledby="qs-intro-title"] {
  padding-bottom: 1rem;
}
.canoser-section[aria-labelledby="mvv-title"] {
  padding-top: 1rem;
}

/* Secciones full-width de acento (fondo amarillo de marca) — "Quiénes
   somos" y footer. El texto sobre estas secciones usa --color-text-on-accent
   para cumplir contraste 4.5:1 (amarillo #5A9015 + oscuro #0F1015). */
.canoser-section--accent {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}
.canoser-section--accent h2,
.canoser-section--accent h3,
.canoser-section--accent p {
  color: var(--color-text-on-accent);
}

.canoser-section--soft {
  background: var(--color-bg-soft);
}

/* Quiénes somos — imagen de fondo + overlay administrable (Fase R5).
   Sin imagen: .canoser-section--accent mantiene fondo sólido #5a9015.
   Con imagen: .canoser-section--has-bg activa background-image y el overlay
   usa las custom properties --qs-overlay-color-rgb / --qs-overlay-opacity
   inyectadas por canoser-plugin vía wp_head. */
.canoser-section--has-bg {
  background-image: var(--qs-bg-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.canoser-section__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(var(--qs-overlay-color-rgb), var(--qs-overlay-opacity));
  pointer-events: none;
  z-index: 0;
}

.canoser-section--has-bg .container {
  position: relative;
  z-index: 1;
}

.canoser-section__head {
  max-width: 680px;
  margin-bottom: 2.0em;
}
.canoser-section__head--center {
  margin-inline: auto;
  text-align: center;
}

/* Contexto contacto: la imagen mide 844px, se amplía el max-width del head */
.canoser-contact .canoser-section__head {
  max-width: 844px;
  margin-inline: auto;
}

.canoser-section__eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* Variante para el eyebrow de "Quiénes somos" sobre fondo amarillo
   (punto 2 — texto "Expertos en Vivienda Social y Subsidios Habitacionales").
   Specs verificadas DISTINTAS del eyebrow genérico de arriba: no es un
   label uppercase pequeño, sino texto de tamaño intermedio en su caso
   normal. font-size 21.33px / 400 / line-height 21px / letter-spacing
   ~1.37px — ver REAL-DESIGN-TOKENS.md, fila "Expertos en Vivienda...". */
.canoser-section__eyebrow--accent {
  display: block;
  font-size: var(--text-eyebrow);
  font-weight: 400;
  line-height: var(--leading-section-h2);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: none;
  color: var(--color-text-on-accent);
  margin-bottom: var(--space-8);
  max-width: 46ch;
  margin-inline: auto;
}

.canoser-text-center { text-align: center; margin-inline: auto; }

/* Bloque de texto largo — limita la longitud de línea para legibilidad óptima */
.canoser-prose {
  max-width: 72ch;
  margin-inline: auto;
  line-height: var(--leading-body, 1.7);
}
.canoser-prose p {
  text-align: justify;
}

/* -------------------------------------------------------------------------
   3. Franja de marca — imagen real (linea-canoser.png)
   Reemplaza los spans de color generados por CSS. Las reglas de
   .canoser-stripe / .canoser-stripe__seg / .canoser-stripe--center y
   .canoser-accent-stripe se mantienen comentadas como referencia histórica.
   ------------------------------------------------------------------------- */
.canoser-linea-marca {
  display: block;
  width: 100%;
  max-width: 844px;
  height: auto;
  margin-block: 0.75rem;
}

/* Instancia de linea-marca en la sección Contacto: centrada + ancho máximo 844px */
.canoser-linea-marca--contact {
  width: 100%;
  max-width: 677px;
  margin-inline: auto;
  display: block;
  margin-block: 0.75rem;
}

/* -- OBSOLETO: reemplazado por .canoser-linea-marca + linea-canoser.png --
.canoser-stripe {
  display: flex;
  gap: .375rem;
  align-items: center;
}
.canoser-stripe__seg {
  display: inline-block;
  height: 6px;
  width: 2.25rem;
  border-radius: 999px;
}
.canoser-stripe__seg:nth-child(1) { background: var(--color-stripe-1); }
.canoser-stripe__seg:nth-child(2) { background: var(--color-stripe-2); }
.canoser-stripe__seg:nth-child(3) { background: var(--color-stripe-3); width: 3.5rem; }
.canoser-stripe__seg:nth-child(4) { background: var(--color-stripe-4); }
.canoser-stripe--center { justify-content: center; margin-inline: auto; }
-- FIN OBSOLETO -- */

/* -------------------------------------------------------------------------
   4. Navbar — SECCIÓN: Inicio-Hero → template-parts/inicio-hero.php
   Navbar BLANCA semi-transparente superpuesta sobre la foto del hero
   (no oscura como en el piloto anterior). En scroll/desktop conserva
   el mismo tratamiento — el sitio real no muestra un estado "scrolled"
   distinto en las capturas disponibles.
   ------------------------------------------------------------------------- */
.canoser-navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  box-shadow: 0 1px 0 rgba(15, 16, 21, 0.06);
  /* IMPORTANTE: backdrop-filter/background NO van directo en .canoser-navbar.
     Cualquier propiedad filter/backdrop-filter/transform/will-change en un
     ancestro convierte a ese ancestro en "containing block" de sus
     descendientes position:fixed (spec CSS) — .canoser-navbar__menu (drawer)
     y .canoser-navbar__overlay son ambos position:fixed y descendientes de
     .canoser-navbar. Con backdrop-filter aquí, ambos quedaban "encerrados" en
     la caja de ~64-128px del header en vez de cubrir el viewport completo:
     el drawer se veía como una franja horizontal angosta arriba (tapando el
     propio botón hamburguesa, que dejaba de responder al click) y el overlay
     oscuro no cubría el resto de la página — el "efecto hamburguesa con
     colores y efectos distorsionados" reportado por Frank en mobile/tablet.
     Fix: el fondo blanco translúcido + blur se aplican vía ::before (pseudo-
     elemento, NO crea containing block para los HERMANOS/HIJOS reales de
     .canoser-navbar), dejando .canoser-navbar libre de filter/backdrop-filter
     para que sus descendientes fixed se posicionen contra el viewport. */
  isolation: isolate;
}
.canoser-navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.canoser-navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-4);
}

/* En mobile/tablet (<1024px), .canoser-navbar__menu es position:fixed (el
   drawer) — el <nav> que lo envuelve queda con tamaño cero, y su
   margin-left:auto solo empujaba ESE elemento vacío al borde derecho,
   dejando al botón toggle "pegado" al logo con todo el espacio libre
   atrapado entre ambos (root cause de "el toggle queda muy apegado al
   logo" reportado por Frank). display:contents saca <nav> del flujo flex
   sin afectar el position:fixed de su hijo (.canoser-navbar__menu sigue
   ancladandose al viewport igual), dejando solo 2 ítems visibles (logo,
   toggle) que justify-content:space-between separa correctamente a los
   extremos del navbar. */
.canoser-navbar__inner nav {
  display: contents;
}

.canoser-navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-weight: 700;
  /* Nombre de marca "CREAR ASOCIADOS": tamaño no listado en
     REAL-DESIGN-TOKENS.md (no es uno de los 7 puntos de corrección).
     Se usa --text-md (18.67px, el peldaño más cercano de la escala
     verificada) para no heredar el salto a 21.33px que ahora representa
     --text-lg (botones/h2) y mantener proporción visual con el logo. */
  font-size: var(--text-md);
  color: var(--color-text);
  letter-spacing: .02em;
}
.canoser-navbar__brand:hover { color: var(--color-text); }

/* Logo navbar — imagen real (logo_navbar_canoser.png) */
.canoser-navbar__logo-link { display: flex; align-items: center; flex-shrink: 0; }
.canoser-navbar__logo-img  { height: 44px; width: auto; display: block; }

/* Footer logo */
.canoser-footer__logo-img  { height: 120px; width: auto; display: block; max-width: 140px; }

/* Menú: oculto en mobile, se muestra como drawer a través de [data-open].
   width:70vw (con max-width para que en viewports anchos, hasta 1023px, ver
   breakpoint del navbar más abajo, el drawer no ocupe un ancho
   desproporcionado — máximo ~352px/22rem, igual de usable que en mobile).
   overflow-y:auto + max-height por si el contenido (5 links + separador +
   2 CTAs) excede el alto de viewports muy bajos (ej. 320×568).
   IMPORTANTE: ancla en right:0 (no left:30% vía "inset"). Con left+width
   fijos y max-width recortando width, translateX(100%) solo desplaza el
   ancho real de la caja (ej. 352px) — si left quedaba fijo en 30vw (ej.
   230px en 768px viewport) y width se topa en 352px (max-width), la caja
   nunca llega a ocupar hasta el borde derecho del viewport, y
   translateX(100%) la deja "a medio camino" todavía visible dentro del
   viewport (drawer "cerrado" pero visible — root cause del navbar
   "deformado"/visible-cuando-cerrado en 768px reportado por Frank).
   Con right:0 + left:auto, la caja SIEMPRE termina pegada al borde derecho
   sin importar max-width, y translateX(100%) la saca completamente de
   pantalla. */
.canoser-navbar__menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 70vw;
  max-width: 22rem;
  max-height: 100dvh;
  overflow-y: auto;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--color-white);
  border-left: 1px solid rgba(15, 16, 21, 0.08);
  padding: var(--space-24) var(--space-8) var(--space-8);
  list-style: none;
  margin: 0;
  transform: translateX(100%);
  transition: transform var(--transition-base);
}

.canoser-navbar[data-open="true"] .canoser-navbar__menu {
  transform: translateX(0);
}

.canoser-navbar__menu a {
  display: block;
  /* Enlaces navbar verificados: 16px / 400 / line-height 22px (REAL-DESIGN-TOKENS.md).
     font-weight se mantiene en 600 en el drawer mobile (decisión de jerarquía visual
     propia del patrón drawer — el sitio real no documenta un estado mobile distinto;
     el peso 400 verificado corresponde a la barra desktop). */
  font-size: var(--text-navlink);   /* 16px */
  line-height: var(--leading-navlink); /* 22px */
  color: var(--color-text);
  font-weight: 600;
  padding-block: var(--space-4);
  border-bottom: 1px solid rgba(15, 16, 21, 0.08);
}
.canoser-navbar__menu a:hover,
.canoser-navbar__menu a[aria-current="page"] {
  color: var(--color-link-hover);
}

/* Separador visual antes de los CTAs del drawer mobile */
.canoser-navbar__menu-divider {
  border-top: 1px solid rgba(15, 16, 21, 0.08);
  margin-block: var(--space-4);
}
/* CTAs "Contacto"/"Grupo Crear" dentro del drawer — distintos de los <a> de
   navegación: sin border-bottom, los .canoser-btn ya traen su propio estilo */
.canoser-navbar__menu-cta {
  border-bottom: none;
  padding-block: var(--space-2) 0;
}
.canoser-navbar__menu-cta .canoser-btn {
  width: 100%;
  justify-content: center;
  /* .canoser-navbar__menu a {color:var(--color-text)} (especificidad 0,1,1)
     pisa el color de .canoser-btn--amber/--dark (0,1,0) — en "Grupo Crear"
     (fondo = var(--color-text)) eso dejaba el texto del mismo color que el
     fondo, es decir invisible. Reforzamos aquí el blanco de ambos botones
     (consistente con su apariencia en .canoser-navbar__actions/desktop). */
  color: var(--color-white);
}

.canoser-navbar__overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) - 1);
  background: rgba(15, 16, 21, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.canoser-navbar[data-open="true"] .canoser-navbar__overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Toggle hamburguesa — touch target 48x48 (Material) */
.canoser-navbar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(15, 16, 21, 0.12);
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer;
  /* El drawer (.canoser-navbar__menu, z-index:200/--z-overlay) cubre el 70%
     derecho del viewport, incluyendo la posición del propio botón toggle.
     position:relative + z-index por encima del drawer mantiene el ícono
     hamburguesa/X visible y clickeable sobre el panel abierto — si no, al
     abrir el menú el botón quedaba tapado (sin "X" visible para cerrar). */
  position: relative;
  z-index: calc(var(--z-overlay) + 1);
}
.canoser-navbar__toggle:hover { border-color: var(--color-accent); }

.canoser-navbar__toggle-icon,
.canoser-navbar__toggle-icon::before,
.canoser-navbar__toggle-icon::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.canoser-navbar__toggle-icon {
  position: relative;
}
.canoser-navbar__toggle-icon::before,
.canoser-navbar__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}
.canoser-navbar__toggle-icon::before { top: -7px; }
.canoser-navbar__toggle-icon::after  { top: 7px; }

.canoser-navbar[data-open="true"] .canoser-navbar__toggle-icon {
  background: transparent;
}
.canoser-navbar[data-open="true"] .canoser-navbar__toggle-icon::before {
  transform: translateY(7px) rotate(45deg);
}
.canoser-navbar[data-open="true"] .canoser-navbar__toggle-icon::after {
  transform: translateY(-7px) rotate(-45deg);
}

.canoser-navbar__cta {
  display: none;
}

/* >= 1024px: navbar horizontal estilo desktop, sin drawer.
   Antes el corte era 768px, pero logo + 5 links + 2 CTAs ("Contacto"/
   "Grupo Crear") no caben en una sola fila hasta ~935px de contenido
   (≈1010px de viewport con el padding del container) — entre 768px y
   ~1010px el navbar desbordaba horizontalmente (overflow real del body,
   "sitio corrido"/"navbar deformado" reportado por Frank en tablets/
   laptops en ese rango). El drawer mobile ya soporta perfectamente ese
   rango, así que se extiende su uso hasta 1024px (breakpoint estándar
   del proyecto). */
@media (min-width: 1024px) {
  .canoser-navbar__toggle { display: none; }
  .canoser-navbar__overlay { display: none; }

  /* Desktop: <nav> vuelve a ser una caja normal (display:contents solo
     aplica en mobile/tablet, ver arriba) y su margin-left:auto empuja el
     menú horizontal hacia la derecha, junto a .canoser-navbar__actions. */
  .canoser-navbar__inner nav {
    display: block;
    margin-left: auto;
  }

  .canoser-navbar__menu {
    position: static;
    /* width:70vw/max-width:22rem (regla base, drawer mobile) deben
       resetearse aquí: si no, el <ul> queda atrapado en max-width:352px
       en desktop — con flex-direction:row y 5 links + gap dentro de esos
       352px, flex-shrink:1 (default) comprime cada <a> por debajo de su
       ancho natural, causando wrap a 2 líneas ("Quiénes" arriba de
       "somos") o texto cortado ("Blog") — root cause del bug reportado
       por Frank en desktop. width:auto + max-width:none permiten que el
       <ul> ocupe su ancho natural de contenido (igual que el resto de
       sus propiedades, ya correctamente resueteadas aquí). */
    width: auto;
    max-width: none;
    max-height: none;
    overflow-y: visible;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    background: transparent;
    border: none;
    padding: 0;
    transform: none;
    transition: none;
  }
  .canoser-navbar__menu a {
    border-bottom: none;
    padding-block: var(--space-4);
    /* Coincide con el valor verificado: 16px / 400 / line-height 22px */
    font-size: var(--text-navlink);
    line-height: var(--leading-navlink);
    font-weight: 400;
    /* Evita wrap/compresión del texto cuando flex-shrink (default 1)
       reduce el <a> por debajo de su ancho natural — ver nota en
       .canoser-navbar__menu sobre el origen real del bug (max-width
       heredado del drawer mobile). white-space:nowrap es la defensa
       correcta a nivel de <a> independientemente de esa causa. */
    white-space: nowrap;
    flex-shrink: 0;
  }
  .canoser-navbar__menu > li {
    flex-shrink: 0;
  }
  .canoser-navbar__cta { display: inline-flex; }

  /* Ocultar en desktop — los mismos CTAs ya se muestran vía .canoser-navbar__actions */
  .canoser-navbar__menu-divider,
  .canoser-navbar__menu-cta {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   5. Botones (.canoser-btn)
   El sitio real usa botones primarios SIEMPRE en amarillo de marca con
   texto oscuro. La única variante secundaria observada es "outline oscuro
   sobre fondo amarillo" (botón "Ver más sobre nosotros" en _02). No existen
   botones outline claros sobre fondo blanco/foto en las capturas disponibles.
   ------------------------------------------------------------------------- */
.canoser-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  min-height: 44px; /* touch target Apple HIG */
  border-radius: 0;
  font-family: var(--font-base);
  /* Verificado: botones/CTAs = 21.33px / 700 / line-height 21px / letter-spacing 1.37px
     (REAL-DESIGN-TOKENS.md — "Botones / CTAs (todos)") */
  font-weight: 700;
  font-size: var(--text-cta);
  line-height: var(--leading-cta);
  letter-spacing: var(--tracking-cta);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.canoser-btn--primary {
  background: var(--color-accent);
  color: #ffffff;
}
.canoser-btn--primary:hover {
  background: #364b54;
  transform: translateY(-1px);
  color: #ffffff;
}

/* Variante outline oscuro — usada SOLO sobre fondo amarillo (sección
   "Quiénes somos"), nunca como botón primario alterno */
.canoser-btn--outline-on-accent {
  background: #384d56;
  border-color: #384d56;
  color: #ffffff;
}
.canoser-btn--outline-on-accent:hover {
  background: #364b54;
  border-color: #364b54;
  color: #ffffff;
}

/* hover-only en dispositivos que realmente soportan hover, evita "hover stuck" */
@media (hover: none) {
  .canoser-btn--primary:hover,
  .canoser-btn--outline-on-accent:hover {
    transform: none;
    background: var(--color-accent);
  }
  .canoser-btn--outline-on-accent:hover {
    background: transparent;
  }
}

.canoser-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* -------------------------------------------------------------------------
   6. Hero fotográfico — SECCIÓN: Inicio-Hero → template-parts/inicio-hero.php
   Foto full-bleed (placeholder de color sólido hasta recibir asset real)
   + overlay oscuro semitransparente (--color-hero-overlay) + contenido
   en texto blanco. Reemplaza el hero con gradiente abstracto del piloto
   anterior — el diseño real es fotográfico.
   ------------------------------------------------------------------------- */
.canoser-hero {
  position: relative;
  display: flex;
  align-items: center;     /* Ajuste punto 1: centrado VERTICAL del bloque de texto
                              respecto al viewport del hero (antes: flex-end, pegado
                              abajo) */
  justify-content: center; /* Ajuste punto 1: centrado HORIZONTAL del contenedor interno */
  min-height: 88svh; /* svh evita el bug del 100vh en mobile (barra direcciones) */
  overflow: hidden;
  isolation: isolate;
}

/* Placeholder fotográfico — Frank entregará la foto real de obra/grúa.
   Mientras tanto: bloque de color sólido con dimensiones explícitas
   (evita CLS) en lugar de generar/buscar imágenes externas. */
.canoser-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-stripe-1);
  background-image: linear-gradient(160deg, #2b3a4a 0%, var(--color-stripe-1) 60%);
}

/* Video de fondo (opcional, vía canoser-plugin tab Inicio) — mismo
   posicionamiento que .canoser-hero__photo, object-fit: cover emula
   background-size: cover. */
.canoser-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-stripe-1);
}

.canoser-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-hero-overlay);
}

.canoser-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: var(--space-16) var(--space-12);
  max-width: 100%;
  margin-inline: 0;
  text-align: left;
}

/* El grupo de botones y el indicador de franja deben centrarse como bloque,
   no solo su texto — flex/justify-content en lugar de heredar text-align */
.canoser-hero__inner .canoser-btn-group {
  justify-content: flex-start;
}
.canoser-hero__inner .canoser-stripe {
  justify-content: center;
}

.canoser-hero__title {
  color: #ffffff;
  margin-bottom: var(--space-6);
  /* Verificado: H1 hero = 34.67px / 700 / line-height 34px / letter-spacing 2.22px
     (ya heredado del selector global h1 en tokens — se reafirma aquí por
     especificidad y para dejar explícita la intención sobre fondo oscuro) */
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
}

.canoser-hero__lead {
  /* Verificado: párrafo del hero = 18.67px / 400 / line-height 26px / letter-spacing 1.19px */
  font-size: var(--text-hero-lead);
  line-height: var(--leading-hero-lead);
  letter-spacing: var(--tracking-hero-lead);
  max-width: 56ch;
  /* margin-inline: auto; */
  margin-bottom: var(--space-8);
  color: var(--color-text-on-dark);
}

.canoser-hero__indicator {
  margin-bottom: 40px;
  width: 667px;
  max-width: 100%;
  display: flex;
  justify-content: center;
  margin-inline: auto;
}
.canoser-hero__indicator2 {
  margin-bottom: 40px;
  width: 667px;
  max-width: 100%;
  display: flex;
  justify-content: center;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .canoser-hero__inner {
    padding-block: var(--space-24) var(--space-16);
    max-width: 55%;   /* left-loads the content block — responsive alt. to margin-right: 277px */
  }
}

/* -------------------------------------------------------------------------
   7. "Quiénes somos" — SECCIÓN full-width amarilla con 3 cards blancas
   → template-parts/inicio/inicio-quienes-somos.php
   ------------------------------------------------------------------------- */
.canoser-grid--3 {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .canoser-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .canoser-section[aria-labelledby="mvv-title"] .canoser-grid--3 {
    grid-template-columns: repeat(3, 316px);
    justify-content: center;
  }
}

.canoser-card {
  background: var(--color-white);
  color: var(--color-text);
  border-radius: 0;
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  text-align: center;
}
.canoser-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.canoser-card h3,
.canoser-card p { color: var(--color-text); }

/* Ícono lineal/outline simple — placeholder geométrico hasta recibir
   los SVG reales (carpeta, engranaje, check) */
.canoser-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--color-text);
  border-radius: 0;
  margin-bottom: var(--space-6);
  margin-inline: auto;
  color: var(--color-text);
}
.canoser-card__icon svg { width: 1.5rem; height: 1.5rem; }

/* Cards de portada "Quiénes Somos" con imagen subida vía plugin —
   contain en vez de cover para mostrar el icono completo sin recorte. */
.canoser-section--accent .canoser-card__icon {
  border: none;
  width: 80px;
  height: 80px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}
.canoser-section--accent .canoser-card__icon .canoser-card__icon-img {
  display: block;
  max-width: 80px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.canoser-card__title { margin-bottom: var(--space-4); }

/* -------------------------------------------------------------------------
   8. Project cards — layout base (inicio destacados) y variante overlay
      (proyectos.html: texto superpuesto sobre la foto con gradiente inferior)
   → template-parts/inicio/inicio-proyectos-destacados.php
   → template-parts/proyectos/proyectos-listado.php
   ------------------------------------------------------------------------- */
.canoser-project-card {
  display: block;
  background: var(--color-white);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.canoser-project-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

/* Placeholder fotográfico de proyecto — bloque de color con aspect-ratio
   explícito (evita CLS), reemplazar por <img> real cuando Frank entregue assets */
.canoser-project-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-stripe-1);
  background-image: linear-gradient(135deg, #3a4f60 0%, var(--color-stripe-1) 100%);
}

.canoser-project-card__body {
  padding: var(--space-6);
}

.canoser-project-card__location {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  /* Verificado: subtítulos/comuna = 16px / 400 / line-height 16px /
     letter-spacing ~1.02px (REAL-DESIGN-TOKENS.md) */
  font-size: var(--text-contact);
  line-height: var(--leading-contact);
  letter-spacing: var(--tracking-contact);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.canoser-project-card__location svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.canoser-project-card__title { margin-bottom: .25rem; }
.canoser-project-card__commune {
  font-size: var(--text-contact);
  line-height: var(--leading-contact);
  letter-spacing: var(--tracking-contact);
  color: var(--color-text-muted);
  margin: 0;
}

/* ---- Variante overlay (proyectos.html) ----------------------------------- */
/* La card ocupa todo el espacio de la foto; el texto flota sobre ella */

.canoser-project-card--overlay {
  position: relative;
  /* sin background blanco extra — la foto es el fondo de toda la card */
  background: transparent;
}

/* La foto ocupa la card completa con aspect-ratio fijo */
.canoser-project-card--overlay .canoser-project-card__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
}

/* Gradiente oscuro sobre la mitad inferior — legibilidad del texto */
.canoser-project-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.30) 45%,
    rgba(0, 0, 0, 0.00) 100%
  );
  pointer-events: none;
}

/* Badge de categoría — esquina superior izquierda */
.canoser-project-card__badge {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0;
  z-index: 2;
}

/* Caption (título + comuna) — zona inferior sobre el overlay */
.canoser-project-card__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-4) var(--space-5);
  z-index: 2;
}

.canoser-project-card--overlay .canoser-project-card__title {
  color: var(--color-white);
  margin-bottom: 0.25rem;
  /* Hereda tamaño h3 del reset global */
}

.canoser-project-card--overlay .canoser-project-card__commune {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: rgba(255, 255, 255, 0.80);
  font-size: var(--text-contact);
  line-height: var(--leading-contact);
  letter-spacing: var(--tracking-contact);
  margin: 0;
}

.canoser-project-card--overlay .canoser-project-card__commune svg {
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
  stroke: rgba(255, 255, 255, 0.80);
}

/* -------------------------------------------------------------------------
   9. Contacto — formulario sobre fondo claro con imagen de planos/casco
   → template-parts/inicio/inicio-contacto.php
   ------------------------------------------------------------------------- */
.canoser-contact {
  position: relative;
  overflow: hidden;
}

/* Capa de fondo full-bleed (planos arquitectónicos + casco de obra, o foto
   administrable vía canoser-plugin). Cubre TODA la sección en todos los
   breakpoints, incluido mobile. Placeholder: gradiente claro cuando no hay
   imagen configurada (el inline `background-image:url(...)` inyectado por
   PHP cuando SÍ hay imagen tiene mayor especificidad y lo sobrescribe). */
.canoser-contact__bg {
  display: block;
  position: absolute;
  inset: 0;
  background: var(--color-bg-soft);
  background-image: linear-gradient(160deg, #EFE9E2 0%, var(--color-bg-soft) 100%);
}

/* Overlay de legibilidad full-bleed: wash blanco semi-transparente uniforme
   sobre toda la sección para que el formulario siga siendo legible sobre la
   foto real. Opacidad administrable desde el admin (Tab Contacto) vía la
   custom property --contact-overlay-opacity inyectada inline en
   .canoser-contact__bg (Fase 2) — 0.85 es el fallback si la variable no está
   presente (ej. en /quienes-somos/, que aún no pasa por este partial). */
.canoser-contact__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, var(--contact-overlay-opacity, 0.85));
}

.canoser-contact__inner {
  position: relative;
  z-index: 1;
}

/* El formulario ocupa una columna limitada (~820px) — no todo el ancho.
   Los datos de empresa van DENTRO del form en la última fila (submit-row),
   no como columna hermana. */
.canoser-contact__body {
  display: block;
}

/* Formulario: grid interno + limitado a ~68% del contenedor (≈820px sobre
   1200px) en desktop, centrado horizontalmente. En mobile (<1024px) ocupa
   todo el ancho disponible. */
.canoser-form {
  display: grid;
  gap: var(--space-6);
  max-width: 68%;
  margin-inline: auto;
  margin-top: 73px;
}
@media (max-width: 1023px) {
  .canoser-form {
    max-width: 100%;
  }
}

/* Mensaje de estado del envío (?contacto=ok|error) — Fase 4b. */
.canoser-form__notice {
  margin: 0;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
}
.canoser-form__notice--success {
  background: #edfaf1;
  color: #1e7e34;
  border: 1px solid #b8ebc8;
}
.canoser-form__notice--error {
  background: #fdf0f0;
  color: #c0392b;
  border: 1px solid #f5c6c6;
}

/* Honeypot anti-spam: oculto para humanos, presente en el DOM para bots
   que no respetan CSS/JS. No usar display:none (algunos lectores de
   formularios automáticos lo ignoran si está display:none, pero igual no
   debe recibir foco ni ser visible). */
.canoser-form__honeypot {
  position: absolute !important;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.canoser-form__row {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 640px) {
  .canoser-form__row--2 {
    grid-template-columns: 1fr 1fr;
  }
}
.canoser-field {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.canoser-field label {
  /* Verificado EXACTO: labels de formulario = 18.67px / 400 / line-height 18px /
     letter-spacing ~1.19px (REAL-DESIGN-TOKENS.md). Se aplica font-weight 400
     literal — aunque un label en 400 reduce levemente el contraste visual
     frente a su input, Frank pidió exactitud sin "mejoras" silenciosas; si
     el PM prefiere 600 para legibilidad, es un cambio de una línea aquí. */
  font-size: var(--text-form-label);
  line-height: var(--leading-form-label);
  letter-spacing: var(--tracking-form-label);
  font-weight: 400;
  color: var(--color-text);
}
.canoser-field input,
.canoser-field textarea,
.canoser-field select {
  font: inherit;
  color: var(--color-text);
  background: var(--color-white);
  /* Puntas cuadradas + borde neutro sin color marcado */
  border: 1px solid #e0e0e0;
  border-radius: 0;
  padding: .75rem var(--space-4);
  min-height: 44px;
  transition: border-color var(--transition-fast);
}
.canoser-field textarea {
  min-height: 140px;
  resize: vertical;
}
.canoser-field input:focus,
.canoser-field textarea:focus,
.canoser-field select:focus {
  border-color: var(--color-accent);
  outline: none;
}
.canoser-field__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Botón de envío del formulario de contacto — puntas cuadradas */
.canoser-form .canoser-btn--primary,
.canoser-form .canoser-btn--amber {
  border-radius: 0;
}

/* Bloque de datos de contacto — columna derecha del layout de contacto */
.canoser-contact-info {
  display: grid;
  gap: var(--space-6);
}
.canoser-contact-info__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text);
  /* Verificado: texto de contacto (tel/correo/dirección) = 16px / 400 /
     line-height 16px / letter-spacing ~1.02px (REAL-DESIGN-TOKENS.md).
     font-size/line-height reducidos a 0.9em/1.3 para apariencia compacta
     dentro del submit-row del formulario de contacto. */
  font-size: 0.9em;
  line-height: 1.3;
  letter-spacing: var(--tracking-contact);
  margin: 0;
  padding: 0;
  min-height: 1.625em; /* ≈26px — alinea verticalmente icono y texto */
}

/* Iconos de contacto — fondo oscuro circular, icono blanco.
   border-box: width/height 40px = circulo completo (padding 8px → icono visible ~24px).
   También aplica a <img> (iconos administrables vía canoser-plugin, Mejora A):
   object-fit: contain evita que una imagen no cuadrada se deforme dentro del
   círculo de 40x40px — no-op para <svg>. */
.canoser-contact-info__item svg,
.canoser-contact-info__item img {
  flex-shrink: 0;
  /*background: var(--color-text);*/    /* #384D56 — oscuro, igual que en el footer */
  border-radius: 50%;
  /*padding: 8px;*/
  width: 33.39px;
  height: 33.39px;
  min-width: 40px;
  color: #ffffff;                   /* stroke/fill hereda este blanco via currentColor */
  object-fit: contain;
}

.canoser-contact-info__item a { color: var(--color-text); font-weight: 600; }
.canoser-contact-info__item a:hover { color: var(--color-link-hover); }

/* Fila de submit — botón izquierda + datos empresa derecha, en una sola fila.
   margin-left: auto en el hijo empuja los datos al borde derecho del form
   sin usar gap fijo ni magic numbers — funciona correctamente en responsive.
   En mobile (<768px): apila verticalmente (botón arriba, datos abajo). */
.canoser-form__submit-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .canoser-form__submit-row {
    flex-direction: column;
    gap: var(--space-6);
  }
}

/* Datos de empresa dentro del submit-row — margin-left: auto los empuja al
   borde derecho del formulario (donde terminan los inputs), sin spacers fijos */
.canoser-form__submit-row .canoser-contact-info {
  margin-left: auto;
  text-align: left;
}

/* ── Contact Form 7 — override para integrar con el diseño del tema ─────── */

/* display:contents elimina la caja propia de .wpcf7 y .wpcf7-form,
   sus hijos pasan a ser hijos directos del .canoser-form grid.
   Esto permite que .canoser-form__row, .canoser-field y
   .canoser-form__submit-row del CF7 template funcionen igual que HTML nativo. */
.wpcf7 { display: contents; }
.wpcf7-form { display: contents; }

.canoser-form .wpcf7 p { margin: 0; }
.wpcf7-form-control { display: block; width: 100%; }

.wpcf7-not-valid-tip {
	color: var(--color-error, #c0392b);
	font-size: var(--text-sm, 0.75rem);
	margin-top: 0.25rem;
	display: block;
}

/* Con display:contents en .wpcf7, el response-output hereda el grid context.
   grid-column:1/-1 le da ancho completo. */
.wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: var(--radius-md, 4px);
	font-size: var(--text-sm, 0.9rem);
	border: 1px solid transparent;
	grid-column: 1 / -1;
}
.wpcf7-mail-sent-ok {
	background: #edfaf1;
	border-color: #b8ebc8;
	color: #1e7e34;
}
.wpcf7-validation-errors,
.wpcf7-acceptance-missing {
	background: #fdf0f0;
	border-color: #f5c6c6;
	color: #c0392b;
}
.wpcf7-submit { border-radius: 0; }

/* ── /Contact Form 7 ─────────────────────────────────────────────────────── */

/* -------------------------------------------------------------------------
   10. Footer — full-width amarillo, 3 columnas
   → template-parts/inicio/inicio-footer.php
   ------------------------------------------------------------------------- */
.canoser-footer {
  background: var(--color-accent);
  /* Color de texto del footer: blanco sobre fondo verde --color-accent */
  color: var(--color-white);
  /* Font-size 13px en base 16px = 0.8125em — todos los textos internos heredan */
  font-size: 0.8125em;
  padding-block: var(--space-16) var(--space-8);
}
.canoser-footer__grid {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-12);
}
/* 3 columnas centradas con max-width 960px:
   - logo fijo 160px | datos de contacto 1fr | menú 0.75fr
   - column-gap uniforme --space-8 (2rem) entre las 3 columnas
   - max-width + margin-inline:auto centra el bloque dentro del footer amarillo */
@media (min-width: 768px) {
  .canoser-footer__grid--3col {
    grid-template-columns: 160px 1fr 0.75fr;
    column-gap: var(--space-8);
    row-gap: var(--space-4);
    max-width: 960px;
    margin-inline: auto;
  }
  .canoser-footer__grid--3col > *:first-child {
    /* column-gap maneja el espaciado entre columnas — margin-right ya no necesario */
    margin-right: 0;
    text-align: left;
    justify-self: start;
    align-self: start;
  }
  .canoser-footer__grid--3col > *:nth-child(2) {
    padding-right: 0;
    margin-right: 0;
  }
}
/* Sub-bloques verticales dentro de la columna "Datos de contacto" —
   apila "Datos de contacto" y "Horario de atención" con separación
   propia, distinta del gap general de columnas */
.canoser-footer__col-stack {
  display: grid;
  gap: var(--space-8);
}

/* Items de contacto del footer — cada li como fila flex con icono circular */
.canoser-footer__contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-white);
  font-size: inherit;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}
.canoser-footer__contact-item svg,
.canoser-footer__contact-item img {
  flex-shrink: 0;
  background: transparent;
  border-radius: 50%;
  /*padding: 6px;*/
  width: 27.1946px;
  height: 27.1946px;
  min-width: 27.1946px;
  color: #ffffff;
}
.canoser-footer__contact-item img {
  object-fit: contain;
}
.canoser-footer__contact-item a {
  color: var(--color-white);
  font-weight: 600;
}
.canoser-footer__contact-item a:hover {
  text-decoration: underline;
}
.canoser-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-weight: 700;
  /* Ver nota en .canoser-navbar__brand: --text-lg ahora representa 21.33px
     (botones/h2); se usa --text-md (18.67px) para mantener proporción del
     nombre de marca, ya que el tamaño específico de "CREAR ASOCIADOS" no
     está en la tabla verificada de REAL-DESIGN-TOKENS.md. */
  font-size: var(--text-md);
  color: var(--color-white);
  margin-bottom: 0;
}
.canoser-footer h4 {
  font-size: 0.9em;               /* era var(--text-base); relativo al 0.8125em del footer = ~11.7px */
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-white);
  margin-bottom: var(--space-6);
}
.canoser-footer p {
  font-size: 0.9em;               /* relativo al 0.8125em del footer = ~11.7px */
  color: var(--color-white);
}
.canoser-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-4);
}
.canoser-footer ul a { color: var(--color-white); }
.canoser-footer ul a:hover { text-decoration: underline; }

.canoser-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;            /* era flex-start → centrado en mobile */
  text-align: center;             /* centrado del texto de copyright */
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: var(--text-sm);
  color: var(--color-white);
}
@media (min-width: 640px) {
  .canoser-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: center;      /* era space-between → centrado horizontal en desktop */
  }
}
.canoser-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.canoser-footer__legal a { color: var(--color-white); }
.canoser-footer__legal a:hover { text-decoration: underline; }

.canoser-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8); /* separacion del bloque Siguenos respecto al ul del Menu */
}
.canoser-footer__social-label {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-white);
  margin-right: var(--space-2);
}
.canoser-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: transparent;
  border-radius: 50%;
  color: #ffffff;
  transition: background var(--transition-fast);
}
.canoser-footer__social a svg,
.canoser-footer__social a img {
  width: 22.1971px;
  height: 22.1971px;
  flex-shrink: 0;
}
.canoser-footer__social a img {
  object-fit: contain;
}
.canoser-footer__social a:hover {
  background: #e8db1f91;
}

/* -------------------------------------------------------------------------
   11. Animación fade-in (IntersectionObserver)
   ------------------------------------------------------------------------- */
.canoser-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.canoser-fade-in.visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .canoser-fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   13. Hero de página interior (Quiénes Somos / Servicios / etc.)
   → template-parts/page-hero.php
   EXTENSIÓN aditiva (Fase A — quienes_somos.html y servicios.html).
   Mismo patrón visual del hero de Inicio (foto full-bleed + overlay oscuro
   #0F1015 + navbar blanca superpuesta + texto blanco), pero más compacto:
   estas páginas interiores no necesitan el bloque de texto largo (lead +
   botón + indicador de franja) del hero de portada — solo encabezado de
   página (eyebrow opcional + H1). Se usa min-height menor para no repetir
   un hero "completo" en cada página interior (mejor LCP/INP: menos contenido
   above-the-fold que animar/observar).
   ------------------------------------------------------------------------- */
.canoser-page-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46svh;
  overflow: hidden;
  isolation: isolate;
}
.canoser-page-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-stripe-1);
  background-image: linear-gradient(160deg, #2b3a4a 0%, var(--color-stripe-1) 60%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.canoser-page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Overlay GLOBAL administrable (Tab Inicio > Overlay de Page-Hero,
     2026-06-15) — custom properties emitidas en wp_head por
     canoser_print_page_hero_overlay_style() (canoser-plugin). El
     fallback rgba(19, 22, 32, 0.6) preserva el valor actual de
     --color-hero-overlay si el plugin está inactivo o las opciones aún no
     existen en canoser_options. NO usar --color-hero-overlay aquí: ese
     token es exclusivo de .canoser-hero__overlay (hero principal de
     portada), fuera de alcance. */
  background: rgba(var(--page-hero-overlay-color-rgb, 19, 22, 32), var(--page-hero-overlay-opacity, 0.6));
}
.canoser-page-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  /*max-width: 720px;*/
  margin-inline: auto;
  text-align: center;
  padding-block: var(--space-16) var(--space-12);
}
.canoser-page-hero__eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-4);
}
.canoser-page-hero__title {
  /* Color del título GLOBAL administrable (Tab Inicio > Overlay de
     Page-Hero, 2026-06-15) — custom property emitida en wp_head por
     canoser_print_page_hero_overlay_style() (canoser-plugin). El
     fallback var(--color-white) preserva el valor actual si el plugin está
     inactivo o la opción aún no existe en canoser_options. */
  color: var(--page-hero-title-color, var(--color-white));
  margin-bottom: 0;
  font-size: 3em;
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
  text-align: left;
}
.canoser-page-hero__lead {
  font-size: var(--text-hero-lead);
  line-height: var(--leading-hero-lead);
  letter-spacing: var(--tracking-hero-lead);
  max-width: 56ch;
  margin-inline: auto;
  margin-top: var(--space-6);
  margin-bottom: 0;
  color: var(--color-text-on-dark);
}
@media (min-width: 768px) {
  .canoser-page-hero { min-height: 40svh; }
  .canoser-page-hero__inner { padding-block: var(--space-16); }
}

/* -------------------------------------------------------------------------
   14. Cards coloreadas — Misión / Valores / Visión (Quiénes Somos)
   → template-parts/quienes-somos/mision-valores-vision.php
   EXTENSIÓN aditiva. Cada modificador define un fondo de color sólido que
   ocupa el 100% de la superficie de la card. El texto y los íconos invierten
   a blanco o al oscuro del sistema según el contraste WCAG verificado:
     - Misión  (#5A9015 ámbar)  → texto #384D56 — ratio > 7:1 (igual que CTA)
     - Valores (#384D56 oscuro) → texto #FFFFFF — ratio > 7:1
     - Visión  (#D10E3F carmesí)→ texto #FFFFFF — ratio > 4.5:1 (AA verificado)
   box-shadow se elimina en estas cards: contrasta mal visualmente con el
   fondo sólido de color y no aporta jerarquía (la card ya destaca por color).
   currentColor en los SVG resuelve al color de texto declarado en el
   modificador, sin necesidad de sobreescribir stroke manualmente.
   border-radius heredado de --radius-lg (sin cambios).
   ------------------------------------------------------------------------- */

/* Card Misión — fondo ámbar de marca, texto blanco (#ffffff) */
.canoser-card--mision {
  background: var(--color-accent);          /* #5A9015 */
  color: #ffffff;
  box-shadow: none;
}
.canoser-card--mision:hover {
  box-shadow: none;
}
.canoser-card--mision h3,
.canoser-card--mision p {
  color: #ffffff;
}
.canoser-card--mision .canoser-card__icon {
  border: none;
  color: #ffffff;
}

.canoser-card--mision .canoser-card__icon {
  border: none;
  color: var(--color-white);
  /* Solicitud Frank: el ícono (svg por defecto o img administrable) debe
     medir exactamente 67.3629px. El contenedor base (3rem = 48px) quedaría
     más chico que el ícono y lo recortaría — se agranda a 72px (múltiplo de
     4px de la escala de espaciado) para dejar ~2.3px de aire visual por
     lado sin alterar margin-bottom/margin-inline/demás propiedades base. */
  width: 72px;
  height: 72px;
}
.canoser-card--mision .canoser-card__icon svg,
.canoser-card--mision .canoser-card__icon img {
  width: 67.3629px;
  height: 67.3629px;
}


/* Card Valores — fondo gris-azulado oscuro, texto blanco */
.canoser-card--valores {
  background: var(--color-text);            /* #384D56 */
  color: var(--color-white);                /* #FFFFFF — ratio >7:1 */
  box-shadow: none;
}
.canoser-card--valores:hover {
  box-shadow: none;
}
.canoser-card--valores h3,
.canoser-card--valores p {
  color: var(--color-white);
}
.canoser-card--valores .canoser-card__icon {
  border: none;
  color: var(--color-white);
  /* Solicitud Frank: el ícono (svg por defecto o img administrable) debe
     medir exactamente 67.3629px. El contenedor base (3rem = 48px) quedaría
     más chico que el ícono y lo recortaría — se agranda a 72px (múltiplo de
     4px de la escala de espaciado) para dejar ~2.3px de aire visual por
     lado sin alterar margin-bottom/margin-inline/demás propiedades base. */
  width: 72px;
  height: 72px;
}
.canoser-card--valores .canoser-card__icon svg,
.canoser-card--valores .canoser-card__icon img {
  width: 67.3629px;
  height: 67.3629px;
}

/* Card Visión — fondo verde de marca #5a9015, texto blanco */
.canoser-card--vision {
  background: #5a9015;
  color: #ffffff;
  box-shadow: none;
}
.canoser-card--vision:hover {
  box-shadow: none;
}
.canoser-card--vision h3,
.canoser-card--vision p {
  color: var(--color-white);
}
.canoser-card--vision .canoser-card__icon {
  border: none;
  color: var(--color-white);
}

.canoser-card--vision .canoser-card__icon {
  border: none;
  color: var(--color-white);
  /* Solicitud Frank: el ícono (svg por defecto o img administrable) debe
     medir exactamente 67.3629px. El contenedor base (3rem = 48px) quedaría
     más chico que el ícono y lo recortaría — se agranda a 72px (múltiplo de
     4px de la escala de espaciado) para dejar ~2.3px de aire visual por
     lado sin alterar margin-bottom/margin-inline/demás propiedades base. */
  width: 72px;
  height: 72px;
}
.canoser-card--vision .canoser-card__icon svg,
.canoser-card--vision .canoser-card__icon img {
  width: 67.3629px;
  height: 67.3629px;
}

/* -------------------------------------------------------------------------
   17. Grid de equipo (Quiénes Somos — sección "Nuestro equipo y nuestra historia")
   → template-parts/quienes-somos/equipo-historia.php
   Mobile-first: 1 columna base, 2 columnas ≥480px, 4 columnas ≥1024px.
   La foto-placeholder usa aspect-ratio 1/1 y --color-bg-soft como fondo
   neutro (no imagen externa — Frank entregará las fotos reales). El nombre
   se renderiza en --text-card-title / 700 y el cargo en --text-sm / 400
   con --color-text-muted, coherente con la escala verificada del sistema.
   ------------------------------------------------------------------------- */
.canoser-team-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 480px) {
  .canoser-team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .canoser-team-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.canoser-team-card {
  background: var(--color-white);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.canoser-team-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

/* Foto de equipo — proporción 231.823 x 324.796 (≈0.7138) según diseño Canva,
   coincide casi exactamente con el ratio real de las fotos subidas (571x800px).
   aspect-ratio explícito evita CLS; width:100% mantiene el grid responsivo
   1/2/4 columnas. Frank entregará las fotografías reales. */
.canoser-team-card__photo {
  width: 100%;
  aspect-ratio: 231.823 / 324.796;
  background: var(--color-bg-soft);
  background-image: linear-gradient(160deg, #EFE9E2 0%, var(--color-bg-soft) 100%);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.canoser-team-card__info {
  padding: var(--space-6);
}

.canoser-team-card__name {
  font-size: var(--text-card-title);        /* 18.67px / 700 */
  font-weight: 700;
  line-height: var(--leading-card-title);
  letter-spacing: var(--tracking-card-title);
  color: var(--color-text);
  margin: 0 0 .375rem;
  text-align: center;
}

.canoser-team-card__role {
  font-size: var(--text-sm);               /* 16px / 400 */
  line-height: 1.4;
  color: var(--color-text-muted);
  margin: 0;
  text-align: center;
}
.canoser-team-card__role2 {
  font-size: var(--text-sm);               /* 16px / 400 */
  line-height: 1.4;
  color: var(--color-text-muted);
  margin: 0;
  text-align: center;
}

/* -------------------------------------------------------------------------
   15. Bloques de servicio (servicios.html)
   Layout: foto 37% izquierda + texto 63% derecha, esquinas rectas,
   sin alternancia — todos los bloques tienen el mismo orden (foto-izq).
   Verificado contra https://celulapublicidad.my.canva.site/servicios-crear-asociados
   en viewport 1440px (2026-06-08).
   ------------------------------------------------------------------------- */

/* Botones del navbar: Contacto (ámbar) y Grupo Crear (gris-oscuro) */
.canoser-btn--amber {
  background: var(--color-accent);     /* #5A9015 */
  color: var(--color-white);           /* letras blancas sobre amarillo */
  border-radius: 0;
  padding: 0.5rem 1.25rem;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: background var(--transition-fast);
}
.canoser-btn--amber:hover {
  background: #364b54;
  color: #ffffff;
}
.canoser-btn--dark {
  background: var(--color-text);       /* #384D56 */
  color: var(--color-white);
  border-radius: 0;
  padding: 0.5rem 1.25rem;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: background var(--transition-fast);
}
.canoser-btn--dark:hover {
  background: #364b54;
  color: #ffffff;
}

/* Contenedor de los dos botones del navbar (desktop).
   Mismo criterio que el breakpoint del navbar (1024px, ver más arriba) —
   en <1024px los CTAs ya se muestran dentro del drawer mobile
   (.canoser-navbar__menu-cta). */
.canoser-navbar__actions {
  display: none;
  gap: 0.5rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .canoser-navbar__actions {
    display: flex;
  }
}

/* Sección de introducción — "Acompañamos cada proyecto." + franja */
.canoser-section--tight { padding-block:5.5rem 1.5rem; }
.canoser-section--tight-detpro { padding-block: 0.5rem 1.5rem; }

.canoser-service-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-top: 63px;
}
.canoser-service-intro-proyectos1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 40px;
}
.canoser-service-intro-somos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 40px;
}
.canoser-service-intro-somos ~ .canoser-prose {
  max-width: 844px;
  margin-inline: auto;
}
.canoser-service-intro__text {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-text);
  text-align: center;
  margin: 0;
}
/* -- OBSOLETO: reemplazado por .canoser-linea-marca + linea-canoser.png --
.canoser-accent-stripe {
  display: flex;
  gap: 4px;
  align-items: center;
}
.canoser-accent-stripe span {
  display: inline-block;
  height: 6px;
  border-radius: 0;
}
.canoser-accent-stripe span:nth-child(1) { width: 28px; }
.canoser-accent-stripe span:nth-child(2) { width: 80px; }
.canoser-accent-stripe span:nth-child(3) { width: 48px; }
.canoser-accent-stripe span:nth-child(4) { width: 80px; }
.canoser-accent-stripe span:nth-child(5) { width: 36px; }
-- FIN OBSOLETO -- */

/* -----------------------------------------------------------------------
   Bloques de servicio — servicios.html
   Layout: foto 37% (izq) + texto 63% (der), sin border-radius, sin alternar
   ----------------------------------------------------------------------- */
.canoser-svc-block {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  margin-bottom: 1.5rem;
  height: 256px;
  overflow: hidden;
}

.canoser-svc-block__photo {
  flex: 0 0 37%;
  aspect-ratio: 3 / 2;
  /* background: var(--color-text);  */  /* placeholder oscuro hasta recibir foto */
  border-radius: 0;
  min-height: 220px;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.canoser-svc-block__body {
  flex: 1 1 63%;
  background: #f7f8f8;
  border-radius: 0;
  padding: 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.canoser-svc-block__title {
  font-size: 1.33rem;    /* ~21.33px — escala tipográfica del sistema */
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.canoser-svc-block__body p {
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0;
}

/* Mobile: apila foto arriba, texto abajo */
@media (max-width: 767px) {
  .canoser-svc-block {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }
  .canoser-svc-block__photo {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* -------------------------------------------------------------------------
   16. Utilidades
   ------------------------------------------------------------------------- */

/* Títulos en heroes de página interior — alineados a la izquierda */
.page-hero-title {
  text-align: left;
}

.canoser-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   18. Badges de categoría — proyectos.html / blog.html
   Colores del sistema de marca verificados:
     Azul #007DAF | Rojo #F6053E | Ámbar #5A9015 | Oscuro #3C5058
   ------------------------------------------------------------------------- */
.canoser-badge {
  display: inline-block;
  padding: 0.2rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
  border-radius: 0;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}
.canoser-badge--blue  { background: #007DAF; }
.canoser-badge--red   { background: #F6053E; }
.canoser-badge--amber { background: var(--color-accent); }
.canoser-badge--dark  { background: #3C5058; }

/* El badge dentro del layout original (inicio destacados, con __body) */
.canoser-project-card__body .canoser-badge {
  display: block;
  margin-bottom: 0.5rem;
}

/* El badge en la variante overlay ya está posicionado por .canoser-project-card__badge;
   se anula el display:block heredado para que no rompa el posicionamiento absoluto */
.canoser-project-card--overlay .canoser-project-card__badge {
  display: inline-block;
  margin-bottom: 0;
}

/* Hero interior — alineacion izquierda (blog, proyectos) */
.canoser-page-hero__inner--left {
  text-align: left;
  align-items: flex-start;
}

/* -------------------------------------------------------------------------
   19. Blog cards — blog.html
   Foto 16:9 + meta (badge + fecha) + título + extracto + enlace
   ------------------------------------------------------------------------- */

/* Intro del blog: centrado vertical, sin el padding-top de servicios */
.canoser-blog-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.canoser-blog-intro__text {
  font-size: 24px;
  font-weight: 400;
  color: var(--color-text);
  margin: 0;
  text-align: center;
}
.canoser-blog-card {
  background: var(--color-white);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  display: flex;
  flex-direction: column;
}
.canoser-blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.canoser-blog-card__photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-stripe-1);
  background-image: linear-gradient(135deg, #3a4f60 0%, var(--color-stripe-1) 100%);
}
.canoser-blog-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.canoser-blog-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-4);
}
.canoser-blog-card__date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}
.canoser-blog-card__title {
  font-size: var(--text-card-title);
  font-weight: 700;
  line-height: var(--leading-card-title);
  letter-spacing: var(--tracking-card-title);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}
.canoser-blog-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 var(--space-6);
  flex: 1;
}
.canoser-blog-card__cta {
  align-self: flex-start;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.canoser-blog-card__cta:hover {
  color: var(--color-link-hover);
  border-color: var(--color-link-hover);
}

/* Card variante main: sin sombra, imagen arriba, badge + título + fecha abajo */
.canoser-blog-card--main {
  flex-direction: column;
  box-shadow: none;
  width: 322.175px;
}
.canoser-blog-card--main .canoser-blog-card__photo {
  width: 322.175px;
  height: 227.278px;
  aspect-ratio: unset;
  flex-shrink: 0;
}
.canoser-blog-card--main .canoser-blog-card__body {
  padding: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: transparent;
  font-family: var(--font-base);
}
.canoser-blog-card--main .canoser-blog-card__title {
  margin: 0;
  font-size: 25px;
  font-weight: 400;
  font-family: var(--font-base);
}
.canoser-blog-card--main .canoser-blog-card__date {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 400;
  font-family: var(--font-base);
  color: var(--color-text-muted);
}
@media (max-width: 639px) {
  .canoser-blog-card--main,
  .canoser-blog-card--main .canoser-blog-card__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 322.175 / 227.278;
  }
}

/* -------------------------------------------------------------------------
   20. Project category titles + fixed-size cards — proyectos.html
   Diseño real verificado en la referencia Canva: cada categoría tiene un
   rectángulo de color sólido de ancho completo como título, seguido de un
   flex-grid de cards con dimensiones fijas (301.755px × 393.744px).
   → template-parts/proyectos/proyectos-listado.php
   ------------------------------------------------------------------------- */

/* Título de categoría — rectángulo de color de ancho completo */
.canoser-project-category {
  display: inline-block;
  padding: 4px 4px 4px 8px;
  font-family: var(--font-base);
  font-size: var(--text-section-h2);
  font-weight: normal;
  line-height: 1.3;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  border-radius: 0;
  margin: 0 0 var(--space-6);
}

/* Los colores usan la clase compuesta para superar la especificidad del
   reset global (h1,h2,h3,h4 { color: var(--color-text) })
   DEPRECADAS (Fase 6c, "Paréntesis B", 2026-06-12) — reemplazadas por las
   8 clases --azul/--rojo/--amarillo/--verde/--azul-oscuro/--oscuro/--morado/
   --gris de abajo, generadas dinámicamente desde
   canoser_proyecto_estado_color_map(). azul=blue, rojo=red, amarillo=amber
   (mismos hex) — se mantienen sin eliminar hasta el cleanup diferido de la
   Sección 10 del brief
   (.claude/agent-memory/project-manager/parentesis_b_brief_fase6c_estados_proyecto.md). */
.canoser-project-category.canoser-project-category--blue {
  background: #007DAF;
  color: #ffffff;
}

.canoser-project-category.canoser-project-category--red {
  background: #F6053E;
  color: #ffffff;
}

.canoser-project-category.canoser-project-category--amber {
  background: #5A9015;
  color: #ffffff;
}

/* ── Estados de proyecto — 8 colores (Fase 6c, "Paréntesis B", ADR-002) ──
   Generadas dinámicamente vía canoser_get_proyectos_estados() →
   $estado_row->project_category_class (template-parts/proyectos/canoser-listado.php).
   Hex documentados en el docblock de canoser_proyecto_estado_color_map()
   (wp-content/plugins/canoser-plugin/inc/db.php). azul/rojo/amarillo
   reproducen exactamente blue/red/amber (mismos hex) para que los 3 estados
   sembrados (Postulación/Ejecución/Cierre) se vean idénticos a antes. */
.canoser-project-category.canoser-project-category--azul {
  background: #007DAF;
  color: #ffffff;
}

.canoser-project-category.canoser-project-category--rojo {
  background: #F6053E;
  color: #ffffff;
}

.canoser-project-category.canoser-project-category--amarillo {
  background: #5A9015;
  color: #ffffff;
}

.canoser-project-category.canoser-project-category--verde {
  background: #5A9015;
  color: #ffffff;
}

.canoser-project-category.canoser-project-category--azul-oscuro {
  background: #047CAA;
  color: #ffffff;
}

.canoser-project-category.canoser-project-category--oscuro {
  background: #3C5058;
  color: #ffffff;
}

.canoser-project-category.canoser-project-category--morado {
  background: #7C5CBF;
  color: #ffffff;
}

.canoser-project-category.canoser-project-category--gris {
  background: #6B7B85;
  color: #ffffff;
}

/* Wrapper centrado: width fit-content + margin-inline auto centra el bloque
   sin afectar la alineación interna (título y textos permanecen a la izquierda). */
.canoser-project-block {
  width: fit-content;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

/* Grid de cards: 3 columnas fijas — evita cálculos sub-píxel de flex-wrap */
.canoser-project-grid {
  display: grid;
  grid-template-columns: repeat(3, 301.755px);
  gap: 50px;
  margin-bottom: var(--space-12);
}

/* Card de proyecto con dimensiones fijas tomadas de la referencia Canva */
.canoser-project-card--fixed {
  display: block; /* la card es un <a>, sin esto ignoraría width/height (inline) */
  position: relative;
  overflow: hidden;
  width: 301.755px;
  height: 393.744px;
  flex-shrink: 0;
  border-radius: 0;
  text-decoration: none; /* evita el subrayado heredado del <a> en el texto del caption */
  /* En mobile, la card ocupa el ancho disponible y ajusta la altura
     proporcionalmente para mantener el aspecto visual */
}

@media (max-width: 479px) {
  .canoser-project-card--fixed {
    width: 100%;
    height: auto;
    aspect-ratio: 301.755 / 393.744;
  }
}

/* Foto: cubre toda la card */
.canoser-project-card--fixed .canoser-project-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cuando es div placeholder, mantiene el gradiente de referencia */
  aspect-ratio: unset;
  background: var(--color-stripe-1);
  background-image: linear-gradient(160deg, #2d4050 0%, #3a5568 60%, #2a3f50 100%);
}

/* Gradiente oscuro inferior para legibilidad del caption */
.canoser-project-card--fixed .canoser-project-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.28) 45%,
    rgba(0, 0, 0, 0.00) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Overlay hover — amarillo #5A9015 al 50% sobre toda la imagen */
.canoser-project-card__hover-overlay {
  position: absolute;
  inset: 0;
  background: #5A9015;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 3;
  pointer-events: none;
}

.canoser-project-card--fixed:hover .canoser-project-card__hover-overlay {
  opacity: 0.5;
}

/* Caption (nombre + comuna) — zona inferior sobre el overlay */
.canoser-project-card--fixed .canoser-project-card__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-4) 16px 20px; /* 16px lateral + 20px inferior — --space-5 no existe en tokens */
  z-index: 2;
}

/* Título del proyecto: MAYÚSCULAS, negrita, 16px — verificado Canva */
.canoser-project-card--fixed .canoser-project-card__title {
  color: #ffffff;
  font-size: var(--text-contact);     /* 16px exacto — verificado CSS computado Canva */
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.125;                 /* 18px / 16px — verificado lh:18px en Canva */
  letter-spacing: var(--tracking-contact); /* 1.024px — verificado Canva */
  margin: 0 0 0.125rem 0;            /* separación mínima antes de la comuna */
}

/* Comuna: mismo tamaño que el título, peso normal, blanco sólido */
.canoser-project-card--fixed .canoser-project-card__commune {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #ffffff;                     /* blanco sólido — referencia Canva usa rgb(255,255,255) */
  font-size: var(--text-contact);     /* 16px */
  line-height: 1.125;                 /* 18px / 16px */
  letter-spacing: var(--tracking-contact); /* 1.024px */
  margin: 0 0 0.125rem 0;
}

.canoser-project-card--fixed .canoser-project-card__commune svg {
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
  stroke: #ffffff;
}

/* Familias beneficiadas: mismas métricas que la comuna */
.canoser-project-card--fixed .canoser-project-card__families {
  display: block;
  color: #ffffff;
  font-size: var(--text-contact);     /* 16px */
  font-weight: 400;
  line-height: 1.125;                 /* 18px / 16px */
  letter-spacing: var(--tracking-contact); /* 1.024px */
  margin: 0;
}

/* En mobile el margin-left del título de categoría se elimina */
@media (max-width: 767px) {
  .canoser-project-category {
    margin-left: 0;
  }
}

/* En mobile: grid de 1 columna, card ocupa ancho disponible */
@media (max-width: 479px) {
  .canoser-project-block {
    width: 100%;
  }
  .canoser-project-grid {
    grid-template-columns: 1fr;
  }
}

/* En tablet: 2 columnas */
@media (min-width: 480px) and (max-width: 1059px) {
  .canoser-project-block {
    width: 100%;
  }
  .canoser-project-grid {
    grid-template-columns: repeat(2, 301.755px);
  }
}

/* =========================================================================
   21. Blog — layout 2 columnas (main + sidebar)
   Dimensiones imagen card principal: 322.175px × 227.278px (Canva)
   Dimensiones imagen sidebar: 124.745px × 93.5217px (Canva)
   ========================================================================= */

/* Título de columna — "NOVEDADES" y "MÁS CONTENIDOS" al mismo nivel */
.canoser-blog-col-title {
  font-size: var(--text-section-h2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-cta);
  color: var(--color-text);
  text-align: left;
  margin: 0 0 var(--space-6);
}

/* Layout principal + sidebar: flex row en desktop */
.canoser-blog-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: flex-start;
}
@media (min-width: 1024px) {
  .canoser-blog-layout {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* Columna principal */
.canoser-blog-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

/* Grid interno: 2 cards de dimensión fija (322.175px) por fila */
.canoser-blog-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px) {
  .canoser-blog-cards-grid {
    grid-template-columns: repeat(2, 322.175px);
    gap: 40px;
  }
}

/* Badge en cards del blog — dimensiones fijas, texto centrado */
.canoser-blog-card--main .canoser-badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1px 4px 2px 4px;
  font-size: 16px;
  width: fit-content;
  height: auto;
}

/* Sidebar: ancho fijo */
.canoser-blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
}
@media (min-width: 640px) {
  .canoser-blog-sidebar {
    width: 354px;
    flex-shrink: 0;
  }
}
@media (max-width: 639px) {
  .canoser-blog-sidebar {
    width: 100%;
  }
}
.canoser-blog-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.canoser-blog-sidebar__item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.canoser-blog-sidebar__thumb {
  width: 124.745px;
  height: 93.5217px;
  flex-shrink: 0;
  background: var(--color-stripe-1);
  background-image: linear-gradient(135deg, #3a4f60 0%, var(--color-stripe-1) 100%);
}
@media (max-width: 479px) {
  .canoser-blog-sidebar__thumb {
    width: 90px;
    height: auto;
    aspect-ratio: 124.745 / 93.5217;
  }
}
.canoser-blog-sidebar__info {
  flex: 1;
  min-width: 0;
}
.canoser-blog-sidebar__item-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
  margin: 0 0 0.25rem;
}
.canoser-blog-sidebar__item-date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* Box categorías */
.canoser-blog-sidebar__categories {
  background: var(--color-white);
  padding: 0;
}
.canoser-blog-sidebar__cat-title {
  font-size: var(--text-section-h2);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}
.canoser-blog-sidebar__cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.canoser-blog-sidebar__cat-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.canoser-blog-sidebar__cat-item a {
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.canoser-blog-sidebar__cat-item a:hover {
  color: var(--color-link-hover);
}

/* Viñetas circulares (única excepción a border-radius: 0) */
.canoser-blog-sidebar__cat-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.canoser-blog-sidebar__cat-dot--blue  { background: #007DAF; }
.canoser-blog-sidebar__cat-dot--red   { background: #F6053E; }
.canoser-blog-sidebar__cat-dot--amber { background: #5A9015; }
.canoser-blog-sidebar__cat-dot--dark  { background: #3C5058; }

/* =========================================================================
   22. Detalle de proyecto — detalle_proyectos.html
   Layout 2 columnas: ficha técnica (398.336px) + media (597.447px × 336.064px)
   Galería: 3 columnas × 314.778px × 209.721px
   ========================================================================= */

.canoser-section-detpro { padding-block: clamp(0rem, 8vw, 3rem); }

/* Layout ficha + media */
.canoser-detalle-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: flex-start;
  margin-bottom: var(--space-6);
}
@media (min-width: 1024px) {
  .canoser-detalle-layout {
    flex-direction: row;
    gap: var(--space-8);
    align-items: flex-start;
  }
}

/* Columna ficha técnica */
.canoser-detalle-ficha {
  width: 100%;
}
@media (min-width: 1024px) {
  .canoser-detalle-ficha {
    width: 398.336px;
    flex-shrink: 0;
  }
}

.canoser-detalle-ficha__text {
  margin: 0;
  padding: 0;
}
.canoser-detalle-ficha__text p {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text);
  line-height: 29px;
  letter-spacing: 0.064em;
  margin: 0;
}

.canoser-detalle-ficha__titulo {
  font-size: var(--text-section-h2);
  font-weight: 700;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--space-6);
}

.canoser-detalle-ficha__data {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.canoser-detalle-ficha__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(56, 77, 86, 0.15);
}
.canoser-detalle-ficha__row:first-child {
  border-top: 1px solid rgba(56, 77, 86, 0.15);
}

.canoser-detalle-ficha__data dt {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.canoser-detalle-ficha__data dd {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: 0;
  text-align: right;
}

/* Media (imagen/video) — proporción Canva 597.447 × 336.064 (≈16:9) en mobile/tablet
   para evitar que el video quede "aplastado" con una altura fija de 220px en tablets */
.canoser-detalle-media {
  width: 100%;
  height: auto;
  aspect-ratio: 597.447 / 336.064;
  background: var(--color-stripe-1);
  background-image: linear-gradient(160deg, #2d4050 0%, #3a5568 60%, #2a3f50 100%);
  flex-shrink: 0;
  border: 4px solid var(--color-text); /* stroke #384d56 del diseño Canva */
}
@media (min-width: 1024px) {
  .canoser-detalle-media {
    width: 597.447px;
    height: 336.064px;
    aspect-ratio: auto;
  }
}

.canoser-detalle-media__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Texto descriptivo bajo las 2 columnas */
.canoser-detalle-descripcion {
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--color-text);
  margin: var(--space-6) 0 0;
  max-width: 1027.783px; /* ficha 398.336px + gap 32px + video 597.447px */
}

/* Galería 3 columnas */
.canoser-detalle-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px) {
  .canoser-detalle-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .canoser-detalle-gallery {
    grid-template-columns: repeat(3, 314.778px);
    gap: var(--space-6);
  }
}

/* Proporción Canva 314.778 / 209.721 (≈1.5:1) en mobile y tablet, donde el
   ancho de cada celda varía según el grid (1 o 2 columnas). En desktop
   (≥1024px) las celdas tienen ancho fijo (314.778px), por lo que el
   height fijo reproduce la proporción exacta del diseño. */
.canoser-detalle-gallery__item {
  width: 100%;
  height: auto;
  aspect-ratio: 314.778 / 209.721;
  background: var(--color-stripe-1);
  background-image: linear-gradient(160deg, #2d4050 0%, #3a5568 60%, #2a3f50 100%);
}
@media (min-width: 1024px) {
  .canoser-detalle-gallery__item {
    height: 209.721px;
    aspect-ratio: auto;
  }
}

.canoser-detalle-gallery__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 314.778 / 209.721;
  object-fit: cover;
}
@media (min-width: 1024px) {
  .canoser-detalle-gallery__img {
    height: 209.721px;
    aspect-ratio: auto;
  }
}

/* =========================================================================
   23. Detalle de artículo de blog — detalle_blog.html
   Reutiliza: .canoser-blog-layout, .canoser-blog-main, .canoser-blog-sidebar
   Nuevas clases solo para el artículo dentro de la columna principal
   Adaptado desde Canva: blog-detalle-crear-asociados
   ========================================================================= */

/* Encabezado "Blog" — texto plano sobre fondo blanco + línea divisoria
   (en Canva: H1 48px/700, color #384d56, línea rgb(60,80,88) debajo) */
.canoser-blog-detalle-header {
  padding-block: var(--space-12) var(--space-6);
}
.canoser-blog-detalle-header .container {
  border-bottom: 1px solid #3C5058;
  padding-bottom: var(--space-8);
}
.canoser-blog-detalle-title {
  font-size: 3em;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: var(--tracking-hero);
  line-height: var(--leading-hero);
  margin: 0;
}

/* Meta: badge + autor/fecha apilados (autor debajo del badge) */
.canoser-blog-article__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Badge — mismas dimensiones que en blog.html (.canoser-blog-card--main .canoser-badge) */
.canoser-blog-article__meta .canoser-badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1px 4px 2px 4px;
  font-size: 16px;
  width: fit-content;
  height: auto;
}

.canoser-blog-article__date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* Título del artículo */
.canoser-blog-article__title {
  font-size: var(--text-section-h2);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  margin: 0 0 var(--space-6);
}

/* Imagen principal del artículo — proporción Canva 727.913 × 398.346 */
.canoser-blog-article__hero-img {
  display: block;
  width: 100%;
  aspect-ratio: 727.913 / 398.346;
  object-fit: cover;
  margin-bottom: var(--space-6);
}

/* Texto descriptivo bajo la imagen principal */
.canoser-blog-article__caption {
  font-size: var(--text-sm);
  line-height: 1.125; /* 18px / 16px del diseño Canva */
  color: var(--color-text);
  margin: 0 0 var(--space-6);
}

/* Cuerpo del artículo — prosa justificada */
.canoser-blog-article__body {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-text);
}
.canoser-blog-article__body p {
  margin: 0 0 var(--space-6);
  text-align: justify;
}
.canoser-blog-article__body p:last-child {
  margin-bottom: 0;
}

/* Galería 2 columnas — proporción Canva 356.066 × 237.229 */
.canoser-blog-article__gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
@media (min-width: 640px) {
  .canoser-blog-article__gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
.canoser-blog-article__gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 356.066 / 237.229;
  object-fit: cover;
}

/* Cita destacada — fondo gris claro #E2E7EA del diseño Canva */
.canoser-blog-article__highlight {
  font-size: var(--text-section-h2);
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-text);
  background: #E2E7EA;
  padding: var(--space-4) var(--space-6);
  margin: 0 0 var(--space-6);
}

/* Sidebar de categorías — desplazada para alinear con el inicio de la
   imagen principal del artículo (queda debajo del badge/autor/título) */
@media (min-width: 1024px) {
  .canoser-blog-detalle-sidebar {
    margin-top: 7.5rem;
  }
}

/* Video — proporción Canva 721.705 × 405.959 (16:9), borde #384d56 */
.canoser-blog-article__video-wrap {
  width: 100%;
  aspect-ratio: 721.705 / 405.959;
  border: 4px solid var(--color-text);
  margin: 0 0 var(--space-6);
}
.canoser-blog-article__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================================
   24. Lightbox de galería — vanilla JS, sin librerías de terceros
   Usado en: template-parts/proyectos/canoser-detalle.php (galería de
   proyecto) y template-parts/blog/canoser-detalle.php (galería de artículo).
   Trigger: <a class="canoser-lightbox-trigger" data-lightbox-group="...">
   envolviendo el <img> de thumbnail existente — sin cambios visuales en el
   grid (mismas clases .canoser-detalle-gallery__img /
   .canoser-blog-article__gallery img).
   Overlay: inyectado dinámicamente por canoser_initLightbox() (app.js).
   ========================================================================= */

/* El trigger no debe alterar el layout del grid existente */
.canoser-lightbox-trigger {
  display: block;
  cursor: zoom-in;
}
.canoser-lightbox-trigger:focus-visible {
  outline: 3px solid var(--color-accent, #5A9015);
  outline-offset: 2px;
}
.canoser-lightbox-trigger img {
  display: block;
}

/* Overlay de pantalla completa */
.canoser-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(15, 16, 21, 0.92);
  padding: var(--space-4);
  /* Soporta notch/home indicator en iOS */
  padding-top: max(var(--space-4), env(safe-area-inset-top));
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
}
.canoser-lightbox[hidden] {
  display: none;
}

/* Contenedor de imagen + caption */
.canoser-lightbox__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.canoser-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 75dvh;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

.canoser-lightbox__caption {
  color: var(--color-text-on-dark, rgba(255, 255, 255, 0.898));
  font-size: var(--text-sm);
  line-height: 1.5;
  text-align: center;
  margin: var(--space-4) 0 0;
  max-width: 60ch;
}

/* Botón de cierre — esquina superior derecha, touch target ≥44px */
.canoser-lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1; /* sobre .canoser-lightbox__content, que se pinta después en el DOM */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  border-radius: var(--radius-md);
  color: #FFFFFF;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.canoser-lightbox__close:hover,
.canoser-lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.24);
}

/* Flechas de navegación — táctiles (44x44px mínimo), ocultas si solo hay
   1 imagen en el grupo (data-lightbox-group con un único trigger) */
.canoser-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1; /* sobre .canoser-lightbox__content, que se pinta después en el DOM */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  border-radius: var(--radius-md);
  color: #FFFFFF;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.canoser-lightbox__nav:hover,
.canoser-lightbox__nav:focus-visible {
  background: rgba(255, 255, 255, 0.24);
}
.canoser-lightbox__nav--prev { left: var(--space-4); }
.canoser-lightbox__nav--next { right: var(--space-4); }
.canoser-lightbox__nav[hidden] { display: none; }

/* En mobile (<640px), las flechas quedan más cerca del borde y la imagen
   ocupa menos alto para dejar espacio a flechas + caption sin overflow */
@media (max-width: 639px) {
  .canoser-lightbox {
    padding: .5rem;
  }
  .canoser-lightbox__img {
    max-height: 65dvh;
  }
  .canoser-lightbox__nav--prev { left: .5rem; }
  .canoser-lightbox__nav--next { right: .5rem; }
}

/* Respeta prefers-reduced-motion: sin animación de entrada/salida */
@media (prefers-reduced-motion: no-preference) {
  .canoser-lightbox__img {
    animation: canoser-lightbox-fade .15s ease-out;
  }
}
@keyframes canoser-lightbox-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* =========================================================================
   25. Bloque de estadísticas — page-quienes-somos.php (PREVIEW exploratorio)
   Solicitud Frank 2026-06-15: "+35 proyectos | +10.000 personas beneficiadas
   | 15% del PEH-RM" insertado tras el 2º párrafo de "Introducción
   institucional". Mobile-first: apilado en columna con separadores
   horizontales (320px+); desde 768px pasa a fila con separadores verticales.
   Markup/estilos propios del tema, sin copiar el export crudo de Canva
   (Template/prueba.html) — solo se reutilizó el texto.
   ========================================================================= */
.canoser-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-4);
  background: var(--stats-bg-color, var(--color-bg-soft));
  border-radius: var(--radius-md);
}

.canoser-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
  max-width: 22rem;
}

.canoser-stats__number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  color: var(--stats-number-color, var(--color-accent-vision));
}

.canoser-stats__label {
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: var(--tracking-card-title);
  color: var(--stats-label-color, var(--color-text));
}

/* Separador — línea horizontal en mobile (apilado), vertical desde 768px */
.canoser-stats__sep {
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--color-stripe-3); /* amarillo de marca, #5A9015 */
  border-radius: 999px;
}

@media (min-width: 768px) {
  .canoser-stats {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: var(--space-8);
  }
  .canoser-stats__item {
    flex: 1;
    max-width: none;
  }
  .canoser-stats__sep {
    width: 2px;
    height: auto;
    align-self: stretch;
  }
}

/* =========================================================================
   Botón flotante "Volver arriba" — compartido por todas las páginas (footer.php)
   ========================================================================= */
.canoser-scroll-top {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--color-hero-overlay); /* rgba(19, 22, 32, 0.6) — semitransparente */
  color: var(--color-white);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transition-fast), transform var(--transition-fast),
    background var(--transition-fast), visibility var(--transition-fast);
  z-index: var(--z-header);
}

.canoser-scroll-top svg {
  width: 22px;
  height: 22px;
}

.canoser-scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.canoser-scroll-top:hover,
.canoser-scroll-top:focus-visible {
  background: rgba(19, 22, 32, 0.85);
}

@media (max-width: 640px) {
  .canoser-scroll-top {
    right: var(--space-4);
    bottom: var(--space-4);
    width: 42px;
    height: 42px;
  }
}