/* Web de la app Nea · Neotel 2000 S.L. */

@font-face { font-family: "Baloo Da 2"; font-weight: 600; font-display: swap; src: url("fonts/baloo-da-2-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Baloo Da 2"; font-weight: 700; font-display: swap; src: url("fonts/baloo-da-2-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Baloo Da 2"; font-weight: 800; font-display: swap; src: url("fonts/baloo-da-2-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url("fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/dm-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-display: swap; src: url("fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url("fonts/dm-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  --pizarra: #1C2A2F;
  --naranja: #EC7025;
  --naranja-texto: #B04E17;
  --fondo: #FFFFFF;
  --fondo-2: #F2F5F4;
  --linea: #DDE4E2;
  --texto: #1C2A2F;
  --texto-2: #4B5B60;
  --verde: #2F9E5B;
  --rojo: #D9493F;
  --ancho: 1120px;
  --lectura: 68ch;
  --radio: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #141E22;
    --fondo-2: #1C2A2F;
    --linea: #2E3E44;
    --texto: #EEF2F1;
    --texto-2: #A9B7BB;
    --naranja-texto: #F0874A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #141E22;
  --fondo-2: #1C2A2F;
  --linea: #2E3E44;
  --texto: #EEF2F1;
  --texto-2: #A9B7BB;
  --naranja-texto: #F0874A;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 1.0625rem/1.6 "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--naranja-texto); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--naranja); color: var(--pizarra); }

h1, h2, h3 { font-family: "Baloo Da 2", "DM Sans", system-ui, sans-serif; line-height: 1.08; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(2.6rem, 6.2vw, 4.6rem); line-height: .98; letter-spacing: -.025em; }
h2 { font-weight: 700; font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-weight: 700; font-size: 1.3rem; line-height: 1.2; }
p { margin: 0 0 1em; }
p, li { text-wrap: pretty; }

.saltar { position: absolute; left: 16px; top: -100px; background: var(--naranja); color: var(--pizarra); padding: 10px 16px; border-radius: 10px; font-weight: 700; z-index: 10; }
.saltar:focus { top: 12px; }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
@media (max-width: 560px) { .envoltura { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } }

/* Cabecera */
.cabecera { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--fondo) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; }
.cabecera.con-linea, .pagina-texto .cabecera { border-bottom-color: var(--linea); }
.cabecera .envoltura { display: flex; align-items: center; gap: 20px; height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); }
.marca svg { width: 38px; height: 38px; flex: none; }
.marca span { font-family: "Baloo Da 2", sans-serif; font-weight: 800; font-size: 1.75rem; line-height: 1; letter-spacing: -.02em; padding-top: 4px; }
.menu { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.menu a { color: var(--texto); text-decoration: none; font-weight: 500; padding: 8px 12px; border-radius: 10px; }
.menu a:hover { background: var(--fondo-2); }
.menu a[aria-current="page"] { color: var(--naranja-texto); }
.menu .boton { margin-left: 6px; }
@media (max-width: 560px) { .menu .ocultar-movil { display: none; } .menu a { padding: 8px 9px; } }

/* Botones */
.boton { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; border-radius: 999px; padding: 12px 22px; line-height: 1.2; border: 2px solid transparent; }
.boton-principal { background: var(--naranja); color: var(--pizarra); }
.boton-principal:hover { background: #F27E37; }
.boton-borde { border-color: var(--linea); color: var(--texto); }
.boton-borde:hover { border-color: var(--texto-2); }
.menu a.boton { padding: 8px 16px; border-radius: 999px; }
.menu a.boton:hover { background: #F27E37; }

/* Portada */
.portada { padding: 56px 0 40px; overflow: clip; }
.portada .envoltura { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 48px; align-items: center; }
.portada h1 { max-width: 11ch; }
.portada .entrada { font-size: 1.2rem; color: var(--texto-2); max-width: 38ch; margin: 22px 0 30px; }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.portada .nota { margin-top: 18px; font-size: .95rem; color: var(--texto-2); }
@media (max-width: 860px) {
  .portada { padding-top: 28px; }
  .portada .envoltura { grid-template-columns: 1fr; gap: 40px; }
}

/* Móvil de la portada: llamada entrante con la pantalla bloqueada */
.escena { position: relative; display: grid; place-items: center; min-height: 560px; }
.escena::before { content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--naranja) 22%, transparent), transparent); }
.onda { position: absolute; width: 330px; height: 330px; border-radius: 50%; border: 2px solid var(--naranja); opacity: 0; animation: onda 3.6s cubic-bezier(.2,.6,.3,1) infinite; }
.onda:nth-of-type(2) { animation-delay: 1.2s; }
.onda:nth-of-type(3) { animation-delay: 2.4s; }
@keyframes onda { 0% { transform: scale(.7); opacity: .55; } 100% { transform: scale(1.55); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .onda { animation: none; opacity: .18; } .onda:nth-of-type(2) { transform: scale(1.2); opacity: .1; } .onda:nth-of-type(3) { display: none; } }

.movil { position: relative; width: 272px; height: 556px; border-radius: 46px; padding: 11px; background: #0E1518; box-shadow: 0 0 0 2px #2B393E, 0 40px 80px -30px rgba(14, 21, 24, .55); }
.pantalla { position: relative; height: 100%; border-radius: 36px; overflow: hidden; color: #fff; background: linear-gradient(170deg, #2A3D44 0%, #1C2A2F 48%, #3A2418 100%); display: flex; flex-direction: column; align-items: center; padding: 26px 22px 34px; text-align: center; }
.pantalla .camara { width: 86px; height: 24px; border-radius: 14px; background: #0E1518; margin-bottom: 26px; }
.pantalla .hora { font-family: "Baloo Da 2", sans-serif; font-weight: 600; font-size: 3.4rem; line-height: 1; letter-spacing: -.02em; opacity: .92; }
.pantalla .fecha { font-size: .82rem; opacity: .7; margin-top: 4px; }
.pantalla .avatar { width: 74px; height: 74px; border-radius: 50%; margin: 40px 0 14px; display: grid; place-items: center; background: #EC7025; color: #1C2A2F; font: 800 1.9rem/1 "Baloo Da 2", sans-serif; padding-top: 4px; }
.pantalla .quien { font-family: "Baloo Da 2", sans-serif; font-weight: 700; font-size: 1.55rem; line-height: 1.1; }
.pantalla .cola { font-size: .86rem; opacity: .78; margin-top: 4px; }
.pantalla .via { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: .78rem; background: rgba(255,255,255,.1); padding: 5px 11px 5px 6px; border-radius: 999px; }
.pantalla .via svg { width: 18px; height: 18px; }
.pantalla .botones { margin-top: auto; width: 100%; display: flex; justify-content: space-between; padding: 0 10px; }
.pantalla .accion { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .78rem; opacity: .9; }
.pantalla .circulo { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; }
.pantalla .circulo svg { width: 28px; height: 28px; }
.pantalla .rechazar .circulo { background: var(--rojo); }
.pantalla .rechazar svg { transform: rotate(135deg); }
.pantalla .contestar .circulo { background: var(--verde); }
@media (max-width: 860px) { .escena { min-height: 520px; } }
@media (max-width: 400px) { .movil { transform: scale(.9); } .escena { min-height: 500px; } }

/* Secciones */
.seccion { padding: 88px 0; }
.seccion-gris { background: var(--fondo-2); }
.cabeza { max-width: 640px; margin-bottom: 44px; }
.cabeza p { color: var(--texto-2); font-size: 1.12rem; margin-top: 14px; }

.ventajas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.ventajas li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 26px 0; border-top: 1px solid var(--linea); }
.ventajas .icono { width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--naranja) 16%, var(--fondo)); color: var(--naranja-texto); display: grid; place-items: center; }
.seccion-gris .ventajas .icono { background: color-mix(in srgb, var(--naranja) 16%, var(--fondo-2)); }
.ventajas .icono svg { width: 24px; height: 24px; }
.ventajas h3 { margin: 2px 0 6px; }
.ventajas p { margin: 0; color: var(--texto-2); }
@media (max-width: 760px) { .ventajas { grid-template-columns: 1fr; } }

.pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.pasos li { counter-increment: paso; position: relative; padding-top: 74px; }
.pasos li::before { content: counter(paso); position: absolute; top: 0; left: 0; width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--naranja); color: var(--naranja-texto); display: grid; place-items: center; font: 800 1.6rem/1 "Baloo Da 2", sans-serif; padding-top: 4px; }
.pasos li:not(:last-child)::after { content: ""; position: absolute; top: 27px; left: 70px; right: -14px; height: 2px; background: repeating-linear-gradient(90deg, var(--linea) 0 8px, transparent 8px 14px); }
.pasos h3 { margin-bottom: 8px; }
.pasos p { color: var(--texto-2); margin: 0; }
@media (max-width: 760px) {
  .pasos { grid-template-columns: 1fr; gap: 34px; }
  .pasos li { padding: 4px 0 0 76px; min-height: 54px; }
  .pasos li:not(:last-child)::after { top: 64px; left: 26px; right: auto; bottom: -26px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--linea) 0 8px, transparent 8px 14px); }
}

.descargar { margin-top: 52px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.tienda { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--texto); border: 2px solid var(--linea); border-radius: 16px; padding: 10px 18px 10px 14px; min-width: 210px; background: var(--fondo); }
a.tienda:hover { border-color: var(--texto-2); }
.tienda svg { width: 28px; height: 28px; color: var(--naranja-texto); flex: none; }
.tienda small { display: block; font-size: .8rem; color: var(--texto-2); line-height: 1.2; }
.tienda strong { display: block; font-size: 1.05rem; line-height: 1.25; }
.tienda.pronto { border-style: dashed; }
.tienda.resaltada { border-color: var(--naranja); }

/* Franja oscura para empresas */
.franja { background: var(--pizarra); color: #EEF2F1; padding: 76px 0; }
.franja .envoltura { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: end; }
.franja h2 { color: #fff; max-width: 18ch; }
.franja p { color: #C3CFD2; max-width: 52ch; margin: 16px 0 0; font-size: 1.1rem; }
.franja .acciones { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.franja a:not(.boton) { color: #F0874A; }
.franja .boton-borde { color: #fff; border-color: #3E5157; }
.franja .boton-borde:hover { border-color: #A9B7BB; }
.franja a.tel { font: 700 1.5rem/1 "Baloo Da 2", sans-serif; color: #fff; text-decoration: none; }
@media (max-width: 760px) { .franja .envoltura { grid-template-columns: 1fr; align-items: start; } }

/* Páginas de texto (soporte, privacidad, legal) */
.titular { padding: 56px 0 36px; border-bottom: 1px solid var(--linea); }
.titular h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); line-height: 1.02; }
.titular p { color: var(--texto-2); font-size: 1.15rem; max-width: 58ch; margin: 16px 0 0; }
.titular .fecha { font-size: .95rem; margin-top: 14px; }

.texto-legal { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 56px; padding-top: 44px; padding-bottom: 96px; }
.indice { position: sticky; top: 92px; align-self: start; font-size: .95rem; }
.indice strong { display: block; margin-bottom: 10px; font-family: "Baloo Da 2", sans-serif; font-size: 1.05rem; }
.indice ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--linea); }
.indice a { display: block; padding: 5px 0 5px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--texto-2); text-decoration: none; }
.indice a:hover { color: var(--texto); border-left-color: var(--naranja); }
@media (max-width: 860px) { .texto-legal { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; } .indice { position: static; } }

.prosa { max-width: var(--lectura); }
.prosa h2 { font-size: 1.65rem; margin: 52px 0 14px; scroll-margin-top: 90px; }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { margin: 28px 0 8px; font-size: 1.15rem; }
.prosa ul { padding-left: 1.2em; margin: 0 0 1.1em; }
.prosa li { margin: .35em 0; }
.prosa li::marker { color: var(--naranja); }
.prosa strong { font-weight: 700; }
.tabla { width: 100%; overflow-x: auto; margin: 6px 0 22px; border: 1px solid var(--linea); border-radius: var(--radio); }
.tabla table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--linea); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla th { background: var(--fondo-2); font-weight: 700; }
.tabla td:first-child { font-weight: 500; }
.ficha { margin: 6px 0 22px; display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; padding: 18px 20px; border-radius: var(--radio); background: var(--fondo-2); }
.ficha dt { color: var(--texto-2); }
.ficha dd { margin: 0; font-weight: 500; }
@media (max-width: 520px) { .ficha { grid-template-columns: 1fr; gap: 2px; } .ficha dd { margin-bottom: 10px; } }

/* Soporte */
.contacto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 40px 0 8px; }
.canal { display: block; text-decoration: none; color: var(--texto); padding: 22px; border-radius: var(--radio); border: 2px solid var(--linea); }
a.canal:hover { border-color: var(--naranja); }
.canal small { display: block; color: var(--texto-2); font-size: .92rem; }
.canal strong { display: block; font: 700 1.5rem/1.15 "Baloo Da 2", sans-serif; margin: 6px 0 4px; }
.canal span { font-size: .95rem; color: var(--texto-2); }
.canal.destacado { background: var(--pizarra); border-color: var(--pizarra); color: #fff; }
.canal.destacado small, .canal.destacado span { color: #C3CFD2; }
@media (max-width: 760px) { .contacto { grid-template-columns: 1fr; } }
.aviso { padding: 16px 20px; border-left: 4px solid var(--naranja); background: var(--fondo-2); border-radius: 0 var(--radio) var(--radio) 0; margin: 14px 0 8px; }
.aviso p:last-child { margin: 0; }

.preguntas { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 56px; padding-top: 48px; padding-bottom: 96px; }
.preguntas .grupo + .grupo { margin-top: 44px; }
.preguntas h2 { font-size: 1.5rem; margin-bottom: 10px; scroll-margin-top: 90px; }
details { border-bottom: 1px solid var(--linea); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 18px 2px; font-weight: 700; font-size: 1.08rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--naranja-texto); border-bottom: 2px solid var(--naranja-texto); transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s; }
details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
@media (prefers-reduced-motion: reduce) { summary::after { transition: none; } }
details .respuesta { padding: 0 2px 20px; max-width: var(--lectura); color: var(--texto-2); }
details .respuesta strong { color: var(--texto); }
details .respuesta ol, details .respuesta ul { padding-left: 1.25em; margin: 0 0 1em; }
@media (max-width: 860px) { .preguntas { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; } }

/* Alta por QR */
.alta { padding: 64px 0 96px; }
.alta .envoltura { max-width: 640px; }
.alta h1 { font-size: clamp(2.2rem, 5vw, 3.1rem); line-height: 1.02; }
.alta p.entrada { color: var(--texto-2); font-size: 1.15rem; margin: 18px 0 30px; }
.alta .descargar { margin-top: 0; }
.alta .despues { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linea); }

/* Pie */
.pie { border-top: 1px solid var(--linea); padding: 44px 0 36px; font-size: .95rem; color: var(--texto-2); }
.pie .envoltura { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
.pie strong { display: block; color: var(--texto); margin-bottom: 8px; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin: 4px 0; }
.pie a { color: var(--texto-2); text-decoration: none; }
.pie a:hover { color: var(--texto); text-decoration: underline; }
.pie .marca span { font-size: 1.4rem; }
.pie .marca svg { width: 32px; height: 32px; }
.pie .legal { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--linea); font-size: .88rem; }
@media (max-width: 760px) { .pie .envoltura { grid-template-columns: 1fr; gap: 22px; } }

/* 404 */
.perdido { padding: 110px 0 140px; }
.perdido h1 { max-width: 14ch; }
.perdido p { color: var(--texto-2); font-size: 1.15rem; margin: 18px 0 28px; max-width: 46ch; }

@media print {
  .cabecera, .pie, .indice, .saltar { display: none; }
  .texto-legal { display: block; padding: 0; }
  body { font-size: 11pt; }
}
.alta .despues h2 { font-size: 1.45rem; margin-bottom: 10px; }
.alta .despues ol { padding-left: 1.25em; margin: 0 0 1em; }
.alta .despues li { margin: .3em 0; }
.alta .despues li::marker { color: var(--naranja-texto); font-weight: 700; }
a[href^="tel:"] { white-space: nowrap; }