/* =========================================================
   EL BELLOTO — hoja de estilos
   Paleta: verde belloto, musgo, ocre bellota, tierra, papel
   ========================================================= */

:root{
  --verde-belloto:#1F3D2A;
  --verde-musgo:#345C3E;
  --verde-claro:#4C7A54;
  --ocre-bellota:#B9822F;
  --ocre-claro:#C79245;
  --tierra:#3E2C21;
  --papel:#F3EEE2;
  --papel-alt:#EDE6D4;
  --hueso:#FBF9F4;
  --linea:rgba(62,44,33,0.18);

  --serif:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:'Work Sans', 'Segoe UI', sans-serif;

  --radio:2px;
  --sombra:0 18px 40px -22px rgba(31,61,42,0.35);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important}
}

body{
  margin:0;
  background:var(--papel);
  color:var(--tierra);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0;color:var(--verde-belloto)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}

.contenedor{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

:focus-visible{
  outline:3px solid var(--ocre-bellota);
  outline-offset:3px;
}

.raiz-divisor{
  width:100%;
  height:28px;
  color:var(--verde-belloto);
  opacity:0.6;
}
.raiz-divisor.oscuro{color:var(--papel-alt)}

/* =========================== BARRA UTILITARIA =========================== */
.barra-utilitaria{
  background:var(--verde-belloto);
  color:var(--papel);
  font-size:13px;
  letter-spacing:0.02em;
}
.barra-utilitaria .contenedor{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:8px;
  padding-bottom:8px;
  gap:16px;
  flex-wrap:wrap;
}
.barra-utilitaria .datos{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  opacity:0.92;
}
.barra-utilitaria .datos span{white-space:nowrap}

/* =========================== ENCABEZADO / NAV =========================== */
.encabezado{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(243,238,226,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--linea);
}
.encabezado .contenedor{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:14px;
  padding-bottom:14px;
}
.marca{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
}
.marca img{width:48px;height:48px}
.marca .texto-marca{display:flex;flex-direction:column;line-height:1.15}
.marca .nombre{
  font-family:var(--serif);
  font-size:22px;
  font-weight:700;
  color:var(--verde-belloto);
  letter-spacing:0.01em;
}
.marca .lema{
  font-size:11.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ocre-bellota);
  font-weight:600;
}

.nav-principal ul{
  display:flex;
  gap:34px;
}
.nav-principal a{
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  color:var(--tierra);
  position:relative;
  padding:6px 2px;
}
.nav-principal a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:var(--ocre-bellota);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.nav-principal a:hover::after,
.nav-principal a:focus-visible::after{transform:scaleX(1)}

.btn-menu{
  display:none;
  background:none;
  border:1.5px solid var(--verde-belloto);
  border-radius:var(--radio);
  width:42px;height:42px;
  cursor:pointer;
  position:relative;
}
.btn-menu .linea{
  position:absolute;
  left:10px;right:10px;
  height:2px;
  background:var(--verde-belloto);
  transition:transform .2s ease, opacity .2s ease, background .2s ease;
}
.btn-menu .linea-1{top:14px}
.btn-menu .linea-2{top:20px}
.btn-menu .linea-3{top:26px}

/* =========================== HERO =========================== */
.hero{
  position:relative;
  overflow:hidden;
  padding-top:64px;
}
.hero .contenedor{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  align-items:center;
  gap:24px;
}
.hero-texto .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ocre-bellota);
  font-weight:700;
  margin-bottom:20px;
}
.hero-texto .eyebrow::before{
  content:"";
  width:26px;height:1.5px;
  background:var(--ocre-bellota);
}
.hero-texto h1{
  font-size:clamp(38px,5vw,60px);
  line-height:1.06;
  letter-spacing:-0.01em;
  max-width:12ch;
}
.hero-texto h1 em{
  font-style:italic;
  color:var(--ocre-bellota);
}
.hero-texto .parrafo-intro{
  margin-top:22px;
  font-size:18px;
  max-width:46ch;
  color:var(--tierra);
  opacity:0.88;
}
.hero-acciones{
  margin-top:34px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.hero-cifras{
  margin-top:52px;
  display:flex;
  gap:40px;
  flex-wrap:wrap;
}
.hero-cifras div strong{
  display:block;
  font-family:var(--serif);
  font-size:28px;
  color:var(--verde-belloto);
}
.hero-cifras div span{
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  opacity:0.7;
}
.hero-imagen{
  position:relative;
}
.hero-imagen img{
  width:100%;
  max-width:520px;
  margin:0 auto;
}

/* Botones */
.boton{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  border-radius:var(--radio);
  font-weight:700;
  font-size:14.5px;
  letter-spacing:0.02em;
  text-decoration:none;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.boton:hover{transform:translateY(-2px)}
.boton-primario{
  background:var(--verde-belloto);
  color:var(--papel);
}
.boton-primario:hover{background:var(--verde-musgo)}
.boton-secundario{
  background:transparent;
  color:var(--verde-belloto);
  border-color:var(--verde-belloto);
}
.boton-secundario:hover{background:var(--verde-belloto);color:var(--papel)}

/* =========================== SECCIONES GENERALES =========================== */
section{padding:96px 0}
.encabezado-seccion{
  max-width:640px;
  margin-bottom:56px;
}
.encabezado-seccion .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ocre-bellota);
  font-weight:700;
  margin-bottom:14px;
}
.encabezado-seccion .eyebrow::before{
  content:"";
  width:26px;height:1.5px;
  background:var(--ocre-bellota);
}
.encabezado-seccion h2{
  font-size:clamp(30px,3.4vw,42px);
  line-height:1.12;
}
.encabezado-seccion p{
  margin-top:16px;
  font-size:17px;
  opacity:0.85;
}

.seccion-alterna{background:var(--papel-alt)}
.seccion-oscura{background:var(--verde-belloto);color:var(--papel)}
.seccion-oscura h2,.seccion-oscura h3,.seccion-oscura h4{color:var(--papel)}

/* =========================== HISTORIA / LÍNEA DE TIEMPO =========================== */
.linea-tiempo{
  position:relative;
  padding-left:36px;
  border-left:2px solid var(--linea);
}
.hito{
  position:relative;
  padding-bottom:48px;
}
.hito:last-child{padding-bottom:0}
.hito::before{
  content:"";
  position:absolute;
  left:-43px;
  top:4px;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--ocre-bellota);
  border:3px solid var(--papel);
  box-shadow:0 0 0 2px var(--ocre-bellota);
}
.hito .anio{
  font-family:var(--serif);
  font-size:15px;
  font-weight:700;
  color:var(--ocre-bellota);
  letter-spacing:0.02em;
  margin-bottom:6px;
  display:block;
}
.hito h3{font-size:21px;margin-bottom:8px}
.hito p{opacity:0.85;max-width:60ch}

/* =========================== TARJETAS (turismo / cultura) =========================== */
.rejilla{
  display:grid;
  gap:28px;
}
.rejilla-3{grid-template-columns:repeat(3,1fr)}
.rejilla-2{grid-template-columns:repeat(2,1fr)}

.tarjeta{
  background:var(--hueso);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:32px 28px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.tarjeta:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.tarjeta .icono{
  width:46px;height:46px;
  margin-bottom:20px;
  color:var(--verde-belloto);
}
.tarjeta .icono svg{width:100%;height:100%}
.tarjeta h3{font-size:20px;margin-bottom:10px}
.tarjeta p{opacity:0.82;font-size:15.5px}
.tarjeta .etiqueta{
  display:inline-block;
  margin-top:16px;
  font-size:11.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--ocre-bellota);
}

/* Cultura — lista con numeración por relevancia, no secuencia temporal */
.lista-cultura{
  display:flex;
  flex-direction:column;
}
.item-cultura{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:24px;
  padding:28px 0;
  border-bottom:1px solid var(--linea);
}
.item-cultura:first-child{padding-top:0}
.item-cultura:last-child{border-bottom:none}
.item-cultura .icono{
  width:44px;height:44px;
  color:var(--ocre-bellota);
}
.item-cultura .icono svg{width:100%;height:100%}
.item-cultura h3{font-size:19px;margin-bottom:6px}
.item-cultura p{opacity:0.82;font-size:15.5px;max-width:62ch}

/* =========================== CITA / DESTACADO =========================== */
.destacado{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.destacado blockquote{
  font-family:var(--serif);
  font-size:clamp(22px,2.6vw,30px);
  line-height:1.35;
  font-style:italic;
  margin:0 0 18px 0;
}
.destacado cite{
  font-style:normal;
  font-size:13.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  opacity:0.75;
}
.sello-destacado{
  display:flex;
  align-items:center;
  justify-content:center;
}
.sello-destacado img{
  width:220px;
  padding:22px;
  border-radius:50%;
  background:var(--papel);
  box-shadow:0 20px 50px -18px rgba(0,0,0,0.45);
}

/* =========================== BELLÓPOLIS — PORTAL DE LA BELLEZA =========================== */
.bellopolis{
  position:relative;
  background:
    radial-gradient(circle at 50% 0%, rgba(232,178,61,0.16), transparent 60%),
    linear-gradient(180deg, #FBF6E9 0%, #F3EEE2 100%);
  overflow:hidden;
}
.bellopolis::before{
  content:"";
  position:absolute;
  top:-120px;left:50%;
  transform:translateX(-50%);
  width:640px;height:640px;
  max-width:140vw;
  border-radius:50%;
  border:1.5px dashed rgba(201,146,46,0.35);
}
.portal-marco{
  position:relative;
  max-width:720px;
  margin:0 auto 64px;
  text-align:center;
}
.portal-flor{
  width:52px;height:52px;
  margin:0 auto 22px;
}
.portal-flor svg{width:100%;height:100%}
.bellopolis .eyebrow{justify-content:center}
.bellopolis .eyebrow::before{display:none}
.bellopolis h2{font-size:clamp(32px,4vw,46px)}
.bellopolis .parrafo-intro{
  margin:18px auto 0;
  max-width:56ch;
  font-size:17px;
  opacity:0.85;
}
.bellopolis-banner{
  position:relative;
  max-width:460px;
  margin:0 auto 28px;
}
.bellopolis-banner img{
  width:100%;
  border-radius:6px;
  display:block;
  box-shadow:0 28px 60px -24px rgba(62,44,33,0.45);
  border:4px solid var(--hueso);
  outline:1px solid rgba(201,146,46,0.4);
  outline-offset:-5px;
}
.texto-visualmente-oculto{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
.enlace-volver{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  color:var(--verde-belloto);
  margin-bottom:36px;
}
.enlace-volver:hover{text-decoration:underline}
.bellopolis h1{
  font-size:clamp(32px,4vw,46px);
  margin-top:4px;
}

/* Vitrina compacta de Bellópolis en el home */
.bellopolis-vitrina{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:48px;
  align-items:center;
  max-width:980px;
  margin:0 auto;
}
.bellopolis-vitrina .bellopolis-banner{
  max-width:320px;
  margin:0;
}
.bellopolis-vitrina-texto .eyebrow{justify-content:flex-start}
.bellopolis-vitrina-texto .eyebrow::before{display:inline-block}
.bellopolis-vitrina-texto h2{font-size:clamp(28px,3.4vw,38px)}
.bellopolis-vitrina-texto p{margin-top:16px;opacity:0.85;font-size:16.5px;max-width:48ch}
.bellopolis-vitrina-texto .boton{margin-top:26px}

@media (max-width:760px){
  .bellopolis-vitrina{grid-template-columns:1fr;text-align:center}
  .bellopolis-vitrina .bellopolis-banner{margin:0 auto}
  .bellopolis-vitrina-texto .eyebrow{justify-content:center}
  .bellopolis-vitrina-texto .eyebrow::before{display:none}
}

.rejilla-videos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:32px;
  max-width:1100px;
  margin:0 auto;
}
.rejilla-videos.un-video{
  grid-template-columns:minmax(300px,460px);
  justify-content:center;
}
.video-portal{
  background:var(--hueso);
  border:1px solid rgba(201,146,46,0.25);
  border-radius:4px;
  padding:14px;
  box-shadow:0 24px 50px -28px rgba(62,44,33,0.35);
}
.video-marco{
  position:relative;
  width:100%;
  aspect-ratio:9/16;
  max-height:70vh;
  margin:0 auto;
  border-radius:3px;
  overflow:hidden;
  background:var(--tierra);
}
.video-marco iframe{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  border:0;
}
.video-portal h3{
  font-size:17px;
  margin-top:16px;
  text-align:center;
}
.video-portal .etiqueta-video{
  display:block;
  text-align:center;
  margin-top:6px;
  font-size:11.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ocre-bellota);
  font-weight:700;
}

/* =========================== CONTACTO =========================== */
.contacto-grilla{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:56px;
  align-items:start;
}
.info-contacto .fila{
  display:flex;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid var(--linea);
}
.info-contacto .fila:first-child{padding-top:0}
.info-contacto .icono{
  width:24px;height:24px;
  flex-shrink:0;
  color:var(--ocre-bellota);
  margin-top:2px;
}
.info-contacto h4{font-size:15px;margin-bottom:4px}
.info-contacto p{opacity:0.85;font-size:15px}

.mapa-marco{
  margin-top:28px;
  border-radius:var(--radio);
  overflow:hidden;
  border:1px solid var(--linea);
  aspect-ratio:4/3;
}
.mapa-marco iframe{width:100%;height:100%;border:0;display:block}

.formulario{
  background:var(--hueso);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:36px;
}
.campo{margin-bottom:20px}
.campo label{
  display:block;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  margin-bottom:8px;
  color:var(--verde-belloto);
}
.campo input,.campo select,.campo textarea{
  width:100%;
  padding:13px 14px;
  border:1.5px solid var(--linea);
  border-radius:var(--radio);
  background:var(--papel);
  font-family:var(--sans);
  font-size:15px;
  color:var(--tierra);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;
  border-color:var(--ocre-bellota);
}
.campo-fila{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.formulario .nota-envio{
  font-size:13px;
  opacity:0.65;
  margin-top:14px;
}
.mensaje-estado{
  margin-top:16px;
  font-size:14px;
  font-weight:600;
  display:none;
}
.mensaje-estado.visible{display:block}

/* =========================== PIE DE PÁGINA =========================== */
.pie{
  background:var(--tierra);
  color:var(--papel-alt);
  padding-top:64px;
}
.pie .contenedor-pie{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:48px;
}
.pie-marca{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pie-marca img{width:42px;height:42px}
.pie-marca .nombre{font-family:var(--serif);font-size:19px;color:var(--papel)}
.pie p{opacity:0.7;font-size:14.5px;max-width:34ch}
.pie h4{
  color:var(--papel);
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:18px;
  opacity:0.9;
}
.pie ul li{margin-bottom:10px}
.pie a{opacity:0.72;text-decoration:none;font-size:14.5px}
.pie a:hover{opacity:1;text-decoration:underline}
.pie-inferior{
  border-top:1px solid rgba(243,238,226,0.14);
  padding:22px 32px;
  max-width:1180px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:13px;
  opacity:0.55;
}

/* =========================== BOTÓN VOLVER ARRIBA =========================== */
.volver-arriba{
  position:fixed;
  right:24px;
  bottom:24px;
  width:46px;height:46px;
  border-radius:50%;
  background:var(--verde-belloto);
  color:var(--papel);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease;
  z-index:60;
}
.volver-arriba.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.volver-arriba svg{width:18px;height:18px}

/* =========================== REVELADO AL DESPLAZAR =========================== */
.revelar{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.revelar.visible{opacity:1;transform:translateY(0)}

/* =========================== RESPONSIVE =========================== */
@media (max-width:980px){
  .hero .contenedor{grid-template-columns:1fr;gap:48px}
  .hero-imagen{order:-1;max-width:360px;margin:0 auto}
  .destacado{grid-template-columns:1fr;gap:32px}
  .rejilla-3{grid-template-columns:repeat(2,1fr)}
  .contacto-grilla{grid-template-columns:1fr}
  .pie .contenedor-pie{grid-template-columns:1fr 1fr;row-gap:36px}
}

@media (max-width:760px){
  .nav-principal{
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:var(--papel);
    transform:translateX(100%);
    transition:transform .3s ease;
    padding:110px 32px 40px;
    z-index:40;
  }
  .nav-principal.abierto{transform:translateX(0)}
  .nav-principal ul{flex-direction:column;gap:26px}
  .nav-principal a{font-size:20px}
  .btn-menu{display:block;z-index:55}
  .btn-menu.activo .linea-2{opacity:0}
  .btn-menu.activo .linea-1{transform:translateY(6px) rotate(45deg)}
  .btn-menu.activo .linea-3{transform:translateY(-6px) rotate(-45deg)}
  .barra-utilitaria .datos:last-child{display:none}
  .barra-utilitaria .datos span:nth-child(2){display:none}
  section{padding:64px 0}
  .rejilla-3,.rejilla-2{grid-template-columns:1fr}
  .campo-fila{grid-template-columns:1fr}
  .pie .contenedor-pie{grid-template-columns:1fr}
}