/* =========================================================================
   CrearAsociados — 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;
}

@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;
}

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 */
.crearaso-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;
}
.crearaso-skip-link:focus {
  left: 0;
}

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

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

.crearaso-section-detpro-fi {
  padding-block-start: clamp(2rem, 8vw, 4rem); 
}
.crearaso-section[aria-labelledby="qs-intro-title"] {
  padding-bottom: 1rem;
}
.crearaso-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 #F8BD01 + oscuro #0F1015). */
.crearaso-section--accent {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}
.crearaso-section--accent h2,
.crearaso-section--accent h3,
.crearaso-section--accent p {
  color: var(--color-text-on-accent);
}

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

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

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

.crearaso-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...". */
.crearaso-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;
}

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

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

/* -------------------------------------------------------------------------
   3. Franja de marca — imagen real (linea-asociados.png)
   Reemplaza los spans de color generados por CSS. Las reglas de
   .crearaso-stripe / .crearaso-stripe__seg / .crearaso-stripe--center y
   .crearaso-accent-stripe se mantienen comentadas como referencia histórica.
   ------------------------------------------------------------------------- */
.crearaso-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 */
.crearaso-linea-marca--contact {
  width: 100%;
  max-width: 677px;
  margin-inline: auto;
  display: block;
  margin-block: 0.75rem;
}

/* -- OBSOLETO: reemplazado por .crearaso-linea-marca + linea-asociados.png --
.crearaso-stripe {
  display: flex;
  gap: .375rem;
  align-items: center;
}
.crearaso-stripe__seg {
  display: inline-block;
  height: 6px;
  width: 2.25rem;
  border-radius: 999px;
}
.crearaso-stripe__seg:nth-child(1) { background: var(--color-stripe-1); }
.crearaso-stripe__seg:nth-child(2) { background: var(--color-stripe-2); }
.crearaso-stripe__seg:nth-child(3) { background: var(--color-stripe-3); width: 3.5rem; }
.crearaso-stripe__seg:nth-child(4) { background: var(--color-stripe-4); }
.crearaso-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.
   ------------------------------------------------------------------------- */
.crearaso-navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(15, 16, 21, 0.06);
}

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

/* Separación entre el logo-link y el nav de links */
.crearaso-navbar__inner nav {
  margin-left: auto;   /* empuja el nav hacia la derecha, pegado a los botones CTA */
}

.crearaso-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;
}
.crearaso-navbar__brand:hover { color: var(--color-text); }

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

/* Footer logo */
.crearaso-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] */
.crearaso-navbar__menu {
  position: fixed;
  inset: 0 0 0 30%;
  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);
}

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

.crearaso-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);
}
.crearaso-navbar__menu a:hover,
.crearaso-navbar__menu a[aria-current="page"] {
  color: var(--color-link-hover);
}

.crearaso-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);
}
.crearaso-navbar[data-open="true"] .crearaso-navbar__overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Toggle hamburguesa — touch target 48x48 (Material) */
.crearaso-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;
}
.crearaso-navbar__toggle:hover { border-color: var(--color-accent); }

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

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

.crearaso-navbar__cta {
  display: none;
}

/* >= 768px: navbar horizontal estilo desktop, sin drawer */
@media (min-width: 768px) {
  .crearaso-navbar__toggle { display: none; }
  .crearaso-navbar__overlay { display: none; }

  .crearaso-navbar__menu {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    background: transparent;
    border: none;
    padding: 0;
    transform: none;
    transition: none;
  }
  .crearaso-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;
  }
  .crearaso-navbar__cta { display: inline-flex; }
}

/* -------------------------------------------------------------------------
   5. Botones (.crearaso-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.
   ------------------------------------------------------------------------- */
.crearaso-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);
}
.crearaso-btn--primary {
  background: var(--color-accent);
  color: #151d2a;
}
.crearaso-btn--primary:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
  color: var(--color-white);
}

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

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

.crearaso-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.
   ------------------------------------------------------------------------- */
.crearaso-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. */
.crearaso-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%);
}

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

.crearaso-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 */
.crearaso-hero__inner .crearaso-btn-group {
  justify-content: flex-start;
}
.crearaso-hero__inner .crearaso-stripe {
  justify-content: center;
}

.crearaso-hero__title {
  color: var(--color-white);
  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);
}

.crearaso-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);
}

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

@media (min-width: 768px) {
  .crearaso-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
   ------------------------------------------------------------------------- */
.crearaso-grid--3 {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .crearaso-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .crearaso-section[aria-labelledby="mvv-title"] .crearaso-grid--3 {
    grid-template-columns: repeat(3, 316px);
    justify-content: center;
  }
}

.crearaso-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;
}
.crearaso-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.crearaso-card h3,
.crearaso-card p { color: var(--color-text); }

/* Ícono lineal/outline simple — placeholder geométrico hasta recibir
   los SVG reales (carpeta, engranaje, check) */
.crearaso-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);
}
.crearaso-card__icon svg { width: 1.5rem; height: 1.5rem; }

.crearaso-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
   ------------------------------------------------------------------------- */
.crearaso-project-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);
}
.crearaso-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 */
.crearaso-project-card__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-stripe-1);
  background-image: linear-gradient(135deg, #3a4f60 0%, var(--color-stripe-1) 100%);
}

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

.crearaso-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);
}
.crearaso-project-card__location svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.crearaso-project-card__title { margin-bottom: .25rem; }
.crearaso-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 */

.crearaso-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 */
.crearaso-project-card--overlay .crearaso-project-card__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
}

/* Gradiente oscuro sobre la mitad inferior — legibilidad del texto */
.crearaso-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 */
.crearaso-project-card__badge {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0;
  z-index: 2;
}

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

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

.crearaso-project-card--overlay .crearaso-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;
}

.crearaso-project-card--overlay .crearaso-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
   ------------------------------------------------------------------------- */
.crearaso-contact {
  position: relative;
  overflow: hidden;
}

/* Placeholder de la imagen de fondo (planos arquitectónicos + casco de obra).
   Se posiciona como capa decorativa detrás del formulario en desktop;
   en mobile queda oculta para priorizar legibilidad del form (patrón
   "adaptive component" — no solo "que quepa"). */
.crearaso-contact__bg {
  display: none;
}
@media (min-width: 1024px) {
  .crearaso-contact__bg {
    display: block;
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 42%;
    background: var(--color-bg-soft);
    background-image: linear-gradient(160deg, #EFE9E2 0%, var(--color-bg-soft) 100%);
  }
  .crearaso-contact__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--color-white) 0%, transparent 18%);
  }
}

.crearaso-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. */
.crearaso-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. */
.crearaso-form {
  display: grid;
  gap: var(--space-6);
  max-width: 68%;
  margin-inline: auto;
  margin-top: 73px;
}
@media (max-width: 1023px) {
  .crearaso-form {
    max-width: 100%;
  }
}

/* Mensaje de estado del envío (?contacto=ok|error) — Fase 4b. */
.crearaso-form__notice {
  margin: 0;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
}
.crearaso-form__notice--success {
  background: #edfaf1;
  color: #1e7e34;
  border: 1px solid #b8ebc8;
}
.crearaso-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). */
.crearaso-form__honeypot {
  position: absolute !important;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.crearaso-form__row {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 640px) {
  .crearaso-form__row--2 {
    grid-template-columns: 1fr 1fr;
  }
}
.crearaso-field {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.crearaso-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);
}
.crearaso-field input,
.crearaso-field textarea,
.crearaso-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);
}
.crearaso-field textarea {
  min-height: 140px;
  resize: vertical;
}
.crearaso-field input:focus,
.crearaso-field textarea:focus,
.crearaso-field select:focus {
  border-color: var(--color-accent);
  outline: none;
}
.crearaso-field__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

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

/* Bloque de datos de contacto — columna derecha del layout de contacto */
.crearaso-contact-info {
  display: grid;
  gap: var(--space-6);
}
.crearaso-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) */
.crearaso-contact-info__item svg {
  flex-shrink: 0;
  background: var(--color-text);    /* #384D56 — oscuro, igual que en el footer */
  border-radius: 50%;
  padding: 8px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  color: #ffffff;                   /* stroke/fill hereda este blanco via currentColor */
}

.crearaso-contact-info__item a { color: var(--color-text); font-weight: 600; }
.crearaso-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). */
.crearaso-form__submit-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .crearaso-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 */
.crearaso-form__submit-row .crearaso-contact-info {
  margin-left: auto;
  text-align: left;
}

/* -------------------------------------------------------------------------
   10. Footer — full-width amarillo, 3 columnas
   → template-parts/inicio/inicio-footer.php
   ------------------------------------------------------------------------- */
.crearaso-footer {
  background: var(--color-accent);
  /* Color de texto del footer: var(--color-text) = #384D56 (dark teal) */
  color: var(--color-text);
  /* 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);
}
.crearaso-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) {
  .crearaso-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;
  }
  .crearaso-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;
  }
  .crearaso-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 */
.crearaso-footer__col-stack {
  display: grid;
  gap: var(--space-8);
}

/* Items de contacto del footer — cada li como fila flex con icono circular oscuro */
.crearaso-footer__contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text);
  font-size: inherit;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}
.crearaso-footer__contact-item svg {
  flex-shrink: 0;
  background: transparent;
  border-radius: 50%;
  padding: 6px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  color: #ffffff;
}
.crearaso-footer__contact-item a {
  color: var(--color-text);
  font-weight: 600;
}
.crearaso-footer__contact-item a:hover {
  text-decoration: underline;
}
.crearaso-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-weight: 700;
  /* Ver nota en .crearaso-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-text);
  margin-bottom: 0;
}
.crearaso-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-text);
  margin-bottom: var(--space-6);
}
.crearaso-footer p {
  font-size: 0.9em;               /* relativo al 0.8125em del footer = ~11.7px */
  color: var(--color-text);
}
.crearaso-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-4);
}
.crearaso-footer ul a { color: var(--color-text); }
.crearaso-footer ul a:hover { text-decoration: underline; }

.crearaso-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(56, 77, 86, 0.25);
  font-size: var(--text-sm);
  color: var(--color-text);
}
@media (min-width: 640px) {
  .crearaso-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: center;      /* era space-between → centrado horizontal en desktop */
  }
}
.crearaso-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.crearaso-footer__legal a { color: var(--color-text); }
.crearaso-footer__legal a:hover { text-decoration: underline; }

.crearaso-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 */
}
.crearaso-footer__social-label {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text);
  margin-right: var(--space-2);
}
.crearaso-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);
}
.crearaso-footer__social a svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.crearaso-footer__social a:hover {
  background: #2a3940;
}

/* -------------------------------------------------------------------------
   11. Animación fade-in (IntersectionObserver)
   ------------------------------------------------------------------------- */
.crearaso-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.crearaso-fade-in.visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .crearaso-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).
   ------------------------------------------------------------------------- */
.crearaso-page-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46svh;
  overflow: hidden;
  isolation: isolate;
}
.crearaso-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%);
}
.crearaso-page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-hero-overlay);
}
.crearaso-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);
}
.crearaso-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);
}
.crearaso-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;
}
.crearaso-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) {
  .crearaso-page-hero { min-height: 40svh; }
  .crearaso-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  (#F8BD01 á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 oscuro del sistema */
.crearaso-card--mision {
  background: var(--color-accent);          /* #F8BD01 */
  color: var(--color-text);                 /* #384D56 — ratio >7:1 sobre ámbar */
  box-shadow: none;
}
.crearaso-card--mision:hover {
  box-shadow: none;
}
.crearaso-card--mision h3,
.crearaso-card--mision p {
  color: var(--color-text);                 /* #384D56 */
}
.crearaso-card--mision .crearaso-card__icon {
  border: none;
  color: var(--color-text);
}

/* Card Valores — fondo gris-azulado oscuro, texto blanco */
.crearaso-card--valores {
  background: var(--color-text);            /* #384D56 */
  color: var(--color-white);                /* #FFFFFF — ratio >7:1 */
  box-shadow: none;
}
.crearaso-card--valores:hover {
  box-shadow: none;
}
.crearaso-card--valores h3,
.crearaso-card--valores p {
  color: var(--color-white);
}
.crearaso-card--valores .crearaso-card__icon {
  border: none;
  color: var(--color-white);
}

/* Card Visión — fondo carmesí, texto blanco */
.crearaso-card--vision {
  background: var(--color-accent-vision);   /* #D10E3F */
  color: var(--color-white);                /* #FFFFFF — ratio >4.5:1 (AA) */
  box-shadow: none;
}
.crearaso-card--vision:hover {
  box-shadow: none;
}
.crearaso-card--vision h3,
.crearaso-card--vision p {
  color: var(--color-white);
}
.crearaso-card--vision .crearaso-card__icon {
  border: none;
  color: var(--color-white);
}

/* -------------------------------------------------------------------------
   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.
   ------------------------------------------------------------------------- */
.crearaso-team-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 480px) {
  .crearaso-team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .crearaso-team-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.crearaso-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);
}
.crearaso-team-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

/* Placeholder de foto — bloque de color con aspect-ratio 1:1 explícito
   (evita CLS). Frank entregará las fotografías reales. */
.crearaso-team-card__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-soft);
  background-image: linear-gradient(160deg, #EFE9E2 0%, var(--color-bg-soft) 100%);
}

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

.crearaso-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;
}

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

/* -------------------------------------------------------------------------
   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) */
.crearaso-btn--amber {
  background: var(--color-accent);     /* #F8BD01 */
  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);
}
.crearaso-btn--amber:hover {
  background: var(--color-accent-dark);
  color: var(--color-white);
}
.crearaso-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);
}
.crearaso-btn--dark:hover {
  background: #2a3940;
  color: var(--color-white);
}

/* Contenedor de los dos botones del navbar (desktop) */
.crearaso-navbar__actions {
  display: none;
  gap: 0.5rem;
  align-items: center;
}
@media (min-width: 768px) {
  .crearaso-navbar__actions {
    display: flex;
  }
}

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

.crearaso-service-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-top: 63px;
}
.crearaso-service-intro-proyectos1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 40px;
}
.crearaso-service-intro-somos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 40px;
}
.crearaso-service-intro-somos + .crearaso-prose {
  max-width: 844px;
  margin-inline: auto;
}
.crearaso-service-intro__text {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-text);
  text-align: center;
  margin: 0;
}
/* -- OBSOLETO: reemplazado por .crearaso-linea-marca + linea-asociados.png --
.crearaso-accent-stripe {
  display: flex;
  gap: 4px;
  align-items: center;
}
.crearaso-accent-stripe span {
  display: inline-block;
  height: 6px;
  border-radius: 0;
}
.crearaso-accent-stripe span:nth-child(1) { width: 28px; }
.crearaso-accent-stripe span:nth-child(2) { width: 80px; }
.crearaso-accent-stripe span:nth-child(3) { width: 48px; }
.crearaso-accent-stripe span:nth-child(4) { width: 80px; }
.crearaso-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
   ----------------------------------------------------------------------- */
.crearaso-svc-block {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  margin-bottom: 1.5rem;
  height: 256px;
  overflow: hidden;
}

.crearaso-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;
}

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

.crearaso-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;
}

.crearaso-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) {
  .crearaso-svc-block {
    flex-direction: column;
  }
  .crearaso-svc-block__photo {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

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

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

.crearaso-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 #F8BD01 | Oscuro #3C5058
   ------------------------------------------------------------------------- */
.crearaso-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;
}
.crearaso-badge--blue  { background: #007DAF; }
.crearaso-badge--red   { background: #F6053E; }
.crearaso-badge--amber { background: var(--color-accent); }
.crearaso-badge--dark  { background: #3C5058; }

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

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

/* Hero interior — alineacion izquierda (blog, proyectos) */
.crearaso-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 */
.crearaso-blog-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.crearaso-blog-intro__text {
  font-size: 24px;
  font-weight: 400;
  color: var(--color-text);
  margin: 0;
  text-align: center;
}
.crearaso-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;
}
.crearaso-blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.crearaso-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%);
}
.crearaso-blog-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.crearaso-blog-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-4);
}
.crearaso-blog-card__date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}
.crearaso-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);
}
.crearaso-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;
}
.crearaso-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);
}
.crearaso-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 */
.crearaso-blog-card--main {
  flex-direction: column;
  box-shadow: none;
  width: 322.175px;
}
.crearaso-blog-card--main .crearaso-blog-card__photo {
  width: 322.175px;
  height: 227.278px;
  aspect-ratio: unset;
  flex-shrink: 0;
}
.crearaso-blog-card--main .crearaso-blog-card__body {
  padding: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: transparent;
  font-family: var(--font-base);
}
.crearaso-blog-card--main .crearaso-blog-card__title {
  margin: 0;
  font-size: 25px;
  font-weight: 400;
  font-family: var(--font-base);
}
.crearaso-blog-card--main .crearaso-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) {
  .crearaso-blog-card--main,
  .crearaso-blog-card--main .crearaso-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 */
.crearaso-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) }) */
.crearaso-project-category.crearaso-project-category--blue {
  background: #007DAF;
  color: #ffffff;
}

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

.crearaso-project-category.crearaso-project-category--amber {
  background: #F8BD01;
  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). */
.crearaso-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 */
.crearaso-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 */
.crearaso-project-card--fixed {
  position: relative;
  overflow: hidden;
  width: 301.755px;
  height: 393.744px;
  flex-shrink: 0;
  border-radius: 0;
  /* En mobile, la card ocupa el ancho disponible y ajusta la altura
     proporcionalmente para mantener el aspecto visual */
}

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

/* Foto: cubre toda la card */
.crearaso-project-card--fixed .crearaso-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 */
.crearaso-project-card--fixed .crearaso-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 #F8BD01 al 50% sobre toda la imagen */
.crearaso-project-card__hover-overlay {
  position: absolute;
  inset: 0;
  background: #F8BD01;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 3;
  pointer-events: none;
}

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

/* Caption (nombre + comuna) — zona inferior sobre el overlay */
.crearaso-project-card--fixed .crearaso-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 */
.crearaso-project-card--fixed .crearaso-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 */
.crearaso-project-card--fixed .crearaso-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;
}

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

/* Familias beneficiadas: mismas métricas que la comuna */
.crearaso-project-card--fixed .crearaso-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) {
  .crearaso-project-category {
    margin-left: 0;
  }
}

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

/* En tablet: 2 columnas */
@media (min-width: 480px) and (max-width: 1059px) {
  .crearaso-project-block {
    width: 100%;
  }
  .crearaso-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 */
.crearaso-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 */
.crearaso-blog-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: flex-start;
}
@media (min-width: 1024px) {
  .crearaso-blog-layout {
    flex-direction: row;
    align-items: flex-start;
  }
}

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

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

/* Badge en cards del blog — dimensiones fijas, texto centrado */
.crearaso-blog-card--main .crearaso-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 */
.crearaso-blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
}
@media (min-width: 640px) {
  .crearaso-blog-sidebar {
    width: 354px;
    flex-shrink: 0;
  }
}
@media (max-width: 639px) {
  .crearaso-blog-sidebar {
    width: 100%;
  }
}
.crearaso-blog-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.crearaso-blog-sidebar__item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.crearaso-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) {
  .crearaso-blog-sidebar__thumb {
    width: 90px;
    height: auto;
    aspect-ratio: 124.745 / 93.5217;
  }
}
.crearaso-blog-sidebar__info {
  flex: 1;
  min-width: 0;
}
.crearaso-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;
}
.crearaso-blog-sidebar__item-date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

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

/* Viñetas circulares (única excepción a border-radius: 0) */
.crearaso-blog-sidebar__cat-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.crearaso-blog-sidebar__cat-dot--blue  { background: #007DAF; }
.crearaso-blog-sidebar__cat-dot--red   { background: #F6053E; }
.crearaso-blog-sidebar__cat-dot--amber { background: #F8BD01; }
.crearaso-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
   ========================================================================= */

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

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

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

.crearaso-detalle-ficha__text {
  margin: 0;
  padding: 0;
}
.crearaso-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;
}

.crearaso-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);
}

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

.crearaso-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);
}
.crearaso-detalle-ficha__row:first-child {
  border-top: 1px solid rgba(56, 77, 86, 0.15);
}

.crearaso-detalle-ficha__data dt {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.crearaso-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 */
.crearaso-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) {
  .crearaso-detalle-media {
    width: 597.447px;
    height: 336.064px;
    aspect-ratio: auto;
  }
}

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

/* Texto descriptivo bajo las 2 columnas */
.crearaso-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 */
.crearaso-detalle-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px) {
  .crearaso-detalle-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .crearaso-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. */
.crearaso-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) {
  .crearaso-detalle-gallery__item {
    height: 209.721px;
    aspect-ratio: auto;
  }
}

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

/* =========================================================================
   23. Detalle de artículo de blog — detalle_blog.html
   Reutiliza: .crearaso-blog-layout, .crearaso-blog-main, .crearaso-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) */
.crearaso-blog-detalle-header {
  padding-block: var(--space-12) var(--space-6);
}
.crearaso-blog-detalle-header .container {
  border-bottom: 1px solid #3C5058;
  padding-bottom: var(--space-8);
}
.crearaso-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) */
.crearaso-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 (.crearaso-blog-card--main .crearaso-badge) */
.crearaso-blog-article__meta .crearaso-badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1px 4px 2px 4px;
  font-size: 16px;
  width: fit-content;
  height: auto;
}

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

/* Título del artículo */
.crearaso-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 */
.crearaso-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 */
.crearaso-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 */
.crearaso-blog-article__body {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-text);
}
.crearaso-blog-article__body p {
  margin: 0 0 var(--space-6);
  text-align: justify;
}
.crearaso-blog-article__body p:last-child {
  margin-bottom: 0;
}

/* Galería 2 columnas — proporción Canva 356.066 × 237.229 */
.crearaso-blog-article__gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
@media (min-width: 640px) {
  .crearaso-blog-article__gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
.crearaso-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 */
.crearaso-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) {
  .crearaso-blog-detalle-sidebar {
    margin-top: 7.5rem;
  }
}

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