/* ===========================================================================
   Facturas365 - sitio publico

   Hoja aparte, y NO la de la aplicacion. style.css son 3 MB de DreamsPos
   pensados para un panel con sesion iniciada; una pagina publica se juzga por
   lo que tarda en aparecer, y quien llega aqui no necesita ni una linea de eso.

   ---------------------------------------------------------------------------
   Aqui se usa el AZUL de la marca; la aplicacion sigue en naranja
   ---------------------------------------------------------------------------

   Los colores estan sacados del banner de la marca, pixel a pixel:

       #04245A   el azul marino de "Facturas"
       #1A8CF1   el azul vivo del "365", del ".cloud" y de la nube

   La aplicacion conserva el naranja de la plantilla (--primary-rgb de
   style.css). Es una decision tomada a proposito: el sitio publico lleva la
   cara de la marca y el panel de trabajo se queda como lo conocen los clientes
   que ya lo usan.

   Las variables se llaman --acento y no --azul: un dia esto puede cambiar otra
   vez, y una variable que se llama por su color acaba guardando otro.
   =========================================================================== */

:root {
    --acento: #1A8CF1;
    --acento-osc: #0F6FC9;
    --tinta: #04245A;
    --tinta-suave: #3B5A85;
    --gris: #64748B;
    --borde: #E2E8F2;
    --fondo: #FFFFFF;
    --fondo-suave: #F5F9FD;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--tinta);
    background: var(--fondo);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: var(--acento-osc); }

.envoltura {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --------------------------------------------------------------- Barra --- */

/*
   Pegada arriba: el boton de entrar tiene que estar a mano desde cualquier
   punto de la pagina, no solo al principio. Es el unico boton que la gente que
   YA es cliente viene a buscar.
*/
.barra {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--borde);
}

.barra .envoltura {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 76px;
}

.barra__logo img { height: 42px; display: block; }

.barra__menu {
    display: flex;
    gap: 28px;
    margin-left: auto;
}

.barra__menu a {
    color: var(--tinta-suave);
    text-decoration: none;
    font-weight: 500;
}

.barra__menu a:hover { color: var(--acento-osc); }

/* --------------------------------------------------------------- Botones --- */

.boton {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.4rem;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.boton:hover { transform: translateY(-1px); }

.boton--principal {
    background: var(--acento);
    color: #fff;
    box-shadow: 0 6px 16px rgba(26, 140, 241, .32);
}

.boton--principal:hover { background: var(--acento-osc); }

.boton--perfil {
    border-color: var(--borde);
    color: var(--tinta);
    background: #fff;
}

.boton--perfil:hover { border-color: var(--acento); color: var(--acento-osc); }

.boton--claro {
    background: #fff;
    color: var(--tinta);
}

/* -------------------------------------------------------------- Portada --- */

.portada {
    padding: 0 0 72px;
    background:
        radial-gradient(48rem 32rem at 82% -10%, rgba(26, 140, 241, .16), transparent 60%),
        linear-gradient(180deg, #fff 0%, var(--fondo-suave) 100%);
}

/*
   El banner de la marca.

   Va a sangre y arriba del todo, sin recuadro ni sombra: la propia imagen ya
   trae su fondo claro y encuadrarla la convertiria en una foto pegada en la
   pagina en lugar de en la portada de la pagina.

   `aspect-ratio` reserva su sitio ANTES de que la imagen cargue, asi que el
   texto de abajo no da un salto cuando termina de bajar. Y `loading` se deja en
   eager a proposito: es lo primero que se ve, retrasarla seria enseñar un hueco.
*/
/*
   `height: auto` hace falta para que mande el aspect-ratio: sin el, el height
   del HTML (591) fijaba la altura y en el telefono la imagen salia de 360x591,
   recortada por los lados y sin el logotipo. El tope deja la portada como
   estaba en pantallas muy anchas.
*/
.portada__imagen {
    display: block;
    width: 100%;
    height: auto;
    max-height: 591px;
    aspect-ratio: 1400 / 591;
    object-fit: cover;
    margin-bottom: 40px;
}

.portada h1 {
    font-size: clamp(2rem, 4.6vw, 3.25rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 0 0 1rem;
    max-width: 18ch;
}

.portada h1 span { color: var(--acento-osc); }

.portada p {
    font-size: 1.15rem;
    color: var(--gris);
    max-width: 58ch;
    margin: 0 0 2rem;
}

.portada__acciones { display: flex; gap: 12px; flex-wrap: wrap; }

.portada__sello {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: rgba(26, 140, 241, .10);
    color: var(--acento-osc);
    font-size: .85rem;
    font-weight: 600;
}

/* ------------------------------------------------------------- Secciones --- */

.seccion { padding: 72px 0; }
.seccion--suave { background: var(--fondo-suave); }

.seccion__titulo { max-width: 60ch; margin-bottom: 40px; }

.seccion__titulo h2 {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    letter-spacing: -.015em;
    margin: 0 0 .5rem;
}

.seccion__titulo p { color: var(--gris); margin: 0; font-size: 1.05rem; }

.grupo { margin-bottom: 48px; }
.grupo:last-child { margin-bottom: 0; }

.grupo__nombre {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--acento-osc);
    margin-bottom: 20px;
}

.grupo__nombre::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--borde);
}

.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.tarjeta {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 24px;
}

.tarjeta h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
.tarjeta p { margin: 0; color: var(--gris); font-size: .95rem; }

.tarjeta__icono {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 140, 241, .10);
    color: var(--acento-osc);
    margin-bottom: 14px;
}

.tarjeta__icono svg { width: 22px; height: 22px; }

/* ----------------------------------------------------------------- Pasos --- */

.pasos { counter-reset: paso; }

.paso { display: flex; gap: 18px; margin-bottom: 28px; }

.paso::before {
    counter-increment: paso;
    content: counter(paso);
    flex: 0 0 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--acento);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.paso h3 { margin: .35rem 0 .25rem; font-size: 1.05rem; }
.paso p { margin: 0; color: var(--gris); }

/* ---------------------------------------------------------------- Cierre --- */

.cierre {
    padding: 72px 0;
    background:
        radial-gradient(40rem 28rem at 78% 10%, rgba(26, 140, 241, .30), transparent 62%),
        linear-gradient(135deg, #04245A 0%, #073A82 55%, #0B52A8 100%);
    color: #fff;
    text-align: center;
}

.cierre h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 0 0 .75rem; }
.cierre p { color: rgba(255, 255, 255, .8); margin: 0 auto 2rem; max-width: 52ch; }

/* ------------------------------------------------------------------- Pie --- */

.pie {
    padding: 36px 0;
    border-top: 1px solid var(--borde);
    color: var(--gris);
    font-size: .9rem;
}

.pie .envoltura {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.pie img { height: 32px; }

/* ------------------------------------------------------------- Pantalla pequena --- */

@media (max-width: 767.98px) {
    /* El menu desaparece; el boton de entrar NO: es a lo que se viene. */
    .barra__menu { display: none; }
    .barra .envoltura { height: 68px; }
    /* Sin el menu, es el logotipo el que empuja los botones a la derecha; y
       no se encoge: con img { max-width: 100% } se quedaba en 0 px. */
    .barra__logo { margin-right: auto; flex-shrink: 0; }
    .barra__logo img { height: 36px; }
    /* La imagen va a sangre arriba, como en la pantalla grande. */
    .portada { padding: 0 0 48px; }
    .seccion { padding: 52px 0; }
}

@media (max-width: 575.98px) {
    /* En el telefono no caben el logotipo y los dos botones. Se queda
       Ingresar; Crear cuenta esta justo debajo, en la portada. */
    .barra .boton--perfil { display: none; }
    .barra .envoltura { gap: 12px; }
}

/* ------------------------------------------------------------- WhatsApp --- */

/*
   Flotante y abajo a la derecha, que es donde la gente lo busca.

   Va por encima de todo (z-index alto) pero sin tapar el pie: 24px de margen
   bastan en escritorio, y en pantalla pequena se encoge para no comerse el
   contenido.
*/
.whatsapp {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 40;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: #fff;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .4);
    transition: transform .15s ease;
}

.whatsapp:hover { transform: scale(1.06); }

@media (max-width: 767.98px) {
    .whatsapp { width: 52px; height: 52px; right: 16px; bottom: 16px; }
    .whatsapp svg { width: 26px; height: 26px; }
}

/* --------------------------------------------------------- Formularios --- */

/*
   El alta de un prospecto. Es la unica pagina publica con campos, asi que los
   estilos del formulario viven aqui y no en la hoja de la aplicacion.
*/
.formulario {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 16px;
    padding: 32px;
}

.campo { margin-bottom: 18px; }

.campo label {
    display: block;
    font-weight: 600;
    font-size: .92rem;
    margin-bottom: .35rem;
}

.campo label span { color: var(--acento-osc); }

.campo input,
.campo textarea {
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--borde);
    border-radius: 10px;
    font: inherit;
    color: var(--tinta);
    background: #fff;
}

.campo input:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px rgba(26, 140, 241, .16);
}

.campo .ayuda { display: block; color: var(--gris); font-size: .85rem; margin-top: .3rem; }
.campo .error { display: block; color: #DC3545; font-size: .85rem; margin-top: .3rem; }

.campo--dos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

@media (max-width: 575.98px) {
    .campo--dos { grid-template-columns: 1fr; gap: 0; }
    .formulario { padding: 24px; }
}

/*
   El campo trampa.

   Oculto para las personas y visible para un robot que rellena todo lo que
   encuentra en el formulario. Si viene lleno, la solicitud se rechaza. Es lo
   que evita la mayor parte de la basura sin poner un captcha delante de un
   cliente de verdad.

   No se usa `display:none`: algunos robots lo detectan. Se saca de la pantalla.
*/
.trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.aviso {
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: .95rem;
}

.aviso--error { background: #FDECEE; color: #9B1C2A; }
.aviso--info { background: rgba(26, 140, 241, .10); color: #0B4C8C; }
.aviso ul { margin: .4rem 0 0; padding-left: 1.2rem; }

.exito {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.exito__marca {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(37, 211, 102, .14);
    color: #1AA34A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}