/* =============================================================================
   Negociando.es — hoja de estilos unica
   1 Tokens · 2 Reset · 3 Utilidades · 4 Tipografia · 5 Componentes
   6 Secciones · 7 Efectos · 8 Responsive · 9 Movimiento reducido
   ========================================================================== */

/* =============================================================
   1. Tokens
   ============================================================= */
/* Sin esto, el navegador no sabe que la pagina es oscura y pinta en CLARO lo
   que dibuja el: la barra de desplazamiento, los controles de formulario y,
   sobre todo, el relleno automatico (autofill), que deja el campo casi blanco
   con texto casi blanco. Declararlo lo resuelve de golpe en todos ellos. */
:root { color-scheme: dark; }

:root {
  /* ---------------------------------------------------------------------
     Paleta oscura. Los NOMBRES se conservan del registro anterior para no
     tocar 800 lineas de reglas; lo que cambia es a que apuntan:
       --bg / --bg-2   fondo de pagina y fondo alterno (antes papel)
       --papel         superficie elevada: tarjetas, formulario (antes blanco)
       --tinta         texto principal (antes casi negro, ahora casi blanco)
       --oscuro        se invierte: la banda de contraste ahora es CLARA
     Todos los pares texto/fondo estan medidos: ninguno baja de 4,5:1.
     --------------------------------------------------------------------- */
  --bg:            #08090B;
  --bg-2:          #0C0E12;
  --papel:         #101318;
  --papel-2:       #161B23;
  --oscuro:        #050608;   /* panel mas profundo que la pagina */
  --oscuro-2:      #0A0C10;

  --tinta:         #F2F5F8;   /* 18,2:1 sobre --bg */
  --tinta-suave:   #B4BECB;   /* 10,6:1 */
  --tinta-tenue:   #9AA6B4;   /*  8,1:1 */
  --tinta-clara:   #1E242D;

  --acento:        #3BE58B;   /* 12,1:1 sobre --bg */
  --acento-ink:    #3BE58B;
  --acento-suave:  rgba(59, 229, 139, .09);
  --acento-borde:  rgba(59, 229, 139, .28);
  --acento-tinta:  #031B10;   /* texto sobre el acento: 10,9:1 */
  --frio:          #45D6FF;   /* segundo acento, solo en degradados y focos */
  --verde:         #3BE58B;
  --verde-burbuja: rgba(59, 229, 139, .13);

  --linea:         #1E242D;
  --linea-fuerte:  #2A323E;

  --display: "Space Grotesk", "Instrument Sans", system-ui, sans-serif;
  --sans:    "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Esquinas generosas y pildoras: el registro ya no es editorial */
  --radio:    12px;
  --radio-l:  16px;
  --radio-xl: 20px;
  --radio-px: 999px;

  /* Vuelve la profundidad: sobre fondo oscuro la da la sombra, no la raya */
  --sombra:      0 18px 44px -22px rgba(0, 0, 0, .9);
  --sombra-l:    0 2px 10px -4px rgba(0, 0, 0, .7);
  --sombra-ac:   0 10px 30px -10px rgba(59, 229, 139, .55);
  --sombra-azul: none;

  --canal:    1180px;
  --margen:   16px;

  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-soft:   cubic-bezier(.25, .46, .45, .94);
}

/* =============================================================
   2. Reset y base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  tab-size: 2;
}

body {
  background: var(--bg);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ul, ol { list-style: none; padding: 0; }

h1, h2 {
  font-family: var(--display);
  font-weight: 700;          /* la grotesca sí necesita peso; y va apretada */
  letter-spacing: -.03em;
  line-height: 1.02;
  letter-spacing: -.012em;
  text-wrap: balance;
}
h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.012em;
  text-wrap: balance;
}
/* La cursiva de la serif es el énfasis; el color se reserva para lo que decide */
/* Space Grotesk no trae cursiva: el navegador la falsearia inclinando las
   letras, que en una grotesca se nota y queda barato. El enfasis lo lleva
   el color. */
h1 em, h2 em { font-style: normal; color: var(--acento); }

::selection { background: var(--acento); color: var(--acento-tinta); }

:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 3px;
  border-radius: 6px;
}

/* =============================================================
   3. Utilidades
   ============================================================= */
.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 9999;
  padding: .7rem 1.1rem; border-radius: 10px;
  background: var(--acento); color: var(--acento-tinta); font-weight: 600;
}
.skip-link:focus { top: 16px; }

.contenedor {
  width: min(100% - (var(--margen) * 2), var(--canal));
  margin-inline: auto;
}
.contenedor--estrecho { width: min(100% - (var(--margen) * 2), 760px); }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

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

/* =============================================================
   4. Tipografia
   ============================================================= */
.cejilla {
  display: inline-flex; align-items: baseline; gap: .5rem;
  font-size: .74rem; font-weight: 500; line-height: 1.4;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--acento-ink);
}
.cejilla--claro { color: var(--acento); }

.punto-vivo {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--acento); flex: none; align-self: center;
  box-shadow: 0 0 0 0 rgba(0, 103, 255, .55);
  animation: latido 2.4s var(--ease-soft) infinite;
}
.punto-vivo--verde { background: var(--verde); box-shadow: 0 0 0 0 rgba(31, 168, 85, .5); }
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.titular { max-width: 54ch; margin-bottom: 2.75rem; }
.titular h2 { font-size: clamp(1.85rem, 1.1rem + 3vw, 2.9rem); margin-top: .85rem; }
.titular-bajada {
  margin-top: 1.1rem; max-width: 56ch;
  font-size: 1.05rem; color: var(--tinta-suave);
}
.titular--centrado { margin-inline: auto; text-align: center; max-width: 50ch; }
.titular--centrado .titular-bajada { margin-inline: auto; }

/* =============================================================
   5. Componentes
   ============================================================= */

/* --- Botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.45rem;
  border-radius: var(--radio-px);
  min-height: 44px;
  font-family: var(--sans);
  font-size: .95rem; font-weight: 500; letter-spacing: 0;
  text-align: center;
  transition: transform .35s var(--ease-out), background-color .25s var(--ease-out),
              box-shadow .35s var(--ease-out), border-color .25s var(--ease-out);
  will-change: transform;
}
.btn--primario {
  background: var(--acento); color: var(--acento-tinta); font-weight: 600;
  box-shadow: 0 0 0 0 rgba(59, 229, 139, 0);
}
.btn--primario:hover {
  background: #57EE9D; transform: translateY(-2px); box-shadow: var(--sombra-ac);
}
.btn--fantasma {
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--linea-fuerte);
  box-shadow: var(--sombra);
}
.btn--fantasma:hover { border-color: var(--acento); color: var(--tinta); transform: translateY(-2px); }
.btn--grande { padding: 1.05rem 1.8rem; font-size: 1.03rem; }
.btn--bloque { display: flex; width: 100%; }
.btn--nav { display: none; padding: .62rem 1.1rem; font-size: .9rem; }

/* --- Navegacion --- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8, 9, 11, .92);
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out),
              box-shadow .3s var(--ease-out);
}
@supports (backdrop-filter: blur(14px)) {
  .nav { background: rgba(8, 9, 11, .78); backdrop-filter: blur(14px) saturate(160%); }
}
.nav.is-scrolled {
  border-bottom-color: var(--linea);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9);
}
.nav-cuerpo {
  width: min(100% - (var(--margen) * 2), var(--canal));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 68px;
}

.marca { display: grid; line-height: 1.15; }
.marca-texto {
  font-family: var(--display); font-weight: 700;
  font-size: 1.22rem; letter-spacing: -.035em;
}
.marca-punto { color: var(--acento); }
.marca-lema {
  font-size: .7rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-tenue);
}

/* Menu: casilla oculta + etiqueta, para que abra y cierre sin JavaScript */
.menu { position: relative; }
.menu-boton {
  cursor: pointer;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--linea-fuerte); background: var(--papel);
  transition: border-color .25s var(--ease-out);
}
.menu-barras { display: grid; gap: 4px; }
.menu-barras i {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--tinta);
  transition: transform .3s var(--ease-out), opacity .2s var(--ease-out);
}
.menu-check:checked ~ .menu-boton { border-color: var(--acento); }
.menu-check:checked ~ .menu-boton .menu-barras i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-check:checked ~ .menu-boton .menu-barras i:nth-child(2) { opacity: 0; }
.menu-check:checked ~ .menu-boton .menu-barras i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-check:focus-visible ~ .menu-boton { outline: 3px solid var(--acento); outline-offset: 3px; }

.menu-lista {
  position: absolute; right: 0; top: calc(100% + 10px);
  display: none; gap: .25rem; min-width: 220px; padding: .6rem;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra-l);
}
.menu-check:checked ~ .menu-lista { display: grid; }
.menu-lista a {
  padding: .6rem .75rem; border-radius: 10px;
  font-weight: 500; color: var(--tinta-suave);
}
.menu-lista a:hover { background: var(--acento-suave); color: var(--acento-ink); }
/* Acceso al portal de clientes: con borde de acento, para que no parezca una seccion mas. */
.menu-lista a.menu-acceso { color: var(--acento-ink); border: 1px solid var(--acento-borde); }

/* --- Movil de la portada --- */
.fono { margin: 0; display: grid; gap: .9rem; justify-items: center; }
.fono-marco {
  position: relative; width: min(100%, 340px);
  padding: 0 0 1rem;
  background: var(--papel);
  border: 1px solid var(--linea-fuerte);
  border-radius: 28px;
  box-shadow: var(--sombra);
  overflow: hidden;
}
.fono-muesca {
  width: 110px; height: 22px; margin: 8px auto 0;
  background: #000; border-radius: 0 0 12px 12px;
}
.fono-cabecera {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem; margin-top: 8px;
  background: var(--papel); border-bottom: 1px solid var(--linea);
}
.fono-avatar {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--acento); color: var(--acento-tinta);
  font-family: var(--display); font-weight: 700; font-size: .82rem;
}
.fono-quien { display: grid; line-height: 1.3; }
.fono-quien strong { font-size: .95rem; }
.fono-quien small {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .76rem; color: var(--tinta-tenue);
}
.fono-pie { font-size: .8rem; color: var(--tinta-tenue); text-align: center; max-width: 34ch; }

.chat {
  display: grid; gap: .55rem;
  padding: 1rem .85rem;
  min-height: 330px;
  background:
    var(--bg-2);
}
.msg {
  --burbuja: var(--papel);
  position: relative; width: fit-content; max-width: 85%;
  padding: .55rem .75rem .35rem;
  background: var(--burbuja);
  border-radius: 12px;
  border: 1px solid var(--linea);
  font-size: .9rem; line-height: 1.45;
}
.msg--cliente { justify-self: start; border-bottom-left-radius: 4px; }
.msg--agente  { justify-self: end; border-bottom-right-radius: 4px; --burbuja: var(--acento-suave); }
.msg time {
  display: block; text-align: right;
  font-size: .66rem; color: var(--tinta-tenue); margin-top: .1rem;
}

/* "escribiendo..." en la cabecera, como en WhatsApp: asi la pagina no da saltos */
.fono-quien small .puntitos { display: inline-flex; gap: 3px; margin-left: 1px; }
.fono-quien small .puntitos i {
  width: 4px; height: 4px; border-radius: 50%; background: var(--verde);
  animation: puntitos 1.2s var(--ease-soft) infinite;
}
.fono-quien small .puntitos i:nth-child(2) { animation-delay: .18s; }
.fono-quien small .puntitos i:nth-child(3) { animation-delay: .36s; }
@keyframes puntitos {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-2px); }
}

/* --- Tarjetas --- */
.rejilla { display: grid; gap: 1.1rem; }

.nota, .tarjeta, .linea, .plan {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-l);
  padding: 1.6rem;
  transition: border-color .3s var(--ease-out), transform .45s var(--ease-out);
}
.nota h3, .tarjeta h3, .linea h3, .plan h3 { font-size: 1.12rem; }
.nota p, .tarjeta p { margin-top: .55rem; color: var(--tinta-suave); font-size: .96rem; }
.tarjeta:hover, .linea:hover { transform: translateY(-2px); border-color: var(--acento); }

.icono {
  width: 26px; height: 26px; margin-bottom: 1rem;
  fill: none; stroke: var(--tinta-suave); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}

.linea p { margin-top: .6rem; color: var(--tinta-suave); font-size: .95rem; }
.linea ul { margin-top: 1.1rem; display: grid; gap: .5rem; }
.linea li {
  position: relative; padding-left: 1.35rem;
  font-size: .92rem; color: var(--tinta-suave);
}
.linea li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--tinta-tenue); opacity: .55;
}

/* --- Pasos --- */
.pasos { display: grid; gap: 1rem; counter-reset: paso; }
.paso {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
  padding: 1.5rem;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio-l); box-shadow: var(--sombra);
}
.paso-n {
  font-family: var(--display); font-weight: 700; font-size: 1.9rem; letter-spacing: -.02em;
  color: var(--acento); opacity: .75; letter-spacing: 0;
}
.paso-cuerpo h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: 1.15rem; }
.paso-cuerpo p { margin-top: .6rem; color: var(--tinta-suave); font-size: .97rem; }
.plazo {
  padding: .22rem .6rem; border-radius: var(--radio);
  background: var(--acento-suave); color: var(--acento-ink);
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}

/* --- Planes --- */
.planes { align-items: start; }
.plan { position: relative; display: flex; flex-direction: column; }
.plan--destacado {
  border-color: var(--acento);
  border-width: 2px;
}
.plan-cinta {
  position: absolute; top: -12px; left: 1.6rem;
  padding: .26rem .75rem; border-radius: var(--radio);
  background: var(--acento); color: var(--acento-tinta);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}
.plan-precio {
  margin-top: .8rem;
  font-family: var(--display); font-weight: 700; font-size: 2.6rem; letter-spacing: -.02em;
  letter-spacing: -.015em; line-height: 1;
}
.plan-precio span {
  display: block; margin-top: .2rem;
  font-family: var(--sans); font-size: .82rem; font-weight: 500;
  letter-spacing: 0; color: var(--tinta-tenue);
}
.plan-resumen { margin-top: .9rem; color: var(--tinta-suave); font-size: .95rem; }
.plan-lista { margin: 1.2rem 0 1.6rem; display: grid; gap: .55rem; }
.plan-lista li {
  position: relative; padding-left: 1.6rem;
  font-size: .92rem; color: var(--tinta-suave);
}
.plan-lista li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: 15px; height: 9px;
  border-left: 2px solid var(--acento); border-bottom: 2px solid var(--acento);
  transform: rotate(-45deg) scale(.8); transform-origin: center;
}
.plan .btn { margin-top: auto; }
.nota-precios {
  margin-top: 1.8rem; max-width: 62ch;
  font-size: .87rem; color: var(--tinta-tenue);
}

/* --- Preguntas frecuentes --- */
.faqs { display: grid; gap: .7rem; }
.faq {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  transition: border-color .3s var(--ease-out);
}
.faq[open] { border-color: var(--acento); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.3rem;
  font-family: var(--sans); font-weight: 600; font-size: 1rem;
  letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--acento); border-bottom: 2px solid var(--acento);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .3s var(--ease-out);
}
.faq[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq-cuerpo { padding: 0 1.3rem 1.25rem; }
.faq-cuerpo p { color: var(--tinta-suave); font-size: .96rem; }

/* --- Formulario --- */
.formulario {
  display: grid; gap: 1rem;
  padding: 1.6rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radio-xl);
}
.campo { display: grid; gap: .4rem; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: .88rem; font-weight: 600; }
.opcional { font-weight: 400; color: var(--tinta-tenue); }
.campo input, .campo textarea {
  width: 100%; padding: .8rem .95rem;
  font: inherit; font-size: .95rem; color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.campo input::placeholder, .campo textarea::placeholder { color: rgba(255, 255, 255, .62); }
.campo input:focus, .campo textarea:focus {
  outline: none; border-color: var(--acento);
  background: rgba(255, 255, 255, .11);
  box-shadow: 0 0 0 3px rgba(59, 229, 139, .28);
}
.campo textarea { resize: vertical; min-height: 110px; }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: #ff8f7a; }

.check { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400; font-size: .88rem; }
.check input { width: 18px; height: 18px; flex: none; margin-top: .18rem; accent-color: var(--acento); }
.check a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }

.formulario-aviso { margin-top: .8rem; font-size: .9rem; min-height: 1.2em; text-align: center; }
.formulario-aviso.es-error { color: #ffb4a2; }
.formulario-aviso.es-ok { color: #9ff0bd; }

.contacto-alternativa {
  margin-top: 1.4rem; text-align: center;
  font-size: .93rem; color: rgba(255, 255, 255, .62);
}
.contacto-alternativa a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }


/* --- Criterios: para quien si / para quien no --- */
.criterio {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio-l); padding: 1.6rem;
  box-shadow: var(--sombra);
  border-top: 3px solid var(--acento);
}
.criterio--no { border-top-color: var(--tinta-tenue); }
.criterio h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.1rem; }
.criterio h3::before {
  content: ""; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--acento-suave);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F401F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size: 13px; background-position: center; background-repeat: no-repeat;
}
.criterio--no h3::before {
  background-color: var(--tinta-clara);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a788c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
}
.criterio ul { margin-top: 1.1rem; display: grid; gap: .7rem; }
.criterio li {
  position: relative; padding-left: 1.3rem;
  font-size: .95rem; color: var(--tinta-suave);
}
.criterio li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--acento); opacity: .6;
}
.criterio--no li::before { background: var(--tinta-tenue); opacity: .45; }
.criterio a { color: var(--acento-ink); text-decoration: underline; text-underline-offset: 3px; }

/* --- Banda que lleva de una pagina a la otra --- */
/* Este bloque tiraba de --tinta como FONDO y blanco como texto. Con la
   paleta oscura, --tinta pasa a ser casi blanco: quedaba blanco sobre
   blanco, 1,09:1, ilegible. Ahora es un panel con borde de acento. */
.puente {
  display: grid; gap: 1.3rem;
  margin-top: 2.5rem; padding: 2rem;
  background: linear-gradient(170deg, var(--papel-2), var(--papel));
  color: var(--tinta);
  border: 1px solid var(--acento-borde);
  border-radius: var(--radio-xl);
}
.puente .cejilla { color: var(--acento); }
.puente h3 { font-size: clamp(1.35rem, 1rem + 1.6vw, 1.85rem); margin-top: .6rem; }
.puente p { margin-top: .8rem; color: var(--tinta-suave); font-size: .98rem; max-width: 52ch; }
.puente .btn--fantasma {
  background: transparent; color: var(--tinta);
  border-color: var(--linea-fuerte);
}
.puente .btn--fantasma:hover { background: var(--acento-suave); color: var(--tinta); border-color: var(--acento); }
.puente-acciones { display: grid; gap: .7rem; align-content: center; }

/* --- Portada de paginas interiores: texto + tarjeta de contenido --- */
.hero--simple { padding-bottom: 2.5rem; }
.hero-texto--ancho .entradilla { max-width: 56ch; }

.hero-tarjeta {
  margin-top: 2.5rem; padding: 1.6rem;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio-l); box-shadow: var(--sombra-l);
  border-top: 3px solid var(--acento);
}
.hero-tarjeta h2 { font-size: 1.05rem; }
.hero-tarjeta ul { margin-top: 1.1rem; display: grid; gap: .85rem; }
.hero-tarjeta li {
  position: relative; padding-left: 1.7rem;
  font-size: .92rem; color: var(--tinta-suave);
}
.hero-tarjeta li strong { color: var(--tinta); font-weight: 600; }
.hero-tarjeta li::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: 15px; height: 9px;
  border-left: 2px solid var(--acento); border-bottom: 2px solid var(--acento);
  transform: rotate(-45deg) scale(.8);
}
.hero-tarjeta-pie {
  margin-top: 1.3rem; padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
  font-size: .85rem; color: var(--tinta-tenue);
}

/* =============================================================
   6. Secciones
   ============================================================= */
.hero { padding: 2.5rem 0 3.5rem; }
.hero-cuerpo {
  width: min(100% - (var(--margen) * 2), var(--canal));
  margin-inline: auto;
  display: grid; gap: 2.75rem; align-items: center;
}
.hero h1 {
  margin-top: 1rem;
  font-size: clamp(2.1rem, 1.1rem + 4.2vw, 3.7rem);
}
.entradilla {
  margin-top: 1.3rem; max-width: 52ch;
  font-size: 1.08rem; color: var(--tinta-suave);
}
.hero-acciones { display: grid; gap: .7rem; margin-top: 1.9rem; }
.hero-acciones .btn { width: 100%; }
.hero-avales {
  margin-top: 2.2rem; display: grid; gap: .65rem;
  padding-top: 1.5rem; border-top: 1px solid var(--linea);
}
.hero-avales li {
  position: relative; padding-left: 1.6rem;
  font-size: .92rem; color: var(--tinta-suave);
}
.hero-avales strong { color: var(--tinta); font-weight: 600; }
.hero-avales li::before {
  content: ""; position: absolute; left: 0; top: .32em;
  width: 15px; height: 9px;
  border-left: 2px solid var(--acento); border-bottom: 2px solid var(--acento);
  transform: rotate(-45deg) scale(.8);
}

.seccion { padding: 4rem 0; }
.seccion--claro { background: var(--bg-2); }
/* La banda de contraste ya no se invierte: sobre una pagina oscura, invertir
   a claro obligaba a reescribir el formulario entero, que estaba hecho para
   fondo oscuro. Se resuelve con un panel mas profundo y un borde de acento. */
.seccion--oscuro {
  background: radial-gradient(900px 420px at 50% 0%, rgba(59, 229, 139, .07), transparent 68%), #050608;
  color: var(--tinta);
  border-top: 1px solid var(--acento-borde);
}
.seccion--oscuro h2 { color: var(--tinta); }
.seccion--oscuro h2 em { color: var(--acento); }
.seccion--oscuro .titular-bajada { color: var(--tinta-suave); }

.escritorio {
  position: relative; margin: 0 0 2.5rem;
  border-radius: var(--radio-xl); overflow: hidden;
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-l);
}
.escritorio img { width: 100%; }
.escritorio-etiqueta {
  position: absolute; bottom: 14px;
  padding: .4rem .9rem; border-radius: var(--radio);
  font-family: var(--sans); font-size: .78rem; font-weight: 500;
  letter-spacing: .02em;
  background: rgba(8, 9, 11, .82); color: var(--tinta);
  backdrop-filter: blur(6px);
}
.escritorio-etiqueta--antes { left: 14px; }
.escritorio-etiqueta--despues { right: 14px; background: var(--acento); color: var(--acento-tinta); }

/* --- Pie --- */
.pie { background: var(--bg-2); color: var(--tinta-tenue); padding: 3rem 0 1.6rem;
       border-top: 1px solid var(--linea); }
.pie .marca-texto { color: var(--tinta); }
.pie-cuerpo { display: grid; gap: 2rem; }
.pie-marca p { margin-top: .7rem; max-width: 40ch; font-size: .92rem; }
.pie-enlaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.5rem; }
.pie-enlaces a {
  font-size: .92rem;
  border-bottom: 1px solid transparent;
  width: fit-content;
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.pie-enlaces a:hover { color: var(--tinta); border-bottom-color: var(--acento); }
.pie-linea {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  margin-top: 2.5rem; padding-top: 1.4rem;
  border-top: 1px solid var(--linea);
  font-size: .82rem; color: var(--tinta-tenue);
}

/* =============================================================
   7. Efectos
   ============================================================= */
/* La clase .js la pone un script diminuto en el <head>. Si el navegador no
   ejecuta nada, .reveal nunca se oculta y el contenido se ve igual. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.es-visible {
  opacity: 1; transform: none;
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
.js .chat .msg { opacity: 0; transform: translateY(8px) scale(.98); }
.js .chat .msg.es-visible {
  opacity: 1; transform: none;
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
}

/* =============================================================
   8. Responsive
   ============================================================= */
@media (min-width: 540px) {
  :root { --margen: 24px; }
  .hero-acciones { display: flex; flex-wrap: wrap; }
  .hero-acciones .btn { width: auto; }
  .formulario { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.2rem; padding: 2rem; }
  .pie-enlaces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 720px) {
  .seccion { padding: 5.5rem 0; }
  .rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; }
  .puente { grid-template-columns: 1.6fr auto; align-items: center; gap: 2.5rem; padding: 2.5rem 3rem; }
  .hero-avales--fila { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
  .hero { padding: 3.5rem 0 4.5rem; }
  .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paso { grid-template-columns: 64px 1fr; padding: 1.8rem 2rem; }
  .paso-n { font-size: 2rem; }
  .escritorio-etiqueta { bottom: 22px; font-size: .86rem; padding: .5rem 1.1rem; }
  .escritorio-etiqueta--antes { left: 22px; }
  .escritorio-etiqueta--despues { right: 22px; }
  .pie-cuerpo { grid-template-columns: 1.2fr 1fr; gap: 3rem; }
}

@media (min-width: 960px) {
  html { scroll-padding-top: 96px; }
  .hero--simple .hero-cuerpo { grid-template-columns: 1.25fr .75fr; align-items: start; }
  .hero--simple h1 { max-width: 18ch; }
  .hero-tarjeta { margin-top: 3.5rem; position: sticky; top: 96px; }
  .hero-cuerpo { grid-template-columns: 1.08fr .92fr; gap: 3.5rem; }
  .hero-demo { justify-self: end; }
  .rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; }
  .titular { margin-bottom: 3.25rem; }

  /* En pantalla ancha el menu se despliega en horizontal y no hace falta boton */
  .menu { display: contents; }
  .menu-boton, .menu-check { display: none; }
  .menu-lista,
  .menu-check:checked ~ .menu-lista {
    position: static; display: flex; gap: 0;
    min-width: 0; padding: 0; background: none;
    border: 0; box-shadow: none;
  }
  .menu-lista a { font-size: .92rem; padding: .5rem .45rem; }
  /* Acceso clientes no cabe en la cabecera hasta 1280 px: mientras, va en el pie */
  .menu-lista a.menu-acceso { display: none; }
  .btn--nav { display: inline-flex; }
}

@media (min-width: 1280px) {
  .seccion { padding: 6.5rem 0; }
  .hero { padding: 4.5rem 0 5.5rem; }
  .menu-lista a.menu-acceso { display: block; margin-left: .35rem; }
  /* En formacion el menu ya va justo en espanol: el acceso se queda en el pie */
  .menu-lista a.menu-solo-movil { display: none; }
}

/* =============================================================
   9. Movimiento reducido
   Solo se apaga lo intrusivo (bucles y latidos). Los fundidos y los
   desplazamientos cortos se mantienen: quitarlos empeora la lectura.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .punto-vivo { animation: none; box-shadow: none; }
  .fono-quien small .puntitos { display: none; }
  .btn:hover, .tarjeta:hover, .linea:hover { transform: none; }
}

/* =============================================================
   10. Paginas de apoyo (aviso legal, privacidad, gracias)
   ============================================================= */
.pagina-legal, .pagina-simple { min-height: 100vh; padding-top: 3rem; }
.pagina-legal .marca, .pagina-simple .marca { margin-bottom: 2.5rem; }

.pagina-legal h1, .pagina-simple h1 {
  font-size: clamp(1.9rem, 1.2rem + 3vw, 2.8rem);
}
.pagina-legal h2 {
  margin-top: 2.4rem; margin-bottom: .6rem;
  font-size: 1.18rem;
}
.pagina-legal p { margin-top: .8rem; color: var(--tinta-suave); }
.pagina-legal a:not(.btn) {
  color: var(--acento-ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.actualizado {
  margin-top: .8rem;
  font-size: .85rem; color: var(--tinta-tenue);
}
.lista-legal { margin-top: 1rem; display: grid; gap: .5rem; }
.lista-legal li {
  position: relative; padding-left: 1.2rem;
  color: var(--tinta-suave); font-size: .96rem;
}
.lista-legal li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px; border-radius: 2px; background: var(--acento);
}
.volver { margin-top: 3rem; }

.pagina-simple .marca-texto { color: #fff; }
.pagina-simple h1 { color: #fff; margin-top: 1rem; }


/* =============================================================
   11. Quién está detrás
   La foto va pequeña, en un círculo junto al título: lo que tiene que
   destacar es lo que se ofrece, no la cara (decisión de Jose, 19/10/2026).
   ============================================================= */
.quien-banda {
  position: relative;
  background: #191512;
  color: #F2EDE5;
}

.quien-cuerpo { padding: 3rem 0 3.5rem; }

.quien-cabecera { display: flex; align-items: center; gap: 1rem; }
.quien-cara {
  width: 72px; height: 72px; flex: none;
  border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(242, 237, 229, .18);
}

.quien-banda h2 {
  color: #FFFFFF;
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem);
  margin-top: 1rem;
}
.quien-banda h2 em { color: var(--acento); }
.quien-texto p {
  margin-top: 1.1rem; max-width: 62ch;
  font-size: 1.02rem; color: #D6CEC3;
}
.quien-texto .quien-cabecera p { margin-top: 0; }

/* --- El pie, sobre papel --- */
.quien-pie { background: var(--bg-2); padding: 3.5rem 0 4rem; }
.quien-pie-cuerpo { display: grid; gap: 2rem; }

.quien-credenciales { display: grid; gap: .75rem; align-content: start; }
.quien-credenciales li {
  position: relative; padding-left: 1.4rem;
  font-size: .95rem; color: var(--tinta-suave);
}
.quien-credenciales strong { color: var(--tinta); font-weight: 600; }
.quien-credenciales li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--acento); opacity: .75;
}

/* Reconocer lo que falta se destaca a propósito, no se esconde */

@media (min-width: 720px) {
  .quien-pie-cuerpo { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

@media (min-width: 960px) {
  .quien-cuerpo { padding: 4rem 0; }
  .quien-pie { padding: 4.5rem 0 5.5rem; }
}

/* =============================================================
   12. Piezas del registro oscuro
   Todo lo de aqui es nuevo: el resplandor de la portada, el selector de
   negocio del chat, la calculadora y los pasos desplegables.
   ============================================================= */

/* --- Resplandor de la portada ---
   Le quita a la pagina el aspecto de folio. Va en un pseudo-elemento fijo y
   no captura clics. Quien tenga reducida la animacion no pierde nada: no se
   mueve, solo esta. */
.hero { position: relative; }
.hero::before {
  content: ""; position: absolute; inset: -10% -5% auto -5%; height: 620px;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(620px 380px at 16% 12%, rgba(59, 229, 139, .13), transparent 64%),
    radial-gradient(700px 440px at 86% 24%, rgba(69, 214, 255, .09), transparent 64%);
}
.hero > * { position: relative; z-index: 1; }

/* --- Selector de negocio del chat ---
   Tres botones de verdad: el visitante ve SU sector en la pantalla. */
.negocios {
  display: flex; gap: .4rem; width: min(100%, 340px); margin: 0 auto .6rem;
}
.negocios button {
  flex: 1 1 0; min-height: 44px; padding: .55rem .4rem;
  background: var(--papel-2); color: var(--tinta-tenue);
  border: 1px solid var(--linea); border-radius: var(--radio);
  font-family: var(--sans); font-size: .8rem; font-weight: 600; cursor: pointer;
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out),
              background-color .2s var(--ease-out);
}
.negocios button:hover { border-color: var(--acento); color: var(--tinta); }
.negocios button[aria-pressed="true"] {
  background: var(--acento); color: var(--acento-tinta); border-color: var(--acento);
}

@keyframes burbuja {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --- Calculadora ---
   Las cuatro cifras las pone el visitante y la cuenta se imprime debajo:
   ningun dato afirmado por nosotros. */
.calculadora { display: grid; gap: 1rem; margin-top: 2.2rem; }
.calc-mandos {
  display: grid; gap: 1.4rem;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio-l); padding: 1.6rem;
}
.calc-mando label {
  display: flex; justify-content: space-between; align-items: baseline; gap: .8rem;
  font-size: .92rem; font-weight: 500; margin-bottom: .6rem;
}
.calc-mando label output {
  font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--acento);
}
.calc-mando input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 5px; border-radius: var(--radio-px);
  background: var(--papel-2); cursor: pointer;
}
.calc-mando input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--acento); border: 3px solid var(--bg); cursor: pointer;
}
.calc-mando input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--acento); border: 3px solid var(--bg); cursor: pointer;
}
.calc-mando input[type="range"]:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
.calc-marcador {
  display: grid; align-content: center; gap: .5rem;
  background: linear-gradient(170deg, var(--papel-2), var(--papel));
  border: 1px solid var(--linea); border-radius: var(--radio-l); padding: 1.8rem;
}
.calc-euros {
  font-family: var(--display); font-weight: 700; line-height: 1;
  font-size: clamp(2.4rem, 1.4rem + 4vw, 3.6rem);
  color: var(--acento); letter-spacing: -.03em;
}
.calc-que { font-size: .95rem; color: var(--tinta-suave); }
.calc-cuenta {
  margin-top: .4rem; padding-top: .9rem; border-top: 1px solid var(--linea);
  font-size: .86rem; color: var(--tinta-tenue); line-height: 1.55;
}
.calc-aviso { font-size: .8rem; color: var(--tinta-tenue); line-height: 1.55; }

/* Las tarjetas se levantan: es lo que le faltaba al registro anterior */
.tarjeta, .plan, .paso {
  transition: transform .25s var(--ease-out), border-color .25s var(--ease-out),
              box-shadow .25s var(--ease-out);
}
.tarjeta:hover, .plan:hover, .paso:hover {
  transform: translateY(-3px);
  border-color: var(--acento-borde);
  box-shadow: var(--sombra);
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta:hover, .plan:hover, .paso:hover { transform: none; }
}

@media (min-width: 860px) {
  .calculadora { grid-template-columns: 1.1fr .9fr; }
}

/* --- Caso que se puede mirar (dentro de "quién está detrás") --- */
.quien-caso {
  padding: 1.6rem 1.7rem;
  background: linear-gradient(170deg, var(--papel-2), var(--papel));
  border: 1px solid var(--acento-borde);
  border-radius: var(--radio-l);
  align-self: start;
}
.quien-caso h3 { font-size: 1.02rem; }
.quien-caso p { margin-top: .7rem; font-size: .95rem; color: var(--tinta-suave); }
.quien-caso a { color: var(--acento); border-bottom: 1px solid var(--acento-borde); }
.quien-caso a:hover { border-bottom-color: var(--acento); }
.quien-caso strong { color: var(--tinta); }
.caso-titular { font-size: 1.02rem !important; color: var(--tinta) !important; }
.caso-datos {
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .8rem;
}
.caso-datos li {
  font-size: .9rem; color: var(--tinta-tenue);
  padding-left: 1.1rem; position: relative;
}
.caso-datos li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--acento);
}
.caso-nota {
  margin-top: 1.1rem !important; padding-top: .9rem;
  border-top: 1px solid var(--linea);
  font-size: .88rem !important; color: var(--tinta-tenue) !important;
}
@media (min-width: 560px) {
  .caso-datos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
  .caso-datos li { font-size: .84rem; }
}

/* --- Selector de idioma --- */
.idiomas {
  display: flex; align-items: center; gap: .1rem; margin: 0;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
}
.idiomas a, .idiomas span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; min-height: 34px; padding: 0 .3rem;
  border-radius: var(--radio);
}
.idiomas span { color: var(--acento); background: var(--acento-suave); }
.idiomas a { color: var(--tinta-tenue); transition: color .2s var(--ease-out); }
.idiomas a:hover { color: var(--tinta); }

/* --- Trayectoria: la experiencia delante, los titulos en una linea --- */
.quien-trayectoria h3 { font-size: 1.02rem; }
.trayectoria { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 1rem; }
.trayectoria li {
  font-size: .96rem; line-height: 1.58; color: var(--tinta-suave);
  padding-left: 1.1rem; position: relative;
}
.trayectoria li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--acento);
}
.tray-dato {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--acento); margin-bottom: .2rem;
}
.trayectoria-pie {
  margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--linea);
  font-size: .86rem; line-height: 1.6; color: var(--tinta-tenue);
}

/* --- "Y a ti eso que te aporta": traduce la experiencia en ventaja --- */
.quien-aporta { grid-column: 1 / -1; margin-top: .5rem; }
.quien-aporta h3 { font-size: 1.02rem; margin-bottom: 1.1rem; }
.aporta { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.aporta li {
  background: var(--papel); border: 1px solid var(--linea);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio);
  padding: 1rem 1.2rem;
  font-size: .93rem; line-height: 1.6; color: var(--tinta-suave);
  transition: border-color .22s var(--ease-out), transform .22s var(--ease-out);
}
.aporta li:hover { border-color: var(--acento-borde); border-left-color: var(--acento); transform: translateX(2px); }
.aporta strong { display: block; color: var(--tinta); font-weight: 600; margin-bottom: .25rem; }
@media (min-width: 860px) {
  .aporta { grid-template-columns: 1fr 1fr; gap: .9rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .aporta li:hover { transform: none; } }