/* ============================================================
   lofirmo.com · web 2026
   Sistema de diseño propio (sin frameworks)
   Identidad: tinta + marfil + esmeralda + lacre dorado
   Tipografía: Fraunces (display) + Manrope (texto)
   ============================================================ */

:root{
  /* Color */
  --tinta:        #0e141b;   /* fondo oscuro principal */
  --tinta-2:      #131b24;   /* tarjetas sobre tinta */
  --marfil:       #f7f4ec;   /* fondo claro cálido */
  --blanco:       #ffffff;
  --texto:        #232b33;   /* texto sobre claro */
  --texto-suave:  #5b6670;
  --texto-inv:    #eef0ea;   /* texto sobre tinta */
  --texto-inv-2:  #aab4ae;
  --verde:        #557e25;   /* verde corporativo (del logo) · acción / válido */
  --verde-2:      #648f2e;   /* hover / brillos */
  --verde-3:      #a3d155;   /* acento luminoso sobre tinta */
  --verde-logo-1: #79a833;   /* degradado del logotipo */
  --verde-logo-2: #3d5c29;
  --lacre:        #c2913a;   /* sello dorado, con cuentagotas */
  --linea:        rgba(14,20,27,.12);
  --linea-inv:    rgba(238,240,234,.14);
  --ok:           #4f7a1f;
  /* Forma */
  --radio:        14px;
  --radio-l:      22px;
  --sombra:       0 10px 30px rgba(14,20,27,.08);
  --sombra-l:     0 24px 60px rgba(14,20,27,.14);
  /* Tipo */
  --f-display:    "Fraunces", Georgia, "Times New Roman", serif;
  --f-texto:      "Manrope", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Layout */
  --ancho:        1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
/* El atributo hidden debe ganar SIEMPRE a cualquier display de clase */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--f-texto);
  font-size:17px; line-height:1.65;
  color:var(--texto);
  background:var(--marfil);
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; height:auto; display:inline-block; vertical-align:middle; }
a{ color:var(--verde); text-decoration:none; }
a:hover{ color:var(--verde-2); }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; line-height:1.12; margin:0 0 .5em; color:inherit; letter-spacing:-.01em; }
p{ margin:0 0 1em; }
::selection{ background:var(--verde); color:#fff; }

.contenedor{ max-width:var(--ancho); margin:0 auto; padding:0 24px; }

/* Accesibilidad: salto al contenido + foco visible */
.salto-contenido{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--verde); color:#fff; font-weight:700; padding:12px 20px; border-radius:0 0 12px 0;
}
.salto-contenido:focus{ left:0; color:#fff; }
:focus-visible{ outline:3px solid var(--verde-3); outline-offset:2px; }
.seccion-oscura :focus-visible, .heroe :focus-visible, .cabecera :focus-visible, .pie :focus-visible{ outline-color:#fff; }

/* Textura de grano sutil para fondos oscuros */
.grano{ position:relative; }
.grano::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  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='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Acento serif en cursiva dentro de titulares */
.acento{ font-style:italic; font-weight:500; color:var(--verde-3); }
.seccion-clara .acento, .clara .acento{ color:var(--verde); }

/* ======================= BOTONES ======================= */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--f-texto); font-weight:700; font-size:16px;
  padding:.9em 1.7em; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn svg{ width:1em; height:1em; }
.btn-solido{ background:var(--verde); color:#fff; box-shadow:0 8px 24px rgba(85,126,37,.32); }
.btn-solido:hover{ background:var(--verde-2); color:#fff; transform:translateY(-2px); }
.btn-borde{ border-color:var(--linea); color:var(--texto); background:transparent; }
.btn-borde:hover{ border-color:var(--texto); color:var(--texto); transform:translateY(-2px); }
.btn-borde-inv{ border-color:var(--linea-inv); color:var(--texto-inv); background:transparent; }
.btn-borde-inv:hover{ border-color:var(--texto-inv); color:#fff; transform:translateY(-2px); }
.btn-luz{ background:var(--verde-3); color:var(--tinta); box-shadow:0 8px 28px rgba(163,209,85,.25); }
.btn-luz:hover{ background:#b3dd6b; color:var(--tinta); transform:translateY(-2px); }
.btn-peq{ font-size:14.5px; padding:.65em 1.25em; }

/* ======================= CABECERA ======================= */
.cabecera{
  position:sticky; top:0; z-index:60;
  background:rgba(14,20,27,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea-inv);
  transition:background .25s ease;
}
.cabecera .contenedor{ display:flex; align-items:center; gap:28px; height:72px; }
.marca{ display:flex; align-items:center; color:var(--texto-inv); }
.marca:hover{ color:#fff; }
.marca .logo{ height:25px; width:auto; display:block; }
@media (max-width:600px){ .marca .logo{ height:22px; } }

.nav-principal{ display:flex; align-items:center; gap:4px; margin-left:8px; }
.nav-principal > a, .nav-principal .desplegable > button{
  font:600 15px/1 var(--f-texto); color:var(--texto-inv-2);
  padding:10px 12px; border-radius:10px; background:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.nav-principal > a:hover, .nav-principal .desplegable > button:hover{ color:#fff; }
.desplegable{ position:relative; }
.desplegable > button svg{ width:10px; height:10px; transition:transform .2s; }
.desplegable.abierto > button svg{ transform:rotate(180deg); }
.panel-desplegable{
  position:absolute; top:calc(100% + 10px); left:-10px; min-width:560px;
  background:var(--blanco); color:var(--texto);
  border-radius:var(--radio-l); box-shadow:var(--sombra-l); border:1px solid var(--linea);
  padding:18px; display:none; grid-template-columns:1fr 1fr; gap:4px 12px;
}
.desplegable.abierto .panel-desplegable{ display:grid; }
.panel-desplegable .grupo{ grid-column:1 / -1; font:800 11.5px/1 var(--f-texto); letter-spacing:.12em; text-transform:uppercase; color:var(--texto-suave); padding:12px 12px 6px; }
.panel-desplegable a{
  display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-radius:12px; color:var(--texto);
}
.panel-desplegable a:hover{ background:var(--marfil); }
.panel-desplegable .ic{ width:34px; height:34px; flex:none; border-radius:10px; background:rgba(85,126,37,.1); color:var(--verde); display:grid; place-items:center; }
.panel-desplegable .ic svg{ width:18px; height:18px; }
.panel-desplegable b{ display:block; font-size:15px; }
.panel-desplegable span{ display:block; font-size:13px; color:var(--texto-suave); line-height:1.4; }

.acciones-cab{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.acciones-cab .entrar{ font:600 15.5px/1 var(--f-texto); color:var(--texto-inv-2); padding:10px 12px; }
.acciones-cab .entrar:hover{ color:#fff; }

.btn-menu-movil{ display:none; margin-left:auto; background:none; border:0; color:var(--texto-inv); cursor:pointer; padding:8px; }
.btn-menu-movil svg{ width:26px; height:26px; }

/* Menú móvil */
.menu-movil{ display:none; background:var(--tinta); border-bottom:1px solid var(--linea-inv); padding:10px 24px 26px; }
.menu-movil.abierto{ display:block; }
.menu-movil a{ display:block; padding:12px 4px; color:var(--texto-inv); font-weight:600; border-bottom:1px solid var(--linea-inv); }
.menu-movil .sub{ padding-left:18px; font-weight:500; color:var(--texto-inv-2); font-size:15px; }
.menu-movil .cta{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }

/* ======================= HÉROE ======================= */
.heroe{
  background:
    radial-gradient(900px 480px at 78% -10%, rgba(121,168,51,.18), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, rgba(194,145,58,.08), transparent 60%),
    var(--tinta);
  color:var(--texto-inv);
  overflow:hidden;
}
.heroe .contenedor{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  padding-top:84px; padding-bottom:96px;
}
.migaja{
  display:inline-flex; align-items:center; gap:.6em;
  font:700 12.5px/1 var(--f-texto); letter-spacing:.14em; text-transform:uppercase;
  color:var(--verde-3);
  border:1px solid rgba(163,209,85,.35); border-radius:999px; padding:.7em 1.1em;
}
.migaja .punto{ width:7px; height:7px; border-radius:50%; background:var(--verde-3); box-shadow:0 0 12px var(--verde-3); }
.heroe h1{ font-size:clamp(38px, 4.6vw, 60px); margin:26px 0 18px; color:#fff; }
.heroe .entradilla{ font-size:19px; color:var(--texto-inv-2); max-width:52ch; }
.heroe .botones{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.puntos-confianza{ display:flex; gap:22px; flex-wrap:wrap; margin-top:30px; padding:0; list-style:none; }
.puntos-confianza li{ display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--texto-inv-2); }
.puntos-confianza svg{ width:16px; height:16px; color:var(--verde-3); flex:none; }

/* --- Composición visual del héroe: acta de evidencias --- */
.escena{ position:relative; min-height:480px; }
.acta{
  position:relative; z-index:2;
  background:linear-gradient(180deg, #fffdf8, #f6f1e6);
  color:var(--texto);
  border-radius:var(--radio-l);
  box-shadow:0 40px 90px rgba(0,0,0,.45);
  padding:28px 28px 24px;
  max-width:430px; margin:44px 0 0 auto;
  transform:rotate(-1.2deg);
}
.acta .cab-acta{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; border-bottom:1px dashed var(--linea); padding-bottom:14px; }
.acta .cab-acta .tit{ font:600 19px/1.25 var(--f-display); }
.acta .cab-acta .ref{ font:600 11px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color:var(--texto-suave); }
.sello-lacre{
  width:58px; height:58px; flex:none; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #d9ad57, var(--lacre) 58%, #8f6721);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.45), inset 0 -4px 8px rgba(0,0,0,.28), 0 6px 16px rgba(143,103,33,.4);
  display:grid; place-items:center; color:#fff8ea;
}
.sello-lacre svg{ width:26px; height:26px; }
.linea-tiempo{ list-style:none; margin:18px 0 6px; padding:0; }
.linea-tiempo li{
  position:relative; padding:0 0 16px 30px; font-size:14.5px;
}
.linea-tiempo li::before{
  content:""; position:absolute; left:8px; top:7px; bottom:-3px; width:2px; background:linear-gradient(var(--verde) 60%, rgba(85,126,37,.15));
}
.linea-tiempo li:last-child::before{ display:none; }
.linea-tiempo li::after{
  content:""; position:absolute; left:2px; top:4px; width:14px; height:14px; border-radius:50%;
  background:var(--verde); border:3px solid #fffdf8; box-shadow:0 0 0 1.5px var(--verde);
}
.linea-tiempo b{ display:block; font-size:15px; }
.linea-tiempo time{ font:600 11.5px/1.6 ui-monospace, "SF Mono", Menlo, monospace; color:var(--texto-suave); }
.acta .huella{
  margin-top:10px; padding:10px 12px; border-radius:10px; background:rgba(14,20,27,.05);
  font:600 10.5px/1.7 ui-monospace, "SF Mono", Menlo, monospace; color:var(--texto-suave);
  word-break:break-all;
}
.acta .huella b{ color:var(--verde); font-size:11px; letter-spacing:.06em; }

/* Burbujas flotantes de canales */
.burbuja{
  position:absolute; z-index:3;
  background:#fff; color:var(--texto);
  border-radius:16px; box-shadow:var(--sombra-l);
  padding:12px 15px; font-size:13.5px; line-height:1.45; max-width:250px;
  display:flex; gap:10px; align-items:flex-start;
  animation:flotar 7s ease-in-out infinite;
}
.burbuja .icono-canal{ width:32px; height:32px; flex:none; border-radius:10px; display:grid; place-items:center; color:#fff; }
.burbuja .icono-canal svg{ width:17px; height:17px; }
.burbuja b{ display:block; font-size:13.5px; }
.burbuja small{ color:var(--texto-suave); font-size:12px; }
.burbuja-sms{ top:-12px; left:-8px; animation-delay:.6s; }
.burbuja-sms .icono-canal{ background:#3f5efb; }
.burbuja-wa{ bottom:-30px; left:-26px; animation-delay:1.8s; }
.burbuja-wa .icono-canal{ background:#22b573; }
.burbuja-firma{ bottom:-30px; right:-10px; animation-delay:3s; }
.burbuja-firma .icono-canal{ background:var(--tinta); }
.burbuja .vistos{ color:#37a4e8; font-weight:800; letter-spacing:-.08em; }
@keyframes flotar{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-9px); }
}
@media (prefers-reduced-motion:reduce){
  .burbuja{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ======================= BANDA DE CONFIANZA ======================= */
.banda-confianza{ background:var(--tinta); color:var(--texto-inv-2); border-top:1px solid var(--linea-inv); }
.banda-confianza .contenedor{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 34px;
  padding-top:22px; padding-bottom:22px;
}
.banda-confianza .item{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; }
.banda-confianza .item svg{ width:20px; height:20px; color:var(--verde-3); flex:none; }

/* ======================= SECCIONES ======================= */
.seccion{ padding:96px 0; }
.seccion-compacta{ padding:72px 0; }
.seccion-oscura{ background:var(--tinta); color:var(--texto-inv); }
.seccion-blanca{ background:var(--blanco); }
.cab-seccion{ max-width:780px; margin:0 auto 56px; text-align:center; }
.cab-seccion.izquierda{ margin-left:0; text-align:left; }
.ceja{
  display:inline-flex; align-items:center; gap:.6em;
  font:800 12px/1 var(--f-texto); letter-spacing:.16em; text-transform:uppercase;
  color:var(--verde); margin-bottom:16px;
}
.seccion-oscura .ceja{ color:var(--verde-3); }
.ceja::before{ content:""; width:22px; height:2px; background:currentColor; border-radius:2px; }
.cab-seccion h2{ font-size:clamp(30px, 3.4vw, 44px); }
.cab-seccion .sub{ font-size:18px; color:var(--texto-suave); }
.seccion-oscura .cab-seccion .sub{ color:var(--texto-inv-2); }

/* ======================= LANZADOR: ¿QUÉ NECESITAS ACREDITAR? ======================= */
.lanzador{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.tarjeta-lanzador{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio-l);
  padding:28px 24px; color:var(--texto);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex; flex-direction:column; gap:6px; position:relative;
}
.tarjeta-lanzador:hover{ transform:translateY(-6px); box-shadow:var(--sombra-l); border-color:rgba(85,126,37,.35); color:var(--texto); }
.tarjeta-lanzador .ic{
  width:52px; height:52px; border-radius:16px; margin-bottom:14px;
  background:linear-gradient(135deg, rgba(85,126,37,.14), rgba(163,209,85,.18));
  color:var(--verde); display:grid; place-items:center;
}
.tarjeta-lanzador .ic svg{ width:26px; height:26px; }
.tarjeta-lanzador h3{ font-size:20px; margin-bottom:2px; }
.tarjeta-lanzador p{ font-size:14.5px; color:var(--texto-suave); margin:0; }
.tarjeta-lanzador .ir{
  margin-top:14px; font:700 14px/1 var(--f-texto); color:var(--verde);
  display:inline-flex; align-items:center; gap:6px;
}
.tarjeta-lanzador .ir svg{ width:14px; height:14px; transition:transform .2s; }
.tarjeta-lanzador:hover .ir svg{ transform:translateX(4px); }

/* ======================= CANALES CERTIFICADOS ======================= */
.rejilla-canales{ display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; }
.tarjeta-canal{
  border-radius:var(--radio-l); padding:34px 32px; border:1px solid var(--linea);
  background:var(--marfil); position:relative; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.tarjeta-canal:hover{ transform:translateY(-4px); box-shadow:var(--sombra-l); }
.tarjeta-canal .etiqueta-canal{
  display:inline-flex; align-items:center; gap:8px; font:800 12px/1 var(--f-texto);
  letter-spacing:.1em; text-transform:uppercase; padding:.6em 1em; border-radius:999px; margin-bottom:18px; color:#fff;
}
.tarjeta-canal h3{ font-size:24px; }
.tarjeta-canal p{ color:var(--texto-suave); font-size:15.5px; }
.tarjeta-canal ul{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px; }
.tarjeta-canal li{ display:flex; gap:10px; font-size:14.5px; align-items:flex-start; }
.tarjeta-canal li svg{ width:16px; height:16px; color:var(--verde); flex:none; margin-top:3px; }
.tarjeta-canal .mas{ display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-weight:700; font-size:15px; }

/* ======================= FILAS DE SERVICIO (contratación / sello / identidad) ======================= */
.fila-servicio{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
  padding:64px 0;
}
.fila-servicio + .fila-servicio{ border-top:1px solid var(--linea); }
.fila-servicio.invertida .visual{ order:-1; }
.fila-servicio h3{ font-size:clamp(26px, 2.6vw, 34px); }
.fila-servicio .desc{ color:var(--texto-suave); font-size:17px; }
.fila-servicio ul{ list-style:none; margin:20px 0 26px; padding:0; display:grid; gap:12px; }
.fila-servicio li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; }
.fila-servicio li svg{ width:18px; height:18px; color:var(--verde); flex:none; margin-top:4px; }
.fila-servicio li b{ font-weight:700; }

/* Visuales CSS de las filas */
.visual{ position:relative; }
.lamina{
  background:var(--blanco); color:var(--texto); border:1px solid var(--linea); border-radius:var(--radio-l);
  box-shadow:var(--sombra-l); padding:26px; max-width:440px; margin:0 auto;
}
.lamina .barra{ display:flex; gap:6px; margin-bottom:18px; }
.lamina .barra i{ width:10px; height:10px; border-radius:50%; background:var(--linea); }
.lamina .barra i:first-child{ background:#f0b429; }
.lamina .doc-linea{ height:10px; border-radius:6px; background:rgba(14,20,27,.08); margin-bottom:10px; }
.lamina .doc-linea.corta{ width:62%; }
.lamina .zona-firma{
  margin-top:18px; border:1.5px dashed rgba(85,126,37,.5); border-radius:12px;
  padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:rgba(85,126,37,.05);
}
.lamina .zona-firma .quien{ font-size:13px; color:var(--texto-suave); }
.rubrica{ font-family:var(--f-display); font-style:italic; font-weight:600; font-size:26px; color:var(--tinta); transform:rotate(-3deg); }
.chip-estado{
  display:inline-flex; align-items:center; gap:7px; font:700 12.5px/1 var(--f-texto);
  color:var(--verde); background:rgba(85,126,37,.1); border-radius:999px; padding:.55em .95em;
}
.chip-estado svg{ width:13px; height:13px; }

.visual-sello{ text-align:center; }
.reloj-sello{
  width:210px; height:210px; margin:0 auto; border-radius:50%; position:relative;
  background:
    radial-gradient(circle at 34% 30%, #d9ad57, var(--lacre) 60%, #8f6721);
  box-shadow:inset 0 4px 12px rgba(255,255,255,.4), inset 0 -8px 18px rgba(0,0,0,.3), 0 26px 60px rgba(143,103,33,.35);
  display:grid; place-items:center; color:#fff8ea;
}
.reloj-sello .interior{
  width:150px; height:150px; border-radius:50%; border:2px dashed rgba(255,248,234,.6);
  display:grid; place-items:center; text-align:center; padding:14px;
}
.reloj-sello .interior b{ font:600 15px/1.3 var(--f-display); display:block; }
.reloj-sello .interior time{ font:700 12px/1.6 ui-monospace, Menlo, monospace; }

.tarjeta-ident{
  background:var(--blanco); color:var(--texto); border:1px solid var(--linea); border-radius:var(--radio-l);
  box-shadow:var(--sombra-l); padding:24px; max-width:420px; margin:0 auto;
  display:grid; gap:14px;
}
.tarjeta-ident .paso-ident{ display:flex; gap:14px; align-items:center; }
.tarjeta-ident .paso-ident .ic{
  width:44px; height:44px; border-radius:14px; flex:none; display:grid; place-items:center;
  background:rgba(85,126,37,.1); color:var(--verde);
}
.tarjeta-ident .paso-ident .ic svg{ width:22px; height:22px; }
.tarjeta-ident .paso-ident b{ display:block; font-size:15px; }
.tarjeta-ident .paso-ident small{ color:var(--texto-suave); }
.tarjeta-ident .resultado{
  border-top:1px dashed var(--linea); padding-top:14px; display:flex; align-items:center; justify-content:space-between;
}

/* ======================= EVIDENCIAS ======================= */
.rejilla-evidencias{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.tarjeta-evidencia{
  background:var(--tinta-2); border:1px solid var(--linea-inv); border-radius:var(--radio-l);
  padding:28px 26px;
  transition:transform .2s ease, border-color .2s ease;
}
.tarjeta-evidencia:hover{ transform:translateY(-4px); border-color:rgba(163,209,85,.4); }
.tarjeta-evidencia .ic{
  width:46px; height:46px; border-radius:14px; margin-bottom:16px;
  background:rgba(163,209,85,.12); color:var(--verde-3); display:grid; place-items:center;
}
.tarjeta-evidencia .ic svg{ width:23px; height:23px; }
.tarjeta-evidencia h3{ font-size:19px; color:#fff; }
.tarjeta-evidencia p{ font-size:14.5px; color:var(--texto-inv-2); margin:0; }
.nota-fnmt{
  margin-top:40px; text-align:center; font-size:15px; color:var(--texto-inv-2);
  max-width:720px; margin-left:auto; margin-right:auto;
}
.nota-fnmt b{ color:#fff; }

/* ======================= CÓMO FUNCIONA ======================= */
.pasos{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; counter-reset:paso; }
.paso{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio-l);
  padding:34px 30px; position:relative; counter-increment:paso;
}
.paso::before{
  content:"0" counter(paso);
  font:600 52px/1 var(--f-display); font-style:italic;
  color:rgba(85,126,37,.18);
  position:absolute; top:22px; right:26px;
}
.paso h3{ font-size:21px; padding-right:70px; }
.paso p{ color:var(--texto-suave); font-size:15px; margin:0; }

/* ======================= VENTAJAS ======================= */
.rejilla-ventajas{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.ventaja{ padding:6px 4px; }
.ventaja .ic{ width:44px; height:44px; border-radius:14px; background:rgba(85,126,37,.1); color:var(--verde); display:grid; place-items:center; margin-bottom:14px; }
.ventaja .ic svg{ width:22px; height:22px; }
.ventaja h3{ font-size:18px; font-family:var(--f-texto); font-weight:800; }
.ventaja p{ font-size:14.5px; color:var(--texto-suave); margin:0; }

/* ======================= SECTORES ======================= */
.nube-sectores{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:900px; margin:0 auto; }
.sector{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--linea); background:var(--blanco); border-radius:999px;
  padding:.75em 1.3em; font-weight:600; font-size:15px; color:var(--texto);
}
.sector svg{ width:17px; height:17px; color:var(--verde); }

/* ======================= API ======================= */
.bloque-api{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.terminal{
  background:#0b1016; border:1px solid var(--linea-inv); border-radius:var(--radio-l);
  box-shadow:var(--sombra-l); overflow:hidden; font:500 13.5px/1.7 ui-monospace, "SF Mono", Menlo, monospace;
}
.terminal .cab-terminal{
  display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--linea-inv);
  color:var(--texto-inv-2); font-size:12px;
}
.terminal .cab-terminal i{ width:10px; height:10px; border-radius:50%; background:#2e3a46; }
.terminal pre{ margin:0; padding:20px 22px; overflow-x:auto; color:#c9d4d0; }
.terminal .verde{ color:var(--verde-3); }
.terminal .ambar{ color:#e3b566; }
.terminal .gris{ color:#5f6f6b; }

/* ======================= TESTIMONIOS ======================= */
.rejilla-testimonios{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.testimonio{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio-l);
  padding:30px 28px; display:flex; flex-direction:column; gap:16px;
}
.testimonio .estrellas{ color:var(--lacre); letter-spacing:2px; font-size:15px; }
.testimonio blockquote{ margin:0; font-size:15.5px; line-height:1.6; }
.testimonio blockquote::before{ content:"“"; font:600 42px/0 var(--f-display); color:var(--verde); display:block; margin:14px 0 2px; }
.testimonio .firma-t{ margin-top:auto; font-size:14px; color:var(--texto-suave); }
.testimonio .firma-t b{ color:var(--texto); display:block; font-size:14.5px; }

/* ======================= FAQ ======================= */
.faq{ max-width:820px; margin:0 auto; }
.faq details{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  margin-bottom:12px; overflow:hidden;
}
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:20px 24px; font-weight:700; font-size:16.5px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .mas-menos{
  width:26px; height:26px; flex:none; border-radius:50%; border:1.5px solid var(--linea);
  display:grid; place-items:center; font-weight:600; color:var(--verde); transition:transform .2s;
}
.faq details[open] summary .mas-menos{ transform:rotate(45deg); }
.faq .respuesta{ padding:0 24px 22px; color:var(--texto-suave); font-size:15.5px; }
.faq .respuesta p{ margin:0 0 .6em; }

/* ======================= CTA FINAL ======================= */
.cta-final{ text-align:center; position:relative; overflow:hidden; }
.cta-final h2{ font-size:clamp(32px, 4vw, 52px); color:#fff; max-width:18ch; margin:0 auto 18px; }
.cta-final .sub{ color:var(--texto-inv-2); font-size:18px; max-width:56ch; margin:0 auto; }
.cta-final .botones{ display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.cta-final .tel{ margin-top:26px; font-size:15px; color:var(--texto-inv-2); }
.cta-final .tel a{ color:#fff; font-weight:800; }

/* ======================= PIE ======================= */
.pie{ background:var(--tinta); color:var(--texto-inv-2); border-top:1px solid var(--linea-inv); }
.pie .contenedor{ padding-top:64px; padding-bottom:34px; }
.pie-rejilla{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid var(--linea-inv); }
.pie h4{ font:800 12.5px/1 var(--f-texto); letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:18px; }
.pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.pie a{ color:var(--texto-inv-2); font-size:14.5px; }
.pie a:hover{ color:#fff; }
.pie .sobre{ font-size:14.5px; max-width:34ch; }
.pie .tel-pie{ display:flex; align-items:center; gap:10px; margin-top:18px; color:#fff; font-weight:800; font-size:17px; }
.pie .tel-pie svg{ width:18px; height:18px; color:var(--verde-3); }
.pie-legal{
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; align-items:center;
  padding-top:26px; font-size:13px;
}
.pie-legal .enlaces{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.pie-legal a{ font-size:13px; }
.insignias{ display:flex; gap:14px; align-items:center; margin-top:22px; }
.insignia{
  border:1px solid var(--linea-inv); border-radius:10px; padding:8px 12px;
  font:800 11px/1.3 var(--f-texto); letter-spacing:.06em; color:var(--texto-inv);
  display:flex; flex-direction:column; gap:1px;
}
.insignia small{ font-weight:600; color:var(--texto-inv-2); letter-spacing:.02em; }

/* ======================= REVELADO AL HACER SCROLL ======================= */
.revela{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.revela.visible{ opacity:1; transform:none; }
.revela-1{ transition-delay:.08s; } .revela-2{ transition-delay:.16s; }
.revela-3{ transition-delay:.24s; } .revela-4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  .revela{ opacity:1; transform:none; transition:none; }
}

/* ======================= RESPONSIVE ======================= */
@media (max-width:1080px){
  .lanzador{ grid-template-columns:repeat(2, 1fr); }
  .rejilla-evidencias{ grid-template-columns:repeat(2, 1fr); }
  .rejilla-ventajas{ grid-template-columns:repeat(2, 1fr); }
  .rejilla-testimonios{ grid-template-columns:1fr 1fr; }
  .pie-rejilla{ grid-template-columns:1fr 1fr; }
}
@media (max-width:920px){
  .nav-principal, .acciones-cab{ display:none; }
  .btn-menu-movil{ display:block; }
  .heroe .contenedor{ grid-template-columns:1fr; gap:64px; padding-top:56px; padding-bottom:72px; }
  .escena{ min-height:0; max-width:470px; margin:0 auto; }
  .acta{ transform:none; margin:0 auto; }
  .burbuja-wa{ left:-8px; }
  .fila-servicio{ grid-template-columns:1fr; gap:40px; padding:48px 0; }
  .fila-servicio.invertida .visual{ order:0; }
  .rejilla-canales{ grid-template-columns:1fr; }
  .bloque-api{ grid-template-columns:1fr; gap:40px; }
  .pasos{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  body{ font-size:16px; }
  .seccion{ padding:64px 0; }
  .lanzador{ grid-template-columns:1fr; }
  .rejilla-evidencias{ grid-template-columns:1fr; }
  .rejilla-ventajas{ grid-template-columns:1fr; }
  .rejilla-testimonios{ grid-template-columns:1fr; }
  .pie-rejilla{ grid-template-columns:1fr; }
  .burbuja{ position:static; margin-top:14px; animation:none; }
  .escena{ display:flex; flex-direction:column; }
  .heroe .botones .btn{ width:100%; justify-content:center; }
}

/* ======================= PÁGINAS INTERIORES ======================= */
.heroe-pagina .contenedor{ padding-top:56px; padding-bottom:76px; gap:48px; }
.heroe-pagina h1{ font-size:clamp(32px, 3.8vw, 50px); }
.miga-ruta{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-size:13.5px; color:var(--texto-inv-2); margin-bottom:22px;
}
.miga-ruta a{ color:var(--texto-inv-2); }
.miga-ruta a:hover{ color:#fff; }
.miga-ruta .sep{ opacity:.45; }
.miga-ruta b{ color:var(--verde-3); font-weight:600; }

/* Rejilla de características (fondo claro) */
.rejilla-caract{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.tarjeta-caract{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio-l);
  padding:26px 24px;
}
.tarjeta-caract .ic{
  width:42px; height:42px; border-radius:13px; margin-bottom:14px;
  background:rgba(85,126,37,.1); color:var(--verde); display:grid; place-items:center;
}
.tarjeta-caract .ic svg{ width:21px; height:21px; }
.tarjeta-caract h3{ font-family:var(--f-texto); font-weight:800; font-size:17px; }
.tarjeta-caract p{ font-size:14.5px; color:var(--texto-suave); margin:0; }

/* Lista de casos de uso con check grande */
.lista-casos{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; max-width:900px; margin-inline:auto; }
.lista-casos li{
  display:flex; gap:14px; align-items:flex-start; background:var(--blanco);
  border:1px solid var(--linea); border-radius:var(--radio); padding:16px 18px; font-size:15px;
}
.lista-casos li svg{ width:20px; height:20px; color:var(--verde); flex:none; margin-top:2px; }
.lista-casos b{ display:block; font-size:15.5px; }
.lista-casos span{ color:var(--texto-suave); font-size:14px; }

/* Visual: email certificado */
.lamina-email .campo{
  display:flex; gap:10px; font-size:13.5px; padding:8px 0; border-bottom:1px solid var(--linea);
}
.lamina-email .campo b{ color:var(--texto-suave); font-weight:700; min-width:64px; }
.lamina-email .cuerpo-mail{ padding:14px 0 4px; }
.lamina-email .adjunto{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
  border:1px solid var(--linea); border-radius:10px; padding:7px 12px; margin-top:10px; color:var(--texto);
}
.lamina-email .adjunto svg{ width:15px; height:15px; color:var(--verde); }
.lamina-email .estados{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }

/* Visual: conversación (WhatsApp / RCS) */
.tarjeta-chat{
  background:var(--blanco); color:var(--texto); border:1px solid var(--linea); border-radius:var(--radio-l);
  box-shadow:var(--sombra-l); padding:20px; max-width:410px; margin:0 auto;
}
.tarjeta-chat .cab-chat{
  display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--linea); margin-bottom:14px;
}
.tarjeta-chat .cab-chat .avatar{
  width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--verde-logo-1), var(--verde-logo-2));
  color:#fff; display:grid; place-items:center; font:800 14px/1 var(--f-texto);
}
.tarjeta-chat .cab-chat b{ display:block; font-size:15px; }
.tarjeta-chat .cab-chat small{ color:var(--texto-suave); display:flex; align-items:center; gap:5px; }
.tarjeta-chat .cab-chat small svg{ width:12px; height:12px; color:var(--verde); }
.globo{
  max-width:82%; padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.45; margin-bottom:10px;
  background:rgba(14,20,27,.06); border-bottom-left-radius:6px;
}
.globo.mio{
  margin-left:auto; background:rgba(85,126,37,.14); border-bottom-left-radius:16px; border-bottom-right-radius:6px;
}
.globo .meta{ display:block; text-align:right; font-size:11px; color:var(--texto-suave); margin-top:4px; }
.globo .meta .vistos{ color:#37a4e8; font-weight:800; letter-spacing:-.08em; }
.tarjeta-chat .pie-chat{
  border-top:1px dashed var(--linea); margin-top:6px; padding-top:12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--texto-suave);
}

/* Visual: mensaje RCS enriquecido */
.tarjeta-rcs .imagen-rcs{
  border-radius:12px; height:110px; margin-bottom:12px;
  background:
    radial-gradient(140px 90px at 20% 20%, rgba(163,209,85,.5), transparent 70%),
    linear-gradient(135deg, var(--verde-logo-2), #1c2b13);
  display:grid; place-items:center; color:#e9f4d4; font:600 15px/1.3 var(--f-display); font-style:italic;
}
.tarjeta-rcs .botones-rcs{ display:grid; gap:8px; margin-top:12px; }
.tarjeta-rcs .boton-rcs{
  text-align:center; font:700 13.5px/1 var(--f-texto); color:var(--verde);
  border:1.5px solid rgba(85,126,37,.4); border-radius:999px; padding:10px 12px;
}

/* Caja legal destacada */
.caja-legal{
  max-width:860px; margin:0 auto; background:var(--tinta-2); border:1px solid var(--linea-inv);
  border-radius:var(--radio-l); padding:30px 34px; display:flex; gap:20px; align-items:flex-start;
}
.caja-legal .ic{ width:46px; height:46px; flex:none; border-radius:14px; background:rgba(163,209,85,.12); color:var(--verde-3); display:grid; place-items:center; }
.caja-legal .ic svg{ width:23px; height:23px; }
.caja-legal h3{ color:#fff; font-size:19px; }
.caja-legal p{ color:var(--texto-inv-2); font-size:15px; margin:0; }

.lanzador-3{ grid-template-columns:repeat(3, 1fr); }
.rejilla-caract-2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width:700px){ .rejilla-caract-2{ grid-template-columns:1fr; } }

@media (max-width:1080px){
  .rejilla-caract{ grid-template-columns:1fr 1fr; }
  .lanzador-3{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:700px){
  .rejilla-caract{ grid-template-columns:1fr; }
  .lista-casos{ grid-template-columns:1fr; }
  .caja-legal{ flex-direction:column; padding:24px; }
  .lanzador-3{ grid-template-columns:1fr; }
}

/* ======================= PÁGINA DE PRECIOS ======================= */
/* 4 columnas (2 en móvil); "A tu medida" ocupa 2 → con 7 tarjetas,
   siempre filas completas (patrón de la web de Mensatek). */
.rejilla-bonos{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;
}
@media (min-width:768px){
  .rejilla-bonos{ grid-template-columns:repeat(4, 1fr); }
}
.bono{
  background:var(--blanco); color:var(--texto); border:1.5px solid var(--linea);
  border-radius:var(--radio-l); padding:18px 14px; text-align:center; cursor:pointer;
  font-family:var(--f-texto); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center;
}
.bono:hover{ transform:translateY(-3px); box-shadow:var(--sombra); border-color:rgba(85,126,37,.45); }
.bono.activo{ border-color:var(--verde); box-shadow:0 0 0 3px rgba(85,126,37,.18), var(--sombra); background:#fbfef4; }
.bono .eur{ font:600 26px/1.1 var(--f-display); }
.bono .cred{ font-size:13.5px; font-weight:700; color:var(--verde); }
.bono .pc{ font-size:12px; color:var(--texto-suave); }
.bono-libre{
  cursor:text; grid-column:span 2;
  flex-direction:row; flex-wrap:wrap; column-gap:16px; row-gap:2px;
}
.bono-libre .pc{ flex-basis:100%; }
.bono-libre .titulo{ font:600 15px/1.2 var(--f-display); font-style:italic; display:block; }
.bono-libre .entrada{
  display:inline-flex; align-items:baseline; gap:4px; margin-top:2px;
  font:600 24px/1.1 var(--f-display);
}
.bono-libre input{
  width:84px; border:0; border-bottom:2px solid var(--linea); background:transparent;
  font:600 24px/1.2 var(--f-display); color:var(--texto); text-align:right; outline:none;
}
.bono-libre input:focus{ border-bottom-color:var(--verde); }
.bono-libre input::-webkit-outer-spin-button,
.bono-libre input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.bono-libre input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
.resumen-bono{ text-align:center; font-weight:700; color:var(--texto-suave); margin:22px auto 0; max-width:640px; }

.grupo-tarifas{
  font:800 12px/1 var(--f-texto); letter-spacing:.16em; text-transform:uppercase;
  color:var(--verde); margin:38px 0 12px; display:flex; align-items:center; gap:10px;
}
.grupo-tarifas::after{ content:""; flex:1; height:1px; background:var(--linea); }
.fila-tarifa{
  display:grid; grid-template-columns:46px 1fr auto auto; gap:16px; align-items:center;
  background:var(--blanco); color:var(--texto); border:1px solid var(--linea); border-radius:var(--radio);
  padding:14px 18px; margin-bottom:10px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.fila-tarifa:hover{ transform:translateY(-2px); box-shadow:var(--sombra); border-color:rgba(85,126,37,.4); color:var(--texto); }
.fila-tarifa .ic{
  width:44px; height:44px; border-radius:13px; background:rgba(85,126,37,.1); color:var(--verde);
  display:grid; place-items:center;
}
.fila-tarifa .ic svg{ width:22px; height:22px; }
.fila-tarifa .nombre b{ display:block; font-size:16px; }
.fila-tarifa .nombre span{ font-size:13px; color:var(--texto-suave); }
.fila-tarifa .creditos{
  font:700 13px/1 var(--f-texto); color:var(--verde); background:rgba(85,126,37,.09);
  border-radius:999px; padding:.6em 1em; white-space:nowrap;
}
.fila-tarifa .importe{ text-align:right; min-width:150px; }
.fila-tarifa .importe b{ font:600 19px/1.2 var(--f-display); display:block; white-space:nowrap; }
.fila-tarifa .importe small{ font-size:12px; color:var(--texto-suave); }
.nota-tarifas{ font-size:13.5px; color:var(--texto-suave); margin-top:18px; }

/* Calculadora */
.calculadora{
  background:var(--blanco); color:var(--texto); border:1px solid var(--linea); border-radius:var(--radio-l);
  box-shadow:var(--sombra); padding:30px 32px; max-width:760px; margin:0 auto;
}
.calculadora label{ font:700 13px/1 var(--f-texto); letter-spacing:.04em; text-transform:uppercase; color:var(--texto-suave); display:block; margin-bottom:8px; }
.campos-calc{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px; }
.calculadora select, .calculadora input{
  width:100%; border:1.5px solid var(--linea); border-radius:12px; background:var(--marfil);
  font:600 16px/1.3 var(--f-texto); color:var(--texto); padding:12px 14px; outline:none;
}
.calculadora select:focus, .calculadora input:focus{ border-color:var(--verde); }
.res-calc{ margin-top:22px; border-top:1px dashed var(--linea); padding-top:8px; }
.res-calc .linea{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:9px 0; font-size:15px; color:var(--texto-suave);
}
.res-calc .linea b{ color:var(--texto); font-size:16px; text-align:right; }
.res-calc .linea b.gordo{ font:600 26px/1.1 var(--f-display); color:var(--verde); }
.res-calc .linea.sobran{ color:var(--verde); }
.consejo-calc{ margin-top:12px; font-size:14px; font-weight:700; color:var(--verde); }

@media (max-width:700px){
  .fila-tarifa{ grid-template-columns:40px 1fr auto; }
  .fila-tarifa .creditos{ display:none; }
  .fila-tarifa .importe{ min-width:0; }
  .campos-calc{ grid-template-columns:1fr; }
  .calculadora{ padding:22px 20px; }
}

/* ======================= CONTACTO / NOSOTROS ======================= */
.rejilla-contacto{ display:grid; grid-template-columns:1.4fr 1fr; gap:28px; align-items:start; }
.formulario{
  background:var(--blanco); color:var(--texto); border:1px solid var(--linea);
  border-radius:var(--radio-l); box-shadow:var(--sombra); padding:32px;
}
.campo-form{ margin-bottom:18px; }
.campo-form label{
  font:700 13px/1 var(--f-texto); letter-spacing:.04em; text-transform:uppercase;
  color:var(--texto-suave); display:block; margin-bottom:8px;
}
.campo-form label .req{ color:#b3261e; }
.campo-form input, .campo-form textarea, .campo-form select{
  width:100%; border:1.5px solid var(--linea); border-radius:12px; background:var(--marfil);
  font:500 16px/1.4 var(--f-texto); color:var(--texto); padding:12px 14px; outline:none;
}
.campo-form input:focus, .campo-form textarea:focus, .campo-form select:focus{ border-color:var(--verde); }
.campo-form textarea{ min-height:140px; resize:vertical; }
.campo-form .ayuda{ font-size:13px; color:var(--texto-suave); margin-top:6px; display:block; }
/* Casillas de servicios (formulario de grandes cuentas) */
.campo-form fieldset{ border:0; padding:0; margin:0; }
.campo-form legend{
  font:700 13px/1 var(--f-texto); letter-spacing:.04em; text-transform:uppercase;
  color:var(--texto-suave); margin-bottom:10px; padding:0;
}
.rejilla-casillas{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px 18px; }
/* Más específico que ".campo-form label" para anular su uppercase/block */
.campo-form .casilla{
  display:flex; align-items:center; gap:9px; margin:0; cursor:pointer;
  font:600 15px/1.4 var(--f-texto); letter-spacing:0; text-transform:none; color:var(--texto);
}
.casilla input{ width:17px; height:17px; accent-color:var(--verde); flex:none; }
@media (max-width:600px){ .rejilla-casillas{ grid-template-columns:1fr; } }
.dos-columnas-form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.consentimiento{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--texto-suave); margin:20px 0; }
.consentimiento input{ width:18px; height:18px; margin-top:2px; accent-color:var(--verde); flex:none; }
.aviso-form{
  border-radius:12px; padding:14px 18px; margin-top:18px; font-weight:600; font-size:15px; display:none;
}
.aviso-form.ok{ display:block; background:rgba(85,126,37,.1); color:#3c5b17; border:1px solid rgba(85,126,37,.35); }
.aviso-form.mal{ display:block; background:rgba(179,38,30,.07); color:#8f1d16; border:1px solid rgba(179,38,30,.3); }
/* Campo señuelo antispam: fuera de la vista también para lectores de pantalla */
.campo-miel{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* Solo para lectores de pantalla (sí debe leerse, a diferencia del señuelo) */
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* ======================= CATÁLOGO DE ESPECIFICACIONES API ======================= */
.grupo-especs{
  font:700 13px/1 var(--f-texto); letter-spacing:.14em; text-transform:uppercase;
  color:var(--verde); margin:34px 0 14px;
}
.grupo-especs:first-of-type{ margin-top:0; }
.rejilla-especs{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tarjeta-espec{
  display:flex; align-items:flex-start; gap:14px;
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio-l);
  padding:20px 22px; color:var(--texto); text-decoration:none;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tarjeta-espec:hover{ border-color:var(--verde); box-shadow:var(--sombra); transform:translateY(-2px); }
.tarjeta-espec .ic{
  width:42px; height:42px; border-radius:13px; flex:none;
  background:rgba(85,126,37,.1); color:var(--verde); display:grid; place-items:center;
}
.tarjeta-espec .ic svg{ width:21px; height:21px; }
.tarjeta-espec .cuerpo{ display:block; }
.tarjeta-espec .cuerpo b{ display:block; font-size:16px; font-weight:800; margin-bottom:3px; }
.tarjeta-espec .cuerpo > span{ display:block; font-size:14px; color:var(--texto-suave); line-height:1.5; }
.tarjeta-espec .solo-es{ font-weight:600; font-size:12.5px; color:var(--texto-suave); }
.tarjeta-espec .flecha{ margin-left:auto; align-self:center; color:var(--verde); font-size:20px; }
@media (max-width:760px){ .rejilla-especs{ grid-template-columns:1fr; } }

.tarjeta-contacto{
  background:var(--blanco); color:var(--texto); border:1px solid var(--linea);
  border-radius:var(--radio-l); padding:24px 26px; margin-bottom:16px;
}
.tarjeta-contacto .ic{
  width:44px; height:44px; border-radius:13px; background:rgba(85,126,37,.1); color:var(--verde);
  display:grid; place-items:center; margin-bottom:12px;
}
.tarjeta-contacto .ic svg{ width:22px; height:22px; }
.tarjeta-contacto h2, .tarjeta-contacto h3{ font-family:var(--f-texto); font-weight:800; font-size:16.5px; margin-bottom:4px; }
.tarjeta-contacto p{ font-size:14.5px; color:var(--texto-suave); margin:0; }
.tarjeta-contacto .grande{ font:600 26px/1.2 var(--f-display); color:var(--texto); display:inline-block; margin:4px 0; }

/* Nosotros */
.prosa{ max-width:760px; margin:0 auto; font-size:17.5px; }
.prosa p{ margin-bottom:1.2em; }
.prosa .destacada{
  font:500 22px/1.5 var(--f-display); font-style:italic; color:var(--texto);
  border-left:3px solid var(--verde); padding-left:22px; margin:1.6em 0;
}
.cifras-nosotros{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center; }
.cifra{ padding:10px 6px; }
.cifra b{ display:block; font:600 40px/1.1 var(--f-display); color:var(--verde-3); }
.cifra span{ font-size:14px; color:var(--texto-inv-2); }

@media (max-width:920px){
  .rejilla-contacto{ grid-template-columns:1fr; }
  .cifras-nosotros{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .dos-columnas-form{ grid-template-columns:1fr; }
  .formulario{ padding:24px 20px; }
}

/* ======================= PÁGINAS LEGALES ======================= */
.rejilla-legal{ display:grid; grid-template-columns:260px 1fr; gap:36px; align-items:start; }
.indice-legal{
  position:sticky; top:96px;
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio-l);
  padding:22px 22px 16px;
}
.indice-legal h2{ font:800 12px/1 var(--f-texto); letter-spacing:.14em; text-transform:uppercase; color:var(--texto-suave); margin-bottom:14px; }
.indice-legal ol{ list-style:none; margin:0; padding:0; }
.indice-legal li{ margin-bottom:2px; }
.indice-legal a{ display:block; font-size:13.5px; color:var(--texto); padding:7px 10px; border-radius:9px; line-height:1.35; }
.indice-legal a:hover{ background:var(--marfil); color:var(--verde); }
.indice-legal .otros{ border-top:1px solid var(--linea); margin-top:14px; padding-top:14px; }
.indice-legal .otros a{ color:var(--verde); font-weight:600; }

.doc-legal{
  background:var(--blanco); color:var(--texto); border:1px solid var(--linea);
  border-radius:var(--radio-l); padding:44px 48px; font-size:15.5px; line-height:1.75;
}
.doc-legal h2{
  font-size:21px; margin:1.8em 0 .7em; scroll-margin-top:96px;
}
.doc-legal h2:first-child{ margin-top:0; }
.doc-legal p{ margin:0 0 1em; }
.doc-legal ul, .doc-legal ol{ margin:0 0 1em; padding-left:1.4em; }
.doc-legal table{ width:100%; border-collapse:collapse; margin:1em 0; font-size:14px; }
.doc-legal th, .doc-legal td{ border:1px solid var(--linea); padding:8px 12px; text-align:left; vertical-align:top; }
.doc-legal th{ background:var(--marfil); font-weight:700; }
.doc-legal .desborda{ overflow-x:auto; }

.aviso-revision{
  background:rgba(194,145,58,.09); border:1px solid rgba(194,145,58,.4); border-radius:var(--radio);
  padding:14px 18px; font-size:14px; color:#6e5426; margin-bottom:26px;
}

/* Documentos del PSC (políticas y prácticas) */
.rejilla-psc{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.doc-psc{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--blanco); color:var(--texto); border:1px solid var(--linea); border-radius:var(--radio-l);
  padding:22px 24px; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.doc-psc:hover{ transform:translateY(-2px); box-shadow:var(--sombra); border-color:rgba(85,126,37,.4); color:var(--texto); }
.doc-psc .ic{ width:44px; height:44px; flex:none; border-radius:13px; background:rgba(85,126,37,.1); color:var(--verde); display:grid; place-items:center; }
.doc-psc .ic svg{ width:22px; height:22px; }
.doc-psc b{ display:block; font-size:15.5px; }
.doc-psc span{ font-size:13.5px; color:var(--texto-suave); }
.doc-psc .descarga{ margin-left:auto; align-self:center; font:700 13px/1 var(--f-texto); color:var(--verde); white-space:nowrap; }
.lista-pki{ list-style:none; margin:10px 0 0; padding:0; }
.lista-pki li{ margin-bottom:6px; }
.lista-pki code{
  font:600 12.5px/1.6 ui-monospace, "SF Mono", Menlo, monospace;
  background:rgba(14,20,27,.05); border-radius:8px; padding:4px 10px; word-break:break-all;
}

@media (max-width:920px){
  .rejilla-legal{ grid-template-columns:1fr; }
  .indice-legal{ position:static; }
  .doc-legal{ padding:28px 22px; }
  .rejilla-psc{ grid-template-columns:1fr; }
}

/* ======================= BANNER DE COOKIES ======================= */
.banner-cookies{
  position:fixed; z-index:90; left:16px; right:16px; bottom:16px;
  display:flex; justify-content:center; pointer-events:none;
}
.caja-banner{
  pointer-events:auto;
  background:var(--tinta); color:var(--texto-inv);
  border:1px solid var(--linea-inv); border-radius:var(--radio-l);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  max-width:920px; width:100%; padding:22px 26px;
}
.caja-banner .texto-banner b{ display:block; font-size:16px; margin-bottom:4px; }
.caja-banner .texto-banner p{ font-size:14px; color:var(--texto-inv-2); margin:0; }
.caja-banner .texto-banner a{ color:var(--verde-3); font-weight:600; }
.ajustes-cookies{
  border-top:1px solid var(--linea-inv); margin-top:16px; padding-top:14px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.opcion-cookie{
  display:flex; gap:10px; align-items:flex-start; font-size:13.5px;
  background:var(--tinta-2); border:1px solid var(--linea-inv); border-radius:12px; padding:12px 14px;
}
.opcion-cookie input{ width:17px; height:17px; margin-top:2px; accent-color:var(--verde-3); flex:none; }
.opcion-cookie b{ display:block; font-size:13.5px; }
.opcion-cookie small{ color:var(--texto-inv-2); line-height:1.4; display:block; }
.botones-banner{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; justify-content:flex-end; }
.botones-banner .btn{ font-size:14px; padding:.7em 1.3em; }
.enlace-cookies{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:13px; color:var(--texto-inv-2); text-decoration:none;
}
.enlace-cookies:hover{ color:#fff; }
@media (max-width:760px){
  .banner-cookies{ left:10px; right:10px; bottom:10px; }
  .ajustes-cookies{ grid-template-columns:1fr; }
  .botones-banner{ justify-content:stretch; }
  .botones-banner .btn{ flex:1; justify-content:center; }
}

/* Selector de idioma */
.selector-idioma{ display:inline-flex; align-items:center; gap:5px; font:700 13px/1 var(--f-texto); color:var(--texto-inv-2); margin-right:2px; }
.selector-idioma a{ color:var(--texto-inv-2); padding:6px 3px; }
.selector-idioma a:hover{ color:#fff; }
.selector-idioma a[aria-current="true"]{ color:var(--verde-3); }
.menu-movil .selector-idioma{ margin-left:auto; align-self:center; }
.menu-movil .selector-idioma a{ border-bottom:0; padding:6px 4px; display:inline; }

/* Anexo DPA dentro de documentos legales */
.doc-legal h3{ font-size:19px; margin:1.8em 0 .6em; scroll-margin-top:96px; }
.doc-legal h4{ font-family:var(--f-texto); font-weight:800; font-size:15.5px; margin:1.5em 0 .5em; }
#anexo-dpa{ border-top:2px solid var(--linea); margin-top:2.2em; padding-top:1.4em; scroll-margin-top:96px; }

/* ======================= PÁGINA DE ALTA ======================= */
.lista-beneficios{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px; }
.lista-beneficios li{ display:flex; gap:11px; align-items:flex-start; color:var(--texto-inv-2); font-size:15.5px; }
.lista-beneficios svg{ width:18px; height:18px; color:var(--verde-3); flex:none; margin-top:3px; }
.lista-beneficios small{ display:block; color:var(--texto-inv-2); opacity:.75; font-size:13px; }

.tarjeta-alta{ padding:28px; }
.tarjeta-alta h2{ font-size:22px; margin-bottom:6px; }
.tarjeta-alta .ayuda{ font-size:13px; color:var(--texto-suave); margin-top:6px; display:block; }
/* Indicador de pasos (registro.js marca los completados con .hecho) */
.tarjeta-alta .pasos{ display:flex; gap:8px; list-style:none; margin:0 0 22px; padding:0; counter-reset:none; }
.tarjeta-alta .pasos li{
  flex:1; text-align:center; font:700 12.5px/1.3 var(--f-texto);
  padding:9px 6px; border-radius:999px; background:rgba(14,20,27,.06); color:var(--texto-suave);
}
.tarjeta-alta .pasos li::before{ content:none; }
.tarjeta-alta .pasos li[aria-current="step"]{ background:rgba(85,126,37,.12); color:var(--verde); }
.tarjeta-alta .pasos li.hecho{ background:var(--verde); color:#fff; }

.seg-toggle{ display:flex; gap:10px; margin-bottom:18px; border:0; padding:0; }
.seg-toggle label{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  border:1.5px solid var(--linea); border-radius:12px; padding:12px 8px;
  font-weight:700; font-size:15px; cursor:pointer; color:var(--texto-suave);
}
.seg-toggle label.activo{ border-color:var(--verde); background:rgba(85,126,37,.08); color:var(--verde); }
.seg-toggle input{ position:absolute; width:1px; height:1px; opacity:0; }
.seg-toggle label:has(input:focus-visible){ outline:3px solid var(--verde-3); outline-offset:2px; }

.tarjeta-alta form label, .tarjeta-alta #paso2 label{
  font:700 13px/1 var(--f-texto); letter-spacing:.04em; text-transform:uppercase;
  color:var(--texto-suave); display:block; margin-bottom:8px;
}
.tarjeta-alta input:not([type=checkbox]):not([type=radio]), .tarjeta-alta select{
  width:100%; border:1.5px solid var(--linea); border-radius:12px; background:var(--marfil);
  font:500 16px/1.4 var(--f-texto); color:var(--texto); padding:11px 13px; outline:none;
}
.tarjeta-alta input:focus, .tarjeta-alta select:focus{ border-color:var(--verde); }
.tarjeta-alta input.es-error, .tarjeta-alta select.es-error{ border-color:#b3261e; }
.error-txt{ color:#8f1d16; font-size:13px; font-weight:600; margin-top:6px; }
.tarjeta-alta .campo-alta{ margin-bottom:16px; }
.dos-columnas-alta{ display:grid; grid-template-columns:1.4fr 1fr; gap:14px; }
.tres-columnas-alta{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }

.tel-grupo{ display:flex; gap:8px; align-items:stretch; }
.tel-grupo select{ max-width:190px; flex:none; }
.tel-grupo .pref{
  display:flex; align-items:center; padding:0 12px; border-radius:12px;
  background:rgba(14,20,27,.06); font-weight:800; color:var(--texto); white-space:nowrap;
}
.tel-grupo input{ flex:1; min-width:0; }

.alerta{ border-radius:12px; padding:12px 16px; margin:0 0 16px; font-size:14.5px; font-weight:600; }
.alerta-error{ background:rgba(179,38,30,.07); color:#8f1d16; border:1px solid rgba(179,38,30,.3); }
.alerta-ok{ background:rgba(85,126,37,.1); color:#3c5b17; border:1px solid rgba(85,126,37,.35); }
.alerta-info{ background:rgba(194,145,58,.09); color:#6e5426; border:1px solid rgba(194,145,58,.4); }

.cap-box img{ border:1px solid var(--linea); border-radius:10px; background:#fff; display:block; margin:6px 0; }
.otp{ display:flex; gap:8px; margin:8px 0 18px; }
.tarjeta-alta .otp input{ width:50px; height:58px; text-align:center; font:700 22px/1 var(--f-texto); padding:0; }
.check-alta{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--texto-suave); margin:16px 0 4px; cursor:pointer; }
.check-alta input{ width:18px !important; height:18px; margin-top:2px; accent-color:var(--verde); flex:none; }
.check-alta span{ font:inherit; text-transform:none; letter-spacing:0; color:inherit; margin:0; }
.boton-texto{ background:none; border:0; padding:0; cursor:pointer; font:600 14px/1.4 var(--f-texto); color:var(--verde); text-align:left; }
.boton-texto:hover{ color:var(--verde-2); text-decoration:underline; }

@media (max-width:700px){
  .dos-columnas-alta, .tres-columnas-alta{ grid-template-columns:1fr; }
  .tel-grupo{ flex-wrap:wrap; }
  .tel-grupo select{ max-width:none; width:100%; }
  .tarjeta-alta .otp input{ width:100%; height:52px; }
}