/* ==========================================================================
   Gregores One — maqueta Home
   Blanco y negro no puros. Merriweather (títulos) + Inter (texto). Todo en rem.

   Índice
   1. Tokens ............ color, tipografía, espacios, forma, movimiento, capas
   2. Base
   3. Temas ............. .theme-dark / .theme-light (fondo, texto, gris, línea)
   4. Tipografía ........ .t-h1, .t-display, .t-title, .t-h3, .t-lead, .t-label, .t-micro
   5. Piezas comunes .... .num, .toggle, .btn-x, .ulink, .pill
   6. Secciones ......... nav, dock, panel, hero, pxt, servicios, quién soy,
                          testimonios, FAQ, marca blanca, cierre, pie, WhatsApp
   7. Movimiento reducido
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* color */
  --black: #131211;
  --white: #fdfcfa;
  --off: #f5f4f1;              /* blanco al pasar el cursor */
  --paper: #e7e6e2;            /* fondo claro de sección */
  --studio: #c4b9bb;           /* gris del fondo de estudio de las fotos */
  --grey-dark: #9c9993;        /* texto secundario sobre negro */
  --grey-light: #5a5854;       /* texto secundario sobre papel */
  --line-light: #b9b8b3;       /* línea fina sobre papel */
  --line-dark: rgba(253, 252, 250, 0.14); /* línea fina sobre negro */
  --border-light: rgba(19, 18, 17, 0.9);  /* borde de tarjeta sobre papel */
  --glass: rgba(253, 252, 250, 0.1);      /* botones translúcidos sobre negro */
  --panel: #fff;               /* paneles blancos puros (animaciones, tarjetas sobre negro) */
  --ok: rgb(46, 125, 72);      /* estado correcto */
  --warn: rgb(196, 140, 40);   /* estado intermedio */
  --alert: rgb(196, 74, 58);   /* estado de alerta */

  /* familias */
  --serif: "Merriweather", Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* escala tipográfica (de mayor a menor) */
  --fs-h1: clamp(2.5rem, 9.5vw, 4.5rem);          /* H1 de todas las páginas (en escritorio, abajo) */
  --fs-display: clamp(2.5rem, 5.4vw, 6rem);       /* frase grande decorativa */
  --fs-title: clamp(2rem, 4.2vw, 4.75rem);        /* H2 de sección: el mismo en todas las páginas */
  --fs-item: clamp(1.875rem, 4.4vw, 4.5rem);      /* nombres del acordeón de servicios */
  --fs-menu: clamp(2rem, 3.9vw, 4rem);            /* nombres del panel de menú */
  --fs-stat: clamp(2.25rem, 3.6vw, 3.75rem);      /* cifras */
  --fs-quote: clamp(1.5rem, 2.8vw, 2.375rem);     /* citas de testimonios */
  --fs-title-s: clamp(1.875rem, 2.9vw, 2.875rem); /* H2 dentro de una banda junto a una tabla o panel */
  --fs-subtitle: clamp(1.5rem, 2.4vw, 2.25rem);   /* frases destacadas y enlaces grandes del panel */
  --fs-h3: clamp(1.375rem, 1.9vw, 1.75rem);       /* subtítulos: testimonios, preguntas, columnas del pie */
  --fs-lead: clamp(1.25rem, 1.6vw, 1.5rem);       /* texto principal: quién soy, respuestas */
  --fs-body-l: 1.125rem;                          /* 18 px: pie, ventanas, contacto */
  --fs-body: 1.0625rem;                           /* 17 px: texto base */
  --fs-small: 0.9375rem;                          /* 15 px: notas, etiquetas de cifras, cargos */
  --fs-label: 0.8125rem;                          /* 13 px: versalitas de botones, píldoras, numeración */
  --fs-micro: 0.75rem;                            /* 12 px: rótulos */
  --fs-nano: 0.6875rem;                           /* 11 px: distintivo «Urgencias» */

  --lh-display: 1;
  --lh-title: 1.12;
  --lh-item: 1.05;
  --lh-quote: 1.22;
  --lh-h3: 1.2;
  --lh-lead: 1.55;
  --lh-body: 1.6;

  --track-display: -0.025em;
  --track-h3: -0.02em;
  --track-caps: 0.06em;        /* versalitas */
  --track-caps-wide: 0.1em;

  /* iconos (Phosphor) */
  --icon-xs: 0.875rem;
  --icon-s: 1rem;
  --icon-m: 1.25rem;
  --icon-l: 1.75rem;
  --icon-xl: 2.25rem;
  --icon-2xl: 2.75rem;

  /* espacios (múltiplos de 4 px) */
  --s-4: 0.25rem;
  --s-8: 0.5rem;
  --s-12: 0.75rem;
  --s-16: 1rem;
  --s-20: 1.25rem;
  --s-24: 1.5rem;
  --s-32: 2rem;
  --s-40: 2.5rem;
  --s-48: 3rem;
  --s-64: 4rem;

  /* ritmo de página */
  --gutter: clamp(1.25rem, 2.8vw, 3.5rem);        /* margen lateral */
  --section-top: clamp(3rem, 8vh, 5rem);          /* aire bajo la banda pixelada */
  --section-bottom: clamp(4rem, 10vh, 6rem);
  --title-gap: clamp(2.5rem, 7vh, 4.5rem);        /* título de sección → contenido */
  --grid-gap: 1.5rem;                             /* hueco de la retícula de 12 columnas */
  --num-col: 2.25rem;                             /* columna de la numeración 01–05 */
  --pxt-h: clamp(4.25rem, 11vh, 8rem);            /* alto de la banda pixelada */
  --bar-clear: 6rem;                              /* aire para la barra flotante en secciones fijadas */
  --pad-card: clamp(1.25rem, 2.5vw, 2rem);        /* relleno de tarjetas */
  --pad-panel: clamp(1.5rem, 3vw, 2.5rem);        /* relleno de paneles y formularios */
  --gap-block: clamp(2rem, 4vw, 3rem);            /* entre bloques dentro de una sección */
  --gap-cta: clamp(2.5rem, 5vw, 3.5rem);          /* aire antes de un botón que cierra un bloque */

  /* forma */
  --radius-s: 0.25rem;
  --radius-btn: 0.5rem;
  --radius-m: 0.75rem;
  --radius: 1rem;
  --radius-l: 1.5rem;
  --radius-pill: 62.5rem;

  /* movimiento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-swift: cubic-bezier(0.32, 0.72, 0, 1);

  /* capas */
  --z-content: 1;
  --z-dock: 20;
  --z-wa: 25;
  --z-sheet: 30;
}
@media (min-width: 64rem) {
  :root {
    --fs-h1: clamp(2.75rem, 4.6vw, 5.75rem);
    --fs-stat: clamp(2rem, 2.9vw, 3.25rem);
    --fs-lead: clamp(1.25rem, 1.45vw, 1.4375rem);
    --num-col: 4rem;
  }
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; scrollbar-color: #5c5a56 var(--black); }
body {
  margin: 0; overflow-x: clip;
  font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body);
  background: var(--black); color: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em { font-style: italic; }

::selection { background: #6b6862; color: var(--white); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 0.25rem; border-radius: var(--radius-s); }

.skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 99;
  padding: var(--s-12) var(--s-16); border-radius: var(--radius-btn);
  background: var(--white); color: var(--black);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: var(--s-16); }

/* ==========================================================================
   3. TEMAS: cada bloque declara su fondo y sus grises; las piezas usan las variables
   ========================================================================== */
.theme-dark  { --fg: var(--white); --bg: var(--black); --muted: var(--grey-dark);  --rule: var(--line-dark); }
.theme-light { --fg: var(--black); --bg: var(--paper); --muted: var(--grey-light); --rule: var(--line-light); }
.theme-dark, .theme-light { background: var(--bg); color: var(--fg); }

/* ==========================================================================
   4. TIPOGRAFÍA
   Títulos en Merriweather 400; la cursiva (em) en 300 y en gris del tema.
   ========================================================================== */
.t-display, .t-title, .t-h3, .t-item {
  font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 144;
}
.t-h1 em, .t-display em, .t-title em, .t-h3 em { font-weight: 300; color: var(--muted); }

.t-display {
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: var(--track-display); word-spacing: 0.06em;
}
.t-title {
  font-size: var(--fs-title); line-height: var(--lh-title);
  letter-spacing: var(--track-display); word-spacing: 0.06em;
  text-wrap: balance;
}
.t-item { font-size: var(--fs-item); line-height: var(--lh-item); letter-spacing: var(--track-display); }
/* H1: Merriweather fina, igual en la home y en las interiores */
.t-h1 {
  font-family: var(--serif); font-size: var(--fs-h1); font-weight: 300; font-variation-settings: "opsz" 144;
  line-height: 1.04; letter-spacing: -0.02em; word-spacing: 0.04em; text-wrap: balance;
}
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--track-h3); }

.t-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--fg); }
.t-lead strong { font-weight: 650; }

/* versalitas: botones, píldoras, contadores */
.t-label { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; }
/* rótulos pequeños en gris */
.t-micro { font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-caps); line-height: 1.35; text-transform: uppercase; color: var(--muted); }

/* ==========================================================================
   5. PIEZAS COMUNES
   ========================================================================== */
/* numeración 01–05 (servicios, FAQ, panel) */
.num { font-size: var(--fs-label); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* signo +/− que gira al abrir (acordeón y FAQ) */
.toggle { position: relative; width: 1.5rem; height: 1.5rem; justify-self: end; }
.toggle::before, .toggle::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor;
  transition: transform 0.5s var(--ease-swift);
}
.toggle::after { transform: rotate(90deg); }
.is-open > * > .toggle::after, [open] > * > .toggle::after { transform: rotate(0deg); }

/* botón cuadrado translúcido con dos trazos: × (cerrar) o = (menú) */
.btn-x {
  position: relative; width: 2.4rem; height: 2.4rem; border-radius: var(--radius-btn);
  background: var(--glass);
  transition: background-color 0.3s var(--ease-out);
}
.btn-x:hover { background: rgba(253, 252, 250, 0.2); }
.btn-x span { position: absolute; left: 50%; top: 50%; width: 0.95rem; height: 1.5px; background: currentColor; }
.btn-x span:first-child { transform: translate(-50%, 0) rotate(45deg); }
.btn-x span:last-child { transform: translate(-50%, 0) rotate(-45deg); }

/* subrayado que crece al pasar el cursor (enlace suelto o todos los de un bloque) */
.ulink, .ulinks a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.5s var(--ease-out);
}
.ulink:hover, .ulinks a:hover { background-size: 100% 1px; }

/* enlace con flecha y línea fija debajo */
.arrow-link {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--s-8);
  padding-bottom: 0.2rem; border-bottom: 1px solid currentColor;
  font-weight: 600; text-decoration: none;
}
.arrow-link i { transition: transform 0.5s var(--ease-swift); }
.arrow-link:hover i { transform: translateX(var(--s-4)); }

/* botón de contorno (píldora) */
.pill {
  justify-self: start;
  display: inline-flex; align-items: center; gap: var(--s-12);
  padding: var(--s-16) var(--s-24); border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.pill i { font-size: var(--icon-s); transition: transform 0.5s var(--ease-swift); }
.pill:hover { background: var(--fg); color: var(--bg); }
.pill:hover i { transform: translateX(var(--s-4)); }


@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }
@keyframes pop { to { scale: 1; opacity: 1; } }
@keyframes fade { to { opacity: 1; } }

/* ==========================================================================
   6. SECCIONES
   ========================================================================== */

/* ---------- NAV: barra superior (3 enlaces + CTA) ---------- */
.nav {
  position: relative; z-index: var(--z-content);
  display: flex; align-items: center; gap: var(--s-32);
  height: 5.5rem; padding-inline: var(--gutter);
}
.nav__brand img { width: clamp(11rem, 14vw, 15rem); }
.nav__links {
  display: none; align-items: center; gap: clamp(0.25rem, 0.8vw, 0.75rem); margin-left: auto;
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
/* cada enlace: píldora de cristal al pasar el cursor */
.nav__links a, .nav__trigger {
  display: inline-flex; align-items: center; gap: var(--s-8);
  padding: var(--s-12) var(--s-20); border-radius: var(--radius-pill); white-space: nowrap; text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.nav__links a:hover, .nav__trigger:hover, .nav__trigger[aria-expanded="true"],
.nav__links a:focus-visible, .nav__trigger:focus-visible {
  background: rgba(253, 252, 250, 0.08);
  border-color: rgba(253, 252, 250, 0.18);
  box-shadow: inset 0 1px 0 rgba(253, 252, 250, 0.14), 0 0.5rem 1.5rem -0.75rem rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(0.75rem) saturate(150%);
          backdrop-filter: blur(0.75rem) saturate(150%);
}
.nav__trigger { font: inherit; letter-spacing: inherit; text-transform: inherit; }
.nav__trigger i { font-size: var(--icon-xs); transition: transform 0.5s var(--ease-swift); }
.nav__trigger:hover i, .nav__trigger[aria-expanded="true"] i { transform: rotate(90deg); }

/* botón blanco «Contacto» (cabecera y barra flotante) */
.nav__cta, .dock__cta {
  display: none;
  padding: var(--s-12) var(--s-20); border-radius: var(--radius-btn);
  background: var(--white); color: var(--black);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.nav__cta { font-size: var(--fs-small); } /* a la altura de los enlaces del menú */
.nav__cta:hover, .dock__cta:hover { background: #d8d8d5; }
.nav__cta:active, .dock__cta:active { transform: scale(0.97); }

.nav__menu {
  margin-left: auto;
  padding: 0.55rem 1.1rem; border-radius: var(--radius-btn);
  border: 1px solid rgba(253, 252, 250, 0.35);
  font-size: var(--fs-small); font-weight: 500;
}
@media (min-width: 64rem) {
  .nav__links, .nav__cta { display: flex; }
  .nav__menu { display: none; }
}

/* ---------- DOCK: barra flotante al salir del hero ---------- */
.dock {
  position: fixed; top: var(--s-16); left: 50%; z-index: var(--z-dock);
  display: flex; align-items: center; gap: var(--s-16);
  padding: 0.4rem 0.4rem 0.4rem 1.1rem;
  border-radius: var(--radius-m);
  background: rgba(19, 18, 17, 0.84);
  border: 1px solid rgba(253, 252, 250, 0.1);
  -webkit-backdrop-filter: blur(0.875rem) saturate(140%);
          backdrop-filter: blur(0.875rem) saturate(140%);
  box-shadow: 0 0.875rem 2.125rem -0.875rem rgba(19, 18, 17, 0.5);
  color: var(--white);
  transform: translate(-50%, -170%);
  transition: transform 0.7s var(--ease-swift);
}
.dock.is-shown { transform: translate(-50%, 0); }
.dock { width: max-content; }
.dock__brand img { width: 8.5rem; }
.dock > * { flex-shrink: 0; }
@media (max-width: 47.99rem) {
  .dock { left: var(--gutter); right: var(--gutter); width: auto; justify-content: space-between; gap: var(--s-12); padding: 0.45rem 0.45rem 0.45rem var(--s-16); transform: translateY(-170%); }
  .dock.is-shown { transform: none; }
  .dock__brand { margin-right: auto; }
  .dock__brand img { width: clamp(9rem, 38vw, 10.5rem); }
  .dock__cta { padding: var(--s-12) var(--s-16); }
  .dock__menu { width: 2.75rem; height: 2.75rem; }
  .dock__menu span { width: 1.1rem; }
}
.dock__cta { display: inline-flex; }
/* botón de menú: los dos trazos en paralelo (=) en vez de en aspa */
.dock__menu span:first-child { transform: translate(-50%, -0.1875rem); }
.dock__menu span:last-child { transform: translate(-50%, 0.1875rem); }

/* ---------- PANEL de menú a pantalla completa ---------- */
.panel {
  position: fixed; inset: 0; z-index: var(--z-sheet);
  display: flex; flex-direction: column;
  padding: 0 var(--gutter) var(--s-32);
  overflow-y: auto; overscroll-behavior: contain;
  background: rgba(19, 18, 17, 0.94);
  -webkit-backdrop-filter: blur(1.5rem);
          backdrop-filter: blur(1.5rem);
  opacity: 0; transition: opacity 0.45s var(--ease-out);
}
.panel[hidden] { display: none; }
.panel.is-open { opacity: 1; }
.panel__top { display: flex; align-items: center; justify-content: space-between; min-height: 5.5rem; } /* = altura de .nav */
.panel__top img { width: clamp(11rem, 14vw, 15rem); } /* = logo de .nav */
.panel__close { width: 2.75rem; height: 2.75rem; }
.panel__close span { width: 1.1rem; }

.panel__body { flex: 1; display: grid; align-content: center; gap: var(--s-48); padding-block: var(--s-24) var(--s-8); }
.panel__label { margin-bottom: var(--s-20); }

/* servicios numerados, como el acordeón */
.panel__list { border-bottom: 1px solid var(--rule); }
.panel__list li { border-top: 1px solid var(--rule); }
.panel__list a {
  display: grid; grid-template-columns: var(--num-col) 1fr; align-items: baseline; column-gap: var(--s-16);
  padding-block: clamp(0.75rem, 1.6vh, 1.25rem);
  text-decoration: none;
  transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-swift);
}
.panel__name {
  font-family: var(--serif); font-size: var(--fs-menu);
  font-weight: 400; font-variation-settings: "opsz" 144;
  line-height: var(--lh-item); letter-spacing: var(--track-display);
}
.panel__desc { grid-column: 2; margin-top: 0.4rem; font-size: var(--fs-small); color: var(--muted); }
@media (hover: hover) {
  .panel__list:hover a { opacity: 0.35; }
  .panel__list a:hover { opacity: 1; transform: translateX(var(--s-12)); }
}

/* columna lateral: más páginas + contacto */
.panel__side { display: grid; gap: var(--s-40); align-content: end; }
.panel__more { display: grid; gap: 0.35rem; }
.panel__more a {
  font-family: var(--serif); font-size: var(--fs-subtitle);
  font-weight: 300; font-variation-settings: "opsz" 144; letter-spacing: var(--track-h3); text-decoration: none;
  transition: opacity 0.3s var(--ease-out);
}
.panel__more a:hover { opacity: 0.6; }
.panel__contact { display: grid; justify-items: start; gap: 0.35rem; font-size: var(--fs-body-l); }

/* entrada escalonada */
.panel__list li, .panel__more li, .panel__contact {
  opacity: 0; transform: translateY(1.5rem);
  transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: calc(0.08s + var(--i, 0) * 0.05s);
}
.panel.is-open .panel__list li, .panel.is-open .panel__more li, .panel.is-open .panel__contact { opacity: 1; transform: none; }

@media (min-width: 64rem) {
  .panel__body { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); column-gap: clamp(3rem, 7vw, 8rem); align-items: end; }
  .panel__list a { grid-template-columns: var(--num-col) minmax(0, 1fr) minmax(0, 15rem); }
  .panel__name { white-space: nowrap; }
  .panel__desc { grid-column: 3; margin-top: 0; align-self: center; }
}
@media (max-width: 47.99rem) { .panel__desc { display: none; } } /* en móvil, solo nombres */

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid; grid-template-rows: auto 1fr auto;
}
.hero__stage {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-20); align-items: center;
  padding: var(--s-24) var(--gutter) 0;
}
/* titular del hero: Merriweather 300, más ligero que los títulos de sección */
.hero__big {
  font-family: var(--serif); font-weight: 300; font-variation-settings: "opsz" 144;
  line-height: 1.04; letter-spacing: -0.02em;
}
.hero__title {
  position: relative; z-index: var(--z-content);
  grid-column: 1 / -1;
}

.bracket {
  position: relative; z-index: var(--z-content);
  padding-left: 1.4rem; max-width: 26ch;
  font-size: var(--fs-small); font-weight: 500; line-height: 1.45;
}
.bracket::before { content: "["; position: absolute; left: 0; top: -0.05em; font-weight: 300; color: var(--muted); }

/* retrato recortado delante del círculo; apoya en la barra inferior */
.hero__figure {
  position: relative;
  grid-column: 1 / -1;
  display: grid; justify-items: center; align-items: end;
  margin-inline: calc(var(--gutter) * -1);
  overflow: hidden; /* el círculo no desborda en móvil */
}
.hero__circle {
  position: absolute; left: 50%; top: 50%;
  width: min(84vw, 26rem); aspect-ratio: 1; border-radius: 50%;
  background: var(--studio);
  translate: -50% -50%;
}
.hero__photo { position: relative; width: min(92vw, 30rem); height: auto; }

/* frase grande: solo escritorio, es un refuerzo visual */
.hero__big { display: none; }

.hero__bar {
  position: relative; z-index: var(--z-content);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-12) var(--s-32);
  margin-inline: var(--gutter);
  padding-block: 1.1rem var(--s-24);
  border-top: 1px solid var(--rule);
  background: var(--bg);
}
.hero__bar-b { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 47.99rem) {
  .hero__bar { flex-direction: column; align-items: center; text-align: center; }
  .hero__bar-b { margin-left: 0; text-align: center; }
}

@media (max-width: 63.99rem) {
  .hero__b1 { grid-column: 1 / -1; grid-row: 2; }
  .hero__b2 { grid-column: 1 / -1; grid-row: 3; }
  .hero__cta { grid-column: 1 / -1; grid-row: 4; }
  .hero__figure { grid-row: 5; }
}

/* escritorio: titular + botón | retrato | frase grande + textos flotantes */
@media (min-width: 64rem) {
  .hero__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(1rem, 2vw, 2.5rem); row-gap: 0;
    align-items: stretch;
    padding-top: var(--s-8);
  }
  .hero__title {
    grid-column: 1; grid-row: 1; align-self: start;
    font-size: calc(var(--fs-h1) * 0.88); /* el H1 de la home es largo: un punto menos que el resto */
    text-indent: 18%;
    margin-top: clamp(1rem, 4vh, 3rem);
  }
  .hero__cta { grid-column: 1; grid-row: 2; align-self: start; margin-top: clamp(1.5rem, 5vh, 3.5rem); }
  .hero__figure {
    grid-column: 2; grid-row: 1 / 3; align-self: end;
    margin-inline: 0; overflow: visible;
  }
  .hero__circle { width: min(34vw, 68dvh); top: 48%; }
  .hero__photo { width: auto; height: min(calc(100dvh - 10rem), 52rem, 48vw); max-width: none; } /* 48vw: el portátil no invade la columna derecha */
  .hero__big {
    display: block; grid-column: 3; grid-row: 1; align-self: start;
    margin-top: clamp(1rem, 4vh, 3rem);
    font-size: var(--fs-title-s); /* frase de dolor: acompaña al H1, no compite con él */
  }
  .hero__big em { display: block; color: var(--muted); }
  /* a la derecha del portátil, que sobresale de la columna central */
  .hero__b1, .hero__b2 { grid-column: 3; grid-row: 2; align-self: end; margin-left: 10vw; }
  .hero__b1 { margin-bottom: 7rem; }
  .hero__b2 { margin-bottom: var(--s-40); }
  .hero__bar { display: grid; grid-template-columns: repeat(20, 1fr); column-gap: 0; }
  .hero__bar-a { grid-column: 1 / 8; }
  .hero__bar-b { grid-column: 13 / -1; }
}

/* entrada del hero */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__title { transform: translateY(0.3em); filter: blur(0.5rem); animation: rise 1.1s var(--ease-out) 0.15s forwards; } /* sin opacidad 0: es candidato a LCP */
  .js .hero__title em { opacity: 0; animation: fade 1s var(--ease-out) 0.6s forwards; }
  .js .hero__circle { scale: 0.6; opacity: 0; animation: pop 1.3s var(--ease-swift) 0.1s forwards; }
  .js .hero__photo { transform: translateY(6%); animation: rise 1.4s var(--ease-out) 0.3s forwards; } /* sin opacidad 0: es el LCP */
  .js .hero__big { opacity: 0; transform: translateY(0.3em); animation: rise 1.1s var(--ease-out) 0.55s forwards; }
  .js .hero__cta, .js .bracket, .js .hero__bar { opacity: 0; animation: fade 1s var(--ease-out) 0.85s forwards; }
}

/* ---------- TRANSICIÓN PIXELADA ENTRE SECCIONES ---------- */
.pxt {
  --from: var(--black); --to: var(--paper);
  display: grid;
  height: var(--pxt-h);
  background: linear-gradient(var(--from) 50%, var(--to) 50%);
  margin-block: -1px;
}
.pxt--to-dark { --from: var(--paper); --to: var(--black); }
.js .pxt { background: var(--from); }
.pxt i { background: var(--to); opacity: 0; }
.pxt i.on { opacity: 1; box-shadow: 0 0 0 0.75px var(--to); }

/* ---------- SERVICIOS: acordeón (se abre al hacer clic) ---------- */
.services {
  position: relative; /* sin z-index: los trazos del fondo quedan detrás de las tarjetas */
  padding: clamp(0.5rem, 2vh, 1.5rem) var(--gutter) var(--section-bottom); /* la banda pixelada ya da el aire de arriba */
}
.services__head { margin-bottom: var(--title-gap); }
.services__title em { display: block; } /* dos líneas: pregunta | a quién */

/* globo decorativo junto al título de servicios: se ve hasta un poco por debajo de España y se corta
   justo donde empieza el acordeón (el JS calcula --globe-top y --globe-cut); solo en escritorio */
.services__globe { display: none; }
@media (min-width: 64rem) {
  .services__globe {
    --globe-size: min(44rem, 46vw);
    display: block; position: absolute; z-index: 0; right: var(--gutter);
    top: var(--globe-top, 0px); width: var(--globe-size); height: var(--globe-cut, calc(var(--globe-size) * 0.5));
    overflow: hidden; pointer-events: none;
  }
  .services__globe canvas { display: block; width: var(--globe-size); height: var(--globe-size); opacity: 0; transition: opacity 1.2s var(--ease-out); contain: layout paint size; }
  .services__globe canvas.is-on { opacity: 1; }
}
.services__head, .svc, .services__local { position: relative; z-index: 1; } /* por delante del globo */

.svc { --svc-pad: clamp(1.5rem, 2.8vw, 2.5rem); display: grid; gap: var(--s-12); } /* mismo aire arriba y abajo */
.svc__item {
  padding-inline: clamp(1.25rem, 3vw, 3rem); /* fijo en ambos estados: el fondo negro no desplaza el texto */
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--bg);                     /* tapa los trazos del fondo */
  transition: background-color 0.5s var(--ease-swift), color 0.5s var(--ease-swift), opacity 0.4s var(--ease-out), filter 0.4s var(--ease-out);
}
/* abierto: se invierte a tema oscuro */
.svc__item.is-open { --fg: var(--white); --bg: var(--black); --muted: var(--grey-dark); --rule: var(--line-dark); color: var(--fg); }
.svc__head {
  display: grid; grid-template-columns: var(--num-col) 1fr 1.5rem; align-items: center; gap: var(--s-16);
  width: 100%; padding-block: var(--svc-pad);
  text-align: left; cursor: pointer;
}
.svc__num { align-self: start; padding-top: 0.9em; }
.svc__name {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8) var(--s-20);
  transition: transform 0.6s var(--ease-swift);
}
.svc__item:not(.is-open) .svc__head:hover .svc__name { transform: translateX(0.6rem); }

.svc__urgent {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: var(--s-4) var(--s-12); border-radius: var(--radius-pill);
  background: var(--black); color: var(--white);
  font-family: var(--sans); font-size: var(--fs-nano); font-weight: 600; letter-spacing: var(--track-caps-wide); line-height: 1; text-transform: uppercase;
}
.svc__urgent i { font-size: var(--icon-s); }
.svc__item.is-open .svc__urgent { background: var(--white); color: var(--black); }

.svc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s var(--ease-swift); }
.svc__item.is-open .svc__panel { grid-template-rows: 1fr; }
.svc__inner { overflow: hidden; min-height: 0; display: grid; gap: var(--s-20); padding-left: calc(var(--num-col) + var(--s-16)); }
.svc__inner > * { opacity: 0; transform: translateY(0.75rem); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }
.svc__item.is-open .svc__inner > * { opacity: 1; transform: none; transition-delay: 0.12s; }
.svc__item.is-open .svc__inner > *:nth-child(2) { transition-delay: 0.18s; }
.svc__item.is-open .svc__inner > *:nth-child(3) { transition-delay: 0.24s; }
.svc__inner > :last-child { margin-bottom: var(--svc-pad); }
.svc__desc { color: var(--muted); }

/* etiquetas de cada servicio */
.pills { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.pills li { padding: var(--s-12) var(--s-20); border-radius: var(--radius-pill); border: 1px solid var(--rule); line-height: 1; }
/* entrada: cada etiqueta cae desde arriba y rebota al posarse, en cascada (--i lo pone main.js) */
.svc__inner > .pills { opacity: 1; transform: none; } /* anima cada etiqueta, no la lista */
.svc__item.is-open .pills li { animation: pill-drop 0.9s both; animation-delay: calc(0.2s + var(--i, 0) * 0.07s); }
@keyframes pill-drop {
  0%   { opacity: 0; transform: translateY(-160%); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); } /* cae acelerando */
  45%  { opacity: 1; transform: translateY(0);     animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); } /* toca suelo */
  65%  { transform: translateY(-22%);               animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); } /* 1.er bote */
  80%  { transform: translateY(0);                  animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  90%  { transform: translateY(-7%);                animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); } /* 2.º bote */
  100% { opacity: 1; transform: translateY(0); }
}

/* con un servicio abierto, las demás tarjetas se atenúan y desenfocan; al pasar por encima vuelven nítidas */
.is-svc-focus .svc__item:not(.is-open):not(:hover) { opacity: 0.5; filter: blur(0.1875rem); }

.services__local { margin-top: var(--s-32); font-size: var(--fs-small); color: var(--muted); }
.services__local a { color: var(--fg); font-weight: 600; }

@media (max-width: 63.99rem) {
  .svc__head { grid-template-columns: 1fr 1.5rem; row-gap: var(--s-8); }
  .svc__num { grid-column: 1 / -1; padding-top: 0; }
  .svc__inner { padding-left: 0; }
}
@media (min-width: 64rem) {
  .svc__head { grid-template-columns: var(--num-col) 1fr 2rem; }
  .svc__inner { grid-template-columns: repeat(12, 1fr); column-gap: var(--grid-gap); align-items: start; padding-left: calc(var(--num-col) + var(--s-16)); }
  .svc__desc { grid-column: 1 / 6; grid-row: 1; }
  .svc__link { grid-column: 1 / 6; grid-row: 2; margin-bottom: var(--svc-pad); } /* abajo del todo en escritorio */
  .pills { grid-column: 7 / -1; grid-row: 1 / 3; }
}

/* ---------- QUIÉN SOY: imagen | texto | testimonios ---------- */
.about__stage {
  display: grid; gap: var(--s-48);
  padding: var(--section-top) var(--gutter) var(--section-bottom);
}
.about__title { max-width: 11ch; }
.about__title em { padding-bottom: 0.08em; }
.about__photo {
  position: relative;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  width: min(100%, 32rem);
}
.about__photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%;
  border-radius: var(--radius);
}
.js .about__photo[data-reveal] img { clip-path: inset(14% 0 0 0 round var(--radius)); transition: clip-path 1.3s var(--ease-swift); }
.js .about__photo.is-in img { clip-path: inset(0 0 0 0 round var(--radius)); }

/* sello giratorio sobre la foto */
.badge {
  position: absolute; top: -2.75rem; right: -2.25rem;
  width: clamp(6.5rem, 8vw, 8rem); height: auto;
}
.badge__ring { transform-box: view-box; transform-origin: 50% 50%; animation: spin 22s linear infinite; } /* gira el texto; la G queda quieta */
.badge circle { fill: var(--black); }
.badge text {
  fill: var(--white);
  font-family: var(--sans); font-size: 12.5px; /* unidades del viewBox del SVG, no px de pantalla */
  font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase;
}
@media (max-width: 47.99rem) { .badge { right: var(--s-12); } }

.about__right { display: grid; gap: clamp(2.5rem, 5vh, 3.5rem); align-content: start; }
.about__copy { display: grid; gap: var(--s-24); }
/* cada párrafo se enciende al leerlo (--a lo pone main.js) */
.js .about__copy p { opacity: calc(0.2 + 0.8 * var(--a, 0)); transition: opacity 0.25s linear; }

/* cifras */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-20); }
.stats > div {
  position: relative;
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s-12);
  padding-top: var(--s-16); border-top: 1px solid var(--rule);
}
.stats > div::before { content: ""; position: absolute; top: -1px; left: 0; width: 2rem; height: 2px; background: var(--fg); } /* acento */
.stats dd {
  display: flex; align-items: baseline; gap: 0.05em;
  font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 144;
  font-size: var(--fs-stat); line-height: 1; letter-spacing: -0.035em;
  font-variant-numeric: lining-nums;
}
.stats__plus { font-weight: 300; font-size: 0.6em; color: var(--muted); transform: translateY(-0.55em); }
.stats dt { font-size: var(--fs-small); line-height: 1.35; color: var(--muted); text-wrap: balance; }

.about__voices-title { margin-bottom: clamp(2.5rem, 5vh, 3.5rem); }

@media (min-width: 56rem) and (max-width: 63.99rem) {
  .about__stage { grid-template-columns: repeat(12, 1fr); column-gap: var(--grid-gap); }
  .about__left { grid-column: 1 / 6; }
  .about__right { grid-column: 7 / -1; }
  .about__voices { grid-column: 1 / -1; }
  .about__photo { width: min(88%, 34rem); }
}
/* escritorio: tres columnas fijadas en pantalla mientras pasa la primera tarjeta */
@media (min-width: 64rem) {
  .about__stage {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: clamp(2rem, 3.5vw, 4rem); align-items: center;
    padding-block: var(--bar-clear) var(--s-48); /* deja sitio a la barra flotante */
  }
  .about__pin.is-pinned { height: calc(100svh + 70svh); }
  .is-pinned .about__stage { position: sticky; top: 0; height: 100svh; }
  .about__photo { width: min(100%, calc((100svh - 22rem) * 0.8)); margin-top: clamp(1.5rem, 3vh, 2.5rem); }
  .about__right { gap: clamp(1.75rem, 3.5vh, 2.5rem); }
  .about__copy { gap: var(--s-16); }
  .about__voices .voices__deck.is-deck { height: min(27rem, 58svh); }
  .about__voices .vcard { padding: clamp(1.5rem, 2.2vw, 2.25rem); gap: var(--s-20); }
  .about__voices .vcard__quote p { font-size: var(--fs-lead); }
}

/* ---------- TESTIMONIOS: mazo de tarjetas ---------- */
/* sin JS: lista de tarjetas */
.voices__deck { display: grid; gap: var(--s-16); max-width: 46rem; margin-inline: auto; }
.vcard {
  display: flex; flex-direction: column; gap: 1.75rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--radius);
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(19, 18, 17, 0.45);
}
.vcard__quote p {
  font-family: var(--serif); font-size: var(--fs-quote);
  font-weight: 300; font-variation-settings: "opsz" 144;
  line-height: var(--lh-quote); letter-spacing: var(--track-h3); text-wrap: pretty;
}
.vcard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-12) var(--s-16); margin-top: auto; }
.vcard__person { display: flex; align-items: center; gap: var(--s-16); }
.vcard__avatar { flex-shrink: 0; width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; }
.vcard__who { display: grid; gap: 0.15rem; font-size: var(--fs-body-l); white-space: nowrap; }
.vcard__who strong { font-weight: 600; }
.vcard__who span { font-size: var(--fs-small); color: var(--muted); }
.vcard__more {
  display: inline-flex; align-items: center; gap: var(--s-8);
  flex-shrink: 0; margin-left: auto; white-space: nowrap; /* siempre a la derecha, también si baja de línea */
  padding: var(--s-12) var(--s-20); border-radius: var(--radius-pill);
  border: 1px solid var(--rule);
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.vcard__more:hover { background: var(--fg); color: var(--bg); }

/* mazo: tarjetas apiladas */
.voices__deck.is-deck { display: block; position: relative; width: 100%; height: min(30rem, 72svh); }
.is-deck .vcard { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 100%; }

/* flechas: del segundo testimonio en adelante */
.voices__nav { display: flex; align-items: center; justify-content: center; gap: var(--s-16); margin-top: 4.25rem; } /* libra las tarjetas de debajo del mazo */
.voices__nav[hidden] { display: none; }
.voices__arrow, .arrow-btn {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid var(--rule); color: var(--fg);
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}
.voices__arrow i, .arrow-btn i { font-size: var(--fs-body-l); }
.voices__arrow:hover:not(:disabled), .arrow-btn:hover:not(:disabled) { background: var(--fg); color: var(--bg); }
.voices__arrow:disabled, .arrow-btn:disabled { opacity: 0.3; cursor: default; }
.voices__count { min-width: 4.5rem; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.voices__count b { color: var(--fg); font-weight: 600; }

/* móvil: el mazo tiene su propio recorrido de scroll */
.voices__scroll.is-scroll { height: calc(100svh + 70svh); }
.is-scroll .voices__sticky {
  position: sticky; top: 0; height: 100svh;
  display: grid; grid-template-rows: auto auto auto; place-items: center; align-content: start; gap: var(--s-24);
  padding-block: 5.5rem var(--s-32); /* deja sitio a la barra flotante */
}
.is-scroll .about__voices-title { justify-self: stretch; margin-bottom: 0; }
.is-scroll .voices__nav { margin-top: var(--s-48); }

/* texto completo en ventana */
.vdialog {
  width: min(44rem, calc(100% - 2rem)); max-height: min(85svh, 50rem);
  padding: clamp(1.75rem, 4vw, 3rem); border: 0; border-radius: var(--radius);
}
.vdialog::backdrop { background: rgba(19, 18, 17, 0.6); -webkit-backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem); }
.vdialog[open] { display: grid; gap: 1.75rem; }
.vdialog__text { display: grid; gap: var(--s-16); font-size: var(--fs-body-l); line-height: 1.65; color: rgba(253, 252, 250, 0.86); }
.vdialog__close { position: absolute; top: var(--s-16); right: var(--s-16); }

/* ---------- PREGUNTAS FRECUENTES ---------- */
.faq {
  display: grid; gap: clamp(2rem, 5vh, 3rem);
  padding: var(--section-top) var(--gutter) var(--section-bottom);
}
.faq__list { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  display: grid; grid-template-columns: 2.25rem 1fr 1.5rem; align-items: start; gap: var(--s-16);
  padding-block: var(--pad-card);
  cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus:not(:focus-visible) { outline: none; }
.faq__num { padding-top: 0.75em; line-height: 1; } /* centrado con la primera línea de la pregunta */
.faq__text { transition: transform 0.6s var(--ease-swift); }
.faq__q:hover .faq__text { transform: translateX(var(--s-8)); }
.faq__q .toggle { margin-top: var(--s-4); }
.faq__a {
  display: grid; gap: var(--s-16);                /* a todo el ancho de la columna */
  padding: 0 calc(1.5rem + var(--s-16)) var(--pad-panel) calc(2.25rem + var(--s-16));
}
.faq__a ul { display: grid; gap: 0.6rem; padding-left: 1.1rem; list-style: square; }
@media (max-width: 47.99rem) {
  .faq__q { grid-template-columns: 1fr 1.5rem; row-gap: var(--s-8); }
  .faq__num { grid-column: 1 / -1; padding-top: 0; }
  .faq__a { padding-inline: 0; }
  .section + .faq { padding-top: var(--s-8); }
}
/* apertura suave donde el navegador sabe animar details (Chrome 131+); en el resto, instantánea */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size 0.6s var(--ease-swift), content-visibility 0.6s allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}
@media (min-width: 64rem) {
  .faq { grid-template-columns: repeat(12, 1fr); column-gap: var(--grid-gap); align-items: start; }
  .faq__title { grid-column: 1 / 5; position: sticky; top: 6.5rem; }
  .faq > .faq__list, .faq > .tabs, .faq > .faq__more { grid-column: 6 / -1; } /* una columna de aire entre título y preguntas, igual en todas las páginas */
}

/* ---------- MARCA BLANCA + CIERRE (bloque .stage, oscuro) ---------- */
.white-label {
  display: grid;
  padding: 0 var(--gutter); /* sin aire arriba: la banda pixelada ya separa; abajo, el marquee */
}
.white-label__title { margin-bottom: clamp(2rem, 5vh, 3.5rem); max-width: 24ch; }
/* recorte: en móvil, apoyado sobre la banda del marquee */
.white-label__photo { justify-self: center; margin-top: clamp(2.5rem, 6vh, 4rem); margin-bottom: -1px; }
.white-label__photo img { height: clamp(28rem, 120vw, 38rem); width: auto; } /* móvil y tableta: foto protagonista */

/* marquee a sangre en banda clara: separa Marca blanca del Cierre.
   4 copias; en cada ciclo se desplaza una copia. No se detiene. */
.marquee {
  --gap: clamp(1.75rem, 3vw, 3rem);
  margin-inline: calc(var(--gutter) * -1);
  padding-block: clamp(1.1rem, 2vw, 1.5rem);
  overflow: hidden;
}
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee__list { display: flex; flex-shrink: 0; gap: var(--gap); padding-right: var(--gap); }
.marquee__list li {
  display: inline-flex; align-items: center; gap: var(--gap); white-space: nowrap;
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem); font-weight: 600; line-height: 1;
  letter-spacing: var(--track-caps); text-transform: uppercase;
}
/* separador: la G del logo */
.marquee__list li::after {
  content: ""; flex-shrink: 0;
  width: 0.89em; height: 1em;
  background: url("assets/logo-g.webp") center / contain no-repeat;
}
@keyframes marquee { to { transform: translateX(-25%); } }

/* cierre: título → logos → texto + botón */
.close {
  display: flex; flex-direction: column;
  margin-inline: var(--gutter);
  padding-block: clamp(4rem, 10vh, 7rem) clamp(3rem, 7vh, 4.5rem);
}
.close__title { max-width: 24ch; }
.close__title em { display: block; }
.close__agencies { order: 2; margin-top: auto; }
.close__row {
  order: 1;
  display: grid; gap: var(--s-40); align-items: center;
  margin-block: clamp(2.5rem, 5vh, 3.5rem) clamp(3.5rem, 8vh, 5.5rem);
}
.close__text { font-size: var(--fs-lead); color: var(--muted); }

/* logos de agencias: blanco uniforme, mismo peso visual, a opacidad completa al pasar */
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-32) clamp(2rem, 4vw, 3.5rem); }
.logos a { display: block; }
.logos img {
  width: calc(var(--w) * 0.8); height: auto; max-width: 100%;
  opacity: 0.7; transition: opacity 0.4s var(--ease-out);
}
.logos a:hover img, .logos a:focus-visible img { opacity: 1; }
@media (min-width: 48rem) { .logos img { width: var(--w); } }
@media (max-width: 47.99rem) { .logos { justify-content: center; } }
/* escritorio (desde 1200 px): todos en una fila; si no caben, encogen en proporción a su tamaño. Por debajo, se reparten en dos filas para no quedar diminutos */
@media (min-width: 75rem) {
  .logos { flex-wrap: nowrap; justify-content: space-between; column-gap: clamp(1.5rem, 2.5vw, 2.5rem); }
  .logos li { flex: 0 1 auto; min-width: 0; }
}

/* escritorio: la foto ocupa el alto de Marca blanca + Cierre, delante del marquee */
@media (min-width: 64rem) {
  .stage {
    --photo-w: clamp(26rem, 38vw, 42rem);
    --photo-air: clamp(1.25rem, 2.5vw, 2.5rem); /* aire sobre la cabeza */
    --photo-gap: calc(var(--photo-w) + clamp(1.5rem, 4vw, 5rem)); /* hueco reservado al texto */
    position: relative;
    min-height: calc(var(--photo-w) * 1.977 - var(--pxt-h) + var(--photo-air)); /* proporción del recorte, contando la banda */
    display: flex; flex-direction: column;
  }
  .stage > .close { flex: 1; }
  .white-label__photo {
    position: absolute; top: calc(var(--photo-air) - var(--pxt-h)); bottom: 0; right: clamp(0rem, 4vw, 5rem); z-index: 2; /* sube por encima de la banda pixelada */
    width: var(--photo-w); margin: 0; pointer-events: none;
  }
  .white-label__photo img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; } /* entera: sin cortar cabeza ni brazos */
  .white-label__title { margin-right: var(--photo-gap); }
  .close { padding-right: var(--photo-gap); }
  .marquee { position: relative; z-index: 1; }
}

/* ---------- PIE: oscuro con retícula ---------- */
/* línea superior, líneas de columna, frase + volver arriba, 3 columnas y línea legal */
.foot {
  --cols: 4;
  --inset: clamp(1.25rem, 2.2vw, 2.25rem); /* el contenido no toca las líneas verticales */
  position: relative; isolation: isolate;
  padding: 0 var(--gutter) var(--s-24);
  border-top: 1px solid var(--rule); /* mismo negro que la sección anterior: la línea marca el borde */
}
/* líneas de columna */
.foot::before {
  content: ""; position: absolute; z-index: -1; inset: 0 var(--gutter);
  border-inline: 1px solid var(--rule);
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--cols) - 1px), var(--rule) calc(100% / var(--cols) - 1px) calc(100% / var(--cols)));
  pointer-events: none;
}
/* frase + volver arriba */
.foot__hero {
  display: grid; justify-items: center; gap: var(--s-40);
  padding-block: clamp(5rem, 16vh, 10rem);
  text-align: center;
}
/* anillo discontinuo */
.foot__up {
  display: grid; place-items: center;
  width: 4.25rem; aspect-ratio: 1; border-radius: 50%;
  border: 1px dashed rgba(253, 252, 250, 0.5);
  background: var(--bg);
  font-size: var(--icon-m); text-decoration: none;
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.foot__up:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* 3 columnas, cada una con su línea superior */
.foot__cols, .foot__base { padding-inline: var(--inset); }
.foot__cols { display: grid; gap: var(--s-40); padding-bottom: clamp(3rem, 7vh, 4.5rem); }
.foot__col {
  padding-top: 1.75rem; border-top: 1px solid var(--rule);
  font-size: var(--fs-body-l); color: var(--muted);
}
.foot__h { margin-bottom: var(--s-16); color: var(--fg); }
.foot__col p { max-width: 36ch; }
.foot__col a, .foot__base a { color: var(--fg); }
.foot__brand { display: flex; gap: var(--s-24); align-items: flex-start; }
.foot__brand img { width: 4.5rem; height: auto; flex-shrink: 0; }
.foot__local { margin-top: var(--s-16); }
.foot__contact { display: grid; gap: 0.4rem; margin-top: var(--s-16); }
.foot__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem var(--s-24); }

/* línea legal */
.foot__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-12) var(--s-32);
  padding-top: var(--s-24); padding-right: calc(var(--inset) + 4rem); /* + hueco del botón de WhatsApp */
  border-top: 1px solid var(--rule);
  font-size: var(--fs-body-l); color: var(--muted);
}
.foot__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-24); }
.foot__in { display: inline-flex; align-items: center; gap: 0.4rem; }
.foot__in i { font-size: var(--icon-m); }

@media (max-width: 63.99rem) {
  .foot__brand { flex-direction: column; gap: var(--s-20); }
  .foot__links { grid-template-columns: 1fr; }
  .foot__base { flex-direction: column; align-items: flex-start; }
  .foot__in { order: -1; }
}
@media (min-width: 64rem) {
  .foot { --cols: 6; }
  .foot__cols { grid-template-columns: repeat(3, 1fr); column-gap: 2.75rem; }
}

/* ---------- WHATSAPP flotante (verde de WhatsApp: se reconoce al instante) ---------- */
.wa {
  position: fixed; right: var(--s-20); bottom: var(--s-20); z-index: var(--z-wa);
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: #25d366; color: #fff;
  box-shadow: 0 0.625rem 1.5rem -0.5rem rgba(19, 18, 17, 0.45);
  text-decoration: none;
  transition: transform 0.5s var(--ease-swift), background-color 0.3s var(--ease-out), opacity 0.4s var(--ease-out), visibility 0.4s;
}
/* con JS: oculto en el hero, aparece al hacer scroll */
.js .wa:not(.is-shown) { opacity: 0; visibility: hidden; transform: translateY(1rem) scale(0.9); pointer-events: none; }
.wa i { font-size: var(--icon-l); -webkit-text-stroke: 0.4px currentColor; } /* el icono «light» es fino: un punto más de trazo sobre el verde */
.wa:hover { transform: scale(1.08); background: #1ebe5a; }
.wa:active { transform: scale(0.96); }

/* ==========================================================================
   PÁGINAS INTERIORES (pilar y servicios)
   Mismas piezas que la home; aquí solo la maquetación propia de estas páginas.
   ========================================================================== */
/* hero de página: migas + H1 + entrada y botón */
.page-hero { position: relative; }
.page-hero__stage {
  display: grid; gap: var(--s-40);
  padding: var(--s-32) var(--gutter) 0; /* sin aire abajo: la foto apoya en la banda pixelada */
}
/* migas: discretas, en gris y más pequeñas que el resto de rótulos */
.crumbs { font-size: var(--fs-nano); color: var(--muted); opacity: 0.75; transition: opacity 0.3s var(--ease-out); }
.crumbs:hover, .crumbs:focus-within { opacity: 1; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.crumbs li + li::before { content: "›"; margin-right: var(--s-8); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--fg); }
.page-hero__title { max-width: 18ch; }
/* subtítulo dentro del H1: más pequeño, en su propia línea */
.page-hero__title em { display: block; margin-top: 0.35em; font-size: 0.5em; line-height: 1.15; }
.page-hero__copy { display: grid; gap: var(--s-40); align-content: start; }
/* foto recortada sobre el círculo color estudio, apoyada en la banda inferior */
.page-hero__figure { position: relative; display: grid; justify-items: center; align-items: end; margin: 0; }
.page-hero__circle {
  position: absolute; left: 50%; bottom: 8%; translate: -50% 0;
  width: min(86vw, 28rem); aspect-ratio: 1; border-radius: 50%;
  background: var(--studio);
}
.page-hero__photo { position: relative; width: auto; height: 31rem; }
.page-hero__photo--wide { height: auto; width: min(100%, 27rem); }
.page-hero__intro { display: grid; gap: var(--s-16); }
.page-hero__row { display: grid; gap: var(--s-40); align-items: center; }
.page-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-top: var(--s-8); }
/* tiempo de respuesta bajo el botón del hero (web hackeada) */
.hero-sla { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-24); font-size: var(--fs-small); color: var(--muted); }
.hero-sla li { display: inline-flex; align-items: center; gap: var(--s-8); }
.hero-sla i { font-size: var(--icon-m); color: var(--fg); }
.hero-sla strong { color: var(--fg); font-weight: 600; }
@media (min-width: 64rem) {
  .page-hero__stage {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem);
    align-items: end; padding-block: var(--s-48) 0;
  }
  .page-hero__copy { align-self: center; padding-bottom: clamp(3rem, 8vh, 5rem); }
  .page-hero__title { font-size: calc(var(--fs-h1) * 0.88); } /* mismo tamaño que el H1 de la home */
  .page-hero__row { grid-template-columns: minmax(0, 1fr); }
  .page-hero__circle { width: min(36vw, 36rem); bottom: 9%; }
  .page-hero__photo { height: min(calc(100dvh - 5.5rem), 58rem); max-width: none; } /* casi hasta la cabecera */
  .page-hero__photo--wide { height: auto; width: min(100%, 44rem); max-height: calc(100dvh - 5.5rem); object-fit: contain; object-position: bottom; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .page-hero__photo { transform: translateY(5%); animation: rise 1.3s var(--ease-out) 0.2s forwards; } /* sin opacidad 0: es el LCP */
  .js .page-hero__circle { scale: 0.6; opacity: 0; animation: pop 1.2s var(--ease-swift) 0.05s forwards; }
}

/* excepción consciente: en «La cuarta opción» el H2 va en la columna estrecha junto a la tabla y se ajusta a ella */
.cta-band h2.cta-band__title { font-size: var(--fs-title-s); line-height: 1.12; }

/* sección genérica: título (+ entrada) y contenido */
.section { padding: var(--section-top) var(--gutter) var(--section-bottom); }
.section--flush-top { padding-top: clamp(0.5rem, 2vh, 1.5rem); } /* tras una banda pixelada */
.section--joined { padding-top: clamp(1.5rem, 4vw, 3.5rem); } /* prolonga la sección anterior: sin título ni hueco propio */
.section__head { display: grid; gap: var(--s-20); margin-bottom: var(--title-gap); }
.section__head .t-title { max-width: 16ch; }
.section__head--stack .section__intro { color: var(--muted); }
.section__head--center { justify-items: center; text-align: center; }
.section__head--center .t-title { max-width: none; }
.section__head--center .section__intro { max-width: 46rem; } /* solo los centrados: líneas legibles */
@media (min-width: 64rem) {
  .section__head { grid-template-columns: repeat(12, 1fr); column-gap: var(--grid-gap); align-items: end; }
  .section__head .t-title { grid-column: 1 / 8; }
  .section__intro { grid-column: 8 / -1; padding-bottom: 0.4rem; }
  /* variante: entrada debajo del título */
  .section__head--stack { grid-template-columns: 1fr; row-gap: var(--s-20); }
  .section__head--stack .t-title, .section__head--stack .section__intro { grid-column: 1; padding-bottom: 0; }
  .section__head--center { grid-template-columns: 1fr; }
  .section__head--center .t-title, .section__head--center .section__intro { grid-column: 1; padding-bottom: 0; }
}

/* hoja de entrega (lo que te llevas): papel con líneas discontinuas; cada punto se marca al aparecer y la firma es de tu agencia */
.handover {
  display: grid; gap: var(--s-8);
  padding: var(--pad-panel) clamp(1.25rem, 3vw, 2.75rem) var(--pad-panel);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 1.5rem 3rem -2rem rgba(19, 18, 17, 0.35);
}
.handover__top { display: flex; justify-content: space-between; gap: var(--s-16); padding-bottom: var(--s-16); border-bottom: 1px solid var(--fg); color: var(--muted); }
.handover__item {
  display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--s-16); align-items: start;
  padding-block: var(--s-20); border-bottom: 1px dashed var(--line-light);
}
.handover__item p { margin-top: var(--s-4); color: var(--muted); }
.handover__item strong { color: var(--fg); font-weight: 600; }
.handover__item a { color: var(--fg); text-underline-offset: 0.2em; }
.handover__check {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-top: 0.15rem; border-radius: 50%;
  border: 1px solid var(--fg); background: var(--fg); color: var(--white); font-size: var(--icon-s);
}
.handover__sign { display: grid; justify-items: end; gap: var(--s-4); padding-top: var(--s-24); color: var(--muted); }
.handover__sign em {
  min-width: 12rem; padding-top: var(--s-8); border-top: 1px solid var(--fg); text-align: right;
  font-family: var(--serif); font-size: var(--fs-h3); font-weight: 300; font-style: italic; color: var(--fg);
}
@media (min-width: 64rem) { .aside-layout > .handover { grid-column: 7 / -1; } .aside-layout--3 > .handover { grid-column: 3; } }
/* entrada: las casillas se marcan una tras otra; la firma aparece al final */
@media (prefers-reduced-motion: no-preference) {
  .js .handover[data-reveal] .handover__check { background: transparent; color: transparent; transform: scale(0.8); transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.5s var(--ease-swift); transition-delay: calc(0.2s + var(--i) * 0.16s); }
  .js .handover.is-in .handover__check { background: var(--fg); color: var(--white); transform: none; }
  .js .handover[data-reveal] .handover__sign em { clip-path: inset(0 100% 0 0); transition: clip-path 0.9s var(--ease-swift) 1.4s; }
  .js .handover.is-in .handover__sign em { clip-path: inset(0 0 0 0); }
}

/* opciones que se iluminan por turnos + panel ilustrado (el dilema) */
.steps { display: grid; gap: var(--s-32); }
.steps__list { display: grid; gap: var(--s-8); }
.steps__item {
  display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--s-20); align-items: start;
  padding-block: var(--s-16);
  transition: opacity 0.5s var(--ease-out);
}
.js .steps__item:not(.is-active) { opacity: 0.35; }
.js .steps__item:not(.is-active):hover { opacity: 0.7; }
.steps__mark {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--line-light);
  font-size: var(--fs-label); font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), transform 0.5s var(--ease-swift);
}
.steps__item.is-active .steps__mark { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: scale(1.08); }
.steps__text { display: grid; gap: var(--s-8); }
.steps__text p { color: var(--muted); }
.steps__bar { display: block; height: 2px; margin-top: var(--s-8); background: var(--rule); overflow: hidden; }
.steps__bar i { display: block; height: 100%; background: var(--fg); transform-origin: left; transform: scaleX(var(--p, 0)); }
.steps__item:not(.is-active) .steps__bar { visibility: hidden; }

.steps__stage {
  position: relative; overflow: hidden;
  order: -1; height: 27rem; /* móvil: el panel va encima de la lista, a la vista de la opción activa */
  border-radius: var(--radius);
  perspective: 62.5rem;
}
.steps__slide {
  position: absolute; inset: 0; margin: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--s-20); /* el gráfico se encoge, la frase nunca se corta */
  padding: var(--pad-panel);
  opacity: 0; transform: translateY(2.5rem) rotateX(-14deg);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-swift);
}
.steps__slide.is-active { opacity: 1; transform: none; }
.steps__slide.is-out { transform: translateY(-2.5rem) rotateX(14deg); }
.steps__say { font-size: var(--fs-subtitle); max-width: 20ch; }

/* 01 · barras: trabajo real frente a la línea fija de la nómina */
.ch-bars { position: relative; align-self: stretch; display: grid; }
.ch-bars__months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.4rem; align-items: end; height: 100%; padding-bottom: 1.4rem; }
.ch-bars__m { position: relative; height: var(--h); border-radius: var(--radius-s) var(--radius-s) 0 0; background: var(--white); }
.ch-bars__m.is-idle { background: var(--grey-dark); opacity: 0.45; }
.ch-bars__m span { position: absolute; top: 100%; left: 0; right: 0; padding-top: 0.35rem; text-align: center; font-size: var(--fs-nano); color: var(--muted); }
.ch-bars__line { position: absolute; z-index: 1; left: 0; right: 0; bottom: calc(1.4rem + (100% - 1.4rem) * 0.75); border-top: 1.5px dashed var(--studio); }
.ch-bars__line em { position: absolute; right: 0; bottom: 0.3rem; padding: 0.1rem 0.4rem; border-radius: var(--radius-s); background: var(--bg); font-style: normal; font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--studio); }
/* entrada: las barras crecen al aparecer la diapositiva */
.steps__slide .ch-bars__m { transform-origin: bottom; transform: scaleY(0.2); transition: transform 0.8s var(--ease-swift); transition-delay: calc(var(--i, 0) * 0.04s); }
.steps__slide.is-active .ch-bars__m { transform: none; }

/* 02 · la agencia en el centro, unida a seis freelances con líneas en codo; por ellas viajan pulsos */
.ch-graph {
  position: relative; display: grid; place-items: center; min-height: 0;
  container-type: size; /* el lienzo se ajusta a lo que limite antes: ancho o alto del panel */
  margin-inline: calc(clamp(1.5rem, 3vw, 2.5rem) * -1); /* el fondo de puntos llega al borde del panel */
  background: radial-gradient(circle, rgba(253, 252, 250, 0.16) 1px, transparent 1.5px) 0 0 / 1.25rem 1.25rem;
  -webkit-mask-image: radial-gradient(ellipse 90% 95% at 50% 50%, #000 60%, transparent);
          mask-image: radial-gradient(ellipse 90% 95% at 50% 50%, #000 60%, transparent);
}
/* lienzo con la proporción del viewBox (640 × 300): las casillas se colocan en sus mismas coordenadas */
.ch-graph__box {
  position: relative; container-type: inline-size;
  aspect-ratio: 640 / 300; width: min(100cqw - 2rem, 213.33cqh); /* 640/300 = 2,133 */
}
.ch-graph__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ch-graph__line { fill: none; stroke: rgba(253, 252, 250, 0.34); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ch-graph__line.is-gone { stroke-dasharray: 3 5; stroke: rgba(253, 252, 250, 0.16); }
.ch-graph__pulse {
  fill: none; stroke: var(--white); stroke-width: 2.25; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 12 100; stroke-dashoffset: 12; opacity: 0;
}
.steps__slide.is-active .ch-graph__pulse { animation: pulse-run 2.6s var(--ease-out) infinite; animation-delay: calc(0.3s + var(--i) * 0.42s); }
@keyframes pulse-run {
  0%   { stroke-dashoffset: 12;  opacity: 0; }
  10%  { opacity: 1; }
  70%  { stroke-dashoffset: -88; opacity: 1; }
  80%, 100% { stroke-dashoffset: -88; opacity: 0; }
}
.ch-graph__tile {
  position: absolute; left: calc(var(--x) / 640 * 100%); top: calc(var(--y) / 300 * 100%);
  width: 8.6cqw; aspect-ratio: 1; translate: -50% -50%;
  display: grid; place-items: center; border-radius: 22%;
  border: 1px solid rgba(253, 252, 250, 0.14); background: #0b0b0a;
  box-shadow: 0 0.5rem 1.25rem -0.5rem rgba(0, 0, 0, 0.8);
  color: var(--white); font-size: 4.2cqw;
}
.ch-graph__tile em {
  position: absolute; top: calc(100% + 0.45rem); left: 50%; translate: -50% 0;
  font-style: normal; font-size: max(0.6875rem, 2.05cqw); font-weight: 600; white-space: nowrap; color: rgba(253, 252, 250, 0.72);
}
/* el que no responde: casilla discontinua e icono apagado que parpadea; la etiqueta se lee */
.ch-graph__tile.is-gone { border-style: dashed; border-color: rgba(253, 252, 250, 0.22); background: transparent; box-shadow: none; }
.ch-graph__tile.is-gone i { opacity: 0.35; }
.ch-graph__tile.is-gone em { color: var(--studio); }
.steps__slide.is-active .ch-graph__tile.is-gone i { animation: fade-out 1.6s var(--ease-out) 0.6s infinite alternate; }
.ch-graph__hub {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 14.5cqw; aspect-ratio: 1; border-radius: 24%;
  border: 1px solid rgba(253, 252, 250, 0.2); background: #0b0b0a;
  box-shadow: 0 0 0 0.35rem rgba(253, 252, 250, 0.04), 0 1rem 2.5rem -0.75rem rgba(0, 0, 0, 0.9);
}
.ch-graph__hub span {
  display: grid; place-items: center; width: 74%; aspect-ratio: 1; border-radius: 50%;
  background: var(--white); color: var(--black);
  font-family: var(--serif); font-size: 2.3cqw; line-height: 1.05; text-align: center;
}
@keyframes fade-out { to { opacity: 0.12; } }

/* 03 · panel de estado: lo que entra por la puerta y cómo acaba */
.ch-status { display: grid; gap: var(--s-8); align-content: center; }
.ch-status__row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-16);
  padding: var(--s-12) var(--s-16); border-radius: var(--radius-btn);
  border: 1px solid rgba(253, 252, 250, 0.1); background: rgba(253, 252, 250, 0.04);
  opacity: 0; transform: translateX(-1.5rem);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-swift);
}
.ch-status__row:nth-child(2) { transition-delay: 0.12s; }
.ch-status__row:nth-child(3) { transition-delay: 0.24s; }
.ch-status__row:nth-child(4) { transition-delay: 0.36s; }
.steps__slide.is-active .ch-status__row { opacity: 1; transform: none; }
.ch-status__row > span { display: grid; gap: 0.1rem; min-width: 0; }
.ch-status__row b { font-weight: 600; font-size: var(--fs-small); color: var(--white); }
.ch-status__row small { font-size: var(--fs-label); color: var(--muted); }
/* etiqueta de estado: punto de color que late + texto, con el borde y el fondo del mismo tono */
.ch-status__tag {
  --c: 196, 185, 187;
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: var(--s-4) var(--s-12); border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--c), 0.35); background: rgba(var(--c), 0.1); color: rgb(var(--c));
  font-style: normal; font-size: var(--fs-label); font-weight: 600; white-space: nowrap;
}
.ch-status__tag::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 0 0 rgba(var(--c), 0.6); }
.steps__slide.is-active .ch-status__tag::before { animation: status-beat 1.8s var(--ease-out) infinite; }
.ch-status__tag.is-no { --c: 226, 112, 96; }    /* rojo apagado */
.ch-status__tag.is-wait { --c: 222, 166, 82; }  /* ámbar */
.ch-status__tag.is-lost { --c: 196, 185, 187; } /* gris estudio */
.ch-status__tag.is-ok { --c: 86, 196, 128; }      /* verde */
.ch-status__tag.is-info { --c: 110, 168, 236; }   /* azul */
.ch-status__tag.is-brand { --c: 240, 150, 52; }   /* naranja */
.ch-status__tag.is-violet { --c: 168, 140, 230; } /* violeta */
.ch-status { min-height: 0; }
/* móvil: filas de una línea, sin contexto, para que la lista no invada la frase */
@media (max-width: 39.99rem) {
  .ch-status { gap: var(--s-4); }
  .ch-status__row { padding: var(--s-8) var(--s-12); gap: var(--s-8); }
  .ch-status__row small { display: none; }
  .ch-status__row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-label); }
  .ch-status__tag { padding: 0.2rem 0.5rem; font-size: var(--fs-nano); }
}
/* panel de estado suelto (desarrollo web): las filas entran al aparecer el panel */
.status-panel { display: grid; gap: var(--s-24); align-content: center; margin: 0; }
/* sobre fondo claro: el negro se reserva para las filas */
.status-panel .steps__cap { color: var(--muted); }
.status-panel .ch-status { gap: var(--s-12); }
.status-panel .ch-status__row {
  padding: var(--s-16) var(--s-20); border-radius: var(--radius);
  border-color: var(--black); background: var(--black);
  box-shadow: 0 1rem 2rem -1.25rem rgba(19, 18, 17, 0.55);
}
.status-panel .ch-status__row small { color: var(--grey-dark); }
.status-panel .ch-status__row:nth-child(5) { transition-delay: 0.48s; }
html:not(.js) .status-panel .ch-status__row, .status-panel.is-in .ch-status__row { opacity: 1; transform: none; }
.status-panel.is-in .ch-status__tag::before { animation: status-beat 1.8s var(--ease-out) infinite; }
@media (max-width: 39.99rem) {
  .status-panel .ch-status__row { align-items: flex-start; }
  .status-panel .ch-status__row small { display: block; }
  .status-panel .ch-status__row b { white-space: normal; overflow: visible; font-size: var(--fs-small); }
}
@keyframes status-beat { 0% { box-shadow: 0 0 0 0 rgba(var(--c), 0.55); } 100% { box-shadow: 0 0 0 0.45rem rgba(var(--c), 0); } }

@media (min-width: 64rem) {
  .steps { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr); column-gap: var(--s-48); align-items: center; }
  .steps__stage { order: 0; height: clamp(28rem, 40vw, 36rem); }
}

/* botón blanco sólido (acción principal sobre fondo oscuro): píldora con la flecha en un círculo a la derecha;
   al pasar, el círculo cruza a la izquierda girando 45° y el texto se desplaza al otro lado */
.btn {
  --dot: 2.5rem;
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; height: 3rem;
  padding: 0 calc(var(--dot) + var(--s-16)) 0 var(--s-24);
  border-radius: var(--radius-pill);
  background: var(--white); color: var(--black);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: padding 0.5s var(--ease-swift);
}
.btn { justify-self: start; } /* en rejillas no se estira a todo el ancho */
.page-close__head .btn, .integrate__copy .btn { justify-self: center; }
/* aire antes de cualquier botón que sigue a un texto: se suma al hueco del contenedor (≈ 3 rem en escritorio) */
:root { --btn-air: clamp(1.25rem, 2.2vw, 1.75rem); }
:is(p, ul, ol, dl, h2, h3, .stats) + .btn,
:is(p, ul, ol, dl, h2, h3, .stats) + :is(.page-hero__cta, .cta-band__actions, .sla__cta) { margin-top: var(--btn-air); }
.btn__label { position: relative; z-index: 1; }
.btn__icon {
  position: absolute; top: 50%; right: 0.25rem;
  display: grid; place-items: center; width: var(--dot); height: var(--dot); border-radius: 50%;
  background: var(--black); color: var(--white); font-size: var(--icon-s);
  translate: 0 -50%;
  transition: right 0.5s var(--ease-swift), rotate 0.5s var(--ease-swift);
}
@media (hover: hover) {
  .btn:hover { padding: 0 var(--s-24) 0 calc(var(--dot) + var(--s-16)); }
  .btn:hover .btn__icon { right: calc(100% - var(--dot) - 0.25rem); rotate: 45deg; }
}
.btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .btn, .btn__icon { transition: none; } }
/* móvil: el texto del botón puede partirse en dos líneas en vez de desbordar su columna */
@media (max-width: 39.99rem) {
  .btn { height: auto; min-height: 3rem; padding-block: var(--s-8); white-space: normal; text-align: left; line-height: 1.3; }
}
.cta-band > *, .aside-layout > *, .page-hero__copy > * { min-width: 0; }

/* bloque de llamada a la acción oscuro dentro de una sección clara (la cuarta opción) */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: var(--s-24);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
  border-radius: var(--radius);
}
/* retícula de puntos que se desvanece hacia la izquierda */
.cta-band::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(circle, rgba(253, 252, 250, 0.14) 1px, transparent 1.5px) 0 0 / 1.25rem 1.25rem;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 100% 50%, #000 20%, transparent);
          mask-image: radial-gradient(ellipse 60% 90% at 100% 50%, #000 20%, transparent);
}
.cta-band__kicker { color: var(--studio); }
/* variante clara: papel con borde fino, puntos oscuros y botón negro */
.cta-band--light { border: 1px solid var(--rule); background: var(--white); box-shadow: 0 1.5rem 3rem -2rem rgba(19, 18, 17, 0.35); }
.cta-band--light::before { background-image: radial-gradient(circle, rgba(19, 18, 17, 0.12) 1px, transparent 1.5px); }
.cta-band--light .cta-band__kicker { color: var(--muted); }
.cta-band--light .mode__points li::before { border-color: rgba(19, 18, 17, 0.12); }
/* botón sobre fondo claro: negro, con el círculo de la flecha en blanco */
.theme-light .btn, .cta-band--light .btn { background: var(--black); color: var(--white); }
.theme-light .btn__icon, .cta-band--light .btn__icon { background: var(--white); color: var(--black); }
.theme-light .btn:focus-visible { outline-color: var(--black); }
/* un bloque oscuro dentro de una sección clara recupera el botón blanco */
.theme-dark .btn { background: var(--white); color: var(--black); }
.theme-dark .btn__icon { background: var(--black); color: var(--white); }
/* servicio abierto de la home: tarjeta negra dentro de una sección clara → botón blanco */
.svc__item.is-open .btn { background: var(--white); color: var(--black); }
.svc__item.is-open .btn__icon { background: var(--black); color: var(--white); }
.svc__item.is-open .btn:focus-visible { outline-color: var(--white); }
@media (min-width: 64rem) {
  .cta-band { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
}
.cta-band__title { max-width: 20ch; }
/* bloque: entrada a la izquierda, tabla «versus» a la derecha */
.cta-band__intro { display: grid; gap: var(--s-24); align-content: center; justify-items: start; }
.cta-band__lead { color: var(--muted); }
.cta-band__text { color: var(--muted); }
.cta-band__aside { display: grid; gap: var(--s-20); }
.cta-band__sub em { font-weight: 300; color: var(--muted); }
.cta-band__note { color: var(--muted); }
.cta-band__lead strong { color: var(--fg); }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-16) var(--s-32); margin-top: var(--s-8); }

/* versus: cada fila enfrenta lo que hace quien solo ejecuta con lo que hace tu CTO externo; la columna buena, resaltada */
.versus { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; }
.versus th {
  padding: var(--s-16) var(--s-20) var(--s-20);
  font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400; font-variation-settings: "opsz" 144; letter-spacing: var(--track-h3);
  vertical-align: bottom;
}
.versus th:first-child { color: var(--grey-dark); }
.versus td { padding: var(--s-20); border-top: 1px solid var(--rule); vertical-align: top; font-size: var(--fs-body-l); line-height: 1.45; }
.versus td:first-child { color: var(--grey-dark); }
.versus td i {
  display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; margin-right: var(--s-12); vertical-align: -0.2rem;
  border-radius: 50%; font-size: var(--icon-xs);
}
.versus td:first-child i { border: 1px solid var(--rule); }
.versus td:last-child i { background: var(--white); color: var(--black); }
/* columna resaltada: fondo claro sutil con esquinas redondeadas arriba y abajo */
.versus th:last-child, .versus td:last-child { background: rgba(253, 252, 250, 0.06); color: var(--white); }
.versus th:last-child { border-radius: var(--radius) var(--radius) 0 0; }
.versus tr:last-child td:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.versus td:last-child { border-top-color: rgba(253, 252, 250, 0.1); }
@media (max-width: 39.99rem) {
  .versus th, .versus td { padding: var(--s-12); font-size: var(--fs-small); }
  .versus th { font-size: var(--fs-body-l); }
  .versus td i { display: grid; margin: 0 0 var(--s-8); }
}

/* título fijo a la izquierda + contenido a la derecha (como la FAQ) */
.aside-layout { display: grid; gap: var(--title-gap); }
.aside-layout__head { display: grid; gap: var(--s-20); align-content: start; }
.aside-layout__head .t-lead { color: var(--muted); }
.aside-layout__head .t-lead strong { color: var(--fg); }
/* foto en la columna fija: mismo tratamiento que la de «Quién soy» (esquinas redondeadas y entrada recortada) */
.aside-photo { width: min(100%, 22rem); margin-top: var(--s-8); }
.aside-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; border-radius: var(--radius); }
.js .aside-photo[data-reveal] img { clip-path: inset(14% 0 0 0 round var(--radius)); transition: clip-path 1.3s var(--ease-swift); }
.js .aside-photo.is-in img { clip-path: inset(0 0 0 0 round var(--radius)); }
@media (min-width: 64rem) {
  .aside-layout { grid-template-columns: repeat(12, 1fr); column-gap: var(--grid-gap); align-items: start; }
  .aside-layout__head { grid-column: 1 / 6; position: sticky; top: 6.5rem; }
  .aside-layout > .timeline, .aside-layout > .status-panel, .aside-layout > .case-figures, .aside-layout > .case-result { grid-column: 7 / -1; }
  /* variante de tres columnas: título | foto | línea de tiempo; título y foto fijos al bajar */
  /* 25 % | 25 % | 50 % (título | foto | línea de tiempo) */
  .aside-layout--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .aside-layout--3 .aside-layout__head { grid-column: 1; }
  .aside-layout--3 > .aside-photo { grid-column: 2; position: sticky; top: 6.5rem; width: 100%; margin-top: 0; }
  .aside-layout--3 > .timeline, .aside-layout--3 > .status-panel, .aside-layout.aside-layout--3 > .case-side { grid-column: 3; } /* .case-side gana a su regla de 12 columnas */
  /* variante 40 % | 60 %: título, entrada y foto fijos a la izquierda */
  .aside-layout--40 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(2rem, 5vw, 5rem); }
  .aside-layout--40 .aside-layout__head { grid-column: 1; }
  .aside-layout--40 > :not(.aside-layout__head) { grid-column: 2; }
  /* las dos columnas a la misma altura: la foto crece hasta el final del contenido de la derecha */
  .aside-layout--40 { align-items: stretch; }
  .aside-layout--40 .aside-layout__head { position: static; display: flex; flex-direction: column; }
  .aside-layout--40 .aside-photo { position: relative; flex: 1; width: 100%; min-height: 24rem; }
  .aside-layout--40 .aside-photo picture, .aside-layout--40 .aside-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .aside-layout--40 .aside-photo img { aspect-ratio: auto; object-position: 50% 0; } /* anclada arriba: nunca corta la cabeza */
}

/* línea de tiempo vertical: raíl discontinuo que se rellena al bajar, nodos que se encienden */
.timeline { --node: 2.75rem; position: relative; display: grid; gap: var(--s-16); }
.timeline::before, .timeline__fill {
  content: ""; position: absolute; top: calc(var(--node) / 2); bottom: calc(var(--node) / 2);
  left: calc(var(--node) / 2 - 0.5px);
}
.timeline::before { border-left: 1px dashed var(--rule); }
.timeline__fill { width: 1.5px; background: var(--fg); transform-origin: top; transform: scaleY(var(--fill, 1)); }
.js .timeline__fill { --fill: 0; }
.tl-step { position: relative; display: grid; grid-template-columns: var(--node) 1fr; gap: var(--s-20); align-items: start; }
.tl-step__node {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: var(--node); height: var(--node); border-radius: 50%;
  border: 1px solid var(--rule); background: var(--bg); color: var(--muted);
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.tl-step.is-on .tl-step__node, html:not(.js) .tl-step__node { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.tl-card {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-16); align-items: start;
  padding: var(--s-20) var(--s-24);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--bg);
}
.theme-dark .tl-card { background: rgba(253, 252, 250, 0.03); }
.tl-card__icon {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-btn);
  border: 1px solid var(--rule); font-size: var(--icon-m);
}
.tl-card__body { display: grid; gap: var(--s-4); }
.tl-card__title { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400; font-variation-settings: "opsz" 144; line-height: var(--lh-h3); letter-spacing: var(--track-h3); }
.tl-card p { color: var(--muted); }
.tl-card strong { color: var(--fg); font-weight: 600; }
/* entrada: cada paso aparece cuando el raíl llega a él */
.js .tl-step .tl-card { opacity: 0.3; transform: translateY(0.75rem); transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-swift); }
.js .tl-step.is-on .tl-card { opacity: 1; transform: none; }

/* foto con su fondo de estudio, esquinas redondeadas y entrada recortada (en «Cómo me integro») */
.integrate__photo { margin: 0; width: min(100%, 26rem); justify-self: center; }
.integrate__photo img { width: 100%; height: auto; border-radius: var(--radius); }
.js .integrate__photo[data-reveal] img { clip-path: inset(14% 0 0 0 round var(--radius)); transition: clip-path 1.3s var(--ease-swift); }
.js .integrate__photo.is-in img { clip-path: inset(0 0 0 0 round var(--radius)); }

/* modalidades: nodos numerados unidos por una línea, sobre tarjetas con lista de puntos */
.modes { --node: 2.25rem; position: relative; display: grid; gap: var(--s-16); }
.mode { display: grid; grid-template-rows: auto 1fr; gap: var(--s-16); justify-items: start; } /* el nodo no crece: todas las tarjetas empiezan a la misma altura */
.mode__node {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: var(--node); height: var(--node); border-radius: 50%;
  border: 1px solid var(--rule); background: var(--bg); color: var(--muted);
  transition: background-color 0.5s var(--ease-out), color 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
  transition-delay: calc(0.3s + var(--i) * 0.35s);
}
.mode__card {
  align-self: stretch; justify-self: stretch;
  display: grid; align-content: start; gap: var(--s-12);
  padding: var(--s-24) clamp(1.25rem, 2.2vw, 2rem) var(--s-32);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: rgba(253, 252, 250, 0.03);
}
.mode__card > p { color: var(--muted); }
.mode__card .tl-card__icon { margin-bottom: var(--s-4); }
.mode__points { display: grid; gap: var(--s-12); margin-top: var(--s-8); }
.mode__points li { position: relative; padding-left: 1.6rem; color: var(--muted); }
.mode__points li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 0.75rem; height: 0.75rem; border-radius: 50%;
  border: 3px solid rgba(253, 252, 250, 0.18); background: var(--fg); background-clip: padding-box;
}
/* línea que une los nodos (escritorio): se dibuja al entrar en pantalla y enciende cada nodo */
@media (min-width: 56rem) {
  .modes { grid-template-columns: repeat(3, 1fr); }
  .mode { justify-items: center; }
  .modes::before, .modes::after {
    content: ""; position: absolute; top: calc(var(--node) / 2); height: 1px;
    left: calc(100% / 6); right: calc(100% / 6);
  }
  .modes::before { background: var(--rule); }
  .modes::after { background: var(--fg); transform-origin: left; transform: scaleX(1); }
  .js .modes::after { transform: scaleX(0); transition: transform 1.2s var(--ease-swift) 0.3s; }
  .js .modes.is-in::after { transform: scaleX(1); }
}
.js .modes .mode__card { opacity: 0; transform: translateY(1rem); transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-swift); transition-delay: calc(0.2s + var(--i) * 0.15s); }
.js .modes.is-in .mode__card { opacity: 1; transform: none; }
.js .modes.is-in .mode__node, html:not(.js) .mode__node { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* solo lectores de pantalla */

/* integración: pasos (principal) | herramientas (tarjeta secundaria, fija al bajar) */
.integrate { display: grid; gap: var(--s-32); align-items: start; }
.integrate__tools { display: grid; justify-items: center; gap: var(--s-24); text-align: center; }
.integrate__copy { display: grid; justify-items: center; gap: var(--s-12); max-width: 26rem; }
.integrate__copy .arrow-link { justify-self: center; font-size: var(--fs-small); white-space: nowrap; }
.integrate__copy p { color: var(--muted); }
.integrate__copy .tl-card__title em { font-weight: 300; color: var(--muted); }

/* sistema solar: la G en el centro, dos órbitas girando en sentidos opuestos; los iconos se mantienen derechos */
.orbit { --size: min(19rem, 78vw); position: relative; width: var(--size); aspect-ratio: 1; }
.orbit__ring {
  position: absolute; border: 1px dashed var(--rule); border-radius: 50%;
  animation: orbit var(--dur) linear infinite var(--dir);
}
.orbit__ring--out { --dur: 46s; --dir: normal; inset: 0; }
.orbit__ring--in { --dur: 30s; --dir: reverse; inset: 22%; }
.orbit__arm { position: absolute; inset: 0; rotate: var(--a); }
.orbit__planet { position: absolute; top: 0; left: 50%; translate: -50% -50%; rotate: calc(var(--a) * -1); }
/* la casilla entera gira al revés que su órbita: siempre queda derecha */
.orbit__tile {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-m);
  border: 1px solid var(--rule); background: var(--black);
  font-size: var(--icon-m); color: var(--white);
  animation: orbit var(--dur) linear infinite;
}
.orbit__ring--out .orbit__tile { animation-direction: reverse; }
.orbit__ring--in .orbit__tile { animation-direction: normal; }
.orbit__sun {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: var(--radius);
  border: 1px solid rgba(253, 252, 250, 0.3);
  background: linear-gradient(160deg, rgba(253, 252, 250, 0.16), rgba(253, 252, 250, 0.05)), var(--black);
  box-shadow: 0 0 3rem 0.5rem rgba(196, 185, 187, 0.22), 0 0 0 0.6rem rgba(196, 185, 187, 0.05); /* resplandor de sol */
}
.orbit__sun img { width: 42%; height: auto; filter: invert(1); }
@keyframes orbit { to { rotate: 360deg; } }

@media (min-width: 64rem) {
  /* tres columnas: pasos 50 % | foto 25 % | herramientas 25 %; misma altura, sin huecos arriba ni abajo */
  .integrate { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 3vw, 3rem); align-items: stretch; }
  .integrate > .timeline { align-content: space-between; } /* los pasos se reparten la altura de la fila */
  .integrate > .timeline, .integrate > .integrate__photo, .integrate > .integrate__tools { grid-column: auto; }
  /* la foto rellena su columna entera sin marcar la altura de la fila */
  .integrate__photo { position: relative; align-self: stretch; width: 100%; min-height: 24rem; }
  .integrate__photo picture, .integrate__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .integrate__photo img { object-fit: cover; object-position: 50% 0; } /* anclada arriba: nunca corta la cabeza */
  .integrate__tools { align-self: center; }
  .integrate .orbit { --size: min(100%, 17rem); }
}

.faq__a a { color: var(--fg); text-underline-offset: 0.2em; }

/* gracias: el hero solo, con algo más de aire bajo el texto */
.thanks__while { margin-top: var(--s-16); font-size: var(--fs-small); color: var(--muted); }
.thanks__while + .page-hero__cta { margin-top: 0; }

/* home: botón al pilar bajo el acordeón, CTA bajo los pasos y bajo las preguntas */
.services__all { position: relative; z-index: 1; display: grid; justify-items: start; margin-top: var(--gap-cta); }
.svc__actions { display: flex; flex-wrap: wrap; gap: var(--s-12); }
.hline__cta { display: grid; justify-items: center; margin-top: var(--gap-cta); }
.hline__cta .btn { justify-self: center; }
.faq__more { display: grid; justify-items: start; margin-top: var(--gap-block); }
/* garantías de marca blanca: icono en círculo, título y texto; 4 en fila si cabe, si no 2 × 2 */
.guarantees-wrap { container-type: inline-size; margin-bottom: var(--gap-cta); }
.guarantees { display: grid; gap: var(--gap-block) var(--grid-gap); }
@container (min-width: 32rem) { .guarantees { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 60rem) { .guarantees { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.guarantees li { display: grid; align-content: start; gap: var(--s-8); }
.guarantees__icon {
  display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--s-12);
  border: 1px solid var(--rule); border-radius: 50%; font-size: var(--icon-m); color: var(--fg);
}
.guarantees__title { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400; font-variation-settings: "opsz" 144; line-height: var(--lh-h3); letter-spacing: var(--track-h3); }
.guarantees li p { color: var(--muted); }
.guarantees__cta { display: grid; justify-items: start; margin-bottom: clamp(3rem, 7vh, 5rem); }
@media (min-width: 64rem) { .guarantees-wrap, .guarantees__cta { margin-right: var(--photo-gap); } }

/* línea técnica: el detalle bajo el texto comercial (versalitas pequeñas, gris) */
.tech-line {
  margin-top: var(--s-8); font-size: var(--fs-micro); font-weight: 600; line-height: 1.5;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted);
}
.case .tech-line, .ps__card .tech-line { color: var(--grey-light); }
/* soporte en tres niveles (partner): tres tarjetas con el nivel y su icono */
.levels { display: grid; gap: var(--grid-gap); }
@media (min-width: 48rem) { .levels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.levels__item { display: grid; align-content: start; gap: var(--s-8); padding: var(--pad-card); border: 1px solid var(--rule); border-radius: var(--radius); }
.levels__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-16); color: var(--muted); }
.levels__top .num { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; }
.levels__top i { font-size: var(--icon-l); color: var(--fg); }
.levels__item p:not(.tech-line) { color: var(--muted); }

/* páginas legales: hero corto y texto corrido con medida de lectura */
.legal-hero .page-hero__stage { padding-bottom: var(--section-top); }
.legal { display: grid; gap: var(--s-16); } /* ancho completo del contenedor (decisión de Iván, 02/10) */
.legal__h { margin-top: var(--s-32); font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400; font-variation-settings: "opsz" 144; line-height: var(--lh-h3); letter-spacing: var(--track-h3); }
.legal__h:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--grey-light); }
.legal strong { color: var(--fg); font-weight: 600; }
.legal ul { display: grid; gap: var(--s-8); padding-left: 1.1rem; list-style: square; }
.legal a { color: var(--fg); text-underline-offset: 0.2em; }
.legal .cky-banner-element { padding: 0; border: 0; background: none; font: inherit; color: var(--fg); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; } /* «Configurar cookies»: abre CookieYes */
.legal__date { margin-top: var(--s-24); font-size: var(--fs-small); }

/* aviso de contenido en preparación (casos reales) */
.soon { display: flex; align-items: flex-start; gap: var(--s-12); padding: var(--s-16) var(--s-20); border: 1px dashed var(--rule); border-radius: var(--radius-btn); font-size: var(--fs-small); color: var(--muted); }
.soon strong { color: var(--fg); font-weight: 600; }
.soon__dot { flex: none; width: 0.5rem; height: 0.5rem; margin-top: 0.45em; border-radius: 50%; background: var(--studio); animation: soon-pulse 1.8s ease-in-out infinite; }
@keyframes soon-pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .soon__dot { animation: none; } }

/* contacto: dos columnas · (título + foto | datos) | formulario */
.contact { display: grid; gap: var(--gap-block); padding: var(--s-32) var(--gutter) var(--section-bottom); }
.contact__head { gap: var(--s-24); }
.contact__ways { display: grid; }
.contact__ways li:first-child { padding-top: 0; }
.contact__ways li:last-child { border-bottom: 0; padding-bottom: 0; } /* solo líneas entre datos, sin la primera ni la última */
.contact__ways li { display: flex; align-items: center; gap: var(--s-16); padding: var(--s-16) 0; border-bottom: 1px solid var(--rule); }
.contact__ways li > span:last-child { display: grid; gap: 0.1rem; }
.contact__ways small { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.contact__ways a { font-size: var(--fs-body-l); font-weight: 500; color: var(--fg); text-decoration: none; }
.contact__ways a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.contact__icon { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--rule); font-size: var(--icon-m); }
.contact__row { display: grid; gap: var(--s-32); align-items: end; margin-top: var(--s-16); }
/* foto de la home: recorte del portátil sobre el círculo de estudio */
.contact__photo { position: relative; margin: 0; display: grid; justify-items: center; align-items: end; max-width: 17rem; margin-inline: auto; }
.contact__circle { position: absolute; left: 50%; top: 8%; width: 115%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--studio); }
.contact__photo img { position: relative; width: 100%; height: auto; }
@media (min-width: 40rem) { .contact__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.contact__form { padding: var(--pad-panel); border: 1px solid var(--rule); border-radius: var(--radius); background: rgba(253, 252, 250, 0.03); }
.contact .aside-layout__head { grid-column: auto; position: static; }
@media (min-width: 64rem) {
  .contact { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .contact__form { position: sticky; top: 6.5rem; }
  /* la columna izquierda llega hasta abajo y la foto se apoya en el borde inferior de la sección (sobre la banda pixelada) */
  .contact__head { align-self: stretch; grid-template-rows: auto auto auto 1fr; }
  .contact__row { align-self: stretch; align-items: end; margin-top: 0; margin-bottom: calc(var(--section-bottom) * -1); }
  .contact__photo { align-self: stretch; max-width: none; margin-inline: 0; }
  .contact__photo picture { display: flex; align-items: flex-end; justify-content: center; height: 100%; min-height: 0; }
  .contact__photo img { width: auto; height: 100%; max-height: 38rem; min-height: 22rem; object-fit: contain; object-position: bottom; }
  .contact__circle { top: auto; bottom: 30%; width: 92%; }
  .contact__ways { align-self: center; padding-bottom: var(--section-bottom); }
}

/* desplegable con el mismo aspecto que los campos de texto */
.gf-g select {
  width: 100%; height: 3.25rem; padding: 0 2.75rem 0 var(--s-16); border: 1px solid var(--rule); border-radius: var(--radius-btn);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 1rem center;
  color: var(--fg); font: inherit; appearance: none; cursor: pointer;
}
.gf-g select:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px rgba(253, 252, 250, 0.12); }
.gf-g select option { color: var(--black); }

/* pestañas de preguntas por servicio */
.tabs { display: grid; gap: var(--s-24); min-width: 0; }
.tabs__list { display: flex; flex-wrap: wrap; gap: var(--s-8); }
@media (max-width: 47.99rem) {
  .tabs__list {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .tabs__list::-webkit-scrollbar { display: none; }
  .tabs__tab { flex-shrink: 0; white-space: nowrap; }
}
.tabs__tab {
  padding: var(--s-12) var(--s-20); border: 1px solid var(--rule); border-radius: var(--radius-pill);
  font-size: var(--fs-small); font-weight: 500; color: var(--fg); background: none; cursor: pointer;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.tabs__tab:hover { border-color: var(--fg); }
.tabs__tab[aria-selected="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.tabs__tab:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.tabs__panel:focus-visible { outline: 1px solid var(--rule); outline-offset: var(--s-8); }
.js .tabs__panel[data-hide] { display: none; }

/* el placebo de PageSpeed (optimización): dos tarjetas blancas, la nota de laboratorio frente a la web real */
.cta-band__text strong { color: var(--fg); }
.ps { display: grid; gap: var(--s-16); }
@media (min-width: 40rem) { .ps { grid-template-columns: 1fr 1fr; } }
.ps__card {
  display: grid; gap: var(--s-16); align-content: start; padding: var(--pad-card);
  border-radius: var(--radius); color: var(--black);
  background: var(--panel) radial-gradient(circle, rgba(19, 18, 17, 0.08) 1px, transparent 1.5px) 0 0 / 1.25rem 1.25rem;
  --fg: var(--black); --muted: var(--grey-light); --good: var(--ok); --bad: var(--alert);
}
.ps__score { position: relative; width: 4.75rem; aspect-ratio: 1; }
.ps__gauge { display: block; width: 100%; height: 100%; rotate: -90deg; }
.ps__track { fill: color-mix(in srgb, var(--ok) 12%, transparent); stroke: color-mix(in srgb, var(--ok) 18%, transparent); stroke-width: 3; }
.ps__arc { fill: none; stroke: var(--good); stroke-width: 3; stroke-linecap: round; stroke-dasharray: var(--n) 100; }
.ps__num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--sans); font-size: var(--fs-h3); font-weight: 600; color: var(--good); font-variant-numeric: tabular-nums; }
.js .ps[data-reveal] .ps__arc { stroke-dasharray: 0 100; transition: stroke-dasharray 1.4s var(--ease-swift) 0.2s; }
.js .ps.is-in .ps__arc { stroke-dasharray: var(--n) 100; }
.ps__title { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400; font-variation-settings: "opsz" 144; line-height: var(--lh-h3); letter-spacing: var(--track-h3); }
.ps__title em { display: block; font-weight: 300; color: var(--muted); }
/* miniatura de la página: la del 100 se queda en texto plano; la otra conserva imagen, títulos y botón */
.ps__mock { display: grid; gap: 0.4rem; padding: 0.75rem; border: 1px solid rgba(19, 18, 17, 0.12); border-radius: var(--radius-btn); background: var(--panel); }
.ps__mock i { height: 0.4rem; border-radius: var(--radius-pill); background: rgba(19, 18, 17, 0.14); }
.ps__mock i:nth-child(2n) { width: 80%; }
.ps__mock--bare i:first-child { height: 0.6rem; width: 55%; background: rgba(19, 18, 17, 0.3); }
.ps__mock--rich span { height: 3.6rem; border-radius: var(--radius-btn); background: linear-gradient(135deg, rgb(228, 214, 206), rgb(180, 169, 171)); position: relative; }
.ps__mock--rich span::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; border: 0.4rem solid transparent; border-left: 0.65rem solid var(--panel); margin-left: 0.2rem; } /* icono de vídeo */
.ps__mock--rich i:nth-of-type(1) { height: 0.6rem; width: 70%; background: rgba(19, 18, 17, 0.55); }
.ps__mock--rich b { width: 40%; height: 0.9rem; border-radius: var(--radius-pill); background: var(--black); }
.ps__list { display: grid; gap: var(--s-8); font-size: var(--fs-small); }
.ps__list li { display: flex; align-items: center; gap: 0.5rem; }
.ps__list i { flex: none; font-size: var(--icon-s); color: var(--good); }
.ps__list .is-no { color: var(--muted); }
.ps__list .is-no i { color: var(--bad); }

/* herramientas de medida bajo las tarjetas del placebo */
.ps__tools { grid-column: 1 / -1; display: grid; gap: var(--s-12); padding-top: var(--s-16); border-top: 1px solid var(--rule); }
.ps__tools .t-micro { color: var(--studio); }
.ps__tools ul { display: grid; gap: var(--s-12); }
@media (min-width: 40rem) { .ps__tools ul { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-20); } }
.ps__tools li { display: grid; gap: 0.2rem; font-size: var(--fs-small); color: var(--muted); }
.ps__tools b { font-weight: 600; color: var(--fg); }

/* el hosting (optimización): dos velocímetros en un panel blanco; el barato se queda temblando abajo, el bueno sube */
.dials {
  margin: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); padding: var(--pad-panel);
  border-radius: var(--radius); color: var(--black);
  background: var(--panel) radial-gradient(circle, rgba(19, 18, 17, 0.08) 1px, transparent 1.5px) 0 0 / 1.25rem 1.25rem;
  box-shadow: 0 1.5rem 3rem -2rem rgba(19, 18, 17, 0.35);
  --muted: var(--grey-light); --good: var(--ok); --bad: var(--alert);
}
@media (min-width: 40rem) { .dials { grid-template-columns: 1fr 1fr; } }
.dial { display: grid; justify-items: center; gap: 0.3rem; text-align: center; }
.dial svg { width: 100%; max-width: 18rem; height: auto; overflow: visible; }
.dial__arc { fill: none; stroke: rgba(19, 18, 17, 0.12); stroke-width: 6; stroke-linecap: round; }
.dial__ticks path { stroke: rgba(19, 18, 17, 0.45); stroke-width: 1.5; }
.dial__ticks text { font-family: var(--sans); font-size: 9px; font-weight: 600; fill: var(--muted); }
.dial__needle { transform-box: view-box; transform-origin: 100px 100px; rotate: -90deg; transition: rotate 1.6s var(--ease-swift) 0.3s; }
.dial__needle path { stroke: var(--c, var(--black)); stroke-width: 3; stroke-linecap: round; }
.dial__needle circle { fill: var(--black); }
.dial--cheap { --c: var(--bad); }
.dial--good { --c: var(--good); }
.dials.is-in .dial__needle, html:not(.js) .dial__needle { rotate: var(--deg); }
/* el barato tiembla: el motor va al límite */
.dials.is-in .dial--cheap .dial__needle { animation: dial-strain 0.5s ease-in-out 2s infinite alternate; }
@keyframes dial-strain { from { rotate: calc(var(--deg) - 3deg); } to { rotate: calc(var(--deg) + 2deg); } }
.dial__label { font-weight: 600; }
.dial__note { font-size: var(--fs-small); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .dial__needle { transition: none; } .dials.is-in .dial--cheap .dial__needle { animation: none; } }

/* lo que cuesta la lentitud (optimización): lista de costes | órbita en claro con el reloj de arena como sol */
.cost-list { display: grid; border-top: 1px solid var(--rule); }
.cost-list li { display: flex; align-items: center; gap: var(--s-16); padding: var(--s-16) 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-body); font-weight: 500; }
.cost-list__icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--black); color: var(--white); font-size: var(--icon-m); }
.orbit--cost { --size: min(26rem, 74vw); justify-self: center; margin-block: 2rem; }
.orbit--cost .orbit__tile { width: 3.25rem; height: 3.25rem; font-size: var(--icon-l); }
.theme-light .orbit__tile { background: var(--black); border-color: var(--black); color: var(--white); }
.theme-light .orbit__sun {
  width: 5.5rem; height: 5.5rem; border-color: var(--black); background: var(--black); color: var(--white); font-size: var(--icon-xl);
  box-shadow: 0 0 3.5rem 0.75rem rgba(19, 18, 17, 0.14), 0 0 0 0.75rem rgba(19, 18, 17, 0.04);
}
.cost__head { display: grid; gap: var(--s-24); align-content: center; }
@media (min-width: 64rem) {
  .cost .orbit { margin-block: 0; align-self: center; justify-self: center; }
  .cost .orbit__tile { width: 2.75rem; height: 2.75rem; font-size: var(--icon-m); }
  .cost .integrate__photo { min-height: 28rem; }
}
@media (prefers-reduced-motion: reduce) { .orbit__ring, .orbit__tile { animation: none; } }

/* índice de servicios: filas grandes como el panel de menú; al pasar, la fila se invierte a negro */
.svc-index { border-top: 1px solid var(--rule); transition: border-color 0.4s var(--ease-out); }
.svc-index li { border-bottom: 1px solid var(--rule); transition: border-color 0.4s var(--ease-out); }
/* al pasar, desaparecen las líneas que tocan la fila invertida (la suya y la de encima) para que no asomen por las esquinas redondeadas */
@media (hover: hover) {
  .svc-index li:has(a.svc-row:hover), .svc-index li:has(+ li a.svc-row:hover) { border-bottom-color: transparent; }
  .svc-index:has(li:first-child a.svc-row:hover) { border-top-color: transparent; }
}
.svc-row {
  display: grid; grid-template-columns: var(--num-col) 1fr 3rem; column-gap: var(--s-16); row-gap: var(--s-8); align-items: center;
  padding: clamp(1.5rem, 3.2vw, 2.75rem) clamp(0.75rem, 2vw, 1.5rem);
  border-radius: var(--radius); text-decoration: none;
  transition: background-color 0.5s var(--ease-swift), color 0.5s var(--ease-swift);
}
.svc-row__num { align-self: center; }
@media (max-width: 39.99rem) { .svc-row__name { font-size: var(--fs-subtitle); } .svc-row__go { width: 2.5rem; height: 2.5rem; } }
.svc-row__name {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8) var(--s-16);
  font-family: var(--serif); font-size: var(--fs-menu); font-weight: 400; font-variation-settings: "opsz" 144;
  line-height: var(--lh-item); letter-spacing: var(--track-display);
  transition: transform 0.6s var(--ease-swift);
}
.svc-row__desc { grid-column: 2 / -1; color: var(--muted); }
.svc-row__go {
  grid-column: 3; grid-row: 1; justify-self: end;
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid var(--rule); font-size: var(--icon-m);
  transition: transform 0.6s var(--ease-swift), background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
@media (hover: hover) {
  a.svc-row:hover { --muted: var(--grey-dark); --rule: var(--line-dark); background: var(--black); color: var(--white); }
  a.svc-row:hover .svc-row__name { transform: translateX(0.6rem); }
  a.svc-row:hover .svc-row__go { background: var(--white); color: var(--black); border-color: var(--white); transform: rotate(45deg); }
  a.svc-row:hover .svc__urgent { background: var(--white); color: var(--black); }
}
/* sobre fondo oscuro (blog): la etiqueta va en blanco y la fila se invierte a blanco */
.theme-dark .svc-row .svc__urgent { background: var(--white); color: var(--black); }
@media (hover: hover) {
  .theme-dark a.svc-row:hover { --muted: var(--grey-light); --rule: var(--line-light); background: var(--white); color: var(--black); }
  .theme-dark a.svc-row:hover .svc-row__go { background: var(--black); color: var(--white); border-color: var(--black); }
  .theme-dark a.svc-row:hover .svc__urgent { background: var(--black); color: var(--white); }
}
@media (min-width: 64rem) {
  .svc-row { grid-template-columns: var(--num-col) minmax(0, 1.25fr) minmax(0, 1fr) 3rem; column-gap: var(--grid-gap); }
  .svc-row__desc { grid-column: 3; grid-row: 1; }
  .svc-row__go { grid-column: 4; grid-row: 1; }
}

/* línea de tiempo horizontal (paso a paso): se desplaza con flechas, rueda o dedo; los laterales se desvanecen solo
   hacia donde queda contenido; cada paso se enciende al entrar en pantalla y su tramo de raíl pasa a continuo */
.hline__intro { display: grid; gap: var(--s-24); }
.hline__nav { display: flex; gap: var(--s-12); }
.hline.is-static .hline__nav { display: none; }
/* si caben todos los pasos: el nodo se centra sobre su tarjeta (la tarjeta sigue alineada a la izquierda)
   y el raíl une centro con centro */
.hline.is-static .hstep__node { justify-self: center; }
.hline.is-static .hstep::before { left: calc(50% + var(--node) / 2); right: calc(-50% - var(--s-16) + var(--node) / 2); }
/* variante centrada: título y entrada centrados; flechas centradas debajo de los pasos */
.hline__nav--below { justify-content: center; margin-top: var(--s-32); }
.hline--center .section__intro, .section__head--center .section__intro { color: var(--muted); }
.hline--center .section__intro strong, .section__head--center .section__intro strong { color: var(--fg); }
.hline__viewport {
  --fl: 0rem; --fr: 0rem;
  margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--s-8);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
}
.hline__viewport::-webkit-scrollbar { display: none; }
.hline__viewport:focus-visible { outline: 1px solid var(--fg); outline-offset: 0.25rem; }
.hline:not(.is-start) .hline__viewport { --fl: clamp(3rem, 10vw, 9rem); }
.hline:not(.is-end) .hline__viewport { --fr: clamp(3rem, 10vw, 9rem); }
.hline__list { display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 21rem); gap: var(--s-16); }
.hstep { --node: 2.75rem; position: relative; display: grid; grid-template-rows: auto 1fr; gap: var(--s-20); scroll-snap-align: start; }
/* tramo de raíl hasta el siguiente nodo: discontinuo; continuo cuando el siguiente paso ya está encendido */
.hstep::before {
  content: ""; position: absolute; top: calc(var(--node) / 2); left: var(--node); right: calc(var(--s-16) * -1);
  border-top: 1px dashed var(--rule);
}
.hstep:last-child { scroll-snap-align: end; } /* el último encaja a la derecha: el recorrido llega al final */
.hstep:last-child::before { display: none; }
.hstep:has(+ .hstep.is-on)::before { border-top: 1.5px solid var(--fg); }
.hstep__node {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: var(--node); height: var(--node); border-radius: 50%;
  border: 1px solid var(--rule); background: var(--bg); color: var(--muted);
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.hstep.is-on .hstep__node, html:not(.js) .hstep__node { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.hstep .tl-card { grid-template-columns: 1fr; align-content: start; height: 100%; }
.js .hstep .tl-card { opacity: 0.35; transition: opacity 0.6s var(--ease-out); }
.js .hstep.is-on .tl-card { opacity: 1; }
@media (min-width: 64rem) {
  .hline__list { grid-auto-columns: minmax(clamp(17rem, 20vw, 22rem), 1fr); } /* si caben todos, se reparten el ancho */
}

/* frase centrada (sección corta de un solo mensaje) */
.statement { margin-bottom: 0; }
.statement .t-title { max-width: 22ch; }
.statement .t-lead { max-width: 46rem; color: var(--muted); }
.statement .t-lead strong { color: var(--fg); }
/* etiquetas sin acción (lo que cuesta la lentitud) */
.pills-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-12); margin-top: var(--s-16); }
.pills-row .pill { justify-self: auto; }
.pills-row .pill:hover { background: none; color: inherit; }
/* SLA: panel con los plazos sobre una regla de 24 h (se rellena al aparecer) y lo que incluye */
.sla-board {
  display: grid; gap: clamp(1.75rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3.5vw, 3rem);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: rgba(253, 252, 250, 0.03);
}
.sla-board__cap { color: var(--muted); }
.sla-row { display: grid; gap: var(--s-16); }
.sla-row__label { display: grid; gap: var(--s-8); }
.sla-row__label .t-label { color: var(--muted); }
.sla-row__value {
  display: flex; align-items: baseline; gap: 0.05em;
  font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 144;
  font-size: var(--fs-display); line-height: 1; letter-spacing: -0.035em; white-space: nowrap;
}
.sla-ruler__track { display: block; height: 0.75rem; border-radius: var(--radius-pill); background: rgba(253, 252, 250, 0.08); overflow: hidden; }
.sla-ruler__fill { display: block; width: var(--w); height: 100%; border-radius: var(--radius-pill); background: var(--white); transform-origin: left; }
.sla-ruler__ticks { display: flex; justify-content: space-between; margin-top: var(--s-8); font-size: var(--fs-nano); color: var(--muted); font-variant-numeric: tabular-nums; }
.sla-board__incl { display: grid; gap: var(--s-16); padding-top: var(--pad-panel); border-top: 1px solid var(--rule); }
.sla-board__incl li { display: flex; align-items: center; gap: var(--s-12); }
.sla-board__check {
  flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--white); color: var(--black); font-size: var(--icon-s);
}
.sla__cta { margin-top: var(--s-8); }
.stats--1 { grid-template-columns: minmax(0, 14rem); margin-block: var(--s-8); }
/* el formulario no queda tapado por la barra flotante al llegar por el ancla */
#propuesta { scroll-margin-top: 7rem; }
@media (min-width: 40rem) { .sla-board__incl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .sla-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); column-gap: var(--grid-gap); align-items: center; }
  .sla-board__incl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .aside-layout .sla-board__incl { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* en la columna del 60 %: dos por fila */
  .aside-layout .sla-row { grid-template-columns: auto minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .sla-board[data-reveal] .sla-ruler__fill { transform: scaleX(0); transition: transform 1.4s var(--ease-swift); transition-delay: calc(0.25s + var(--i, 0) * 0.35s); }
  .sla-row:nth-of-type(2) .sla-ruler__fill { --i: 1; }
  .js .sla-board.is-in .sla-ruler__fill { transform: none; }
}

/* bloque con formulario a la derecha (cómo se dimensiona): sin tarjeta, una línea fina separa el título del formulario */
.quote-form { display: grid; gap: var(--s-24); align-content: start; }
.quote-form__title { padding-bottom: var(--s-16); border-bottom: 1px solid var(--fg); }
.quote-form__title em { font-weight: 300; color: var(--muted); }
.dimension__kicker { color: var(--muted); }
/* precio de entrada «desde» (páginas locales): cifra en la serif del panel de compromiso, sin tabla de tarifas */
.price-from {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-8);
  padding-block: var(--s-16); border-block: 1px solid var(--rule);
  font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.price-from__label, .price-from__per { font-family: var(--sans); font-size: var(--fs-small); letter-spacing: 0; color: var(--muted); }
.price-from__note { font-size: var(--fs-small); color: var(--muted); }
.price-from__note strong { font-weight: 600; color: var(--fg); }
/* variante 40/60 con la columna izquierda fija al bajar (sin estirar a la altura del contenido) */
@media (min-width: 64rem) {
  .aside-layout--40.aside-layout--sticky { align-items: start; }
  .aside-layout--40.aside-layout--sticky .aside-layout__head { position: sticky; top: 6.5rem; display: grid; }
}

/* formularios de Gravity Forms (clase CSS «gf-g» en el formulario): mismo lenguaje que el resto de la web.
   Opciones de radio en píldora, campos con borde fino, consentimiento en texto pequeño, botón .btn */
.gf-g .gform_fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-20) var(--s-16); }
.gf-g .gfield { grid-column: 1 / -1; display: grid; gap: var(--s-8); min-width: 0; margin: 0; padding: 0; border: 0; }
@media (max-width: 39.99rem) { .gf-g .gfield--width-half { grid-column: 1 / -1; } }
@media (min-width: 40rem) { .gf-g .gfield--width-half { grid-column: span 1; } }
.gf-g .gfield_label { padding: 0; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.gf-g .gfield_required, .gf-g .gfield_description_inline { margin-left: 0.2em; font-weight: 400; text-transform: none; letter-spacing: 0; }
.gf-g input[type="text"], .gf-g input[type="email"], .gf-g input[type="tel"], .gf-g input[type="url"], .gf-g textarea {
  width: 100%; height: 3rem; padding: 0 var(--s-16);
  border: 1px solid var(--rule); border-radius: var(--radius-btn); background: transparent;
  font: inherit; font-size: var(--fs-body); color: var(--fg);
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.gf-g textarea { height: 8.5rem; min-height: 6rem; padding-block: var(--s-12); resize: vertical; } /* Gravity Forms lo pinta con 10 filas: lo dejamos en unas 4; se puede estirar */
.gf-g input::placeholder, .gf-g textarea::placeholder { color: var(--muted); opacity: 0.7; }
.gf-g input:focus, .gf-g textarea:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px rgba(19, 18, 17, 0.1); }
.gf-g .gfield_radio { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.gf-g .gchoice { position: relative; }
.gf-g .gchoice input { position: absolute; opacity: 0; pointer-events: none; }
.gf-g .gchoice label {
  display: inline-flex; align-items: center; height: 2.75rem; padding: 0 var(--s-20); cursor: pointer;
  border: 1px solid var(--rule); border-radius: var(--radius-pill);
  font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.gf-g .gchoice label:hover { border-color: var(--fg); }
.gf-g .gchoice input:checked + label { background: var(--black); border-color: var(--black); color: var(--white); }
.gf-g .gchoice input:focus-visible + label { outline: 2px solid var(--black); outline-offset: 2px; }
.gf-g .ginput_container_consent { display: flex; align-items: flex-start; gap: var(--s-12); }
.gf-g .ginput_container_consent input {
  flex: none; width: 1.125rem; height: 1.125rem; margin: 0.15rem 0 0;
  -webkit-appearance: none; appearance: none;
  border: 1.5px solid currentColor; border-radius: 0.25rem; background: transparent; color: var(--fg);
  cursor: pointer; transition: background-color 0.2s var(--ease-out);
}
/* marcada: fondo del color del texto y check en el color del fondo (igual en Safari, Chrome y Firefox) */
.gf-g .ginput_container_consent input:checked {
  background: var(--fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23131211' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 85% no-repeat;
  border-color: var(--fg);
}
.gf-g .ginput_container_consent input:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.gf-g .gfield_consent_label { font-size: var(--fs-small); color: var(--muted); }
.gf-g .gfield_consent_label a { color: var(--fg); }
.gf-g .gform_footer { display: grid; justify-items: start; gap: var(--s-12); margin-top: var(--s-24); padding: 0; }
.gf-g .gform_footer .gf-turnstile-container { order: -1; margin-bottom: var(--s-8); } /* Cloudflare Turnstile, encima del botón */
.gf-g .gform_footer .cf-turnstile-br { display: none; }
.gf-g__note { font-size: var(--fs-small); color: var(--muted); }
/* validación de Gravity Forms */
.gf-g .gfield_error input, .gf-g .gfield_error textarea { border-color: var(--alert); }
.gf-g .validation_message, .gf-g .gform_validation_errors { font-size: var(--fs-small); color: var(--alert); }
.gf-g .gform_required_legend { display: none; }
/* formulario sobre fondo oscuro: lo elegido en blanco */
.theme-dark .gf-g .gchoice input:checked + label { background: var(--white); border-color: var(--white); color: var(--black); }
.theme-dark .gf-g .gchoice input:focus-visible + label { outline-color: var(--white); }
.theme-dark .gf-g input:focus, .theme-dark .gf-g textarea:focus { box-shadow: 0 0 0 3px rgba(253, 252, 250, 0.12); }
/* sobre claro (formulario de mantenimiento): check blanco sobre negro */
.theme-light .gf-g .ginput_container_consent input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fdfcfa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* pasos (línea de tiempo) a la izquierda + foto a la derecha a la misma altura (cómo arrancamos) */
.steps-photo { display: grid; gap: var(--title-gap); }
.steps-photo__main { display: grid; align-content: start; }
@media (min-width: 64rem) {
  .steps-photo { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: stretch; }
  .steps-photo__img { width: 100%; }
}

/* animación «borrar el virus no es arreglar el problema»: panel oscuro con retícula de puntos; el texto del panel
   va cambiando con la historia (disparo → vuelve por la puerta → cierro la puerta → no vuelve) */
.vx-layout { align-items: center; }
.vx {
  position: relative; margin: 0; padding: var(--pad-card);
  border-radius: var(--radius); color: var(--black);
  /* panel blanco puro con retícula de puntos suave */
  background: var(--panel) radial-gradient(circle, rgba(19, 18, 17, 0.1) 1px, transparent 1.5px) 0 0 / 1.25rem 1.25rem;
  box-shadow: 0 1.5rem 3rem -2rem rgba(19, 18, 17, 0.35);
}
.vx__cap {
  position: absolute; top: clamp(1.25rem, 2.5vw, 2rem); left: clamp(1.25rem, 2.5vw, 2rem);
  display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); transition: opacity 0.35s var(--ease-out);
}
.vx__cap::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c, var(--muted)); }
.vx__cap.is-bad { --c: var(--alert); color: var(--alert); }
.vx__cap.is-ok { --c: var(--ok); color: var(--ok); }
.vx__svg { display: block; width: 100%; height: auto; overflow: visible; }
.vx svg * { transform-box: fill-box; transform-origin: center; }
.vx-site path, .vx-site line { fill: none; stroke: rgba(19, 18, 17, 0.55); stroke-width: 2; }
.vx-site circle { fill: rgba(19, 18, 17, 0.35); }
.vx-site__bar { fill: rgba(19, 18, 17, 0.1); }
.vx-label { fill: var(--muted); font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.vx-door rect:first-child { fill: var(--black); transform: scaleY(0); }
.vx-lock path { fill: none; stroke: var(--black); stroke-width: 3.5; stroke-linecap: round; }
.vx-lock rect { fill: var(--black); }
.vx-lock circle, .vx-lock line { fill: var(--white); stroke: var(--white); stroke-width: 3; stroke-linecap: round; }
.vx-lock { opacity: 0; transform: translate(236px, 146px); }
.vx-virus { transform: translate(220px, 168px) scale(0); }
.vx-virus__body circle, .vx-virus__body line { fill: var(--alert); stroke: var(--alert); stroke-width: 3; stroke-linecap: round; }
.vx-virus__body > circle:first-child { fill: color-mix(in srgb, var(--alert) 15%, transparent); stroke-width: 2.5; }
.vx-virus__eye { fill: var(--alert); }
.vx-virus__body { animation: vx-spin 9s linear infinite; }
.vx-burst { transform: translate(-100px, -100px); }
.vx-bit { fill: var(--alert); opacity: 0; }
.vx-flash { fill: color-mix(in srgb, var(--alert) 35%, transparent); opacity: 0; transform: translate(-200px, -200px); }
.vx-cross { transform: translate(560px, 60px); }
.vx-cross circle, .vx-cross line { fill: none; stroke: var(--black); stroke-width: 2; }
.vx-cross__dot { fill: var(--black) !important; }
@keyframes vx-spin { to { rotate: 360deg; } }
/* sin movimiento: estado final (puerta cerrada, sin virus) */
@media (prefers-reduced-motion: reduce) {
  .vx-door rect:first-child { transform: none; }
  .vx-lock { opacity: 1; transform: translate(236px, 146px); }
  .vx-cross { transform: translate(430px, 160px); }
  .vx-virus__body { animation: none; }
}

/* caso real como expediente en papel sobre fondo oscuro (web hackeada) */
.aside-layout__head a:not(.btn):not(.arrow-link) { color: var(--fg); text-underline-offset: 0.2em; }
.case {
  display: grid; gap: var(--s-16); align-content: start;
  padding: var(--pad-panel);
  border-radius: var(--radius); background: var(--white); color: var(--black);
  box-shadow: 0 2rem 4rem -2rem rgba(0, 0, 0, 0.9);
  --fg: var(--black); --muted: var(--grey-light); --rule: var(--line-light);
}
.case__top { display: flex; justify-content: space-between; gap: var(--s-16); padding-bottom: var(--s-16); border-bottom: 1px solid var(--black); color: var(--muted); }
.case__title { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400; font-variation-settings: "opsz" 144; line-height: var(--lh-h3); letter-spacing: var(--track-h3); }
.case__title em { font-weight: 300; color: var(--muted); }
.case p { color: var(--muted); }
.case strong { color: var(--black); font-weight: 600; }
.case__map { margin: var(--s-8) 0; padding: var(--s-20) var(--s-16) var(--s-12); border-radius: var(--radius-btn); background: #f3f1ed; }
.case__map svg { display: block; width: 100%; height: auto; }
.case__map text { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; fill: var(--black); }
.case__line { stroke: rgba(19, 18, 17, 0.45); stroke-width: 1.25; fill: none; }
.case__leak { stroke: var(--alert); stroke-width: 1.25; stroke-dasharray: 3 4; fill: none; }
.case__node { fill: var(--white); stroke: rgba(19, 18, 17, 0.18); stroke-width: 1; filter: drop-shadow(0 6px 10px rgba(19, 18, 17, 0.08)); }
.case__node--bad { fill: var(--black); stroke: var(--black); }
.case__node--leak { fill: #fbeeeb; stroke: color-mix(in srgb, var(--alert) 55%, transparent); stroke-dasharray: 3 3; }
.case__ico circle, .case__ico path, .case__ico rect, .case__ico ellipse { fill: none; stroke: var(--black); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.case__ico--inv rect, .case__ico--inv path { stroke: var(--white); }
.case__ico--leak path, .case__ico--leak ellipse { stroke: var(--alert); }
.case__in { fill: var(--white) !important; }
.case__in--leak { fill: var(--alert) !important; }
.case__dot { fill: var(--alert); } /* la visibilidad la controla la animación (atributo opacity) */
.case__note { padding-left: var(--s-16); border-left: 2px solid var(--alert); }
.case__moral { padding-top: var(--s-16); border-top: 1px dashed var(--line-light); }
.js .case[data-reveal] { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-swift); }
.js .case.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .case__dot { display: none; } }

/* arco de tarjetas (¿por qué quieres migrar?): la activa arriba en el centro, el resto baja hacia los lados y se apaga */
.arc { --step: clamp(4.25rem, 8vw, 7.25rem); --drop: 2.4rem; display: grid; justify-items: center; gap: var(--s-16); outline: none; }
.arc:focus-visible { outline: 1px solid var(--fg); outline-offset: 0.5rem; border-radius: var(--radius); }
.arc__stage {
  position: relative; width: 100%; height: calc(11rem + var(--drop) * 2); /* el JS la ajusta a la tarjeta más alta */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.arc__card {
  --d: 0; --ad: 0;
  position: absolute; top: 0; left: 50%; width: min(16rem, 70%);
  display: grid; gap: var(--s-8); justify-items: center; text-align: center;
  padding: var(--s-16) var(--s-20) var(--s-20);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: rgba(30, 28, 27, 0.92); box-shadow: 0 1.25rem 2.5rem -1.25rem rgba(0, 0, 0, 0.9);
  translate: calc(-50% + var(--d) * var(--step)) calc(var(--ad) * var(--drop));
  scale: calc(1 - var(--ad) * 0.12);
  opacity: calc(1 - var(--ad) * 0.38);
  z-index: calc(10 - var(--ad));
  cursor: pointer;
  transition: translate 0.7s var(--ease-swift), scale 0.7s var(--ease-swift), opacity 0.5s var(--ease-out), background-color 0.5s var(--ease-out);
}
.arc__stage { touch-action: pan-y; } /* el gesto horizontal lo gestiona main.js */
.arc__card.is-active { background: rgb(42, 40, 38); border-color: rgba(253, 252, 250, 0.22); cursor: default; }
.arc__tag { padding: var(--s-4) var(--s-12); border-radius: var(--radius-pill); background: rgba(253, 252, 250, 0.1); color: var(--fg); }
.arc__title { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400; font-variation-settings: "opsz" 144; line-height: 1.15; letter-spacing: var(--track-h3); }
.arc__card p { font-size: var(--fs-small); color: var(--muted); }
.arc__card strong { color: var(--fg); font-weight: 600; }
.arc__count { font-size: var(--fs-small); color: var(--muted); text-align: center; }
.arc__count b { display: block; font-family: var(--serif); font-weight: 400; font-size: var(--fs-stat); line-height: 1; color: var(--fg); font-variant-numeric: lining-nums tabular-nums; }
.arc__nav { display: flex; align-items: center; gap: var(--s-16); }
.arc__dots { display: flex; gap: 0.4rem; }
.arc__dot { width: 0.45rem; height: 0.45rem; border-radius: var(--radius-pill); background: var(--rule); transition: width 0.4s var(--ease-swift), background-color 0.4s var(--ease-out); }
.arc__dot.is-active { width: 1.6rem; background: var(--fg); }
/* sin JS: las tarjetas en columna, todas visibles */
html:not(.js) .arc__stage { height: auto; display: grid; gap: var(--s-12); }
html:not(.js) .arc__card { position: static; translate: none; scale: none; opacity: 1; width: 100%; }
html:not(.js) .arc__count, html:not(.js) .arc__nav { display: none; }
@media (prefers-reduced-motion: reduce) { .arc__card { transition: none; } }
@media (max-width: 39.99rem) { .arc { --step: 3.25rem; } .arc__card { opacity: calc(1 - var(--ad) * 0.6); } }

/* mudanza invisible (migraciones): panel blanco con dos servidores, DNS y tráfico en puntos */
.mv { position: relative; margin: var(--s-16) 0 0; padding: var(--pad-card);
  border-radius: var(--radius); color: var(--black);
  background: var(--panel) radial-gradient(circle, rgba(19, 18, 17, 0.09) 1px, transparent 1.5px) 0 0 / 1.25rem 1.25rem;
  --fg: var(--black); --muted: var(--grey-light); }
.mv .vx__cap { top: clamp(1rem, 2vw, 1.5rem); left: clamp(1rem, 2vw, 1.5rem); }
.mv__svg { display: block; width: 100%; height: auto; margin-top: var(--s-16); }
.mv text { font-family: var(--sans); font-weight: 600; }
.mv-src { fill: var(--black); }
.mv-src__t { fill: var(--white); font-size: 12px; }
.mv-path { fill: none; stroke: rgba(19, 18, 17, 0.45); stroke-width: 1.5; stroke-dasharray: 4 4; transition: stroke 0.5s, opacity 0.5s; }
.mv-path.is-off { opacity: 0.15; }
.mv-server__box { fill: var(--panel); stroke: rgba(19, 18, 17, 0.6); stroke-width: 1.5; transition: fill 0.5s, stroke 0.5s; }
.mv-server__rack { stroke: rgba(19, 18, 17, 0.35); stroke-width: 1.5; }
.mv-led { fill: var(--ok); transition: fill 0.5s; }
.mv-server.is-new .mv-led { fill: rgba(19, 18, 17, 0.2); }
.mv-server.is-new.is-live .mv-led { fill: var(--ok); }
.mv-server.is-old.is-idle .mv-server__box { fill: #f1efeb; stroke: rgba(19, 18, 17, 0.3); }
.mv-server.is-old.is-idle .mv-led { fill: rgba(19, 18, 17, 0.25); }
.mv-label { fill: var(--black); font-size: 12.5px; }
.mv-note { fill: var(--muted); font-size: 11.5px; transition: opacity 0.4s; }
.mv-copy__track { fill: rgba(19, 18, 17, 0.1); }
.mv-copy__fill { fill: var(--black); transform-box: fill-box; transform-origin: left; transform: scaleX(0); }
.mv-dns__box { fill: var(--panel); stroke: var(--black); stroke-width: 1.5; }
.mv-dns__t { fill: var(--black); font-size: 11px; letter-spacing: 0.06em; }
.mv-dns__arrow { fill: none; stroke: var(--black); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; transform: rotate(180deg); transition: transform 0.6s var(--ease-swift); }
.mv-dns__arrow.is-right { transform: none; }
.mv-ok { fill: var(--ok); font-size: 12px; transition: opacity 0.4s; }
.mv-dot { fill: var(--black); }
/* llamada a la acción bajo la línea de tiempo del protocolo */
.protocol__main { display: grid; gap: var(--gap-block); align-content: start; }
/* escritorio: las dos columnas a la misma altura; la llamada a la acción cae al pie de la columna */
@media (min-width: 64rem) {
  .protocol { align-items: stretch; }
  .protocol__main { align-content: space-between; }
  .protocol .aside-layout__head { display: flex; flex-direction: column; gap: var(--s-20); }
  .protocol .mv { margin-top: auto; } /* el pie del panel y el del botón quedan a la misma altura */
}
.protocol__cta { display: grid; gap: var(--s-20); justify-items: start; padding-top: var(--pad-card); border-top: 1px solid var(--rule); }
.protocol__cta .t-lead { color: var(--muted); }
.protocol__q em { font-weight: 300; color: var(--muted); }
.protocol__q + .t-lead { margin-top: calc(var(--s-12) * -1); }
.protocol__cta strong { color: var(--fg); }
/* el correo: cuatro comprobaciones en fila */
.mail-checks { display: grid; gap: var(--s-24); }
.mail-check { display: grid; gap: var(--s-8); justify-items: start; padding-top: var(--s-20); border-top: 1px solid var(--rule); }
.mail-check .sla-board__check { margin-bottom: var(--s-8); }
.mail-check p { color: var(--muted); }
@media (min-width: 48rem) { .mail-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap); } }
@media (min-width: 64rem) { .mail-checks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Core Web Vitals antes/después (optimización): tres barras bueno | mejorable | malo con un marcador que pasa del rojo al verde */
.cwv { --good: var(--ok); --mid: var(--warn); --bad: var(--alert); }
.cwv__rows { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); margin-top: clamp(2.5rem, 4vw, 3rem); }
.cwv__row { display: grid; grid-template-columns: 7.5rem 1fr 6rem; grid-template-rows: auto auto; column-gap: var(--s-16); row-gap: 0.35rem; align-items: center; }
.cwv__name { grid-row: 1 / 3; display: grid; font-size: var(--fs-small); color: var(--muted); line-height: 1.3; }
.cwv__name b { font-size: var(--fs-body); font-weight: 600; color: var(--black); letter-spacing: 0.04em; }
.cwv__bar { position: relative; height: 0.5rem; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--good) 0 40%, var(--mid) 40% 65%, var(--bad) 65% 100%); }
.cwv__mark { position: absolute; top: 50%; left: calc(var(--x, var(--from)) * 100%); width: 1.1rem; height: 1.1rem; translate: -50% -50%;
  border-radius: 50%; background: var(--panel); border: 2px solid var(--black); box-shadow: 0 0.25rem 0.6rem rgba(19, 18, 17, 0.25); }
.cwv__ticks { position: relative; height: 1em; font-size: var(--fs-nano); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.cwv__ticks span { position: absolute; top: 0; translate: -50% 0; white-space: nowrap; }
.cwv__ticks span:first-child { left: 40%; }
.cwv__ticks span:last-child { left: 65%; }
.cwv__state { grid-column: 3; grid-row: 1 / 3; justify-self: end; font-size: var(--fs-small); font-weight: 600; color: var(--c, var(--bad)); transition: color 0.3s var(--ease-out); }
.cwv__state.is-mid { --c: var(--mid); }
.cwv__state.is-good { --c: var(--good); }
.cwv__legend { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-20); margin-top: clamp(1.5rem, 3vw, 2rem); padding-top: var(--s-16); border-top: 1px solid rgba(19, 18, 17, 0.1); color: var(--muted); }
.cwv__legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.cwv__legend span::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--good); }
.cwv__legend .is-mid::before { background: var(--mid); }
.cwv__legend .is-bad::before { background: var(--bad); }
@media (max-width: 39.99rem) {
  .cwv__row { grid-template-columns: 1fr auto; }
  .cwv__name { grid-row: 1; display: flex; gap: 0.5rem; align-items: baseline; }
  .cwv__state { grid-column: 2; grid-row: 1; }
  .cwv__bar, .cwv__ticks { grid-column: 1 / -1; }
}
/* dónde miro yo (optimización): rejilla de tarjetas; la quinta, «La prueba», ocupa el ancho entero y va en claro */
.look { display: grid; gap: var(--s-12); }
@media (min-width: 40rem) { .look { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 40rem) and (max-width: 63.99rem), (min-width: 64rem) and (max-width: 74.99rem) { .look { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.look__item {
  display: grid; gap: var(--s-8); align-content: start; padding: var(--pad-card);
  border: 1px solid var(--rule); border-radius: var(--radius); background: rgba(253, 252, 250, 0.03);
  transition: border-color 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}
.look__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-16); color: var(--muted); }
.look__top i { font-size: var(--icon-l); color: var(--fg); }
.look__item p { color: var(--muted); }
.look__item:nth-child(5) { background: var(--white); border-color: var(--white); color: var(--black); --fg: var(--black); --muted: var(--grey-light); }
@media (hover: hover) { .look__item:not(:nth-child(5)):not(.look__item--fall):hover { border-color: rgba(253, 252, 250, 0.35); background: rgba(253, 252, 250, 0.06); } }

/* casilla libre de la rejilla: cascada de carga decorativa (barras que entran escalonadas) */
.look__item--fall { border-style: dashed; background: none; }
.fall { position: relative; display: grid; gap: 0.45rem; padding-top: 0.25rem; }
.fall::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 20%); opacity: 0.6; }
.fall i { position: relative; height: 0.4rem; margin-left: var(--s); width: var(--w); border-radius: var(--radius-pill); background: rgba(253, 252, 250, 0.55); transform-origin: left; }
.fall i:nth-child(3n) { background: var(--studio); }
.js .fall[data-reveal] i { transform: scaleX(0); transition: transform 0.7s var(--ease-swift) var(--d); }
.js .fall.is-in i { transform: none; }

/* circuito de reventa: cliente → agencia → Gregores One; arriba lo que va (pago, trabajo), abajo lo que vuelve;
   un punto recorre cada tramo */
.flow { display: grid; gap: var(--s-24); justify-items: center; margin: 0 0 clamp(3rem, 6vw, 5rem); }
.flow__node { display: grid; justify-items: center; gap: var(--s-12); text-align: center; }
.flow__icon {
  display: grid; place-items: center; width: 5.5rem; height: 5.5rem; border-radius: var(--radius-l);
  border: 1px solid var(--rule); background: #0b0b0a; font-size: var(--icon-xl);
  box-shadow: 0 1rem 2.5rem -0.75rem rgba(0, 0, 0, 0.9);
}
.flow__icon img { width: 40%; height: auto; filter: invert(1); }
.flow__node b { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400; font-variation-settings: "opsz" 144; letter-spacing: var(--track-h3); }
.flow__node.is-hub .flow__icon { width: 7rem; height: 7rem; border-radius: var(--radius-l); background: var(--white); color: var(--black); border-color: var(--white);
  box-shadow: 0 0 3rem 0.5rem rgba(196, 185, 187, 0.22), 0 0 0 0.6rem rgba(196, 185, 187, 0.06); font-size: var(--icon-2xl); }
.flow__badge {
  padding: var(--s-4) var(--s-12); border: 1px solid var(--rule); border-radius: var(--radius-pill);
  font-style: normal; font-size: var(--fs-label); font-weight: 600; color: var(--fg);
}
.flow__link { display: grid; justify-items: center; gap: var(--s-8); text-align: center; }
.flow__label { font-size: var(--fs-small); color: var(--muted); }
.flow__label::before { content: "↓ "; }
.flow__label--back::before { content: "↑ "; }
.flow__line { display: none; }
@media (min-width: 56rem) {
  .flow { grid-template-columns: auto minmax(8rem, 1fr) auto minmax(8rem, 1fr) auto; align-items: center; column-gap: var(--s-16); }
  .flow__node { align-self: start; }
  .flow__node:not(.is-hub) { margin-top: 0.75rem; } /* centrados con el nodo grande */
  .flow__link { gap: var(--s-12); align-self: start; margin-top: 2rem; width: 100%; }
  .flow__label::before, .flow__label--back::before { content: none; }
  .flow__line { position: relative; display: block; width: 100%; height: 1px; border-top: 1px dashed rgba(253, 252, 250, 0.32); }
  .flow__line::after { /* punta de flecha */
    content: ""; position: absolute; top: -4.5px; right: 0; width: 8px; height: 8px;
    border-top: 1px solid var(--muted); border-right: 1px solid var(--muted); rotate: 45deg;
  }
  .flow__line--back::after { right: auto; left: 0; rotate: -135deg; }
  .flow__line i { position: absolute; top: -3.5px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--white); opacity: 0; }
  .flow.is-in .flow__line i { animation: flow-dot 2.8s var(--ease-out) infinite; }
  .flow.is-in .flow__line--back i { animation-name: flow-dot-back; animation-delay: 1.4s; background: var(--studio); }
  .flow.is-in .flow__link + .flow__node + .flow__link .flow__line i { animation-delay: 0.7s; }
  .flow.is-in .flow__link + .flow__node + .flow__link .flow__line--back i { animation-delay: 2.1s; }
}
@keyframes flow-dot { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }
@keyframes flow-dot-back { 0% { left: calc(100% - 6px); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flow__line i { display: none; } }
/* tres razones en fila abierta: línea fina arriba con acento, número, título y frase */
.perks { display: grid; gap: var(--s-32); }
.perk { position: relative; display: grid; gap: var(--s-8); padding-top: var(--s-20); border-top: 1px solid var(--rule); }
.perk::before { content: ""; position: absolute; top: -1px; left: 0; width: 2rem; height: 2px; background: var(--fg); }
.perk__num { color: var(--muted); }
.perk p { color: var(--muted); }
@media (min-width: 48rem) { .perks { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap); } }

/* webs realizadas: plano inclinado con filas de capturas en bucle (direcciones alternas, velocidades distintas);
   los cuatro bordes se desvanecen; se para solo fuera de pantalla */
.showcase { overflow: hidden; }
.showcase .t-title { max-width: 30ch; }
.showcase__stage {
  position: relative; height: clamp(26rem, 50vw, 44rem);
  margin-inline: calc(var(--gutter) * -1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
          mask-composite: intersect;
}
.showcase__plane {
  position: absolute; left: 50%; top: 50%; width: 140%; /* las filas empiezan justo fuera del borde: el bucle nunca deja hueco */
  display: grid; gap: var(--s-20);
  translate: -50% -50%; rotate: -10deg;
}
.showcase__track { display: flex; width: max-content; animation: showcase-run var(--dur, 70s) linear infinite; }
.showcase__row:nth-child(even) .showcase__track { animation-direction: reverse; }
.showcase__row:nth-child(even) { margin-left: -9rem; } /* filas desplazadas: las tarjetas no quedan en columna */
.showcase__list { display: flex; gap: var(--s-20); padding-right: var(--s-20); }
.showcase__card {
  flex: none; width: clamp(16rem, 26vw, 24rem); aspect-ratio: 16 / 10;
  overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--rule); background: #1d1b19;
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.8);
}
.showcase__card img { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 0.6s var(--ease-out); }
.showcase__card img.is-loaded { opacity: 1; }
.showcase.is-paused .showcase__track { animation-play-state: paused; } /* solo fuera de pantalla; el cursor no lo para */
@keyframes showcase-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .showcase__track { animation: none; } }

/* cierre de página interior (sin foto ni logos) */
.page-close { margin-inline: 0; padding: var(--section-top) var(--gutter) var(--section-bottom); } /* .close trae su propio margen lateral */
.page-close .close__title { max-width: 22ch; }
.page-close .close__row { margin-block: var(--s-40) 0; }
/* cierre con prueba social: todo centrado, logos y testimonios en movimiento */
.page-close--proof { display: grid; gap: clamp(3.5rem, 7vw, 6rem); justify-items: center; text-align: center; overflow: hidden; }
.page-close__head { display: grid; gap: var(--s-24); justify-items: center; }
.page-close--proof .close__title { max-width: 24ch; }
.page-close--proof .close__title em { display: inline; }
.page-close--proof .close__text { max-width: 52ch; }
.page-close__logos .logos { justify-content: center; }
/* tira de testimonios: se desplaza despacio, se para al pasar el cursor; los extremos se desvanecen */
.quote-strip {
  width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1);
  overflow: hidden; text-align: left;
  --fade: 8%; /* móvil: desvanecido corto para no comerse la tarjeta */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
@media (min-width: 64rem) { .quote-strip { --fade: 22%; } }
.quote-strip__track { display: flex; width: max-content; animation: quote-run 60s linear infinite; }
.quote-strip:hover .quote-strip__track { animation-play-state: paused; }
.quote-strip__list { display: flex; gap: var(--s-20); padding-right: var(--s-20); }
.quote-card {
  display: grid; align-content: start; gap: var(--s-20);
  width: min(26rem, 80vw); padding: var(--s-32);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: rgba(253, 252, 250, 0.03);
}
.quote-card__who { display: flex; align-items: center; gap: var(--s-16); }
.quote-card__who img { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; }
.quote-card__who p { display: grid; gap: 0.1rem; }
.quote-card__who strong { font-weight: 600; font-size: var(--fs-body-l); }
.quote-card__who span { font-size: var(--fs-small); color: var(--muted); }
.quote-card blockquote p {
  font-family: var(--serif); font-size: var(--fs-lead); font-weight: 300; font-variation-settings: "opsz" 144;
  line-height: 1.45; color: rgba(253, 252, 250, 0.86);
}
@keyframes quote-run { to { transform: translateX(-50%); } }
.quote-strip.is-touch { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.quote-strip.is-touch::-webkit-scrollbar { display: none; }
.quote-strip.is-touch .quote-strip__track { animation: none; }
.page-close__cta { display: grid; justify-items: center; margin-top: var(--s-16); }

/* ---------- BLOG: rejilla de tarjetas (imagen + fecha + título + extracto) ---------- */
.posts { display: grid; gap: var(--grid-gap); }
@media (min-width: 48rem) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.posts > li { display: grid; }
.post-card {
  position: relative; display: grid; grid-template-rows: auto 1fr;
  border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
  background: var(--bg);
  transition: border-color 0.4s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.post-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--studio); display: grid; place-items: center; }
.post-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-swift); }
.post-card__logo { width: 3.5rem; height: auto; opacity: 0.5; } /* entrada sin imagen destacada */
.post-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-12); padding: clamp(1.25rem, 2vw, 1.75rem); }
.post-card__meta { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.post-card__cat { color: var(--fg); }
.post-card__title {
  font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400; font-variation-settings: "opsz" 144;
  line-height: 1.15; letter-spacing: var(--track-h3); text-wrap: balance;
}
.post-card__link { text-decoration: none; }
.post-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* toda la tarjeta es el enlace */
.post-card__link:focus-visible { outline: none; }
.post-card:has(.post-card__link:focus-visible) { outline: 2px solid var(--fg); outline-offset: 3px; }
.post-card__excerpt {
  color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card__more { display: inline-flex; align-items: center; gap: var(--s-8); margin-top: auto; padding-top: var(--s-12); }
.post-card__more i { font-size: var(--icon-xs); transition: transform 0.5s var(--ease-swift); }
@media (hover: hover) {
  .post-card:hover { border-color: var(--fg); box-shadow: 0 1.5rem 3rem -1.75rem rgba(19, 18, 17, 0.45); }
  .post-card:hover .post-card__img { transform: scale(1.04); }
  .post-card:hover .post-card__more i { transform: translate(0.2rem, -0.2rem); }
}
.posts__empty { color: var(--muted); }

/* paginación del blog */
.pagination { margin-top: var(--s-48); }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-8); }
.pagination .page-numbers {
  display: grid; place-items: center; min-width: 3rem; height: 3rem; padding-inline: var(--s-12);
  border: 1px solid var(--rule); border-radius: var(--radius-pill); text-decoration: none; font-weight: 600;
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.pagination .page-numbers.current, .pagination a.page-numbers:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- ARTÍCULO DEL BLOG ---------- */
/* cabecera: título a tamaño de sección (los títulos de artículo son largos) + autor y fecha */
.post-hero .page-hero__title { max-width: 26ch; font-size: var(--fs-title); line-height: var(--lh-title); }
@media (min-width: 64rem) { .post-hero .page-hero__title { font-size: calc(var(--fs-h1) * 0.88); line-height: 1.04; } } /* en escritorio, igual que la home */
.post-hero .page-hero__copy { gap: var(--s-32); }
/* una sola columna (sin foto a la derecha), alineada al margen como el resto de páginas */
@media (min-width: 64rem) {
  .post-hero .page-hero__stage { grid-template-columns: minmax(0, 1fr); }
}
.post-hero__meta { display: flex; align-items: center; gap: var(--s-16); }
.post-hero__avatar { width: 3.25rem; height: 3.25rem; border-radius: 50%; flex-shrink: 0; }
.post-hero__meta p { display: grid; gap: 0.15rem; }
.post-hero__author { font-weight: 600; }
.post-hero__info { font-size: var(--fs-small); color: var(--muted); }

/* rejilla de 12 columnas como el resto de la web: índice fijo (1–3) | contenido (5–12, a todo el ancho) */
.article { display: grid; gap: var(--s-32); }
.article__main { min-width: 0; }
@media (min-width: 64rem) {
  .article { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .article__aside { grid-column: 1 / 4; }
  .article__main { grid-column: 5 / -1; }
  .article--no-toc .article__main { grid-column: 1 / -1; }
  .article__aside { position: sticky; top: var(--s-32); align-self: start; max-height: calc(100svh - 4rem); overflow: hidden auto; scrollbar-width: none; }
}
.article__cover { margin: 0 0 var(--s-40); }
.article__cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: var(--studio); }

.toc { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.toc__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); padding-block: var(--s-16); cursor: pointer; list-style: none; }
.toc__head::-webkit-details-marker { display: none; }
.toc__list { display: grid; gap: 0.15rem; padding-bottom: var(--s-16); }
.toc__list a {
  display: grid; grid-template-columns: 2rem 1fr; align-items: baseline;
  padding: var(--s-8) 0; font-size: var(--fs-small); line-height: 1.4; color: var(--muted); text-decoration: none;
  transition: color 0.3s var(--ease-out);
}
.toc__list a:hover, .toc__list a.is-current { color: var(--fg); }
.toc__list a.is-current .toc__num { color: var(--fg); }
@media (min-width: 64rem) {
  .toc { border-bottom: 0; }
  .toc__head { cursor: default; pointer-events: none; }
  .toc__toggle { display: none; }
}

/* texto del artículo (bloques de WordPress) */
.prose { font-size: var(--fs-body-l); line-height: 1.75; color: #2d2b29; }
.prose > * + * { margin-top: 1.25em; }
.prose .lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--fg); }
.prose h2, .prose h3 {
  font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 144; color: var(--fg);
  text-wrap: balance; scroll-margin-top: var(--s-32);
}
.prose h2 { margin-top: 2.4em; font-size: var(--fs-title-s); line-height: var(--lh-title); letter-spacing: var(--track-display); }
.prose h3 { margin-top: 1.9em; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--track-h3); }
.prose h2 + *, .prose h3 + * { margin-top: 0.75em; }
.prose strong { font-weight: 600; color: var(--fg); }
.prose a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { display: grid; gap: 0.6em; padding-left: 1.5rem; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: ""; position: absolute; left: -1.25rem; top: 0.72em; width: 0.4rem; height: 0.4rem; background: var(--fg); }
.prose ol { list-style: decimal; }
.prose ol > li::marker { font-weight: 600; color: var(--fg); }
.prose li > ul, .prose li > ol { margin-top: 0.6em; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-m); }
.prose figure { margin-inline: 0; }
.prose figcaption, .prose .wp-element-caption { margin-top: 0.6em; font-size: var(--fs-small); line-height: 1.5; color: var(--grey-light); text-align: left; }
.prose .wp-block-gallery { gap: var(--s-12); }
.prose .wp-block-gallery img { border-radius: var(--radius-m); }
.prose blockquote { padding-left: var(--s-24); border-left: 2px solid var(--fg); font-family: var(--serif); font-size: var(--fs-lead); font-weight: 300; font-variation-settings: "opsz" 144; line-height: 1.5; color: var(--fg); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin-block: 2.5em; }
.prose code { padding: 0.1em 0.35em; border-radius: 0.3em; background: rgba(19, 18, 17, 0.07); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; }
.prose pre { padding: var(--s-20); border-radius: var(--radius-m); background: var(--black); color: var(--white); overflow-x: auto; font-size: var(--fs-small); line-height: 1.6; }
.prose pre code { padding: 0; background: none; font-size: inherit; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.prose th, .prose td { padding: var(--s-12); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.prose th { font-weight: 600; color: var(--fg); }

/* autor al final del texto */
.author-box { display: flex; align-items: flex-start; gap: var(--s-20); margin-top: var(--s-64); padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius); } /* tarjeta en negro (theme-dark) */
.author-box__img { width: 4.5rem; height: 4.5rem; border-radius: 50%; flex-shrink: 0; }
.author-box__text { display: grid; gap: var(--s-8); justify-items: start; color: var(--muted); }
.author-box__name { font-family: var(--serif); font-size: var(--fs-h3); font-variation-settings: "opsz" 144; letter-spacing: var(--track-h3); line-height: var(--lh-h3); color: var(--fg); }
.author-box__link { display: inline-flex; align-items: center; gap: var(--s-8); margin-top: var(--s-4); font-weight: 600; color: var(--fg); }

/* cierre: llamada a la acción centrada */
.post-cta .section__head { margin-bottom: 0; }
.post-cta .section__head .t-title { max-width: 20ch; }
.post-cta .btn { margin-top: var(--s-8); justify-self: center; }

/* ---------- CASO REAL (ficha) ---------- */
.case-tag {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--s-8);
  padding: var(--s-8) var(--s-16); border: 1px solid var(--rule); border-radius: var(--radius-pill); color: var(--fg);
}
.case-tag i { font-size: var(--icon-s); }
/* ficha técnica en una línea: cliente · tipo · trabajo · desde */
.case-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16) var(--s-24); padding-top: var(--s-24); border-top: 1px solid var(--rule); }
.case-facts dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.case-facts dd { margin-top: 0.15rem; font-size: var(--fs-body-l); font-weight: 500; }
@media (min-width: 48rem) { .case-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* captura de la web del cliente en la cabecera */
.case-shot { display: grid; gap: var(--s-12); margin: 0 0 var(--section-top); align-self: center; }
.case-shot img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--rule); box-shadow: 0 2rem 4rem -2rem rgba(0, 0, 0, 0.8); }
.case-shot figcaption { color: var(--muted); }
.case-hero .page-hero__copy { gap: var(--s-32); padding-bottom: var(--section-top); }
.case-figures { display: grid; gap: var(--s-16); align-content: center; }
.case-note { font-size: var(--fs-small); color: var(--muted); }
/* cifras en cadena: agencias → negocios → incidencias; la última, en tarjeta negra */
.case-chain { display: grid; }
.case-chain li { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: var(--s-24); align-items: center; padding: var(--s-24) clamp(1.25rem, 2.5vw, 2rem); border-radius: var(--radius); transition: background-color 0.7s var(--ease, ease); }
.case-chain li::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 1px; background: var(--rule); transition: opacity 0.7s; }
.case-chain li:first-child::before, .case-chain li.is-key::before, .case-chain li.is-key + li::before { opacity: 0; } /* la tarjeta negra no lleva filetes pegados */
.case-chain__num { display: flex; align-items: baseline; gap: 0.05em; font-family: var(--serif); font-weight: 300; font-variation-settings: "opsz" 144; font-size: var(--fs-display); line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: lining-nums; color: var(--fg); transition: color 0.7s; }
.case-chain__num span { font-size: 0.4em; color: var(--muted); transform: translateY(-0.9em); transition: color 0.7s; }
.case-chain__txt { display: grid; gap: var(--s-4); font-size: var(--fs-small); line-height: 1.45; color: var(--muted); transition: color 0.7s; }
.case-chain__txt strong { font-size: var(--fs-body); font-weight: 600; color: var(--fg); transition: color 0.7s; }
.case-chain li.is-key { background: var(--black); --fg: var(--white); --muted: var(--grey-dark); } /* la cifra activa; rota sola (main.js) */
/* tarjetas «cómo trabajo» en tres columnas */
.case-grid { display: grid; gap: var(--grid-gap); }
@media (min-width: 48rem) { .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* cuatro tarjetas: 2 × 2 */
/* resultado + testimonio */
.case-result { display: grid; gap: var(--s-48); }
.case-gains { display: grid; gap: var(--s-16); }
.case-gains li { display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--s-12); align-items: start; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--grey-light); }
.case-gains i { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-top: 0.2em; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: var(--icon-xs); }
.case-gains strong { color: var(--fg); font-weight: 600; }
.case-quote { display: grid; gap: var(--s-24); margin: 0; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius); background: var(--black); color: var(--white); --fg: var(--white); --muted: var(--grey-dark); }
.case-quote blockquote { display: grid; gap: var(--s-12); }
.case-quote blockquote p { font-family: var(--serif); font-size: var(--fs-lead); font-weight: 300; font-variation-settings: "opsz" 144; line-height: 1.45; color: rgba(253, 252, 250, 0.9); }
.case-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-12); margin-top: var(--s-8); }
/* foto bajo el texto («lo que llega a mi bandeja») */
.case-photo { position: relative; display: grid; justify-items: center; align-items: end; max-width: 26rem; margin: var(--s-24) 0 0; }
.case-photo__circle { position: absolute; left: 50%; top: 8%; width: 86%; aspect-ratio: 1; translate: -44% 0; border-radius: 50%; background: var(--studio); }
.case-photo img { position: relative; width: 100%; height: auto; }
/* líneas punteadas de las incidencias hacia el portátil (las dibuja main.js) */
[data-inbox] { position: relative; }
.inbox-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.inbox-lines path { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 2 8; opacity: 0.35; animation: inbox-flow 1.4s linear infinite; }
@keyframes inbox-flow { to { stroke-dashoffset: -20; } } /* los puntos avanzan hacia el portátil */
@media (prefers-reduced-motion: reduce) { .inbox-lines path { animation: none; } }
/* capas: círculo (0) · líneas (1) · persona y portátil (2); las filas del panel también por encima de las líneas */
.inbox-lines { z-index: 1; }
[data-inbox] .case-photo__circle { z-index: 0; }
[data-inbox] .case-photo img { z-index: 2; }
[data-inbox] .status-panel { position: relative; z-index: 2; }
/* globo de líneas (SVG en línea): paralelos y meridianos discontinuos que fluyen y dos órbitas */
.case-globe { display: grid; justify-items: start; margin: var(--s-24) 0 0; color: var(--fg); }
.case-globe svg { width: min(100%, 26rem); height: auto; overflow: visible; }
.case-globe ellipse, .case-globe path { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; }
.case-globe__lat ellipse { stroke-width: 1.2; stroke-dasharray: 5 5; opacity: 0.35; animation: globe-flow 10s linear infinite; }
.case-globe__lon path { stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0.3; animation: globe-flow 12s linear infinite reverse; }
.case-globe__orbit { stroke-width: 2.5; stroke-dasharray: 10 10; opacity: 0.85; animation: globe-flow 14s linear infinite; }
.case-globe__orbit--2 { stroke-width: 2; stroke-dasharray: 12 12; opacity: 0.5; animation-duration: 9s; animation-direction: reverse; }
.js .case-globe:not(.is-in) * { animation-play-state: paused; } /* solo se mueve a la vista */
@keyframes globe-flow { to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) { .case-globe * { animation: none; } }
/* bandeja: panel a la derecha; la foto se pega abajo en la columna izquierda */
.case-side { display: grid; gap: var(--s-20); }
.case-side .t-lead { color: var(--muted); }
.case-side .t-lead strong { color: var(--fg); }
/* parejas «en la clínica → en la web» */
.case-pairs { display: grid; gap: var(--s-16); margin: 0; }
.case-pairs ul { display: grid; }
.case-pairs__row { display: grid; gap: var(--s-8); padding-block: var(--s-20); border-top: 1px solid var(--rule); }
.case-pairs__from { display: flex; align-items: center; gap: var(--s-12); font-family: var(--serif); font-size: var(--fs-lead); font-weight: 400; line-height: 1.25; color: var(--fg); }
.case-pairs__from i { font-size: 1.25rem; color: var(--muted); }
.case-pairs__arrow { display: none; color: var(--muted); }
.case-pairs__to { font-size: var(--fs-body); line-height: 1.5; color: var(--muted); }
.case-pairs__to strong { color: var(--fg); font-weight: 600; }
@media (min-width: 48rem) {
  .case-pairs__row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr); gap: var(--s-20); align-items: center; }
  .case-pairs__arrow { display: block; }
}
@media (min-width: 64rem) { .aside-layout > .case-pairs { grid-column: 7 / -1; } }
/* rendimiento: velocímetros de PageSpeed y barras de Core Web Vitals (colores de PageSpeed Insights) */
.perf { --ok: #0cce6b; --mid: #ffa400; --bad: #ff4e42; display: grid; gap: var(--s-32); }
@media (min-width: 64rem) { .aside-layout > .perf { grid-column: 7 / -1; } }
.perf__pass { display: inline-flex; align-items: center; gap: var(--s-8); justify-self: center; padding: 0.4rem 0.9rem; border-radius: 99px; background: color-mix(in srgb, var(--ok) 14%, transparent); font-size: var(--fs-small); color: var(--fg); }
.perf__pass i { font-size: 1.15rem; color: #0a8f4b; }
.perf__pass strong { color: #0a8f4b; font-weight: 600; }
.perf__gauges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-24); }
.gauge { position: relative; display: grid; justify-items: center; gap: var(--s-12); margin: 0; }
.gauge svg { width: min(100%, 8rem); height: auto; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 8; }
.gauge__track { stroke: color-mix(in srgb, var(--ok) 18%, transparent); }
.gauge__fill { stroke: var(--ok); stroke-linecap: round; stroke-dasharray: var(--v) 100; transition: stroke-dasharray 1.6s var(--ease-out); }
.js .perf:not(.is-in) .gauge__fill { stroke-dasharray: 0 100; }
.gauge__num { position: absolute; top: 0; left: 50%; display: grid; place-items: center; width: min(100%, 8rem); aspect-ratio: 1; translate: -50% 0; font-family: var(--serif); font-size: calc(var(--fs-stat) * 0.8); font-weight: 400; font-variation-settings: "opsz" 144; letter-spacing: -0.03em; color: #0a8f4b; }
.gauge figcaption { display: grid; justify-items: center; gap: 0.15rem; font-size: var(--fs-small); color: var(--muted); }
.gauge figcaption strong { font-size: var(--fs-body); font-weight: 600; color: var(--fg); }
.perf__vitals { display: grid; gap: var(--s-20); }
.perf__stack { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.perf__stack li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; border: 1px solid var(--rule); border-radius: 99px; font-size: var(--fs-small); font-weight: 500; color: var(--fg); }
.perf__stack i { font-size: 1.05rem; color: var(--muted); }
.vital { display: grid; gap: var(--s-8); }
.vital__head { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: var(--s-12); font-size: var(--fs-small); color: var(--muted); }
.vital__head b { font-weight: 600; color: var(--fg); }
.vital__head strong { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400; line-height: 1; color: #0a8f4b; }
.vital__bar { position: relative; display: block; height: 0.5rem; border-radius: 99px; background: linear-gradient(90deg, var(--ok) 0 var(--good), var(--mid) var(--good) calc(var(--good) + var(--ni)), var(--bad) calc(var(--good) + var(--ni)) 100%); }
.vital__bar i { position: absolute; top: 50%; left: var(--at); width: 1rem; height: 1rem; translate: -50% -50%; border: 3px solid var(--bg); border-radius: 50%; background: var(--fg); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); transition: left 1.4s var(--ease-out) 0.3s; }
.js .perf:not(.is-in) .vital__bar i { left: 0; }
@media (prefers-reduced-motion: reduce) { .gauge__fill, .vital__bar i { transition: none; } }
/* herramienta del proyecto (logo de Elementor) junto al título */
.case-tool { display: flex; align-items: center; gap: var(--s-16); margin: var(--s-8) 0 0; }
.case-tool svg { flex-shrink: 0; width: 4rem; height: 4rem; }
.case-tool circle { fill: var(--fg); opacity: 0.7; } /* en escala de grises, como los logos de las agencias */
.case-tool g { fill: var(--bg); }
.case-tool figcaption { display: grid; gap: 0.15rem; font-size: var(--fs-small); color: var(--muted); }
.case-tool strong { font-size: var(--fs-body); font-weight: 600; color: var(--fg); }
/* índice de casos: tarjetas del blog con cifras clave */
.section__head--center > .arrow-link { justify-self: center; margin-inline: auto; } /* enlace a un caso bajo un título centrado */
.case-card .post-card__body { gap: var(--s-12); }
.case-card__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); width: 100%; margin-top: auto; padding-top: var(--s-12); } /* abajo del todo y a todo el ancho */
.case-card__facts div { display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; gap: 0.3rem; padding: 0.6rem 0.5rem; border-radius: var(--radius-btn); background: var(--black); color: var(--white); text-align: center; }
.case-card__facts dt { font-size: var(--fs-nano); line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(253, 252, 250, 0.6); }
.case-card__facts dd { font-family: var(--serif); font-size: 1.125rem; font-weight: 400; line-height: 1; letter-spacing: -0.01em; }
.case-card .post-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(19, 18, 17, 0.45), rgba(19, 18, 17, 0.15)); pointer-events: none; } /* imagen un punto más oscura: destaca el botón */
/* «Ver el caso» dentro de la imagen */
.case-card__cta { position: absolute; right: var(--s-16); bottom: var(--s-16); z-index: 1; display: inline-flex; align-items: center; gap: var(--s-8); padding: 0.6rem 1rem; border-radius: 99px; background: var(--white); color: var(--black); box-shadow: 0 0.75rem 1.5rem -0.75rem rgba(19, 18, 17, 0.5); transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out); }
.case-card__cta i { font-size: var(--icon-xs); transition: transform 0.5s var(--ease-swift); }
@media (hover: hover) {
  .case-card:hover .case-card__cta { background: var(--black); color: var(--white); }
  .case-card:hover .case-card__cta i { transform: translate(0.2rem, -0.2rem); }
}
.case-card__media--map { background: #f3f1ed; }
@media (min-width: 64rem) {
  .posts.case-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 2 × 2 */
  .case-card--featured { grid-column: 1 / -1; } /* el caso estrella, a todo el ancho y en horizontal */
  .case-card--featured .case-card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto; }
  .case-card--featured .post-card__media { aspect-ratio: auto; min-height: 100%; }
  .case-card--featured .post-card__body { justify-content: center; padding: clamp(1.75rem, 3vw, 3rem); }
  .case-card--featured .post-card__title { font-size: calc(var(--fs-h3) * 1.25); }
}
.case-card .woo-dash--mini { width: 82%; margin: 0; justify-self: center; align-self: center; box-shadow: 0 1rem 2rem -1rem rgba(19, 18, 17, 0.35); }
.woo-dash--mini div { padding: 0.8rem 1rem; }
.woo-dash--mini dd { font-size: clamp(1rem, 1.6vw, 1.25rem); }
.case-card__map { width: 100%; margin: 0; padding: 0 var(--s-16); background: none; }
/* home: casos reales en abanico; las tarjetas se abren desde el centro al entrar en pantalla */
.fan-cases__foot { display: grid; justify-items: center; gap: var(--s-16); margin-top: clamp(3rem, 6vw, 4.5rem); text-align: center; }
.fan-cases__foot .btn { justify-self: center; }
.fan-cases__proof { color: var(--muted); }
.fan { display: flex; justify-content: center; align-items: center; max-width: 48rem; margin: clamp(2.5rem, 6vw, 4.5rem) auto 0; }
.fan__card { position: relative; flex-shrink: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); outline: 1px solid rgba(253, 252, 250, 0.1); box-shadow: 0 2rem 4rem -1.5rem rgba(0, 0, 0, 0.85);
  transform: translateY(var(--y)) rotate(var(--r)); transition: transform 0.7s var(--ease-out), opacity 0.6s var(--ease-out), filter 0.6s var(--ease-out); }
.fan__card--l { --r: -6deg; --x: 3rem; --y: 1.5rem; width: 38%; margin-right: clamp(-2rem, -4vw, -1rem); z-index: 1; transition-delay: 0.1s; }
.fan__card--c { --r: 0deg; --x: 0rem; --y: -0.5rem; width: 42%; z-index: 2; }
.fan__card--r { --r: 6deg; --x: -3rem; --y: 1.5rem; width: 38%; margin-left: clamp(-2rem, -4vw, -1rem); z-index: 1; transition-delay: 0.2s; }
.js .fan:not(.is-in) .fan__card { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; filter: blur(6px); }
.fan__card a { display: block; height: 100%; color: var(--white); text-decoration: none; }
.fan__card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.fan__label { position: absolute; inset: auto 0 0; display: grid; gap: 0.25rem; padding: 0.9rem 1rem 1rem; border-top: 1px solid rgba(253, 252, 250, 0.12); background: var(--black); text-align: left; } /* banda sólida: se lee sobre cualquier captura */
.fan__card--l .fan__label { padding-right: clamp(1.5rem, 4vw, 2.75rem); } /* lo que tapa la tarjeta central */
.fan__card--r .fan__label { padding-left: clamp(1.5rem, 4vw, 2.75rem); }
.fan__label small { font-size: var(--fs-nano); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(253, 252, 250, 0.7); }
.fan__label b { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); font-family: var(--serif); font-size: clamp(1rem, 2vw, 1.375rem); font-weight: 400; line-height: 1.15; }
.fan__label i { flex-shrink: 0; font-size: var(--icon-xs); transition: transform 0.5s var(--ease-swift); }
@media (hover: hover) {
  .fan.is-in .fan__card:hover { transform: translateY(calc(var(--y) - 0.75rem)) rotate(var(--r)); z-index: 3; transition-delay: 0s; }
  .fan__card:hover .fan__label i { transform: translate(0.2rem, -0.2rem); }
}
/* cinco tarjetas: más abiertas y más estrechas */
.fan--5 { max-width: 66rem; }
.fan--5 .fan__card { width: 23%; margin: 0; }
.fan--5 .fan__card--c { width: 26%; }
.fan--5 .fan__card--l2 { --r: -10deg; --x: 7rem; --y: 3rem; margin-right: -3%; z-index: 0; transition-delay: 0.2s; }
.fan--5 .fan__card--l { --r: -5deg; --x: 3.5rem; --y: 0.75rem; margin-right: -3%; }
.fan--5 .fan__card--r { --r: 5deg; --x: -3.5rem; --y: 0.75rem; margin-left: -3%; }
.fan--5 .fan__card--r2 { --r: 10deg; --x: -7rem; --y: 3rem; margin-left: -3%; z-index: 0; transition-delay: 0.3s; }
.fan__card--l2 .fan__label { padding-right: clamp(1.5rem, 3vw, 2.25rem); }
.fan__card--r2 .fan__label { padding-left: clamp(1.5rem, 3vw, 2.25rem); }
@media (max-width: 47.99rem) { .fan--5 .fan__card--l2, .fan--5 .fan__card--r2 { display: none; } .fan--5 .fan__card { width: 34%; } .fan--5 .fan__card--c { width: 38%; } } /* en móvil, los tres centrales */
@media (max-width: 47.99rem) { /* tarjetas pequeñas: solo el nombre, para que se vea la captura */
  .fan__label { padding: 0.55rem 0.7rem 0.65rem; }
  .fan__card--l .fan__label { padding-right: 1.4rem; }
  .fan__card--r .fan__label { padding-left: 1.4rem; }
  .fan__label small, .fan__label i { display: none; }
  .fan__label b { font-size: 0.875rem; }
}
.fan__card:has(a:focus-visible) { outline: 2px solid var(--white); outline-offset: 3px; z-index: 3; }
@media (prefers-reduced-motion: reduce) { .fan__card { transition: none; } .js .fan:not(.is-in) .fan__card { transform: translateY(var(--y)) rotate(var(--r)); opacity: 1; filter: none; } }
/* caso de migración: panel de WooCommerce recreado (cifras redondeadas) y medición de Pingdom */
.woo-dash { --fg: var(--black); --muted: var(--grey-light); align-self: center; width: 100%; max-width: 32rem; margin: 0 0 var(--section-top); justify-self: end; overflow: hidden; border-radius: var(--radius); background: #f3f1ed; color: var(--black); box-shadow: 0 2rem 4rem -2rem rgba(0, 0, 0, 0.8); }
.woo-dash__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-8); padding: 1rem 1.25rem; border-bottom: 1px solid var(--line-light); }
.woo-dash__bar strong { font-family: var(--serif); font-size: var(--fs-lead); font-weight: 400; }
.woo-dash__bar span { font-size: var(--fs-nano); color: var(--muted); }
.woo-dash div { display: flex; justify-content: space-between; align-items: center; gap: var(--s-16); padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line-light); background: var(--white); }
.woo-dash div:last-child { border-bottom: 0; }
.woo-dash dt { font-size: var(--fs-small); color: var(--muted); }
.woo-dash dd { display: flex; align-items: center; gap: 0.9rem; font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 500; font-variant-numeric: tabular-nums; }
.woo-dash__up { padding: 0.3rem 0.5rem; border-radius: 0.35rem; background: #0a7a2f; color: var(--white); font-size: var(--fs-nano); font-weight: 600; }
.stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-32); }
.perf--pingdom { margin-top: var(--s-48); }
/* antes / después en barras (caso de migración) */
.vs { display: grid; gap: var(--s-32); margin: 0; }
@media (min-width: 64rem) { .aside-layout > .vs { grid-column: 7 / -1; } }
.vs__group { display: grid; gap: var(--s-8); }
.vs__label { display: flex; align-items: center; gap: var(--s-12); margin-bottom: var(--s-4); }
.vs__label b { font-weight: 600; color: var(--fg); }
.vs__same { padding: 0.3rem 0.5rem; border-radius: 0.35rem; border: 1px solid var(--rule); font-size: var(--fs-nano); font-weight: 600; color: var(--muted); }
.vs__row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 7.5rem; align-items: center; gap: var(--s-12); font-size: var(--fs-small); color: var(--muted); }
.vs__row strong { font-family: var(--serif); font-size: var(--fs-lead); font-weight: 400; text-align: right; color: var(--muted); }
.vs__bar { position: relative; height: 0.75rem; border-radius: 99px; background: rgba(253, 252, 250, 0.06); }
.vs__bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: rgba(253, 252, 250, 0.3); transition: width 1.4s var(--ease-out); }
.vs__row--after { color: var(--fg); }
.vs__row--after strong { color: var(--fg); }
.vs__row--after .vs__bar::before { background: #0cce6b; transition-delay: 0.25s; }
.js .vs:not(.is-in) .vs__bar::before { width: 0; }
@media (prefers-reduced-motion: reduce) { .vs__bar::before { transition: none; } }
.perf__gauges--1 { grid-template-columns: 1fr; }
.perf--pingdom .gauge svg, .perf--pingdom .gauge__num { width: min(100%, 6rem); }
.perf--pingdom .gauge__num { font-size: calc(var(--fs-stat) * 0.62); }
@media (min-width: 64rem) { /* texto · lo que se hizo · medición, en tres columnas iguales */
  .aside-layout.case-3col { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(3rem, 5vw, 6rem); }
  .aside-layout.case-3col > * { grid-column: auto; }
  .case-3col > .perf--pingdom { margin-top: 0; }
}
.grade { align-self: center; margin-right: 0.3em; padding: 0.2em 0.45em; border-radius: 0.25em; background: #6db33f; color: var(--white); font-family: var(--sans); font-size: 0.42em; font-weight: 700; letter-spacing: 0; }
/* caso Neoindustrialis */
.fan--hero { width: 100%; max-width: 36rem; margin: 0 0 var(--section-top); align-self: center; justify-self: end; }
.fan__card > picture { display: block; height: 100%; }
.clients { display: grid; gap: var(--grid-gap); }
@media (min-width: 48rem) { .clients { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .clients { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 75rem) { /* diez clientes: 5 × 2 */
  .clients { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-16); }
  .clients .client__body { padding: 1.1rem; }
  .clients .client__name { font-size: 1.375rem; }
  .clients .client__fact { font-size: var(--fs-small); line-height: 1.45; }
}
.client { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg); }
.client__shot { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--rule); }
.client__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform 0.9s var(--ease-swift); }
.client__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-8); padding: clamp(1.25rem, 2vw, 1.75rem); }
.client__sector { color: var(--muted); }
.client__name { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400; font-variation-settings: "opsz" 144; line-height: 1.15; letter-spacing: var(--track-h3); }
.client__fact { color: var(--muted); }
.client__link { display: inline-flex; align-items: center; gap: var(--s-8); margin-top: auto; padding-top: var(--s-8); font-size: var(--fs-small); font-weight: 600; color: var(--fg); text-decoration: none; }
.client__link i { transition: transform 0.5s var(--ease-swift); }
@media (hover: hover) { .client:hover .client__shot img { transform: scale(1.04); } .client__link:hover i { transform: translate(0.2rem, -0.2rem); } }
.clients__note { margin-top: var(--s-24); }
.shots__band + .shots__band { margin-top: var(--grid-gap); }
.shots__track.shots__track--reverse { animation-direction: reverse; } /* el shorthand de .shots__track va después: hace falta más especificidad */
.case-quote__brand--wide img { width: clamp(10rem, 16vw, 15rem); }
/* índice de casos: cabecera con cifras y agencias, y casos en filas alternas */
.aside-layout--center > :not(.aside-layout__head) { align-self: center; } /* columna derecha centrada en vertical */
.casos-stats { margin-top: var(--s-32); }
.casos-agencies { display: grid; gap: var(--s-12); margin-top: var(--s-32); }
.casos-agencies .t-micro { color: var(--muted); }
.casos-agencies .logos { flex-wrap: wrap; justify-content: flex-start; gap: var(--s-16) clamp(1.5rem, 3vw, 2.5rem); }
.casos-agencies .logos li { flex: 0 0 auto; }
.case-rows { display: grid; gap: clamp(3.5rem, 8vw, 7rem); }
.case-row { display: grid; gap: var(--s-24); align-items: center; }
@media (min-width: 64rem) {
  .case-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 5.5rem); }
  .case-row:nth-child(even) .case-row__media { order: 2; } /* alternas: imagen a un lado y al otro */
}
.case-row__media { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--studio); box-shadow: 0 2rem 4rem -2.5rem rgba(19, 18, 17, 0.45); }
.case-row__media picture { position: absolute; inset: 0; }
.case-row__media picture img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform 0.9s var(--ease-swift); }
.case-row__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(19, 18, 17, 0.4), rgba(19, 18, 17, 0.05)); pointer-events: none; }
.case-row__media--panel { background: #f3f1ed; }
.case-row__map { width: 90%; margin: 0; padding: 0; background: none; }
.case-row .woo-dash--mini { width: 74%; margin: 0; justify-self: center; align-self: center; box-shadow: 0 1rem 2rem -1rem rgba(19, 18, 17, 0.35); }
.case-row .woo-dash--mini div { padding: 0.9rem 1.1rem; }
.case-row__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-16); }
.case-row__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-8); color: var(--muted); }
.case-row__num { margin-right: var(--s-8); font-family: var(--serif); font-size: 1.25rem; letter-spacing: 0; color: var(--fg); }
.case-row__title { font-family: var(--serif); font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 400; font-variation-settings: "opsz" 144; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
.case-row__title a { text-decoration: none; }
.case-row__title em { font-weight: 300; color: var(--muted); }
.case-row__text { max-width: 36rem; color: var(--muted); }
.case-row .case-card__facts { max-width: 30rem; margin-top: var(--s-4); padding-top: 0; }
@media (hover: hover) {
  .case-row__media:hover picture img { transform: scale(1.04); }
  .case-row__media:hover .case-card__cta { background: var(--black); color: var(--white); }
}
/* capturas de la web en marquee, a sangre; se mueve solo a la vista */
.shots__band { margin-inline: calc(var(--gutter) * -1); overflow: hidden; }
.shots__track { display: flex; width: max-content; animation: shots 70s linear infinite; }
.js .shots:not(.is-in) .shots__track { animation-play-state: paused; }
.shots__list { display: flex; flex-shrink: 0; gap: var(--grid-gap); padding-right: var(--grid-gap); }
.shots__list img { display: block; width: clamp(18rem, 30vw, 28rem); height: auto; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 2rem 4rem -2rem rgba(0, 0, 0, 0.8); }
@keyframes shots { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .shots__track { animation: none; } .shots__band { overflow-x: auto; } }
/* logo de la agencia en el testimonio: blanco y al 70 %, como en la home */
.case-quote__brand { margin-left: auto; }
.case-quote__brand img { display: block; width: 7rem; height: auto; opacity: 0.7; transition: opacity 0.4s var(--ease-out); }
.case-quote__brand:hover img, .case-quote__brand:focus-visible img { opacity: 1; }
.case-hero-map { align-self: center; margin: 0 0 var(--section-top); } /* esquema del caso en la cabecera, en lugar de captura */
/* checkout simulado que se rellena solo (main.js); decorativo */
.co-sim { width: 100%; max-width: 34rem; margin: 0; justify-self: end; overflow: hidden; border-radius: var(--radius); background: var(--paper); color: var(--black); box-shadow: 0 2rem 4rem -2rem rgba(0, 0, 0, 0.8); }
@media (min-width: 64rem) { .aside-layout > .co-sim { grid-column: 7 / -1; } }
@media (min-width: 64rem) { /* «Lo que encontré»: la foto fija, ocupando toda la altura de la columna */
  .case-found > .aside-photo { position: relative; top: auto; align-self: stretch; min-height: 24rem; }
  .case-found > .aside-photo picture { position: absolute; inset: 0; } /* la foto no marca la altura: la marcan los textos y la columna derecha */
  .case-found > .aside-photo picture, .case-found > .aside-photo img { width: 100%; height: 100%; }
  .case-found > .aside-photo img { aspect-ratio: auto; object-fit: cover; object-position: 50% 20%; }
}
.co-sim__bar { display: flex; align-items: center; gap: var(--s-12); padding: 0.7rem 1rem; border-bottom: 1px solid var(--line-light); background: #f3f1ed; }
.co-sim__dots { display: flex; gap: 0.3rem; }
.co-sim__dots i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: rgba(19, 18, 17, 0.15); }
.co-sim__url { flex: 1; display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border-radius: 99px; background: var(--white); font-size: var(--fs-nano); color: var(--grey-light); }
.co-sim__body { position: relative; display: grid; gap: var(--s-12); padding: clamp(1.25rem, 3vw, 2rem); }
.co-sim__title { margin-bottom: var(--s-4); font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400; line-height: 1.1; }
.co-sim__field { display: grid; gap: 0.35rem; font-size: var(--fs-small); color: var(--grey-light); }
.co-sim__field b { display: flex; align-items: center; min-height: 2.75rem; padding: 0 0.9rem; border: 1px solid var(--line-light); border-radius: var(--radius-btn); background: var(--white); font-size: var(--fs-body); font-weight: 500; color: var(--black); font-variant-numeric: tabular-nums; transition: border-color 0.3s, box-shadow 0.3s; }
.co-sim__field.is-active b { border-color: var(--black); box-shadow: 0 0 0 3px rgba(19, 18, 17, 0.08); }
.co-sim__field.is-active b::after { content: ""; width: 1px; height: 1.2em; margin-left: 1px; background: var(--black); animation: co-caret 1s steps(1) infinite; }
@keyframes co-caret { 50% { opacity: 0; } }
.co-sim__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); }
.co-sim__btn { display: grid; place-items: center; min-height: 3rem; margin-top: var(--s-4); border-radius: var(--radius-btn); background: var(--black); color: var(--white); font-size: var(--fs-small); font-weight: 600; transition: transform 0.15s, opacity 0.3s; }
.co-sim.is-press .co-sim__btn { transform: scale(0.98); opacity: 0.8; }
.co-sim__leak { position: absolute; top: clamp(1.25rem, 3vw, 2rem); right: clamp(1.25rem, 3vw, 2rem); display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border-radius: 99px; background: #fbeeeb; color: var(--alert); font-size: var(--fs-nano); font-weight: 600; opacity: 0; transform: translateY(0.3rem); transition: opacity 0.4s, transform 0.4s; }
.co-sim.is-leak .co-sim__leak { opacity: 1; transform: none; }
.co-sim.is-leak .co-sim__field--card b { border-color: var(--alert); border-style: dashed; } /* la tarjeta, copiada */
@media (min-width: 64rem) {
  .aside-layout > .case-side { grid-column: 7 / -1; }
  .aside-layout__head.case-inbox-head { position: static; align-self: stretch; display: flex; flex-direction: column; gap: var(--s-20); }
  .case-inbox-head .case-photo { margin-top: auto; margin-bottom: calc(-1 * var(--section-bottom)); padding-top: var(--s-24); } /* apoyada en el borde inferior de la sección */
}
.case-cta .btn { justify-self: auto; }

/* ==========================================================================
   7. MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js .about__photo[data-reveal] img { clip-path: none; }
  .js .aside-photo[data-reveal] img { clip-path: none; }
  .js .integrate__photo[data-reveal] img { clip-path: none; }
  .quote-strip { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .quote-strip__track { animation: none; }
  .js .about__copy p { opacity: 1; }
  .steps__slide .ch-bars__m, .ch-status__row { transform: none; opacity: 1; }
  .js .timeline__fill { --fill: 1; }
  .js .tl-step .tl-card { opacity: 1; transform: none; }
  .js .modes .mode__card { opacity: 1; transform: none; }
  .js .modes::after { transform: scaleX(1); }
}

/* Gravity Forms sin su CSS: ocultar lo que su hoja ocultaba (campo trampa antispam, campos ocultos) */
.gf-g .gform_validation_container, .gf-g .gfield_visibility_hidden, .gf-g .gform_hidden, .gf-g .gform_required_legend { display: none !important; }
/* etiqueta marcada como oculta en Gravity Forms (p. ej. «Privacidad» del consentimiento): fuera de la vista, pero la leen los lectores de pantalla */
.gf-g .hidden_label > .gfield_label {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Cantabria: otros servicios locales bajo la llamada a la acción del cierre */
.perks--local { margin-top: clamp(3.5rem, 7vw, 6rem); text-align: left; }
.perks--local .tl-card__title a { display: inline-flex; align-items: center; gap: var(--s-8); text-decoration: none; }
.perks--local .tl-card__title i { transition: transform 0.5s var(--ease-swift); }
@media (hover: hover) { .perks--local .tl-card__title a:hover i { transform: translateX(0.25rem); } }

/* Tienda online en Cantabria: plataformas apiladas bajo la intro de la banda y tienda local con dos capturas */
.cta-band.cta-band--stack { grid-template-columns: minmax(0, 1fr); row-gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.cta-band--stack .cta-band__intro { max-width: 46rem; }
.perks--platforms .perk__num { color: var(--studio); }
.shop-local__kicker { color: var(--muted); }
.shop-local__facts { margin-top: var(--s-8); }
.shop-local .arrow-link { justify-self: start; }
.shop-local__shot { position: relative; margin: 0; padding-bottom: 12%; }
.shop-local__shot img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 2rem 4rem -2rem rgba(0, 0, 0, 0.8); }
.shop-local__shot picture:first-child { display: block; width: 88%; }
.shop-local__shot picture + picture { position: absolute; right: 0; bottom: 0; width: 56%; }
@media (min-width: 64rem) { .aside-layout > .shop-local__shot { grid-column: 7 / -1; } }

/* Rótulo sobre las filas de logos de agencias: deja claro que es una selección */
.logos__cap { margin-bottom: var(--s-24); color: var(--muted); }
.page-close__logos .logos__cap { text-align: center; }
/* opiniones en el cierre de las páginas de Cantabria: valoración de Google centrada encima de la cinta de testimonios */
.reviews__cap { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.reviews__cap a { color: inherit; text-decoration: none; }
.reviews__cap a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 0.2em; }

/* Caso de la red de agencias: esquema de la red en la cabecera, en lugar de captura */
.case-net .case-net__soft { stroke: rgba(19, 18, 17, 0.3); }
.case-net .case-net__sub { font-size: 10px; font-weight: 500; opacity: 0.75; }
.case-net__cap { margin-top: var(--s-8); text-align: center; color: var(--grey-light, #6f6b66); }
.case-net__cap b { color: var(--black); font-weight: 600; }
.case-row__media .case-net { width: 90%; margin: 0; padding: 0; background: none; }
.fan__card .fan__net { height: 100%; margin: 0; padding: 1.25rem 0.75rem 4.5rem; border-radius: 0; display: grid; align-content: center; }