/* ═══════════════════════════════════════════════════════════════════════════
   TU TEMPLO – main.css v3 · Boutique
   Fondo claro · Playfair Display + Mulish · Vídeo · Editorial
═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Paleta ── */
    --crema:        #F6F2EC;   /* fondo global, crema cálida */
    --crema-alt:    #EEE8DF;   /* secciones alternas */
    --hueso:        #FBF8F3;   /* superficies elevadas */
    --espresso:     #211C16;   /* oscuro principal (hero, footer) */
    --espresso-2:   #2E2820;   /* oscuro secundario */
    --tinta:        #211C16;   /* texto principal */
    --tinta-suave:  #5C5349;   /* texto cuerpo */
    --tinta-tenue:  #948A7D;   /* captions */
    --oro:          #B0894E;   /* acento */
    --oro-claro:    #C9A66B;
    --oro-tenue:    rgba(176,137,78,0.10);
    --borde:        rgba(33,28,22,0.10);
    --borde-oro:    rgba(176,137,78,0.28);

    /* ── Tipografía ── */
    --display: 'Outfit', system-ui, sans-serif;
    --body:    'Mulish', system-ui, sans-serif;

    /* ── Escala ── */
    --fs-xs:0.66rem; --fs-sm:0.82rem; --fs-base:0.98rem; --fs-md:1.1rem;
    --fs-lg:1.4rem; --fs-xl:2rem; --fs-2xl:2.8rem;
    --fs-3xl:clamp(2.2rem,4.5vw,3.8rem);
    --fs-hero:clamp(2.8rem,6.5vw,6rem);

    /* ── Espaciado ── */
    --sp-sm:1rem; --sp-md:2rem; --sp-lg:4rem; --sp-xl:7rem; --sp-2xl:10rem;
    --max-w:1280px; --max-w-texto:760px;
    --radius:2px; --radius-md:6px; --radius-lg:14px;
    --shadow:0 10px 50px rgba(33,28,22,0.10);
    --t:0.35s cubic-bezier(0.22,0.61,0.36,1);
    --t-slow:0.7s cubic-bezier(0.22,0.61,0.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
    font-family:var(--body); font-weight:400; font-size:var(--fs-base);
    line-height:1.8; color:var(--tinta); background:var(--crema);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
input,textarea,select{font-family:inherit;}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;}

/* ── Tipografía ── */
h1,h2,h3,h4,h5,h6{font-family:var(--display);font-weight:400;line-height:1.12;color:var(--tinta);letter-spacing:0.01em;}
h1{font-size:var(--fs-hero);} h2{font-size:var(--fs-3xl);} h3{font-size:var(--fs-xl);}
h4{font-size:var(--fs-lg);} h5{font-size:var(--fs-md);}
h6{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:0.25em;}
p{margin-bottom:1.2em;color:var(--tinta-suave);}
p:last-child{margin-bottom:0;}
strong{font-weight:700;color:var(--tinta);}
em{font-style:italic;color:var(--oro);}

/* ── Contenedor ── */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--sp-lg);}
.container--estrecho{max-width:var(--max-w-texto);}

/* ── Secciones ── */
.seccion{position:relative;overflow:hidden;}
.seccion--crema{background:var(--crema);}
.seccion--alt{background:var(--crema-alt);}
.seccion--hueso{background:var(--hueso);}
.seccion--oscura{background:var(--espresso);}
.seccion--padding{padding:var(--sp-2xl) 0;}
.seccion--padding-md{padding:var(--sp-xl) 0;}
.seccion--oscura h1,.seccion--oscura h2,.seccion--oscura h3,.seccion--oscura h4{color:var(--crema);}
.seccion--oscura p{color:rgba(246,242,236,0.62);}

/* ── Eyebrow ── */
.eyebrow{
    display:inline-flex;align-items:center;gap:0.8rem;
    font-family:var(--body);font-size:0.64rem;font-weight:600;
    letter-spacing:0.38em;text-transform:uppercase;color:var(--oro);margin-bottom:1.2rem;
}
.eyebrow::before{content:'';display:block;width:28px;height:1px;background:var(--oro);}
.eyebrow.centrado{display:flex;justify-content:center;}
.eyebrow.centrado::after{content:'';display:block;width:28px;height:1px;background:var(--oro);}

/* ── Títulos de sección ── */
.titulo{font-family:var(--display);font-size:var(--fs-3xl);font-weight:400;line-height:1.1;color:var(--tinta);letter-spacing:0.005em;}
.titulo.centrado{text-align:center;}
.titulo em{font-style:italic;color:var(--oro);}
.seccion--oscura .titulo{color:var(--crema);}
.subtitulo{font-size:var(--fs-base);color:var(--tinta-suave);max-width:540px;line-height:1.85;margin-top:1.2rem;}
.subtitulo.centrado{text-align:center;margin-left:auto;margin-right:auto;}
.seccion--oscura .subtitulo{color:rgba(246,242,236,0.6);}

/* ── Botones ── */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:0.6rem;
    font-family:var(--body);font-size:0.68rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
    padding:1.05rem 2.6rem;border-radius:var(--radius);transition:all var(--t);
    white-space:nowrap;cursor:pointer;text-decoration:none;border:1px solid transparent;
}
.btn--primario{background:var(--oro);color:#fff;}
.btn--primario:hover{background:var(--tinta);color:var(--crema);transform:translateY(-2px);}
.btn--linea{background:transparent;color:var(--tinta);border-color:var(--borde);}
.btn--linea:hover{border-color:var(--oro);color:var(--oro);}
.btn--claro{background:transparent;color:var(--crema);border-color:rgba(246,242,236,0.35);}
.btn--claro:hover{background:var(--crema);color:var(--tinta);border-color:var(--crema);}
.btn--wa{background:#25D366;color:#fff;}
.btn--wa:hover{background:#1ebe5d;transform:translateY(-2px);}

/* ── Grids ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-xl);align-items:center;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-md);}

/* ── Línea / divisor ── */
.linea{width:44px;height:1px;background:var(--oro);margin:1.6rem 0;}
.linea.centrado{margin-left:auto;margin-right:auto;}

/* ── Badge ── */
.badge{display:inline-block;font-size:0.6rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;padding:0.35rem 0.95rem;border-radius:99px;background:var(--oro-tenue);color:var(--oro);border:1px solid var(--borde-oro);}

/* ── Utils ── */
.text-centro{text-align:center;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:absolute;top:-100%;left:1rem;background:var(--oro);color:#fff;padding:0.5rem 1rem;z-index:9999;transition:top 0.2s;font-size:var(--fs-sm);}
.skip-link:focus{top:1rem;}

/* ── Responsive ── */
@media(max-width:1024px){:root{--sp-lg:2.5rem;--sp-xl:5rem;--sp-2xl:7rem;}}
@media(max-width:768px){
    :root{--sp-lg:1.5rem;--sp-xl:4rem;--sp-2xl:5.5rem;}
    .grid-2{grid-template-columns:1fr;gap:var(--sp-md);}
    .grid-3{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;}}