/* ============================================================
   POPPINS ALOJADA LOCALMENTE
   Sin peticiones a Google: ni dependencia externa ni
   envio de la IP del visitante a terceros.
   ============================================================ */

@font-face{
    font-family:'Poppins';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url('../fonts/poppins-400.woff2') format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
    font-family:'Poppins';
    font-style:normal;
    font-weight:500;
    font-display:swap;
    src:url('../fonts/poppins-500.woff2') format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
    font-family:'Poppins';
    font-style:normal;
    font-weight:600;
    font-display:swap;
    src:url('../fonts/poppins-600.woff2') format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
    font-family:'Poppins';
    font-style:normal;
    font-weight:700;
    font-display:swap;
    src:url('../fonts/poppins-700.woff2') format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Jrp Sistem Consulting · estilos principales
   Paleta tomada del logotipo (img/logo.svg):
   azul marino #253471 · naranja #F49423
   ============================================================ */

:root{
    --primary:#253471;
    --primary-hover:#1b2547;
    --accent:#F49423;
    --accent-hover:#d97d12;
    --white:#ffffff;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero{
    /* 90% en lugar de 100%: así asoma la franja de servicios al entrar y
       el visitante ve que hay más contenido abajo. */
    min-height:90vh;

    /* Fondo diseñado: suelo en perspectiva que se pierde en el horizonte.
       Es CSS puro, no una imagen: pesa 0 KB y se ve nitido en cualquier
       pantalla. Si algun dia quieres sustituirlo por una foto, basta con
       cambiar esta propiedad por:
         linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65)),
         url('../img/hero.jpg') center / cover no-repeat; */
    background:
        radial-gradient(ellipse at 50% 100%, rgba(244,148,35,.30) 0%, rgba(244,148,35,0) 46%),
        linear-gradient(180deg,#070c18 0%,#0d1730 55%,#16223f 100%);

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;

    /* El logo va en position:absolute, así que el centrado flex NO lo tiene
       en cuenta y el contenido podía empezar por encima de él en pantallas
       bajas. Reservando aquí el alto del logo + 24px de aire, el contenido
       nunca puede subir más allá, sea cual sea la altura de la ventana. */
    padding:174px 2rem 2rem;
    overflow:hidden;
}

/* ------------------------------------------------------------
   Retícula del suelo en perspectiva
   Empieza al 63% de la altura: justo debajo del subtítulo. Si
   empezara más arriba, las líneas cruzarían el texto.
   ------------------------------------------------------------ */
.hero .capa-fondo{
    position:absolute;
    left:0;
    right:0;
    top:63%;
    bottom:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

.hero .capa-fondo::after{
    content:"";
    position:absolute;
    left:-60%;
    right:-60%;
    top:0;
    height:300%;
    background-image:
        linear-gradient(rgba(140,175,255,.55) 2px, transparent 2px),
        linear-gradient(90deg, rgba(140,175,255,.55) 2px, transparent 2px);
    background-size:78px 78px;
    transform:perspective(320px) rotateX(72deg);
    transform-origin:top center;
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 45%, transparent 80%);
    mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 45%, transparent 80%);
}

/* El contenido del hero va SIEMPRE por encima del suelo */
.hero > *{
    position:relative;
    z-index:2;
}

/* En pantallas estrechas el contenido ocupa hasta el 78% de la altura del
   hero, así que un suelo que empiece al 63% cruzaría el subtítulo. Aquí baja
   y se atenúa. El diseño de escritorio (el aprobado) no se toca. */
@media (max-width:768px), (max-height:700px){
    .hero .capa-fondo{
        top:79%;
        opacity:.5;
    }
}

.hero header{
    position:absolute;
    top:30px;
    left:40px;
    right:40px;
    z-index:100;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* Menú del hero: es el mismo .cabecera-nav de las páginas interiores.
   Solo se muestra cuando cabe en la misma línea que el logo. En móvil se
   oculta a propósito: una segunda fila en el header lo haría crecer y
   reabriría el solape con el titular (el parche de alturas se calcula
   sobre el borde inferior del header). */
.hero .cabecera-nav{
    display:none;
}

@media (min-width:769px){
    .hero .cabecera-nav{
        display:flex;
    }
}

.logo{
    width:180px;
    height:auto;
    display:block;
}

.hero-content{
    max-width:900px;
    text-align:center;
    color:var(--white);
}

.hero-content h1{
    font-size:clamp(2.2rem,5vw,5rem);
    line-height:1.1;
    margin-bottom:1.5rem;
    font-weight:700;
}

.hero-content p{
    font-size:clamp(1rem,2vw,1.3rem);
    line-height:1.7;
    color:rgba(255,255,255,.9);
    margin-bottom:3rem;
}

.buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

/* ============================================================
   BOTONES DEL HERO
   ============================================================ */

/* Ángulo animable: necesario para girar el gradiente del aro.
   @property debe ir a nivel raíz, fuera de cualquier selector. */
@property --angulo{
    syntax:"<angle>";
    initial-value:0deg;
    inherits:false;
}

.btn-hero{
    position:relative;
    isolation:isolate;      /* el relleno nunca tapa el texto */
    overflow:hidden;        /* recorta el relleno deslizante */
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:3.25rem;
    padding:0 2rem;
    font:inherit;
    font-size:1rem;
    font-weight:600;
    letter-spacing:.3px;
    line-height:1;
    text-align:center;
    text-decoration:none;
    border:none;
    border-radius:50px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:color .35s ease, transform .25s ease, box-shadow .4s ease;
}

.btn-hero__texto{
    position:relative;
    z-index:3;
}

.btn-hero:hover{
    transform:translateY(-2px);
}

.btn-hero:active{
    transform:translateY(0) scale(.97);
}

.btn-hero:focus-visible{
    outline:3px solid var(--accent);
    outline-offset:4px;
}

/* Relleno deslizante: entra desde la izquierda */
.btn-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:var(--relleno);
    transform:translateX(-101%);
    transition:transform .45s cubic-bezier(.65,.05,.36,1);
}

.btn-hero:hover::before,
.btn-hero:focus-visible::before{
    transform:translateX(0);
}

/* --- Botón 1 · blanco con aro de gradiente giratorio --- */
.btn-hero--gradiente{
    --relleno:linear-gradient(120deg,var(--primary),#3b4f8f);
    --fondo:var(--white);
    background:var(--fondo);
    color:var(--primary);
}

.btn-hero--gradiente::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    border-radius:inherit;
    padding:2px;                 /* grosor del aro */
    background:conic-gradient(from var(--angulo),
                var(--primary), var(--accent), var(--primary));
    /* Recorta el centro con máscara: deja solo el marco visible */
    -webkit-mask:linear-gradient(#000 0 0) content-box,
                 linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,
                 linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    opacity:.85;
    animation:jrp-girar 3.5s linear infinite;
    transition:opacity .35s ease;
}

.btn-hero--gradiente:hover{
    color:var(--white);
    box-shadow:0 14px 30px -10px rgba(37,52,113,.6);
}

/* Al entrar el relleno, el aro se difumina para no duplicar color */
.btn-hero--gradiente:hover::after{
    opacity:0;
}

@keyframes jrp-girar{
    to{ --angulo:360deg; }
}

/* --- Botón 2 · contorno naranja que se rellena --- */
.btn-hero--contorno{
    --relleno:linear-gradient(120deg,var(--accent),#f7b45c);
    color:var(--accent);
    box-shadow:inset 0 0 0 2px var(--accent);
    transition:color .35s ease .1s,
               transform .25s ease,
               box-shadow .45s ease;
}

.btn-hero--contorno:hover{
    color:#3a2408;
    box-shadow:inset 0 0 0 2px transparent,   /* desaparece el contorno */
               0 14px 34px -10px rgba(244,148,35,.75);
}

/* Subrayado que se dibuja de izquierda a derecha */
.btn-hero--contorno::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    z-index:2;
    width:100%;
    height:2px;
    background:#3a2408;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .45s ease .15s;
}

.btn-hero--contorno:hover::after,
.btn-hero--contorno:focus-visible::after{
    transform:scaleX(1);
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.footer{
    position:relative;
    background:#0f1424;              /* el mismo azul noche del hero */
    color:rgba(255,255,255,.72);
    padding:4.5rem 2rem 0;
}

/* Eco del naranja del hero, ahora como linea de marca */
.footer::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(90deg,
                rgba(244,148,35,0) 0%,
                var(--accent) 30%,
                #f7b45c 50%,
                var(--accent) 70%,
                rgba(244,148,35,0) 100%);
}

.footer-content{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.7fr 1fr 1.2fr;
    gap:3rem;
    padding-bottom:3.5rem;
}

.footer-logo{
    width:150px;
    height:auto;
    display:block;
    margin-bottom:1.35rem;
}

.footer-texto{
    max-width:52ch;
    font-size:.9rem;
    line-height:1.85;
    color:rgba(255,255,255,.62);
}

.footer-titulo{
    margin-bottom:1.35rem;
    font-size:.8rem;
    font-weight:600;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--white);
}

.footer-lista{
    list-style:none;
}

.footer-lista li{
    margin-bottom:.75rem;
}

.footer-lista a{
    display:inline-block;
    font-size:.9rem;
    color:rgba(255,255,255,.72);
    text-decoration:none;
    transition:color .25s ease, transform .25s ease;
}

.footer-lista a:hover,
.footer-lista a:focus-visible{
    color:var(--accent);
    transform:translateX(4px);
}

.footer-bottom{
    max-width:1200px;
    margin:0 auto;
    padding:1.6rem 0 2rem;
    border-top:1px solid rgba(255,255,255,.12);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:.75rem;
    font-size:.82rem;
    color:rgba(255,255,255,.5);
}


/* ------------------------------------------------------------
   BOTON FLOTANTE DE WHATSAPP
   Para pasar del verde WhatsApp al naranja de marca, cambia solo
   estas 3 variables: --wa-fondo, --wa-hover y --wa-sombra.
   ------------------------------------------------------------ */
.wa-flotante{
    --wa-fondo:#F49423;
    --wa-hover:#d97d12;
    --wa-sombra:rgba(244,148,35,.55);

    position:fixed;
    right:24px;
    bottom:calc(24px + env(safe-area-inset-bottom,0px));
    z-index:200;

    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    background:var(--wa-fondo);
    color:var(--white);
    box-shadow:0 8px 24px -6px var(--wa-sombra);

    -webkit-tap-highlight-color:transparent;
    animation:wa-entrada .45s ease .7s both;
    transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.wa-flotante svg{
    width:30px;
    height:30px;
    fill:currentColor;
}

.wa-flotante:hover{
    background:var(--wa-hover);
    transform:translateY(-3px) scale(1.06);
    box-shadow:0 14px 32px -8px var(--wa-sombra);
}

.wa-flotante:active{
    transform:translateY(0) scale(.96);
}

.wa-flotante:focus-visible{
    outline:3px solid var(--accent);
    outline-offset:3px;
}

/* Pulso suave: va en un ::after para no pisar la sombra del boton */
.wa-flotante::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    animation:jrp-pulso 2.8s ease-out 1.6s infinite;
}

@keyframes jrp-pulso{
    0%  { box-shadow:0 0 0 0 var(--wa-sombra); }
    70% { box-shadow:0 0 0 18px rgba(0,0,0,0); }
    100%{ box-shadow:0 0 0 0 rgba(0,0,0,0); }
}

@keyframes wa-entrada{
    from{ opacity:0; transform:translateY(18px) scale(.85); }
    to  { opacity:1; transform:translateY(0) scale(1); }
}


/* ------------------------------------------------------------
   CABECERA DE PAGINAS INTERIORES
   ------------------------------------------------------------ */
.cabecera{
    position:relative;
    padding:1.4rem 2rem;
    background:#0f1424;
}

/* Misma linea de marca que el footer, para que la pagina se reconozca */
.cabecera::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    background:linear-gradient(90deg,
                rgba(244,148,35,0) 0%,
                var(--accent) 30%,
                #f7b45c 50%,
                var(--accent) 70%,
                rgba(244,148,35,0) 100%);
}

.cabecera-contenido{
    max-width:1200px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
    flex-wrap:wrap;
}

.cabecera-logo img{
    width:130px;
    height:auto;
    display:block;
}

.cabecera-nav{
    display:flex;
    align-items:center;
    gap:2.25rem;
    flex-wrap:wrap;
}

.cabecera-nav a{
    font-size:.9rem;
    font-weight:500;
    color:rgba(255,255,255,.72);
    text-decoration:none;
    transition:color .25s ease;
}

.cabecera-nav a:hover,
.cabecera-nav a:focus-visible{
    color:var(--white);
}

.cabecera-nav a.activo{
    color:var(--accent);
}

/* ------------------------------------------------------------
   PAGINAS INTERIORES
   ------------------------------------------------------------ */
.pagina{
    padding:5rem 2rem 6rem;
    background:
        radial-gradient(circle, rgba(37,52,113,.11) 1px, transparent 1px) 0 0 / 28px 28px,
        #f7f9fc;
}

.pagina-contenido{
    max-width:1100px;
    margin:0 auto;
}

/* --- tarjetas de contacto --- */
.contacto-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
    gap:1.5rem;
}

.contacto-tarjeta{
    display:block;
    padding:2.1rem 1.75rem;
    background:var(--white);
    border:1px solid #e4e9f2;
    border-radius:16px;
    text-align:center;
    text-decoration:none;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

a.contacto-tarjeta:hover{
    transform:translateY(-5px);
    border-color:rgba(244,148,35,.55);
    box-shadow:0 18px 38px -18px rgba(37,52,113,.28);
}

.contacto-icono{
    width:52px;
    height:52px;
    margin:0 auto 1.2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#fdf1e0;
    color:var(--accent);
}

.contacto-icono svg{
    width:26px;
    height:26px;
}

.contacto-tarjeta h2{
    margin-bottom:.6rem;
    font-size:1rem;
    font-weight:600;
    color:var(--primary);
}

.contacto-dato{
    font-size:.92rem;
    line-height:1.6;
    color:#5b667c;
    word-break:break-word;
}

.contacto-accion{
    display:inline-block;
    margin-top:1.1rem;
    font-size:.8rem;
    font-weight:600;
    letter-spacing:.6px;
    text-transform:uppercase;
    color:var(--accent);
}

/* --- formulario que envia a WhatsApp --- */
.contacto-form{
    max-width:660px;
    margin:4rem auto 0;
    padding:2.6rem 2.35rem;
    background:var(--white);
    border:1px solid #e4e9f2;
    border-radius:18px;
}

.contacto-form-titulo{
    margin-bottom:.65rem;
    font-size:1.2rem;
    font-weight:600;
    text-align:center;
    color:var(--primary);
}

.contacto-form-intro{
    margin-bottom:2rem;
    font-size:.9rem;
    line-height:1.7;
    text-align:center;
    color:#5b667c;
}

.form-campos{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.25rem;
    margin-bottom:1.85rem;
}

.form-campo--ancho{
    grid-column:1 / -1;
}

.form-campo span{
    display:block;
    margin-bottom:.5rem;
    font-size:.82rem;
    font-weight:600;
    letter-spacing:.3px;
    color:var(--primary);
}

.form-campo input,
.form-campo textarea{
    width:100%;
    padding:.85rem 1rem;
    font:inherit;
    font-size:.92rem;
    color:#2b3448;
    background:#f7f9fc;
    border:1px solid #dfe5ef;
    border-radius:10px;
    transition:border-color .25s ease, background .25s ease;
}

.form-campo textarea{
    min-height:120px;
    resize:vertical;
}

.form-campo input:focus,
.form-campo textarea:focus{
    outline:none;
    background:var(--white);
    border-color:var(--accent);
}

.form-campo input::placeholder,
.form-campo textarea::placeholder{
    color:#a3adc0;
}

.form-boton{
    width:100%;
    padding:1rem 1.5rem;
    font:inherit;
    font-size:.95rem;
    font-weight:600;
    color:var(--white);
    background:var(--accent);
    border:none;
    border-radius:50px;
    cursor:pointer;
    transition:background .25s ease, transform .25s ease, box-shadow .4s ease;
}

.form-boton:hover{
    background:var(--accent-hover);
    transform:translateY(-2px);
    box-shadow:0 14px 30px -12px rgba(244,148,35,.8);
}

.form-boton:focus-visible{
    outline:3px solid var(--primary);
    outline-offset:3px;
}

.form-aviso{
    min-height:1.2em;
    margin-top:1rem;
    font-size:.85rem;
    line-height:1.6;
    text-align:center;
    color:#5b667c;
}

.form-aviso a{
    color:var(--accent);
    font-weight:600;
}

.contacto-nota{
    margin-top:3rem;
    text-align:center;
    font-size:.85rem;
    letter-spacing:.4px;
    color:#8b95a8;
}

/* --- conócenos --- */
.conocenos-bloque{
    display:grid;
    grid-template-columns:1.25fr 1fr;
    gap:3rem;
    align-items:start;
}

.conocenos-texto h2{
    margin-bottom:1.15rem;
    font-size:clamp(1.3rem,2.4vw,1.7rem);
    font-weight:700;
    color:var(--primary);
}

.conocenos-texto p{
    margin-bottom:1.15rem;
    font-size:.95rem;
    line-height:1.85;
    color:#5b667c;
}



.valores li{
    padding:1.4rem 1.5rem;
    background:var(--white);
    border:1px solid #e4e9f2;
    border-radius:14px;
}

.valores strong{
    display:block;
    margin-bottom:.45rem;
    font-size:.95rem;
    font-weight:600;
    color:var(--primary);
}

.valores span{
    font-size:.87rem;
    line-height:1.7;
    color:#5b667c;
}


/* ------------------------------------------------------------
   SELLO DE TRAYECTORIA · «Desde 2014»
   ------------------------------------------------------------ */
.sello-anos{
    display:inline-block;
    padding:.45rem 1.15rem;
    font-size:.76rem;
    font-weight:600;
    letter-spacing:1.3px;
    text-transform:uppercase;
    color:var(--accent);
    background:rgba(244,148,35,.12);
    border:1px solid rgba(244,148,35,.4);
    border-radius:50px;
}

/* En el hero va encima del titular: es lo primero que se ve */
.hero-content .sello-anos{
    margin-bottom:1.7rem;
}

/* En las paginas interiores va debajo de la entradilla */
.sello-anos--pagina{
    margin-top:1.7rem;
}

/* Barra inferior del footer, en las cuatro paginas */
.footer-anos{
    font-weight:600;
    letter-spacing:.6px;
    color:var(--accent);
}

/* ------------------------------------------------------------
   SECCION DE SERVICIOS
   ------------------------------------------------------------ */
.servicios{
    padding:6.5rem 2rem;
    background:
        radial-gradient(circle, rgba(37,52,113,.11) 1px, transparent 1px) 0 0 / 28px 28px,
        #f7f9fc;
}

.servicios-contenido{
    max-width:1200px;
    margin:0 auto;
}

.servicios-cabecera,
.pagina-cabecera{
    max-width:720px;
    margin:0 auto 3.5rem;
    text-align:center;
}

.servicios-etiqueta,
.pagina-etiqueta{
    margin-bottom:1rem;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:var(--accent);
}

.servicios-titulo,
.pagina-titulo{
    margin-bottom:1.25rem;
    font-size:clamp(1.8rem,3.6vw,2.75rem);
    line-height:1.2;
    font-weight:700;
    color:var(--primary);
}

.servicios-intro,
.pagina-intro{
    font-size:clamp(.95rem,1.6vw,1.05rem);
    line-height:1.8;
    color:#5b667c;
}

/* auto-fit + min() da 3 / 2 / 1 columnas solo, sin media queries */
.servicios-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
    gap:1.5rem;
}

.servicio{
    padding:2rem 1.85rem;
    background:var(--white);
    border:1px solid #e4e9f2;
    border-radius:16px;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* Las tarjetas son enlaces a la pagina de contacto */
a.servicio{
    display:block;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
    transition:transform .3s ease,
               box-shadow .3s ease,
               border-color .3s ease,
               background-color .3s ease;
}

/* La del fuerte CONSERVA su disposicion en fila: sin esto, el
   display:block de arriba la romperia, porque a.servicio tiene mas
   especificidad que .servicio--fuerte. */
a.servicio--fuerte{
    display:flex;
}

a.servicio .servicio-titulo{
    transition:color .3s ease;
}

/* --- realce al pasar el cursor o al enfocar con el teclado --- */
a.servicio:hover,
a.servicio:focus-visible{
    transform:translateY(-6px);
    border-color:var(--accent);
    background:#fffcf6;
    box-shadow:0 24px 45px -20px rgba(37,52,113,.4);
}

/* El titulo se tine de naranja: pista clara de que se puede pulsar */
a.servicio:hover .servicio-titulo,
a.servicio:focus-visible .servicio-titulo{
    color:var(--accent);
}

/* La del fuerte ya es azul: mantiene su fondo y el realce va en el brillo */
a.servicio--fuerte:hover,
a.servicio--fuerte:focus-visible{
    background:var(--primary);
    box-shadow:0 26px 50px -22px rgba(244,148,35,.55);
}

a.servicio:focus-visible{
    outline:3px solid var(--accent);
    outline-offset:4px;
}

.servicio-icono{
    width:52px;
    height:52px;
    margin-bottom:1.35rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#fdf1e0;
    color:var(--accent);
}

.servicio-icono svg{
    width:26px;
    height:26px;
}

.servicio-titulo{
    margin-bottom:.7rem;
    font-size:1.06rem;
    font-weight:600;
    color:var(--primary);
}

.servicio-texto{
    font-size:.9rem;
    line-height:1.75;
    color:#5b667c;
}


/* --- tarjeta del servicio fuerte --- */
.servicio--fuerte{
    background:var(--primary);
    border-color:var(--primary);
    padding:2.3rem 2.2rem;
    display:flex;
    gap:1.7rem;
    align-items:flex-start;
}

/* El icono es SVG con stroke="currentColor": basta con poner color blanco
   para que el duotone se vea sobre el azul. Sin filtros. */
.servicio--fuerte .servicio-icono{
    flex:none;
    background:rgba(255,255,255,.1);
    color:var(--white);
}

.servicio--fuerte .servicio-titulo{
    margin-bottom:.85rem;
    font-size:1.3rem;
    color:var(--white);
}

.servicio--fuerte .servicio-texto{
    font-size:.95rem;
    line-height:1.85;
    color:rgba(255,255,255,.8);
}

.servicio-sello{
    display:inline-block;
    margin-bottom:.85rem;
    padding:.3rem .75rem;
    font-size:.66rem;
    font-weight:700;
    letter-spacing:1.3px;
    text-transform:uppercase;
    border-radius:50px;
    background:var(--accent);
    color:#3a2408;
}

.servicio-incluye{
    margin-top:1.5rem;
    list-style:none;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.7rem 1.6rem;
}

.servicio-incluye li{
    position:relative;
    padding-left:1.5rem;
    font-size:.88rem;
    line-height:1.6;
    color:rgba(255,255,255,.92);
}

.servicio-incluye li::before{
    content:"";
    position:absolute;
    left:0;
    top:.5em;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--accent);
}

/* --- bloques dentro de una tarjeta --- */
.servicio-grupo{ margin-top:1.3rem; }

.servicio-grupo-titulo{
    display:flex;
    align-items:center;
    gap:.5rem;
    margin-bottom:.65rem;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--accent);
}

.servicio-grupo-titulo::after{
    content:"";
    flex:1;
    height:1px;
    background:#e4e9f2;
}

.servicio-grupo-texto{
    font-size:.85rem;
    line-height:1.7;
    color:#5b667c;
}

/* --- etiquetas --- */
.servicio-chips{
    display:flex;
    flex-wrap:wrap;
    gap:.4rem;
    list-style:none;
}

.servicio-chip{
    padding:.34rem .72rem;
    font-size:.78rem;
    line-height:1.4;
    color:#4a5568;
    background:#f4f6fa;
    border:1px solid #e4e9f2;
    border-radius:50px;
}

/* --- rejilla: 1 / 2 / 3 columnas ---
   Con 5 tarjetas y el fuerte ocupando dos, cierra exacta en los tres casos. */
.servicios-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1.5rem;
}

@media (min-width:640px){
    .servicios-grid{ grid-template-columns:repeat(2,1fr); }
    .servicio--fuerte{ grid-column:span 2; }
}

@media (min-width:1000px){
    .servicios-grid{ grid-template-columns:repeat(3,1fr); }
}

/* Va despues de las reglas base, a proposito. */
@media (max-width:639px){
    .servicio--fuerte{ flex-direction:column; gap:1.2rem; padding:1.9rem 1.6rem; }
    .servicio-incluye{ grid-template-columns:1fr; }
}


/* ------------------------------------------------------------
   CONOCENOS · cifras, linea de tiempo y cierre
   ------------------------------------------------------------ */
.cifras{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));
    gap:1.5rem;
    margin-bottom:4rem;
    padding:2.2rem 1.5rem;
    background:var(--white);
    border:1px solid #e4e9f2;
    border-radius:18px;
    text-align:center;
}

.cifra strong{
    display:block;
    font-size:clamp(1.8rem,3.4vw,2.6rem);
    font-weight:700;
    line-height:1.1;
    color:var(--accent);
}

.cifra span{
    display:block;
    margin-top:.45rem;
    font-size:.82rem;
    letter-spacing:.3px;
    color:#5b667c;
}

.conocenos-texto strong{
    color:var(--primary);
    font-weight:600;
}

/* --- linea de tiempo --- */
.linea{
    position:relative;
    padding-left:1.9rem;
    list-style:none;
}

.linea::before{
    content:"";
    position:absolute;
    left:.42rem;
    top:.6rem;
    bottom:.6rem;
    width:2px;
    background:#e4e9f2;
}

.linea li{
    position:relative;
    margin-bottom:1.7rem;
}

.linea li:last-child{ margin-bottom:0; }

.linea li::before{
    content:"";
    position:absolute;
    left:-1.9rem;
    top:.3rem;
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 4px #fdf1e0;
}

.linea-ano{
    display:block;
    margin-bottom:.4rem;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--accent);
}

.linea-texto{
    font-size:.87rem;
    line-height:1.7;
    color:#5b667c;
}

/* --- titulo de bloque suelto --- */
.bloque-titulo{
    margin-bottom:1.5rem;
    font-size:clamp(1.3rem,2.4vw,1.7rem);
    font-weight:700;
    color:var(--primary);
}

/* --- cierre con llamada a la accion --- */
.cierre{
    margin-top:4rem;
    padding:3.2rem 2rem;
    background:var(--primary);
    border-radius:20px;
    text-align:center;
}

.cierre h2{
    margin-bottom:.7rem;
    font-size:clamp(1.25rem,2.6vw,1.7rem);
    font-weight:700;
    color:var(--white);
}

.cierre p{
    margin-bottom:1.9rem;
    font-size:.95rem;
    line-height:1.7;
    color:rgba(255,255,255,.78);
}

.cierre-boton{
    display:inline-block;
    padding:.95rem 2.2rem;
    font-size:.95rem;
    font-weight:600;
    color:var(--white);
    text-decoration:none;
    background:var(--accent);
    border-radius:50px;
    transition:background .25s ease, transform .25s ease, box-shadow .4s ease;
}

.cierre-boton:hover{
    background:var(--accent-hover);
    transform:translateY(-2px);
    box-shadow:0 14px 30px -12px rgba(244,148,35,.8);
}

.cierre-boton:focus-visible{
    outline:3px solid var(--white);
    outline-offset:3px;
}

/* La lista de valores pasa a dos columnas: ahora son cuatro */
.valores{
    list-style:none;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
    gap:1.1rem;
}

/* Va al final, despues de las reglas base, a proposito. */
@media (max-width:640px){
    .cifras{
        margin-bottom:3rem;
        padding:1.8rem 1rem;
    }

    .cierre{
        margin-top:3rem;
        padding:2.4rem 1.5rem;
    }
}


/* ------------------------------------------------------------
   PAGINA LEGAL (privacidad)
   ------------------------------------------------------------ */
.legal{ max-width:760px; }

.legal h2{
    margin-top:2.6rem;
    margin-bottom:.85rem;
    font-size:clamp(1.05rem,2vw,1.3rem);
    font-weight:700;
    color:var(--primary);
}

.legal p,
.legal li{
    font-size:.93rem;
    line-height:1.85;
    color:#5b667c;
}

.legal p{ margin-bottom:1rem; }

.legal ul{
    margin:0 0 1.2rem 1.15rem;
    list-style:disc;
}

.legal li{ margin-bottom:.5rem; }

.legal li::marker{ color:var(--accent); }

.legal strong{ color:var(--primary); font-weight:600; }

.legal a{
    color:var(--accent);
    text-decoration:none;
    border-bottom:1px solid rgba(244,148,35,.35);
}

.legal a:hover{ border-bottom-color:var(--accent); }

.legal-fecha{
    margin-top:1.2rem;
    font-size:.8rem;
    letter-spacing:.3px;
    color:#9aa5b8;
}

.legal-contacto{
    margin-left:0;
    list-style:none;
}


/* ------------------------------------------------------------
   PANEL DE LA LÍNEA DE TIEMPO (Conócenos)
   ------------------------------------------------------------ */
.panel-linea{
    position:relative;
    padding:2.4rem 2rem 2.2rem;
    border-radius:18px;
    overflow:hidden;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(244,148,35,.20) 0%, rgba(244,148,35,0) 55%),
        linear-gradient(165deg,#111a33 0%,#0d1730 100%);
}

/* Retícula de puntos: textura sutil, sin imágenes */
.panel-linea::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle, rgba(255,255,255,.15) 1px, transparent 1px);
    background-size:26px 26px;
    opacity:.55;
    pointer-events:none;
}

.panel-linea > *{
    position:relative;
    z-index:1;
}

.panel-linea-titulo{
    margin-bottom:1.7rem;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--accent);
}

/* La línea de tiempo pasa a texto claro dentro del panel */
.panel-linea .linea::before{
    background:rgba(255,255,255,.18);
}

.panel-linea .linea li::before{
    box-shadow:0 0 0 4px rgba(244,148,35,.22);
}

.panel-linea .linea-texto{
    color:rgba(255,255,255,.78);
}


/* ------------------------------------------------------------
   PANEL DE MARCA (reutilizable)
   Mismo lenguaje visual que el hero y los cierres: azul marino,
   retícula de puntos y acento naranja. CSS puro: 0 KB.
   ------------------------------------------------------------ */
.panel-marca{
    position:relative;
    overflow:hidden;
    padding:2.8rem 2.4rem;
    border-radius:20px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(244,148,35,.20) 0%, rgba(244,148,35,0) 55%),
        linear-gradient(165deg,#111a33 0%,#0d1730 100%);
}

.panel-marca::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle, rgba(255,255,255,.15) 1px, transparent 1px);
    background-size:26px 26px;
    opacity:.55;
    pointer-events:none;
}

.panel-marca > *{
    position:relative;
    z-index:1;
}

/* Los textos pasan a claros sobre el panel */
.panel-marca .servicios-titulo,
.panel-marca .pagina-titulo,
.panel-marca .contacto-form-titulo{
    color:var(--white);
}

.panel-marca .servicios-intro,
.panel-marca .pagina-intro,
.panel-marca .contacto-form-intro{
    color:rgba(255,255,255,.8);
}

.panel-marca .legal-fecha{
    color:rgba(255,255,255,.62);
}

/* La cabecera del formulario es un panel DENTRO de la tarjeta blanca */
.contacto-form-cabecera{
    margin-bottom:1.9rem;
    padding:2rem 1.9rem;
    border-radius:14px;
}


/* ------------------------------------------------------------
   FRANJA DE SERVICIOS (portada)
   Asoma bajo el hero para invitar a bajar. Mismos iconos que la
   página de Servicios, para que haya coherencia.
   ------------------------------------------------------------ */
.franja-servicios{
    padding:4.5rem 2rem 5rem;
    border-top:1px solid #e4e9f2;
    background:
        radial-gradient(circle, rgba(37,52,113,.11) 1px, transparent 1px) 0 0 / 28px 28px,
        #f7f9fc;
}

.franja-contenido{
    max-width:1160px;
    margin:0 auto;
}

.franja-etiqueta{
    margin-bottom:2.2rem;
    text-align:center;
    font-size:.74rem;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--accent);
}

.franja-lista{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:1.1rem;
    list-style:none;
}

.franja-lista li{ display:flex; }

.franja-lista a{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.95rem;
    flex:1;
    padding:1.9rem 1rem 1.7rem;
    background:var(--white);
    border:1px solid #e4e9f2;
    border-radius:16px;
    text-decoration:none;
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.franja-lista a:hover,
.franja-lista a:focus-visible{
    transform:translateY(-5px);
    border-color:var(--accent);
    box-shadow:0 20px 38px -18px rgba(37,52,113,.32);
}

.franja-lista a:focus-visible{
    outline:3px solid var(--accent);
    outline-offset:4px;
}

.franja-icono{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:#fdf1e0;
    color:var(--accent);
}

.franja-icono svg{ width:26px; height:26px; }

.franja-nombre{
    font-size:.88rem;
    font-weight:600;
    line-height:1.35;
    text-align:center;
    color:var(--primary);
}

.franja-pie{
    margin-top:2.4rem;
    text-align:center;
    font-size:.9rem;
}

.franja-pie a{
    color:var(--accent);
    font-weight:600;
    text-decoration:none;
    border-bottom:1px solid rgba(244,148,35,.4);
    padding-bottom:2px;
}

.franja-pie a:hover{ border-bottom-color:var(--accent); }

@media (max-width:900px){
    .franja-lista{ grid-template-columns:repeat(2,1fr); }
}


/* ------------------------------------------------------------
   FRANJA DE PROCESO «Cómo trabajamos» (Servicios)
   Responde a cómo trabajamos, no solo a qué hacemos. CSS puro.
   ------------------------------------------------------------ */
.proceso{
    margin-bottom:3.5rem;
    padding:2.7rem 2rem 2.5rem;
    background:var(--white);
    border:1px solid #e4e9f2;
    border-radius:20px;
}

.proceso-etiqueta{
    margin-bottom:2.2rem;
    text-align:center;
    font-size:.74rem;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:var(--accent);
}

.proceso-pasos{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.6rem;
    list-style:none;
}

/* Línea punteada que une los cuatro pasos. Los números la "cortan"
   porque llevan fondo blanco encima. */
.proceso-pasos::before{
    content:"";
    position:absolute;
    top:26px;
    left:12%;
    right:12%;
    height:2px;
    background:repeating-linear-gradient(
        90deg, rgba(37,52,113,.22) 0 7px, transparent 7px 15px);
}

.proceso-pasos li{
    position:relative;
    text-align:center;
}

.proceso-numero{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:54px;
    height:54px;
    margin-bottom:1.15rem;
    border-radius:50%;
    background:var(--white);
    border:2px solid var(--accent);
    font-size:1.02rem;
    font-weight:700;
    color:var(--accent);
}

.proceso-titulo{
    margin-bottom:.55rem;
    font-size:1.02rem;
    font-weight:700;
    color:var(--primary);
}

.proceso-texto{
    font-size:.87rem;
    line-height:1.65;
    color:#5b667c;
}

@media (max-width:900px){
    .proceso-pasos{
        grid-template-columns:repeat(2,1fr);
        gap:2rem 1.4rem;
    }
    .proceso-pasos::before{ display:none; }
}

@media (max-width:560px){
    .proceso-pasos{
        grid-template-columns:1fr;
        gap:1.9rem;
    }
}


/* ------------------------------------------------------------
   FRANJA DE HORARIO Y RESPUESTA (Contacto)
   ------------------------------------------------------------ */
.aviso{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.4rem;
    max-width:900px;
    margin:3rem auto 0;
    padding:1.6rem 1.8rem;
    background:var(--white);
    border:1px solid #e4e9f2;
    border-radius:18px;
}

.aviso-item{
    display:flex;
    align-items:center;
    gap:1rem;
}

.aviso-icono{
    flex:none;
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#fdf1e0;
    color:var(--accent);
}

.aviso-icono svg{ width:24px; height:24px; }

.aviso-texto{
    display:flex;
    flex-direction:column;
    gap:.2rem;
}

.aviso-texto strong{
    font-size:.92rem;
    font-weight:700;
    color:var(--primary);
}

.aviso-texto span{
    font-size:.87rem;
    color:#5b667c;
}

@media (max-width:640px){
    .aviso{
        grid-template-columns:1fr;
        gap:1.2rem;
        padding:1.4rem 1.3rem;
    }
}

/* --- tarjeta de teléfonos con varios números --- */
.contacto-tarjeta--lista{
    cursor:default;
}

/* Se anula el realce al pasar el cursor: esta tarjeta no es un enlace */
.contacto-tarjeta--lista:hover{
    transform:none;
    border-color:#e4e9f2;
    box-shadow:none;
}

.contacto-dato--lista{
    display:flex;
    flex-direction:column;
    gap:.15rem;
    line-height:1.5;
}

.contacto-dato--lista a{
    color:inherit;
    text-decoration:none;
    transition:color .2s ease;
}

.contacto-dato--lista a:hover{ color:var(--accent); }


/* ------------------------------------------------------------
   TESTIMONIOS (Conócenos)
   De momento hay uno: la rejilla se centra sola y admite más sin
   tocar nada.
   ------------------------------------------------------------ */
.testimonios{
    margin-top:4rem;
}

.testimonios-etiqueta{
    margin-bottom:2rem;
    text-align:center;
    font-size:.74rem;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--accent);
}

.testimonios-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
    gap:1.4rem;
    max-width:920px;
    margin:0 auto;
}

.testimonio{
    position:relative;
    padding:2.2rem 2rem 1.9rem;
    background:var(--white);
    border:1px solid #e4e9f2;
    border-radius:18px;
}

.testimonio-comillas{
    display:block;
    width:30px;
    height:30px;
    margin-bottom:1rem;
    color:rgba(244,148,35,.4);
}

.testimonio-comillas svg{
    width:100%;
    height:100%;
    display:block;
}

.testimonio blockquote{
    margin-bottom:1.5rem;
    font-size:1rem;
    line-height:1.8;
    font-style:italic;
    color:#5b667c;
}

.testimonio figcaption strong{
    display:block;
    font-size:.94rem;
    font-weight:700;
    color:var(--primary);
}

.testimonio figcaption span{
    display:block;
    margin-top:.15rem;
    font-size:.83rem;
    color:#8b97ab;
}


/* ------------------------------------------------------------
   REDES SOCIALES EN EL FOOTER
   De momento solo Instagram: es la única red activa del cliente.
   ------------------------------------------------------------ */
.footer-social{
    display:flex;
    gap:.6rem;
    margin-top:1.5rem;
}

.footer-social a{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.14);
    color:rgba(255,255,255,.75);
    transition:background .25s ease, border-color .25s ease,
               color .25s ease, transform .25s ease;
}

.footer-social a:hover,
.footer-social a:focus-visible{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--white);
    transform:translateY(-2px);
}

.footer-social a:focus-visible{
    outline:2px solid var(--white);
    outline-offset:3px;
}

.footer-social svg{
    width:17px;
    height:17px;
    display:block;
}

/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */
@media (max-width:992px){

    .logo{
        width:150px;
    }

    .hero{
        padding:2rem 1.5rem;
    }

    .footer-content{
        grid-template-columns:1fr 1fr;
        gap:2.5rem;
    }

    .footer-marca{
        grid-column:1 / -1;
    }
}

/* ------------------------------------------------------------
   MÓVIL
   ------------------------------------------------------------ */
@media (max-width:768px){

    .hero header{
        top:20px;
        left:20px;
    }

    .logo{
        width:130px;
    }

    .buttons{
        flex-direction:column;
        width:100%;
    }

    .btn-hero{
        width:100%;
        max-width:320px;
    }

    .footer{
        padding:3.5rem 1.5rem 0;
    }

    .footer-content{
        grid-template-columns:1fr;
        gap:2.25rem;
    }

    .footer-marca{
        grid-column:auto;
    }

    .footer-bottom{
        flex-direction:column;
        text-align:center;
    }

    .wa-flotante{
        right:18px;
        bottom:calc(18px + env(safe-area-inset-bottom,0px));
        width:54px;
        height:54px;
    }

    .servicios{
        padding:4rem 1.5rem;
    }

    .cabecera{
        padding:1.15rem 1.25rem;
    }

    .cabecera-contenido{
        flex-direction:column;
        align-items:center;
        gap:.9rem;
    }

    .cabecera-logo img{
        width:112px;
    }

    .cabecera-nav{
        gap:1.5rem;
    }

    .cabecera-nav a{
        font-size:.85rem;
    }

    .pagina{
        padding:3.5rem 1.5rem 4rem;
    }

    .conocenos-bloque{
        grid-template-columns:1fr;
        gap:2.25rem;
    }

    .contacto-form{
        margin-top:3rem;
        padding:2rem 1.5rem;
    }

    .form-campos{
        grid-template-columns:1fr;
    }
}

/* ------------------------------------------------------------
   ACCESIBILIDAD · respeta la preferencia "reducir movimiento"
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){

    .btn-hero,
    .btn-hero::before,
    .btn-hero::after{
        transition-duration:.01ms !important;
        animation:none !important;
    }

    .btn-hero:hover{
        transform:none;
    }

    .wa-flotante,
    .wa-flotante::after{
        transition-duration:.01ms !important;
        animation:none !important;
    }

    a.servicio{
        transition-duration:.01ms !important;
    }

    a.servicio:hover,
    a.servicio:focus-visible{
        transform:none;
    }
}

/* ------------------------------------------------------------
   PANTALLAS DE POCA ALTURA
   El contenido del hero va centrado; en ventanas bajas sube hasta
   chocar con el logo, que esta en position:absolute. Estos valores
   son el borde inferior del logo (150 / 130 / 107 px) mas 24 px de aire.
   Van al final para ganar por orden de aparicion.
   ------------------------------------------------------------ */
@media (max-height:760px){

    .hero{
        padding-top:174px;
    }
}

@media (max-height:760px) and (max-width:992px){

    .hero{
        padding-top:154px;
    }
}

@media (max-height:760px) and (max-width:768px){

    .hero{
        padding-top:130px;
    }
}

/* ------------------------------------------------------------
   GARANTÍA DE ESPACIO PARA EL LOGO — todas las pantallas
   El logo va en position:absolute, así que el centrado flex no lo
   tiene en cuenta: el contenido podía empezar por encima de él en
   pantallas de altura intermedia. Esta regla va AL FINAL a propósito,
   para ganar por orden sobre las media queries y no dejar ningún
   tamaño sin protección.
   ------------------------------------------------------------ */
.hero{
    padding-top:174px;
}

/* Los dos botones del formulario */
.form-botones{
    display:flex;
    flex-wrap:wrap;
    gap:.8rem;
    margin-top:.4rem;
}

.form-boton--correo{
    background:transparent;
    border:2px solid rgba(37,52,113,.35);
    color:#253471;
}

.form-boton--correo:hover,
.form-boton--correo:focus-visible{
    background:rgba(37,52,113,.07);
    border-color:#253471;
}

@media (max-width:560px){
    .form-botones{ flex-direction:column; }
    .form-botones .form-boton{ width:100%; }
}