/* ═══════════════════════════════════════════════════════════════
   RUMBO · SOLUCIONES (06/10/2026)

   Qué hace: la web deja de ser solo de páginas. Entran Facturas en
   orden (a la venta) y el recepcionista de llamadas (próximamente),
   y la página web se queda como el servicio principal.

   Va en una hoja aparte, igual que tema-claro.css: estilos.css y el
   tema no se tocan. Se enlaza DESPUÉS de tema-claro.css en las 5
   páginas, porque reescribe algunas de sus reglas.

   La regla de color sigue mandando: sobre fondo claro el turquesa
   brillante y el dorado son FONDO, nunca letra. Como letra sobre
   claro solo el azul y el turquesa oscuro (#0D7873).
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --sombra-tarjeta:0 18px 40px rgba(14,38,63,.14),0 2px 6px rgba(14,38,63,.06);
}

/* ══ PULIDO GENERAL ══
   El botón se hunde un poco al tocarlo: confirma que la página oyó el
   clic. Y en celular el hover no levanta nada (en táctil el hover se
   dispara al tocar y deja la tarjeta "pegada" arriba). */
.btn:active{transform:scale(.97);transition-duration:.1s}
@media (hover:none){
  .btn:hover,.servicio:hover,.tarjeta:hover,.persona:hover,.lleva article:hover{transform:none}
}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--t-turquesa);outline-offset:3px}

/* ══ ETIQUETAS · "Nuevo", "Próximamente", "El principal" ══ */
.etq{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--texto);font-weight:700;font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;line-height:1;padding:.5em .85em;border-radius:999px;white-space:nowrap}
.etq--nuevo{background:var(--t-turquesa);color:var(--t-azul)}
.etq--pronto{background:var(--t-dorado);color:var(--t-dorado-tinta)}
.etq--principal{background:rgba(255,255,255,.12);color:#FFFFFF;border:1px solid rgba(255,255,255,.28)}

/* ══ HERO · EL TABLERO ══
   Sustituye al video de NAMI (Ricardo lo quitó el 06/10/2026). Tres
   tarjetas encimadas, una por servicio. Va en rejilla y no en
   position:absolute a propósito: el alto lo da el contenido, así que
   en celular no se enciman de más ni se salen. */
.tablero-col{justify-self:center;width:min(100%,440px)}
.tablero{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));padding:14px 6px 10px}
/* los corchetes de siempre (los del visor), ahora en el tablero */
.tablero::before,.tablero::after{content:"";position:absolute;width:clamp(26px,4vw,40px);height:clamp(26px,4vw,40px);
  border:2px solid var(--t-turquesa);pointer-events:none}
.tablero::before{top:-6px;left:-6px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.tablero::after{bottom:-6px;right:-6px;border-left:0;border-top:0;border-radius:0 0 6px 0}

.tb{position:relative;background:#FFFFFF;border:1px solid rgba(14,38,63,.1);border-radius:16px;
  box-shadow:var(--sombra-tarjeta);animation:tbEntra .7s var(--ease-out) both}
.tb-web{grid-column:1/11;grid-row:1;z-index:1;animation-delay:.45s}
.tb-facturas{grid-column:4/13;grid-row:2;z-index:2;margin-top:-.9rem;padding:1rem 1rem .9rem;animation-delay:.6s}
.tb-llamada{grid-column:1/11;grid-row:3;z-index:3;margin-top:-.9rem;animation-delay:.75s}
@keyframes tbEntra{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* la etiqueta de cada tarjeta, montada sobre el borde de arriba */
.tb > .etq{position:absolute;top:-.62rem;left:1rem;z-index:2}
.tb > .etq--azul{background:var(--t-azul);color:#FFFFFF}

/* tarjeta 1 · la página web, como una ventana de navegador */
.tb-cromo{display:flex;align-items:center;gap:.32rem;padding:.75rem .8rem .55rem;border-bottom:1px solid rgba(14,38,63,.08)}
.tb-cromo i{width:7px;height:7px;border-radius:50%;background:rgba(14,38,63,.16);flex:none}
.tb-url{margin-left:.45rem;display:inline-flex;align-items:center;gap:.3rem;font-size:.66rem;color:var(--t-cuerpo);
  background:#F3F6F9;border-radius:999px;padding:.28em .8em;min-width:0;white-space:nowrap}
.tb-url svg{width:10px;height:10px;color:var(--t-turquesa-txt);flex:none}
.tb-pagina{padding:.7rem .8rem 1.5rem;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem .7rem;align-items:end}
.tb-foto{order:-2;grid-column:1/-1;height:70px;border-radius:10px;position:relative;overflow:hidden;
  background:linear-gradient(130deg,#0E263F 0%,#145066 58%,#14B8B1 100%)}
.tb-foto::after{content:"Tu negocio";position:absolute;left:.75rem;bottom:.6rem;font-family:var(--display);
  font-size:.82rem;letter-spacing:-.02em;color:#FFFFFF}
.tb-lineas{display:flex;flex-direction:column;gap:.32rem;min-width:0}
.tb-lineas b{display:block;height:6px;border-radius:3px;background:#E3E9EF}
.tb-lineas b:last-child{width:62%}
.tb-wa{order:-1;display:inline-flex;align-items:center;gap:.3rem;font-family:var(--display);font-size:.62rem;letter-spacing:-.01em;
  background:var(--t-turquesa);color:var(--t-azul);border-radius:999px;padding:.45em .8em;white-space:nowrap}
.tb-wa svg{width:11px;height:11px}

/* tarjeta 2 · facturas acomodadas en su mes */
.tb-cab{display:flex;align-items:center;gap:.45rem;margin:.15rem 0 .55rem}
.tb-cab svg{width:16px;height:16px;color:var(--t-turquesa-txt);flex:none}
.tb-cab b{font-family:var(--display);font-weight:400;font-size:.78rem;letter-spacing:-.02em;color:var(--t-azul)}
.tb-cab span{margin-left:auto;font-family:var(--display);font-size:.78rem;color:var(--t-turquesa-txt);font-variant-numeric:tabular-nums}
.tb-facturas ul{list-style:none;margin:0;padding:0}
.tb-facturas li{display:flex;align-items:center;gap:.5rem;padding:.4rem 0;border-top:1px solid rgba(14,38,63,.07);
  font-size:.7rem;color:var(--t-azul)}
.tb-facturas li em{margin-left:auto;font-style:normal;font-weight:600;font-variant-numeric:tabular-nums}
.tb-ico{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;flex:none;
  font-family:var(--display);font-size:.56rem;background:var(--t-azul);color:#FFFFFF}
.tb-ico.ticket{background:#DDF4F2;color:var(--t-turquesa-txt)}
.tb-listo{display:flex;align-items:center;gap:.4rem;margin:.55rem 0 0;padding:.5rem .65rem;border-radius:10px;
  background:var(--t-mint);font-size:.66rem;font-weight:700;color:var(--t-turquesa-txt)}
.tb-listo svg{width:13px;height:13px;flex:none}

/* tarjeta 3 · la llamada, en azul para que las tres no se vean iguales */
.tb-llamada{background:var(--t-azul);border-color:var(--t-azul);display:flex;align-items:center;gap:.8rem;padding:1.05rem 1rem .95rem}
.tb-llamada b{display:block;font-family:var(--display);font-weight:400;font-size:.8rem;letter-spacing:-.02em;color:#FFFFFF}
.tb-llamada i{display:block;margin-top:.2rem;font-style:normal;font-size:.66rem;color:var(--t-claro-cuerpo)}
.tb-fono{position:relative;width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--t-turquesa);color:var(--t-azul)}
.tb-fono svg{width:17px;height:17px}
/* el anillo que late: la llamada está entrando */
.tb-fono::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--t-turquesa);
  animation:anillo 2.4s var(--ease-out) infinite}
@keyframes anillo{from{transform:scale(1);opacity:.7}to{transform:scale(1.7);opacity:0}}

@media (max-width:940px){.tablero-col{margin-top:.6rem}}
@media (max-width:380px){
  .tb-web{grid-column:1/12}
  .tb-facturas{grid-column:2/13}
  .tb-llamada{grid-column:1/12}
}

/* ══ § 01 · LOS TRES SERVICIOS ══ */
.servicios.tres{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1120px}
@media (max-width:960px){.servicios.tres{grid-template-columns:1fr;max-width:560px}}
.servicio .etq{position:absolute;top:clamp(1.5rem,3vw,2rem);right:clamp(1.5rem,3vw,2rem)}
.servicio .extra{margin:-.4rem 0 .9rem;font-size:.8rem;color:var(--texto-suave)}
.servicio .extra b{color:var(--texto-fuerte)}
.servicio .precio-linea.pronto{font-size:1.2rem;color:var(--texto-fuerte)}
/* la página web es el servicio principal: va en azul dentro de la sección clara */
main section.claro .servicio.estrella{background:var(--t-azul);border-color:var(--t-azul);
  --texto-fuerte:#FFFFFF;--texto-suave:var(--t-claro-cuerpo);--texto-tenue:var(--t-claro-tenue);
  --acento-txt:var(--t-turquesa);--borde:rgba(255,255,255,.14);
  box-shadow:0 22px 50px rgba(14,38,63,.22)}
main section.claro .servicio.estrella .num{background:rgba(20,184,177,.18);border-color:rgba(20,184,177,.4);color:var(--t-turquesa)}
main section.claro .servicio.estrella:hover{border-color:var(--t-turquesa)}
/* el que todavía no se vende lleva el borde punteado: se ve, pero no está listo */
main section.claro .servicio.en-camino{border-style:dashed;border-color:rgba(14,38,63,.28);background:rgba(255,255,255,.6)}
.servicio .enlace-sec{margin-top:.75rem;align-self:center;font-size:.8rem;font-weight:600;color:var(--texto-suave);text-decoration:none}
.servicio .enlace-sec:hover{color:var(--acento-txt)}

/* ══ LOS FOCOS · una sección por herramienta ══ */
.foco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.foco--espejo{grid-template-columns:minmax(0,.95fr) minmax(0,1fr)}
.foco--espejo .foco-visual{order:-1}
@media (max-width:900px){
  /* minmax(0,…) y no 1fr: con 1fr la columna crece hasta el contenido
     que no se parte (los botones) y en celular se comia 20 px por la derecha */
  .foco,.foco--espejo{grid-template-columns:minmax(0,1fr)}
  .foco--espejo .foco-visual{order:0}
}
.foco .etq{margin-bottom:1rem}
.foco h2{max-width:18ch}

/* los pasos, cortos y numerados */
.pasos-foco{list-style:none;margin:clamp(1.4rem,3vw,1.9rem) 0 0;padding:0;display:flex;flex-direction:column;gap:1rem}
.pasos-foco li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .85rem;align-items:start}
.pasos-foco .n{grid-row:span 2;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--display);font-size:.72rem;background:rgba(20,184,177,.16);border:1px solid rgba(20,184,177,.4);color:var(--acento-txt)}
.pasos-foco b{font-family:var(--display);font-weight:400;font-size:1rem;letter-spacing:-.02em;color:var(--texto-fuerte);line-height:1.3}
.pasos-foco p{margin:0;font-size:.9rem;color:var(--texto-suave);line-height:1.55}

/* lo que conviene saber, en fichas chicas con palomita */
.datos{list-style:none;margin:clamp(1.3rem,3vw,1.7rem) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.datos li{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:500;color:var(--texto-fuerte);
  border:1px solid var(--borde-fuerte);border-radius:999px;padding:.42em .9em .42em .7em}
.datos li svg{width:14px;height:14px;color:var(--acento-txt);flex:none}

/* el precio, con su botón al lado */
.foco-precio{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:clamp(1.6rem,3.4vw,2.2rem);
  padding-top:clamp(1.3rem,3vw,1.6rem);border-top:1px solid var(--borde)}
.foco-precio .cifra{display:flex;flex-direction:column}
.foco-precio .cifra b{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3.6vw,2.1rem);letter-spacing:-.04em;
  color:var(--acento-txt);line-height:1}
.foco-precio .cifra i{margin-top:.35rem;font-style:normal;font-size:.78rem;color:var(--texto-tenue)}
.foco-precio .botones{display:flex;flex-wrap:wrap;gap:.6rem}

/* ── la ventana del programa de facturas ── */
.ventana{position:relative;background:#FFFFFF;border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.28);color:var(--t-azul);
  max-width:470px;margin-inline:auto;width:100%}
.ventana-cromo{display:flex;align-items:center;gap:.32rem;padding:.8rem 1rem;border-bottom:1px solid rgba(14,38,63,.08)}
.ventana-cromo i{width:8px;height:8px;border-radius:50%;background:rgba(14,38,63,.16)}
.ventana-cromo span{margin-left:.6rem;font-size:.68rem;color:var(--t-tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arbol{list-style:none;margin:0;padding:1rem 1.1rem 1.2rem;font-size:.8rem}
.arbol ul{list-style:none;margin:0;padding:0 0 0 1.25rem;border-left:1px dashed rgba(14,38,63,.16);margin-left:.5rem}
.arbol li{padding:.24rem 0}
.arbol .f{display:flex;align-items:center;gap:.5rem;min-width:0}
.arbol .f svg{width:17px;height:17px;flex:none}
.arbol .f b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.arbol .f small{font-size:.68rem;color:var(--t-tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.arbol .carpeta svg{color:#E0A800}
.arbol .archivo svg{color:var(--t-turquesa-txt)}
.arbol .archivo b{font-weight:500;overflow:hidden;text-overflow:ellipsis;min-width:0}
.arbol .excel svg{color:#1E7A46}
@media (max-width:520px){
  .arbol{font-size:.74rem;padding:.9rem .8rem 1.6rem}
  .arbol ul{padding-left:.7rem;margin-left:.4rem}
}
/* el aviso del celular: "ticket guardado". Entra cuando la ventana
   aparece, para que se entienda que la foto llegó sola */
.aviso-cel{position:absolute;right:clamp(-14px,-1.5vw,-6px);bottom:clamp(-22px,-2vw,-14px);z-index:2;
  display:flex;align-items:center;gap:.6rem;background:var(--t-azul);color:#FFFFFF;border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:.7rem .9rem;box-shadow:0 16px 36px rgba(0,0,0,.3);max-width:250px;
  opacity:0;transform:translateY(10px) scale(.97);transition:opacity .5s var(--ease-out) .55s,transform .5s var(--ease-out) .55s}
.mk-in .aviso-cel{opacity:1;transform:none}
.aviso-cel .ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--t-turquesa);color:var(--t-azul)}
.aviso-cel .ico svg{width:16px;height:16px}
.aviso-cel b{display:block;font-size:.72rem;font-weight:700}
.aviso-cel i{display:block;font-style:normal;font-size:.66rem;color:var(--t-claro-cuerpo);margin-top:.1rem}
@media (max-width:520px){.aviso-cel{right:10px;bottom:-30px}}

/* ── la llamada del recepcionista ── */
.llamada{background:var(--t-azul);border-radius:24px;padding:clamp(1.1rem,3vw,1.5rem);color:#FFFFFF;
  box-shadow:0 30px 70px rgba(14,38,63,.28);max-width:440px;margin-inline:auto;width:100%}
.llamada-cab{display:flex;align-items:center;gap:.7rem;padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.12)}
.llamada-cab .tb-fono{width:34px;height:34px}
.llamada-cab b{display:block;font-size:.8rem;font-weight:700}
.llamada-cab i{display:block;font-style:normal;font-size:.68rem;color:var(--t-claro-tenue)}
.onda{margin-left:auto;display:flex;align-items:center;gap:3px;height:22px}
.onda span{width:3px;height:100%;border-radius:2px;background:var(--t-turquesa);transform-origin:center;animation:onda 1.1s ease-in-out infinite}
.onda span:nth-child(2){animation-delay:.15s}.onda span:nth-child(3){animation-delay:.3s}
.onda span:nth-child(4){animation-delay:.45s}.onda span:nth-child(5){animation-delay:.6s}
@keyframes onda{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.burbujas{display:flex;flex-direction:column;gap:.55rem}
.burbuja{max-width:84%;font-size:.8rem;line-height:1.45;padding:.6rem .8rem;border-radius:14px;
  opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.burbuja.cliente{align-self:flex-start;background:rgba(255,255,255,.1);color:#FFFFFF;border-bottom-left-radius:4px}
.burbuja.recep{align-self:flex-end;background:var(--t-turquesa);color:var(--t-azul);border-bottom-right-radius:4px;font-weight:500}
.burbuja small{display:block;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:.15rem;font-weight:700}
.mk-in .burbuja{opacity:1;transform:none}
.mk-in .burbuja:nth-child(1){transition-delay:.3s}
.mk-in .burbuja:nth-child(2){transition-delay:.75s}
.mk-in .burbuja:nth-child(3){transition-delay:1.2s}
.mk-in .burbuja:nth-child(4){transition-delay:1.65s}
.cita{display:flex;align-items:center;gap:.7rem;margin-top:1rem;background:#FFFFFF;color:var(--t-azul);border-radius:14px;padding:.75rem .9rem;
  opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease-out) 2.1s,transform .45s var(--ease-out) 2.1s}
.mk-in .cita{opacity:1;transform:none}
.cita .ico{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--t-mint);color:var(--t-turquesa-txt)}
.cita .ico svg{width:18px;height:18px}
.cita b{display:block;font-size:.78rem}
.cita i{display:block;font-style:normal;font-size:.68rem;color:var(--t-tenue)}
.cita .ok{margin-left:auto;font-size:.66rem;font-weight:700;color:var(--t-turquesa-txt);background:var(--t-mint);border-radius:999px;padding:.35em .75em;white-space:nowrap}

/* ══ EQUIPO · ahora son dos ══ */
.equipo.dos{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
@media (max-width:640px){.equipo.dos{grid-template-columns:1fr;max-width:420px}}
.persona-cuerpo{display:flex;gap:1rem;align-items:flex-start}
.mono{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;
  font-family:var(--display);font-size:.95rem;letter-spacing:-.02em;background:var(--t-azul);color:#FFFFFF}
.persona:nth-child(2) .mono{background:var(--t-turquesa);color:var(--t-azul)}

/* ══ SALTOS · los tres servicios como índice de la página ══ */
.saltos{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem}
.saltos a{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-size:.82rem;font-weight:600;color:#FFFFFF;
  border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:.55em 1.05em;transition:border-color .2s,background .2s,color .2s}
.saltos a:hover{border-color:var(--t-turquesa);color:var(--t-turquesa);background:rgba(20,184,177,.1)}
.saltos a span{font-family:var(--display);font-size:.7rem;color:var(--t-turquesa)}
.saltos a .etq{padding:.4em .7em;font-size:.52rem}
section[id]{scroll-margin-top:calc(var(--barra) + 8px)}

/* ══ LAS CUATRO FICHAS DEL RECEPCIONISTA ══ */
.rejilla.cuatro{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.rejilla.cuatro{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.rejilla.cuatro{grid-template-columns:1fr}}
.tarjeta .ico svg{width:17px;height:17px}

/* ══ CAJA DE "PRÓXIMAMENTE" ══ */
.pronto-caja{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.6rem;
  margin-top:clamp(1.8rem,4vw,2.4rem);padding:clamp(1.2rem,3vw,1.6rem) clamp(1.2rem,3vw,1.8rem);
  border:1.5px dashed var(--borde-fuerte);border-radius:20px;background:var(--superficie)}
.pronto-caja p{margin:0;max-width:56ch;font-size:.95rem;color:var(--texto-suave)}
.pronto-caja p b{color:var(--texto-fuerte)}
main section.claro .pronto-caja{background:#FFFFFF}

/* ══ RESPETO AL MOVIMIENTO REDUCIDO ══
   Sin desplazamientos ni latidos; todo se ve desde el principio. */
@media (prefers-reduced-motion:reduce){
  .tb,.burbuja,.cita,.aviso-cel{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
  .tb-fono::after,.onda span{animation:none!important}
}

/* el eyebrow es flex: text-align no lo centra. Los que van sueltos con
   .centro (el del cierre) se quedaban a la izquierda */
.eyebrow.centro{justify-content:center}

/* ══ SERVICIOS · lo que conviene saber + la caja del precio ══ */
.saber{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:clamp(1.6rem,4vw,3rem);align-items:start;
  margin-top:clamp(2.2rem,5vw,3rem)}
@media (max-width:860px){.saber{grid-template-columns:minmax(0,1fr)}}
.saber .notas{margin-top:0}
.caja-precio{border:1px solid var(--borde-fuerte);border-radius:22px;padding:clamp(1.4rem,3vw,1.9rem);
  background:linear-gradient(160deg,rgba(20,184,177,.12),rgba(255,255,255,.02));display:flex;flex-direction:column;gap:.7rem}
.caja-precio .eyebrow{margin:0}
.caja-precio .cifra{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,5vw,2.9rem);letter-spacing:-.04em;line-height:1;color:var(--acento-txt)}
.caja-precio p{margin:0;font-size:.92rem;color:var(--texto-suave);line-height:1.55}
.caja-precio .nota{font-size:.82rem;color:var(--texto-tenue)}
.caja-precio .nota b{color:var(--texto-fuerte)}
.caja-precio .btn{width:100%;margin-top:.2rem;white-space:normal;text-align:center;line-height:1.2}