/* =========================================================
   CREATIVE — BASE.CSS
   Sistema visual compartido entre TODAS las páginas del sitio.
   Contiene: tokens de marca, reset, tipografía, botones/CTA,
   header y footer. Las secciones propias de cada página
   (Home, futuras páginas) viven en su propio archivo
   (ej. home.css) y solo añaden lo que no está aquí.
   ========================================================= */

/* ============ TOKENS DE MARCA ============
   Paleta y tipografías aprobadas en el brief de Creative.
   No cambiar sin validar contra la dirección visual aprobada. */
:root{
  --negro:      #211E1F; /* base oscura */
  --marfil:     #F5F1EA; /* fondo claro principal */
  --arena:      #D8C8B7; /* apoyo cálido */
  --nude:       #C7ADA2; /* acento secundario */
  --verde:      #26352F; /* uso puntual */
  --azul:       #A8BBC8; /* uso puntual — disponible, no usado actualmente en la Home */

  --serif: 'DM Serif Display', serif;
  --sans:  'Manrope', sans-serif;

  --container: 1160px;
  --gutter: 24px;
}

/* ============ RESET BÁSICO ============ */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--sans);
  background: var(--marfil);
  color: var(--negro);
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
section{ position:relative; }

/* ============ LAYOUT ============ */
.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ============ TIPOGRAFÍA ============ */
h1,h2,h3{ font-family: var(--serif); font-weight:400; line-height:1.08; }

.eyebrow{
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom: 18px;
}
.eyebrow::after{
  content:"";
  display:block;
  width: 40px;
  height: 1px;
  background: currentColor;
  opacity:.5;
}
.eyebrow.on-dark{ color: var(--arena); }
.eyebrow.on-light{ color: var(--negro); opacity:.75; }

/* ============ BOTONES / CTA ============
   Reutilizables en cualquier página: CTA sólido (primario/secundario
   según contraste) y CTA de enlace editorial con flecha. */
.cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: 13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
  padding: 16px 26px;
  border: 1px solid transparent;
  white-space:nowrap;
}
.cta-solid-light{ background: var(--arena); color: var(--negro); }
.cta-solid-dark{ background: var(--negro); color: var(--marfil); }
.cta svg{ width:14px; height:14px; flex-shrink:0; transition: transform .2s ease; }
.cta:hover svg{ transform: translateX(3px); }

.cta-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
  padding-bottom:4px;
  border-bottom: 1px solid currentColor;
}
.cta-link svg{ width:13px; height:13px; transition: transform .2s ease; }
.cta-link:hover svg{ transform: translateX(3px); }

/* ============ HEADER ============
   Común a todas las páginas. Se apoya sobre el hero/imagen de
   cabecera de cada página (position:absolute + texto claro). */
header.site{
  position:absolute;
  top:0; left:0; right:0;
  z-index:20;
  padding: 22px 0;
}
header.site .wrap{ display:flex; align-items:center; justify-content:space-between; }
.logo{
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: .04em;
  color: var(--marfil);
  text-transform: lowercase;
}
.menu-btn{
  background:none; border:none; color: var(--marfil);
  display:flex; flex-direction:column; gap:5px; align-items:flex-end;
}
.menu-btn span{ display:block; height:1px; background: currentColor; }
.menu-btn span:nth-child(1){ width:26px; }
.menu-btn span:nth-child(2){ width:18px; }

/* ============ FOOTER ============
   Común a todas las páginas. Los datos de contacto/dirección
   se generan desde data/negocio.json — no editar aquí. */
footer{ background: var(--negro); color: var(--marfil); padding: 48px 0 28px; }
.footer-top{ margin-bottom: 40px; }
.footer-top .logo{ margin-bottom: 10px; }
.footer-top p{ font-size:13px; opacity:.6; line-height:1.6; }
.footer-cols{ display:grid; grid-template-columns: repeat(2,1fr); gap: 30px 20px; margin-bottom: 40px; }
.footer-col h4{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.5; margin-bottom:14px; }
.footer-col a{ display:block; font-size:13.5px; padding:6px 0; opacity:.85; }
.footer-bottom{ border-top:1px solid rgba(245,241,234,.14); padding-top:20px; font-size:11.5px; opacity:.45; }

/* ============ DESKTOP (compartido) ============ */
@media (min-width: 900px){
  :root{ --gutter: 48px; }

  .footer-top{ display:flex; justify-content:space-between; align-items:flex-end; }
  .footer-cols{ grid-template-columns: repeat(4,1fr); }
}