/* ==========================================================================
   WebPro Studio — sistema de diseño
   Acentos con jerarquía: ámbar = acción, verde = estado del sistema.
   ========================================================================== */

/* El ángulo del haz que recorre el borde del plan destacado. Registrarlo como
   propiedad tipada es lo que permite animarlo; donde el navegador no lo soporte,
   el borde se queda con el degradado quieto y no se rompe nada. */
@property --haz{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root{
  /* Superficies oscuras (azul profundo, no gris neutro) */
  --ink:#0A0D12;
  --ink-soft:#10141B;
  --ink-elev:#161B24;
  --ink-hi:#1D2430;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.15);

  /* Superficies claras (frías, técnicas) */
  --paper:#EDF0F4;
  --paper-soft:#E3E8EF;
  --slate:#151A22;
  --slate-soft:#5A6473;

  /* Acentos */
  --signal:#34E08A;          /* estado del sistema */
  --signal-dim:#18915A;      /* variante para iconos sobre blanco (contraste AA) */
  --signal-glow:rgba(52,224,138,.16);
  --amber:#FFB03A;           /* acción primaria */
  --amber-hi:#FFC66E;
  --amber-ink:#2A1A00;
  --amber-glow:rgba(255,176,58,.32);

  --text-on-dark:#F2F5F9;
  --text-on-dark-2:rgba(242,245,249,.68);
  --text-on-dark-3:rgba(242,245,249,.55);   /* .55 es el mínimo que cumple 4.5:1 sobre --ink */

  /* Tipografía */
  --f-display:'Space Grotesk', system-ui, sans-serif;
  --f-body:'Inter', system-ui, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, monospace;

  /* Forma y movimiento */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:26px;
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:220ms;

  --wrap:1140px;
}

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

html{scroll-behavior:smooth;scroll-padding-top:88px;}

body{
  margin:0;
  font-family:var(--f-body);
  /* Todas las secciones son oscuras: el color heredado debe ser claro
     para que ningún texto quede invisible por omisión. */
  color:var(--text-on-dark);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  /* clip (no hidden): evita que el body se vuelva contenedor de scroll
     y rompa el header sticky. */
  overflow-x:clip;
}

img,svg{display:block;max-width:100%;}
a{color:inherit;}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px;}

/* Accesibilidad base ------------------------------------------------------ */
.skip-link{
  position:absolute;left:-999px;top:0;z-index:300;
  background:var(--amber);color:var(--amber-ink);
  padding:12px 18px;border-radius:0 0 10px 0;font-weight:600;
}
.skip-link:focus{left:0;}

:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
}

/* Tipografía -------------------------------------------------------------- */
h1,h2,h3{font-family:var(--f-display);font-weight:600;margin:0;letter-spacing:-.02em;line-height:1.15;}

.eyebrow{
  font-family:var(--f-mono);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate-soft);
  margin:0 0 16px;
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:currentColor;
  opacity:.5;
}
.eyebrow-light{color:var(--text-on-dark-3);}

.section-title{
  font-size:clamp(1.75rem,2.6vw + .9rem,2.6rem);
  max-width:20ch;
  margin-bottom:52px;
  color:var(--slate);
}
.section-title-light{color:var(--text-on-dark);}

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn{
  --btn-y:0px;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:46px;
  padding:13px 26px;
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--f-body);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:-.01em;
  text-decoration:none;
  cursor:pointer;
  isolation:isolate;
  overflow:hidden;
  transform:translateY(var(--btn-y));
  transition:transform var(--dur) var(--ease),
             background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.btn-lg{min-height:52px;padding:15px 30px;font-size:1rem;}
.btn-small{min-height:40px;padding:10px 20px;font-size:.875rem;}
.btn-block{width:100%;}

.btn-arrow{
  transition:transform var(--dur) var(--ease);
  flex:none;
}
.btn:hover .btn-arrow{transform:translateX(3px);}

/* Primario (ámbar = la única acción principal por pantalla) */
.btn-primary{
  background:linear-gradient(180deg,var(--amber-hi) 0%,var(--amber) 62%);
  color:var(--amber-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,
             0 8px 22px -10px var(--amber-glow),
             0 2px 6px -2px rgba(0,0,0,.4);
}
/* barrido de luz al pasar el cursor */
.btn-primary::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translateX(-120%);
  transition:transform 620ms var(--ease);
}
.btn-primary:hover{
  --btn-y:-2px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,
             0 14px 30px -10px var(--amber-glow),
             0 3px 8px -2px rgba(0,0,0,.45);
}
.btn-primary:hover::after{transform:translateX(120%);}
.btn-primary:active{--btn-y:0px;transform:translateY(0) scale(.975);}

/* Fantasma sobre oscuro */
.btn-ghost{
  background:rgba(255,255,255,.03);
  color:var(--text-on-dark);
  border-color:var(--line-strong);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{
  --btn-y:-2px;
  background:rgba(52,224,138,.08);
  border-color:rgba(52,224,138,.5);
  color:var(--signal);
}
.btn-ghost:active{--btn-y:0px;transform:scale(.975);}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(10,13,18,.72);
  backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:background-color 300ms var(--ease),border-color 300ms var(--ease);
}
.site-header.is-stuck{
  background:rgba(10,13,18,.94);
  border-bottom-color:var(--line);
}

.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:15px;padding-bottom:15px;
}

.scroll-progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:transparent;pointer-events:none;
}
.scroll-progress span{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--signal),var(--amber));
  transition:width 90ms linear;
}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text-on-dark);}
.brand-mark{
  width:34px;height:34px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--signal);
  background:linear-gradient(160deg,rgba(52,224,138,.16),rgba(52,224,138,.03));
  border:1px solid rgba(52,224,138,.28);
  border-radius:10px;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.brand:hover .brand-mark{
  transform:rotate(-6deg) scale(1.06);
  box-shadow:0 0 18px -4px var(--signal-glow);
}
/* Logotipo en dos líneas: WebStyle arriba, MG debajo. */
.brand-word{
  display:flex;
  flex-direction:column;
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:-.02em;
  line-height:1.05;
}
/* MG unido, debajo del nombre y alineado a su borde izquierdo. */
.brand-sub{
  align-self:flex-start;
  font-family:var(--f-mono);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--signal);
  margin-top:2px;
}
.brand-word-light{color:var(--text-on-dark-3);font-weight:500;}

.main-nav{display:flex;gap:6px;}
.main-nav a{
  position:relative;
  padding:8px 14px;
  border-radius:8px;
  color:var(--text-on-dark-2);
  text-decoration:none;
  font-size:.92rem;
  font-weight:500;
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.main-nav a::after{
  content:"";
  position:absolute;left:14px;right:14px;bottom:3px;height:2px;
  border-radius:2px;
  background:var(--signal);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.main-nav a:hover{color:var(--text-on-dark);background:rgba(255,255,255,.04);}
.main-nav a.is-active{color:var(--text-on-dark);}
.main-nav a.is-active::after{transform:scaleX(1);}

.header-actions{display:flex;align-items:center;gap:12px;}

.nav-toggle{
  display:none;
  width:44px;height:44px;
  flex-direction:column;justify-content:center;gap:5px;
  border:1px solid var(--line-strong);
  border-radius:11px;
  background:rgba(255,255,255,.03);
  cursor:pointer;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.nav-toggle:hover{border-color:rgba(52,224,138,.45);}
.nav-toggle span{
  display:block;width:17px;height:2px;margin:0 auto;border-radius:2px;
  background:var(--text-on-dark);
  transition:transform 260ms var(--ease),opacity 160ms var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{
  display:grid;
  grid-template-rows:0fr;
  overflow:hidden;
  border-top:1px solid transparent;
  /* visibility saca los enlaces del orden de tabulación al cerrar;
     se retrasa hasta que termina el colapso para no cortar la animación. */
  visibility:hidden;
  transition:grid-template-rows 320ms var(--ease),
             border-color 320ms var(--ease),
             visibility 0s linear 320ms;
}
.mobile-nav > *{min-height:0;}
.mobile-nav.open{
  grid-template-rows:1fr;
  border-top-color:var(--line);
  visibility:visible;
  transition:grid-template-rows 320ms var(--ease),
             border-color 320ms var(--ease),
             visibility 0s;
}
/* El padding vertical va solo cuando está abierto: con la fila en 0fr el
   contenido sí colapsa, pero el padding no, y dejaba altura fantasma. */
.mobile-nav-inner{
  padding:0 24px;
  display:flex;flex-direction:column;
  transition:padding 320ms var(--ease);
}
.mobile-nav.open .mobile-nav-inner{padding:10px 24px 22px;}
.mobile-nav a{
  color:var(--text-on-dark-2);
  text-decoration:none;
  padding:14px 4px;
  font-size:1rem;
  border-bottom:1px solid var(--line);
  transition:color var(--dur) var(--ease),padding-left var(--dur) var(--ease);
}
.mobile-nav a:hover{color:var(--signal);padding-left:10px;}
.mobile-nav .btn{margin-top:18px;border-bottom:none;align-self:flex-start;}
.mobile-nav .btn:hover{padding-left:26px;}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  padding:96px 0 108px;
  overflow:hidden;
  /* Capas, de arriba hacia abajo:
     1. velo vertical — sujeta el texto arriba y funde con la sección clara abajo
     2. velo horizontal — deja la izquierda casi opaca para que el titular se lea
     3. imagen de fondo (topología de red)
     4. color base */
  background:
    linear-gradient(180deg,
      rgba(10,13,18,.62) 0%,
      rgba(10,13,18,.14) 34%,
      rgba(10,13,18,.55) 82%,
      var(--ink) 100%),
    linear-gradient(96deg,
      var(--ink) 8%,
      rgba(10,13,18,.86) 34%,
      rgba(10,13,18,.40) 62%,
      rgba(10,13,18,.08) 100%),
    url("../img/hero-bg.svg") center right / cover no-repeat,
    var(--ink);
}

.ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.38;}
.blob-a{
  width:520px;height:520px;top:-180px;right:-120px;
  background:radial-gradient(circle,rgba(52,224,138,.28),transparent 68%);
  animation:drift-a 22s ease-in-out infinite alternate;
}
.blob-b{
  width:420px;height:420px;bottom:-200px;left:-140px;
  background:radial-gradient(circle,rgba(255,176,58,.16),transparent 68%);
  animation:drift-b 26s ease-in-out infinite alternate;
}
@keyframes drift-a{to{transform:translate(-60px,50px) scale(1.1);}}
@keyframes drift-b{to{transform:translate(50px,-40px) scale(1.08);}}

.hero-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;
}

.status-pill{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:.78rem;
  color:var(--signal);
  background:rgba(52,224,138,.08);
  border:1px solid rgba(52,224,138,.26);
  padding:8px 15px;border-radius:999px;
  margin:0 0 28px;
}

/* La frase de la píldora se releva sola. El ancho se fija por JS al de la frase
   más larga, para que la píldora no cambie de tamaño en cada relevo. Como una
   frase es bastante más larga que las otras, el texto va centrado: así el hueco
   sobrante se reparte a los dos lados en vez de quedar todo a la derecha. */
.pill-rotor{
  display:inline-block;
  text-align:center;
  white-space:nowrap;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.pill-rotor.is-out{opacity:0;transform:translateY(-5px);}

.pulse-dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--signal);
  box-shadow:0 0 0 0 rgba(52,224,138,.6);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(52,224,138,.5);}
  70%{box-shadow:0 0 0 10px rgba(52,224,138,0);}
  100%{box-shadow:0 0 0 0 rgba(52,224,138,0);}
}

.hero-title{
  font-size:clamp(2.4rem,3.4vw + 1.3rem,3.7rem);
  color:var(--text-on-dark);
  margin-bottom:24px;
}
.hero-title em{
  font-style:normal;
  color:var(--amber);
  position:relative;
}

/* Las dos versiones de la segunda línea ocupan la misma celda, así que el
   titular no cambia de alto al relevarse. Se cruzan dos veces y la animación
   termina en el idioma propio de la página: si el navegador la corta —por
   movimiento reducido o por falta de soporte— lo que queda es el texto correcto. */
.dosidiomas{display:inline-grid;}
.dosidiomas>span{grid-area:1/1;}
.dosidiomas-a{animation:idioma-propio 6s var(--ease) 1.7s 2 both;}
.dosidiomas-b{animation:idioma-otro 6s var(--ease) 1.7s 2 both;}
@keyframes idioma-propio{
  0%,40%{opacity:1;transform:none;}
  48%,90%{opacity:0;transform:translateY(-.2em);}
  98%,100%{opacity:1;transform:none;}
}
@keyframes idioma-otro{
  0%,40%{opacity:0;transform:translateY(.2em);}
  48%,90%{opacity:1;transform:none;}
  98%,100%{opacity:0;transform:translateY(.2em);}
}

.hero-sub{
  color:var(--text-on-dark-2);
  font-size:1.09rem;
  max-width:46ch;
  margin:0 0 36px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;}

/* ==========================================================================
   TOQUE CINEMATOGRÁFICO
   La página abre como un plano: grano de película encima de todo, la foto del
   hero entra con un acercamiento lento y el texto aparece escalonado, como los
   rótulos de una cabecera. Todo es finito —nada se repite en bucle— y el bloque
   global de movimiento reducido lo desactiva entero.
   ========================================================================== */

/* Grano. Ruido generado en el propio SVG, sin archivo que descargar. Va fijo y
   sin capturar el puntero, así que no interfiere con nada de abajo. */
body::after{
  content:"";
  position:fixed;inset:0;
  z-index:9999;pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Entrada escalonada del hero, como una cabecera de créditos. */
@keyframes plano-entra{
  from{opacity:0;transform:translateY(15px);}
  to{opacity:1;transform:none;}
}
@keyframes plano-panel{
  from{opacity:0;transform:translateY(22px) scale(.985);}
  to{opacity:1;transform:none;}
}
/* Acercamiento lento sobre la foto: el marco ya recorta, así que el sobrante
   nunca se asoma. */
@keyframes plano-acercamiento{
  from{transform:scale(1.07);}
  to{transform:scale(1);}
}
.hero-copy>*{animation:plano-entra .9s var(--ease) both;}
.hero-copy>*:nth-child(1){animation-delay:.10s;}
.hero-copy>*:nth-child(2){animation-delay:.26s;}
.hero-copy>*:nth-child(3){animation-delay:.42s;}
.hero-copy>*:nth-child(4){animation-delay:.58s;}
.hero-panel{animation:plano-panel 1.15s var(--ease) .34s both;}
.ventana-foto{animation:plano-acercamiento 3.6s cubic-bezier(.16,.72,.22,1) .34s both;}

/* Viñeta: apaga las esquinas de la foto para que el marco se lea como un plano
   y no como una captura de pantalla. La ficha va por encima. */
.ventana::after{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(118% 88% at 50% 38%,transparent 44%,rgba(4,7,12,.58) 100%);
}
.ventana-aviso{z-index:1;}

/* Ventana del hero ---------------------------------------------------------
   El escritorio donde se escribe el sitio, no el negocio del cliente: código en
   una pantalla, la página armada en la otra. Adentro ya hay un navegador
   encendido, así que el marco no lleva barra —sería un navegador dentro de
   otro—; solo la ficha al pie, con el par ES/EN en el lugar del ícono. */
.hero-panel{display:flex;justify-content:center;}
.ventana{
  margin:0;width:100%;max-width:460px;
  position:relative;overflow:hidden;
  background:var(--ink-hi);
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  box-shadow:0 44px 72px -34px rgba(0,0,0,.9);
}
/* La foto ocupa el ancho completo y trae sus dimensiones en el HTML, así que
   no hay salto de maquetación mientras carga. */
.ventana-foto{display:block;width:100%;height:auto;}
.ventana-aviso{
  position:absolute;left:16px;right:16px;bottom:16px;
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:var(--r-md);
  background:rgba(10,13,18,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(52,224,138,.34);
}
.ventana-idioma{display:flex;gap:3px;flex:none;font-family:var(--f-mono);font-size:.66rem;}
.ventana-idioma b{padding:4px 6px;border-radius:5px;font-weight:600;color:var(--text-on-dark-2);}
.ventana-idioma b.on{background:rgba(52,224,138,.2);color:var(--signal);}
.ventana-texto b{display:block;font-size:.86rem;font-weight:600;color:var(--text-on-dark);}
.ventana-texto span{display:block;font-family:var(--f-mono);font-size:.7rem;color:var(--text-on-dark-2);}

/* ==========================================================================
   SERVICIOS — tarjetas con foco que sigue al cursor
   ========================================================================== */
.servicios{
  position:relative;
  padding:104px 0;
  background:
    radial-gradient(85% 55% at 50% 0%,rgba(52,224,138,.075),transparent 62%),
    var(--ink-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
/* rejilla técnica tenue, se desvanece hacia abajo */
.servicios::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
  pointer-events:none;
}
.servicios .wrap{position:relative;z-index:1;}

.section-head{max-width:52ch;margin-bottom:52px;}
.section-head .section-title{margin-bottom:16px;}
.section-lead{margin:0;color:var(--text-on-dark-2);font-size:1.03rem;max-width:44ch;}

.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

.card{
  --mx:50%;
  --my:0%;
  position:relative;
  display:flex;
  border-radius:var(--r-lg);
  background:linear-gradient(168deg,rgba(29,36,48,.92),rgba(22,27,36,.92));
  overflow:hidden;
  isolation:isolate;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
}

/* Capa 1 — foco radial que sigue al cursor sobre la superficie */
.card-glow{
  position:absolute;inset:0;z-index:0;
  border-radius:inherit;
  background:radial-gradient(360px circle at var(--mx) var(--my),
             rgba(52,224,138,.16),transparent 68%);
  opacity:0;
  transition:opacity 320ms var(--ease);
  pointer-events:none;
}
.card:hover .card-glow{opacity:1;}

/* Capa 2 — el mismo foco recortado al borde de 1px (contorno luminoso) */
.card-edge{
  position:absolute;inset:0;z-index:2;
  border-radius:inherit;
  padding:1px;
  background:radial-gradient(280px circle at var(--mx) var(--my),
             rgba(52,224,138,.85),rgba(52,224,138,.12) 42%,transparent 70%);
  -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;
  opacity:0;
  transition:opacity 320ms var(--ease);
  pointer-events:none;
}
.card:hover .card-edge{opacity:1;}

/* Borde base, visible siempre (sin depender del cursor) */
.card::after{
  content:"";
  position:absolute;inset:0;z-index:1;
  border-radius:inherit;
  border:1px solid var(--line-strong);
  pointer-events:none;
}

/* flex + margin-top:auto mantiene las listas alineadas entre tarjetas
   aunque las descripciones ocupen distinto número de líneas */
.card-body{
  position:relative;z-index:3;
  flex:1;
  display:flex;flex-direction:column;
  padding:32px 28px 30px;
}

.card-icon{
  width:50px;height:50px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:14px;
  color:var(--signal);
  background:linear-gradient(160deg,rgba(52,224,138,.20),rgba(52,224,138,.05));
  border:1px solid rgba(52,224,138,.30);
  margin-bottom:22px;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.card:hover .card-icon{
  transform:scale(1.07) rotate(-5deg);
  box-shadow:0 0 26px -6px var(--signal-glow);
}

.card h3{font-size:1.24rem;margin-bottom:10px;color:var(--text-on-dark);}
.card > .card-body > p{margin:0 0 20px;color:var(--text-on-dark-2);font-size:.97rem;}

/* Sin línea divisoria a propósito: su altura depende de cuántas líneas
   ocupe cada ítem, así que a ciertos anchos quedaba desalineada entre
   tarjetas. El espacio y las palomitas ya separan lo suficiente, y así
   las listas quedan a ras por abajo en cualquier ancho. */
.card-list{
  list-style:none;margin:auto 0 0;padding:22px 0 0;
  display:flex;flex-direction:column;gap:11px;
}
.card-list li{
  position:relative;
  padding-left:26px;
  font-size:.9rem;
  color:var(--text-on-dark-2);
}
/* palomita dibujada en CSS: no depende de fuentes ni emojis */
.card-list li::before{
  content:"";
  position:absolute;left:0;top:.38em;
  width:14px;height:8px;
  border-left:2px solid var(--signal);
  border-bottom:2px solid var(--signal);
  border-radius:1px;
  transform:rotate(-45deg) scale(.82);
  transform-origin:center;
  opacity:.85;
  transition:opacity var(--dur) var(--ease);
}
.card:hover .card-list li::before{opacity:1;}

/* ==========================================================================
   PROCESO — línea de tiempo conectada
   El orden lo comunica la línea que une los nodos, no una numeración.
   ========================================================================== */
.proceso{
  position:relative;
  background:
    radial-gradient(75% 45% at 50% 100%,rgba(255,176,58,.055),transparent 65%),
    var(--ink);
  padding:104px 0 110px;
}

.steps{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.step{
  --node:64px;
  --step-pad:16px;
  position:relative;
  padding:0 var(--step-pad);
}

/* Conector: del borde derecho del nodo anterior al borde izquierdo del propio.
   El nodo va alineado a la izquierda de su columna, así que su centro está a
   (--step-pad + --node/2); el tramo visible arranca un nodo completo a la
   izquierda del propio borde. */
.step::before{
  content:"";
  position:absolute;
  top:calc(var(--node)/2 - 1px);
  left:calc(var(--step-pad) + var(--node) - 100%);
  width:calc(100% - var(--node));
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,rgba(52,224,138,.15),rgba(52,224,138,.5));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 640ms var(--ease);
  transition-delay:calc(var(--reveal-delay,0ms) + 200ms);
}
.step.in-view::before{transform:scaleX(1);}
.step:first-child::before{content:none;}

.step-node{
  position:relative;
  z-index:1;
  width:var(--node);height:var(--node);
  flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  margin-bottom:24px;
  color:var(--signal);
  background:linear-gradient(160deg,rgba(52,224,138,.16),rgba(22,27,36,.96));
  border:1px solid rgba(52,224,138,.52);
  box-shadow:0 0 0 6px rgba(10,13,18,1);  /* recorta el conector detrás del círculo */
  transition:transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.step-node svg{transition:transform var(--dur) var(--ease);}

.step:hover .step-node{
  transform:translateY(-4px) scale(1.06);
  border-color:var(--signal);
  box-shadow:0 0 0 6px rgba(10,13,18,1),0 14px 34px -12px var(--signal-glow);
}
.step:hover .step-node svg{transform:scale(1.06);}

.step h3{
  color:var(--text-on-dark);
  font-size:1.1rem;
  margin-bottom:9px;
  transition:color var(--dur) var(--ease);
}
.step:hover h3{color:var(--signal);}
.step p{margin:0;color:var(--text-on-dark-2);font-size:.94rem;}

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contacto{
  background:
    radial-gradient(70% 50% at 20% 0%,rgba(52,224,138,.07),transparent 62%),
    var(--ink);
  padding:104px 0 112px;
}
.contacto-inner{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;}
.contacto-lead{color:var(--text-on-dark-2);max-width:44ch;margin:0 0 32px;}

.contact-tile{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(160deg,var(--ink-hi),var(--ink-elev));
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  padding:16px 20px;
  text-decoration:none;color:var(--text-on-dark);
  max-width:360px;
  transition:transform var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.contact-tile:hover{
  transform:translateY(-3px);
  border-color:rgba(52,224,138,.5);
  box-shadow:0 18px 36px -22px rgba(0,0,0,.9),0 0 30px -18px var(--signal-glow);
}
.tile-icon{
  width:44px;height:44px;flex:none;border-radius:50%;
  background:rgba(52,224,138,.12);color:var(--signal);
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--dur) var(--ease);
}
.contact-tile:hover .tile-icon{transform:scale(1.07);}
.tile-text{flex:1;}
.contact-tile strong{display:block;font-size:.98rem;}
.tile-sub{
  display:block;font-family:var(--f-mono);font-size:.8rem;
  color:var(--text-on-dark-3);margin-top:3px;
}
.tile-arrow{color:var(--text-on-dark-3);transition:transform var(--dur) var(--ease),color var(--dur) var(--ease);}
.contact-tile:hover .tile-arrow{transform:translateX(4px);color:var(--signal);}

.contacto-note{margin:24px 0 10px;color:var(--text-on-dark-2);font-size:.92rem;}
.contacto-note a{
  color:var(--signal);text-decoration:none;
  border-bottom:1px solid rgba(52,224,138,.3);
  transition:border-color var(--dur) var(--ease);
}
.contacto-note a:hover{border-bottom-color:var(--signal);}
.contacto-place{
  display:flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:.8rem;
  color:var(--text-on-dark-2);margin:20px 0 0;
}
.contacto-place svg{color:var(--signal);flex-shrink:0;}

/* Formulario -------------------------------------------------------------- */
.quote-form{
  background:linear-gradient(168deg,var(--ink-hi),var(--ink-elev));
  border:1px solid var(--line-strong);
  border-radius:var(--r-xl);
  padding:36px;
  display:flex;flex-direction:column;gap:18px;
  box-shadow:0 40px 70px -34px rgba(0,0,0,.8);
}
.form-title{
  font-family:var(--f-display);font-weight:600;font-size:1.15rem;
  color:var(--text-on-dark);margin:0 0 4px;letter-spacing:-.02em;
}

.field{display:flex;flex-direction:column;gap:7px;}
.field label{font-size:.86rem;color:var(--text-on-dark-2);font-weight:500;}
.field-optional{color:var(--text-on-dark-3);font-weight:400;}

.field input,
.field select,
.field textarea{
  width:100%;
  min-height:48px;
  font-family:var(--f-body);font-size:1rem;
  color:var(--text-on-dark);
  background:rgba(10,13,18,.72);
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  padding:13px 15px;
  resize:vertical;
  transition:border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             background-color var(--dur) var(--ease);
}
.field textarea{min-height:104px;line-height:1.55;}
.field input::placeholder,
.field textarea::placeholder{color:rgba(242,245,249,.32);}

.field input:hover,
.field select:hover,
.field textarea:hover{border-color:rgba(255,255,255,.25);}

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--signal);
  background:rgba(10,13,18,.9);
  box-shadow:0 0 0 3px rgba(52,224,138,.14);
}

.select-wrap{position:relative;}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;}
.select-arrow{
  position:absolute;right:15px;top:50%;transform:translateY(-50%);
  color:var(--text-on-dark-3);pointer-events:none;
}
.select-wrap select option{background:var(--ink-elev);color:var(--text-on-dark);}

.field-error{
  margin:0;font-size:.82rem;color:#FF8C7A;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height 240ms var(--ease),opacity 200ms var(--ease);
}
.field.has-error .field-error{max-height:48px;opacity:1;}
.field.has-error input,
.field.has-error select{
  border-color:#EF5B45;
  box-shadow:0 0 0 3px rgba(239,91,69,.13);
}

/* Dos vías de envío: WhatsApp (principal) y correo (alternativa). Apiladas
   porque la columna del formulario no da ancho para dos botones grandes. */
.form-actions{display:flex;flex-direction:column;gap:10px;}
/* Sobre el fondo del formulario (más claro que el hero) el borde del botón
   fantasma se perdía: se refuerza para que se lea como botón. */
.form-actions .btn-ghost{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.28);
}
.form-actions .btn-ghost:hover{
  background:rgba(52,224,138,.08);
  border-color:rgba(52,224,138,.5);
}

/* Casilla de "prefiero que me llamen" (fuera de .field para no heredar
   el alto mínimo ni el ancho completo de los campos de texto). */
.check-row{
  display:flex;align-items:flex-start;gap:11px;
  cursor:pointer;font-size:.88rem;color:var(--text-on-dark-2);
  line-height:1.45;
}
.check-row input{
  appearance:none;-webkit-appearance:none;
  flex:none;width:20px;height:20px;margin:1px 0 0;
  display:grid;place-content:center;
  border:1px solid var(--line-strong);
  border-radius:6px;
  background:rgba(10,13,18,.72);
  cursor:pointer;
  transition:background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.check-row:hover input{border-color:rgba(255,255,255,.28);}
.check-row input::before{
  content:"";
  width:10px;height:6px;
  border-left:2px solid var(--amber-ink);
  border-bottom:2px solid var(--amber-ink);
  border-radius:1px;
  transform:rotate(-45deg) scale(0);
  transition:transform 170ms var(--ease);
}
.check-row input:checked{background:var(--signal);border-color:var(--signal);}
.check-row input:checked::before{transform:rotate(-45deg) scale(1);}

/* Nota bajo la tarjeta de WhatsApp */
.tile-note{
  margin:12px 0 0;
  font-size:.84rem;
  color:var(--text-on-dark-3);
  max-width:42ch;
}
.tile-note strong{color:var(--text-on-dark-2);font-weight:600;}

/* Campo trampa: fuera de la vista y del lector de pantalla, pero enviable. */
.botcheck{
  position:absolute;left:-9999px;
  width:1px;height:1px;opacity:0;
  pointer-events:none;
}

/* Estado "enviando": el botón se apaga y aparece un aro girando. */
.btn[disabled]{
  cursor:default;
  opacity:.72;
  --btn-y:0px;
  transform:none;
}
.btn[disabled]:hover{--btn-y:0px;}
.btn-spinner{
  width:16px;height:16px;flex:none;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  animation:spin 700ms linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.form-hint{
  margin:2px 0 0;text-align:center;font-size:.82rem;
  color:var(--text-on-dark-3);
  transition:color var(--dur) var(--ease);
}
.form-hint.success{color:var(--signal);}
.form-hint.error{color:#FF8C7A;}

/* ==========================================================================
   SELECTOR DE IDIOMA
   ========================================================================== */
.lang-switch{
  display:flex;align-items:center;gap:2px;
  padding:3px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  font-family:var(--f-mono);font-size:.72rem;font-weight:600;
}
.lang-switch a{
  padding:5px 10px;border-radius:999px;
  text-decoration:none;color:var(--text-on-dark-3);
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.lang-switch a:hover{color:var(--text-on-dark);}
.lang-switch a[aria-current="true"]{
  background:rgba(52,224,138,.14);
  color:var(--signal);
}

/* ==========================================================================
   FRANJA DE CONFIANZA (zona horaria, moneda, bilingüe, trato directo)
   ========================================================================== */
.trust-strip{
  background:var(--ink-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:26px 0;
}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.trust-item{display:flex;gap:12px;align-items:flex-start;}
.trust-item svg{color:var(--signal);flex:none;margin-top:3px;}
.trust-item strong{
  display:block;font-family:var(--f-display);font-weight:600;
  font-size:.92rem;color:var(--text-on-dark);letter-spacing:-.01em;
}
.trust-item span{display:block;font-size:.82rem;color:var(--text-on-dark-3);line-height:1.45;}

/* ==========================================================================
   TRABAJOS
   Las miniaturas no son capturas: son maquetas en CSS con la paleta real de
   cada demostración. Así no hay imágenes que pesen ni que se desactualicen.
   ========================================================================== */
.trabajos{
  position:relative;
  padding:104px 0;
  background:
    radial-gradient(75% 50% at 50% 100%,rgba(52,224,138,.055),transparent 64%),
    var(--ink);
  border-bottom:1px solid var(--line);
}
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

.work{
  display:flex;flex-direction:column;
  border-radius:var(--r-xl);
  background:linear-gradient(168deg,var(--ink-hi),var(--ink-elev));
  border:1px solid var(--line-strong);
  overflow:hidden;
  text-decoration:none;
  transition:transform var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.work:hover{
  transform:translateY(-4px);
  border-color:rgba(52,224,138,.42);
  box-shadow:0 30px 58px -30px rgba(0,0,0,.92);
}
.work:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}

/* --- miniatura: ventana de navegador en miniatura ------------------------- */
/* La sección promete "míralos funcionando, no en una foto": al pasar el cursor
   la miniatura se desplaza como si alguien la estuviera leyendo y un reflejo
   cruza la pantalla. El recorte de abajo es lo que da la sensación de scroll. */
.work-shot{
  display:block;position:relative;overflow:hidden;
  background:var(--shot-bg);
  border-bottom:1px solid var(--line);
}
.work-shot::after{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);
  transform:translateX(-130%);
  transition:transform 760ms var(--ease);
}
.work:hover .work-shot::after,
.work:focus-visible .work-shot::after{transform:translateX(130%);}
.shot-bar{
  display:flex;align-items:center;gap:5px;
  padding:8px 12px;
  background:rgba(0,0,0,.14);
  border-bottom:1px solid rgba(0,0,0,.09);
}
.shot-bar i{
  width:7px;height:7px;border-radius:50%;
  background:var(--shot-ink);opacity:.22;
}
.shot-bar b{
  margin-left:8px;
  font-family:var(--f-mono);font-size:.6rem;font-weight:500;
  color:var(--shot-ink);opacity:.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.shot-page{
  display:block;padding:16px 18px 20px;
  transition:transform 560ms var(--ease);
}
.work:hover .shot-page,
.work:focus-visible .shot-page{transform:translateY(-7px);}
.shot-nav{
  display:block;height:5px;width:52%;border-radius:3px;
  background:var(--shot-ink);opacity:.16;margin-bottom:18px;
}
.shot-h{
  display:block;height:11px;width:82%;border-radius:4px;
  background:var(--shot-ink);opacity:.82;margin-bottom:7px;
}
.shot-h-corta{width:54%;background:var(--shot-acento);opacity:1;}
.shot-btn{
  display:block;height:14px;width:34%;border-radius:7px;
  background:var(--shot-acento);margin:14px 0 16px;
}
.shot-tiles{display:flex;gap:7px;}
.shot-tiles i{
  flex:1;height:30px;border-radius:6px;
  background:var(--shot-ink);opacity:.11;
}

/* Paleta tomada de cada demostración: talavera de noche, plano de taller y
   consultorio al anochecer. Las tres son oscuras; las distingue el acento. */
.work-restaurante{--shot-bg:#061426;--shot-ink:#F4F2ED;--shot-acento:#F0C155;}
.work-taller     {--shot-bg:#08141F;--shot-ink:#E8E5DD;--shot-acento:#D8541F;}
.work-clinica    {--shot-bg:#111427;--shot-ink:#FCFAF7;--shot-acento:#E4705E;}

.work-body{display:flex;flex-direction:column;gap:9px;padding:22px 24px 24px;}
.work-kind{
  font-family:var(--f-mono);font-size:.7rem;
  color:var(--text-on-dark-3);letter-spacing:.04em;
}
.work-body h3{font-size:1.06rem;color:var(--text-on-dark);margin:0;}
.work-body p{margin:0;font-size:.88rem;color:var(--text-on-dark-2);}
.work-go{
  margin-top:6px;
  font-size:.85rem;font-weight:600;color:var(--signal);
}
.work-go::after{
  content:"→";
  margin-left:7px;display:inline-block;
  transition:transform var(--dur) var(--ease);
}
.work:hover .work-go::after{transform:translateX(4px);}

.works-note{
  margin:26px auto 0;max-width:60ch;text-align:center;
  font-size:.82rem;color:var(--text-on-dark-3);
}

/* ==========================================================================
   PRECIOS
   ========================================================================== */
.pricing{
  position:relative;
  padding:104px 0;
  background:
    radial-gradient(80% 50% at 50% 0%,rgba(255,176,58,.06),transparent 62%),
    var(--ink);
}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
.plan{
  position:relative;
  display:flex;flex-direction:column;gap:13px;
  padding:32px 26px 28px;
  background:linear-gradient(168deg,var(--ink-hi),var(--ink-elev));
  border:1px solid var(--line-strong);
  border-radius:var(--r-xl);
  transition:transform var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.plan:hover{
  transform:translateY(-3px);
  border-color:rgba(52,224,138,.42);
  box-shadow:0 28px 54px -30px rgba(0,0,0,.9);
}
.plan-featured{
  border-color:rgba(255,176,58,.45);
  box-shadow:0 0 0 1px rgba(255,176,58,.1),0 30px 60px -32px rgba(0,0,0,.9);
}
.plan-featured:hover{border-color:rgba(255,176,58,.7);}
/* Un haz recorre el borde del plan que quiero vender. Es un anillo de 1px:
   el degradado cónico se pinta en toda la tarjeta y la máscara deja ver solo
   el marco, nunca el texto. */
.plan-featured::before{
  content:"";
  position:absolute;inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--haz),
    transparent 0 62%,
    rgba(255,176,58,.35) 74%,
    var(--amber-hi) 82%,
    rgba(255,176,58,.35) 90%,
    transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:haz-borde 7s linear infinite;
  pointer-events:none;
}
@keyframes haz-borde{to{--haz:360deg;}}
/* Animar una propiedad personalizada repinta la tarjeta en cada fotograma y no
   se puede delegar al compositor. Fuera de pantalla no hay nada que mirar, así
   que el script la deja quieta hasta que la sección entra a cuadro. */
.plan-featured.haz-quieto::before{animation-play-state:paused;}
.plan-tag{
  position:absolute;top:-11px;left:26px;
  padding:4px 11px;border-radius:999px;
  background:var(--amber);color:var(--amber-ink);
  font-family:var(--f-mono);font-size:.68rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
}
.plan h3{font-size:1.1rem;color:var(--text-on-dark);}
.plan-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:7px;}
.plan-price .from{
  font-family:var(--f-mono);font-size:.7rem;
  color:var(--text-on-dark-3);text-transform:uppercase;letter-spacing:.06em;
}
.plan-price b{
  font-family:var(--f-display);font-size:2.05rem;font-weight:600;
  letter-spacing:-.03em;color:var(--text-on-dark);line-height:1;
}
.plan-price .per{font-size:.85rem;color:var(--text-on-dark-3);}
/* La alternativa financiada: quita la barrera del pago inicial sin bajar el precio. */
.plan-alt{
  margin:-6px 0 0;
  font-size:.82rem;color:var(--text-on-dark-3);
}
.plan-alt b{color:var(--signal);font-weight:600;}
.plan-desc{margin:0;font-size:.9rem;color:var(--text-on-dark-2);}
.plan-list{list-style:none;margin:6px 0 auto;padding:0;display:flex;flex-direction:column;gap:10px;}
.plan-list li{position:relative;padding-left:24px;font-size:.88rem;color:var(--text-on-dark-2);}
.plan-list li::before{
  content:"";
  position:absolute;left:0;top:.38em;
  width:13px;height:7px;
  border-left:2px solid var(--signal);
  border-bottom:2px solid var(--signal);
  border-radius:1px;
  transform:rotate(-45deg) scale(.85);
}
.plan .btn{margin-top:22px;}
.plan-note{
  margin:26px auto 0;max-width:60ch;text-align:center;
  font-size:.82rem;color:var(--text-on-dark-3);
}
/* La segunda nota abre otra puerta —mantenimiento de un sitio que ya existe—,
   así que no debe leerse como la letra chica del pago: va separada por un
   filete y un punto más clara, sin caja ni color propio. */
.plan-note-alt{
  margin-top:18px;padding-top:18px;
  border-top:1px solid var(--line);
  color:var(--text-on-dark-2);
}
.plan-note-alt strong{color:var(--text-on-dark);}

/* ==========================================================================
   PREGUNTAS FRECUENTES
   ========================================================================== */
.faq{
  padding:100px 0;
  background:var(--ink-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.faq-list{display:flex;flex-direction:column;gap:10px;max-width:840px;}
.faq-item{
  background:var(--ink-elev);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color var(--dur) var(--ease);
}
.faq-item[open]{border-color:rgba(52,224,138,.34);}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 22px;
  font-family:var(--f-display);font-weight:600;font-size:1rem;
  color:var(--text-on-dark);
  transition:background-color var(--dur) var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{background:rgba(255,255,255,.03);}
.faq-item summary::after{
  content:"";flex:none;
  width:9px;height:9px;
  border-right:2px solid var(--signal);
  border-bottom:2px solid var(--signal);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--dur) var(--ease);
}
.faq-item[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px);}
.faq-answer{margin:0;padding:0 22px 20px;font-size:.93rem;color:var(--text-on-dark-2);}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--ink-soft);border-top:1px solid var(--line);padding:34px 0;}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.footer-copy{margin:0;font-size:.85rem;color:var(--text-on-dark-3);}

/* ==========================================================================
   REVELADO EN SCROLL (escalonado)
   ========================================================================== */
[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 560ms var(--ease),transform 560ms var(--ease);
  transition-delay:var(--reveal-delay,0ms);
}
[data-reveal].in-view{opacity:1;transform:none;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Por debajo de 980px el pipeline horizontal aprieta demasiado el texto:
   la línea de tiempo gira a vertical y el conector baja de nodo a nodo. */
/* Las maquetas de navegador pierden legibilidad antes que las otras tarjetas,
   así que bajan a dos columnas antes del corte general. */
@media (max-width:1080px){
  .works-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:980px){
  .steps{grid-template-columns:1fr;}
  .step{
    display:grid;
    grid-template-columns:64px 1fr;
    gap:22px;
    padding:0 0 34px;
  }
  .step:last-child{padding-bottom:0;}
  .step-node{margin-bottom:0;}
  .step-body{padding-top:6px;}

  /* El conector ahora sale hacia abajo: lo muestra el primero, no el último.
     :first-child necesita repetirse aquí — la regla de escritorio que lo
     oculta tiene más especificidad y ganaría por orden de fuente. */
  .step::before,
  .step:first-child::before{
    content:"";
    top:var(--node);
    bottom:0;
    left:calc(var(--node)/2 - 1px);
    width:2px;
    height:auto;
    background:linear-gradient(180deg,rgba(52,224,138,.5),rgba(52,224,138,.12));
    transform:scaleY(0);
    transform-origin:top;
  }
  .step.in-view::before{transform:scaleY(1);}
  .step:last-child::before{content:none;}
}

/* En escritorio el menú móvil no debe existir en el flujo */
@media (min-width:941px){
  .mobile-nav{display:none;}
}

@media (max-width:940px){
  .main-nav{display:none;}
  .nav-toggle{display:flex;}
  .hero-inner{grid-template-columns:1fr;gap:44px;}
  .hero-panel{order:-1;}
  .ventana{max-width:420px;}
  .cards-grid{grid-template-columns:1fr;}
  .works-grid{grid-template-columns:1fr;max-width:460px;}
  .contacto-inner{grid-template-columns:1fr;gap:44px;}
  .plans{grid-template-columns:1fr;}
  .trust-row{grid-template-columns:repeat(2,1fr);gap:20px;}
}

@media (max-width:600px){
  /* Solo los laterales: la abreviatura `padding` reiniciaría el padding
     vertical que .header-inner define, y aplastaría el encabezado. */
  .wrap{padding-left:20px;padding-right:20px;}
  /* En pantallas angostas el ancho fijo desbordaría: se deja fluir la píldora. */
  .pill-rotor{min-width:0 !important;white-space:normal;}
  .hero{
    padding:64px 0 76px;
    /* En pantallas estrechas la imagen se recorta demasiado: se atenúa
       para que no compita con el texto. */
    background:
      linear-gradient(180deg,
        rgba(10,13,18,.72) 0%,
        rgba(10,13,18,.52) 40%,
        var(--ink) 100%),
      url("../img/hero-bg.svg") center top / 170% auto no-repeat,
      var(--ink);
  }
  .servicios,.proceso,.contacto,.pricing,.faq{padding:76px 0;}
  .trust-row{grid-template-columns:1fr;gap:16px;}
  .plan{padding:28px 22px 24px;}
  .faq-item summary{padding:16px 18px;font-size:.95rem;}
  .faq-answer{padding:0 18px 18px;}
  /* En móvil el selector de idioma comparte fila con el botón de menú */
  .lang-switch{font-size:.68rem;}
  .lang-switch a{padding:5px 8px;}
  .header-actions .btn-small{display:none;}
  .quote-form{padding:26px 20px;}
  .step{--node:52px;grid-template-columns:52px 1fr;gap:16px;padding:0 0 28px;}
  .step-node svg{width:21px;height:21px;}
  .hero-actions .btn{width:100%;}
  /* El relevo del titular necesita que las dos versiones quepan en una línea;
     en angosto se queda quieto en el idioma de la página. */
  .dosidiomas-a{animation:none;opacity:1;transform:none;}
  .dosidiomas-b{display:none;}
  .section-title{margin-bottom:36px;}
  .contact-tile{max-width:100%;}
  .footer-inner{flex-direction:column;align-items:flex-start;}
}

/* Sin hover (táctil): quita efectos que dependen del puntero */
@media (hover:none){
  .card:hover,.contact-tile:hover,.btn:hover,.work:hover{transform:none;}
  .work:hover .shot-page{transform:none;}
  .work:hover .work-shot::after{transform:translateX(-130%);}
  .step:hover{padding-left:6px;background:transparent;}
}