/* ============================================================
   BEBA SERRA — bebaserra.com
   Paleta: negro profundo · dorado champagne · marfil · blanco
   Tipografía: Cormorant Garamond (display) · Jost (utilidad)
   ============================================================ */

:root{
  --negro:#0A0908;
  --superficie:#12100C;
  --oro:#C6A15B;
  --oro-claro:#E9D3A4;
  --oro-profundo:#9A7A44;
  --marfil:#F4EDDF;
  --blanco:#FFFFFF;
  --linea:rgba(198,161,91,.30);
  --linea-suave:rgba(198,161,91,.16);
  --fd:"Cormorant Garamond",Georgia,serif;
  --fu:"Jost",-apple-system,"Segoe UI",sans-serif;
  --ancho:1160px;
  --pad:clamp(1.25rem,5vw,2.5rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--negro);
  color:var(--marfil);
  font-family:var(--fu);
  font-weight:300;
  font-size:1.0rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--oro-claro);text-decoration:none}
::selection{background:var(--oro);color:var(--negro)}

h1,h2,h3{font-family:var(--fd);font-weight:500;line-height:1.15;color:var(--oro)}
h1{font-size:clamp(2.1rem,6vw,3.6rem)}
h2{font-size:clamp(1.8rem,4.5vw,2.7rem)}
h3{font-size:clamp(1.45rem,3vw,1.9rem)}
strong{font-weight:400;color:var(--blanco)}

.wrap{max-width:var(--ancho);margin:0 auto;padding-inline:var(--pad)}

/* ---------- eyebrow + tags ---------- */
.eyebrow{
  font-family:var(--fu);font-weight:400;font-size:.72rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--oro);
  display:block;margin-bottom:1rem;
}
.tag{
  display:inline-block;font-size:.68rem;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;color:var(--oro-claro);
  border:1px solid var(--linea);padding:.5em 1.1em .42em;
  white-space:nowrap;
}

/* ---------- botones ---------- */
.btn{
  display:inline-block;font-family:var(--fu);font-weight:400;
  font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;
  padding:1em 2.1em .92em;border:1px solid var(--oro);
  color:var(--oro-claro);background:transparent;cursor:pointer;
  transition:background .35s ease,color .35s ease;
  text-align:center;
}
.btn:hover,.btn:focus-visible{background:var(--oro);color:var(--negro)}
.btn--solid{background:var(--oro);color:var(--negro)}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--oro-claro);border-color:var(--oro-claro);color:var(--negro)}
.btn:focus-visible{outline:2px solid var(--oro-claro);outline-offset:3px}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}

/* ---------- header ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  transition:background .4s ease,box-shadow .4s ease;
  background:transparent;
}
.header.scrolled,.header.menu-open{
  background:rgba(10,9,8,.94);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--linea-suave);
}
.header__bar{
  max-width:var(--ancho);margin:0 auto;padding:0 var(--pad);
  height:76px;display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.85rem;color:var(--marfil)}
.brand img{height:44px;width:auto}
.brand span{
  font-family:var(--fu);font-weight:400;font-size:.86rem;
  letter-spacing:.42em;text-transform:uppercase;color:var(--marfil);
  transform:translateY(1px);
}
.nav{display:none}
.nav a{
  font-size:.74rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  color:var(--marfil);padding:.6em .2em;margin-left:1.6rem;
  border-bottom:1px solid transparent;transition:color .3s,border-color .3s;
}
.nav a:hover,.nav a:focus-visible{color:var(--oro-claro)}
.nav a[aria-current="page"]{color:var(--oro);border-bottom-color:var(--oro)}

.menu-btn{
  display:flex;flex-direction:column;justify-content:center;gap:7px;
  width:44px;height:44px;background:none;border:none;cursor:pointer;padding:10px;
}
.menu-btn span{display:block;height:1px;background:var(--oro-claro);transition:transform .35s ease,opacity .35s ease}
.menu-open .menu-btn span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-open .menu-btn span:last-child{transform:translateY(-4px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:40;background:var(--negro);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pad);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;
}
.menu-open .mobile-menu{opacity:1;visibility:visible}
.mobile-menu a{
  font-family:var(--fd);font-size:clamp(1.7rem,7vw,2.4rem);font-weight:500;
  color:var(--marfil);padding:.55em 0;border-bottom:1px solid var(--linea-suave);
}
.mobile-menu a[aria-current="page"]{color:var(--oro)}
.mobile-menu a:hover{color:var(--oro-claro)}

@media(min-width:1024px){
  .nav{display:flex;align-items:center}
  .menu-btn,.mobile-menu{display:none}
}

/* ---------- hero (inicio) ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  isolation:isolate;overflow:hidden;
}
.hero__img{position:absolute;inset:0;z-index:-2}
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:70% 22%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(10,9,8,.55) 0%,rgba(10,9,8,.15) 32%,rgba(10,9,8,.86) 78%,var(--negro) 100%),
    linear-gradient(100deg,rgba(10,9,8,.9) 0%,rgba(10,9,8,.45) 46%,rgba(10,9,8,.05) 75%);
}
.hero__content{max-width:var(--ancho);width:100%;margin:0 auto;padding:9rem var(--pad) 4.5rem}
.hero__content h1{max-width:15ch;color:var(--oro-claro)}
.hero__lead{max-width:52ch;margin-top:1.6rem;color:var(--marfil)}
.hero__firma{font-family:var(--fd);font-style:italic;font-size:1.35rem;color:var(--oro);margin-top:1.4rem}
.hero__bienvenida{font-family:var(--fd);font-size:1.3rem;color:var(--blanco);margin-top:1.4rem}

/* ---------- secciones ---------- */
.seccion{padding:clamp(4rem,10vw,7rem) 0}
.seccion--linea{border-top:1px solid var(--linea-suave)}
.seccion__cabeza{margin-bottom:clamp(2.2rem,6vw,3.6rem)}

/* ---------- marcos de imagen / placeholders ---------- */
.marco{
  position:relative;background:var(--superficie);
  border:1px solid var(--linea);overflow:hidden;
}
.marco::after{
  content:"";position:absolute;inset:10px;
  border:1px solid var(--linea-suave);pointer-events:none;
}
.marco img{width:100%;height:100%;object-fit:cover}
.marco--vacio{display:flex;align-items:center;justify-content:center}
.marco--vacio::before{
  content:"";width:38%;aspect-ratio:220/412;
  background:url("../img/monograma.png") center/contain no-repeat;
  opacity:.10;
}
.r34{aspect-ratio:3/4}
.r45{aspect-ratio:4/5}
.r11{aspect-ratio:1/1}
.r169{aspect-ratio:16/10}

/* muestra visual: 4 espacios */
.galeria4{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.8rem,2.5vw,1.6rem)}
@media(min-width:720px){.galeria4{grid-template-columns:repeat(4,1fr)}}

/* ---------- bloque dividido (texto + imagen) ---------- */
.split{display:grid;gap:2.4rem;align-items:center}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem)}
  .split--invertido .split__media{order:2}
}
.split__texto p{margin-top:1.1rem;max-width:56ch}
.split__texto h2,.split__texto h3{max-width:22ch}

/* ---------- filas "próximamente" en inicio ---------- */
.prox{border-top:1px solid var(--linea-suave)}
.prox a{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.9rem 0;border-bottom:1px solid var(--linea-suave);
  transition:padding-left .35s ease;
}
.prox a:hover{padding-left:.6rem}
.prox h3{color:var(--marfil);transition:color .3s}
.prox a:hover h3{color:var(--oro-claro)}

/* ---------- página interior: cabecera ---------- */
.page-hero{
  padding:11rem 0 clamp(3rem,7vw,4.5rem);
  border-bottom:1px solid var(--linea-suave);
  position:relative;overflow:hidden;
}
.page-hero--centro{text-align:center}
.page-hero--centro .eyebrow{margin-bottom:1.2rem}
.page-hero__marca{
  position:absolute;right:-4%;top:14%;height:130%;opacity:.05;z-index:-1;
  user-select:none;pointer-events:none;
}

/* ---------- bloques de producto ---------- */
.producto{padding:clamp(3.2rem,8vw,5.5rem) 0;border-bottom:1px solid var(--linea-suave)}
.producto:last-of-type{border-bottom:none}
.producto .split__media{max-width:440px;justify-self:center}
@media(min-width:900px){.producto .split__media{justify-self:stretch}}
.producto p{margin-top:1.05rem;max-width:58ch}
.producto .btn{margin-top:1.9rem}

/* ---------- testimonios ---------- */
.cards3{display:grid;gap:1.6rem}
@media(min-width:820px){.cards3{grid-template-columns:repeat(3,1fr)}}
.t-card{border:1px solid var(--linea);background:var(--superficie);padding:1.4rem}
.t-card .marco{margin-bottom:1.3rem}
.t-slot{height:1px;background:var(--linea-suave);margin:1.15rem 0}
.t-slot--corto{width:55%}

/* ---------- comunidad ---------- */
.cards2{display:grid;gap:1.6rem}
@media(min-width:720px){.cards2{grid-template-columns:repeat(2,1fr)}}
.s-card{
  border:1px solid var(--linea);background:var(--superficie);
  padding:2.1rem 1.8rem;display:flex;flex-direction:column;gap:1.1rem;
  min-height:250px;
}
.s-card__logo{width:52px;height:52px;border:1px solid var(--linea);flex:none;
  display:flex;align-items:center;justify-content:center}
.s-card h3{color:var(--marfil)}
.s-card .tag{align-self:flex-start;margin-top:auto}

/* ---------- sobre ---------- */
.lista-secciones{border-top:1px solid var(--linea-suave)}
.lista-secciones li{
  list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;padding:1.45rem 0;border-bottom:1px solid var(--linea-suave);
}
.lista-secciones h3{font-size:clamp(1.25rem,2.4vw,1.55rem);color:var(--marfil)}

/* ---------- aviso ---------- */
.aviso{
  font-size:.82rem;line-height:1.7;color:var(--marfil);opacity:.9;
  border-top:1px solid var(--linea-suave);padding-top:1.6rem;max-width:62ch;
}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--linea);padding:3.5rem 0 2.5rem;margin-top:clamp(3rem,8vw,5rem)}
.footer__grid{display:grid;gap:2.2rem}
@media(min-width:820px){.footer__grid{grid-template-columns:1fr auto;align-items:start}}
.footer .brand img{height:56px}
.footer__nav{display:flex;flex-direction:column;gap:.55rem}
@media(min-width:820px){.footer__nav{text-align:right}}
.footer__nav a{font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--marfil)}
.footer__nav a:hover{color:var(--oro-claro)}
.footer__base{
  margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--linea-suave);
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  font-size:.78rem;letter-spacing:.06em;color:var(--marfil);
}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.nav a,.prox a{transition:none}
}

/* ---------- utilidades de página ---------- */
.cabeza-flex{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.page-hero--alto{min-height:72svh;display:flex;align-items:center;border-bottom:none}
.page-hero__marca--centro{right:auto;left:50%;transform:translateX(-50%);opacity:.045}
.espacio-tag{margin-top:2.2rem}
.aviso--sep{margin-top:2.6rem}
.galeria2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.8rem,2.5vw,1.6rem)}
.wrap--lleno{width:100%}

/* ---------- fotografías de producto (fondo claro, sin recortes) ---------- */
.marco--producto{background:#F7F7F7}
.marco--producto img{object-fit:contain;padding:6%}

/* ---------- nota de responsabilidad ---------- */
.nota-info{
  background:var(--superficie);border:1px solid var(--oro);
  padding:clamp(1.6rem,4vw,2.6rem);max-width:860px;margin:0 auto;
}
.nota-info__titulo{
  display:flex;align-items:center;gap:.6em;
  font-size:clamp(1.35rem,2.6vw,1.7rem);margin-bottom:1rem;
}
.nota-info p{margin-top:.9rem;color:var(--marfil)}
.icono{width:1.15em;height:1.15em;flex:none;color:var(--oro)}

/* ---------- comunidad ---------- */
.intro-com{max-width:760px}
.intro-com p{margin-top:1.1rem}
.frase-destacada{
  font-family:var(--fd);font-weight:500;color:var(--oro);
  font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.3;margin-top:2rem;
}
.frase-destacada--media{font-size:clamp(1.25rem,2.6vw,1.6rem);margin-top:1.4rem}
.s-card{min-height:0}
.s-card__cima{display:flex;align-items:center;gap:.85rem}
.s-card__cima .icono{width:1.7rem;height:1.7rem}
.s-card__cima h3{font-size:clamp(1.2rem,2.3vw,1.45rem)}
.s-card p{color:var(--marfil)}
.s-card__btn{align-self:flex-start;margin-top:auto}

/* ---------- canal de WhatsApp ---------- */
.cta-wa{
  border:1px solid var(--oro);background:var(--superficie);
  max-width:760px;margin:0 auto;text-align:center;
  padding:clamp(2.2rem,6vw,3.4rem) clamp(1.4rem,5vw,3rem);
}
.cta-wa__icono{width:2.4rem;height:2.4rem;margin:0 auto 1.1rem;display:block}
.cta-wa p{margin-top:1.1rem}
.cta-wa .btn{margin-top:1.9rem}

/* ---------- footer: eslogan y crédito ---------- */
.footer__marca{display:flex;flex-direction:column;gap:.7rem}
.footer__eslogan{
  font-family:var(--fu);font-weight:400;color:var(--oro-claro);
  font-size:.92rem;letter-spacing:.14em;
}
.footer__credito{color:var(--oro);border-bottom:1px solid var(--linea);padding-bottom:1px}
.footer__credito:hover{color:var(--oro-claro);border-bottom-color:var(--oro-claro)}

/* ---------- página del pódcast ---------- */
.page-hero--podcast{padding-bottom:clamp(2.4rem,5vw,3.4rem);border-bottom:none}
.cita{margin-top:1.6rem;max-width:34ch}
.cita p{
  font-family:var(--fd);font-style:italic;font-weight:500;
  font-size:clamp(1.35rem,3vw,1.8rem);line-height:1.35;color:var(--oro-claro);
}
.cita cite{
  display:block;margin-top:.5rem;font-style:normal;font-family:var(--fu);
  font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--oro);
}
.cita--media{margin:1.4rem 0 .4rem;border-left:1px solid var(--oro);padding-left:1.2rem}
.cita--media p{font-size:clamp(1.2rem,2.4vw,1.5rem)}
.seccion--imagen-podcast{padding-top:0}
.marco--natural img{width:100%;height:auto;object-fit:unset;display:block}
.historia{max-width:760px}
.historia p{margin-top:1.1rem}
.subtitulo{margin-top:.9rem;max-width:56ch}

/* reels 9:16 */
.reels{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media(min-width:720px){.reels{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.reels{grid-template-columns:repeat(3,1fr)}}
.reel__media{aspect-ratio:9/16;display:flex;align-items:center;justify-content:center;color:var(--oro)}
.reel__play{width:3.2rem;height:3.2rem;opacity:.5}
.reel__pie{display:flex;justify-content:center;padding:.9rem 0 0}
.btn-row--centro{justify-content:center}

/* ---------- ajustes de fotografías de secciones ---------- */
.r43{aspect-ratio:4/3}
.marco--persona img{object-position:50% 18%}

/* ---------- optimización móvil: las imágenes acompañan, no dominan ---------- */
@media(max-width:719px){
  .seccion{padding:3.1rem 0}
  .producto{padding:2.5rem 0}
  .page-hero{padding-top:8.5rem}
  .split{gap:1.6rem}
  .split__media{width:100%;max-width:min(85%,330px);margin-inline:auto}
  .producto .split__media{max-width:min(85%,330px)}
  .galeria4{gap:.7rem}
  .reels{grid-template-columns:1fr 1fr;gap:.9rem}
  .reel__play{width:2.3rem;height:2.3rem}
  .reel__pie .tag{font-size:.58rem;padding:.45em .8em .38em}
  .cards2{gap:1.1rem}
  .hero__content{padding-bottom:3.4rem}
}