@charset "UTF-8";
/* ============================================================================
   NOTINFY — hoja de estilos propia
   ============================================================================

   QUE ES ESTO
   -----------
   La capa de marca que va ENCIMA de Bootstrap 5. Bootstrap trae la rejilla, el
   menu de movil, el acordeon y poco mas; aqui esta lo que hace que la pagina
   parezca de NOTINFY y no una plantilla.

   ORDEN DE CARGA (importa)
   ------------------------
     1. bootstrap.min.css
     2. notinfy.css      <- este fichero

   Nada de aqui pide un fichero de fuera: ni tipografias, ni iconos, ni
   imagenes. Los iconos son SVG escritos dentro del HTML y los fondos son
   degradados de CSS. Por eso la pagina no depende de ninguna red externa.

   COMO SE CAMBIA EL COLOR DE LA MARCA
   -----------------------------------
   Todo el color sale de las variables de abajo. Cambiar --nt-marca y
   --nt-marca-2 cambia la pagina entera. No hay ningun color suelto por el
   resto del fichero: si aparece uno, es de Bootstrap y se sobrescribe aqui.
   ============================================================================ */


/* ============================================================================
   1. TOKENS
   ============================================================================ */
:root {
  /* --- Fondos oscuros (cabecera, portada, pie) --- */
  --nt-tinta-900: #060a16;
  --nt-tinta-800: #0a1122;
  --nt-tinta-700: #101a33;
  --nt-tinta-600: #1a2547;

  /* --- Texto --- */
  --nt-texto: #16203a;
  --nt-texto-suave: #55617d;
  --nt-texto-claro: #e8ecf7;
  --nt-texto-claro-suave: #a5b0cc;

  /* --- Fondos claros --- */
  --nt-fondo: #ffffff;
  --nt-fondo-suave: #f4f7ff;
  --nt-linea: #e3e9f5;

  /* --- Marca --- */
  --nt-marca: #3b5bf5;
  --nt-marca-2: #7b4dff;
  --nt-acento: #1fc8e3;
  --nt-bien: #10b981;
  --nt-aviso: #f59e0b;

  --nt-degradado: linear-gradient(135deg, var(--nt-marca) 0%, var(--nt-marca-2) 100%);

  /* --- Formas --- */
  --nt-radio: 18px;
  --nt-radio-chico: 12px;
  --nt-radio-pastilla: 999px;
  --nt-sombra: 0 10px 30px rgba(15, 23, 42, .08);
  --nt-sombra-alta: 0 22px 50px rgba(15, 23, 42, .14);
  --nt-sombra-marca: 0 14px 34px rgba(59, 91, 245, .28);

  /* --- Medidas --- */
  --nt-ancho: 1160px;
  --nt-alto-cabecera: 72px;

  /* --- Tipografia: solo tipografias del sistema. Cero peticiones de red. --- */
  --nt-fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Bootstrap: que sus botones, enlaces y focos usen el color de la marca. */
:root {
  --bs-primary: #3b5bf5;
  --bs-primary-rgb: 59, 91, 245;
  --bs-link-color: #2f49d8;
  --bs-link-color-rgb: 47, 73, 216;
  --bs-link-hover-color: #7b4dff;
  --bs-body-color: #16203a;
  --bs-body-font-family: var(--nt-fuente);
  --bs-border-radius: 12px;
  --bs-focus-ring-color: rgba(59, 91, 245, .35);
}


/* ============================================================================
   2. BASE
   ============================================================================ */
html { scroll-behavior: smooth; }

/* La cabecera es fija: sin esto, al saltar a una seccion el titulo queda
   debajo de ella. */
html { scroll-padding-top: calc(var(--nt-alto-cabecera) + 12px); }

body {
  font-family: var(--nt-fuente);
  color: var(--nt-texto);
  background: var(--nt-fondo);
  /* Bootstrap pone su propio interlineado; este es algo mas suelto, que es lo
     que se lee comodo en parrafos largos. */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { line-height: 1.18; font-weight: 700; letter-spacing: -.015em; }

/* Los tamanos de los titulos se atan al ancho de la pantalla con clamp(): un
   solo valor sirve para movil, tableta y escritorio, sin tres reglas. */
.nt-h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.5rem); font-weight: 800; }
.nt-h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem); font-weight: 800; }
.nt-h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }

.nt-entradilla { font-size: clamp(1.02rem, .97rem + .35vw, 1.18rem); color: var(--nt-texto-suave); }
.nt-sobre { font-size: clamp(1rem, .96rem + .3vw, 1.1rem); color: var(--nt-texto-suave); }

.nt-seccion { padding: clamp(3.5rem, 2rem + 6vw, 6.5rem) 0; }
.nt-seccion--suave { background: var(--nt-fondo-suave); }

.nt-ancho { max-width: var(--nt-ancho); margin-inline: auto; padding-inline: 1rem; }

/* Etiqueta pequena encima de los titulos de seccion. */
.nt-etiqueta {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nt-marca);
  background: rgba(59, 91, 245, .09);
  border-radius: var(--nt-radio-pastilla);
  padding: .35rem .85rem;
  margin-bottom: 1rem;
}

.nt-titulo-seccion { max-width: 46rem; margin-inline: auto; text-align: center; }
.nt-titulo-seccion .nt-h2 { margin-bottom: .75rem; }

/* Enlace para saltar al contenido: invisible hasta que se llega con el
   teclado. Es lo primero que encuentra quien navega con Tab. */
.nt-saltar {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  background: #fff;
  color: var(--nt-marca);
  font-weight: 700;
  padding: .7rem 1.1rem;
  border-radius: var(--nt-radio-chico);
  box-shadow: var(--nt-sombra-alta);
  transition: top .15s ease;
}
.nt-saltar:focus { top: 1rem; }

/* Foco visible y consistente. No se quita nunca: es lo que permite navegar
   con el teclado sin perderse. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--nt-marca);
  outline-offset: 3px;
  border-radius: 6px;
}
.nt-hero a:focus-visible,
.nt-pie a:focus-visible { outline-color: var(--nt-acento); }

/* Respeta a quien ha pedido menos movimiento en su sistema. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ============================================================================
   3. BOTONES
   ============================================================================ */
.btn-nt {
  --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(59, 91, 245, .35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-weight: 650;
  border-radius: var(--nt-radio-pastilla);
  padding: .78rem 1.5rem;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease,
              color .18s ease, border-color .18s ease;
}
.btn-nt:hover { transform: translateY(-2px); }
.btn-nt:active { transform: translateY(0); }

.btn-nt-primario { background: var(--nt-degradado); color: #fff; box-shadow: var(--nt-sombra-marca); }
.btn-nt-primario:hover,
.btn-nt-primario:focus { color: #fff; box-shadow: 0 18px 40px rgba(59, 91, 245, .4); }

.btn-nt-claro { background: #fff; color: var(--nt-marca); border-color: rgba(59, 91, 245, .25); }
.btn-nt-claro:hover { color: var(--nt-marca-2); border-color: var(--nt-marca-2); box-shadow: var(--nt-sombra); }

/* Para fondos oscuros (portada, pie). */
.btn-nt-cristal {
  background: rgba(255, 255, 255, .09);
  color: #fff;
  border-color: rgba(255, 255, 255, .34);
  backdrop-filter: blur(6px);
}
.btn-nt-cristal:hover { background: rgba(255, 255, 255, .17); color: #fff; border-color: #fff; }

.btn-nt-grande { padding: .95rem 1.9rem; font-size: 1.03rem; }


/* ============================================================================
   4. CABECERA
   ============================================================================ */
.nt-cabecera {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  min-height: var(--nt-alto-cabecera);
  background: rgba(6, 10, 22, .72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  transition: background-color .25s ease, box-shadow .25s ease;
}
/* Cuando la pagina se ha desplazado, la cabecera se vuelve opaca: sobre el
   fondo claro de las secciones, el cristal translucido se lee mal. */
.nt-cabecera.es-solida {
  background: rgba(6, 10, 22, .94);
  box-shadow: 0 8px 30px rgba(6, 10, 22, .34);
}

.nt-marca {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: .06em;
  color: #fff;
  text-decoration: none;
}
.nt-marca:hover { color: #fff; }
.nt-marca__icono { width: 34px; height: 34px; flex: 0 0 auto; }

.nt-nav .nav-link {
  color: var(--nt-texto-claro-suave);
  font-weight: 600;
  font-size: .95rem;
  padding: .55rem .8rem;
  border-radius: 8px;
}
.nt-nav .nav-link:hover,
.nt-nav .nav-link:focus { color: #fff; }
.nt-nav .nav-link.activo { color: #fff; }
/* El subrayado del enlace de la seccion en la que se esta. */
.nt-nav .nav-link.activo::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: .3rem;
  border-radius: 2px;
  background: var(--nt-degradado);
}

/* El boton de abrir el menu en movil: Bootstrap lo pinta muy claro. */
.nt-cabecera .navbar-toggler {
  border-color: rgba(255, 255, 255, .28);
  padding: .4rem .6rem;
}
.nt-cabecera .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25); }
/* El icono de la hamburguesa, dibujado con un SVG incrustado en el HTML. */
.nt-cabecera .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E");
}

@media (max-width: 991.98px) {
  .nt-nav {
    background: rgba(6, 10, 22, .97);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--nt-radio);
    padding: .75rem;
    margin-top: .75rem;
  }
  .nt-nav .nav-link { padding: .7rem .8rem; }
  .nt-nav .nav-link.activo::after { display: none; }
}


/* ============================================================================
   5. PORTADA CON SLIDER
   ============================================================================ */
.nt-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(59, 91, 245, .38), transparent 60%),
    radial-gradient(900px 560px at 88% 8%, rgba(123, 77, 255, .32), transparent 62%),
    radial-gradient(700px 500px at 50% 120%, rgba(31, 200, 227, .18), transparent 60%),
    var(--nt-tinta-900);
  color: var(--nt-texto-claro);
  padding-top: calc(var(--nt-alto-cabecera) + clamp(2rem, 1rem + 4vw, 4.5rem));
  padding-bottom: clamp(3rem, 2rem + 5vw, 6rem);
}

/* Rejilla decorativa del fondo, hecha con CSS (ninguna imagen). */
.nt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%);
  pointer-events: none;
}
.nt-hero > * { position: relative; z-index: 1; }

.nt-hero__texto { color: var(--nt-texto-claro-suave); max-width: 40rem; }
.nt-hero__acciones { display: flex; flex-wrap: wrap; gap: .9rem; }

/* --- La pila del slider -------------------------------------------------
   Los tres textos se ponen uno encima de otro en la MISMA celda de una
   rejilla. Asi la caja mide lo que mide el mas alto y, al pasar de uno a
   otro, no hay ningun salto de altura: solo se cruzan las opacidades. Con
   posiciones absolutas el alto habria que fijarlo a mano y en movil se
   cortaria el texto. */
.nt-hero__pila { display: grid; margin-bottom: 1.5rem; }
.nt-hero__diapo {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease, visibility .55s;
}
.nt-hero__diapo.activa { opacity: 1; visibility: visible; transform: none; }

.nt-hero__punto {
  width: 34px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, .28);
  transition: background-color .2s ease, width .2s ease;
}
.nt-hero__punto[aria-selected="true"] { background: #fff; width: 52px; }
.nt-hero__punto:hover { background: rgba(255, 255, 255, .6); }

.nt-hero__flecha {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  transition: background-color .18s ease, border-color .18s ease;
}
.nt-hero__flecha:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }

/* --- La maqueta del telefono, hecha con CSS ---------------------------- */
.nt-maqueta {
  width: min(320px, 78vw);
  margin-inline: auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 34px;
  padding: 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}
.nt-maqueta__pantalla {
  background: #0d1428;
  border-radius: 24px;
  padding: 14px;
  display: grid;
  gap: 10px;
}
/* Cada aviso de la maqueta. */
.nt-aviso {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  padding: .7rem .8rem;
}
.nt-aviso__icono {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nt-degradado);
  color: #fff;
}
.nt-aviso__titulo { font-size: .84rem; font-weight: 700; color: #fff; }
.nt-aviso__texto { font-size: .76rem; color: var(--nt-texto-claro-suave); line-height: 1.45; }
.nt-aviso__hora { font-size: .68rem; color: rgba(255, 255, 255, .4); white-space: nowrap; }

/* Una franja de datos bajo la portada. */
.nt-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
/* Cada dato de la franja. min-width:0 es lo que impide que un texto largo
   ("Inmediato o programado") estire su columna y descuadre la rejilla entera;
   sin eso, la rejilla se sale de la pantalla en un movil estrecho. */
.nt-dato { min-width: 0; }
.nt-dato__valor {
  font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
.nt-dato__pie { font-size: .84rem; color: var(--nt-texto-claro-suave); }


/* ============================================================================
   6. TARJETAS
   ============================================================================ */
.nt-tarjeta {
  height: 100%;
  background: #fff;
  border: 1px solid var(--nt-linea);
  border-radius: var(--nt-radio);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  box-shadow: var(--nt-sombra);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.nt-tarjeta:hover { transform: translateY(-4px); box-shadow: var(--nt-sombra-alta); border-color: rgba(59, 91, 245, .3); }

.nt-tarjeta__icono {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(59, 91, 245, .14), rgba(123, 77, 255, .14));
  color: var(--nt-marca);
  margin-bottom: 1rem;
}
.nt-tarjeta__icono svg { width: 26px; height: 26px; }

.nt-lista-marca { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.nt-lista-marca li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; }
.nt-lista-marca svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: .28rem; color: var(--nt-bien); }


/* ============================================================================
   7. COMO FUNCIONA (los cuatro pasos)
   ============================================================================ */
.nt-pasos { counter-reset: paso; display: grid; gap: 1.25rem; }
.nt-paso { position: relative; display: flex; gap: 1.1rem; align-items: flex-start; }
.nt-paso__numero {
  flex: 0 0 auto;
  counter-increment: paso;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  background: var(--nt-degradado);
  box-shadow: var(--nt-sombra-marca);
}
.nt-paso__numero::before { content: counter(paso); }
/* La linea que une un paso con el siguiente. */
.nt-paso + .nt-paso::before {
  content: "";
  position: absolute;
  left: 22px;
  top: -1.25rem;
  width: 2px;
  height: 1.25rem;
  background: linear-gradient(180deg, rgba(59, 91, 245, .1), rgba(123, 77, 255, .45));
}


/* ============================================================================
   8. PLANES
   ============================================================================ */
.nt-plan {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid var(--nt-linea);
  border-radius: var(--nt-radio);
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  box-shadow: var(--nt-sombra);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.nt-plan:hover { transform: translateY(-5px); box-shadow: var(--nt-sombra-alta); }
/* El plan destacado. Se marca con la clase, no por su posicion: mover las
   tarjetas de sitio no cambia cual queda resaltada. */
.nt-plan--destacado { border-color: var(--nt-marca); box-shadow: var(--nt-sombra-marca); }
.nt-plan__cinta {
  position: absolute;
  top: 0;
  right: 0;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--nt-degradado);
  padding: .3rem .8rem;
  border-radius: 0 var(--nt-radio) 0 var(--nt-radio-chico);
}
.nt-plan__envoltorio { position: relative; height: 100%; }

.nt-plan__nombre { font-size: 1.25rem; font-weight: 800; margin-bottom: .15rem; }
.nt-plan__lema { font-size: .9rem; color: var(--nt-texto-suave); min-height: 2.6rem; }
.nt-plan__precio {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin: 1rem 0 .25rem;
}
.nt-plan__cifra { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; }
.nt-plan__periodo { font-size: .9rem; color: var(--nt-texto-suave); }
.nt-plan__limite { font-size: .84rem; color: var(--nt-texto-suave); }
.nt-plan__cuerpo { flex: 1 1 auto; margin: 1.1rem 0 1.4rem; }
.nt-plan__titulillo {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nt-texto-suave);
  margin-bottom: .6rem;
}

/* El aviso de que los limites y el reparto por plan siguen sin aprobar. Se ve,
   no se esconde: es informacion, no letra pequena. (La pastilla que ponia
   "Precio provisional" en cada tarjeta se quito el dia que los precios los paso
   a poner el servidor.) */
.nt-nota-provisional {
  border: 1px dashed rgba(245, 158, 11, .55);
  background: rgba(254, 243, 199, .5);
  border-radius: var(--nt-radio);
  padding: 1rem 1.15rem;
  font-size: .93rem;
  color: #7c4a03;
}


/* ============================================================================
   9. PREGUNTAS FRECUENTES
   ============================================================================ */
.nt-faq .accordion-item {
  border: 1px solid var(--nt-linea);
  border-radius: var(--nt-radio-chico) !important;
  margin-bottom: .75rem;
  overflow: hidden;
}
.nt-faq .accordion-button {
  font-weight: 650;
  color: var(--nt-texto);
  background: #fff;
  padding: 1.05rem 1.15rem;
  font-size: 1rem;
}
.nt-faq .accordion-button:not(.collapsed) {
  color: var(--nt-marca);
  background: rgba(59, 91, 245, .05);
  box-shadow: none;
}
.nt-faq .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(59, 91, 245, .25); }
.nt-faq .accordion-body { color: var(--nt-texto-suave); padding-top: .25rem; }


/* ============================================================================
   10. CONTACTO
   ============================================================================ */
.nt-contacto-tarjeta {
  background: #fff;
  border: 1px solid var(--nt-linea);
  border-radius: var(--nt-radio);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  box-shadow: var(--nt-sombra);
  height: 100%;
}
/* Un dato que todavia no existe se marca como tal, en vez de inventarlo. */
.nt-pendiente {
  border: 1px dashed rgba(148, 163, 184, .8) !important;
  background: rgba(148, 163, 184, .07);
}
.nt-pendiente__marca {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #475569;
  background: #e2e8f0;
  border-radius: var(--nt-radio-pastilla);
  padding: .15rem .55rem;
}


/* ============================================================================
   10 bis. PAGINAS LEGALES
   ============================================================================
   Privacidad y terminos: texto largo. Se limita el ancho de la columna porque
   una linea de 200 caracteres no hay quien la lea, y se separan los titulos
   para que se puedan seguir de un vistazo. */
.nt-documento { max-width: 44rem; margin-inline: auto; }
.nt-documento h2 {
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  margin-top: clamp(2.25rem, 1.5rem + 2vw, 3.25rem);
  margin-bottom: .75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--nt-linea);
}
.nt-documento h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.5rem; }
.nt-documento p, .nt-documento li { color: var(--nt-texto-suave); }
.nt-documento ul { padding-left: 1.2rem; }
.nt-documento li { margin-bottom: .45rem; }

/* El enlace "volver a la web" de la cabecera de las paginas legales. */
.nt-nav-volver {
  color: var(--nt-texto);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
}
.nt-nav-volver:hover { color: var(--nt-marca); text-decoration: underline; }

/* Pie reducido, para las paginas que no llevan el pie entero. */
.nt-pie--sencillo .nt-pie__legal { border-top: 0; margin-top: 0; padding-bottom: 2rem; }


/* ============================================================================
   11. PIE
   ============================================================================ */
.nt-pie { background: var(--nt-tinta-900); color: var(--nt-texto-claro-suave); padding-top: clamp(3rem, 2rem + 4vw, 4.5rem); }
.nt-pie h2, .nt-pie h3 { color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: .02em; }
.nt-pie a { color: var(--nt-texto-claro-suave); text-decoration: none; }
.nt-pie a:hover { color: #fff; text-decoration: underline; }
.nt-pie__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: .93rem; }
.nt-pie__marca { display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-weight: 800; font-size: 1.2rem; letter-spacing: .06em; }
.nt-pie__redes { display: flex; gap: .5rem; }
.nt-pie__red {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nt-texto-claro-suave);
}
.nt-pie__red:hover { color: #fff; border-color: #fff; }
/* Mientras no haya redes de verdad, los huecos no son enlaces: se dibujan con
   el borde discontinuo de "pendiente" y no reaccionan al raton, para que nadie
   los tome por botones que no funcionan. */
span.nt-pie__red { border-style: dashed; }
.nt-pie__legal {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 2.5rem;
  padding: 1.25rem 0;
  font-size: .86rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
}


/* ============================================================================
   12. NOTI — el asistente (boton flotante y ventana)
   ============================================================================ */
.nt-noti-lanzador {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.15rem .8rem .85rem;
  border: 0;
  border-radius: var(--nt-radio-pastilla);
  background: var(--nt-degradado);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  box-shadow: 0 16px 38px rgba(59, 91, 245, .42);
  transition: transform .18s ease, box-shadow .18s ease;
}
.nt-noti-lanzador:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(59, 91, 245, .5); }
.nt-noti-lanzador__icono { width: 30px; height: 30px; flex: 0 0 auto; }
/* El latido del icono, muy discreto, y una sola vez cada pocos segundos. */
.nt-noti-lanzador__icono { animation: nt-latido 5s ease-in-out 2s infinite; }
@keyframes nt-latido {
  0%, 88%, 100% { transform: scale(1); }
  92% { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .nt-noti-lanzador__icono { animation: none; }
}

/* Sin JavaScript el lanzador no sirve para nada: mejor no ensenarlo. La clase
   la quita notinfy.js en cuanto arranca. */
.nt-sin-js .nt-noti-lanzador,
.nt-sin-js .nt-noti-panel { display: none !important; }

.nt-noti-panel {
  position: fixed;
  right: 1.25rem;
  bottom: 5.6rem;
  z-index: 1045;
  width: min(380px, calc(100vw - 2.5rem));
  max-height: min(620px, calc(100dvh - 8rem));
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--nt-linea);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(6, 10, 22, .3);
  overflow: hidden;
  transform-origin: bottom right;
  animation: nt-abrir .22s ease-out;
}
@keyframes nt-abrir {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.nt-noti-panel[hidden] { display: none; }

.nt-noti-cabecera {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1rem;
  background: var(--nt-degradado);
  color: #fff;
}
.nt-noti-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nt-noti-nombre { font-weight: 800; line-height: 1.2; }
.nt-noti-estado { font-size: .78rem; opacity: .92; }
.nt-noti-accion {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nt-noti-accion:hover { background: rgba(255, 255, 255, .26); }

.nt-noti-cuerpo {
  padding: 1rem;
  overflow-y: auto;
  flex: 1 1 auto;
  background: var(--nt-fondo-suave);
  display: grid;
  gap: .85rem;
  align-content: start;
}
.nt-noti-burbuja {
  background: #fff;
  border: 1px solid var(--nt-linea);
  border-radius: 16px 16px 16px 4px;
  padding: .85rem 1rem;
  font-size: .93rem;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
}
.nt-noti-burbuja p:last-child { margin-bottom: 0; }
/* El aviso de que la IA todavia no esta. Va dentro de la conversacion, no en
   letra pequena al pie: es lo primero que hay que saber. */
.nt-noti-aviso {
  font-size: .86rem;
  background: rgba(59, 91, 245, .07);
  border: 1px dashed rgba(59, 91, 245, .45);
  border-radius: 14px;
  padding: .8rem .9rem;
  color: #26326b;
}
.nt-noti-atajos { display: flex; flex-wrap: wrap; gap: .5rem; }
.nt-noti-atajo {
  font-size: .85rem;
  font-weight: 650;
  text-decoration: none;
  color: var(--nt-marca);
  background: #fff;
  border: 1px solid rgba(59, 91, 245, .3);
  border-radius: var(--nt-radio-pastilla);
  padding: .4rem .85rem;
}
.nt-noti-atajo:hover { background: rgba(59, 91, 245, .08); color: var(--nt-marca-2); }

.nt-noti-pie {
  border-top: 1px solid var(--nt-linea);
  background: #fff;
  padding: .7rem .85rem .85rem;
}
.nt-noti-compositor { display: flex; gap: .5rem; align-items: center; }
.nt-noti-compositor input {
  border-radius: var(--nt-radio-pastilla);
  border: 1px solid var(--nt-linea);
  background: var(--nt-fondo-suave);
  padding: .6rem .95rem;
  font-size: .92rem;
  width: 100%;
}
.nt-noti-compositor input:disabled { background: #eef2f9; color: #94a3b8; }
.nt-noti-enviar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: #cbd5e1;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nt-noti-compositor__nota { font-size: .74rem; color: var(--nt-texto-suave); margin: .5rem 0 0; }

/* En movil el panel ocupa el ancho menos un margen, y el lanzador se queda
   solo con el icono: la pastilla con texto taparia media pantalla. */
@media (max-width: 575.98px) {
  .nt-noti-lanzador { padding: .75rem; right: 1rem; bottom: 1rem; }
  .nt-noti-lanzador__texto { display: none; }
  .nt-noti-panel {
    right: .5rem;
    left: .5rem;
    bottom: 5rem;
    width: auto;
    max-height: calc(100dvh - 7rem);
  }
}


/* ============================================================================
   13. ANIMACIONES DE ENTRADA
   ============================================================================ */
/* Se anima solo el desplazamiento y la opacidad, que son propiedades que el
   navegador mueve sin recalcular la pagina. Nada de animar anchos ni sombras:
   eso es lo que hace que una pagina se sienta lenta. */
.nt-aparece { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.nt-aparece.visible { opacity: 1; transform: none; }
/* Si el navegador no sabe animar (o el guion no ha corrido), el contenido se
   ve igual: la clase solo la pone el JavaScript al confirmar que puede. */
@media (prefers-reduced-motion: reduce) {
  .nt-aparece { opacity: 1; transform: none; }
}


/* ============================================================================
   14. IMPRESION
   ============================================================================ */
@media print {
  .nt-cabecera, .nt-noti-lanzador, .nt-noti-panel, .nt-hero__flecha, .nt-hero__punto { display: none !important; }
  body { color: #000; }
}


/* ============================================================================
   15. FORMULARIO DE REGISTRO (registro.html)
   ============================================================================
   Lo que hace falta para pedir el alta de un comercio: campos, la eleccion del
   plan y los mensajes. Nada de esto lleva color suelto: todo sale de los tokens
   de arriba, que es lo que permite cambiar la marca tocando dos variables.

   El formulario NO se manda solo. Lo manda registro.js con fetch, y por eso la
   pagina no tiene boton de "enviar" con recarga: si la pagina se recargara, el
   mensaje que contesta el servidor -que es el que dice que falta- se perderia.
   ============================================================================ */

/* Ocultar de verdad. Se usa en vez del atributo `hidden` porque `hidden` lo
   anula cualquier `display` puesto en el CSS, y aqui medio bloque es rejilla. */
.nt-oculto { display: none !important; }

/* --- El formulario entero ------------------------------------------------- */
.nt-formulario { display: grid; gap: 1.5rem; }

/* Cada apartado -la empresa, el acceso, el plan- con su titulo. */
.nt-grupo { border: 0; padding: 0; margin: 0; min-width: 0; }
.nt-grupo__titulo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--nt-texto);
  padding: 0;
  margin-bottom: .9rem;
}
.nt-grupo__titulo svg { width: 20px; height: 20px; color: var(--nt-marca); flex: 0 0 auto; }

/* --- Un campo ------------------------------------------------------------- */
.nt-campo__rotulo {
  display: block;
  font-weight: 650;
  font-size: .95rem;
  color: var(--nt-texto);
  margin-bottom: .3rem;
}
/* Lo que hay que rellenar se dice una vez por campo, y se ve: un formulario del
   que no se sabe que es obligatorio se rellena dos veces. */
.nt-campo__obligatorio {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #475569;
  background: #e2e8f0;
  border-radius: var(--nt-radio-pastilla);
  padding: .1rem .45rem;
  vertical-align: .08rem;
}
.nt-campo__pista { font-size: .85rem; color: var(--nt-texto-suave); margin: .35rem 0 0; }
.nt-campo__fallo { font-size: .85rem; font-weight: 600; color: #b42318; margin: .35rem 0 0; }

/* El campo. Se estilan los tres -texto, correo y telefono- con la misma clase:
   dos campos que se ven igual tienen que comportarse igual. */
.nt-entrada {
  display: block;
  width: 100%;
  font: inherit;
  color: var(--nt-texto);
  background: #fff;
  border: 1px solid var(--nt-linea);
  border-radius: var(--nt-radio-chico);
  padding: .68rem .85rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.nt-entrada::placeholder { color: #9aa5bd; }
.nt-entrada:focus {
  outline: 0;
  border-color: var(--nt-marca);
  box-shadow: 0 0 0 .2rem rgba(59, 91, 245, .18);
}
/* El navegador marca asi lo que no ha pasado su propia comprobacion. */
.nt-entrada:invalid:not(:placeholder-shown) { border-color: rgba(217, 45, 32, .6); }
.nt-entrada[type="file"] { padding: .5rem .6rem; }
/* Un ejemplo dentro de una pista: monoespaciado, que es lo que deja ver que
   "J-12345678-9" es un dato y no una frase. */
.nt-ejemplo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  background: var(--nt-fondo-suave);
  border: 1px solid var(--nt-linea);
  border-radius: 6px;
  padding: .02rem .3rem;
  white-space: nowrap;
}

/* --- Elegir plan ---------------------------------------------------------- */
/* Cuatro opciones, cada una con su radio. Se ve cual esta elegida y se puede
   pulsar en cualquier parte de la tarjeta: en el movil, un radio de 13 px es
   dificil de acertar. */
.nt-eleccion { display: grid; gap: .6rem; }
.nt-eleccion__opcion {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2rem .7rem;
  align-items: start;
  border: 1px solid var(--nt-linea);
  border-radius: var(--nt-radio-chico);
  background: #fff;
  padding: .8rem .9rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.nt-eleccion__opcion:hover { border-color: rgba(59, 91, 245, .45); }
.nt-eleccion__opcion:focus-within { box-shadow: 0 0 0 .2rem rgba(59, 91, 245, .18); }
.nt-eleccion__opcion:has(input:checked) {
  border-color: var(--nt-marca);
  background: rgba(59, 91, 245, .05);
}
.nt-eleccion__opcion input {
  grid-row: span 2;
  width: 1.05rem;
  height: 1.05rem;
  margin: .2rem 0 0;
  accent-color: var(--nt-marca);
}
.nt-eleccion__nombre { font-weight: 650; }
.nt-eleccion__lema { font-size: .88rem; color: var(--nt-texto-suave); }

/* --- Mensajes ------------------------------------------------------------- */
/* Lo que contesta el servidor sale tal cual, dentro de una de estas cajas: es
   la unica forma de que quien rellena el formulario lea la frase que le
   corresponde -hay una por cada cosa que puede estar mal-. */
.nt-mensaje {
  border: 1px solid;
  border-radius: var(--nt-radio-chico);
  padding: .85rem 1rem;
  font-size: .93rem;
}
.nt-mensaje--bien { background: rgba(16, 185, 129, .08); border-color: rgba(16, 185, 129, .45); color: #065f46; }
.nt-mensaje--fallo { background: rgba(217, 45, 32, .06); border-color: rgba(217, 45, 32, .40); color: #912018; }
.nt-mensaje--ojo { background: rgba(245, 158, 11, .10); border-color: rgba(245, 158, 11, .50); color: #7c4a03; }

/* La referencia del alta: se lee en voz alta por telefono y se copia a mano, asi
   que va espaciada y en monoespaciada. */
.nt-referencia {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
  word-break: break-all;
}

/* --- Los documentos ya mandados ------------------------------------------ */
.nt-documentos { display: grid; gap: .5rem; }
.nt-documentos__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .6rem;
  border: 1px solid var(--nt-linea);
  border-radius: var(--nt-radio-chico);
  background: var(--nt-fondo-suave);
  padding: .55rem .7rem;
}
.nt-documentos__nombre { font-weight: 600; font-size: .92rem; word-break: break-word; }
.nt-documentos__detalle { font-size: .82rem; color: var(--nt-texto-suave); }
.nt-documentos__marca {
  margin-left: auto;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #065f46;
  background: rgba(16, 185, 129, .14);
  border-radius: var(--nt-radio-pastilla);
  padding: .1rem .5rem;
}

/* En el movil, el aviso de la derecha de cada documento baja a su propia linea:
   apretado contra el nombre, se lee como si fuera parte de el. */
@media (max-width: 575.98px) {
  .nt-documentos__marca { margin-left: 0; }
}