/* =========================================================
   Formactiva — Web corporativa (formactiva.cl)
   Tema claro propio sobre tokens.css. No carga site.css:
   este archivo es autocontenido para el host corporativo.
   Convención de clases: .c-* para lo heredado, .fa-* para lo del rediseño.
   ========================================================= */

/* ----- Tokens locales ---------------------------------------------------
   El papel es blanco con un punto de frío: un crema tira a amarillo y ensucia
   el morado y el azul del logo. Los cuatro colores de marca tienen trabajo
   asignado: naranja para desarrollo, magenta para e-commerce y acciones,
   morado para mantención y rótulos, azul para revisión.

   Van en :root y no solo en .corp porque el papel lo pinta el <html>: los destellos
   de fondo viven detrás del contenido y el fondo del body los taparía. */
:root, .corp {
  /* superficies */
  --c-bg:        #FBFBFD;   /* papel */
  --c-surface:   #FFFFFF;   /* tarjetas / inputs */
  --c-surface-2: #F1F2F6;   /* bloques hundidos */
  --c-line:      rgba(11, 17, 32, 0.12);
  --c-line-strong: rgba(11, 17, 32, 0.24);

  /* texto */
  --c-fg1:  #0B1120;
  --c-fg2:  #57606E;
  --c-link: #6E4BB0;
  --c-pink: #C22B67;
  --c-pink2: #C22B67;
  --c-ok:   #0A7A53;
  --c-danger: #B3261E;

  /* marca. El magenta del logo (#E63780) da 4.02:1 con texto blanco (< AA);
     el botón usa este tono apenas más profundo que sí cumple 4.5:1. */
  --c-primary: #C22B67;
  --c-primary-hover: #A62256;
  --c-wsp: #1A8043;         /* verde WhatsApp oscurecido para AA con blanco */
  --c-glass: rgba(255, 255, 255, 0.72);
  --c-glass-line: rgba(11, 17, 32, 0.12);

  /* los cuatro del logo */
  --fa-naranja: #E0762F;
  --fa-magenta: #D63577;
  --fa-morado:  #7E5AB8;
  --fa-azul:    #3F6BC4;
  --fa-grad: linear-gradient(100deg, #F58A4B, #E63780 32%, #C03B8E 52%, #7E5AB8 76%, #5C7FC7);

  /* aviso de trabajo pendiente, para lo que aún no está cerrado */
  --fa-aviso: #A85A12;
  --fa-aviso-fondo: rgba(168, 90, 18, 0.07);

  /* nav integrado al hero: alto reservado para el estado "arriba" */
  --nav-h: 84px;

  /* sistema diagonal: caída del corte a lo ancho (= tan(1.6°)) */
  --skew-drop: 2.8vw;
}

/* ----- Base ------------------------------------------------------------- */
.corp, .corp *, .corp *::before, .corp *::after { box-sizing: border-box; }
body.corp {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-fg1);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.corp img { max-width: 100%; height: auto; display: block; }
/* Nada de caret de escritura fuera de los campos: al hacer click en textos
   o zonas de la página no debe quedar la barrita parpadeante de edición.
   El puntero sobre texto tampoco muestra el I-beam de "escribible". */
body.corp { caret-color: transparent; cursor: default; }
.corp input, .corp textarea, .corp select {
  caret-color: var(--c-pink);
  cursor: text;
}
.corp select { cursor: pointer; }
.corp a, .corp button, .corp label, .corp summary { cursor: pointer; }
.corp a { color: var(--c-link); }
.corp a:focus-visible,
.corp button:focus-visible,
.corp input:focus-visible,
.corp select:focus-visible,
.corp textarea:focus-visible {
  outline: 3px solid var(--c-pink);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.corp ::selection { background: rgba(230, 55, 128, 0.45); }

/* ----- Scrollbar de marca ------------------------------------------------ */
/* WebKit/Blink: pulgar con el gradiente del logo, riel navy. El borde del
   pulgar (color del riel) lo afina y le da aire. Aplica también a los
   scrolls internos (modal legal, terminal). */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--c-bg, #0B1120); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #F58A4B 0%, #E63780 45%, #7E5AB8 100%);
  border-radius: 8px;
  border: 3px solid var(--c-bg, #0B1120);
}
::-webkit-scrollbar-thumb:hover { border-width: 2px; }
::-webkit-scrollbar-corner { background: var(--c-bg, #0B1120); }
/* Firefox: no soporta gradiente en el pulgar; tono de marca plano. El guard
   evita que Chrome 121+ aplique scrollbar-color y desactive lo de arriba. */
@supports (scrollbar-width: thin) and (not selector(::-webkit-scrollbar)) {
  .corp { scrollbar-width: thin; scrollbar-color: #B5487F #0B1120; }
}

.c-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}
/* Variante ancha: secciones que respiran más allá de la caja base */
.c-container--wide { max-width: 1400px; }

.corp .c-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-primary); color: #fff;
  padding: 10px 18px; border-radius: var(--radius-sm);
  z-index: 200; font-weight: 600; text-decoration: none;
}
.corp .c-skip:focus { left: var(--space-4); top: var(--space-4); }

/* ----- Tipos ------------------------------------------------------------ */
.c-h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(34px, 5vw, var(--text-4xl));
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight);
  color: var(--c-fg1); margin: 0 0 var(--space-4);
}
.c-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3.6vw, var(--text-3xl));
  line-height: var(--leading-snug); letter-spacing: var(--tracking-snug);
  color: var(--c-fg1); margin: 0 0 var(--space-3);
}
.c-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--c-fg1); margin: 0 0 var(--space-2); }
.c-h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); line-height: var(--leading-snug); color: var(--c-fg1); margin: 0 0 var(--space-3); }

/* Firma tipográfica del sitio: eyebrows en mono versalitas (sin "//": el
   guiño de código vive solo en la terminal, para no marear al público no
   técnico). Prefijado .corp: reglas tipo ".c-proof-copy p" (0,1,1) le
   ganarían a la clase sola (0,1,0) y dejarían el acento gris. */
.corp .c-eyebrow {
  font-family: var(--font-mono); font-weight: 600;
  font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-pink); margin: 0 0 var(--space-3);
}
.c-section-sub { color: var(--c-fg2); font-size: var(--text-md); max-width: 60ch; margin: 0; }

.c-wordmark {
  font-family: var(--font-display); font-weight: 400;
  letter-spacing: -0.015em; color: #fff; font-size: 20px;
}
.c-wordmark b { font-weight: 700; }

/* ----- Botones ----------------------------------------------------------- */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm);
  padding: 12px 22px; min-height: 44px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.c-btn:active { transform: scale(0.98); }
/* Prefijadas con .corp: la regla base ".corp a" (0,1,1) les ganaría a las
   clases solas (0,1,0) y teñiría botones y nav con el color de enlace. */
.corp .c-btn-primary { background: var(--c-primary); color: #fff; }
.corp .c-btn-primary:hover { background: var(--c-primary-hover); }
.corp .c-btn-outline { background: transparent; color: var(--c-fg1); border-color: var(--c-line-strong); }
.corp .c-btn-outline:hover { border-color: var(--c-fg2); background: rgba(255, 255, 255, 0.04); }
.c-btn-lg { padding: 14px 28px; font-size: var(--text-base); }
.c-btn-sm { padding: 8px 16px; min-height: 40px; }

/* Composición CTA definitiva (elegida por el usuario): TERMINAL. Prompt ">"
   (no "$": lectura de dinero), texto en mono y cursor parpadeando; al hover
   el borde se enciende con el gradiente de marca. */
.corp .c-btn-primary.c-btn-cta {
  font-family: var(--font-mono); font-weight: 600; gap: 9px;
  background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--radius-md);
  color: var(--c-fg1);
  transition: box-shadow var(--dur-3) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.corp .c-btn-primary.c-btn-cta::before {
  content: ">";
  /* 600 y no 700: el único uso de JBM-700 en corp obligaba a descargar un
     archivo de fuente extra solo para este ">" */
  color: var(--c-pink); font-family: var(--font-mono); font-weight: 600;
}
.corp .c-btn-primary.c-btn-cta::after {
  content: ""; display: inline-block; width: 8px; height: 15px;
  background: var(--c-pink); vertical-align: -2px;
}
.c-anim .c-btn-primary.c-btn-cta::after { animation: cBlink 1.05s steps(1) infinite; }
.corp .c-btn-primary.c-btn-cta:hover {
  border-color: transparent;
  background:
    linear-gradient(#0D1526, #0D1526) padding-box,
    linear-gradient(100deg, #F58A4B, #E63780, #7E5AB8) border-box;
  box-shadow: 0 8px 26px rgba(230, 55, 128, 0.25);
}
/* En el header va la versión DISCRETA: fantasma, sin cursor */
.corp .c-nav .c-btn-primary.c-btn-cta {
  background: transparent; border-color: var(--c-line-strong);
  font-size: 13px;
}
.corp .c-nav .c-btn-primary.c-btn-cta::after { display: none; }
.corp .c-nav .c-btn-primary.c-btn-cta:hover {
  border-color: transparent;
  background:
    linear-gradient(#0B1120, #0B1120) padding-box,
    linear-gradient(100deg, #F58A4B, #E63780, #7E5AB8) border-box;
  box-shadow: none;
}

/* ----- Navbar ------------------------------------------------------------ */
/* Estado inicial: transparente, integrado al hero (el hero corre por debajo
   con margin-top negativo). Al hacer scroll, el JS agrega .is-scrolled y se
   transforma en la barra sólida con blur. */
.c-nav {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  /* La altura NO cambia con el scroll: un sticky que se encoge desplaza
     todo el contenido y se siente como un salto. Solo transicionan fondo,
     borde y logo, con curva larga. */
  transition: background 0.6s var(--ease-out), border-color 0.6s var(--ease-out);
}
.c-nav.is-scrolled {
  background: rgba(251, 251, 253, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--c-line);
}
.c-nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  min-height: var(--nav-h);
}
.c-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
/* La regla base "img { height:auto }" pisa el atributo height del HTML:
   el isotipo necesita tamaño explícito o se dibuja a resolución natural. */
.c-nav .c-logo img { height: 28px; width: auto; }
.c-footer .c-logo img { height: 26px; width: auto; }
/* Isotipo full color mientras el nav está integrado al hero; al pasar a
   barra sólida (is-scrolled) hace CROSS-FADE suave a la versión blanca
   (ambas imágenes superpuestas, solo cambia la opacidad). */
.c-nav .c-logo { position: relative; }
.c-nav .c-logo-color { opacity: 1; transition: opacity 0.6s var(--ease-out); }
.c-nav .c-logo-white {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  opacity: 0; transition: opacity 0.6s var(--ease-out);
}
.c-nav.is-scrolled .c-logo-color { opacity: 0; }
.c-nav.is-scrolled .c-logo-white { opacity: 1; }
.c-nav-links { display: flex; align-items: center; gap: var(--space-6); }
.corp .c-nav-link {
  color: var(--c-fg2); text-decoration: none; font-weight: 600; font-size: var(--text-sm);
  padding: 8px 2px; transition: color var(--dur-2) var(--ease-out);
}
.corp .c-nav-link:hover, .corp .c-nav-link.is-active { color: var(--c-fg1); }
.c-nav-link.is-active { box-shadow: inset 0 -2px 0 var(--c-primary); }
.c-nav-link--ext::after {
  content: "\2197"; /* flecha diagonal: enlace al sitio de cursos */
  font-size: 11px; margin-left: 4px; opacity: 0.7;
}
.c-burger {
  display: none; background: none; border: 1px solid var(--c-line-strong);
  color: var(--c-fg1); border-radius: var(--radius-sm); padding: 9px; cursor: pointer;
  min-width: 44px; min-height: 44px;
}

/* ----- Hero --------------------------------------------------------------- */
.c-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: min(88svh, 920px);
  /* corre por debajo del nav transparente */
  margin-top: calc(-1 * var(--nav-h));
  padding: calc(clamp(56px, 8vw, 96px) + var(--nav-h)) 0 clamp(48px, 7vw, 90px);
}
.c-hero > .c-container { width: 100%; }
/* Foto cinematográfica (assets/img/corp/hero-dev.webp): capa propia para
   poder animarla con drift lento sin repintar el veil ni el contenido. El
   sujeto queda hacia la derecha (background-position), el copy va a la
   izquierda sobre el veil. */
.c-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url('../img/corp/hero-dev.webp') 72% center / cover no-repeat var(--c-bg);
}
@keyframes cDrift {
  from { transform: scale(1.02) translate(0, 0); }
  to   { transform: scale(1.1) translate(-1.6%, 1.4%); }
}
/* Parallax ligado al scroll (decorativo): el fondo se hunde levemente al
   scrollear. Convive con cDrift porque usa `translate`, no `transform`. */
@supports (animation-timeline: scroll()) {
  .c-anim .c-hero-bg {
    animation: cDrift 38s var(--ease-in-out) infinite alternate, cHeroPar linear both;
    animation-timeline: auto, scroll();
    animation-range: normal, 0 100svh;
  }
  @keyframes cHeroPar {
    from { translate: 0 0; }
    to   { translate: 0 9%; }
  }
}
.c-hero::before {
  /* Veil: garantiza contraste del texto a la izquierda y funde el borde
     inferior con la sección siguiente. */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(97deg, rgba(11, 17, 32, 0.96) 0%, rgba(11, 17, 32, 0.82) 38%, rgba(11, 17, 32, 0.35) 68%, rgba(11, 17, 32, 0.12) 100%),
    linear-gradient(180deg, rgba(11, 17, 32, 0.35) 0%, rgba(11, 17, 32, 0.12) 45%, var(--c-bg) 100%);
}
.c-hero::after {
  /* Grano fino (SVG turbulence en data URI): quita lo "plano digital". */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Sin esto, las líneas nowrap de la terminal fijan el min-content del grid
   y desbordan el hero en pantallas chicas; el contenido ancho scrollea
   dentro de la terminal, no empuja el layout. */
.c-hero-grid > * { min-width: 0; }
.c-term-body { overflow-x: auto; }
@keyframes cWordIn {
  to { opacity: 1; transform: none; filter: blur(0); }
}
.c-hero-ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.c-hero-ctas--center { justify-content: center; }

/* Terminal (elemento firma) */
.c-term {
  background: var(--c-surface-2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 80px rgba(230, 55, 128, 0.10),
    0 0 140px rgba(126, 90, 184, 0.10);
  overflow: hidden;
}
.c-term-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px; border-bottom: 1px solid var(--c-line);
  background: rgba(255, 255, 255, 0.03);
}
.c-term-bar span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.c-term-bar span:nth-child(1) { background: #E0605E; }
.c-term-bar span:nth-child(2) { background: #E0A83E; }
.c-term-bar span:nth-child(3) { background: #58B368; }
.c-term-bar em {
  font-family: var(--font-mono); font-style: normal; font-size: var(--text-xs);
  color: var(--c-fg2); margin-left: 8px;
}
.c-term-body { padding: var(--space-6); font-family: var(--font-mono); font-size: 14px; line-height: 2; }
.c-term-line { margin: 0; color: var(--c-fg1); white-space: nowrap; }
.c-term-prompt { color: var(--c-pink); font-weight: 600; }
.c-term-arrow { color: var(--c-link); margin-right: 6px; }
.c-term-ok { color: var(--c-ok); margin-right: 6px; }
.c-term-cursor {
  display: inline-block; width: 8px; height: 15px; margin-left: 6px;
  background: var(--c-pink); vertical-align: -2px;
}
/* Destello que recorre el borde de la terminal (mismo recurso de la banda
   CTA, más lento; reusa la property --c-ang y sus keyframes) */
.c-term { position: relative; }
.c-anim .c-term::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--c-ang),
    transparent 0turn 0.38turn,
    rgba(245, 138, 75, 0.85) 0.46turn,
    rgba(230, 55, 128, 0.85) 0.5turn,
    rgba(126, 90, 184, 0.85) 0.54turn,
    transparent 0.62turn 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: cBorderSpin 10s linear infinite;
}

/* Tipeo: solo cuando JS confirmó que no hay reduce-motion (la clase
   is-typing se agrega recién cuando la terminal entra en el viewport) */
.c-anim .c-term.is-typing .c-term-line { opacity: 0; animation: cTermIn 0.35s var(--ease-out) forwards; }
.c-anim .c-term-cursor { animation: cBlink 1.05s steps(1) infinite; }
@keyframes cTermIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes cBlink { 50% { opacity: 0; } }

/* ----- Secciones ----------------------------------------------------------- */
.c-section { padding: clamp(48px, 7vw, 88px) 0; overflow-x: clip; }
/* Fondos diferenciados por sección: mismos tonos de marca, temperaturas
   distintas, para que la página no se lea como un solo plano de color. */
.c-section--tint-1 {
  background:
    radial-gradient(720px 420px at 6% 0%, rgba(126, 90, 184, 0.12), transparent 65%),
    radial-gradient(640px 400px at 100% 100%, rgba(230, 55, 128, 0.06), transparent 65%),
    linear-gradient(180deg, var(--c-bg) 0%, #0E1631 55%, var(--c-bg) 100%);
}
/* Banda diagonal: el fondo violeta va en una capa inclinada (skew) que corta
   el navy en ángulo; el contenido queda derecho. Rompe el apilado plano. */
.c-section--alt {
  position: relative; border: 0; background: none;
  padding: clamp(64px, 8vw, 110px) 0;
}
.c-section--alt::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  transform: skewY(-1.6deg);
  background:
    radial-gradient(700px 400px at 94% 6%, rgba(245, 138, 75, 0.07), transparent 60%),
    linear-gradient(180deg, #0D1526 0%, #150F2C 55%, #0D1526 100%);
  /* sin border-bottom: el borde inferior es la costura exacta con la foto */
}
/* Costura superior de la banda: línea con destello viajero, inclinada con
   el mismo ángulo del skew (gira sobre su propio centro, igual que la capa) */
.c-section--alt::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  transform: skewY(-1.6deg); pointer-events: none; z-index: 0;
  background:
    linear-gradient(90deg, transparent, rgba(245, 138, 75, 0.8) 30%, rgba(230, 55, 128, 0.8) 50%, rgba(126, 90, 184, 0.8) 70%, transparent),
    linear-gradient(90deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.10));
  background-size: 45% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -60% 0, 0 0;
}
.c-anim .c-section--alt::after { animation: cSparkTravel 9s linear infinite; }

/* Orbes de luz: manchas de color difuminadas que cruzan los bordes entre
   secciones para que el color "sangre" de una a otra. Decorativas. */

.c-section-head { position: relative; margin-bottom: clamp(28px, 4vw, 48px); }
.c-section-head .c-section-sub { margin-top: var(--space-3); }

/* Reveal de contenido (IntersectionObserver, UN SOLO disparo): el contenido
   con texto jamás queda en opacidad parcial persistente. Usa la propiedad
   `translate` (no `transform`) para NO pisar los transform de :hover de las
   tarjetas. Las animaciones LIGADAS al scroll (animation-timeline) se
   reservan para piezas decorativas: líneas de pasos, parallax del fondo y
   watermarks, donde un estado intermedio es diseño y no texto a medias. */
.c-anim .c-reveal { opacity: 0; translate: 0 14px; transition: opacity var(--dur-4) var(--ease-out), translate var(--dur-4) var(--ease-out); }
.c-anim .c-reveal.is-in { opacity: 1; translate: 0 0; }
.c-card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6);
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.c-card:hover { border-color: var(--c-line-strong); transform: translateY(-3px); }
/* Variante póster: imagen de fondo, contenido sobre el fade inferior */
.c-card--poster {
  position: relative; overflow: hidden; padding: 0;
  min-height: clamp(430px, 34vw, 520px);
  display: flex; align-items: flex-end;
}
/* Spotlight que sigue el cursor (vars --mx/--my las setea el JS del layout) */
@media (hover: hover) {
  .c-anim .c-card, .c-anim .c-quote-box { position: relative; overflow: hidden; }
  .c-anim .c-card::after, .c-anim .c-quote-box::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    border-radius: inherit; opacity: 0; z-index: 3;
    transition: opacity var(--dur-3) var(--ease-out);
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%),
      rgba(230, 55, 128, 0.13), rgba(126, 90, 184, 0.07) 45%, transparent 70%);
  }
  .c-anim .c-card:hover::after, .c-anim .c-quote-box:hover::after { opacity: 1; }
}
.c-card h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin: var(--space-5) 0 var(--space-3); color: var(--c-fg1); }
.c-card p { color: var(--c-fg2); font-size: var(--text-sm); line-height: var(--leading-relaxed); margin: 0 0 var(--space-5); }
.c-card-icon--orange { background: rgba(245, 138, 75, 0.14); color: #F7A360; }
.c-card-icon--pink   { background: rgba(230, 55, 128, 0.14); color: var(--c-pink); }
.c-card-icon--purple { background: rgba(126, 90, 184, 0.18); color: var(--c-link); }
.corp .c-card-link {
  color: var(--c-link); font-weight: 600; font-size: var(--text-sm); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color var(--dur-2) var(--ease-out);
}
.corp .c-card-link:hover { border-bottom-color: var(--c-link); }
@supports (animation-timeline: view()) {
  .c-anim .c-step::after {
    transition: none;
    animation: cLineGrow 1 both;
    animation-timeline: view();
    animation-range: entry 10% entry 60%;
  }
  @keyframes cLineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ----- Banda credencial (split: foto a media pantalla como fondo) ------------- */
/* La sección de la foto continúa el sistema diagonal: su borde superior
   calza EXACTO con el borde inferior inclinado de la banda del proceso
   (mismo ángulo: 2.8vw de caída = tan(1.6°); margin-top -1.4vw = mitad del
   desplazamiento del skew, que rota sobre el centro). El borde inferior
   sale también en diagonal hacia la sección CTA. */
.c-section--proof {
  background: var(--c-surface-2);
  margin-top: calc(var(--skew-drop) / -2);
  clip-path: polygon(0 var(--skew-drop), 100% 0, 100% calc(100% - var(--skew-drop)), 0 100%);
  padding: calc(var(--skew-drop) / 2) 0 var(--skew-drop);
}

/* Franja de stack bajo el hero: gradiente de marca apagado (los colores del
   logo bajados a tierra sobre navy), con hairlines gradiente */
.c-strip {
  position: relative;
  padding: 17px 0;
  background:
    linear-gradient(100deg,
      rgba(245, 138, 75, 0.34) 0%,
      rgba(230, 55, 128, 0.34) 32%,
      rgba(126, 90, 184, 0.38) 66%,
      rgba(92, 127, 199, 0.34) 100%),
    var(--c-surface-2);
  overflow-x: clip;
}
@keyframes cMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - var(--space-2))); }
}

/* ----- Costuras con destello (bordes de sección) --------------------------------
   El destello gradiente que antes rodeaba la caja CTA ahora recorre los
   bordes horizontales de las secciones: una línea base tenue + un segmento
   de gradiente de marca que viaja a lo largo. */
@keyframes cSparkTravel {
  from { background-position: -60% 0, 0 0; }
  to   { background-position: 160% 0, 0 0; }
}

/* Property registrada para el anillo cónico de la terminal */
@property --c-ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.c-page-head .c-container { position: relative; z-index: 1; }
/* Costura inferior con destello viajero: los interiores heredan la firma de
   las costuras de sección de la home */
.c-page-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(245, 138, 75, 0.8) 30%, rgba(230, 55, 128, 0.8) 50%, rgba(126, 90, 184, 0.8) 70%, transparent),
    linear-gradient(90deg, var(--c-line), var(--c-line));
  background-size: 45% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -60% 0, 0 0;
}
.c-anim .c-page-head::after { animation: cSparkTravel 10s linear infinite; }
/* Entrada del bloque de título: misma voz que el titular de la home (rise +
   desenfoque), sin trocear el h1 en spans. Reusa cWordIn. */
.c-anim .c-page-head .c-eyebrow,
.c-anim .c-page-head .c-h1,
.c-anim .c-page-head .c-section-sub {
  opacity: 0; transform: translateY(0.4em); filter: blur(6px);
  animation: cWordIn 0.65s var(--ease-out) forwards;
}
.c-anim .c-page-head .c-h1 { animation-delay: 0.10s; }
.c-anim .c-page-head .c-section-sub { animation-delay: 0.22s; }
.c-page-head--center { text-align: center; padding-bottom: clamp(48px, 7vw, 80px); }
.c-page-head--center .c-section-sub { margin: 0 auto; }

/* Cabeceras con FOTO por página (mismo tratamiento del hero: foto + veil que
   garantiza el AA del copy a la izquierda + grano + drift lento). El sujeto
   de cada foto vive a la derecha; la mitad izquierda de las imágenes ya
   viene en sombra navy. axe no computa contraste sobre imágenes: el veil es
   quien garantiza el AA visualmente, igual que en el hero. */
.c-page-head--photo {
  padding-top: calc(clamp(64px, 9vw, 108px) + var(--nav-h));
  padding-bottom: clamp(38px, 5.5vw, 60px);
}
.c-page-head--servicios  { --head-img: url('../img/corp/head-servicios.webp'); }
.c-page-head--portafolio { --head-img: url('../img/corp/head-portafolio.webp'); }
.c-page-head--cotizar    { --head-img: url('../img/corp/head-cotizar.webp'); }

/* ----- Página de servicios ------------------------------------------------------- */
.c-svc-list { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); }
/* Cada servicio es un bloque de dos columnas de texto: a la izquierda el disco de
   color, el titular y el enlace; a la derecha lo que incluye. El disco y el orden
   son los mismos que las cartas de "Qué hacemos" de la home, así que quien llega
   por una de esas anclas reconoce dónde cayó. Las fotos salieron: sobre papel
   claro el neón cantaba, y su sombra venía del tema oscuro. */
.c-svc {
  position: relative;
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(28px, 4.5vw, 64px);
  align-items: start;
  border-top: 1px solid var(--c-line-strong); padding-top: clamp(32px, 4.5vw, 52px);
  scroll-margin-top: 90px;
}
/* La costura superior se enciende con el gradiente de marca al entrar en
   escena (misma voz que las líneas de los pasos de la home) */
.c-anim .c-svc::after {
  content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 100%;
  background: var(--fa-gradient);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.9s var(--ease-out) 0.15s;
}
.c-anim .c-svc.is-in::after { transform: scaleX(1); }
/* El disco de color hace de ancla, igual que en las cartas de la home: mismo tamaño
   y mismo tono por servicio. El sexto lleva el gradiente entero, porque los cuatro
   colores del logo ya tienen dueño. */
.c-svc-disco {
  display: block; width: 34px; height: 34px; border-radius: 50%;
  background: var(--fa-tono, var(--c-pink)); margin-bottom: var(--space-4);
}
.c-svc--naranja   { --fa-tono: var(--fa-naranja); }
.c-svc--magenta   { --fa-tono: var(--fa-magenta); }
.c-svc--morado    { --fa-tono: var(--fa-morado); }
.c-svc--azul      { --fa-tono: var(--fa-azul); }
.c-svc--tinta     { --fa-tono: var(--c-fg1); }
.c-svc--gradiente { --fa-tono: var(--fa-magenta); }
.c-svc--gradiente .c-svc-disco { background: var(--fa-gradient); }

/* El titular del servicio es un h2 de bloque, no de sección: con el tamaño de
   .c-h2 compite con el titular de la página y cada servicio parece una portada. */
.c-svc-content .c-h2 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: var(--space-4); }
.c-svc-content p { color: var(--c-fg2); margin: 0 0 var(--space-5); }
/* Nombrado con .corp delante a propósito: .corp .c-card-link (479) tiene el mismo
   peso, y sin esto el orden del archivo sería lo único que decide. */
.corp .c-svc-content .c-card-link { color: var(--fa-tono, var(--c-pink)); }
.c-svc-rotulo {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-fg2); margin: 0 0 var(--space-4);
}
@media (max-width: 860px) {
  .c-svc { grid-template-columns: 1fr; gap: var(--space-6); }
}

.c-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.c-checklist li { position: relative; padding-left: 26px; color: var(--c-fg2); font-size: var(--text-sm); }
.c-checklist li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--c-ok); font-weight: 700;
}

/* ----- Portafolio ------------------------------------------------------------------ */
.c-case {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.c-case + .c-case { margin-top: clamp(56px, 8vw, 96px); }
.corp .c-case-tag { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--c-pink); margin: 0 0 var(--space-3); }
/* ----- Cotizador --------------------------------------------------------------------- */
.c-quote-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
/* Las líneas nowrap de la terminal del aside no deben fijar el min-content
   del grid (mismo patrón del hero): el contenido ancho scrollea dentro de
   la terminal, no empuja el layout. */
.c-quote-grid > * { min-width: 0; }

.c-form { display: flex; flex-direction: column; gap: var(--space-5); }
.c-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.c-field { display: flex; flex-direction: column; gap: 6px; }
.c-field label { font-weight: 600; font-size: var(--text-sm); color: var(--c-fg1); }
.c-req { color: var(--c-pink); }
.c-opt { color: var(--c-fg2); font-weight: 400; font-size: var(--text-xs); }
.c-input {
  background: var(--c-surface); border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-md); color: var(--c-fg1);
  font-family: var(--font-body); font-size: var(--text-base);
  padding: 12px 14px; min-height: 46px; width: 100%;
  transition: border-color var(--dur-2) var(--ease-out);
}
.c-input::placeholder { color: var(--c-fg2); opacity: .7; }
.c-input:hover { border-color: var(--c-fg2); }
.c-input.is-error { border-color: var(--c-danger); }
select.c-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-fg2) 50%), linear-gradient(135deg, var(--c-fg2) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
textarea.c-input { resize: vertical; min-height: 140px; }
.c-field-error { color: var(--c-danger); font-size: var(--text-xs); }
.c-field-hint { color: var(--c-fg2); font-size: var(--text-xs); }
.c-form-alert {
  background: rgba(220, 53, 69, 0.12); border: 1px solid rgba(244, 154, 164, 0.4);
  color: var(--c-danger); border-radius: var(--radius-md);
  padding: 12px 16px; font-size: var(--text-sm); font-weight: 600;
}
.c-form-submit { align-self: flex-start; }

/* Consentimientos (Ley 19.628/21.719): checkboxes nativos con acento de
   marca (accesibles, sin JS); el de promociones jamás va pre-marcado. */
.c-consent {
  border: 1px solid var(--c-line); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); margin: 0;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.c-consent.is-error { border-color: var(--c-danger); }
.c-consent-legend {
  font-family: var(--font-mono); font-weight: 600; font-size: var(--text-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-pink);
  padding: 0 6px;
}
.c-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.c-check input {
  accent-color: var(--c-primary);
  width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; cursor: pointer;
}
.c-check span { color: var(--c-fg2); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.c-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* El formulario privado de reseñas (/resena/{token}) NO usa esta hoja ni el layout
   corporativo: es una página autocontenida (src/Views/corp/resena.php) con su propio
   estilo. Así se sube a producción sin arrastrar el rediseño, y sale sin menú ni pie
   por construcción y no por una excepción dentro del chrome. */

/* El aside acompaña el scroll del formulario (sticky bajo el nav) */
.c-quote-aside {
  display: flex; flex-direction: column; gap: var(--space-5);
  position: sticky; top: calc(var(--nav-h) + 12px);
}
/* Terminal del aside: SIN USO desde el cotizador por pasos. "Qué pasa después"
   pasó a ser una lista legible (.c-despues), porque sobre papel el componente
   quedaba gris sobre gris. Las reglas se conservan por si vuelve; el
   componente entero (.c-term*) ya no lo dibuja ninguna vista. */
.c-quote-aside .c-term-body { font-size: 13px; padding: var(--space-5); }
.c-quote-aside .c-term-line { white-space: normal; }
.c-quote-box {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.c-quote-box p { color: var(--c-fg2); font-size: var(--text-sm); margin: 0; line-height: 2; }

/* Qué pasa después de enviar. Sustituye a la terminal decorativa: sobre papel
   quedaba gris sobre gris y era contenido real, no adorno. */
.c-despues { list-style: none; margin: var(--space-4) 0 0; padding: 0; counter-reset: fa-paso; }
.c-despues li {
  counter-increment: fa-paso; position: relative; padding-left: 34px;
  padding-bottom: var(--space-5);
}
.c-despues li:last-child { padding-bottom: 0; }
.c-despues li::before {
  content: counter(fa-paso, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  color: var(--c-pink);
}
/* La línea que une los pasos: se corta en el último */
.c-despues li::after {
  content: ""; position: absolute; left: 7px; top: 22px; bottom: 6px; width: 1px;
  background: var(--c-line);
}
.c-despues li:last-child::after { display: none; }
.c-despues b { display: block; color: var(--c-fg1); font-size: var(--text-sm); }
.c-despues span { display: block; color: var(--c-fg2); font-size: var(--text-sm); line-height: var(--leading-relaxed); }

/* ----- Cotizador por pasos ------------------------------------------------------------
   Los tres pasos se ven a la vez si no hay JavaScript: la guía y los botones de
   avance nacen hidden en el marcado y solo el guion los enciende. */
.c-pasos { gap: var(--space-6); }
.c-pasos-guia {
  list-style: none; display: flex; gap: var(--space-2); margin: 0 0 var(--space-2); padding: 0;
}
/* Un display explícito pisa al atributo hidden: sin estas tres reglas, la guía y
   los botones de avance se verían igual con el JavaScript apagado, y sin guion no
   hacen nada. Es el mismo patrón que ya usan el modal y los puntos del mazo. */
.c-pasos-guia[hidden] { display: none; }
.c-paso-pie[hidden] { display: none; }
.c-paso-pie .c-btn[hidden] { display: none; }
.c-pasos-guia li { flex: 1; display: flex; }
/* Cada paso de la guía es un botón: sirve para volver a uno ya llenado sin
   tener que pasar por los de en medio. Avanzar sigue exigiendo lo obligatorio. */
.c-pasos-guia button {
  flex: 1; display: flex; flex-direction: column; gap: 8px;
  background: none; border: 0; padding: 0 0 4px; text-align: left; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .06em; text-transform: uppercase; color: var(--c-fg2);
}
.c-pasos-guia button:focus-visible { outline: 2px solid var(--c-pink); outline-offset: 3px; }
.c-pasos-punto { display: block; height: 3px; border-radius: 2px; background: var(--c-line-strong); }
.c-pasos-guia li.is-hecho .c-pasos-punto { background: var(--c-pink); }
.c-pasos-guia li.is-actual .c-pasos-punto { background: var(--fa-gradient); }
.c-pasos-guia li.is-actual button { color: var(--c-fg1); }

.c-paso { border: 0; padding: 0; margin: 0; min-width: 0; }
.c-paso-titulo {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.02em;
  color: var(--c-fg1); padding: 0; margin: 0 0 6px;
}
.c-paso-bajada { color: var(--c-fg2); font-size: var(--text-sm); margin: 0 0 var(--space-5); }
.c-paso .c-field + .c-form-row,
.c-paso .c-form-row + .c-form-row,
.c-paso .c-form-row + .c-consent { margin-top: var(--space-5); }
.c-paso-pie { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-6); }
/* Sin JS los tres pasos van seguidos y necesitan una separación que se lea */
.c-pasos:not(.is-js) .c-paso + .c-paso {
  margin-top: var(--space-8); border-top: 1px solid var(--c-line); padding-top: var(--space-8);
}

/* Qué necesitas: seis tarjetas de opción única. El radio sigue siendo un radio
   (no se oculta con display:none, que lo saca del foco de teclado). */
.c-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.c-opcion { position: relative; display: block; cursor: pointer; }
.c-opcion input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.c-opcion-caja {
  display: block; height: 100%;
  background: var(--c-surface); border: 1.5px solid var(--c-line-strong);
  border-radius: var(--radius-lg); padding: 14px 16px;
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.c-opcion-tit { display: block; font-weight: 600; color: var(--c-fg1); font-size: var(--text-sm); }
.c-opcion-pista { display: block; color: var(--c-fg2); font-size: var(--text-xs); margin-top: 3px; line-height: var(--leading-relaxed); }
.c-opcion input:checked + .c-opcion-caja { border-color: var(--c-pink); }
.c-opcion input:focus-visible + .c-opcion-caja {
  outline: 2px solid var(--c-pink); outline-offset: 2px;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .c-opcion:hover .c-opcion-caja { transform: translateY(-2px); }
}
.c-opciones.is-error .c-opcion-caja { border-color: var(--c-danger); }

@media (max-width: 700px) {
  .c-opciones { grid-template-columns: 1fr; }
  .c-paso-pie { flex-wrap: wrap; }
}

/* ----- Panel de clientes (/clientes) --------------------------------------------------- */
.c-login-box {
  max-width: 460px; margin: 0 auto;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6);
}
.c-login-help { color: var(--c-fg2); font-size: var(--text-sm); text-align: center; margin: var(--space-6) auto 0; max-width: 60ch; }
.c-panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.c-panel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.c-panel-card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.c-panel-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.c-panel-card-head .c-h3 { margin: 4px 0 0; }
.corp .c-panel-tipo {
  font-family: var(--font-mono); font-weight: 600; font-size: var(--text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-pink);
}
.c-panel-estado {
  flex-shrink: 0; font-size: var(--text-xs); font-weight: 700;
  padding: 4px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--c-line-strong); color: var(--c-fg2);
}
.c-panel-estado--activo { color: var(--c-ok); border-color: rgba(15, 157, 107, 0.35); background: rgba(15, 157, 107, 0.08); }
.c-panel-estado--suspendido { color: var(--fa-aviso); border-color: rgba(168, 90, 18, 0.35); background: var(--fa-aviso-fondo); }
.c-panel-desc { color: var(--c-fg2); font-size: var(--text-sm); margin: 0; }
.c-panel-datos { display: flex; gap: var(--space-6); flex-wrap: wrap; margin: 0; }
.c-panel-datos dt { font-size: var(--text-xs); color: var(--c-fg2); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.c-panel-datos dd { margin: 0; font-weight: 700; color: var(--c-fg1); }
.c-panel-datos dd small { font-weight: 400; color: var(--c-fg2); }
.c-panel-warn {
  display: inline-block; margin-left: 8px; font-size: var(--text-xs); font-weight: 700;
  color: #F7A360; background: rgba(245, 138, 75, 0.12);
  border: 1px solid rgba(245, 138, 75, 0.4); border-radius: var(--radius-pill); padding: 2px 10px;
}
.c-panel-warn--rojo { color: var(--c-danger); background: rgba(220, 53, 69, 0.12); border-color: rgba(244, 154, 164, 0.4); }
.c-panel-detalles summary {
  cursor: pointer; color: var(--c-link); font-weight: 600; font-size: var(--text-sm);
}
.c-panel-detalles ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.c-panel-detalles li {
  font-family: var(--font-mono); font-size: 13px; color: var(--c-fg2);
  border-left: 2px solid var(--c-line-strong); padding-left: 10px;
}
.c-panel-pagos { margin-top: clamp(32px, 5vw, 56px); }
.c-panel-tabla-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius-lg); }
.c-panel-tabla { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--c-surface); }
.c-panel-tabla th, .c-panel-tabla td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--c-line); }
.c-panel-tabla th {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-pink);
}
.c-panel-tabla td { color: var(--c-fg2); }
.c-panel-tabla tr:last-child td { border-bottom: 0; }

/* ----- Gracias ------------------------------------------------------------------------ */
.c-thanks { max-width: 640px; margin: 0 auto; }
.c-thanks-check {
  width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(74, 222, 128, 0.14); color: var(--c-ok);
  margin-bottom: var(--space-6);
}
.c-thanks .c-hero-ctas { margin-top: var(--space-8); }
.c-anim .c-thanks-check { animation: cPopIn 0.55s var(--ease-out) 0.1s both; }
@keyframes cPopIn {
  from { opacity: 0; transform: scale(0.55); }
  to   { opacity: 1; transform: scale(1); }
}

/* ----- Footer ---------------------------------------------------------------------------- */
.c-footer { border-top: 1px solid var(--c-line); background: var(--c-surface-2); padding: clamp(40px, 6vw, 64px) 0 var(--space-8); }

/* ----- WhatsApp FAB ------------------------------------------------------------------------ */
.corp .c-wsp-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  background: var(--c-wsp); color: #fff; text-decoration: none;
  border-radius: var(--radius-pill); padding: 13px 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  transition: transform var(--dur-2) var(--ease-out);
}
.corp .c-wsp-fab:hover { transform: translateY(-2px); }
/* Mientras el aviso de cookies está visible, el FAB sube por encima del
   vidrio; al aceptar/rechazar baja con transición a su lugar. */
.corp .c-wsp-fab { transition: transform var(--dur-2) var(--ease-out), bottom 0.45s var(--ease-out); }
.corp:has(.c-cookie-banner:not([hidden])) .c-wsp-fab { bottom: 128px; }
@media (max-width: 620px) {
  .corp:has(.c-cookie-banner:not([hidden])) .c-wsp-fab { bottom: 196px; }
}
.c-wsp-fab-label { font-weight: 700; font-size: var(--text-sm); }

/* ----- Flash + cookies ---------------------------------------------------------------------- */
.c-flash {
  position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 150;
  background: var(--c-surface); border: 1px solid var(--c-line-strong);
  color: var(--c-fg1); border-radius: var(--radius-md);
  padding: 12px 20px; font-size: var(--text-sm); font-weight: 600;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  transition: opacity var(--dur-3) var(--ease-out);
}
.c-flash.is-leaving { opacity: 0; }

/* Barra de consentimiento: full width, glassmorphism sobre el contenido */
.c-cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
  background: var(--c-glass);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.35);
  padding: var(--space-5) 0;
}
@supports not (backdrop-filter: blur(1px)) {
  .c-cookie-banner { background: var(--c-surface); }
}
.c-anim .c-cookie-banner:not([hidden]) { animation: cCookieUp 0.45s var(--ease-out); }
@keyframes cCookieUp { from { transform: translateY(100%); } to { transform: none; } }
.c-cookie-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--space-5);
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
}
.c-cookie-inner p { margin: 0; flex: 1 1 320px; color: var(--c-fg2); font-size: var(--text-sm); }
.c-cookie-inner strong { color: var(--c-fg1); margin-right: 8px; }
.c-cookie-actions { display: flex; gap: var(--space-3); }

/* ----- Modal (documentos legales) --------------------------------------------------------------- */
.c-modal {
  position: fixed; inset: 0; z-index: 160;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
  background: rgba(5, 8, 16, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.c-modal[hidden] { display: none; }
.c-modal-box {
  position: relative;
  width: min(860px, 100%); max-height: 86svh;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-xl);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.c-anim .c-modal:not([hidden]) .c-modal-box { animation: cModalIn 0.3s var(--ease-out); }
@keyframes cModalIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.c-modal-content { overflow-y: auto; padding: clamp(20px, 4vw, 44px); }
.c-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--c-line-strong);
  color: var(--c-fg1); cursor: pointer;
}
.c-modal-close:hover { background: rgba(255, 255, 255, 0.12); }
.c-legal .fa-legal-hero { margin-bottom: clamp(24px, 4vw, 40px); }
.c-legal .fa-legal-eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--c-pink); margin: 0 0 var(--space-3);
}
.c-legal .fa-legal-title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4vw, 40px);
  line-height: var(--leading-tight); color: var(--c-fg1); margin: 0 0 var(--space-2);
}
.c-legal .fa-legal-date { color: var(--c-fg2); font-size: var(--text-sm); margin: 0; }
.c-legal .fa-legal-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); }
.c-legal .fa-legal-toc { position: sticky; top: 96px; align-self: start; }
.c-legal .fa-legal-toc nav { display: flex; flex-direction: column; gap: var(--space-2); }
.c-legal .fa-legal-toc a {
  color: var(--c-fg2); text-decoration: none; font-size: var(--text-sm);
  padding: 3px 0;
}
.c-legal .fa-legal-toc a:hover { color: var(--c-fg1); }
.c-legal .fa-legal-toc-label {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--c-pink); margin: 0 0 var(--space-3);
}
/* El documento no usa el contenedor ancho de las páginas de venta: con el índice
   a la izquierda y el cuerpo limitado a su medida de lectura, los 1.320px dejaban
   un tercio de la pantalla vacío a la derecha y el conjunto se veía descolgado. */
.c-legal-page .c-container { max-width: 1040px; }
.c-legal .fa-legal-body { max-width: 74ch; }
.c-legal .fa-legal-lead { color: var(--c-fg1); font-size: var(--text-md); line-height: var(--leading-relaxed); margin: 0 0 var(--space-6); }
.c-legal .fa-legal-section { margin: 0 0 var(--space-8); scroll-margin-top: 96px; }
.c-legal .fa-legal-section h2 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg);
  color: var(--c-fg1); margin: 0 0 var(--space-3);
  display: flex; align-items: baseline; gap: 10px;
}
.c-legal .fa-legal-num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--c-pink); font-weight: 600; }
/* Cuerpo del documento: 16px y tinta de lectura, no el gris secundario a 14px.
   Son textos largos que alguien lee entero cuando quiere saber qué se hace con
   sus datos, y a ese tamaño se leían como pie de página. El gris se guarda para
   lo que de verdad es secundario (fecha, pie del documento). */
.c-legal { --c-legal-tinta: #2A3140; }
.c-legal p, .c-legal li {
  color: var(--c-legal-tinta); font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}
.c-legal ul, .c-legal ol { padding-left: 22px; margin: var(--space-3) 0; }
.c-legal li + li { margin-top: 6px; }
.c-legal p + p { margin-top: var(--space-3); }
.c-legal strong { color: var(--c-fg1); }
.c-legal .fa-legal-table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: var(--text-sm); }
.c-legal .fa-legal-table p, .c-legal .fa-legal-table li { font-size: var(--text-sm); }
.c-legal .fa-legal-table th, .c-legal .fa-legal-table td {
  border: 1px solid var(--c-line-strong); padding: 9px 12px; text-align: left;
  color: var(--c-legal-tinta); vertical-align: top;
}
.c-legal .fa-legal-table th { color: var(--c-fg1); background: var(--c-surface-2); }
/* Botón "cambiar mis preferencias" del documento de cookies: sus clases
   .fa-btn son de site.css, que el host corp NO carga; aquí se re-visten con
   la voz del tema (equivalente a .c-btn-outline) */
.c-legal .fa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm);
  padding: 10px 18px; min-height: 44px; border-radius: var(--radius-md);
  background: transparent; color: var(--c-fg1);
  border: 1px solid var(--c-line-strong); cursor: pointer;
  margin: var(--space-2) 0 var(--space-3);
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.c-legal .fa-btn:hover { border-color: var(--c-fg2); background: var(--c-surface-2); }
.c-legal .fa-legal-doc-footer {
  border-top: 1px solid var(--c-line); margin-top: var(--space-8); padding-top: var(--space-5);
  display: flex; gap: var(--space-3); align-items: center; color: var(--c-fg2); font-size: var(--text-sm);
}
/* En el modal el documento va sin TOC (las secciones se autoexplican) */
.c-modal .fa-legal-toc { display: none; }
.c-modal .fa-legal-layout { display: block; }

/* En móvil el índice deja de ser una columna: con 230px fijos más el cuerpo, el
   documento medía 539px en una pantalla de 360 y la política se leía desplazada
   fuera de la pantalla. Medido, no supuesto. */
@media (max-width: 860px) {
  /* minmax(0,1fr) y no 1fr: con `1fr` el mínimo del track es el min-content, y
     el índice de cookies ("3. Cómo funciona el consentimiento") estiraba la
     columna hasta 418px en una pantalla de 360. */
  .c-legal .fa-legal-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .c-legal .fa-legal-toc { position: static; min-width: 0; }
  .c-legal .fa-legal-toc a { overflow-wrap: anywhere; }
  .c-legal .fa-legal-toc nav { gap: 2px; }
  /* Objetivo táctil: cada entrada del índice, con altura de dedo */
  .c-legal .fa-legal-toc a { padding: 11px 0; }
  /* Las tablas de la política no caben en un teléfono: scrollean dentro de su
     caja, con foco de teclado para que la región sea alcanzable (axe). */
  .c-legal .fa-legal-table { display: block; overflow-x: auto; width: 100%; }
}

/* ----- Responsive ------------------------------------------------------------------------------ */
@media (max-width: 1000px) {
  .c-hero-grid { grid-template-columns: 1fr; }
  .c-hero-term { max-width: 560px; }
  .c-cards-3 { grid-template-columns: 1fr; }
  .c-steps { grid-template-columns: repeat(2, 1fr); }
  .c-proof-grid { grid-template-columns: 1fr; }
  .c-proof-bg { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 10; }
  .c-proof-copy { padding-top: var(--space-6); }
  .c-svc { grid-template-columns: 1fr; gap: var(--space-5); }
  .c-panel-grid { grid-template-columns: 1fr; }
  .c-svc:nth-child(even) .c-svc-media { order: 0; }
  .c-svc-media { aspect-ratio: 16 / 10; }
  .c-case { grid-template-columns: 1fr; }
  .c-case:nth-child(even) .c-case-media { order: 0; }
  .c-quote-grid { grid-template-columns: 1fr; }
  .c-quote-aside { position: static; }
  .c-footer-top { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .c-burger { display: inline-flex; align-items: center; justify-content: center; }
  .c-nav-links {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--c-bg); border-bottom: 1px solid var(--c-line);
    padding: var(--space-3) var(--space-5) var(--space-5);
  }
  .c-nav-links.is-open { display: flex; }
  .c-nav-link { padding: 14px 2px; border-bottom: 1px solid var(--c-line); }
  .c-nav-links .c-btn { margin-top: var(--space-4); }
}

/* Variantes móviles de los fondos fotográficos (el hero es el LCP): mitad de
   resolución y un tercio del peso; el veil disimula la diferencia. El preload
   del layout usa el mismo corte de 700px para no descargar dos versiones. */
@media (max-width: 700px) {
  .c-hero-bg { background-image: url('../img/corp/hero-dev-960.webp'); }
  .c-page-head--servicios  { --head-img: url('../img/corp/head-servicios-960.webp'); }
  .c-page-head--portafolio { --head-img: url('../img/corp/head-portafolio-960.webp'); }
  .c-page-head--cotizar    { --head-img: url('../img/corp/head-cotizar-960.webp'); }
  /* Sin deriva ni parallax en móvil: el will-change + animación fuerzan capa
     compuesta y rasterizado caro del fondo (Lighthouse: "retraso en la
     renderización" del LCP). En pantalla chica el drift es imperceptible. */
  .c-anim .c-hero-bg,
  .c-anim .c-page-head--photo::before {
    animation: none;
    will-change: auto;
  }
}

@media (max-width: 620px) {
  .c-steps { grid-template-columns: 1fr; }
  /* En móvil el texto ocupa todo el ancho: veil parejo sobre la foto */
  .c-page-head--photo::before {
    background:
      linear-gradient(180deg, rgba(11, 17, 32, 0.88) 0%, rgba(11, 17, 32, 0.72) 55%, var(--c-bg) 100%),
      var(--head-img) 70% center / cover no-repeat var(--c-bg);
  }
  .c-form-row { grid-template-columns: 1fr; }
  .c-cta-inner { flex-direction: column; align-items: flex-start; }
  .c-term-body { font-size: 12.5px; padding: var(--space-4); }
  .c-wsp-fab-label { display: none; }
  .c-footer-cols { grid-template-columns: 1fr; }
}

/* ----- Propuesta comercial (/propuesta/{token}) ------------------------------------------ */
.c-prop { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-6); }
.c-prop-estado {
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-md);
  padding: 14px 18px; font-size: var(--text-sm); font-weight: 600; color: var(--c-fg2);
  background: rgba(255, 255, 255, 0.03);
}
.corp .c-prop-estado--ok { color: var(--c-ok); border-color: rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.08); }
.corp .c-prop-label {
  font-family: var(--font-mono); font-weight: 600; font-size: var(--text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-pink);
  margin: 0 0 var(--space-2);
}
.c-prop-texto { color: var(--c-fg2); font-size: var(--text-md); line-height: 1.7; margin: 0; }
.corp .c-prop-item { color: var(--c-fg1); }
.c-prop-detalle { color: var(--c-fg2); font-size: var(--text-xs); line-height: 1.6; }
.c-prop .c-prop-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-prop tfoot td { border-bottom: 0; border-top: 1px solid var(--c-line); padding-top: 10px; padding-bottom: 10px; }
.corp .c-prop-total td { color: var(--c-fg1); font-weight: 800; font-size: var(--text-md); border-top: 1px solid var(--c-line-strong); }
.c-prop-acciones { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }
.c-prop-nota { color: var(--c-fg2); font-size: var(--text-xs); margin: 0; }
.corp .c-form-alert--ok {
  background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.4); color: var(--c-ok);
}
@media (max-width: 620px) {
  .c-prop-acciones form, .c-prop-acciones .c-btn { width: 100%; }
}

/* Respeto adicional a reduce-motion aunque el JS no corra */
@media (prefers-reduced-motion: reduce) {
  .corp *, .corp *::before, .corp *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================================================
   ÓRBITA LUMEN (v5, 2026-07-29) — nueva capa visual del host corp.
   Se apila SOBRE el tema anterior: remapea tokens, agrega el cielo
   con la luz viajera y los componentes nuevos (.c-*2 / nuevos nombres).
   Los componentes funcionales (form, modal, banner, panel, propuesta,
   legal) conservan sus clases y reciben solo retoques de superficie.
   ================================================================ */

/* el contenido por encima del fondo. OJO: el nav NO entra aquí, position:relative
   le pisaría el sticky (ya tiene z-index 100 propio). */
.corp main, .corp .c-footer { position: relative; z-index: 1; }

/* ----- Nav ----- */
.c-nav.is-scrolled {
  background: rgba(251, 251, 253, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--c-line);
}
.corp .c-nav .c-btn-primary.c-btn-cta { border-radius: var(--radius-pill); }

/* ----- Cabecera interior: texto sobre el espacio (sin foto de fondo) ----- */
.c-page-head::before { background: none; opacity: 1; }
.c-page-head { padding-bottom: clamp(30px, 5vh, 56px); }
.c-page-head .c-h1 { font-size: clamp(36px, 5.4vw, 72px); letter-spacing: -0.03em; }

.c-hero2 .c-container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }

.c-hero2 .c-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: clamp(40px, 7vh, 76px); }

.c-window { perspective: 1200px; width: min(880px, 92vw); margin-inline: auto; }
.c-window-in { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--c-glass-line);
  background: var(--c-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55), 0 0 80px rgba(126, 90, 184, 0.2);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--dur-2) var(--ease-out); }
.c-window img { width: 100%; aspect-ratio: 1920 / 1000; object-fit: cover; object-position: 72% 40%; display: block; }

/* ----- Cinturón de stack: chips de vidrio en marquee ----- */
.c-belt { overflow: hidden; padding: clamp(20px, 3.4vh, 34px) 0; position: relative; z-index: 1;
  border-block: 1px solid var(--c-glass-line); }
.c-belt-track { display: flex; width: max-content; }
.c-anim .c-belt-track { animation: cBelt 32s linear infinite; }
@keyframes cBelt { to { translate: -33.333% 0; } }
.c-belt ul { display: flex; list-style: none; margin: 0; padding: 0 14px 0 0; gap: 14px; }
.c-belt li { font-family: var(--font-mono); font-size: 13px; color: var(--c-fg2); white-space: nowrap;
  border: 1px solid var(--c-glass-line); border-radius: var(--radius-pill);
  padding: 9px 18px; background: var(--c-glass); }
.c-belt li b { color: var(--c-pink2); font-weight: 600; margin-right: 6px; }
/* sin animación (o sin soporte) las copias quedan ocultas */
html:not(.c-anim) .c-belt ul[aria-hidden] { display: none; }

/* ----- Plano de vidrio (superficie base del sistema) ----- */
.c-plane { background: var(--c-glass); border: 1px solid var(--c-glass-line); border-radius: var(--radius-xl);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 70px rgba(0, 0, 0, 0.4); }

/* ----- Servicios (home): 4 tarjetas ----- */
.c-svcgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 24px); }

.c-orbit::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.22) 12% 88%, transparent); }
.c-ost { position: relative; width: calc(50% - 34px); padding: 22px 24px; margin-bottom: 30px; }
.c-ost:nth-child(odd) { margin-right: auto; text-align: right; }
.c-ost:nth-child(even) { margin-left: auto; }
.c-ost-dot { position: absolute; top: 28px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--c-bg); border: 2px solid var(--c-pink2); box-shadow: 0 0 16px rgba(230, 55, 128, 0.7); }
.c-ost:nth-child(odd) .c-ost-dot { right: -41px; }
.c-ost:nth-child(even) .c-ost-dot { left: -41px; }
.c-ost:nth-child(1) .c-ost-dot { border-color: #F58A4B; box-shadow: 0 0 16px rgba(245, 138, 75, 0.7); }
.c-ost:nth-child(3) .c-ost-dot { border-color: #B79CE4; box-shadow: 0 0 16px rgba(126, 90, 184, 0.8); }
.c-ost:nth-child(4) .c-ost-dot { border-color: #4ADE80; box-shadow: 0 0 16px rgba(74, 222, 128, 0.6); }
.c-ost h3 { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--c-fg1); margin: 4px 0 6px; }
.c-ost p { color: var(--c-fg2); font-size: 14.5px; margin: 0; }
.corp .c-ost-num { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-pink2); }

/* ----- Carrusel de proyectos (home): full-bleed, 3 por pantalla + peek ----- */
.c-carhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  margin-bottom: clamp(24px, 4vh, 40px); }
.c-carr { --bleed: clamp(16px, 3vw, 44px); --cgap: clamp(14px, 1.8vw, 24px); --peek: clamp(48px, 7vw, 120px);
  display: flex; gap: var(--cgap); overflow-x: auto; width: 100%;
  padding: 0 var(--bleed) 6px; scroll-padding-inline: var(--bleed);
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; position: relative; z-index: 1; }
.c-carr::-webkit-scrollbar { display: none; }
.c-pcase { flex: 0 0 max(280px, calc((100vw - 2 * var(--bleed) - 3 * var(--cgap) - var(--peek)) / 3));
  position: relative; scroll-snap-align: start; overflow: hidden;
  text-decoration: none; color: var(--c-fg1);
  transition: translate var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.c-carr .c-pcase:hover { translate: 0 -6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 50px rgba(107, 119, 196, 0.22); }
.c-live--dev { color: #FFC46B; border-color: rgba(255, 196, 107, 0.5); }
/* El nombre va ARRIBA de la imagen: cabecera propia de la card, la
   captura queda completa y despejada debajo */
.c-pcase-body { padding: 10px 14px 11px; display: flex; flex-direction: column; gap: 1px;
  background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid var(--c-glass-line); }

/* ----- CTA portal: anillo con cometa de marca ----- */
.c-portal { text-align: center; padding-bottom: clamp(80px, 12vh, 150px); }

/* ----- Portafolio: cuadrícula + modal (compacta: 4 por fila en desktop,
   pensada para crecer con más proyectos) ----- */
.c-pf { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.c-pfcard { position: relative; overflow: hidden; padding: 0; border: 1px solid var(--c-glass-line);
  border-radius: var(--radius-xl); background: var(--c-glass); text-align: left; color: var(--c-fg1);
  cursor: pointer; font: inherit;
  transition: translate var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.c-pfcard:hover { translate: 0 -8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 34px 90px rgba(0, 0, 0, 0.5), 0 0 60px rgba(107, 119, 196, 0.22); }
.c-pfshot { aspect-ratio: 16 / 10; overflow: hidden; display: block; }
.c-pfshot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
  transition: scale 0.4s var(--ease-out); }
.c-pfcard:hover .c-pfshot img { scale: 1.05; }
.c-pfinfo { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px 10px 14px;
  background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid var(--c-glass-line); }
.c-pfinfo h2 { font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 1.2; color: var(--c-fg1); margin: 0; }
.corp .c-pftag { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-fg2); margin-top: 3px; }
.c-pfopen { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-content: center;
  background: rgba(255, 255, 255, 0.1); border: 1px solid var(--c-glass-line); color: var(--c-fg1);
  font-size: 19px; line-height: 1;
  transition: background var(--dur-2), border-color var(--dur-2), rotate var(--dur-3) var(--ease-out); }
.c-pfcard:hover .c-pfopen { border-color: var(--c-pink2); background: rgba(230, 55, 128, 0.25); rotate: 90deg; }

.c-mdl-overlay { position: fixed; inset: 0; z-index: 155; display: grid; place-items: center;
  padding: clamp(14px, 3vw, 40px); background: rgba(4, 6, 12, 0.7);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.c-mdl-overlay[hidden] { display: none; }
.c-mdl { width: min(880px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-xl);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 60px 160px rgba(0, 0, 0, 0.7), 0 0 90px rgba(126, 90, 184, 0.25); }
  /* OJO: sin scrollbar-width aquí — en Chrome 121+ desactivaría la scrollbar
     de marca (::-webkit-scrollbar); Firefox hereda scrollbar-color del guard */
.c-anim .c-mdl { animation: cModalIn 0.3s var(--ease-out); }
.c-mdl-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 7px;
  padding: 14px 18px; background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.c-mdl-bar i { width: 10px; height: 10px; border-radius: 50%; }
.c-mdl-bar i:nth-child(1) { background: #F58A4B; }
.c-mdl-bar i:nth-child(2) { background: #E63780; }
.c-mdl-bar i:nth-child(3) { background: #7E5AB8; }
.c-mdl-bar em { font-family: var(--font-mono); font-style: normal; font-size: var(--text-xs); color: var(--c-fg2); margin-left: 8px; }
.c-mdl-close { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--c-glass-line);
  background: rgba(255, 255, 255, 0.06); color: var(--c-fg1); font-size: 17px; line-height: 1; cursor: pointer;
  display: grid; place-content: center; transition: border-color var(--dur-1), background var(--dur-1); }
.c-mdl-close:hover { border-color: var(--c-pink2); background: rgba(230, 55, 128, 0.22); }
.c-mdl-shot img { width: 100%; aspect-ratio: 1200 / 750; object-fit: cover; object-position: top; display: block; }
.c-mdl-body { padding: clamp(22px, 3.4vw, 38px); }
.c-mdl-body .c-h2 { margin-bottom: var(--space-3); }
.c-mdl-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--space-2); }
body.c-mdl-open { overflow: hidden; }

/* ----- Cotizador: campos sobre vidrio ----- */
.c-form { background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-xl); padding: clamp(24px, 3.4vw, 40px); }
.c-input { background: var(--c-surface); border-color: var(--c-line-strong); border-radius: 14px; }
.c-input:focus-visible { outline: 2px solid var(--fa-magenta); outline-offset: 1px; border-color: transparent; }
.c-quote-box { background: var(--c-glass); border-color: var(--c-glass-line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* ----- Footer sótano + RRSS ----- */
.c-footer { background: linear-gradient(180deg, rgba(3, 4, 9, 0.55), rgba(3, 4, 9, 0.82) 40%, rgba(3, 4, 9, 0.92));
  border-top-color: var(--c-glass-line);
  box-shadow: inset 0 18px 34px -22px rgba(0, 0, 0, 0.85); }

/* ----- Gracias: check con halo ----- */
.c-thanks-check { width: 84px; height: 84px; font-size: 34px;
  border: 2px solid rgba(74, 222, 128, 0.5);
  box-shadow: 0 0 44px rgba(74, 222, 128, 0.25); }

/* ----- Superficies legadas sobre el nuevo fondo (panel, login, propuesta) ----- */
.c-login-box, .c-panel-card, .c-panel-tabla { background: var(--c-surface); border: 1px solid var(--c-line); }

/* ----- Banner de cookies en clave Lumen: vidrio del sótano + costura ----- */
.c-cookie-banner {
  background: rgba(5, 7, 14, 0.72);
  border-top-color: var(--c-glass-line);
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.5);
}
.c-cookie-banner::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(245, 138, 75, 0.8) 30%, rgba(230, 55, 128, 0.8) 50%, rgba(126, 90, 184, 0.8) 70%, transparent),
    linear-gradient(90deg, var(--c-line), var(--c-line));
  background-size: 45% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -60% 0, 0 0;
}
.c-anim .c-cookie-banner::before { animation: cSparkTravel 10s linear infinite; }
.c-cookie-inner { max-width: 1400px; }

/* ----- Responsive de la capa nueva ----- */
@media (max-width: 1200px) and (min-width: 941px) { .c-svcgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 940px) {
  .c-svcgrid { grid-template-columns: 1fr; }
  .c-orbit::before { left: 8px; }
  .c-ost { width: auto; margin-left: 34px; margin-right: 0; text-align: left; }
  .c-ost:nth-child(odd) { margin-right: 0; text-align: left; }
  .c-ost:nth-child(even) { margin-left: 34px; }
  .c-ost .c-ost-dot { left: -33px; right: auto; }
  .c-ost:nth-child(odd) .c-ost-dot { right: auto; left: -33px; }
  .c-carhead { flex-direction: column; align-items: flex-start; }
  .c-pcase { flex-basis: min(78vw, 340px); }
}
@media (max-width: 1200px) and (min-width: 701px) { .c-pf { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .c-pf { grid-template-columns: 1fr; }
}

/* Login de clientes: isotipo sobre el formulario */
.c-login-logo { display: flex; justify-content: center; margin-bottom: var(--space-5); }
.c-login-logo img { width: 46px; height: 40px; }

/* =========================================================
   Rediseño claro · agosto 2026
   Lo que sigue nació como capa encima del tema oscuro y ahora es el diseño.
   Convención: .fa-* para lo nuevo, y overrides de .c-* donde la pieza heredada
   se conserva pero cambia de piel.
   ========================================================= */

body.corp{background:var(--c-bg);color:var(--c-fg1)}

.c-container{max-width:1320px;padding-inline:clamp(20px,3vw,48px)}
.c-container--wide{max-width:1320px}

.c-nav{background:rgba(251,250,248,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--c-line)}
.c-nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(100deg,#F58A4B,#E63780 32%,#C03B8E 52%,#7E5AB8 76%,#5C7FC7);opacity:.9}
.c-nav.is-scrolled{background:rgba(251,250,248,.94);border-bottom-color:var(--c-line)}
.c-nav .c-logo-color{opacity:1 !important}
.c-nav .c-logo-white{opacity:0 !important}
.corp .c-nav-link{color:var(--c-fg2);position:relative}
.corp .c-nav-link::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--fa-magenta);transform:scaleX(0);transform-origin:0 50%;transition:transform .24s cubic-bezier(.2,.7,.3,1)}
.corp .c-nav-link:hover::after,.corp .c-nav-link.is-active::after{transform:scaleX(1)}
.corp .c-nav-link:hover,.corp .c-nav-link.is-active{color:var(--c-fg1)}
.c-nav-link.is-active{box-shadow:none}
.corp .c-nav .c-btn-primary.c-btn-cta{color:var(--c-fg1);border-color:var(--c-line-strong)}
.corp .c-nav .c-btn-primary.c-btn-cta:hover{background:linear-gradient(#FBFAF8,#FBFAF8) padding-box,linear-gradient(100deg,#F58A4B,#E63780,#7E5AB8) border-box}

.c-hero2{min-height:auto;padding-block:clamp(64px,10vw,132px) clamp(40px,6vw,84px);text-align:left;background:
  radial-gradient(900px 520px at 88% -8%,rgba(230,55,128,.10),transparent 62%),
  radial-gradient(760px 460px at -6% 4%,rgba(245,138,75,.10),transparent 60%),
  radial-gradient(680px 520px at 46% 118%,rgba(126,90,184,.09),transparent 62%)}
.c-hero2 .c-container{align-items:stretch}
.c-hero2 .c-h1{max-width:20ch;margin-inline:0;font-size:clamp(40px,7.2vw,104px);letter-spacing:-.035em}
.c-hero2 .c-h1 .c-glw,.c-hero2 .c-h1 span{-webkit-text-fill-color:currentColor;background:none;color:var(--c-fg1)}
.c-hero2-lead{margin:var(--space-4) 0 var(--space-6);max-width:56ch}
.c-hero2 .c-hero-ctas{justify-content:flex-start;margin-bottom:clamp(32px,5vh,60px)}
.c-hero2 .c-eyebrow{color:var(--c-primary)}

.c-hero2 .c-window{display:none}
.c-window{width:100%;max-width:none;perspective:none}
.c-window-in{background:var(--c-surface);border:1px solid var(--c-line)}
.c-window img{aspect-ratio:1920/760}

.c-belt{border-block:1px solid var(--c-line);background:var(--c-surface)}
.c-belt li{color:var(--c-fg2);border-color:var(--c-line);background:var(--c-bg)}
.c-belt li b{color:var(--fa-magenta)}

.c-plane,.c-window-in,.c-form,.c-quote-box,.c-svc-media{background:var(--c-surface);border-color:var(--c-line)}
.c-plane{box-shadow:none}

.c-section{padding-block:clamp(56px,8vw,112px)}
.c-section--alt::before,.c-section--alt::after{display:none}
.c-section--alt{background:var(--c-surface-2)}
.c-section-head .c-h2{letter-spacing:-.035em}
.c-eyebrow{color:var(--c-primary);letter-spacing:.14em}

.c-svcgrid{grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.6vw,26px)}

.c-pcase,.c-case,.c-pfcard{background:var(--c-surface);border-color:var(--c-line)}
.c-live--dev{color:#B4690E;border-color:rgba(180,105,14,.5)}

.c-term,.c-term-body{background:var(--c-surface-2);border-color:var(--c-line)}
.c-term-line,.c-term-prompt{color:var(--c-fg2)}
.c-term-ok{color:#0F9D6B}

.c-wordmark{color:var(--c-fg1)}

.c-btn{border-radius:24px}
.corp .c-btn-primary{background:var(--c-primary);color:#fff;border-color:transparent}
.corp .c-btn-primary:hover{background:var(--c-primary-hover)}
.corp .c-btn-outline,.corp .c-btn-ghost,.corp .c-btn-secondary{color:var(--c-fg1);border-color:var(--c-line-strong);background:var(--c-surface)}
.corp .c-btn-outline:hover,.corp .c-btn-ghost:hover,.corp .c-btn-secondary:hover{border-color:var(--c-fg1);background:var(--c-surface)}
.corp .c-btn-primary.c-btn-cta{background:var(--c-primary);border-color:transparent;color:#fff;font-family:var(--font-body);font-weight:700}
.corp .c-btn-primary.c-btn-cta::before,.corp .c-btn-primary.c-btn-cta::after{display:none}
.corp .c-btn-primary.c-btn-cta:hover{background:var(--c-primary-hover);box-shadow:none}
.corp .c-nav .c-btn-primary.c-btn-cta{background:transparent;color:var(--c-fg1);border-color:var(--c-line-strong)}
.corp .c-nav .c-btn-primary.c-btn-cta:hover{background:var(--c-fg1);color:#fff;border-color:transparent;box-shadow:none}

.c-cookie-banner a{color:var(--fa-morado)}
.c-consent,.c-consent-legend{color:var(--c-fg2)}
/* El fondo blanco es del MODAL, no del documento legal. `.c-legal` es el mismo
   envoltorio en los dos sitios (CorpController::legal lo pone con y sin ?bare),
   así que al pintarlo aquí la página /privacidad quedaba con una caja blanca
   recortada encima del papel, cortada por el ancho del contenedor. Dentro del
   modal el fondo ya lo pone .c-modal-box. */
.c-modal-box,.c-mdl-body{background:var(--c-surface);color:var(--c-fg1)}
.c-legal{color:var(--c-fg1)}

.c-h1,.c-h2,.c-h3{color:var(--c-fg1)}
.c-h2{font-size:clamp(30px,3.6vw,58px);letter-spacing:-.035em}
.c-section-sub{color:var(--c-fg2)}
.corp a{color:var(--c-link)}
.corp ::selection{background:rgba(214,53,119,.22)}

.c-wsp-fab{box-shadow:none;border:1px solid rgba(11,17,32,.12)}
.corp *{text-shadow:none}
.c-pcase,.c-case,.c-pfcard,.c-card,.c-quote-box,.c-form,.c-svc-media,.c-mdl-body,.c-modal-box{box-shadow:none}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .c-svcgrid > .c-scard{animation:faSube linear both;animation-timeline:view();animation-range:entry 4% cover 24%}
    .c-svcgrid > .c-scard:nth-child(2){animation-range:entry 6% cover 26%}
    .c-svcgrid > .c-scard:nth-child(3){animation-range:entry 8% cover 28%}
    .c-svcgrid > .c-scard:nth-child(4){animation-range:entry 10% cover 30%}
    @keyframes faSube{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  }
  .c-live::before{animation:faLatido 2.6s ease-out infinite}
  @keyframes faLatido{0%,100%{opacity:1}50%{opacity:.4}}
}

@media (max-width:900px){
  .c-svcgrid{grid-template-columns:1fr}
  .c-hero2 .c-h1{font-size:clamp(34px,9vw,52px)}
}
/* Reseñas como dos mazos de cartas. El borde que asoma no es un adorno: es el canto de
   la carta que viene, con el color de ese cliente. Dos bordes a la vista y no más. */
.fa-carrusel{position:relative}
.fa-mazos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,34px);
  align-items:start;padding:6px 40px 16px 40px}
.fa-mazo{display:grid;position:relative}

/* Todas las cartas ocupan la misma celda, así el mazo mide lo que la más alta. */
.fa-cita{grid-area:1/1;margin:0;display:flex;flex-direction:column;
  background:var(--c-surface);border:1.5px solid var(--fa-tono);border-radius:24px;
  padding:30px 30px 26px;
  transform:translate(calc(9px * var(--i,0) * var(--dir,1)),calc(9px * var(--i,0)));
  transition:transform .42s cubic-bezier(.28,.66,.3,1),opacity .2s ease-out}
.fa-cita[data-pos="0"]{--i:0;z-index:4}
.fa-cita[data-pos="1"]{--i:1;z-index:3}
.fa-cita[data-pos="2"]{--i:1;z-index:2;opacity:0}
.fa-cita[data-pos="3"]{--i:1;z-index:1;opacity:0}
/* El mazo lo llena la base de datos y puede traer más de cuatro: de la tercera
   posición en adelante, todas ocultas. Solo se ven la de arriba y el canto de la
   siguiente, que es de lo que vive el diseño. */
.fa-cita:not([data-pos="0"]):not([data-pos="1"]){--i:1;z-index:1;opacity:0}
/* Con un número impar de reseñas, el mazo corto lleva una carta invisible en su
   último turno: ocupa el lugar sin dibujar nada ni rotular lo que falta. */
.fa-cita--fantasma{visibility:hidden;border:0;padding:0}
.fa-cita.fa-sin-tran{transition:none}
.fa-cita--naranja{--fa-tono:var(--fa-naranja)}
.fa-cita--magenta{--fa-tono:var(--fa-magenta)}
.fa-cita--morado{--fa-tono:var(--fa-morado)}
.fa-cita--azul{--fa-tono:var(--fa-azul)}

/* El mazo crece hacia el centro y las cartas entran y salen por fuera: así el canto
   asoma en el hueco central, que estaba vacío, en vez de empujar hacia los márgenes. */
[data-mazo="izq"] .fa-cita{--dir:1;--fa-ent-x:-140px}
[data-mazo="der"] .fa-cita{--dir:-1;--fa-ent-x:140px}
[data-mazo="izq"] .fa-cita.fa-fuera{transform:translate(-190px,0);opacity:0}
[data-mazo="der"] .fa-cita.fa-fuera{transform:translate(190px,0);opacity:0}

/* La entrada, al asomar la sección. Va con fotogramas a propósito: ver el ESTADO. */
@keyframes faMontarA{from{transform:translate(var(--fa-ent-x,0),0);opacity:0}}
@keyframes faMontarB{from{transform:translate(var(--fa-ent-x,0),0);opacity:0}}
.fa-mazo.fa-por-montar .fa-cita{opacity:0}
.fa-mazo.fa-montando-a .fa-cita{animation:faMontarA .52s cubic-bezier(.28,.66,.3,1) backwards}
.fa-mazo.fa-montando-b .fa-cita{animation:faMontarB .52s cubic-bezier(.28,.66,.3,1) backwards}
.fa-mazo[class*="fa-montando-"] .fa-cita[data-pos="3"]{animation-delay:0s}
.fa-mazo[class*="fa-montando-"] .fa-cita[data-pos="2"]{animation-delay:.07s}
.fa-mazo[class*="fa-montando-"] .fa-cita[data-pos="1"]{animation-delay:.14s}
.fa-mazo[class*="fa-montando-"] .fa-cita[data-pos="0"]{animation-delay:.22s}

.fa-cita blockquote{margin:0;flex:1}
.fa-cita blockquote::before{content:"“";display:block;font-family:var(--font-display);font-weight:800;font-size:44px;line-height:.6;margin-bottom:12px;color:var(--fa-tono)}
.fa-cita p{font-size:17px;line-height:1.55;color:var(--c-fg1);margin:0;text-wrap:pretty}

/* Los dos círculos: el retrato, y el logo mordiéndolo por abajo a la derecha.
   El anillo blanco es lo que despega el logo de la foto. */
.fa-cita-pie{margin-top:22px;padding-top:18px;border-top:1px solid var(--c-line);
  display:flex;gap:14px;align-items:center}
.fa-retrato{position:relative;flex:none;width:72px;height:72px}
.fa-retrato-foto{display:flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:50%;overflow:hidden;
  background:var(--c-surface-2);border:1px solid var(--c-line);
  font-family:var(--font-display);font-weight:800;font-size:26px;color:var(--c-fg2)}
.fa-retrato-foto img{width:100%;height:100%;object-fit:cover;display:block}
.fa-retrato-logo{position:absolute;right:-5px;bottom:-3px;
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;overflow:hidden;
  background:var(--c-surface);box-shadow:0 0 0 3px var(--c-surface);
  border:1px solid currentColor;
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:-.03em}
.fa-retrato-logo img{width:100%;height:100%;object-fit:contain;display:block}
.fa-retrato-logo{color:var(--fa-tono)}
.fa-cita-quien{display:flex;flex-direction:column;gap:2px;align-items:flex-start;min-width:0}
/* Quién firma: el nombre pesa, el cargo explica y la empresa va con el color de la
   carta, que es el mismo del canto. */
.fa-cita-nombre{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--c-fg1);line-height:1.25}
.fa-cita-cargo{font-size:13px;color:var(--c-fg2);line-height:1.35}
.fa-cita-empresa{font-weight:700;font-size:14px;color:var(--fa-tono);margin-top:2px}

.fa-carrusel-mandos{display:flex;align-items:center;justify-content:space-between;
  gap:20px;margin-top:18px}
.fa-puntos{display:flex;gap:24px}
.fa-punto{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--c-line-strong)}
.fa-punto[hidden]{display:none}
.fa-punto--activo{background:var(--fa-magenta);width:26px;border-radius:999px}
.fa-flechas{display:flex;gap:10px}
.fa-flecha{width:46px;height:46px;padding:0;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--c-line-strong);border-radius:50%;background:transparent;
  color:var(--c-fg1);cursor:pointer}
.fa-flecha svg{width:20px;height:20px}
.fa-flecha:hover:not(:disabled){border-color:var(--fa-magenta);color:var(--fa-magenta)}
.fa-flecha:disabled{opacity:.3;cursor:default}
.fa-punto:focus-visible,.fa-flecha:focus-visible{outline:2px solid var(--fa-magenta);outline-offset:3px}

@media (prefers-reduced-motion: no-preference){
  .fa-punto,.fa-flecha{transition:background-color .2s ease-out,color .2s ease-out,
    border-color .2s ease-out,width .28s cubic-bezier(.28,.66,.3,1)}
}
@media (prefers-reduced-motion: reduce){
  .fa-cita{transition:none;animation:none}
}

/* Servicios · tres arriba y dos abajo. En móvil pasa a ser una sola pila de cartas con
   los mandos de las reseñas. `--fa-mazo` le dice al guion cuál de los dos modos está
   activo, para que el punto de quiebre viva solo aquí. */
.fa-svcs{--fa-mazo:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,2.6vw,44px)}
.fa-svc{border-top:1px solid var(--c-line);padding-top:22px;margin:0}
.fa-svc-marca{display:block;width:34px;height:34px;border-radius:50%;
  background:var(--fa-tono);margin-bottom:18px}
.fa-svc h3{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
.fa-svc p{color:var(--c-fg2);margin:0;font-size:15px;line-height:1.55}
.fa-svc .fa-falta{display:table;margin-top:14px}
.fa-svc-enlace{display:table;margin-top:14px;font-family:var(--font-mono);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fa-tono);
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.fa-svc--naranja{--fa-tono:var(--fa-naranja)}
.fa-svc--magenta{--fa-tono:var(--fa-magenta)}
.fa-svc--morado{--fa-tono:var(--fa-morado)}
.fa-svc--azul{--fa-tono:var(--fa-azul)}
.fa-svc--tinta{--fa-tono:var(--c-fg1)}
/* Los cuatro colores del logo ya tienen dueño, así que el sexto usa el gradiente
   entero: es la marca completa, no un quinto color inventado. */
.fa-svc--gradiente{--fa-tono:var(--fa-magenta)}
.fa-svc--gradiente .fa-svc-marca{background:linear-gradient(100deg,#F58A4B,#E63780 34%,#C03B8E 54%,#7E5AB8 78%,#5C7FC7)}
.fa-svcs-mandos{display:none}

@media (max-width:900px){
  .fa-svcs{--fa-mazo:1;display:grid;grid-template-columns:1fr}
  .fa-svc{grid-area:1/1;border-top:0;border:1.5px solid var(--fa-tono);border-radius:24px;
    padding:26px 26px 24px;background:var(--c-surface);
    transform:translate(calc(9px * var(--i,0) * -1),calc(9px * var(--i,0)));
    transition:transform .42s cubic-bezier(.28,.66,.3,1),opacity .2s ease-out}
  .fa-svc[data-pos="0"]{--i:0;z-index:5}
  .fa-svc[data-pos="1"]{--i:1;z-index:4}
  .fa-svc[data-pos="2"]{--i:1;z-index:3;opacity:0}
  .fa-svc[data-pos="3"]{--i:1;z-index:2;opacity:0}
  .fa-svc[data-pos="4"]{--i:1;z-index:1;opacity:0}
  .fa-svc.fa-sin-tran{transition:none}
  .fa-svc.fa-fuera{transform:translate(-190px,0);opacity:0}
  .fa-svcs-caja{padding:6px 20px 0 20px}
  .fa-svcs-mandos{display:flex;flex-direction:column-reverse;gap:16px;margin-top:22px}
}

/* Proceso · el gradiente del logo hace de recorrido: va del naranja al azul en el mismo
   orden que las cuatro etapas, así que el avance lo cuenta la marca y no un adorno.
   Todo esto va sobre el marcado que ya trae la vista: no se toca ni un id ni una clase.
   La cabecera viene centrada por un style en línea, y aquí manda la alineación del
   resto de la página, que va a la izquierda. */
/* El pie enlaza "Cómo trabajamos" a /#proceso: sin este aire la cápsula flotante
   del menú se come el rótulo de la sección al llegar. */
.fa-sec-proceso{scroll-margin-top:96px}
.fa-sec-proceso .c-section-head[style]{text-align:left !important}
.fa-sec-proceso .c-section-sub[style]{margin-inline:0 !important}
/* El original es una línea vertical central con las etapas alternadas a izquierda y
   derecha, cada una al 50% de ancho. Hay que deshacer eso antes de montar la fila:
   ancho, márgenes, alineación y la posición del punto vienen todos de corp.css. */
.fa-sec-proceso .c-orbit{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,2.2vw,26px);list-style:none;margin:0;padding:0;position:relative;
  max-width:none}
.fa-sec-proceso .c-orbit::before{content:"";position:absolute;top:7px;left:0;right:0;
  bottom:auto;width:auto;height:3px;border-radius:3px;
  background:linear-gradient(100deg,#F58A4B,#E63780 34%,#C03B8E 54%,#7E5AB8 78%,#5C7FC7)}
/* Las etapas son .c-plane, o sea que traen cristal esmerilado y sombra del tema oscuro:
   sin quitar el backdrop-filter queda un rectángulo turbio tapando la línea. */
.fa-sec-proceso .c-orbit .c-ost,
.fa-sec-proceso .c-orbit .c-ost:nth-child(odd),
.fa-sec-proceso .c-orbit .c-ost:nth-child(even){width:auto;margin:0;text-align:left;
  background:none;border:0;border-radius:0;padding:34px 0 0;position:relative;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.fa-sec-proceso .c-ost::before,.fa-sec-proceso .c-ost::after{display:none}
.fa-sec-proceso .c-orbit .c-ost .c-ost-dot{top:-1px;left:0;right:auto;width:17px;height:17px;
  border-radius:50%;background:var(--fa-tono);border:3px solid var(--c-bg);
  box-shadow:none;transform:none;animation:none}
.fa-sec-proceso .c-orbit .c-ost:nth-child(1){--fa-tono:var(--fa-naranja)}
.fa-sec-proceso .c-orbit .c-ost:nth-child(2){--fa-tono:var(--fa-magenta)}
.fa-sec-proceso .c-orbit .c-ost:nth-child(3){--fa-tono:var(--fa-morado)}
.fa-sec-proceso .c-orbit .c-ost:nth-child(4){--fa-tono:var(--fa-azul)}
.fa-sec-proceso .c-ost-num{display:block;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--c-fg2);margin-bottom:8px}
.fa-sec-proceso .c-ost h3{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.fa-sec-proceso .c-ost p{color:var(--c-fg2);margin:0;font-size:15px;line-height:1.55}
@media (max-width:900px){
  .fa-sec-proceso .c-orbit{grid-template-columns:1fr;gap:26px}
  .fa-sec-proceso .c-orbit::before{display:none}
  .fa-sec-proceso .c-orbit .c-ost,
  .fa-sec-proceso .c-orbit .c-ost:nth-child(odd),
  .fa-sec-proceso .c-orbit .c-ost:nth-child(even){padding:0 0 0 30px}
  .fa-sec-proceso .c-orbit .c-ost .c-ost-dot{top:4px}
}

/* `.c-portal` centra todo su contenido, herencia del cierre anterior. Aquí el texto y
   los rótulos de los campos van a la izquierda, como el resto de la página. */
.fa-sec-cotizar.c-portal{text-align:left}
/* Las reseñas terminan en unos mandos pequeños y el cierre abre con su marco: entre los
   dos quedaban 224px de aire, la suma de dos paddings de sección. Se recorta el
   encuentro sin tocar el ritmo del resto de la página. */
.fa-sec-citas{padding-bottom:clamp(32px,4vw,56px)}
.fa-sec-cotizar.c-portal{padding-top:clamp(36px,4.4vw,64px)}

/* Cierre · marco desplazado con dos pestañas, escribir o agendar. Las pestañas van en
   píldoras dentro de un raíl: con el formulario largo detrás, elegir vía es la decisión
   principal de la sección y conviene que se vea antes de leer nada. */
.fa-sec-cotizar.c-portal{text-align:left}
/* Las reseñas terminan en unos mandos pequeños y el cierre abre con su marco: entre los
   dos quedaban 224px de aire, la suma de dos paddings de sección. Se recorta el
   encuentro sin tocar el ritmo del resto de la página. */
.fa-sec-citas{padding-bottom:clamp(32px,4vw,56px)}
.fa-sec-cotizar.c-portal{padding-top:clamp(36px,4.4vw,64px)}
.fa-cierre{position:relative;padding:0 10px 10px 0}
.fa-cierre-marco{position:relative;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,64px);align-items:start;background:var(--c-surface);
  border:1.5px solid var(--fa-morado);border-radius:24px;padding:clamp(30px,4vw,56px)}
.fa-cierre-marco::after{content:"";position:absolute;inset:10px -10px -10px 10px;
  border:1.5px solid var(--fa-naranja);border-radius:24px;z-index:-1}
.fa-cierre-marco .c-h2{margin-bottom:12px}
.fa-cierre-texto .c-section-sub{max-width:34ch;margin:0}

.fa-conmuta{display:flex;flex-direction:column;gap:14px;min-width:0}
.fa-pest{display:flex;gap:4px;background:var(--c-surface-2);border-radius:999px;
  padding:4px;align-self:flex-start}
.fa-pes{padding:10px 20px;border:0;border-radius:999px;background:none;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:700;color:var(--c-fg2)}
.fa-pes--sel{background:var(--c-surface);color:var(--fa-magenta)}
.fa-pes:focus-visible{outline:2px solid var(--fa-magenta);outline-offset:3px}
.fa-panel[hidden]{display:none}

.fa-cierre-form{display:flex;flex-direction:column;gap:14px}
.fa-cierre-nota,.fa-cierre-pie{color:var(--c-fg2);font-size:14px;margin:0}
/* El aviso de datos del formulario de agenda: informa sin pedir una casilla. */
.fa-cierre-aviso{color:var(--c-fg2);font-size:12.5px;line-height:1.5;margin:0;max-width:52ch}
.fa-cierre-campo{display:flex;flex-direction:column;gap:6px}
.fa-cierre-campo > span{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--c-fg2)}
.fa-cierre-campo textarea,.fa-cierre-campo input,.fa-cierre-campo select{
  font-family:inherit;font-size:15px;color:var(--c-fg1);border:1px solid var(--c-line-strong);
  border-radius:14px;padding:12px 14px;background:var(--c-surface);resize:vertical;width:100%}
.fa-cierre-campo select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--c-fg2) 50%),
    linear-gradient(135deg,var(--c-fg2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.fa-cierre-campo textarea:focus,.fa-cierre-campo input:focus,.fa-cierre-campo select:focus{
  outline:2px solid var(--fa-magenta);outline-offset:1px;border-color:transparent}
.fa-dos-campos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fa-cierre-form .c-btn{align-self:flex-start}

/* Calendario de la agenda. Los días y las horas son etiquetas con un radio
   dentro, no botones: el hueco elegido viaja en el POST como cualquier campo y
   sin JavaScript se ven las horas de todos los días a la vez. El radio se
   esconde con `appearance:none` y no con `display:none`, que lo sacaría del
   recorrido con el tabulador y del lector de pantalla. */
.fa-cal-campo{border:0;margin:0;padding:0;min-width:0}
.fa-cal-campo.is-error .fa-cal-dias,.fa-cal-campo.is-error .fa-cal-horas{
  outline:2px solid var(--c-danger);outline-offset:6px;border-radius:12px}
.fa-cal-rot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 0 10px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fa-morado)}
.fa-cal-zona{letter-spacing:.04em;text-transform:none;color:var(--c-fg2)}
.fa-cal-dias,.fa-cal-horas{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fa-cal-horas{margin-top:10px}
.fa-cal-dia-rot{flex-basis:100%;margin:0 0 2px;font-size:12px;color:var(--c-fg2)}
/* Con JavaScript se muestra un día cada vez y el rótulo sobra. */
[data-agenda].js-un-dia .fa-cal-horas{display:none}
[data-agenda].js-un-dia .fa-cal-horas.is-abierto{display:flex}
[data-agenda].js-un-dia .fa-cal-dia-rot{display:none}

.fa-dia,.fa-hora{position:relative;cursor:pointer;background:var(--c-surface);
  border:1px solid var(--c-line-strong)}
.fa-dia input,.fa-hora input{position:absolute;inset:0;width:100%;height:100%;margin:0;
  appearance:none;-webkit-appearance:none;border:0;background:none;cursor:pointer}
.fa-dia{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 12px;
  border-radius:14px;font-family:inherit}
.fa-dia-d{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-fg2)}
.fa-dia-n{font-size:17px;font-weight:800;letter-spacing:-.02em}
.fa-dia-m{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--c-fg2)}
.fa-dia:has(input:checked){border-color:var(--fa-magenta);background:rgba(194,43,103,.06)}
.fa-dia:has(input:checked) .fa-dia-n{color:var(--fa-magenta)}
.fa-hora{padding:8px 14px;border-radius:999px;font-family:var(--font-mono);font-size:13px;
  color:var(--c-fg1)}
.fa-hora:has(input:checked){border-color:var(--fa-magenta);background:var(--fa-magenta);color:#fff}
.fa-dia:has(input:focus-visible),.fa-hora:has(input:focus-visible){
  outline:2px solid var(--fa-magenta);outline-offset:2px}
/* Respaldo para quien no tenga `:has()`: la clase la pone el guion. */
.fa-dia--sel{border-color:var(--fa-magenta);background:rgba(194,43,103,.06)}
.fa-dia--sel .fa-dia-n{color:var(--fa-magenta)}
.fa-hora--sel{border-color:var(--fa-magenta);background:var(--fa-magenta);color:#fff}

@media (max-width:900px){
  .fa-cierre-marco{grid-template-columns:1fr}
  .fa-dos-campos{grid-template-columns:1fr}
}
@media (max-width:900px){
  .fa-faq-caja{grid-template-columns:1fr}
  .fa-agenda{position:static}
}

.fa-faq{display:grid;gap:0}
.fa-faq details{border-top:1px solid var(--c-line)}
.fa-faq details:last-child{border-bottom:1px solid var(--c-line)}
.fa-faq summary{cursor:pointer;font-weight:700;font-size:19px;line-height:1.35;list-style:none;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:20px 0;color:var(--c-fg1)}
.fa-faq summary::-webkit-details-marker{display:none}
.fa-faq summary:hover{color:var(--fa-magenta)}
.fa-faq summary:focus-visible{outline:2px solid var(--fa-magenta);outline-offset:3px;border-radius:6px}
.fa-faq summary::after{content:"+";font-family:var(--font-mono);color:var(--fa-magenta);font-size:24px;line-height:1;flex:none}
.fa-faq details[open] summary{color:var(--fa-magenta)}
.fa-faq details[open] summary::after{content:"\2013"}

.fa-falta{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--fa-aviso);background:var(--fa-aviso-fondo);border:1px dashed var(--fa-aviso);border-radius:999px;padding:3px 10px;vertical-align:middle}
.fa-ph-marca--borrador{color:var(--fa-aviso);border-color:var(--fa-aviso);background:var(--fa-aviso-fondo)}

/* Bajo 900px los dos mazos se apilan: uno encima del otro, y ambos salen hacia la
   izquierda porque ya no hay lados que respetar. */
@media (max-width:900px){
  .fa-mazos{grid-template-columns:1fr;padding:6px 24px 28px 24px}
  [data-mazo="izq"] .fa-cita,[data-mazo="der"] .fa-cita{--dir:1;--fa-ent-x:-140px}
  [data-mazo="der"] .fa-cita.fa-fuera{transform:translate(-190px,0);opacity:0}
  .fa-carrusel-mandos{flex-direction:column-reverse;gap:16px}
}
@media (max-width:820px){.fa-cifras{grid-template-columns:1fr}}

.fa-pie{--pie-fondo:#3A2A73;--pie-fg:#FFFFFF;--pie-fg-2:#CFC5EC;--pie-linea:rgba(255,255,255,.16);
  background:var(--pie-fondo);color:var(--pie-fg);border-top:0;position:relative;padding:0}
.fa-pie::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(100deg,#F58A4B,#E63780 32%,#C03B8E 52%,#7E5AB8 76%,#5C7FC7)}
.fa-pie-in{padding-block:clamp(44px,5vw,72px) clamp(28px,3vw,40px)}
.fa-pie a{color:var(--pie-fg-2);text-decoration:none}
.fa-pie a:hover{color:var(--pie-fg)}

/* Cuatro columnas arriba: la firma con el logotipo, los dos canales y el botón. */
.fa-pie-canales{display:grid;grid-template-columns:minmax(220px,1.1fr) 1fr 1fr auto;gap:clamp(20px,3vw,48px);align-items:center;padding-bottom:clamp(28px,3.4vw,42px);border-bottom:1px solid var(--pie-linea)}
.fa-pie-firma{display:flex;flex-direction:column;gap:12px;max-width:34ch}
.fa-pie .fa-pie-logo{height:62px;width:auto;object-fit:contain;align-self:flex-start}
.fa-pie-firma p{margin:0;font-size:14px;color:var(--pie-fg-2);line-height:1.5}
.fa-pie-rotulo{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--pie-fg-2);margin-bottom:8px}
.fa-pie-dato{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(19px,1.7vw,24px);color:var(--pie-fg) !important;letter-spacing:-.01em}
.fa-pie-dato:hover{color:#FFC46B !important}
.fa-pie-botones{display:flex;gap:12px;flex-wrap:wrap;align-self:center}
/* El botón de acceso es la única acción del pie: va en sólido para que se despegue del
   fondo morado, no en el vidrio translúcido del resto. */
.fa-pie-pildora{display:inline-flex;align-items:center;min-height:50px;padding:0 26px;
  border-radius:999px;background:#FFFFFF;border:1px solid #FFFFFF;
  color:var(--pie-fondo) !important;font-weight:700;font-size:15.5px;
  transition:background .2s ease-out,color .2s ease-out,transform .2s ease-out}
.fa-pie-pildora:hover{background:#EFE9FA;color:var(--pie-fondo) !important}
.fa-pie-pildora:focus-visible{outline:2.5px solid #fff;outline-offset:3px}

.fa-pie-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);padding-block:clamp(30px,3.6vw,48px);border-bottom:1px solid var(--pie-linea)}
.fa-pie-col h3,.fa-pie-col-tit{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--pie-fg);margin:0 0 18px}
.fa-pie-col a{display:block;padding:7px 0;font-size:15px}

.fa-pie-legal{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:clamp(24px,2.6vw,34px)}
.fa-pie-legal-texto p{margin:0;font-size:14px;color:var(--pie-fg-2)}
.fa-pie-redes{display:flex;gap:10px}
.fa-pie-redes a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.10);display:grid;place-content:center;color:var(--pie-fg) !important;transition:background .2s ease-out,transform .2s ease-out}
.fa-pie-redes svg{width:19px;height:19px;display:block}
.fa-pie-redes a:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}

@media (max-width:900px){
  .fa-pie-canales{grid-template-columns:1fr 1fr}
  .fa-pie-firma{grid-column:1 / -1}
  .fa-pie-botones{grid-column:1 / -1}
  .fa-pie-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .fa-pie-canales,.fa-pie-cols{grid-template-columns:1fr}
}

.fa-casos{padding-block:clamp(60px,8vw,120px) clamp(40px,5vw,80px)}
.fa-casos-lista{display:flex;flex-direction:column;gap:0}

.fa-caso{display:grid;grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);align-items:center;gap:clamp(24px,3.4vw,64px);
  padding-block:clamp(36px,4.4vw,72px);padding-inline:clamp(20px,3vw,48px);max-width:1320px;margin-inline:auto;width:100%}
.fa-caso:nth-child(even){grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr)}
.fa-caso:nth-child(even) .fa-caso-lienzo{order:2}
.fa-caso:nth-child(even) .fa-caso-texto{order:1}

.fa-caso-lienzo{position:relative;border-radius:20px;padding:clamp(20px,2.2vw,34px);display:grid;place-items:center;min-height:0;width:100%;max-width:560px;justify-self:start}
.fa-caso:nth-child(even) .fa-caso-lienzo{justify-self:end}
/* La luz del lienzo nace del borde exterior, el que da al margen de la página, y
   eso depende de en qué lado cayó el caso, no de su color. Antes iba escrita
   dentro de cada color, así que al cambiar el orden de los casos (2026-08-17,
   ASR · C2 · purbano) dos de tres quedaron con la luz hacia dentro. Ahora el
   punto lo fija la posición con --fa-foco y el color solo pone el tono. */
.fa-caso{--fa-foco:20%}
.fa-caso:nth-child(even){--fa-foco:80%}
.fa-caso--naranja .fa-caso-lienzo{background:radial-gradient(120% 120% at var(--fa-foco) 0%,rgba(245,138,75,.26),rgba(245,138,75,.05) 62%,transparent 76%),#F7F5F2}
.fa-caso--magenta .fa-caso-lienzo{background:radial-gradient(120% 120% at var(--fa-foco) 0%,rgba(230,55,128,.22),rgba(230,55,128,.05) 62%,transparent 76%),#F8F4F6}
.fa-caso--morado .fa-caso-lienzo{background:radial-gradient(120% 120% at var(--fa-foco) 0%,rgba(126,90,184,.22),rgba(126,90,184,.05) 62%,transparent 76%),#F5F4F8}
.fa-caso--azul .fa-caso-lienzo{background:radial-gradient(120% 120% at var(--fa-foco) 0%,rgba(92,127,199,.22),rgba(92,127,199,.05) 62%,transparent 76%),#F3F5F9}

.fa-equipo{width:min(100%,460px);position:relative}
.fa-equipo-pantalla{border:8px solid #14181F;border-bottom-width:11px;border-radius:11px;overflow:hidden;background:#14181F}
.fa-equipo-pantalla img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.fa-equipo-base{display:block;height:10px;width:116%;margin:0 -8%;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#20252E,#141821);position:relative}
.fa-equipo-base::after{content:"";position:absolute;left:50%;top:0;translate:-50% 0;width:16%;height:4px;border-radius:0 0 5px 5px;background:#0B0E14}

.fa-caso-texto{max-width:none}
.fa-caso-marca{margin:0 0 14px;font-family:var(--font-display);font-weight:800;font-size:clamp(19px,1.7vw,23px);letter-spacing:-.02em}
.fa-caso--naranja .fa-caso-marca{color:var(--fa-naranja)}
.fa-caso--magenta .fa-caso-marca{color:var(--fa-magenta)}
.fa-caso--morado .fa-caso-marca{color:var(--fa-morado)}
.fa-caso--azul .fa-caso-marca{color:var(--fa-azul)}
.fa-caso-titular{font-family:var(--font-display);font-weight:800;font-size:clamp(21px,2.1vw,32px);line-height:1.14;letter-spacing:-.03em;margin:0 0 16px;color:var(--c-fg1);max-width:26ch;text-wrap:balance}
.fa-caso-desc{color:var(--c-fg2);font-size:clamp(15.5px,1.18vw,18px);line-height:1.62;margin:0 0 24px;max-width:66ch}
.fa-caso-lista{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.fa-caso-lista li{font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--c-fg2);border:1px solid var(--c-line);border-radius:999px;padding:6px 12px;background:var(--c-surface)}
.fa-caso-enlace{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;text-decoration:none;color:var(--c-fg1);border-bottom:2px solid var(--c-line);padding-bottom:3px;transition:border-color .25s ease-out,color .25s ease-out}
/* font-weight explícito: la flecha heredaba el 700 del enlace y era el ÚNICO
   carácter de toda la página que pedía JetBrains Mono 700, 31 KB de fuente
   por un solo glifo. Con 600 usa la que ya se descarga. */
.fa-caso-enlace::after{content:"\2197";font-family:var(--font-mono);font-size:14px;font-weight:600}
.fa-caso--naranja .fa-caso-enlace:hover{color:var(--fa-naranja);border-color:var(--fa-naranja)}
.fa-caso--magenta .fa-caso-enlace:hover{color:var(--fa-magenta);border-color:var(--fa-magenta)}
.fa-caso--morado .fa-caso-enlace:hover{color:var(--fa-morado);border-color:var(--fa-morado)}
.fa-caso--azul .fa-caso-enlace:hover{color:var(--fa-azul);border-color:var(--fa-azul)}
.fa-casos-pie{margin-top:clamp(24px,3vw,44px)}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .fa-caso-lienzo{animation:faCasoEntra linear both;animation-timeline:view();animation-range:entry 2% cover 22%}
    @keyframes faCasoEntra{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  }
}

@media (max-width:900px){
  .fa-caso,.fa-caso:nth-child(even){grid-template-columns:1fr;gap:24px}
  .fa-caso-lienzo,.fa-caso:nth-child(even) .fa-caso-lienzo{justify-self:stretch;max-width:none}
  .fa-caso:nth-child(even) .fa-caso-lienzo{order:0}
  .fa-caso:nth-child(even) .fa-caso-texto{order:1}
}

.c-belt{border-block:1px solid var(--c-line);background:var(--c-surface);overflow:hidden}

.c-hero2{background:none}
.c-hero2 .c-container{position:relative}
.c-hero2 .c-container::before{content:"";position:absolute;inset:-28px clamp(20px,3vw,48px);z-index:-1;border-radius:24px;
  background:radial-gradient(80% 120% at 92% -10%,rgba(230,55,128,.12),transparent 62%),
             radial-gradient(70% 110% at -6% 6%,rgba(245,138,75,.12),transparent 60%),
             radial-gradient(70% 120% at 46% 116%,rgba(126,90,184,.10),transparent 62%)}

.c-section--alt,.c-section--proof{background:transparent;position:relative}
.c-section--alt > .c-container,.c-section--proof > .c-container{position:relative}
.c-section--alt > .c-container::before,.c-section--proof > .c-container::before{content:"";position:absolute;
  inset:calc(-1 * clamp(28px,4vw,56px)) 0;z-index:-1;border-radius:24px;background:var(--c-surface-2)}

.c-hero2 .c-container::before{display:none}
.c-section--alt > .c-container::before,.c-section--proof > .c-container::before{display:none}
.c-section,.c-section--alt,.c-section--proof,.c-section--tint-1,.c-section--cta,.c-hero2,.c-belt{background:none}
.c-belt{background:transparent}

html{background:var(--c-bg)}
body.corp{position:relative;background:transparent}
.fa-pulso{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fa-pulso i{position:absolute;display:block;border-radius:50%;opacity:.5;
  background:radial-gradient(circle at center,var(--tono) 0%,var(--tono-0) 70%)}
.fa-pulso i:nth-child(1){--tono:rgba(245,138,75,.30);--tono-0:rgba(245,138,75,0);width:62vw;height:62vw;top:-22vw;left:-16vw}
.fa-pulso i:nth-child(2){--tono:rgba(230,55,128,.27);--tono-0:rgba(230,55,128,0);width:54vw;height:54vw;top:6vh;right:-18vw}
.fa-pulso i:nth-child(3){--tono:rgba(126,90,184,.27);--tono-0:rgba(126,90,184,0);width:66vw;height:66vw;bottom:-26vw;left:22vw}
.fa-pulso i:nth-child(4){--tono:rgba(92,127,199,.23);--tono-0:rgba(92,127,199,0);width:48vw;height:48vw;bottom:8vh;right:-12vw}

@media (prefers-reduced-motion:no-preference){
  .fa-pulso i{animation:faLatir 16s ease-in-out infinite alternate;will-change:opacity,transform}
  .fa-pulso i:nth-child(2){animation-duration:21s;animation-delay:-4s}
  .fa-pulso i:nth-child(3){animation-duration:26s;animation-delay:-9s}
  .fa-pulso i:nth-child(4){animation-duration:19s;animation-delay:-13s}
  @keyframes faLatir{
    from{opacity:.20;transform:scale(.93)}
    to{opacity:.58;transform:scale(1.06)}
  }
}

.c-hero2{text-align:center}
.c-hero2 .c-container{align-items:center}
.c-hero2 .c-eyebrow{display:none}
.c-hero2 .c-h1{font-size:clamp(30px,4.4vw,62px);max-width:19ch;margin-inline:auto;letter-spacing:-.03em;line-height:1.06}
.c-hero2-lead{margin-inline:auto;max-width:54ch}
.c-hero2 .c-hero-ctas{justify-content:center}

.c-hero2{padding-block:clamp(84px,12vw,176px) clamp(64px,9vw,132px)}
.c-hero2 .c-h1{margin-bottom:clamp(20px,2.4vw,34px)}
.c-hero2-lead{margin-block:0 clamp(30px,3.6vw,48px);font-size:clamp(16px,1.35vw,19px);line-height:1.62}
.c-hero2 .c-hero-ctas{margin-bottom:0;gap:16px}

.c-scard,.fa-cifra,.fa-cita,.c-plane,.fa-obra-shot{border-radius:24px}
.fa-caso-lienzo{border-radius:26px}
.fa-equipo-pantalla{border-radius:14px}
.c-belt li,.fa-caso-lista li{border-radius:999px}

.corp .c-btn,
.corp .c-btn-sm,
.corp .c-btn-lg,
.corp .c-btn-outline,
.corp .c-btn-primary,
.corp .c-btn-primary.c-btn-cta,
.corp .c-nav .c-btn-primary.c-btn-cta,
.corp .c-cookie-actions .c-btn,
.corp .c-mdl-actions .c-btn,
.corp .c-form-submit,
.corp .c-form button,
.corp button.c-btn,
.corp input[type="submit"]{border-radius:24px}

.c-hero2 .c-hero-ctas .c-btn-outline{display:none}
.corp .c-hero2 .c-hero-ctas .c-btn-primary,
.corp .c-hero2 .c-hero-ctas .c-btn-primary.c-btn-cta{
  border:2px solid transparent;border-radius:24px;color:var(--c-fg1);font-weight:700;
  background:linear-gradient(var(--c-bg),var(--c-bg)) padding-box,
             linear-gradient(100deg,#F58A4B,#E63780 34%,#C03B8E 54%,#7E5AB8 78%,#5C7FC7) border-box;
  transition:color .22s ease-out,transform .22s ease-out}
.corp .c-hero2 .c-hero-ctas .c-btn-primary:hover,
.corp .c-hero2 .c-hero-ctas .c-btn-primary.c-btn-cta:hover{
  color:var(--fa-magenta);background:linear-gradient(var(--c-bg),var(--c-bg)) padding-box,
             linear-gradient(100deg,#F58A4B,#E63780 34%,#C03B8E 54%,#7E5AB8 78%,#5C7FC7) border-box;
  box-shadow:none}

.corp{--nav-h:100px}
.c-nav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0}
.c-nav::after{opacity:0;height:1px;transition:opacity .3s ease-out}
.c-nav.is-scrolled{background:rgba(251,251,253,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(11,17,32,.07)}
.c-nav.is-scrolled::after{opacity:.55}
.c-nav .c-logo img{height:44px}
.c-nav .c-wordmark{font-size:25px;letter-spacing:-.025em}
.c-nav-inner{gap:clamp(24px,4vw,64px)}
.c-hero2{padding-block:clamp(96px,13vw,208px) clamp(64px,9vw,132px)}

.corp .c-nav-link.fa-activa{color:var(--c-fg1)}
.corp .c-nav-link.fa-activa::after{transform:scaleX(1)}

.c-nav{transition:padding .35s cubic-bezier(.2,.7,.3,1)}
.c-nav-inner{transition:min-height .35s cubic-bezier(.2,.7,.3,1),max-width .35s cubic-bezier(.2,.7,.3,1),padding .35s cubic-bezier(.2,.7,.3,1),background-color .3s ease-out,border-color .3s ease-out}
.c-nav .c-logo img{transition:height .35s cubic-bezier(.2,.7,.3,1)}

.c-nav.is-scrolled{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;padding-block:10px}
.c-nav.is-scrolled::after{opacity:0}
.c-nav.is-scrolled .c-nav-inner{
  max-width:1040px;margin-inline:auto;min-height:62px;padding-inline:14px 14px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(11,17,32,.09);border-radius:999px}
.c-nav.is-scrolled .c-logo img{height:30px}
.c-nav.is-scrolled .c-wordmark{font-size:19px}
.c-nav.is-scrolled .c-nav-inner > *:first-child{padding-left:12px}

@media (prefers-reduced-motion:no-preference){
  .c-nav.is-scrolled .c-nav-inner{animation:faNavEntra .72s cubic-bezier(.28,.66,.3,1) .16s both}
  @keyframes faNavEntra{
    from{transform:translateY(-150%);opacity:0}
    to{transform:translateY(0);opacity:1}
  }
}

.corp .c-nav .c-btn-primary.c-btn-cta{transition:background-color .3s ease-out,color .3s ease-out,border-color .3s ease-out}
.corp .c-nav.is-scrolled .c-btn-primary.c-btn-cta{background:var(--c-primary);color:#fff;border-color:transparent}
.corp .c-nav.is-scrolled .c-btn-primary.c-btn-cta:hover{background:var(--c-primary-hover);color:#fff;border-color:transparent}

.c-cookie-banner{
  left:50%;right:auto;translate:-50% 0;bottom:22px;width:min(1200px,calc(100vw - 40px));
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-top:0;box-shadow:none;padding:0}
.c-cookie-inner{
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:nowrap;
  background:#FFFFFF;
  color:var(--c-fg1);border:1px solid rgba(11,17,32,.11);border-radius:999px;
  padding:12px 14px 12px 26px;box-shadow:none;max-width:none;margin:0}
.c-cookie-inner::before{display:none}
.c-cookie-inner p{margin:0;flex:1 1 0;min-width:0;font-size:13.75px;line-height:1.45;color:var(--c-fg2)}
.c-cookie-inner strong{display:inline;margin-right:8px;font-weight:800;color:var(--c-fg1)}
.c-cookie-inner a{color:var(--fa-morado);text-underline-offset:3px}
.c-cookie-actions{display:flex;gap:10px;flex:none;margin-top:0}
.c-cookie-actions .c-btn{flex:none}
.corp:has(.c-cookie-banner:not([hidden])) .c-wsp-fab{bottom:118px}

@media (prefers-reduced-motion:no-preference){
  .c-cookie-banner{animation:faCookieEntra .6s cubic-bezier(.28,.66,.3,1) .5s both}
  @keyframes faCookieEntra{
    from{translate:-50% 26px;opacity:0}
    to{translate:-50% 0;opacity:1}
  }
  @keyframes faBarrido{
    from{background-position:-320px 0, 0 0}
    to{background-position:calc(100% + 320px) 0, 0 0}
  }
  .c-cookie-inner{animation:faLatido 2.6s ease-out 1.1s infinite both}
  @keyframes faLatido{
    0%{transform:scale(1)}
    7%{transform:scale(1.032)}
    14%{transform:scale(1)}
    21%{transform:scale(1.019)}
    30%,100%{transform:scale(1)}
  }
  .c-anim .c-cookie-inner{border-color:transparent}
  .c-anim .c-cookie-inner::after{
    content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
    background:
      linear-gradient(90deg, rgba(245,138,75,0), rgba(245,138,75,.75) 28%, rgba(230,55,128,.95) 50%, rgba(126,90,184,.75) 72%, rgba(126,90,184,0)),
      linear-gradient(rgba(11,17,32,.12), rgba(11,17,32,.12));
    background-size:320px 100%, 100% 100%;
    background-repeat:no-repeat,no-repeat;
    background-position:-320px 0, 0 0;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    animation:faBarrido 9s linear infinite}
}
@media (max-width:760px){
  .c-cookie-inner{border-radius:22px;padding:18px 20px;justify-content:stretch;flex-wrap:wrap}
  .c-cookie-actions{flex:1 1 100%}
  .c-cookie-actions .c-btn{flex:1 1 auto;justify-content:center}
}

.c-cookie-banner::before,.c-cookie-banner::after{display:none}

.c-cookie-inner p{color:#57606E}
.c-cookie-inner strong{color:#0B1120}

/* Los casos usan la misma cabecera que el resto: rótulo mono y titular. */
.fa-casos .c-section-head{margin-bottom:clamp(28px,3.4vw,52px)}

/* Honeypot del formulario del cierre: fuera de la vista pero accesible para quien
   navegue con lector de pantalla, que verá su etiqueta y lo dejará vacío. */
.fa-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fa-consiente{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--c-fg2)}
.fa-consiente input{margin-top:3px;accent-color:var(--fa-magenta)}

/* Cierre de páginas internas: el mismo marco, con el botón en vez del formulario.
   Repetir ahí los dos formularios de la home sería pedir lo mismo dos veces. */
.fa-cierre-marco--simple{align-items:center}
@media (max-width:900px){.fa-cierre-accion{justify-content:flex-start}}

/* Propuesta comercial: bloques de texto (alcance, condiciones, notas). La clase se
   usaba en la vista pero nunca tuvo regla, así que salían pegados entre sí. */
.c-prop-bloque{margin-bottom:clamp(20px,2.6vw,32px)}
.c-prop-bloque:last-child{margin-bottom:0}
.c-prop-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fa-morado);margin:0 0 8px}
.c-prop-texto{color:var(--c-fg2);line-height:1.6;margin:0;max-width:72ch}

/* ── Rescatadas de la limpieza ───────────────────────────────────────────────
   Estas tres iban agrupadas con selectores del tema oscuro y se borraron con
   ellos, pero sus clases siguen en uso. */

/* Cabecera de página interior. Sin esto el titular quedaba pegado al nav: la
   regla original metía el aire con padding, y además se colaba bajo el nav
   transparente con un margen negativo que aquí ya no hace falta. */
.c-page-head{position:relative;overflow-x:clip;
  padding:clamp(52px,7vw,88px) 0 clamp(26px,4vw,44px)}

/* El contenido, por encima de los destellos de fondo. */
.c-section > .c-container{position:relative;z-index:1}

/* Numeración de los servicios en la página interior: contorno en vez de relleno,
   para que el número acompañe sin competir con el titular. */
.corp .c-svc-num{font-family:var(--font-display);font-weight:800;font-size:40px;
  line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--fa-magenta)}

/* Acceso de clientes: la descripción y el formulario en paralelo, a columnas iguales.
   Antes el formulario iba centrado en todo el ancho y quedaban dos tercios vacíos. */
.c-acceso-par{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);
  align-items:center}
.c-acceso-lado .c-h1{font-size:clamp(30px,3.6vw,48px);margin:0 0 12px}
.c-acceso-lado .c-section-sub{margin:0 0 28px;max-width:44ch}
.c-acceso-dentro{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.c-acceso-item{display:flex;gap:12px;align-items:flex-start}
.c-acceso-punto{width:10px;height:10px;border-radius:50%;background:var(--fa-tono);
  flex:none;margin-top:7px}
.c-acceso-item--naranja{--fa-tono:var(--fa-naranja)}
.c-acceso-item--magenta{--fa-tono:var(--fa-magenta)}
.c-acceso-item--morado{--fa-tono:var(--fa-morado)}
.c-acceso-item--azul{--fa-tono:var(--fa-azul)}
.c-acceso-txt{font-size:15px;color:var(--c-fg2);line-height:1.5}
.c-acceso-txt b{display:block;color:var(--c-fg1);font-weight:700;margin-bottom:2px}
/* El formulario no gana nada por ser ancho: dos campos estirados a 588px se leen
   peor y parecen vacíos. Se le pone medida y se centra en su columna; el aire que
   sobra a los lados es preferible al campo desbordado. */
.c-acceso-par .c-login-box{max-width:420px;margin:0 auto;align-self:center;width:100%}
.c-acceso-par .c-form .c-btn{width:100%}
@media (max-width:900px){
  .c-acceso-par{grid-template-columns:1fr}
}

.c-login-box .c-form{background:none;border:0;border-radius:0;padding:0;
  backdrop-filter:none;-webkit-backdrop-filter:none}

/* ----- Área táctil en móvil ------------------------------------------------------------
   Los enlaces que funcionan como botón (los "Cotiza...", el enlace de cada caso,
   los datos de contacto del pie del cotizador) miden lo que mide su texto: entre
   19 y 23px de alto. Con el dedo eso se falla. Se les da altura sin cambiar el
   diseño: el padding no mueve nada porque son display:table o inline-block en su
   propia línea. En escritorio se quedan como están, que ahí hay puntero. */
@media (max-width: 700px) {
  .corp .c-card-link,
  .fa-svc-enlace,
  .fa-caso-enlace,
  .c-quote-box a,
  .fa-pie-col a,
  .fa-legal-doc-footer a { padding-block: 13px; }
  .fa-pie-col a { display: inline-block; }
}

/* El punto se ve de 8px y se toca en 32: el área táctil la da un pseudo-elemento
   centrado, que no ocupa sitio en el diseño. Fue de 44px hasta el 2026-08-18, pero
   con 8px de separación las áreas de dos puntos vecinos se pisaban y el dedo caía
   en el equivocado. Ahora 32 de área y 24 de hueco: los centros quedan justo a 32
   y ningún área invade la del vecino. */
.fa-punto::after{content:"";position:absolute;top:50%;left:50%;
  width:32px;height:32px;transform:translate(-50%,-50%)}

/* ═══ MOVIMIENTO ════════════════════════════════════════════════════════════════
   Añadido el 2026-08-17. Hasta aquí la home solo movía los halos del fondo y la
   cápsula del menú: el sistema de entrada (.c-reveal) existía desde el principio
   y no lo usaba ni un bloque.

   Reglas que sigue todo lo de abajo, sin excepción:
   · solo `transform` y `opacity`, nunca alto, ancho ni filtros
   · todo dentro de prefers-reduced-motion: no-preference
   · CSS siempre que se pueda; el JS solo pone la clase al entrar en pantalla
   · cada sección se mueve DISTINTO. El mismo fade-in-up repetido veinte veces es
     justo lo que el manual de este proyecto prohíbe.
   ────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

  /* ── Escalonado ──────────────────────────────────────────────────────────────
     Cada hijo entra un poco después que el anterior. El retraso lo lleva --i,
     que ponen las vistas, y se corta en 8 para que una lista larga no acabe
     entrando medio segundo tarde. */
  .c-anim .c-reveal { transition-delay: calc(min(var(--i, 0), 8) * 70ms); }

  /* ── Cabecera de sección: el rótulo llega antes que el titular ─────────────── */
  .c-anim .c-section-head.c-reveal .c-eyebrow,
  .c-anim .c-section-head.c-reveal .c-h2,
  .c-anim .c-section-head.c-reveal .c-section-sub { opacity: 0; translate: 0 10px; }
  .c-anim .c-section-head.c-reveal.is-in .c-eyebrow,
  .c-anim .c-section-head.c-reveal.is-in .c-h2,
  .c-anim .c-section-head.c-reveal.is-in .c-section-sub {
    opacity: 1; translate: 0 0;
    transition: opacity .5s var(--ease-out), translate .5s var(--ease-out);
  }
  .c-anim .c-section-head.c-reveal.is-in .c-h2 { transition-delay: .08s; }
  .c-anim .c-section-head.c-reveal.is-in .c-section-sub { transition-delay: .16s; }

  /* ── Servicios: el disco crece y el texto sube ────────────────────────────────
     El disco es el ancla visual de la carta, así que es lo primero que se mueve:
     nace en el centro y crece. No sube como el resto, para que la sección no sea
     seis veces el mismo gesto. */
  .c-anim .fa-svc.c-reveal .fa-svc-marca { transform: scale(0); transform-origin: center; }
  .c-anim .fa-svc.c-reveal.is-in .fa-svc-marca {
    transform: scale(1);
    transition: transform .45s cubic-bezier(.34, 1.4, .64, 1);
    transition-delay: calc(min(var(--i, 0), 8) * 70ms + 60ms);
  }

  /* ── Proceso: la línea del gradiente se dibuja al llegar ──────────────────────
     Es el recorrido de las cuatro etapas, así que crece de izquierda a derecha,
     como se lee. */
  .c-anim .fa-sec-proceso .c-orbit.c-reveal::before { transform: scaleX(0); transform-origin: left; }
  .c-anim .fa-sec-proceso .c-orbit.c-reveal.is-in::before {
    transform: scaleX(1); transition: transform 1s var(--ease-out) .1s;
  }

  /* ── Casos: la pantalla entra desde su lado ───────────────────────────────────
     Cada caso alterna lado, así que su lienzo entra desde el borde por el que
     está: el movimiento cuenta la composición en vez de contradecirla. */
  .c-anim .fa-caso.c-reveal .fa-caso-lienzo { opacity: 0; translate: -22px 0; }
  .c-anim .fa-caso.c-reveal:nth-child(even) .fa-caso-lienzo { translate: 22px 0; }
  .c-anim .fa-caso.c-reveal.is-in .fa-caso-lienzo {
    opacity: 1; translate: 0 0;
    transition: opacity .6s var(--ease-out), translate .6s var(--ease-out);
  }
  /* El texto llega detrás, escalonado por piezas */
  .c-anim .fa-caso.c-reveal .fa-caso-marca,
  .c-anim .fa-caso.c-reveal .fa-caso-titular,
  .c-anim .fa-caso.c-reveal .fa-caso-desc,
  .c-anim .fa-caso.c-reveal .fa-caso-lista,
  .c-anim .fa-caso.c-reveal .fa-caso-enlace { opacity: 0; translate: 0 12px; }
  .c-anim .fa-caso.c-reveal.is-in .fa-caso-marca,
  .c-anim .fa-caso.c-reveal.is-in .fa-caso-titular,
  .c-anim .fa-caso.c-reveal.is-in .fa-caso-desc,
  .c-anim .fa-caso.c-reveal.is-in .fa-caso-lista,
  .c-anim .fa-caso.c-reveal.is-in .fa-caso-enlace {
    opacity: 1; translate: 0 0;
    transition: opacity .5s var(--ease-out), translate .5s var(--ease-out);
  }
  .c-anim .fa-caso.c-reveal.is-in .fa-caso-marca    { transition-delay: .10s; }
  .c-anim .fa-caso.c-reveal.is-in .fa-caso-titular  { transition-delay: .17s; }
  .c-anim .fa-caso.c-reveal.is-in .fa-caso-desc     { transition-delay: .24s; }
  .c-anim .fa-caso.c-reveal.is-in .fa-caso-lista    { transition-delay: .31s; }
  .c-anim .fa-caso.c-reveal.is-in .fa-caso-enlace   { transition-delay: .38s; }

  /* ── Hero: el titular entra palabra a palabra ────────────────────────────────
     El troceado lo hace el guion del layout; si no corre, no hay .fa-troceado y
     el titular sale entero, sin animación y sin hueco. Cada palabra sube y se
     enfoca, con 45ms entre una y otra: leído se percibe como una frase que se
     escribe sola, no como veinte elementos animándose. */
  .c-hero2 .c-h1.fa-troceado .fa-palabra {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.42em);
    animation: faPalabraEntra .62s var(--ease-out) forwards;
    animation-delay: calc(var(--w, 0) * 45ms + 120ms);
  }
  @keyframes faPalabraEntra { to { opacity: 1; transform: none; } }

  /* La bajada y los botones llegan cuando el titular ya terminó */
  .c-hero2 .c-hero2-lead,
  .c-hero2 .c-hero-ctas {
    opacity: 0;
    animation: faHeroSube .6s var(--ease-out) forwards;
  }
  .c-hero2 .c-hero2-lead { animation-delay: .55s; }
  .c-hero2 .c-hero-ctas  { animation-delay: .70s; }
  @keyframes faHeroSube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  /* El rótulo abre la escena */
  .c-hero2 .c-eyebrow { opacity: 0; animation: faHeroSube .5s var(--ease-out) forwards; }

  /* ── Reacción al cursor ──────────────────────────────────────────────────────
     Solo donde hay puntero: en un teléfono el :hover se queda pegado tras tocar.
     Nada de sombras (el manual las prohíbe): la respuesta es desplazamiento y
     color, que es como se comporta el resto del sistema. */
  @media (hover: hover) and (pointer: fine) {

    /* Servicios: la carta se levanta, su disco crece y la costura de arriba se
       tiñe del color del servicio. Tres gestos pequeños a la vez se leen como
       uno solo. */
    .fa-svc { transition: transform .25s var(--ease-out), border-color .25s var(--ease-out); }
    .fa-svc:hover { transform: translateY(-3px); border-top-color: var(--fa-tono); }
    .fa-svc-marca { transition: transform .25s var(--ease-out); }
    .fa-svc:hover .fa-svc-marca { transform: scale(1.12); }

    /* Casos: la pantalla se levanta al pasar por el bloque. El movimiento es del
       conjunto, no de la imagen suelta: el caso responde como una pieza. */
    .fa-caso-lienzo { transition: transform .35s var(--ease-out); }
    .fa-caso:hover .fa-caso-lienzo { transform: translateY(-6px); }

    /* Etapas del proceso: el disco de la etapa crece al acercarse */
    .c-ost-dot { transition: transform .25s var(--ease-out); }
    .c-ost:hover .c-ost-dot { transform: scale(1.35); }

    /* El enlace del caso empuja su flecha */
    .fa-caso-enlace::after { transition: transform .25s var(--ease-out); }
    .fa-caso-enlace:hover::after { transform: translate(3px, -3px); }
  }
}


/* =========================================================
   Rediseño de la portada · 2026-09-19
   Hero, servicios, proceso y casos, llevados del mockup
   (docs/rediseno/mockup-corp) tal como quedaron aprobados.
   Van al final del archivo a propósito: varias reglas pisan las de arriba,
   igual que hacían cuando el mockup cargaba su hoja después de esta.
   ========================================================= */

/* =========================================================
   Hero

   Inspirado en la lámina de referencia del 2026-09-19: dos columnas, texto a
   la izquierda y la ilustración a la derecha, con la segunda línea del titular
   en el degradado de marca.
   ========================================================= */

/* Sin fondo propio: el papel y sus destellos los pinta el sitio (`.fa-pulso`,
   fijo detrás de todo), y por eso `.c-hero2` va en `background:none`. Pintar
   aquí un degradado dejaba un corte recto justo bajo el nav, donde acababa el
   del hero y empezaba el del sitio. */
.fa-hero {
  position: relative;
  background: none;
  padding-block: clamp(48px, 7vw, 96px) clamp(44px, 6vw, 84px);
}

.fa-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}

/* ----- Columna de texto ------------------------------------------------- */

.fa-hero-rotulo {
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-fg2);
}

.fa-hero-tit {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 3.6vw, 50px);
  line-height: 1.1;
  letter-spacing: -.035em;
  color: var(--c-fg1);
}
/* El corte de línea lo manda el marcado, no el ancho de la caja: la referencia
   tiene dos líneas y con `max-width` en ch se partía en tres a poco que
   cambiara el cuerpo de letra. */
.fa-hero-tit span,
.fa-hero-tit b { display: block; }
/* La segunda línea, en el degradado de marca. `text-fill-color` va con su
   respaldo en `color`: si el navegador no recorta el fondo al texto, queda
   magenta legible y no un bloque en blanco. */
.fa-hero-tit b {
  font-weight: 800;
  padding-bottom: .08em;
  color: var(--c-primary);
  background: linear-gradient(100deg, #E63780 0%, #C03B8E 45%, #7E5AB8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fa-hero-bajada {
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  max-width: 46ch;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.62;
  color: var(--c-fg2);
}

.fa-hero-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px clamp(14px, 1.6vw, 26px);
  margin-top: clamp(24px, 3vw, 38px);
}

/* Botón degradado de la referencia. Tres apuntes:
   · `border:0` explícito: sobre un <button> el navegador pone el suyo en
     relieve y aparece un filo oscuro.
   · el selector lleva `.corp` porque `.corp a` fija el color de todo enlace y
     sin eso el texto del botón sale morado sobre el degradado.
   · el naranja de marca se queda fuera: con texto blanco da 3,09:1 y no llega
     a AA. El tramo magenta→violeta va de 5,48 a 5,20. */
.corp .fa-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  padding: 15px clamp(22px, 2vw, 28px);
  border-radius: var(--radius-pill);
  background: linear-gradient(100deg, #C22B67 0%, #B33C93 52%, #7E5AB8 100%);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(214, 53, 119, .22);
}
.corp .fa-hero-btn svg { flex: none; }

@media (prefers-reduced-motion: no-preference) {
  .corp .fa-hero-btn { transition: transform .22s ease-out; }
  .corp .fa-hero-btn:hover { transform: translateY(-1px); }
}

.fa-hero-alt {
  font-size: 15px;
  color: var(--c-fg2);
}
.fa-hero-alt a {
  color: var(--c-link);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--c-link) 35%, transparent);
  padding-bottom: 1px;
}
.fa-hero-alt a:hover { border-bottom-color: var(--c-link); }

/* ----- Tres avales ------------------------------------------------------ */

.fa-hero-avales {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
  margin: clamp(30px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}
.fa-hero-aval {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-fg2);
}
.fa-hero-aval b {
  display: block;
  font-weight: 700;
  color: var(--c-fg1);
}
.fa-hero-aval-icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--fa-magenta) 9%, #fff);
  color: var(--fa-magenta);
}
.fa-hero-aval:nth-child(2) .fa-hero-aval-icono {
  background: color-mix(in srgb, var(--fa-morado) 9%, #fff);
  color: var(--fa-morado);
}
.fa-hero-aval:nth-child(3) .fa-hero-aval-icono {
  background: color-mix(in srgb, var(--fa-azul) 9%, #fff);
  color: var(--fa-azul);
}

/* ----- La ilustración ---------------------------------------------------- */
/* El PNG trae alfa: va suelta sobre el papel, sin caja ni marco, como en la
   referencia. La proporción la manda la propia imagen. */

.fa-hero-media { margin: 0; }
.fa-hero-media img { width: 100%; height: auto; }

/* Entre 900 y 1200 la columna de texto no da para tres avales sin partir cada
   rótulo en dos líneas: van de dos en dos, que es lo que cabe entero. */
@media (max-width: 1200px) {
  .fa-hero-avales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ----- Móvil ------------------------------------------------------------ */

@media (max-width: 900px) {
  .fa-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .fa-hero-tit { font-size: clamp(30px, 7.4vw, 44px); }
  .fa-hero-bajada { max-width: none; }
  .fa-hero-avales { grid-template-columns: 1fr; gap: 14px; }
}

/* =========================================================
   Servicios

   De la lámina de referencia: tarjeta con caja, icono en pastilla de color,
   número al canto, promesa corta bajo el título y «Saber más».
   ========================================================= */

/* ----- Cabecera ---------------------------------------------------------- */

.fa-svcs-cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  margin-bottom: clamp(28px, 3.4vw, 48px);
}
.fa-svcs-nueva .c-section-head { margin: 0; }
.fa-svcs-nueva .c-h2 {
  max-width: 18ch;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 clamp(12px, 1.4vw, 18px);
}
/* El remate del titular en el degradado de marca, como la segunda línea del
   hero. `color` queda de respaldo por si el recorte al texto no se aplica. */
.fa-svcs-nueva .c-h2 b {
  font-weight: inherit;
  color: var(--c-primary);
  background: linear-gradient(100deg, #E63780 0%, #C03B8E 45%, #7E5AB8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fa-svcs-nueva .c-section-sub { max-width: 52ch; }

.corp .fa-svcs-todos {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-link);
  text-decoration: none;
  white-space: nowrap;
}
.corp .fa-svcs-todos:hover { color: var(--c-primary); }

/* ----- Las seis tarjetas ------------------------------------------------- */
/* Rejilla propia: la del sitio no lleva caja y separa con una línea arriba. */

.fa-svcs-nueva .fa-svcs { gap: clamp(16px, 1.6vw, 24px); }

.fa-svcs-nueva .fa-svc {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  /* Cuatro filas fijas y la de la descripción elástica: así «Saber más» queda
     pegado al fondo de la tarjeta y las seis lo tienen a la misma altura,
     en vez de flotar donde acabe cada texto. */
  grid-template-rows: auto auto 1fr auto;
  column-gap: 16px;
  border-top: 0;
  padding: clamp(20px, 1.8vw, 26px);
  border: 1px solid color-mix(in srgb, var(--c-line) 55%, transparent);
  border-radius: 18px;
  background: var(--c-surface);
  box-shadow: 0 2px 10px rgba(11, 17, 32, .04);
}

.fa-svc-icono {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fa-tono) 11%, #fff);
  color: var(--fa-tono);
}
/* El sexto no tiene color propio: los cuatro del logo ya tienen dueño y aquí
   se usa la marca entera, igual que hace el sitio con `--fa-tono` en gradiente. */
.fa-svcs-nueva .fa-svc--gradiente .fa-svc-icono {
  background: linear-gradient(100deg, rgba(245, 138, 75, .16), rgba(230, 55, 128, .16) 45%, rgba(126, 90, 184, .16));
  color: var(--fa-morado);
}
.fa-svcs-nueva .fa-svc--tinta .fa-svc-icono {
  background: color-mix(in srgb, var(--c-fg1) 7%, #fff);
}

.fa-svc-num {
  position: absolute;
  top: clamp(18px, 1.6vw, 24px);
  right: clamp(18px, 1.6vw, 24px);
  font-family: var(--font-mono);
  font-size: 13px;
  color: color-mix(in srgb, var(--c-fg2) 60%, transparent);
}

.fa-svcs-nueva .fa-svc h3 {
  grid-column: 2;
  align-self: center;
  margin: 0;
  padding-right: 34px;   /* el número no pisa el título */
  font-size: 17px;
  line-height: 1.25;
}
.fa-svcs-nueva .fa-svc-promesa {
  grid-column: 2;
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--c-fg1);
}
.fa-svcs-nueva .fa-svc > p:not(.fa-svc-promesa) {
  grid-column: 2;
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
}

/* «Saber más» en sans y en el azul de enlace, como la referencia: el mono en
   versalitas del sitio pesa demasiado repetido seis veces dentro de cajas. */
.corp .fa-svcs-nueva .fa-svc-enlace {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  align-self: end;
  margin-top: 18px;
  padding-bottom: 0;
  border-bottom: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-link);
}
.corp .fa-svcs-nueva .fa-svc-enlace:hover { color: var(--c-primary); }

@media (prefers-reduced-motion: no-preference) {
  .corp .fa-svcs-nueva .fa-svc-enlace svg { transition: transform .22s ease-out; }
  .corp .fa-svcs-nueva .fa-svc-enlace:hover svg { transform: translateX(3px); }
}

/* ----- Móvil ------------------------------------------------------------- */
/* Debajo de 900 manda el mazo de cartas del sitio: mismas clases, mismo guion.
   Aquí solo se ajusta lo que aporta esta piel. */

@media (max-width: 1100px) {
  .fa-svcs-cabecera { flex-direction: column; align-items: flex-start; }
  .fa-svcs-nueva .c-h2 { max-width: none; }
}

@media (max-width: 900px) {
  .fa-svcs-nueva .fa-svc { padding: 24px; border-radius: 24px; }
  .fa-svc-num { top: 24px; right: 24px; }
}

/* =========================================================
   Proceso

   La línea de degradado con los cuatro puntos ya existe en corp.css y se
   respeta tal cual. Lo que trae la referencia es lo de abajo: icono en
   pastilla, el número con su filete de color pegado al nombre, y la promesa
   corta antes de la explicación.
   ========================================================= */

.fa-proceso-nueva .c-h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 clamp(10px, 1.2vw, 16px);
}
.fa-proceso-nueva .c-h2 b {
  font-weight: inherit;
  color: var(--c-primary);
  background: linear-gradient(100deg, #E63780 0%, #C03B8E 45%, #7E5AB8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fa-proceso-nueva .c-section-sub { max-width: 64ch; }
.fa-proceso-nueva .c-orbit { margin-top: clamp(32px, 4vw, 56px); }

/* La pastilla del icono, debajo del punto de la línea. */
.fa-paso-icono {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 8px 0 18px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fa-tono) 14%, #fff);
  color: var(--fa-tono);
}

.fa-proceso-nueva .c-ost h3 {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin: 0 0 4px;
}
/* El número en mono y el filete de color que lo separa del nombre: es lo que
   pone el color de cada etapa al lado del texto, no solo en el punto. */
.fa-paso-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-fg2);
  margin-right: 11px;
  padding-right: 11px;
  border-right: 2px solid var(--fa-tono);
  line-height: 1.1;
}

.fa-proceso-nueva .c-ost p.fa-paso-promesa {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-fg1);
}
.fa-proceso-nueva .c-ost p:not(.fa-paso-promesa) {
  font-size: 13.5px;
  line-height: 1.6;
}

/* Separador entre columnas. corp.css apaga los pseudoelementos de `.c-ost`
   (los usaba el diseño viejo de línea central), así que aquí se vuelve a
   encender solo este. */
.fa-proceso-nueva .c-orbit .c-ost + .c-ost::before {
  content: "";
  display: block;
  position: absolute;
  left: calc(-1 * clamp(10px, 1.1vw, 13px));
  top: 30px;
  bottom: 2px;
  width: 1px;
  background: color-mix(in srgb, var(--c-line) 60%, transparent);
}

@media (max-width: 900px) {
  /* En una sola columna el separador vertical no separa nada. */
  .fa-proceso-nueva .c-orbit .c-ost + .c-ost::before { display: none; }
  .fa-paso-icono { margin: 2px 0 14px; }
}

/* =========================================================
   Casos

   Un caso por diapositiva, con el canto del siguiente asomando. La pista es un
   scroll horizontal con anclaje: sin JavaScript se arrastra igual, y el guion
   solo añade las flechas, los puntos y el teclado.
   ========================================================= */

.fa-casos-nueva {
  /* El mismo margen lateral que `.c-container`, para que la diapositiva quede
     a plomo con el titular de la sección. */
  --fa-pad: clamp(20px, 3vw, 48px);
  --fa-borde: max(var(--fa-pad), calc((100vw - 1320px) / 2 + var(--fa-pad)));
  --fa-slide: calc(min(1320px, 100vw) - 2 * var(--fa-pad));
}

.fa-casos-cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  margin-bottom: clamp(26px, 3vw, 44px);
}
.fa-casos-nueva .c-section-head { margin: 0; }
.fa-casos-nueva .c-h2 {
  max-width: 20ch;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0;
}
.fa-casos-nueva .c-h2 b {
  display: block;
  font-weight: inherit;
  color: var(--c-primary);
  background: linear-gradient(100deg, #E63780 0%, #C03B8E 45%, #7E5AB8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: .08em;   /* los descendentes de «trabajando» */
}

.fa-casos-mandos {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
  flex: none;
}

/* ----- La pista ---------------------------------------------------------- */

.fa-casos-pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--fa-slide);
  gap: calc(var(--fa-borde) + 56px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--fa-borde);
  padding-inline: var(--fa-borde);
  padding-block: 4px 10px;
  scrollbar-width: none;
}
.fa-casos-pista::-webkit-scrollbar { display: none; }
.fa-casos-pista:focus-visible {
  outline: 3px solid var(--c-pink);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: no-preference) {
  .fa-casos-pista { scroll-behavior: smooth; }
}

/* Cada caso ocupa su diapositiva entera. El sitio alterna la disposición en las
   pares (texto a la derecha); aquí todas van igual, o el carrusel daría un
   volantazo en cada paso. */
.fa-casos-nueva .fa-caso,
.fa-casos-nueva .fa-caso:nth-child(even) {
  scroll-snap-align: start;
  margin: 0;
  padding: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
}
.fa-casos-nueva .fa-caso .fa-caso-lienzo,
.fa-casos-nueva .fa-caso:nth-child(even) .fa-caso-lienzo {
  order: 2;
  justify-self: end;
  max-width: none;
}
.fa-casos-nueva .fa-caso .fa-caso-texto,
.fa-casos-nueva .fa-caso:nth-child(even) .fa-caso-texto { order: 1; }

.fa-casos-nueva .fa-equipo { width: min(100%, 560px); }

/* ----- Los puntos -------------------------------------------------------- */

.fa-casos-puntos {
  margin-top: clamp(18px, 2vw, 28px);
  gap: 18px;
}

@media (max-width: 900px) {
  .fa-casos-cabecera { flex-direction: column; align-items: flex-start; }
  .fa-casos-nueva .c-h2 { max-width: none; }
  .fa-casos-nueva .fa-caso,
  .fa-casos-nueva .fa-caso:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .fa-casos-nueva .fa-caso .fa-caso-lienzo,
  .fa-casos-nueva .fa-caso:nth-child(even) .fa-caso-lienzo {
    order: 0;
    justify-self: stretch;
  }
  .fa-casos-nueva .fa-caso .fa-caso-texto,
  .fa-casos-nueva .fa-caso:nth-child(even) .fa-caso-texto { order: 1; }
}

/* ----- Página de servicios, con el lenguaje de la portada · 2026-09-19 -----
   Los seis bloques conservan su estructura de dos columnas y sus anclas; lo
   que cambia es la cabecera de cada uno: la pastilla del icono en lugar del
   disco, el número al lado del título y la promesa corta antes del texto,
   igual que en las tarjetas de la home. */

.fa-svcp-head .c-h1 b {
  font-weight: inherit;
  color: var(--c-primary);
  background: linear-gradient(100deg, #E63780 0%, #C03B8E 45%, #7E5AB8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: .06em;
}

.fa-svcp-cab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  margin-bottom: clamp(10px, 1.2vw, 16px);
}
/* El disco de color lo sustituye la pastilla, que es lo que hay en la home. */
.fa-svcp .c-svc-disco { display: none; }
.fa-svcp .fa-svc-icono { width: 52px; height: 52px; border-radius: 16px; }

.fa-svcp .c-svc-content .c-h2 {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: clamp(24px, 2.3vw, 31px);
}
.fa-svcp-num {
  flex: none;
  margin-right: 14px;
  padding-right: 14px;
  border-right: 2px solid var(--fa-tono, var(--c-line-strong));
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.1;
  color: color-mix(in srgb, var(--c-fg2) 70%, transparent);
}
/* La primera costura queda justo bajo la cabecera de la página y sobra. */
.fa-svcp { padding-top: clamp(24px, 3vw, 44px); }
.fa-svcp .c-svc:first-child { border-top: 0; padding-top: 0; }
.c-anim .fa-svcp .c-svc:first-child::after { display: none; }

.fa-svcp .c-svc-content .fa-svcp-promesa {
  margin: 0 0 var(--space-4);
  color: var(--c-fg1);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.45;
}

.corp .fa-svcp-enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  color: var(--fa-tono, var(--c-link));
}
.corp .fa-svcp-enlace:hover { color: var(--c-primary); }

/* La lista de «qué incluye» pasa a caja, como las tarjetas de la portada: sin
   ella las dos columnas se leían como un solo bloque de texto corrido. */
.fa-svcp .c-svc-detalle {
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid color-mix(in srgb, var(--c-line) 55%, transparent);
  border-radius: 18px;
  background: var(--c-surface);
  box-shadow: 0 2px 10px rgba(11, 17, 32, .04);
}

@media (prefers-reduced-motion: no-preference) {
  .corp .fa-svcp-enlace svg { transition: transform .22s ease-out; }
  .corp .fa-svcp-enlace:hover svg { transform: translateX(3px); }
}

@media (max-width: 900px) {
  .fa-svcp .fa-svc-icono { width: 46px; height: 46px; border-radius: 14px; }
}