/* =========================================
   IMPREGNADORA SAN JORGE
   style.css
   Estilos globales
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Headline:wght@200..700&display=swap');
:root{
    --sj-primary:#991A1E;
    --sj-primary-dark:#7A1417;
    --sj-primary-soft:#B52A2F;

    --sj-secondary:#1A5F31;
    --sj-secondary-dark:#124322;
    --sj-secondary-soft:#2E7D4A;

    --sj-tertiary:#473212;
    --sj-tertiary-soft:#6A4A2A;

    --sj-dark:#252525;
    --sj-text:#444444;
    --sj-muted:#6f6f6f;
    --sj-border:#e7e2da;
    --sj-light:#f7f4ef;
    --sj-white:#ffffff;
    --sj-black:#000000;

    --sj-shadow:0 14px 34px rgba(0,0,0,.10);
    --sj-shadow-soft:0 8px 22px rgba(0,0,0,.07);

    --sj-radius:5px;
    --sj-bottom-nav-height:76px;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:"Google Sans Flex", Helvetica, sans-serif;
    color:var(--sj-text);
    background:var(--sj-white);
    overflow-x:hidden;
    padding-bottom:calc(var(--sj-bottom-nav-height) + env(safe-area-inset-bottom));
}

img,
video{
    max-width:100%;
}

a{
    color:var(--sj-primary);
    text-decoration:none;
    transition:all .22s ease;
}

a:hover{
    color:var(--sj-primary-dark);
}

strong a{
    color:var(--sj-primary);
    font-weight:800;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
}

strong a:hover{
    color:var(--sj-secondary);
}

p{
    font-size:1.02rem;
    line-height:1.75;
    margin-bottom:1rem;
}

h1,
h2,
h3,
h4,
h5,
h6{
    font-family: "Stack Sans Headline", sans-serif;
    color:var(--sj-dark);
    font-weight:800;
    line-height:1.15;
    margin-bottom:1rem;
}

h1{
    font-size:clamp(2.4rem,5vw,4.8rem);
    letter-spacing:-.04em;
}

h2{
    font-size:clamp(2rem,3.4vw,3.4rem);
    letter-spacing:-.035em;
}

h3{
    font-size:1.25rem;
}

.sj-container{
    width:100%;
    max-width:1320px;
    margin:0 auto;
    padding-left:32px;
    padding-right:32px;
}

.sj-section{
    position:relative;
    padding:100px 0;
}

.sj-section-kicker,
.sj-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--sj-primary);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.82rem;
    margin-bottom:18px;
}

.sj-section-kicker:before,
.sj-kicker:before,
.sj-section-kicker:after,
.sj-kicker:after{
    content:"";
    width:34px;
    height:3px;
    background:var(--sj-secondary);
}

.sj-section-head{
    max-width:850px;
    margin:0 auto 52px;
}

.sj-section-head p{
    font-size:1.08rem;
    color:var(--sj-muted);
}

.sj-img-rounded{
    border-radius:var(--sj-radius);
    box-shadow:var(--sj-shadow);
    width:100%;
    object-fit:cover;
}

.btn-sj-primary,
.btn-sj-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:14px 26px;
    border-radius:var(--sj-radius);
    font-weight:800;
    line-height:1;
    border:2px solid transparent;
    box-shadow:none;
}

.btn-sj-primary{
    background:var(--sj-primary);
    color:var(--sj-white);
    border-color:var(--sj-primary);
}

.btn-sj-primary:hover{
    background:var(--sj-primary-dark);
    border-color:var(--sj-primary-dark);
    color:var(--sj-white);
    transform:translateY(-2px);
}

.btn-sj-outline{
    background:rgba(255,255,255,.08);
    color:var(--sj-white);
    border-color:rgba(255,255,255,.78);
    backdrop-filter:blur(6px);
}

.btn-sj-outline:hover{
    background:var(--sj-white);
    color:var(--sj-primary);
    border-color:var(--sj-white);
    transform:translateY(-2px);
}

/* Barra inferior */
.sj-bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1040;
    background:#473212;
    border-top:3px solid #991A1E;
    box-shadow:0 -8px 22px rgba(0,0,0,.18);
}

.sj-bottom-nav-container{
    width:100%;
    max-width:520px;
    height:76px;
    margin:0 auto;
    padding:0 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.sj-bottom-item{
    width:104px;
    height:54px;
    border:0;
    border-radius:2px;
    background:rgba(255,255,255,.08);
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-size:.78rem;
    font-weight:800;
    padding: 35px;
}

.sj-bottom-item i{
    font-size:1.35rem;
    line-height:1;
}

.sj-bottom-item:hover{
    background:#991A1E;
    color:#fff;
}

.sj-bottom-whatsapp{
    background:#1A5F31;
    color:#fff;
}

.sj-bottom-whatsapp:hover{
    background:#124322;
}

/* Variante vertical solicitada: icono arriba y texto abajo */
.sj-floating-menu{
    position:fixed;
    left:50%;
    bottom:80px;              /* exactamente la altura de la barra */
    z-index:1050;
    width:520px;
    max-width:calc(100% - 24px);
    background:#fff;
    border:1px solid rgba(0,0,0,.12);
    border-bottom:none;
    border-radius:5px 5px 0 0;    /* sólo esquinas superiores */
    box-shadow:0 -8px 25px rgba(0,0,0,.12);
    padding:8px;
    opacity:0;
    visibility:hidden;
    transform:translateX(-50%) translateY(10px);
    transition:.20s ease;
}

.sj-floating-menu.is-active{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}

.sj-floating-menu a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    border-radius:4px;
}

.sj-floating-menu a:hover{
    background:#991A1E;
    color:#fff;
}