/* LAYOUT
   Estructura: contenedor, barra superior, vistas, rejillas de seccion y pie. */

.container{width:min(1180px,calc(100% - 40px));margin:auto}
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--barra);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--borde-suave);
  box-shadow:0 10px 32px rgba(20,24,15,.05)
}
.nav{
  min-height:82px;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:20px
}
.brand{
  justify-self:start;display:flex;align-items:center;gap:12px;
  font-weight:950;letter-spacing:-.03em;white-space:nowrap
}
/* El logo lleva fondo blanco propio: la pastilla lo enmarca en los dos temas. */
.brand-mark{
  width:44px;height:44px;border-radius:13px;background:#fff;object-fit:contain;
  padding:3px;box-shadow:0 10px 28px rgba(94,112,65,.24);flex:0 0 auto
}
.navlinks{
  justify-self:center;display:flex;align-items:center;gap:3px;min-width:0;
  padding:5px;border:1px solid var(--borde-suave);border-radius:999px;
  background:var(--superficie);
  background:color-mix(in srgb,var(--superficie) 78%,transparent);
  box-shadow:0 10px 28px rgba(29,35,21,.06);
  font-size:.9rem;font-weight:850;color:var(--texto-medio);
  overflow:visible
}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{
  padding:9px 15px;border-radius:999px;line-height:1.2;white-space:nowrap;
  transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease
}
.navlinks a:hover{background:var(--acento-suave);color:var(--acento-texto);transform:translateY(-1px)}
.navlinks a:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.navlinks a.active{
  background:var(--acento-solido);color:var(--sobre-acento);
  box-shadow:0 8px 20px rgba(57,70,43,.22)
}
.actions{justify-self:end;display:flex;align-items:center;gap:8px;white-space:nowrap;flex:0 0 auto}
section[id]{scroll-margin-top:var(--desfase-barra)}
/* Cada apartado de la barra es una vista: solo se muestra la activa */
.view{display:none}
.view.is-active{display:block;animation:viewIn .26s ease}
@keyframes viewIn{from{opacity:0}to{opacity:1}}
.hero{
  background:
    radial-gradient(circle at 80% 10%,rgba(231,214,185,.9),transparent 30%),
    radial-gradient(circle at 10% 80%,rgba(94,112,65,.10),transparent 28%),
    linear-gradient(180deg,var(--hero-1) 0%,var(--hero-2) 100%);
  overflow:hidden
}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center;padding:58px 0 60px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-notes{display:flex;gap:23px;flex-wrap:wrap;margin-top:34px;color:#5a5a52;font-size:.92rem;font-weight:800}
.hero-notes span::before{content:"✓";color:var(--acento);font-weight:950;margin-right:7px}
.section-head{display:grid;grid-template-columns:.85fr 1.15fr;gap:55px;align-items:end;margin-bottom:40px}
.section-head p{margin:0;color:var(--texto-suave)}
.band{background:var(--acento-solido);color:var(--sobre-acento)}
.band h2{color:var(--sobre-acento)}.band .eyebrow{color:var(--sobre-acento-suave)}.band .dot{background:var(--sobre-acento-suave)}
.booking{background:linear-gradient(145deg,var(--calido-1),var(--calido-2))}
.booking-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start}
footer{background:var(--panel);color:var(--panel-suave);padding:46px 0}
.footer-grid{display:flex;justify-content:space-between;gap:40px;align-items:center;flex-wrap:wrap}
.footer-brand img{width:190px;height:auto;background:#fff;border-radius:14px;padding:10px;display:block}
.footer-contacto{display:grid;gap:8px;align-content:start;font-weight:800}
.footer-contacto a{color:var(--panel-texto);text-decoration:none}
.footer-contacto a:hover{text-decoration:underline}
.footer-tel{font-size:1.35rem;font-weight:950;letter-spacing:.01em}
.footer-legal{display:grid;gap:6px;align-content:start;font-size:.88rem}
.footer-legal strong{color:var(--panel-acento);margin-bottom:3px}
.footer-legal a{color:var(--panel-texto)}
.footer-legal a:hover{text-decoration:underline}
  
.shop-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:24px;align-items:start}
/* Las tres fichas de producto comparten caja y van una por fila. */
.shop-main{display:grid;gap:22px;min-width:0}
/* Pantalla de pago */
.checkout-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:24px;align-items:start}
.order-summary{position:sticky;top:96px}