/* ============================================================
   La Churra — ESTILOS COMPARTIDOS por todas las páginas
   (index.html, menu.html, nosotros.html, ubicacion.html)
   Cambia algo aquí y cambia en TODO el sitio.
   ============================================================ */

/* ============================================================
   1. VARIABLES
   ============================================================ */
:root{
  --tinta:      #241109;   /* espresso profundo */
  --tinta-2:    #341A0E;   /* espresso más claro */
  --negro:      #170A05;   /* casi negro */
  --oro:        #C6A15A;   /* oro antiguo (acento) */
  --oro-claro:  #E4CD93;
  --canela:     #9A4E24;   /* canela */
  --crema:      #F6EEE1;   /* fondo crema cálido */
  --crema-2:    #FBF7EF;
  --texto:      #2E2019;
  --texto-suave:#6E594A;
  --blanco:     #FFFFFF;

  /* SOLO 3 TAMAÑOS DE FUENTE */
  --fs-display: clamp(2.6rem, 6vw, 5rem);
  --fs-title:   clamp(1.5rem, 2.6vw, 2.2rem);
  --fs-body:    1.075rem;

  --serif:  'Cormorant Garamond', Georgia, serif;
  --texto-font: 'EB Garamond', Georgia, serif;
  --script: 'Kaushan Script', cursive;

  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --header-h: 68px;   /* alto de la barra superior */
}

/* ============================================================
   2. BASE
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--texto-font);
  font-size:var(--fs-body);
  line-height:1.7;
  color:var(--texto);
  background:var(--crema);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.05}

.eyebrow{
  font-size:var(--fs-body);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--oro);
  font-weight:600;
  display:inline-block;
}
.script{ font-family:var(--script); color:var(--oro); font-weight:400; }

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:96px 0}

/* ============================================================
   3. BOTONES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--texto-font);
  font-size:var(--fs-body);
  letter-spacing:.16em;text-transform:uppercase;
  padding:.95em 1.9em;border-radius:2px;
  cursor:pointer;border:1px solid transparent;
  transition:all .3s var(--ease);
}
.btn-oro{ background:var(--oro); color:var(--tinta); font-weight:600; }
.btn-oro:hover{ background:var(--oro-claro); transform:translateY(-2px); }
.btn-linea{ background:transparent; border-color:currentColor; }
.btn-linea:hover{ background:var(--tinta); color:var(--crema); border-color:var(--tinta); }
.btn-linea.claro{ color:var(--crema); }
.btn-linea.claro:hover{ background:var(--crema); color:var(--tinta); }

/* ============================================================
   4. HEADER (barra superior sólida) con menú hamburguesa
   👉 CAMBIO: ahora la barra tiene color propio (espresso) siempre,
   con una línea dorada abajo. Antes era transparente.
   ============================================================ */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);
  padding:0 24px;
  background:var(--tinta);
  border-bottom:1px solid rgba(198,161,90,.35);
  transition:box-shadow .3s var(--ease);
}
header.scrolled{ box-shadow:0 6px 30px rgba(0,0,0,.35); }
.logo{ font-family:var(--script); font-size:1.9rem; color:var(--crema); line-height:1; }
nav.links{ display:flex; align-items:center; gap:30px; }
nav.links a{
  color:var(--crema); font-size:var(--fs-body);
  letter-spacing:.12em; text-transform:uppercase; opacity:.9;
  transition:color .25s;
}
nav.links a:hover, nav.links a.activo{ color:var(--oro-claro); }
.header-btn{ padding:.6em 1.3em; }
.menu-toggle{ display:none; background:none; border:none; color:var(--crema); cursor:pointer; }
.menu-toggle svg{ width:28px;height:28px; }

/* ============================================================
   5. ANIMACIÓN AL SCROLL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(38px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.visible{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.12s } .reveal.d2{ transition-delay:.24s } .reveal.d3{ transition-delay:.36s }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   6. ENCABEZADO DE SECCIÓN (centrado)
   ============================================================ */
.centro{ text-align:center; max-width:660px; margin:0 auto 60px; }
.centro h2{ font-size:var(--fs-title); margin:14px 0; }
.centro p{ color:var(--texto-suave); }

/* ============================================================
   7. PLACEHOLDER DE FOTO reutilizable
   ============================================================ */
.foto{
  position:relative;
  background:linear-gradient(135deg,#efe2cf,#e4d2b8);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.foto::after{
  content:attr(data-label);
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color:#a5764a; text-align:center; padding:0 16px; line-height:1.5;
}
.foto .cam{ position:absolute; top:12px; left:12px; font-size:1.1rem; opacity:.5; z-index:2; }

/* ============================================================
   8. TARJETAS Y REJILLAS reutilizables
   ============================================================ */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.card{ background:var(--blanco); border:1px solid rgba(150,110,60,.16); overflow:hidden; display:flex; flex-direction:column; }
.card .foto{ aspect-ratio:4/3; }
.card .cuerpo{ padding:24px 22px 28px; flex:1; display:flex; flex-direction:column; }
.card h3{ font-size:var(--fs-title); margin-bottom:10px; }
.card p{ color:var(--texto-suave); flex:1; }
.card .mini{ font-size:var(--fs-body); letter-spacing:.14em; text-transform:uppercase; color:var(--oro); font-weight:600; margin-bottom:6px; }
.card .precio{ color:var(--canela); font-weight:600; margin-top:14px; font-size:1.15rem; }

/* ============================================================
   9. PÁGINA INTERIOR (encabezado con foto para nosotros/ubicacion)
   ============================================================ */
.page-hero{
  position:relative; margin-top:0; padding:calc(var(--header-h) + 80px) 0 80px;
  background:linear-gradient(135deg,#3a1c0f,#6b3a1c 60%,#9a4e24);
  color:var(--crema); text-align:center; overflow:hidden;
}
.page-hero .eyebrow{ color:var(--oro-claro); }
.page-hero h1{ font-size:var(--fs-display); color:var(--crema); margin-top:10px; }
.volver{ display:inline-flex; align-items:center; gap:.4em; margin-top:18px;
  color:var(--oro-claro); letter-spacing:.14em; text-transform:uppercase; font-size:.95rem; }
.volver:hover{ color:var(--crema); }

/* ============================================================
   10. FOOTER
   ============================================================ */
footer{ background:var(--negro); color:var(--crema); padding:70px 0 40px; text-align:center; }
footer .logo{ font-size:2.6rem; margin-bottom:14px; display:block; }
footer .dir{ color:rgba(246,238,225,.75); margin-bottom:6px; }
footer .redes{ display:flex; gap:22px; justify-content:center; margin:26px 0 10px; }
footer .redes a{ display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border:1px solid rgba(198,161,90,.4); border-radius:50%; transition:all .25s; }
footer .redes a:hover{ background:var(--oro); border-color:var(--oro); }
footer .redes a:hover svg{ fill:var(--tinta); }
footer .redes svg{ width:22px; height:22px; fill:var(--oro-claro); transition:fill .25s; }
footer .fino{ color:rgba(246,238,225,.5); font-size:.9rem; margin-top:20px; }

/* ============================================================
   11. WHATSAPP FLOTANTE
   ============================================================ */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:60;
  width:60px;height:60px;border-radius:50%;
  background:#25D366; display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,.3); transition:transform .25s;
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:32px;height:32px;fill:#fff; }

/* ============================================================
   12. RESPONSIVE (móvil primero)
   ============================================================ */
@media (max-width:980px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  section{ padding:64px 0; }
  nav.links{
    position:fixed; inset:0 0 0 auto; width:78%; max-width:320px;
    background:var(--tinta); flex-direction:column; align-items:flex-start;
    padding:96px 32px; gap:26px; transform:translateX(100%);
    transition:transform .35s var(--ease); box-shadow:-10px 0 40px rgba(0,0,0,.4);
  }
  nav.links.open{ transform:none; }
  nav.links a{ font-size:1.15rem; }
  .menu-toggle{ display:block; z-index:60; }
  .grid-3{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .grid-4{ grid-template-columns:1fr; }
}