/* Hallmark · macrostructure: Signature-Umbral (image-as-canvas hero) · tone: editorial cálido + precisión de ingeniería · anchor hue: teal-cenote 189°
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 * CÉFIRO — climatización de precisión · Riviera Maya. Theme "Cenote" (custom). Tokens locked in tokens.css.
 */

/* ============================================================
   FONTS — self-hosted variable/static woff2, font-display: swap
   ============================================================ */
@font-face { font-family: "Newsreader"; src: url("../assets/fonts/newsreader-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../assets/fonts/newsreader-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../assets/fonts/newsreader-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../assets/fonts/hanken-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../assets/fonts/hanken-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../assets/fonts/spacemono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../assets/fonts/spacemono-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: oldstyle-nums;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }
::selection { background: var(--color-agua); color: var(--color-ink); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;         /* headings always roman */
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
p { margin: 0; }

/* ============================================================
   LANG TOGGLE — ES / EN via [data-lang]
   ============================================================ */
[data-lang="es"] [lang="en"] { display: none; }
[data-lang="en"] [lang="es"] { display: none; }
/* inline-safe: spans stay inline where their parent is inline */

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--edge); }
.section { padding-block: var(--space-3xl); position: relative; }
.section--sand { background: var(--color-surface); }
.section--sand2 { background: var(--color-surface-3); }
.stack > * + * { margin-top: var(--space-sm); }

.kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--color-cenote);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.kicker::before {
  content: "";
  width: 1.75rem; height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.section__head { max-width: 44ch; margin-bottom: var(--space-lg); }
.section__title { font-size: var(--text-2xl); }
.section__lead { color: var(--color-ink-2); font-size: var(--text-md); max-width: var(--measure); margin-top: var(--space-sm); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ast { color: var(--color-sol); font-weight: 700; }   /* marca de placeholder honesto * */

/* ============================================================
   BUTTONS / CTA — 8 states, asymmetric hover
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.85em 1.4em;
  min-height: 44px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-base);
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--dur-out) var(--ease-in), color var(--dur-out) var(--ease-in),
              transform var(--dur-out) var(--ease-in), box-shadow var(--dur-out) var(--ease-in);
}
.btn:hover { transition-duration: var(--dur-in); transition-timing-function: var(--ease-out); }
.btn--primary { background: var(--color-cenote); color: var(--color-bg); box-shadow: var(--shadow-1); }
.btn--primary:hover { background: var(--color-cenote-hi); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-1); }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--hair); }
.btn--ghost:hover { border-color: var(--color-cenote); color: var(--color-cenote); transform: translateY(-2px); }
.btn--ghost:active { transform: translateY(0); }
.btn--sm { padding: 0.6em 1em; font-size: var(--text-sm); min-height: 40px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn .wa { width: 1.15em; height: 1.15em; fill: currentColor; }

.microcta {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.02em;
  color: var(--color-cenote); text-decoration: none; min-height: 44px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-in) var(--ease-out), gap var(--dur-in) var(--ease-out);
}
.microcta:hover { border-color: var(--color-cenote); gap: 0.7em; }
.microcta::after { content: "→"; transition: transform var(--dur-in) var(--ease-out); }
.microcta:hover::after { transform: translateX(3px); }

/* precision chip (mono) */
.chip {
  display: inline-flex; align-items: baseline; gap: 0.5em;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4em 0.75em;
  border-radius: var(--radius-pill);
  background: oklch(0.475 0.083 189 / 0.09);
  color: var(--color-cenote);
  font-variant-numeric: tabular-nums;
}
.chip--sol { background: oklch(0.647 0.106 55 / 0.12); color: var(--color-sol-hot); }

/* ============================================================
   NAV — N1b canonical, single line ≤72px, ES/EN toggle, persistent CTA
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: oklch(0.941 0.017 79 / 0.82);
  backdrop-filter: saturate(1.1) blur(12px);
  border-bottom: 1px solid var(--hair-soft);
  transition: box-shadow var(--dur-ui) var(--ease-out), background var(--dur-ui) var(--ease-out);
}
.nav.is-scrolled { box-shadow: var(--shadow-1); background: oklch(0.941 0.017 79 / 0.94); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); width: 100%; }
.nav__brand { display: inline-flex; align-items: center; gap: 0.6em; text-decoration: none; }
.nav__brand .isotype { width: 30px; height: 30px; }
.nav__word { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.02em; line-height: 1; }
.nav__links { display: flex; align-items: center; gap: clamp(0.9rem, 1.6vw, 1.6rem); list-style: none; margin: 0; padding: 0; }
.nav__links a {
  text-decoration: none; font-size: 0.95rem; color: var(--color-ink-2); font-weight: 500;
  padding: 0.4em 0; position: relative; white-space: nowrap;
  transition: color var(--dur-in) var(--ease-out);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--color-cenote); transition: right var(--dur-in) var(--ease-out);
}
.nav__links a:hover { color: var(--color-ink); }
.nav__links a:hover::after { right: 0; }
.nav__tools { display: flex; align-items: center; gap: var(--space-sm); }
.langtoggle {
  display: inline-flex; align-items: center; gap: 0.4em;
  background: transparent; border: 1px solid var(--hair); border-radius: var(--radius-pill);
  padding: 0.35em 0.7em; min-height: 40px;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-ink-2);
  transition: border-color var(--dur-in) var(--ease-out), color var(--dur-in) var(--ease-out);
}
.langtoggle:hover { border-color: var(--color-cenote); color: var(--color-cenote); }
.langtoggle .globe { width: 1.05em; height: 1.05em; stroke: currentColor; fill: none; }
.langtoggle b { font-weight: 700; color: var(--color-cenote); }
.nav__burger { display: none; }

@media (max-width: 900px) {
  .nav__links, .nav__cta-desktop { display: none; }
  .nav__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 1px solid var(--hair); border-radius: var(--radius-sm);
    background: transparent;
  }
  .nav__burger svg { width: 22px; height: 22px; stroke: var(--color-ink); }
  .navmenu {
    position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 55;
    background: var(--color-bg); border-bottom: 1px solid var(--hair);
    padding: var(--space-md) var(--edge) var(--space-lg);
    display: none; flex-direction: column; gap: var(--space-2xs);
    box-shadow: var(--shadow-2);
  }
  .navmenu.is-open { display: flex; }
  .navmenu a { text-decoration: none; padding: 0.85em 0; font-size: 1.1rem; border-bottom: 1px solid var(--hair-soft); color: var(--color-ink); }
  .navmenu .btn { margin-top: var(--space-sm); justify-content: center; }
}
@media (min-width: 901px) { .navmenu { display: none; } }

/* ============================================================
   FLOATING WHATSAPP — aparece pasado el hero, tap ≥44px
   ============================================================ */
.wafloat {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 70;
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.85em 1.15em; min-height: 52px;
  background: var(--color-cenote); color: var(--color-bg);
  border-radius: var(--radius-pill); text-decoration: none; font-weight: 500;
  box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(16px) scale(0.96); pointer-events: none;
  transition: opacity var(--dur-large) var(--ease-out), transform var(--dur-large) var(--ease-out), background var(--dur-out) var(--ease-in);
}
.wafloat.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.wafloat:hover { background: var(--color-cenote-hi); transform: translateY(-2px); }
.wafloat .wa { width: 1.4em; height: 1.4em; fill: currentColor; }
.wafloat__label { font-size: 0.95rem; white-space: nowrap; }
@media (max-width: 460px) { .wafloat__label { display: none; } .wafloat { padding: 0.85em; } }

/* ============================================================
   1 · SIGNATURE — "EL UMBRAL"
   ============================================================ */
.umbral { position: relative; height: 240vh; background: var(--color-ink); }
.umbral__sticky {
  position: sticky; top: 0; height: 100svh; min-height: 100svh;
  overflow: clip; display: grid; grid-template: 1fr / 1fr;
  isolation: isolate;
}
.umbral__plate { grid-area: 1 / 1; position: relative; }
.umbral__plate img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.umbral__plate--hot { z-index: 1; }
.umbral__plate--cool {
  z-index: 2; opacity: var(--pcool, 0);
  /* barrido vertical: la puerta se abre de arriba a abajo con p */
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--door), transparent calc(var(--door) + 14%));
  mask-image: linear-gradient(to bottom, #000 var(--door), transparent calc(var(--door) + 14%));
}
/* heat-haze: capa cálida con shimmer, opacidad baja a 0 con p (degrade robusto móvil) */
.umbral__haze {
  grid-area: 1 / 1; z-index: 3; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, oklch(0.647 0.106 55 / 0.10) 0 2px, transparent 2px 5px);
  mix-blend-mode: soft-light;
  opacity: var(--haze, 1);
  animation: shimmer 3.2s var(--ease-in-out) infinite alternate;
}
@keyframes shimmer { from { transform: translateY(0) scaleY(1); } to { transform: translateY(-4px) scaleY(1.04); } }
/* temperatura del mundo */
.umbral__scrim { grid-area: 1 / 1; z-index: 4; pointer-events: none; }
.umbral__scrim--sol  { background: radial-gradient(120% 90% at 70% 30%, var(--scrim-sol), transparent 65%); opacity: var(--sol, 1); }
.umbral__scrim--agua { background: radial-gradient(120% 100% at 40% 80%, var(--scrim-agua), transparent 70%); opacity: var(--agua, 0); }
/* legibilidad del texto inferior */
.umbral__grad { grid-area: 1 / 1; z-index: 5; pointer-events: none;
  background: linear-gradient(to top, oklch(0.255 0.008 61 / 0.72) 0%, oklch(0.255 0.008 61 / 0.30) 30%, transparent 58%); }

.umbral__content {
  grid-area: 1 / 1; z-index: 6; position: relative;
  display: grid; grid-template-rows: 1fr auto; align-content: end;
  padding: calc(var(--nav-h) + var(--space-md)) var(--edge) var(--space-lg);
  color: var(--color-bg); max-width: var(--maxw); margin-inline: auto; width: 100%;
}
.umbral__captions {
  align-self: start; justify-self: start; margin-top: 8vh;
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400;
  color: oklch(1 0 0 / 0.92); min-height: 2.2em;
}
.umbral__captions .cap { display: none; }
.umbral__captions .cap.is-on { display: block; }
.umbral__readout {
  align-self: end; justify-self: start; margin-bottom: var(--space-md);
  display: inline-flex; align-items: baseline; gap: 0.6em;
  font-family: var(--font-mono); letter-spacing: 0.04em;
  background: oklch(0.255 0.008 61 / 0.32); backdrop-filter: blur(4px);
  padding: 0.55em 0.9em; border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums; font-size: var(--text-sm);
}
.umbral__readout .temp { font-size: 1.6em; font-weight: 700; color: var(--color-agua); }
.umbral__readout .arrow { opacity: 0.7; }
.umbral__readout [data-where] { color: oklch(1 0 0 / 0.82); }
.umbral__readout [data-when] { display: none; }
.umbral__readout [data-where]:not([data-state="in"]) [data-when="out"] { display: inline; }
.umbral__readout [data-where][data-state="in"] [data-when="in"] { display: inline; }

.umbral__copy { max-width: 42rem; }
.umbral__eyebrow { color: var(--color-agua); }
.umbral h1 {
  font-size: var(--text-display); font-weight: 500; margin-block: var(--space-sm);
  text-wrap: balance;
}
.umbral h1 em { font-style: normal; color: var(--color-agua); }
.umbral__sub { font-size: var(--text-md); color: oklch(1 0 0 / 0.9); max-width: 40ch; }
.umbral__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.umbral__actions .btn--ghost { color: var(--color-bg); border-color: oklch(1 0 0 / 0.4); }
.umbral__actions .btn--ghost:hover { background: oklch(1 0 0 / 0.12); border-color: var(--color-bg); color: var(--color-bg); }
.umbral__zona {
  margin-top: var(--space-md); font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: oklch(1 0 0 / 0.72);
}
.scrollcue { position: absolute; bottom: var(--space-sm); left: 50%; transform: translateX(-50%); z-index: 6;
  width: 1px; height: 42px; background: linear-gradient(oklch(1 0 0 / 0.6), transparent); overflow: hidden; }
.scrollcue::after { content: ""; position: absolute; inset: 0; background: var(--color-agua);
  animation: cue 2.2s var(--ease-in-out) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }

/* Fallback estático: no-JS o reduced-motion */
.umbral__fallback { display: none; }
html:not(.has-js) .umbral { height: auto; }
html:not(.has-js) .umbral__sticky { position: static; height: auto; }
html:not(.has-js) .umbral__plate--cool { opacity: 1; -webkit-mask-image: none; mask-image: none; }

/* ============================================================
   2 · EL RETO DE LA COSTA — triad color-blocked
   ============================================================ */
.reto__intro { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-xl); align-items: end; margin-bottom: var(--space-xl); }
.reto__triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.force { display: flex; flex-direction: column; }
.force__media { position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius-md); overflow: clip; background: var(--color-surface-3); }
.force__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-large) var(--ease-out); }
.force:hover .force__media img { transform: scale(1.04); }
.force__n { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; color: var(--color-sol); margin-top: var(--space-sm); }
.force h3 { font-size: var(--text-lg); margin-top: var(--space-3xs); }
.force p { color: var(--color-ink-2); font-size: 0.95rem; margin-top: var(--space-2xs); }
.reto__contrast { margin-top: var(--space-xl); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.ficha { padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-surface); }
.ficha--bad { box-shadow: inset 3px 0 0 var(--color-sol); }
.ficha--good { box-shadow: inset 3px 0 0 var(--color-cenote); }
.ficha h4 { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-sm); }
.ficha--bad h4 { color: var(--color-sol-hot); }
.ficha--good h4 { color: var(--color-cenote); }
.ficha ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.ficha li { font-size: 0.95rem; color: var(--color-ink-2); padding-left: 1.4em; position: relative; }
.ficha li::before { position: absolute; left: 0; top: 0; }
.ficha--bad li::before { content: "×"; color: var(--color-sol-hot); font-weight: 700; }
.ficha--good li::before { content: "✓"; color: var(--color-cenote); font-weight: 700; }
.reto__foot { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between; }

/* ============================================================
   3 · SERVICIOS — bento + flagship detail
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-md); }
.svc { position: relative; border-radius: var(--radius-md); overflow: clip; background: var(--color-surface); display: flex; flex-direction: column; }
.svc--flag { grid-column: span 2; grid-row: span 2; }
.svc__media { position: relative; overflow: clip; background: var(--color-surface-3); }
.svc--flag .svc__media { aspect-ratio: 4 / 3; }
.svc:not(.svc--flag) .svc__media { aspect-ratio: 16 / 10; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-large) var(--ease-out); }
.svc:hover .svc__media img { transform: scale(1.03); }
.svc__body { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1; }
.svc__tag { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-cenote); }
.svc h3 { font-size: var(--text-lg); }
.svc p { color: var(--color-ink-2); font-size: 0.95rem; }
.svc__list { list-style: none; margin: var(--space-2xs) 0 0; padding: 0; display: grid; gap: 0.35em; }
.svc__list li { font-size: 0.9rem; color: var(--color-ink-2); padding-left: 1.1em; position: relative; }
.svc__list li::before { content: "—"; position: absolute; left: 0; color: var(--color-agua); }
.svc__spec { margin-top: auto; padding-top: var(--space-sm); display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-2xs) var(--space-md); border-top: 1px solid var(--hair-soft); }
.svc__spec dt { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-3); }
.svc__spec dd { margin: 0; font-size: 0.9rem; color: var(--color-ink); }

/* ============================================================
   4 · MARCAS — logo wall mono-ink
   ============================================================ */
.brands { text-align: center; }
.brands__note { color: var(--color-ink-2); max-width: 52ch; margin-inline: auto; }
.brands__wall { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); align-items: center; margin-top: var(--space-xl); border-block: 1px solid var(--hair); }
.brands__wall .bw { width: 100%; height: 68px; color: var(--color-ink); opacity: 0.6; transition: opacity var(--dur-in) var(--ease-out), color var(--dur-in) var(--ease-out); }
.brands__wall .bw + .bw { border-inline-start: 1px solid var(--hair-soft); }
.brands__wall .bw:hover { opacity: 1; color: var(--color-cenote); }
.brands__crit { margin-top: var(--space-lg); max-width: 60ch; margin-inline: auto; color: var(--color-ink-2); font-size: 0.95rem; }
.brands__crit b { color: var(--color-ink); font-weight: 500; }

/* ============================================================
   5 · PROCESO — horizontal timeline + cutaway
   ============================================================ */
.proceso__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.step { position: relative; padding: var(--space-md) 0 var(--space-md) var(--space-xl); border-left: 2px solid var(--hair); }
.step:last-child { border-left-color: transparent; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: var(--space-md); transform: translateX(-50%);
  width: 2.4em; height: 2.4em; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  background: var(--color-bg); color: var(--color-cenote);
  border: 2px solid var(--color-cenote); border-radius: var(--radius-pill);
}
.step h3 { font-size: var(--text-md); font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }
.step p { color: var(--color-ink-2); font-size: 0.95rem; margin-top: var(--space-3xs); }
.cutaway { position: relative; border-radius: var(--radius-lg); overflow: clip; background: var(--color-surface); box-shadow: var(--shadow-1); }
.cutaway img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cutaway__cap { padding: var(--space-sm) var(--space-md); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-ink-3); text-transform: uppercase; }
.proceso__foot { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }

/* ============================================================
   6 · POR QUÉ CÉFIRO — 2×3 icon grid + chips
   ============================================================ */
.why__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-md); }
.diff { padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-surface); display: flex; flex-direction: column; gap: var(--space-2xs); transition: transform var(--dur-in) var(--ease-out), box-shadow var(--dur-in) var(--ease-out); }
.diff:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); }
.diff__ico { width: 40px; height: 40px; color: var(--color-cenote); }
.diff__ico svg { width: 100%; height: 100%; }
.diff h3 { font-size: var(--text-md); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.diff p { color: var(--color-ink-2); font-size: 0.92rem; }
.why__chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-md); background: var(--color-surface-3); border-radius: var(--radius-md); align-items: center; }
.why__chips .lead { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-ink-3); }

/* ============================================================
   7 · COBERTURA — SVG map full-width
   ============================================================ */
.cover__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-2xl); align-items: center; }
.cover__map { border-radius: var(--radius-lg); overflow: clip; background: var(--color-surface); box-shadow: var(--shadow-1); }
.cover__map img { width: 100%; display: block; }
.cover__cities { display: grid; gap: var(--space-md); }
.city { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-sm); align-items: baseline; padding-bottom: var(--space-md); border-bottom: 1px solid var(--hair-soft); }
.city:last-child { border-bottom: 0; }
.city__dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--color-cenote); transform: translateY(-0.15em); }
.city h3 { font-size: var(--text-md); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.city p { color: var(--color-ink-2); font-size: 0.9rem; }
.city__t { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-sol); text-align: right; white-space: nowrap; }
.cover__cta { margin-top: var(--space-md); }

/* ============================================================
   8 · PLANES — comparison table
   ============================================================ */
.plans-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); }
.plans { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 0; border-radius: var(--radius-lg); overflow: clip; box-shadow: var(--shadow-1); background: var(--color-surface); }
.plans__cell { padding: var(--space-md); border-bottom: 1px solid var(--hair-soft); }
.plans__rowlabel { font-size: 0.92rem; color: var(--color-ink-2); background: var(--color-surface-3); }
.plans__col--feat { position: relative; }
.plans__col--feat.is-flag { background: oklch(0.475 0.083 189 / 0.06); }
.plans__head { display: flex; flex-direction: column; gap: var(--space-2xs); }
.plans__name { font-family: var(--font-display); font-size: var(--text-lg); }
.plans__price { font-family: var(--font-mono); font-size: var(--text-md); color: var(--color-cenote); font-variant-numeric: tabular-nums; }
.plans__price small { font-size: 0.6em; color: var(--color-ink-3); }
.plans__freq { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-3); }
.plans__flag { align-self: flex-start; font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-sol-hot); }
.plans__v { font-family: var(--font-mono); text-align: center; }
.plans__v[data-yes]::before { content: "✓"; color: var(--color-cenote); font-weight: 700; }
.plans__v[data-no]::before { content: "–"; color: var(--color-ink-3); }
.plans__v[data-txt]::before { content: attr(data-txt); font-size: 0.8rem; color: var(--color-ink); }
.plans__foot { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between; margin-top: var(--space-md); }
.plans__note { color: var(--color-ink-3); font-size: 0.9rem; max-width: 46ch; }

/* ============================================================
   9 · B2B — editorial split
   ============================================================ */
.b2b__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
.b2b__media { border-radius: var(--radius-lg); overflow: clip; box-shadow: var(--shadow-2); }
.b2b__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.b2b__list { list-style: none; margin: var(--space-md) 0; padding: 0; display: grid; gap: var(--space-md); }
.b2b__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); }
.b2b__list .n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-cenote); padding-top: 0.35em; }
.b2b__list h3 { font-size: var(--text-md); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.b2b__list p { color: var(--color-ink-2); font-size: 0.95rem; }
.b2b__seg { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-md); }
.b2b__seg span { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; padding: 0.35em 0.7em; border-radius: var(--radius-pill); background: var(--color-surface-3); color: var(--color-ink-2); }

/* ============================================================
   10 · TESTIMONIOS — scroll-snap carousel
   ============================================================ */
.testi { position: relative; }
.testi__label { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-sol); background: oklch(0.647 0.106 55 / 0.1); padding: 0.4em 0.8em; border-radius: var(--radius-pill); }
.testi__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(88%, 34rem); gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; margin-top: var(--space-lg); padding-bottom: var(--space-sm); scrollbar-width: thin; }
.quote { scroll-snap-align: start; background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); position: relative; }
.quote::before { content: "\201C"; font-family: var(--font-display); font-size: 4rem; line-height: 0.6; color: var(--color-agua); }
.quote blockquote { margin: 0; font-family: var(--font-display); font-size: var(--text-md); line-height: 1.4; color: var(--color-ink); }
.quote figcaption { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-ink-2); text-transform: uppercase; }
.quote__ctx { margin-top: auto; }

/* ============================================================
   11 · FAQ — 2-col accordion
   ============================================================ */
.faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl) var(--space-2xl); }
.faq__group h3 { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-cenote); margin-bottom: var(--space-sm); }
.acc { border-top: 1px solid var(--hair-soft); }
.acc summary { list-style: none; cursor: pointer; padding: var(--space-md) 0; display: flex; gap: var(--space-sm); align-items: baseline; justify-content: space-between; font-family: var(--font-display); font-size: var(--text-md); font-weight: 500; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .plus { flex: none; width: 1.1em; height: 1.1em; position: relative; transition: transform var(--dur-in) var(--ease-out); color: var(--color-cenote); }
.acc summary .plus::before, .acc summary .plus::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; background: currentColor; }
.acc summary .plus::after { transform: rotate(90deg); transition: transform var(--dur-in) var(--ease-out); }
.acc[open] summary .plus::after { transform: rotate(0); }
.acc__body { padding-bottom: var(--space-md); color: var(--color-ink-2); max-width: 58ch; }
.faq__foot { grid-column: 1 / -1; }

/* ============================================================
   12 · CONTACTO — form + panel split
   ============================================================ */
.contact__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-2xl); align-items: start; }
.form { display: grid; gap: var(--space-md); }
.field { display: grid; gap: var(--space-3xs); }
.field label { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-2); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--color-ink);
  background: var(--color-bg); border: 1px solid var(--hair); border-radius: var(--radius-sm);
  padding: 0.7em 0.85em; width: 100%; min-height: 48px;
  transition: border-color var(--dur-in) var(--ease-out), box-shadow var(--dur-in) var(--ease-out);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-cenote); box-shadow: 0 0 0 3px oklch(0.475 0.083 189 / 0.15); }
.field--err input, .field--err select, .field--err textarea { border-color: var(--color-sol-hot); }
.field__err { display: none; font-size: var(--text-sm); color: var(--color-sol-hot); }
.field--err .field__err { display: block; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.form__note { font-size: var(--text-sm); color: var(--color-ink-3); }
.form__success { display: none; align-items: center; gap: var(--space-md); padding: var(--space-md); background: oklch(0.475 0.083 189 / 0.08); border-radius: var(--radius-md); }
.form__success.is-on { display: flex; }
.form__success img { width: 68px; height: 68px; border-radius: var(--radius-sm); }

.panel { background: var(--color-ink); color: var(--color-bg); border-radius: var(--radius-lg); padding: var(--space-lg); display: grid; gap: var(--space-md); align-content: start; }
.panel h3 { color: var(--color-bg); font-size: var(--text-lg); }
.panel .btn--primary { background: var(--color-cenote); }
.panel__rows { display: grid; gap: var(--space-sm); }
.panel__row { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); align-items: center; }
.panel__row svg { width: 20px; height: 20px; stroke: var(--color-agua); fill: none; flex: none; }
.panel__row a, .panel__row span { color: oklch(1 0 0 / 0.88); text-decoration: none; font-size: 0.95rem; }
.panel__row a:hover { color: var(--color-agua); }
.panel__trust { display: flex; flex-wrap: wrap; gap: var(--space-2xs); padding-top: var(--space-sm); border-top: 1px solid oklch(1 0 0 / 0.14); }
.panel__trust .chip { background: oklch(0.727 0.062 185 / 0.16); color: var(--color-agua); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: var(--color-surface-3); padding-block: var(--space-2xl) var(--space-lg); }
.foot__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-xl); }
.foot__brand .isotype { width: 40px; height: 40px; }
.foot__word { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; margin-top: var(--space-2xs); }
.foot__desc { color: var(--color-ink-2); font-size: 0.92rem; max-width: 32ch; margin-top: var(--space-2xs); }
.foot__col h4 { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-ink-3); margin-bottom: var(--space-sm); }
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.foot__col a, .foot__col span { text-decoration: none; color: var(--color-ink-2); font-size: 0.92rem; }
.foot__col a:hover { color: var(--color-cenote); }
.foot__bottom { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between; margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: 1px solid var(--hair-soft); }
.foot__legal { font-size: var(--text-sm); color: var(--color-ink-3); }
.foot__portfolio { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); letter-spacing: 0.02em; }

/* ============================================================
   REVEAL — table-stakes viewport reveals (transform/opacity only)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-large) var(--ease-out), transform var(--dur-large) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 60ms; }
.reveal.d2 { transition-delay: 120ms; }
.reveal.d3 { transition-delay: 180ms; }

/* ============================================================
   CAUSTIC divider — momento secundario (luz de agua lenta)
   ============================================================ */
.caustic { height: 3px; background-image: url("../assets/img/textures/tx-01-caustica.webp"); background-size: 320px; opacity: 0.5; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .reto__intro, .proceso__grid, .cover__grid, .b2b__grid, .contact__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .why__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .svc--flag { grid-column: span 2; grid-row: auto; }
  .brands__wall { grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: var(--space-md); }
  .brands__wall .bw + .bw { border-inline-start: none; }
}
@media (max-width: 760px) {
  .reto__triad { grid-template-columns: 1fr; }
  .reto__contrast { grid-template-columns: 1fr; }
  .faq__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .plans { min-width: 580px; }
  .umbral__captions { font-size: var(--text-md); }
}
@media (max-width: 560px) {
  .why__grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .svc--flag { grid-column: auto; }
  .brands__wall { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .field--row { grid-template-columns: 1fr; }
  .reto__foot, .plans__foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 400px) {
  .foot__top { grid-template-columns: 1fr; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .umbral { height: auto; }
  .umbral__sticky { position: static; height: auto; min-height: 0; }
  .umbral__plate--cool { opacity: 1 !important; -webkit-mask-image: none; mask-image: none; }
  .umbral__haze { opacity: 0 !important; }
  .umbral__scrim--agua { opacity: 0.5 !important; }
  .reveal { opacity: 1; transform: none; }
  .scrollcue { display: none; }
}

/* Table-based plans: mobile regroups via data attributes handled in markup */