/* =====================================================================
   Latidos Cafe — hoja de estilo
   Sin librerías, sin WordPress. Claro y oscuro automáticos.
   ===================================================================== */

:root{
  --cafe:#4a2c18; --cafe2:#6b4227; --crema:#f7f1e8; --papel:#fffdfa;
  --tinta:#2b1d12; --tinta2:#6b5a4b; --tinta3:#9c8a79;
  --linea:#e8dccd; --acento:#c0392b; --oro:#c9962c;
  --sombra:0 1px 2px rgba(74,44,24,.06), 0 10px 30px -14px rgba(74,44,24,.3);
  --radio:16px;
}
@media (prefers-color-scheme: dark){
  :root{
    --crema:#171210; --papel:#211a16; --tinta:#f5ece1; --tinta2:#c7b6a4;
    --tinta3:#8e7c6c; --linea:#33271f; --cafe:#e8d5c0; --cafe2:#c9a888;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 12px 34px -16px rgba(0,0,0,.8);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--crema); color:var(--tinta);
  font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:var(--acento); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.15; margin:0 0 .4em; font-weight:800; letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,6vw,3.6rem)}
h2{font-size:clamp(1.5rem,3.6vw,2.2rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
img{max-width:100%; height:auto; display:block}

.envoltura{max-width:1080px; margin:0 auto; padding:0 22px}

/* ---------- Barra ---------- */
.barra{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--papel) 92%, transparent);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--linea);
}
.barra .envoltura{display:flex; align-items:center; gap:16px; padding-top:12px; padding-bottom:12px}
.marca{display:flex; align-items:center; gap:11px; color:var(--tinta); font-weight:800; font-size:1.15rem}
.marca:hover{text-decoration:none}
.marca img{height:38px; width:auto}
.menu-nav{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
.menu-nav a{
  padding:8px 14px; border-radius:10px; color:var(--tinta2); font-weight:650; font-size:15px;
}
.menu-nav a:hover{background:var(--crema); text-decoration:none; color:var(--tinta)}
.menu-nav a.on{background:var(--cafe); color:var(--papel)}

/* ---------- Portada ---------- */
.portada{position:relative; min-height:min(74vh,620px); display:grid; place-items:center; text-align:center; overflow:hidden}
.portada-foto{position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.44) saturate(1.1)}
.portada-txt{position:relative; z-index:2; padding:80px 22px; color:#fff; max-width:820px}
.portada-txt h1{color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.5)}
.portada-txt p{font-size:clamp(1.05rem,2.4vw,1.35rem); opacity:.94; margin-bottom:26px}
.aviso-portada{
  display:inline-block; background:var(--oro); color:#241a06; font-weight:800;
  padding:8px 18px; border-radius:999px; font-size:14px; letter-spacing:.04em;
  text-transform:uppercase; margin-bottom:20px;
}
.acciones{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:14px 26px; border-radius:12px; font-weight:750; font-size:16px;
  border:2px solid transparent; cursor:pointer; transition:.15s transform;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-ppal{background:var(--acento); color:#fff}
.btn-claro{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.6); backdrop-filter:blur(4px)}
.btn-linea{border-color:var(--cafe); color:var(--cafe)}

/* ---------- Secciones ---------- */
.seccion{padding:62px 0}
.seccion-cab{text-align:center; margin-bottom:38px}
.seccion-cab p{color:var(--tinta2); max-width:620px; margin:6px auto 0}

.seccion-oscura{background:var(--papel); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea)}

/* ---------- Tira con la frase de café ---------- */
.frase-tira{background:var(--cafe); color:var(--papel); padding:26px 0}
@media (prefers-color-scheme: dark){.frase-tira{background:#120d0a; color:var(--tinta)}}
.frase-tira p{
  margin:0; text-align:center; font-size:clamp(1.1rem,2.6vw,1.5rem);
  font-weight:700; font-style:italic; letter-spacing:-.01em;
}

/* ---------- Los cafés ---------- */
.cafes{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.cafe{
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  padding:22px; box-shadow:var(--sombra); transition:.18s transform;
}
.seccion-oscura .cafe{background:var(--crema)}
.cafe:hover{transform:translateY(-2px)}
.cafe h3{color:var(--cafe); margin-bottom:6px}
.cafe p{margin:0; color:var(--tinta2); font-size:15.5px}

/* ---------- Sabores ---------- */
.sabores{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.sabor{
  display:inline-block; padding:11px 20px; border-radius:999px;
  border:1px solid var(--linea); background:var(--crema);
  font-weight:700; font-size:15.5px; color:var(--cafe);
}

/* ---------- La experiencia ---------- */
.experiencia{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); text-align:center}
.exp h3{color:var(--cafe)}
.exp p{color:var(--tinta2); margin:0}

/* ---------- Sucursales ---------- */
.sucursales{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
/* Cuando hay una sola tienda no se estira a todo lo ancho. */
.sucursales.una{max-width:520px; margin:0 auto}
.seccion-oscura .sucursal{background:var(--crema)}
.sucursal{
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  padding:28px; box-shadow:var(--sombra);
}
.sucursal h3{font-size:1.5rem; color:var(--cafe); margin-bottom:14px}
.horas{list-style:none; margin:0 0 18px; padding:0}
.horas li{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px dashed var(--linea)}
.horas li:last-child{border-bottom:none}
.horas span{color:var(--tinta2)}
.horas b{white-space:nowrap}
.dato{display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; color:var(--tinta2); font-size:15.5px}
.dato i{font-style:normal; flex:none}
.tel{font-size:1.35rem; font-weight:800; color:var(--acento); display:inline-block; margin:6px 0 14px}

/* ---------- Galería del menú ---------- */
.galeria{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.galeria a{display:block; border-radius:12px; overflow:hidden; background:var(--papel); box-shadow:var(--sombra)}
.galeria img{width:100%; aspect-ratio:1/1; object-fit:cover; transition:.25s transform}
.galeria a:hover img{transform:scale(1.04)}

/* Visor a pantalla completa */
.visor{
  position:fixed; inset:0; background:rgba(12,8,5,.94); z-index:100;
  display:none; place-items:center; padding:20px;
}
.visor.abierto{display:grid}
.visor img{max-width:96vw; max-height:88vh; width:auto; border-radius:10px}
.visor-cerrar{position:absolute; top:16px; right:22px; font-size:34px; color:#fff; cursor:pointer; line-height:1; background:none; border:none}
.visor-nav{position:absolute; top:50%; transform:translateY(-50%); font-size:44px; color:#fff; cursor:pointer; background:none; border:none; padding:10px 18px; opacity:.75}
.visor-nav:hover{opacity:1}
.visor-ant{left:6px} .visor-sig{right:6px}
.visor-cuenta{position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#fff; opacity:.7; font-size:14px}

/* ---------- Empleo ---------- */
.empleo{
  display:grid; gap:26px; grid-template-columns:1fr 1fr; align-items:center;
  background:var(--papel); border:1px solid var(--linea); border-radius:20px;
  padding:30px; box-shadow:var(--sombra);
}
.empleo img{border-radius:12px}
@media (max-width:760px){.empleo{grid-template-columns:1fr}}

/* ---------- Pie ---------- */
.pie{background:var(--cafe); color:var(--crema); padding:40px 0 30px; margin-top:60px}
@media (prefers-color-scheme: dark){.pie{background:#120d0a}}
.pie a{color:var(--crema); opacity:.9}
.pie-cols{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-bottom:26px}
.pie h4{margin:0 0 10px; font-size:15px; text-transform:uppercase; letter-spacing:.1em; opacity:.75}
.pie p{margin:0 0 6px; font-size:15px; opacity:.9}
.pie-abajo{border-top:1px solid rgba(255,255,255,.16); padding-top:18px; font-size:14px; opacity:.75; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}

/* ---------- Botón flotante de llamar ---------- */
.llamar-flota{
  position:fixed; right:18px; bottom:18px; z-index:60; background:var(--acento); color:#fff;
  border-radius:999px; padding:14px 22px; font-weight:750; box-shadow:0 8px 24px rgba(192,57,43,.4);
  display:none;
}
@media (max-width:760px){.llamar-flota{display:inline-flex; gap:8px; align-items:center}}