/* ============================================================================
   CERCALUX 2025 — hoja de estilos del tema
   ----------------------------------------------------------------------------
   Capas, en orden:
     1. tokens      — design system Cercalux (Sol / Sombra / Ink / Sand)
     2. base        — reset + tipografía fundacional
     3. background  — glows radiales teal + textura de ruido
     4. utilities   — subconjunto Tailwind compilado (solo las clases usadas)
     5. components  — shadcn/ui portado (Button, Card, Badge, Separator…)
     6. motion      — estados iniciales de GSAP + micro-interacciones
   ============================================================================ */

/* ========================================================================== */
/* 1. TOKENS                                                                  */
/* ========================================================================== */

:root {
  /* ---- Sol (primario — naranja cálido, la firma de la marca) ---- */
  --sol-50:  #FDF1E7;
  --sol-100: #FBE0CA;
  --sol-200: #F6C295;
  --sol-300: #F1A360;
  --sol-400: #ED8839;
  --sol-500: #E8701F;
  --sol-600: #CC5C12;
  --sol-700: #A2480E;
  --sol-800: #75350C;

  /* ---- Sombra (secundario — teal frío, protagonista de los glows) ---- */
  --sombra-50:  #ECF3F3;
  --sombra-100: #CFE2E3;
  --sombra-300: #6FA1A5;
  --sombra-400: #47797E;
  --sombra-500: #2C5E63;
  --sombra-600: #224B4F;
  --sombra-700: #19383B;

  /* ---- Ink (negros cálidos) ---- */
  --ink-900: #1A1714;
  --ink-800: #262019;
  --ink-700: #3A322A;
  --ink-600: #4C4239;
  --ink-500: #5F5347;
  --ink-400: #897C6D;

  /* ---- Sand (neutros cálidos) ---- */
  --sand-50:  #FBF7F1;
  --sand-100: #F4ECE0;
  --sand-200: #E7DBC9;
  --sand-300: #D4C4AC;
  --sand-400: #B8A488;

  --white: #FFFFFF;

  /* ---- Estado ---- */
  --green-500: #2F8F4E;  --green-50: #E7F3EC;
  --amber-500: #E0A011;  --amber-50: #FBF1D6;
  --red-500:   #C5402B;  --red-50:   #FAE6E2;

  /* ---- Alias semánticos ---- */
  --color-primary:        var(--sol-500);
  --color-primary-hover:  var(--sol-600);
  --color-primary-active: var(--sol-700);
  --color-secondary:      var(--sombra-500);
  --color-secondary-hover: var(--sombra-600);

  --text-strong:        var(--ink-900);
  --text-body:          var(--ink-700);
  --text-muted:         var(--ink-500);
  --text-on-primary:    var(--white);
  --text-on-dark:       var(--sand-50);
  --text-on-dark-muted: #B6AB9C;
  --text-link:          var(--sol-600);

  --surface-page:    var(--sand-50);
  --surface-card:    var(--white);
  --surface-sand:    var(--sand-100);
  --surface-dark:    var(--ink-900);
  --surface-dark-2:  var(--ink-800);

  --border-subtle:  var(--sand-200);
  --border-default: var(--sand-300);
  --border-strong:  var(--ink-900);
  --border-on-dark: rgba(255, 255, 255, 0.14);

  --focus-ring: rgba(232, 112, 31, 0.45);

  /* ---- Tipografía ---- */
  --font-display: 'Anton', 'Oswald', 'Arial Narrow', sans-serif;
  --font-head:    'Oswald', 'Barlow', sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base: 1rem;
  --text-md:  1.125rem;
  --text-lg:  1.375rem;
  --text-xl:  1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-4xl: 4rem;
  --text-5xl: 5.5rem;

  --leading-tight: 0.98;
  --leading-snug: 1.12;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-display: -0.01em;
  --tracking-label: 0.08em;
  --tracking-wide: 0.14em;

  /* ---- Espaciado ---- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-8: 3rem;     --space-10: 4rem;    --space-12: 5rem;  --space-16: 8rem;

  --container-narrow: 720px;
  --container-base:   1080px;
  --container-wide:   1280px;
  --gutter:      clamp(1rem, 4vw, 2.5rem);
  --section-y:   clamp(3.5rem, 8vw, 7rem);

  /* ---- Radio / sombra ---- */
  --radius-none: 0;  --radius-xs: 2px;  --radius-sm: 4px;
  --radius-md: 8px;  --radius-lg: 14px; --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(26, 23, 20, 0.08);
  --shadow-sm: 0 2px 6px rgba(26, 23, 20, 0.10);
  --shadow-md: 0 8px 20px rgba(26, 23, 20, 0.12);
  --shadow-lg: 0 18px 40px rgba(26, 23, 20, 0.18);
  --shadow-primary: 0 8px 20px rgba(232, 112, 31, 0.30);

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ---- Motivo weave (malla) ---- */
  --weave-orange: repeating-linear-gradient(-45deg, rgba(232,112,31,0.10) 0 2px, transparent 2px 11px);
  --weave-ink:    repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 11px);

  /* ---- Chrome ---- */
  --header-h: 76px;
}

/* ========================================================================== */
/* 2. BASE                                                                    */
/* ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body.cx {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  /* Twenty Twenty-Five (tema padre) impone font-weight:300 y letter-spacing
     desde su theme.json. Se declaran aquí explícitamente para que el cuerpo
     no herede el peso ligero ni el tracking negativo de ese tema. */
  font-weight: var(--weight-regular, 400);
  letter-spacing: normal;
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Los estilos globales del tema padre también tocan encabezados y enlaces
   sueltos. El design system los recupera dentro de su propio ámbito. */
.cx h1, .cx h2, .cx h3, .cx h4, .cx h5, .cx h6 { letter-spacing: normal; }
.cx p, .cx li, .cx td, .cx th { letter-spacing: normal; }

.cx img { max-width: 100%; height: auto; display: block; }
.cx a { color: var(--text-link); text-decoration: none; }
.cx a:hover { color: var(--sol-500); }
.cx ::selection { background: var(--sol-200); color: var(--ink-900); }

.cx :focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Enlace de salto para accesibilidad (tab order lógico) */
.cx-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--sol-500); color: #fff; padding: 12px 20px;
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
}
.cx-skip:focus { left: 8px; top: 8px; }

/* --- Roles tipográficos --- */
.cx-display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}
.cx-display.on-dark { color: #fff; }

.cx-eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
  display: flex; align-items: center; gap: var(--space-2);
}
.cx-eyebrow::before {
  content: ''; width: 24px; height: 2px; background: var(--color-primary); flex: none;
}

.cx-lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  max-width: 62ch;
  text-wrap: pretty;
}
.cx-lead.on-dark { color: var(--text-on-dark-muted); }

.cx-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- Contenedores / secciones --- */
.cx-container { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }
.cx-container.base   { max-width: var(--container-base); }
.cx-container.narrow { max-width: var(--container-narrow); }

.cx-section { padding-block: var(--section-y); position: relative; }
.cx-section.dark  { background: var(--surface-dark); color: var(--text-on-dark); }
.cx-section.dark2 { background: var(--surface-dark-2); color: var(--text-on-dark); }
.cx-section.sand  { background: var(--surface-sand); color: var(--text-body); }
.cx-section.light { background: var(--surface-page); color: var(--text-body); }

/* En secciones oscuras los encabezados heredan blanco */
.cx-section.dark .cx-display,
.cx-section.dark2 .cx-display { color: #fff; }
.cx-section.dark .cx-lead,
.cx-section.dark2 .cx-lead { color: var(--text-on-dark-muted); }

/* ========================================================================== */
/* 3. FONDO — glows radiales teal + ruido                                     */
/* ========================================================================== */

/*
   Sin foto de fondo. Tres glows radiales (dos Sombra teal + uno Sol como
   acento cálido) fijos tras el contenido, más una capa de ruido SVG para
   romper el banding de los gradientes.
*/
.cx-glowfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.cx-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  will-change: transform;
}
.cx-glow--a {
  width: 46vw; height: 46vw; min-width: 340px; min-height: 340px;
  top: -12vw; left: -8vw;
  background: radial-gradient(circle at 50% 50%, var(--sombra-500) 0%, rgba(44,94,99,0.35) 45%, transparent 70%);
}
.cx-glow--b {
  width: 40vw; height: 40vw; min-width: 300px; min-height: 300px;
  top: 32vh; right: -12vw;
  background: radial-gradient(circle at 50% 50%, var(--sombra-400) 0%, rgba(71,121,126,0.30) 45%, transparent 70%);
  opacity: 0.45;
}
.cx-glow--c {
  width: 34vw; height: 34vw; min-width: 260px; min-height: 260px;
  bottom: -10vh; left: 22vw;
  background: radial-gradient(circle at 50% 50%, var(--sol-500) 0%, rgba(232,112,31,0.22) 45%, transparent 70%);
  opacity: 0.28;
}
.cx-glow--d {
  width: 28vw; height: 28vw; min-width: 220px; min-height: 220px;
  top: 68vh; left: -6vw;
  background: radial-gradient(circle at 50% 50%, var(--sombra-300) 0%, rgba(111,161,165,0.25) 45%, transparent 70%);
  opacity: 0.30;
}

/* Textura de ruido — SVG feTurbulence inline, sin petición de red */
.cx-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.055;
  mix-blend-mode: overlay;
}

/* Todo el contenido va por encima del campo de glows */
.cx-shell { position: relative; z-index: 1; }

/* Las secciones claras son opacas: los glows solo se ven en las oscuras */
.cx-section.light, .cx-section.sand { isolation: isolate; }

/* Las secciones oscuras dejan pasar el glow.
   Sin backdrop-filter aquí a propósito: aplicarlo a bloques a pantalla completa
   obliga al navegador a recomponer toda la sección en cada scroll y castiga el
   INP. El desenfoque se reserva para tarjetas y header, que es donde el efecto
   se aprecia y el área es pequeña. */
.cx-section.dark  { background: rgba(26, 23, 20, 0.86); }
.cx-section.dark2 { background: rgba(38, 32, 25, 0.82); }

/* Rejilla weave decorativa sobre bloques oscuros */
.cx-weave::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--weave-ink);
}

/* ========================================================================== */
/* 4. UTILIDADES — subconjunto Tailwind compilado                             */
/* ========================================================================== */
/* Solo se incluyen las clases que el tema usa realmente: ~6 KB en vez de los
   ~3 MB del framework completo. Los nombres y la escala son los de Tailwind. */

/* display */
.cx .block{display:block}.cx .inline-block{display:inline-block}.cx .flex{display:flex}
.cx .inline-flex{display:inline-flex}.cx .grid{display:grid}.cx .hidden{display:none}

/* flex / grid */
.cx .flex-col{flex-direction:column}.cx .flex-wrap{flex-wrap:wrap}.cx .flex-1{flex:1 1 0%}
.cx .flex-none{flex:none}
.cx .items-start{align-items:flex-start}.cx .items-center{align-items:center}
.cx .items-end{align-items:flex-end}.cx .items-stretch{align-items:stretch}
.cx .justify-start{justify-content:flex-start}.cx .justify-center{justify-content:center}
.cx .justify-between{justify-content:space-between}.cx .justify-end{justify-content:flex-end}
.cx .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.cx .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cx .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cx .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cx .col-span-2{grid-column:span 2/span 2}
.cx .gap-1{gap:.25rem}.cx .gap-2{gap:.5rem}.cx .gap-3{gap:.75rem}.cx .gap-4{gap:1rem}
.cx .gap-5{gap:1.25rem}.cx .gap-6{gap:1.5rem}.cx .gap-8{gap:2rem}.cx .gap-10{gap:2.5rem}
.cx .gap-12{gap:3rem}

/* espaciado */
.cx .m-0{margin:0}.cx .mx-auto{margin-inline:auto}
.cx .mt-1{margin-top:.25rem}.cx .mt-2{margin-top:.5rem}.cx .mt-3{margin-top:.75rem}
.cx .mt-4{margin-top:1rem}.cx .mt-5{margin-top:1.25rem}.cx .mt-6{margin-top:1.5rem}
.cx .mt-8{margin-top:2rem}.cx .mt-10{margin-top:2.5rem}.cx .mt-12{margin-top:3rem}
.cx .mb-1{margin-bottom:.25rem}.cx .mb-2{margin-bottom:.5rem}.cx .mb-3{margin-bottom:.75rem}
.cx .mb-4{margin-bottom:1rem}.cx .mb-6{margin-bottom:1.5rem}.cx .mb-8{margin-bottom:2rem}
.cx .mb-10{margin-bottom:2.5rem}.cx .mb-12{margin-bottom:3rem}
.cx .p-0{padding:0}.cx .p-4{padding:1rem}.cx .p-5{padding:1.25rem}.cx .p-6{padding:1.5rem}
.cx .p-8{padding:2rem}
.cx .px-4{padding-inline:1rem}.cx .px-6{padding-inline:1.5rem}
.cx .py-2{padding-block:.5rem}.cx .py-3{padding-block:.75rem}.cx .py-4{padding-block:1rem}
.cx .py-6{padding-block:1.5rem}.cx .py-8{padding-block:2rem}.cx .py-10{padding-block:2.5rem}
.cx .pt-4{padding-top:1rem}.cx .pb-4{padding-bottom:1rem}.cx .pb-6{padding-bottom:1.5rem}

/* dimensiones */
.cx .w-full{width:100%}.cx .h-full{height:100%}.cx .max-w-full{max-width:100%}
.cx .min-w-0{min-width:0}

/* posición */
.cx .relative{position:relative}.cx .absolute{position:absolute}.cx .sticky{position:sticky}
.cx .fixed{position:fixed}
.cx .inset-0{inset:0}.cx .top-0{top:0}.cx .left-0{left:0}.cx .right-0{right:0}.cx .bottom-0{bottom:0}
.cx .z-10{z-index:10}.cx .z-20{z-index:20}.cx .z-50{z-index:50}
.cx .overflow-hidden{overflow:hidden}.cx .overflow-x-auto{overflow-x:auto}

/* tipografía */
.cx .text-left{text-align:left}.cx .text-center{text-align:center}.cx .text-right{text-align:right}
.cx .uppercase{text-transform:uppercase}
.cx .font-display{font-family:var(--font-display)}
.cx .font-head{font-family:var(--font-head)}
.cx .font-body{font-family:var(--font-body)}
.cx .font-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.cx .font-medium{font-weight:500}.cx .font-semibold{font-weight:600}.cx .font-bold{font-weight:700}
.cx .text-2xs{font-size:var(--text-2xs)}.cx .text-xs{font-size:var(--text-xs)}
.cx .text-sm{font-size:var(--text-sm)}.cx .text-base{font-size:var(--text-base)}
.cx .text-md{font-size:var(--text-md)}.cx .text-lg{font-size:var(--text-lg)}
.cx .text-xl{font-size:var(--text-xl)}.cx .text-2xl{font-size:var(--text-2xl)}
.cx .text-3xl{font-size:var(--text-3xl)}.cx .text-4xl{font-size:var(--text-4xl)}
.cx .leading-tight{line-height:var(--leading-tight)}
.cx .leading-snug{line-height:var(--leading-snug)}
.cx .leading-relaxed{line-height:var(--leading-relaxed)}
.cx .tracking-label{letter-spacing:var(--tracking-label)}
.cx .tracking-wide{letter-spacing:var(--tracking-wide)}

/* color */
.cx .text-strong{color:var(--text-strong)}.cx .text-body{color:var(--text-body)}
.cx .text-muted{color:var(--text-muted)}.cx .text-primary{color:var(--color-primary)}
.cx .text-secondary{color:var(--color-secondary)}
.cx .text-white{color:#fff}.cx .text-on-dark{color:var(--text-on-dark)}
.cx .text-on-dark-muted{color:var(--text-on-dark-muted)}
.cx .bg-primary{background:var(--color-primary)}
.cx .bg-secondary{background:var(--color-secondary)}
.cx .bg-white{background:#fff}.cx .bg-sand{background:var(--surface-sand)}
.cx .bg-dark{background:var(--surface-dark)}

/* borde / radio / sombra */
.cx .rounded-none{border-radius:0}.cx .rounded-sm{border-radius:var(--radius-sm)}
.cx .rounded-md{border-radius:var(--radius-md)}.cx .rounded-lg{border-radius:var(--radius-lg)}
.cx .rounded-full{border-radius:var(--radius-pill)}
.cx .border{border:1px solid var(--border-subtle)}
.cx .border-strong{border:2px solid var(--border-strong)}
.cx .border-on-dark{border:1px solid var(--border-on-dark)}
.cx .shadow-sm{box-shadow:var(--shadow-sm)}.cx .shadow-md{box-shadow:var(--shadow-md)}
.cx .shadow-lg{box-shadow:var(--shadow-lg)}

.cx .list-none{list-style:none;margin:0;padding:0}

/* Responsive: breakpoints md (768) y lg (1024) */
@media (min-width:768px){
  .cx .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cx .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cx .md\:flex{display:flex}
  .cx .md\:hidden{display:none}
  .cx .md\:text-left{text-align:left}
  .cx .md\:flex-row{flex-direction:row}
}
@media (min-width:1024px){
  .cx .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cx .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cx .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .cx .lg\:col-span-2{grid-column:span 2/span 2}
  .cx .lg\:block{display:block}
  .cx .lg\:hidden{display:none}
}

/* ========================================================================== */
/* 5. COMPONENTES — shadcn/ui portado a PHP                                   */
/* ========================================================================== */
/* Misma API de variantes que shadcn (variant / size), traducida a los tokens
   Cercalux: píldora, Oswald mayúsculas, sombra cálida. */

/* ---------- Button ---------- */
.cx-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-head); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; line-height: 1;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.cx-btn:disabled, .cx-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* tamaños */
.cx-btn--sm { padding: 8px 18px;  font-size: 12px; }
.cx-btn--md { padding: 13px 28px; font-size: 14px; }
.cx-btn--lg { padding: 17px 38px; font-size: 16px; }

/* variantes */
.cx-btn--primary {
  background: var(--color-primary); color: var(--text-on-primary);
  border-color: var(--color-primary); box-shadow: var(--shadow-primary);
}
.cx-btn--primary:hover {
  background: var(--color-primary-hover); border-color: var(--color-primary-hover);
  color: #fff;
}
.cx-btn--secondary {
  background: var(--color-secondary); color: #fff;
  border-color: var(--color-secondary); box-shadow: var(--shadow-sm);
}
.cx-btn--secondary:hover {
  background: var(--color-secondary-hover); border-color: var(--color-secondary-hover); color: #fff;
}
.cx-btn--outline {
  background: transparent; color: var(--text-strong); border-color: var(--border-strong);
}
.cx-btn--outline:hover { background: var(--sand-100); color: var(--text-strong); }
.cx-btn--ghost { background: transparent; color: var(--text-strong); }
.cx-btn--ghost:hover { background: var(--sand-100); color: var(--text-strong); }
.cx-btn--ondark {
  background: #fff; color: var(--ink-900); border-color: #fff;
}
.cx-btn--ondark:hover { background: var(--sand-100); color: var(--ink-900); }
.cx-btn--outline-ondark {
  background: transparent; color: #fff; border-color: var(--border-on-dark);
}
.cx-btn--outline-ondark:hover { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.35); }

.cx-btn--full { display: flex; width: 100%; }

/* Micro-interacción (el "hover scale/lift" de Framer Motion, en CSS) */
.cx-btn:hover  { transform: translateY(-2px) scale(1.02); }
.cx-btn:active { transform: translateY(1px) scale(0.99); }
.cx-btn--primary:hover { box-shadow: 0 12px 28px rgba(232,112,31,.42); }

/* ---------- Card (semitransparente + backdrop blur) ---------- */
.cx-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.cx-card--pad-none { padding: 0; }
.cx-card--pad-sm { padding: var(--space-4); }
.cx-card--pad-md { padding: var(--space-5); }
.cx-card--pad-lg { padding: var(--space-6); }

.cx-card--default {
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  color: var(--text-body);
}
.cx-card--raised {
  background: rgba(255,255,255,0.88);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  color: var(--text-body);
}
.cx-card--sand {
  background: rgba(244,236,224,0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  color: var(--text-body);
}
.cx-card--dark {
  background: rgba(38,32,25,0.55);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid var(--border-on-dark);
  color: var(--text-on-dark);
}
.cx-card--glass {
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--border-on-dark);
  color: var(--text-on-dark);
}
.cx-card--outline {
  background: transparent; border: 2px solid var(--border-strong); color: var(--text-body);
}

/* card hover lift — micro-interacción */
.cx-card--hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--sol-300);
}
.cx-card--dark.cx-card--hover:hover,
.cx-card--glass.cx-card--hover:hover {
  border-color: rgba(232,112,31,.45);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* corte diagonal naranja — la firma de la marca */
.cx-cut::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 46px; height: 46px; background: var(--color-primary);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

/* ---------- Badge ---------- */
.cx-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  border-radius: var(--radius-pill); line-height: 1.4; white-space: nowrap;
  border: 1px solid transparent;
}
.cx-badge--sm { padding: 3px 9px;  font-size: 10px; }
.cx-badge--md { padding: 5px 12px; font-size: 11.5px; }
.cx-badge--primary { background: var(--sol-50); color: var(--sol-700); border-color: var(--sol-200); }
.cx-badge--solid   { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.cx-badge--neutral { background: var(--sand-100); color: var(--text-body); border-color: var(--border-subtle); }
.cx-badge--ondark  { background: rgba(255,255,255,.10); color: var(--text-on-dark); border-color: var(--border-on-dark); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cx-badge--success { background: var(--green-50); color: var(--green-500); border-color: rgba(47,143,78,.25); }
.cx-badge--teal    { background: rgba(44,94,99,.14); color: var(--sombra-300); border-color: rgba(111,161,165,.35); }

/* ---------- Separator ---------- */
.cx-separator { border: 0; background: var(--border-subtle); }
.cx-separator--h { height: 1px; width: 100%; margin-block: var(--space-6); }
.cx-separator--v { width: 1px; align-self: stretch; margin-inline: var(--space-4); }
.cx-separator--ondark { background: var(--border-on-dark); }
.cx-separator--accent { height: 3px; width: 56px; background: var(--color-primary); margin-block: var(--space-4); }

/* ---------- Stat (contador animado) ---------- */
.cx-stat { display: flex; flex-direction: column; gap: 4px; }
.cx-stat__value {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(2.25rem, 5vw, 3rem); line-height: .9; letter-spacing: -0.01em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.cx-stat__value .cx-stat__affix { font-size: .55em; vertical-align: super; margin-left: 2px; }
.cx-stat__label {
  font-family: var(--font-head); font-weight: 500; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted);
}
.cx-stat--ondark .cx-stat__value { color: #fff; }
.cx-stat--ondark .cx-stat__label { color: var(--text-on-dark-muted); }
.cx-stat--primary .cx-stat__value { color: var(--color-primary); }

/* ---------- FeatureItem ---------- */
.cx-feature { display: flex; gap: var(--space-4); align-items: flex-start; }
.cx-feature__icon {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--color-primary); color: #fff;
  display: grid; place-items: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.cx-feature:hover .cx-feature__icon { transform: rotate(-6deg) scale(1.06); }
.cx-feature__icon svg { width: 22px; height: 22px; stroke-width: 2; }
.cx-feature__title {
  font-family: var(--font-head); font-weight: 600; font-size: var(--text-md);
  text-transform: uppercase; letter-spacing: .02em; color: var(--text-strong); margin: 0 0 4px;
}
.cx-section.dark .cx-feature__title, .cx-section.dark2 .cx-feature__title { color: #fff; }
.cx-feature__desc { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-muted); margin: 0; }
.cx-section.dark .cx-feature__desc, .cx-section.dark2 .cx-feature__desc { color: var(--text-on-dark-muted); }

/* ---------- Punto de estado pulsante ---------- */
.cx-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-500); position: relative; flex: none;
}
.cx-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--green-500); animation: cx-pulse 2s var(--ease-out) infinite;
}
@keyframes cx-pulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(2.6); opacity: 0;  }
  100% { transform: scale(2.6); opacity: 0;  }
}

/* ---------- Tabla (bloque de extracción por IA) ---------- */
.cx-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); }
.cx-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 520px; background: rgba(255,255,255,.9); }
.cx-table caption { text-align: left; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs); color: var(--text-muted); padding-bottom: var(--space-3); }
.cx-table th, .cx-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-subtle); }
.cx-table thead th {
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-label); font-size: var(--text-xs);
  background: var(--ink-900); color: #fff; border-bottom: 0;
}
.cx-table tbody tr:last-child td { border-bottom: 0; }
.cx-table tbody tr:nth-child(even) { background: rgba(244,236,224,.5); }

/* ---------- FAQ ---------- */
.cx-faq { border-bottom: 1px solid var(--border-subtle); }
.cx-faq summary {
  cursor: pointer; list-style: none; padding: var(--space-5) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  font-family: var(--font-head); font-weight: 600; font-size: var(--text-md);
  color: var(--text-strong);
}
.cx-faq summary::-webkit-details-marker { display: none; }
.cx-faq summary::after {
  content: '+'; font-family: var(--font-body); font-size: 26px; line-height: 1;
  color: var(--color-primary); flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.cx-faq[open] summary::after { transform: rotate(45deg); }
.cx-faq__body { padding-bottom: var(--space-5); color: var(--text-muted); line-height: var(--leading-relaxed); }
.cx-faq__body > :first-child { margin-top: 0; }
.cx-faq__body > :last-child { margin-bottom: 0; }

/* ---------- Formulario ---------- */
.cx-field { display: flex; flex-direction: column; gap: 6px; }
.cx-field__label {
  font-family: var(--font-head); font-weight: 600; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-strong);
}
.cx-card--dark .cx-field__label, .cx-card--glass .cx-field__label { color: var(--text-on-dark); }
.cx-input {
  font-family: var(--font-body); font-size: var(--text-base);
  padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default); background: #fff; color: var(--text-strong);
  width: 100%;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.cx-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.cx-input::placeholder { color: var(--ink-400); }
textarea.cx-input { min-height: 110px; resize: vertical; }
.cx-field__hint { font-size: var(--text-xs); color: var(--text-muted); }
.cx-card--dark .cx-field__hint, .cx-card--glass .cx-field__hint { color: var(--text-on-dark-muted); }

/* ---------- Header ---------- */
.cx-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(26,23,20,.72);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--border-on-dark);
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.cx-header.is-stuck { background: rgba(26,23,20,.92); box-shadow: 0 8px 24px rgba(0,0,0,.30); }
.cx-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); height: var(--header-h); }
.cx-nav { display: none; align-items: center; gap: var(--space-5); }
@media (min-width: 1024px) { .cx-nav { display: flex; } }
.cx-nav a {
  font-family: var(--font-head); font-weight: 500; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-on-dark);
  padding: 6px 0; position: relative;
}
.cx-nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--color-primary); transition: width var(--dur-base) var(--ease-out);
}
.cx-nav a:hover, .cx-nav a[aria-current="page"] { color: #fff; }
.cx-nav a:hover::after, .cx-nav a[aria-current="page"]::after { width: 100%; }

/* Logo */
.cx-logo { display: inline-flex; align-items: center; gap: 9px; }
.cx-logo__glyph {
  width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm);
  background: var(--color-primary);
  background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,.28) 0 2px, transparent 2px 7px);
}
.cx-logo__word {
  font-family: var(--font-display); text-transform: uppercase; font-size: 28px;
  line-height: 1; letter-spacing: .01em; color: #fff; white-space: nowrap;
}
.cx-logo__word em { font-style: normal; color: var(--color-primary); }

/* Menú móvil */
.cx-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.08); border: 1px solid var(--border-on-dark);
  color: #fff; cursor: pointer;
}
@media (min-width: 1024px) { .cx-burger { display: none; } }
.cx-mobilenav {
  display: none; border-top: 1px solid var(--border-on-dark);
  background: rgba(26,23,20,.96);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  max-height: min(70vh, 520px); overflow-y: auto;
}
.cx-mobilenav.is-open { display: block; }
.cx-mobilenav a {
  display: block; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.07);
  font-family: var(--font-head); font-weight: 500; text-transform: uppercase;
  font-size: var(--text-sm); letter-spacing: .04em; color: var(--text-on-dark);
}
.cx-mobilenav a:last-child { border-bottom: 0; }

/* ---------- Footer ---------- */
.cx-footer { background: var(--ink-900); color: var(--text-on-dark); position: relative; }
.cx-footer a { color: var(--text-on-dark-muted); }
.cx-footer a:hover { color: var(--color-primary); }
.cx-footer__title {
  font-family: var(--font-head); font-weight: 600; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: #fff; margin: 0 0 var(--space-4);
}

/* ---------- Hero ---------- */
.cx-hero { position: relative; padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 6.5rem); overflow: hidden; }
.cx-hero__title { font-size: clamp(2.5rem, 7vw, 5rem); color: #fff; }
.cx-hero__kicker { font-size: clamp(1rem, 2.2vw, var(--text-lg)); color: var(--sol-300); font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 var(--space-3); }
.cx-hero__media { position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-on-dark); box-shadow: var(--shadow-lg); }
.cx-hero__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.cx-hero__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(26,23,20,.55) 0%, transparent 45%);
}

/* Bullets de credibilidad sobre el pliegue */
.cx-trustbullets { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.cx-trustbullets li {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 500; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-on-dark);
  background: rgba(255,255,255,.07);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border-on-dark); border-radius: var(--radius-pill);
  padding: 8px 16px;
}
.cx-trustbullets svg { width: 16px; height: 16px; color: var(--sol-400); flex: none; }

/* Banda de confianza naranja */
.cx-trustbar { background: var(--color-primary); color: #fff; position: relative; overflow: hidden; }
.cx-trustbar::after { content: ''; position: absolute; inset: 0; background-image: var(--weave-ink); pointer-events: none; }
.cx-trustbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4) var(--space-8); padding-block: var(--space-5); position: relative; z-index: 1; }
.cx-trustbar__item { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: var(--text-sm); }
.cx-trustbar__item svg { width: 18px; height: 18px; }

/* Pasos numerados */
.cx-step { position: relative; }
.cx-step__num {
  font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1;
  color: rgba(232,112,31,.30); display: block; margin-bottom: var(--space-2);
}
.cx-section.dark .cx-step__num { color: rgba(232,112,31,.55); }

/* Testimonios */
.cx-quote { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-body); margin: 0 0 var(--space-4); }
.cx-card--dark .cx-quote, .cx-card--glass .cx-quote { color: var(--text-on-dark); }
.cx-quote__author { font-family: var(--font-head); font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--text-strong); }
.cx-card--dark .cx-quote__author, .cx-card--glass .cx-quote__author { color: #fff; }
.cx-quote__meta { font-size: var(--text-xs); color: var(--text-muted); }
.cx-card--dark .cx-quote__meta, .cx-card--glass .cx-quote__meta { color: var(--text-on-dark-muted); }
.cx-stars { display: inline-flex; gap: 2px; color: var(--amber-500); margin-bottom: var(--space-3); }
.cx-stars svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }

/* Rejilla de proyectos */
.cx-project { position: relative; overflow: hidden; border-radius: var(--radius-md); display: block; }
.cx-project img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.cx-project:hover img { transform: scale(1.06); }
.cx-project__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-4);
  background: linear-gradient(to top, rgba(26,23,20,.88), transparent);
  color: #fff; font-family: var(--font-head); font-weight: 500; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: .04em;
}

/* CTA móvil fija (blueprint #17) — se oculta si Buttonizer está activo */
.cx-stickycta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(26,23,20,.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-on-dark);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: var(--space-3);
}
@media (min-width: 1024px) { .cx-stickycta { display: none; } }
body.has-buttonizer .cx-stickycta { display: none; }

/* ========================================================================== */
/* 6. MOVIMIENTO                                                              */
/* ========================================================================== */

/* Estado inicial de los elementos que GSAP va a revelar.
   .cx-js marca que el JS cargó — sin JS nada queda oculto. */
.cx-js [data-reveal] { opacity: 0; transform: translateY(28px); }
.cx-js [data-reveal="left"]  { transform: translateX(-40px); }
.cx-js [data-reveal="right"] { transform: translateX(40px); }
.cx-js [data-reveal="scale"] { transform: scale(.94); }

/* Transición de página */
.cx-pagefade { opacity: 1; transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
.cx-pagefade.is-leaving { opacity: 0; transform: translateY(-10px); }

/* Respeta prefers-reduced-motion: todo visible, sin movimiento */
@media (prefers-reduced-motion: reduce) {
  .cx-js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .cx-btn:hover, .cx-card--hover:hover { transform: none; }
  .cx-dot::after { animation: none; }
  .cx-project:hover img { transform: none; }
  .cx-glow { display: none; }
}

/* ========================================================================== */
/* Impresión                                                                  */
/* ========================================================================== */
@media print {
  .cx-glowfield, .cx-header, .cx-stickycta, .cx-footer { display: none; }
  .cx-section { padding-block: 1rem; background: #fff !important; color: #000 !important; }
}

/* ==========================================================================
   7. NAVEGACIÓN CON DESPLEGABLE DE CIUDADES
   ========================================================================== */

.cx-nav__item { position: relative; display: flex; align-items: center; }

.cx-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 500; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-on-dark);
  padding: 10px 0; position: relative; background: none; border: 0; cursor: pointer;
}
.cx-nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 4px; height: 2px; width: 0;
  background: var(--color-primary); transition: width var(--dur-base) var(--ease-out);
}
.cx-nav__link:hover, .cx-nav__link[aria-current="page"], .cx-nav__link[aria-expanded="true"] { color: #fff; }
.cx-nav__link:hover::after,
.cx-nav__link[aria-current="page"]::after,
.cx-nav__link[aria-expanded="true"]::after { width: 100%; }

.cx-nav__caret { transition: transform var(--dur-base) var(--ease-out); flex: none; }
.cx-nav__item:hover .cx-nav__caret,
.cx-nav__link[aria-expanded="true"] .cx-nav__caret { transform: rotate(180deg); }

/* Panel desplegable */
.cx-dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 460px; max-width: min(92vw, 620px);
  background: rgba(26, 23, 20, 0.97);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  padding: var(--space-5);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
  z-index: 60;
}
/* Puente invisible: evita que el panel se cierre al cruzar el hueco */
.cx-dropdown::before {
  content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.cx-nav__item:hover > .cx-dropdown,
.cx-nav__item:focus-within > .cx-dropdown,
.cx-dropdown.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.cx-dropdown__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-bottom: var(--space-3); margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-on-dark);
}
.cx-dropdown__title {
  font-family: var(--font-head); font-weight: 600; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--sol-400); margin: 0;
}
.cx-dropdown__all {
  font-family: var(--font-head); font-weight: 600; font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--text-on-dark); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
}
.cx-dropdown__all:hover { color: var(--sol-400); }

.cx-dropdown__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px var(--space-4); list-style: none; margin: 0; padding: 0;
}
.cx-dropdown__grid a {
  display: block; padding: 7px 8px; margin-inline: -8px; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  text-transform: none; letter-spacing: 0; color: var(--text-on-dark-muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cx-dropdown__grid a:hover,
.cx-dropdown__grid a[aria-current="page"] { background: rgba(255, 255, 255, .08); color: #fff; }
.cx-dropdown__grid a[aria-current="page"] { color: var(--sol-400); }

/* --- Navegación móvil en acordeón --- */
.cx-mobilenav__group { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.cx-mobilenav__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: 14px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-head); font-weight: 500; text-transform: uppercase;
  font-size: var(--text-sm); letter-spacing: .04em; color: var(--text-on-dark);
}
.cx-mobilenav__toggle .cx-nav__caret { transition: transform var(--dur-base) var(--ease-out); }
.cx-mobilenav__toggle[aria-expanded="true"] { color: var(--sol-400); }
.cx-mobilenav__toggle[aria-expanded="true"] .cx-nav__caret { transform: rotate(180deg); }
.cx-mobilenav__panel { display: none; padding-bottom: var(--space-4); }
.cx-mobilenav__panel.is-open { display: block; }
.cx-mobilenav__panel a {
  display: block; padding: 9px 0 9px var(--space-4); border-bottom: 0;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  text-transform: none; letter-spacing: 0; color: var(--text-on-dark-muted);
  border-left: 2px solid var(--border-on-dark);
}
.cx-mobilenav__panel a:hover { color: #fff; border-left-color: var(--sol-500); }
.cx-mobilenav__panel .cx-mobilenav__hub {
  color: var(--sol-400); font-family: var(--font-head); font-weight: 600;
  text-transform: uppercase; font-size: var(--text-2xs); letter-spacing: var(--tracking-label);
}

/* ==========================================================================
   8. HUB — rejilla de ciudades
   ========================================================================== */

.cx-citygrid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .cx-citygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cx-citygrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cx-citycard {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--border-on-dark); border-radius: var(--radius-md);
  color: var(--text-on-dark);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.cx-citycard:hover {
  transform: translateY(-4px); border-color: var(--sol-500);
  background: rgba(255, 255, 255, .10); color: #fff;
}
.cx-citycard__name {
  font-family: var(--font-head); font-weight: 600; font-size: var(--text-md);
  text-transform: uppercase; letter-spacing: .02em;
}
.cx-citycard svg { color: var(--sol-400); flex: none; }

/* ==========================================================================
   9. BLOG
   ========================================================================== */

.cx-postcard {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.cx-postcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.cx-postcard__media { position: relative; overflow: hidden; background: var(--sand-200); }
.cx-postcard__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.cx-postcard:hover .cx-postcard__media img { transform: scale(1.05); }
.cx-postcard__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.cx-postcard__title {
  font-family: var(--font-head); font-weight: 600; font-size: var(--text-md);
  line-height: var(--leading-snug); color: var(--text-strong); margin: 0;
  transition: color var(--dur-base) var(--ease-out);
}
.cx-postcard:hover .cx-postcard__title { color: var(--sol-600); }
.cx-postcard__excerpt { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-muted); margin: 0; flex: 1; }
.cx-postcard__meta {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-family: var(--font-head); font-size: var(--text-2xs); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--text-muted);
}

/* Filtro de categorías */
.cx-cats { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.cx-cats a { text-decoration: none; }
.cx-cats a[aria-current="page"] .cx-badge { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Paginación */
.cx-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.cx-pagination a, .cx-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding-inline: 12px;
  font-family: var(--font-head); font-weight: 600; font-size: var(--text-sm);
  border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);
  background: #fff; color: var(--text-strong);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.cx-pagination a:hover { background: var(--sand-100); border-color: var(--border-default); color: var(--text-strong); }
.cx-pagination .current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ==========================================================================
   10. PROSA — contenido de las entradas
   ========================================================================== */

.cx-prose {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  max-width: 68ch;
}
.cx-prose > * + * { margin-top: 1.15em; }
.cx-prose p { margin: 0; text-wrap: pretty; }

.cx-prose h2, .cx-prose h3, .cx-prose h4 {
  font-family: var(--font-head); font-weight: 600;
  color: var(--text-strong); line-height: var(--leading-snug);
  margin: 2em 0 0; text-wrap: balance;
}
.cx-prose h2 { font-size: var(--text-xl); }
.cx-prose h3 { font-size: var(--text-lg); }
.cx-prose h4 { font-size: var(--text-md); text-transform: uppercase; letter-spacing: .02em; }
.cx-prose h2 + *, .cx-prose h3 + *, .cx-prose h4 + * { margin-top: .6em; }

.cx-prose a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cx-prose a:hover { color: var(--sol-500); }

.cx-prose ul, .cx-prose ol { margin: 1.15em 0; padding-left: 1.4em; }
.cx-prose li { margin-bottom: .5em; }
.cx-prose li::marker { color: var(--color-primary); }

.cx-prose strong { font-weight: 700; color: var(--text-strong); }

.cx-prose blockquote {
  margin: 1.6em 0; padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-primary);
  background: var(--sand-100); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-md); color: var(--text-strong);
}
.cx-prose blockquote p { margin: 0; }

.cx-prose img, .cx-prose figure { border-radius: var(--radius-md); margin-block: 1.6em; }
.cx-prose figure img { margin: 0; }
.cx-prose figcaption { font-size: var(--text-sm); color: var(--text-muted); text-align: center; margin-top: var(--space-2); }

.cx-prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin-block: 1.6em; }
.cx-prose th, .cx-prose td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border-subtle); }
.cx-prose thead th { background: var(--ink-900); color: #fff; font-family: var(--font-head); text-transform: uppercase; font-size: var(--text-xs); letter-spacing: var(--tracking-label); }
.cx-prose tbody tr:nth-child(even) { background: var(--sand-100); }

.cx-prose code {
  font-family: var(--font-mono); font-size: .9em;
  background: var(--sand-100); padding: 2px 6px; border-radius: var(--radius-xs);
}
.cx-prose hr { border: 0; border-top: 1px solid var(--border-subtle); margin-block: 2.4em; }

.cx-prose .cx-tablewrap table { min-width: 480px; }

/* --- Cabecera de entrada --- */
.cx-postmeta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  font-family: var(--font-head); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--text-on-dark-muted);
}
.cx-postmeta__sep { color: var(--sol-500); }

/* Datos de contacto */
.cx-contactrow { display: flex; align-items: flex-start; gap: var(--space-4); }
.cx-contactrow__icon {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius-md);
  background: rgba(232, 112, 31, .14); color: var(--sol-400);
  display: grid; place-items: center; border: 1px solid rgba(232, 112, 31, .3);
}
.cx-contactrow__label {
  font-family: var(--font-head); font-weight: 600; font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--text-on-dark-muted); margin: 0 0 2px;
}
.cx-contactrow__value { font-size: var(--text-md); color: var(--text-on-dark); margin: 0; }
.cx-contactrow__value a { color: var(--text-on-dark); }
.cx-contactrow__value a:hover { color: var(--sol-400); }

/* ==========================================================================
   11. ANCHO FIJO EN MÓVIL — nada desborda horizontalmente
   --------------------------------------------------------------------------
   `overflow-x: clip` en vez de `hidden`: hidden convierte al elemento en
   contenedor de scroll y rompe `position: sticky` del header. clip recorta
   sin crear contexto de desplazamiento. Se declara hidden antes como
   respaldo para navegadores sin soporte de clip.
   ========================================================================== */

html {
  overflow-x: hidden;
  overflow-x: clip;
}

body.cx {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

/* Los hijos de grid traen min-width:auto, que impide que se encojan por
   debajo de su contenido y provoca el desbordamiento clásico. */
.cx .grid > * { min-width: 0; }

/* Ningún medio puede superar su columna */
.cx img,
.cx video,
.cx iframe,
.cx embed,
.cx object,
.cx svg:not(.cx-icon) { max-width: 100%; }

.cx iframe { border: 0; }

/* Titulares: partir palabras larguísimas antes que desbordar */
.cx-display,
.cx-hero__title,
.cx-postcard__title,
.cx-feature__title,
.cx-citycard__name { overflow-wrap: break-word; }

/* ==========================================================================
   12. CONTENIDO DE ENTRADAS — 103 de 171 traen tablas del editor
   ========================================================================== */

.cx-prose { overflow-wrap: anywhere; }

/* Las tablas del contenido no vienen envueltas en .cx-tablewrap, así que se
   convierten ellas mismas en su propio contenedor desplazable. */
.cx-prose > table,
.cx-prose table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cx-prose table thead,
.cx-prose table tbody,
.cx-prose table tr { width: 100%; }

.cx-prose pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.cx-prose code { overflow-wrap: anywhere; }

/* Embeds de vídeo responsivos */
.cx-prose iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

.cx-prose figure { max-width: 100%; }
.cx-prose img { height: auto; }

/* WordPress mete alignwide/alignfull, que se salen del contenedor */
.cx-prose .alignwide,
.cx-prose .alignfull {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}
.cx-prose .alignleft,
.cx-prose .alignright { float: none; margin-inline: 0; }
@media (min-width: 768px) {
  .cx-prose .alignleft { float: left; margin: 0 var(--space-5) var(--space-4) 0; max-width: 50%; }
  .cx-prose .alignright { float: right; margin: 0 0 var(--space-4) var(--space-5); max-width: 50%; }
}

/* ==========================================================================
   13. CTA EN MÓVIL — Buttonizer se encarga del botón flotante
   --------------------------------------------------------------------------
   En pantallas menores de 1024px se ocultan todos los botones de cotizar
   para no competir con Buttonizer. El único que sobrevive es el de envío
   del formulario, que es la conversión real de la página.
   ========================================================================== */

@media (max-width: 1023.98px) {
  .cx-btn--quote,
  .cx-ctarow { display: none !important; }

  /* La barra fija propia ya no se usa */
  .cx-stickycta { display: none !important; }

  /* Buttonizer se ancla abajo a la derecha: se deja aire al final para que
     no tape el último bloque de contenido. */
  .cx-footer { padding-bottom: 72px; }
}

/* El botón de envío del formulario nunca se oculta */
.cx-btn[type="submit"] { display: inline-flex !important; }
.cx-btn--full[type="submit"] { display: flex !important; }