/* Zuca Bakery — hoja de estilos única
   Paleta y tipografía centralizadas en :root */

:root{
  --marron:#7A4E33;
  --marron-osc:#5E3A25;
  --crema:#F6EFE6;
  --crema-osc:#E7DACA;
  --texto:#3E2A1E;
  --texto-suave:#6B5546;
  --texto-tenue:#A08D7E;
  --rojo:#B3402C;
  --radio:10px;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--crema);
  color:var(--texto);
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:56px 24px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Fondo: Casas Colgadas de Cuenca (line art) ---------- */
body::before{
  content:"";
  position:fixed;
  right:0;
  bottom:0;
  width:min(760px,66vw);
  height:100vh;
  background:url("../assets/casas-colgadas.png") right bottom / contain no-repeat;
  opacity:.70;
  pointer-events:none;
  z-index:0;
  /* se desvanece hacia la izquierda: no compite con el texto */
  -webkit-mask-image:linear-gradient(to left,#000 55%,transparent 100%);
          mask-image:linear-gradient(to left,#000 55%,transparent 100%);
}

/* En pantallas estrechas, el dibujo se sitúa detrás y más tenue */
@media (max-width:820px){
  body::before{
    width:100vw;
    opacity:.16;
    background-position:center bottom;
    -webkit-mask-image:linear-gradient(to top,#000 30%,transparent 88%);
            mask-image:linear-gradient(to top,#000 30%,transparent 88%);
  }
}

/* El contenido siempre por encima del fondo */
.card{position:relative;z-index:1}

/* Contenedor único, ancho contenido: nada se sale de aquí */
.card{
  width:100%;
  max-width:440px;
  text-align:center;
  overflow:hidden; /* evita que el carrusel desborde la página */
}

/* ---------- Logo ---------- */
/* El logo es vertical (600×1045): el ancho manda */
.logo{width:88px;height:auto;margin:0 auto 24px;display:block}

/* ---------- Cabecera ---------- */
.kicker{
  display:inline-block;
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--marron);
  border:1px solid var(--crema-osc);
  background:#fff;
  border-radius:999px;
  padding:6px 14px;
  margin-bottom:16px;
}
h1{
  font-size:1.5rem;
  font-weight:500;
  color:var(--marron-osc);
  letter-spacing:-.01em;
  margin-bottom:2px;
}
.tagline{
  font-size:1.15rem;
  font-weight:400;
  color:var(--marron);
  margin-bottom:10px;
}
.sub{
  font-size:.95rem;
  color:var(--texto-suave);
  max-width:34ch;
  margin:0 auto 4px;
}
.lugar{font-size:.85rem;color:#8A7365;margin-bottom:28px}

/* Visible para lectores de pantalla y buscadores, oculto visualmente */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ---------- Galería (tira horizontal) ---------- */
.galeria{margin:0 0 30px}
.galeria h2{
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--texto-tenue);
  margin-bottom:12px;
}

/* ESCRITORIO: rejilla centrada de miniaturas (filas de 4 + 3) */
.grid{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,96px);
  justify-content:center;
  gap:8px;
  margin:0;
  padding:0;
}
.grid li{margin:0}

.foto{
  display:block;
  width:100%;
  height:96px;              /* alto explícito: no depende de aspect-ratio */
  padding:0;
  margin:0;
  overflow:hidden;
  border:0;
  border-radius:8px;
  cursor:zoom-in;
  background:var(--crema-osc);
  -webkit-appearance:none;
  appearance:none;
}
.foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease, filter .35s ease;
}
.foto:hover img,
.foto:focus-visible img{transform:scale(1.06);filter:brightness(1.04)}
.foto:focus-visible{outline:2px solid var(--marron);outline-offset:2px}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:24px;
  background:rgba(48,30,20,.92);
  backdrop-filter:blur(3px);
}
.lightbox[hidden]{display:none}

.lb-fig{max-width:min(88vw,760px);text-align:center}
.lb-fig img{
  max-width:100%;
  max-height:74vh;
  border-radius:12px;
  display:block;
  margin:0 auto;
}
.lb-fig figcaption{
  margin-top:12px;
  color:var(--crema);
  font-size:.88rem;
}

.lb-cerrar,
.lb-nav{
  all:unset;
  cursor:pointer;
  color:var(--crema);
  line-height:1;
  padding:10px 14px;
  border-radius:999px;
  transition:background .15s;
}
.lb-cerrar:hover,.lb-nav:hover{background:rgba(255,255,255,.14)}
.lb-cerrar:focus-visible,.lb-nav:focus-visible{outline:2px solid var(--crema);outline-offset:2px}

.lb-cerrar{position:absolute;top:14px;right:16px;font-size:2rem}
.lb-nav{font-size:2.4rem;flex:none}

/* ---------- Formulario ---------- */
form{display:grid;gap:10px;text-align:left}
label{font-size:.78rem;color:var(--texto-suave);margin-bottom:-4px}

input{
  width:100%;
  padding:13px 15px;
  font:inherit;
  font-size:.95rem;
  color:var(--texto);
  background:#fff;
  border:1px solid var(--crema-osc);
  border-radius:var(--radio);
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
input:focus{border-color:var(--marron);box-shadow:0 0 0 3px rgba(122,78,51,.12)}
input[aria-invalid="true"]{border-color:var(--rojo)}

button{
  margin-top:6px;
  padding:14px 20px;
  font:inherit;
  font-size:.95rem;
  font-weight:500;
  color:#fff;
  background:var(--marron);
  border:0;
  border-radius:var(--radio);
  cursor:pointer;
  transition:background .15s, opacity .15s;
}
button:hover{background:var(--marron-osc)}
button:disabled{opacity:.6;cursor:not-allowed}

.error{color:var(--rojo);font-size:.8rem}

/* honeypot: invisible para humanos, visible para bots */
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* ---------- Éxito ---------- */
.exito{
  display:none;
  background:#fff;
  border:1px solid var(--crema-osc);
  border-radius:12px;
  padding:26px 20px;
}
.exito h2{font-size:1.15rem;font-weight:500;color:var(--marron-osc);margin-bottom:6px}
.exito p{font-size:.92rem;color:var(--texto-suave)}

/* ---------- Pie ---------- */
.pie{margin-top:28px;font-size:.75rem;color:var(--texto-tenue)}
.pie a{color:var(--marron);text-decoration:none}
.pie a:hover{text-decoration:underline}

/* ---------- Responsive ---------- */

/* MÓVIL: la rejilla se convierte en tira deslizable */
@media (max-width:640px){
  .grid{
    display:flex;
    gap:8px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    padding-bottom:10px;
    scrollbar-width:none;
  }
  .grid::-webkit-scrollbar{display:none}
  .grid li{flex:0 0 92px;scroll-snap-align:start}
  .foto{height:92px}
}

@media (max-width:420px){
  body{padding:40px 20px}
  h1{font-size:1.35rem}
  .tagline{font-size:1.05rem}
  .logo{width:76px}
  .lb-nav{font-size:1.8rem;padding:8px}
  .lightbox{padding:12px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}