:root{
  --dark:        #1a1815;
  --dark-2:      #161412;
  --dark-soft:   #211e1a;
  --cream:       #f7f2ea;
  --cream-2:     #f2ece1;
  --accent:      #a97c62;
  --accent-2:    #c79a80;
  --text-light:  #ece6da;
  --text-light-muted: #b6ada0;
  --text-dark:   #34302a;
  --text-dark-muted: #726a5e;
  --hair-light:  rgba(236,230,218,0.16);
  --hair-dark:   rgba(52,48,42,0.18);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Jost', sans-serif;
  font-weight:300;
  background:var(--dark);
  color:var(--text-light);
  margin:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.serif{ font-family:'Cormorant Garamond', serif; font-weight:500; letter-spacing:.2px; }
p{ line-height:1.85; font-weight:300; }

.eyebrow{
  font-family:'Jost', sans-serif; font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--accent-2); font-weight:500;
  margin-bottom:14px; display:inline-block;
}
.section-heading{ font-size:2.1rem; line-height:1.25; margin-bottom:22px; }
@media (min-width:992px){ .section-heading{font-size:2.5rem;} }

.divider{ width:56px; height:1px; background:var(--accent); border:0; margin:0 0 26px 0; opacity:.8; }

.section-dark{ background:var(--dark); color:var(--text-light); }
.section-dark-soft{ background:var(--dark-soft); color:var(--text-light); }
.section-cream{ background:var(--cream); color:var(--text-dark); }
.section-cream .eyebrow{ color:var(--accent); }

.body-text{ color:var(--text-light-muted); font-size:1rem; }
.section-cream .body-text{ color:var(--text-dark-muted); }

section{ padding:100px 0; }
@media (max-width:767px){ section{ padding:64px 0; } }

.photo-frame{ overflow:hidden; position:relative; background:#000; }
.photo-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(35%) sepia(12%) contrast(1.05) brightness(.92);
  transition:transform .8s ease;
}
.photo-frame:hover img{ transform:scale(1.045); }

/* ================= ESTILO VINTAGE / HOJA RASGADA ================= */
.photo-frame.vintage{
  padding:16px;
  background:
    linear-gradient(155deg, #f6efdd 0%, #ece0c2 55%, #f1e6cc 100%);
  box-shadow:
    0 22px 46px rgba(0,0,0,.5),
    0 2px 0 rgba(255,255,255,.15) inset;
  overflow:visible;
}
.photo-frame.vintage img{
  filter:grayscale(45%) sepia(38%) contrast(1.08) brightness(.9) saturate(.9);
}
/* Textura de grano de papel, sutil, sobre todo el recorte */
.photo-frame.vintage::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
  mix-blend-mode:multiply;
  opacity:.22;
  pointer-events:none;
  clip-path:inherit;
}
/* Sombra suave del "papel" recortado, por si el fondo detrás es claro */
.photo-frame.vintage::after{
  content:"";
  position:absolute; inset:0;
  box-shadow:inset 0 0 24px rgba(60,45,25,.18);
  clip-path:inherit;
  pointer-events:none;
}

.torn-1  { clip-path: polygon(0.0% 0%, 12.5% 3.15%, 25.0% 3.61%, 37.5% 5.17%, 50.0% 3.2%, 62.5% 3.38%, 75.0% 3.73%, 87.5% 1.99%, 100.0% 0%, 96.6% 12.5%, 96.09% 25.0%, 95.39% 37.5%, 98.4% 50.0%, 97.5% 62.5%, 98.41% 75.0%, 95.32% 87.5%, 100% 100.0%, 87.5% 95.82%, 75.0% 98.62%, 62.5% 94.58%, 50.0% 94.65%, 37.5% 95.99%, 25.0% 96.15%, 12.5% 98.12%, 0.0% 100%, 1.26% 87.5%, 3.47% 75.0%, 1.46% 62.5%, 2.02% 50.0%, 2.24% 37.5%, 1.33% 25.0%, 3.19% 12.5%); }
.torn-2  { clip-path: polygon(0.0% 0%, 12.5% 5.32%, 25.0% 1.8%, 37.5% 1.3%, 50.0% 5.49%, 62.5% 1.99%, 75.0% 1.72%, 87.5% 4.0%, 100.0% 0%, 97.31% 12.5%, 94.97% 25.0%, 97.8% 37.5%, 94.67% 50.0%, 97.43% 62.5%, 96.22% 75.0%, 94.79% 87.5%, 100% 100.0%, 87.5% 95.85%, 75.0% 94.83%, 62.5% 95.76%, 50.0% 98.59%, 37.5% 95.01%, 25.0% 96.26%, 12.5% 97.46%, 0.0% 100%, 2.02% 87.5%, 4.85% 75.0%, 3.71% 62.5%, 5.23% 50.0%, 4.53% 37.5%, 5.33% 25.0%, 3.64% 12.5%); }
.torn-3  { clip-path: polygon(0.0% 0%, 12.5% 3.65%, 25.0% 3.92%, 37.5% 4.71%, 50.0% 2.39%, 62.5% 4.0%, 75.0% 5.03%, 87.5% 5.11%, 100.0% 0%, 98.0% 12.5%, 96.0% 25.0%, 96.15% 37.5%, 96.64% 50.0%, 94.65% 62.5%, 96.53% 75.0%, 96.89% 87.5%, 100% 100.0%, 87.5% 94.74%, 75.0% 96.07%, 62.5% 97.5%, 50.0% 97.47%, 37.5% 96.67%, 25.0% 98.57%, 12.5% 96.19%, 0.0% 100%, 4.36% 87.5%, 3.03% 75.0%, 4.84% 62.5%, 5.19% 50.0%, 3.59% 37.5%, 4.13% 25.0%, 1.7% 12.5%); }

.tilt-l{ transform:rotate(-1.6deg); }
.tilt-r{ transform:rotate(1.4deg); }
.photo-frame.vintage.tilt-l:hover,
.photo-frame.vintage.tilt-r:hover{ transform:rotate(0deg); }
.photo-frame.vintage{ transition:transform .5s ease; }

/* Pie de foto, tipo etiqueta de archivo/museo, debajo del marco vintage */
.photo-caption{
  margin-top:16px;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:.95rem;
  line-height:1.55;
  color:var(--text-light-muted);
  max-width:46em;
}
.photo-caption::before{
  content:"— ";
  font-style:normal;
  color:var(--accent-2);
}
.section-cream .photo-caption{ color:var(--text-dark-muted); }
.section-cream .photo-caption::before{ color:var(--accent); }

/* ================= FOG HERO (banner inicial) ================= */
.fog-hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:#0c0b09;
}
.fog-hero .bg-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(30%) brightness(.55) contrast(1.05);
  transform:scale(1.06);
}
.fog-hero .scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,9,7,.55) 0%, rgba(10,9,7,.35) 40%, rgba(10,9,7,.85) 100%);
}
.fog-layer{
  position:absolute;
  top:-10%; height:120%;
  width:160%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 68%);
  filter:blur(18px);
  mix-blend-mode:screen;
  opacity:.35;
  pointer-events:none;
}
.fog-1{ left:-40%; animation:fogDrift1 46s linear infinite; opacity:.28; }
.fog-2{ left:-60%; top:10%; height:90%; animation:fogDrift2 62s linear infinite; opacity:.22; }
.fog-3{ left:-30%; top:35%; height:70%; animation:fogDrift3 38s linear infinite; opacity:.18; }

@keyframes fogDrift1{
  0%{ transform:translateX(0); }
  50%{ transform:translateX(18%); }
  100%{ transform:translateX(0); }
}
@keyframes fogDrift2{
  0%{ transform:translateX(0); }
  50%{ transform:translateX(-14%); }
  100%{ transform:translateX(0); }
}
@keyframes fogDrift3{
  0%{ transform:translateX(0); }
  50%{ transform:translateX(10%); }
  100%{ transform:translateX(0); }
}

.fog-hero .content{
  position:relative; z-index:3; text-align:center; max-width:760px; padding:0 24px;
}
.fog-hero .eyebrow{
  opacity:0; transform:translateY(14px);
  animation:fogFadeUp 1.2s ease 2.9s forwards;
}
.fog-hero h1{
  font-size:3.4rem; margin:14px 0 22px; color:var(--text-light);
  opacity:0; transform:translateY(18px);
  animation:fogFadeUp 1.3s ease 3.15s forwards;
}
@media (min-width:992px){ .fog-hero h1{ font-size:5rem; } }
.fog-hero .fog-subtitle{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.25rem;
  color:var(--text-light-muted); max-width:560px; margin:0 auto;
  opacity:0; transform:translateY(18px);
  animation:fogFadeUp 1.3s ease 3.45s forwards;
}
@keyframes fogFadeUp{ to{ opacity:1; transform:translateY(0); } }

.fog-hero .scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  z-index:3; color:var(--text-light-muted); opacity:0;
  animation:fogFadeUp 1s ease 3.9s forwards, bob 2.6s ease-in-out 4.6s infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

@media (prefers-reduced-motion: reduce){
  .fog-layer{ animation:none !important; }
  .fog-hero .eyebrow, .fog-hero h1, .fog-hero .fog-subtitle, .fog-hero .scroll-cue{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}

/* ================= PRECARGADOR (bruma + logo) ================= */
.preloader{
  position:fixed; inset:0; z-index:5000;
  background:#0b0a08;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition:opacity 1.15s ease, visibility 1.15s ease, filter 1.15s ease;
}
.preloader.hide{ opacity:0; visibility:hidden; filter:blur(8px); pointer-events:none; }

.preloader-fog{ position:absolute; inset:0; }
.pf-layer{
  position:absolute; width:180%; height:140%; left:-40%; top:-20%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 65%);
  filter:blur(40px);
  mix-blend-mode:screen;
  opacity:.35;
}
.pf-1{ animation:pfDrift1 8s ease-in-out infinite; }
.pf-2{ top:10%; opacity:.25; animation:pfDrift2 11s ease-in-out infinite; }
.pf-3{ top:35%; opacity:.2; animation:pfDrift3 6.5s ease-in-out infinite; }
@keyframes pfDrift1{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(6%); } }
@keyframes pfDrift2{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-5%); } }
@keyframes pfDrift3{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(4%); } }

.preloader-badge{
  position:relative; z-index:2;
  width:260px; height:260px;
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:576px){ .preloader-badge{ width:200px; height:200px; } }

/* Anillo dorado girando lentamente alrededor del logo */
.preloader-ring{
  position:absolute; inset:-18px;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0deg, var(--accent-2) 32deg, transparent 78deg,
    transparent 260deg, var(--accent-2) 312deg, transparent 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  opacity:0;
  animation:ringSpin 4.2s linear infinite, ringFadeIn .8s ease .6s forwards;
}
@keyframes ringSpin{ to{ transform:rotate(360deg); } }
@keyframes ringFadeIn{ to{ opacity:.85; } }

.preloader-logo-wrap{
  position:relative;
  width:100%; height:100%;
  border-radius:50%;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 38%, rgba(150,90,55,.4), rgba(11,10,8,0) 70%);
}
.preloader-logo{
  width:66%; height:66%; object-fit:contain;
  opacity:0;
  filter:blur(20px) brightness(1.3);
  transform:scale(.82);
  animation:logoReveal 2.2s cubic-bezier(.16,.9,.35,1) forwards .25s;
}
@keyframes logoReveal{
  0%{ opacity:0; filter:blur(24px) brightness(1.4); transform:scale(.8); }
  55%{ opacity:1; filter:blur(6px) brightness(1.1); transform:scale(1.02); }
  100%{ opacity:1; filter:blur(0) brightness(1); transform:scale(1); }
}

/* Brillo que barre de lado a lado, como un reflejo sobre metal/vidrio */
.preloader-shine{
  position:absolute; top:-60%; left:-70%; width:45%; height:220%;
  background:linear-gradient(75deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 100%);
  transform:rotate(15deg);
  mix-blend-mode:screen;
  opacity:0;
  animation:shineSweep 2.6s ease-in-out 1.4s infinite;
  pointer-events:none;
}
@keyframes shineSweep{
  0%{ left:-70%; opacity:0; }
  8%{ opacity:.9; }
  38%{ opacity:.9; }
  50%{ left:140%; opacity:0; }
  100%{ left:140%; opacity:0; }
}

body.preloading{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .pf-layer{ animation:none !important; }
  .preloader-logo{ animation:none !important; opacity:1; filter:none; transform:none; }
  .preloader-ring{ animation:none !important; opacity:.85; }
  .preloader-shine{ animation:none !important; opacity:0; }
  .preloader{ transition:opacity .3s ease, visibility .3s ease; }
}

/* ================= HERO EMBLEMA ================= */
.hero{
  position:relative; min-height:70vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(120,70,40,.35), transparent 60%),
    radial-gradient(ellipse at 50% 60%, rgba(60,35,25,.6), var(--dark) 75%),
    var(--dark);
  overflow:hidden;
}
.hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, var(--dark) 100%); }
.hero-frame{
  position:relative; width:410px; height:410px; border-radius:50%;
  background:radial-gradient(circle at 50% 38%, rgba(150,90,55,.45), rgba(20,15,10,0) 72%);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.hero-emblem{ width:99%; height:99%; object-fit:contain; filter:drop-shadow(0 10px 20px rgba(0,0,0,.5)); }

.mini-frame{
  width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle at 50% 38%, rgba(130,80,48,.3), var(--dark-2) 72%);
  border:1px solid var(--hair-light);
  box-shadow:0 22px 48px rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; margin-bottom:24px;
}
.mini-frame .hero-emblem{ width:66%; height:66%; opacity:1; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4)); }

/* ================= TRAVESIA CARDS ================= */
.card-travesia{ position:relative; height:340px; overflow:hidden; }
.card-travesia img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(55%) sepia(10%) contrast(1.05) brightness(.55);
}
.card-travesia .overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(10,9,8,.92) 92%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:22px;
}
.card-travesia .num{
  border:1px solid var(--accent-2); color:var(--accent-2); width:30px;height:30px;
  display:flex;align-items:center;justify-content:center; font-family:'Cormorant Garamond',serif;
  font-size:.95rem; margin-bottom:14px;
}
.card-travesia h5{ font-family:'Cormorant Garamond',serif; font-size:1.35rem; margin-bottom:8px; color:var(--text-light); }
.card-travesia p{ font-size:.86rem; color:var(--text-light-muted); margin:0; }

/* ================= BANNERS ================= */
.banner{ position:relative; min-height:70vh; display:flex; align-items:center; overflow:hidden; color:var(--text-light); }
.banner img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(45%) contrast(1.05) brightness(.55); z-index:0;
}
.banner .scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,9,8,.35), rgba(10,9,8,.85) 88%); }
.banner .content{ position:relative; z-index:2; }
.banner-center{ text-align:center; }
.banner-center .eyebrow{ color:var(--accent-2); }
.banner-italic{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.5rem; color:var(--text-light); }

.gallery-btn{
  width:52px;height:52px; border:1px solid var(--hair-light); border-radius:50%;
  display:flex;align-items:center;justify-content:center; color:var(--text-light);
  background:rgba(255,255,255,.03); transition:.25s;
}
.gallery-btn:hover{ background:var(--accent); border-color:var(--accent); color:#141210; }

/* ================= PREP CARDS ================= */
.prep-card{ background:transparent; border:1px solid var(--hair-dark); padding:32px 26px; height:100%; }
.prep-card .icon{ color:var(--accent); margin-bottom:14px; }
.prep-card h6{
  font-family:'Jost',sans-serif; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase;
  font-weight:600; color:var(--text-dark); margin-bottom:12px;
}
.prep-card p{ font-size:.9rem; color:var(--text-dark-muted); margin:0; }

/* ================= TABS VOCES ================= */
.voces-tabs{ display:flex; flex-wrap:wrap; gap:34px; border-bottom:1px solid var(--hair-light); margin-bottom:36px; }
.voces-tabs button{
  background:none; border:0; padding:0 0 16px 0; font-family:'Jost',sans-serif; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-light-muted); position:relative; cursor:pointer;
}
.voces-tabs button.active{ color:var(--accent-2); }
.voces-tabs button.active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--accent); }
.glossary-card{ border:1px solid var(--hair-light); padding:26px 28px; height:100%; background:rgba(255,255,255,.015); }
.glossary-card .phon{ font-family:'Jost',sans-serif; font-size:.72rem; letter-spacing:.12em; color:var(--text-light-muted); margin-bottom:8px; display:block; }
.glossary-card h5{ color:var(--accent-2); font-size:1.4rem; margin-bottom:10px; }
.glossary-card p{ font-size:.9rem; color:var(--text-light-muted); margin:0; }
.tab-pane-custom{ display:none; }
.tab-pane-custom.active{ display:block; }

/* ================= FORM ================= */
.form-shell{ border:1px solid var(--hair-light); padding:48px; }
@media (max-width:767px){ .form-shell{ padding:26px; } }
.section-tag{
  font-family:'Cormorant Garamond', serif; font-variant:small-caps; letter-spacing:.06em; color:var(--accent-2);
  font-size:1.15rem; border-bottom:1px solid var(--hair-light); padding-bottom:14px; margin:44px 0 26px 0;
}
.section-tag:first-of-type{ margin-top:0; }
.form-label-custom{
  font-family:'Jost',sans-serif; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-light); font-weight:500; margin-bottom:10px;
}
.form-control-custom, textarea.form-control-custom{
  background:transparent; border:0; border-bottom:1px solid var(--hair-light); border-radius:0;
  color:var(--text-light); padding:8px 2px; font-family:'Jost',sans-serif; font-weight:300; width:100%;
}
.form-control-custom::placeholder{ color:#5d564c; }
.form-control-custom:focus{ outline:none; box-shadow:none; border-color:var(--accent); background:transparent; color:var(--text-light); }
textarea.form-control-custom{ border:1px solid var(--hair-light); padding:14px; min-height:110px; }
.form-check-custom{ display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:.92rem; color:var(--text-light-muted); }
.form-check-custom input[type=radio], .form-check-custom input[type=checkbox]{ accent-color:var(--accent); width:15px;height:15px; }
.warning-box{ border:1px solid rgba(180,90,70,.4); background:rgba(120,60,40,.08); padding:22px 26px; font-size:.88rem; color:var(--text-light-muted); }
.warning-box .wi{ color:#c2765b; }

.form-flash{ padding:18px 24px; font-size:.92rem; border:1px solid; }
.form-flash-ok{ background:rgba(90,140,100,.1); border-color:rgba(90,140,100,.4); color:#bfe0c9; }
.form-flash-error{ background:rgba(180,90,70,.1); border-color:rgba(180,90,70,.4); color:#e2a596; }
.info-box{ border:1px solid var(--hair-light); padding:26px 28px; height:100%; }
.info-box h6{ font-family:'Jost',sans-serif; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-2); margin-bottom:14px; }
.info-box ul{ padding-left:18px; margin:0; }
.info-box li{ font-size:.88rem; color:var(--text-light-muted); margin-bottom:10px; }
.btn-submit{
  width:56px;height:56px; background:var(--accent-2); border:0; display:flex; align-items:center; justify-content:center;
  color:#171310; transition:.25s; cursor:pointer;
}
.btn-submit:hover{ background:var(--accent); }

footer{ border-top:1px solid var(--hair-light); padding:34px 0; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-light-muted); }

::selection{ background:var(--accent); color:#171310; }

/* ================= MENÚ DE NAVEGACIÓN ================= */
[id]{ scroll-margin-top:88px; }

.top-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 30px;
  background:linear-gradient(180deg, rgba(10,9,7,.55), transparent);
  transition:background .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.top-nav.scrolled{
  background:rgba(18,16,13,.92);
  backdrop-filter:blur(8px);
  padding:14px 30px;
  border-bottom-color:var(--hair-light);
}
.top-nav .brand{
  font-family:'Cormorant Garamond', serif; font-size:1.4rem; letter-spacing:.03em;
  color:var(--text-light); text-decoration:none;
}
.top-nav-right{ display:flex; align-items:center; gap:16px; }

.nav-toggle{
  width:46px; height:46px; border:1px solid var(--hair-light);
  background:rgba(255,255,255,.03); color:var(--text-light);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:.2s; flex-shrink:0;
}
.nav-toggle:hover{ background:var(--accent); border-color:var(--accent); color:#171310; }

/* ================= SELECTOR DE IDIOMA ================= */
.lang-switch{ display:flex; align-items:center; gap:6px; }
.lang-btn{
  background:transparent; border:1px solid var(--hair-light);
  color:var(--text-light-muted);
  font-family:'Jost', sans-serif; font-size:.72rem; letter-spacing:.08em;
  padding:6px 11px; cursor:pointer; transition:.2s;
}
.lang-btn:hover{ color:var(--text-light); border-color:var(--accent-2); }
.lang-btn.active{ background:var(--accent-2); border-color:var(--accent-2); color:#171310; }
.lang-sep{ color:var(--text-light-muted); font-size:.72rem; }

.lang-switch-panel{
  margin-top:34px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08);
  gap:10px;
}
.lang-switch-panel .lang-btn{ flex:1; text-align:center; padding:10px; }

/* Contenedor del widget de Google Translate: técnicamente presente en el
   DOM (Google lo necesita para funcionar) pero invisible para el visitante. */
.goog-hidden-widget{
  position:absolute; left:-9999px; top:-9999px;
  width:1px; height:1px; overflow:hidden;
}
/* Oculta toda la interfaz que Google intenta agregar por su cuenta */
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover{ display:none !important; visibility:hidden !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }
body{ top:0 !important; position:static !important; }
.skiptranslate{ display:none !important; }


.nav-backdrop{
  position:fixed; inset:0; z-index:1050; background:rgba(8,7,6,.55);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.nav-backdrop.open{ opacity:1; pointer-events:auto; }

.nav-panel{
  position:fixed; top:0; right:0; height:100vh; width:380px; max-width:90vw;
  background:#161310; border-left:1px solid var(--hair-light);
  z-index:1100; transform:translateX(100%); transition:transform .45s cubic-bezier(.4,0,.2,1);
  overflow-y:auto; padding:90px 40px 50px;
}
.nav-panel.open{ transform:translateX(0); }
.nav-panel-title{
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-2);
  margin-bottom:28px;
}
.nav-close{
  position:absolute; top:26px; right:28px; width:38px; height:38px; border:1px solid var(--hair-light);
  background:transparent; color:var(--text-light); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.2s;
}
.nav-close:hover{ background:var(--accent); border-color:var(--accent); color:#171310; }
.nav-panel ol{ list-style:none; margin:0; padding:0; counter-reset:navsec; }
.nav-panel li{ counter-increment:navsec; }
.nav-panel a{
  display:flex; gap:16px; align-items:baseline; padding:13px 0;
  color:var(--text-light-muted); font-size:.96rem; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.06); transition:.2s;
}
.nav-panel a::before{
  content: counter(navsec, decimal-leading-zero);
  font-family:'Cormorant Garamond', serif; color:var(--accent); font-size:.88rem; flex-shrink:0;
}
.nav-panel a:hover{ color:var(--text-light); padding-left:8px; }

body.nav-open-lock{ overflow:hidden; }

/* ================= BRUMA QUE SIGUE AL MOUSE ================= */
.mouse-fog{
  position:absolute; top:0; left:0;
  width:560px; height:560px;
  background:radial-gradient(circle, rgba(255,255,255,.45) 0%, rgba(255,255,255,.12) 45%, rgba(255,255,255,0) 72%);
  filter:blur(34px);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:2;
  opacity:0;
  transition:opacity .5s ease;
}
.fog-hero:hover .mouse-fog{ opacity:.6; }
@media (hover:none){ .mouse-fog{ display:none; } }

/* ================= WHATSAPP FLOTANTE ================= */
.whatsapp-float{
  position:fixed; bottom:26px; right:26px; z-index:900;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(0,0,0,.4);
  transition:transform .25s ease, box-shadow .25s ease;
}
.whatsapp-float:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.5); color:#fff; }

/* ================= FOOTER: contacto y redes ================= */
footer .footer-row{
  display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center; justify-content:space-between;
}
.footer-contact-block{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  text-transform:none; letter-spacing:normal;
}
.footer-email{
  color:var(--text-light-muted); font-size:.8rem; letter-spacing:.05em; text-transform:none;
}
.footer-email:hover{ color:var(--accent-2); }
.footer-socials{ display:flex; gap:14px; }
.footer-socials a{
  color:var(--text-light-muted); display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border:1px solid var(--hair-light); border-radius:50%; transition:.2s;
}
.footer-socials a:hover{ color:#171310; background:var(--accent-2); border-color:var(--accent-2); }

@media (max-width:767px){
  .whatsapp-float{ bottom:18px; right:18px; width:52px; height:52px; }
  .nav-panel{ padding:80px 26px 40px; }
}