/* ============================================================
   MIGA DORADA — Pastelería & Panadería Artesanal
   styles.css — hoja única, organizada por secciones
   ============================================================ */

:root{
  --cream:       #FFFDF7;
  --cream-2:     #F2EFE4;
  --paper:       #FFFFFF;
  --choco:       #2E2E2E;
  --choco-soft:  #5C5C5C;
  --choco-mute:  #8C8C8C;
  --terracotta:  #C8102E;
  --terracotta-deep:#A50D26;
  --mostaza:     #7FB069;
  --sage:        #7FB069;
  --line:        rgba(46,46,46,0.14);
  --line-strong: rgba(46,46,46,0.28);
  --shadow:      0 30px 60px -30px rgba(46,46,46,0.38);
  --ease:        cubic-bezier(.16,.8,.24,1);
  --nav-h:       84px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  overflow-x:clip;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--cream);
  color:var(--choco);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:'Fraunces',Georgia,serif; font-weight:500; margin:0; letter-spacing:-.01em; }
em{ font-style:italic; color:var(--terracotta); }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; background:none; border:none; cursor:pointer; color:inherit; }
:focus-visible{ outline:2px solid var(--terracotta-deep); outline-offset:3px; border-radius:4px; }

.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--choco); color:var(--cream); padding:.7em 1.2em; border-radius:8px;
  transition:top .25s var(--ease);
}
.skip-link:focus{ top:12px; }

.wrap{ max-width:1240px; margin-inline:auto; padding-inline:clamp(20px,5vw,64px); }

.eyebrow{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--terracotta-deep); font-weight:600;
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--terracotta-deep); display:inline-block; }

.btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.95em 1.7em; border-radius:999px;
  font-size:.92rem; font-weight:600; letter-spacing:.01em;
  border:1px solid var(--choco);
  transition:transform .45s var(--ease), background .3s ease, color .3s ease, box-shadow .3s ease;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; flex:none; }
.btn-solid{ background:var(--choco); color:var(--cream); }
.btn-solid:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.btn-line{ background:transparent; color:var(--choco); }
.btn-line:hover{ background:var(--choco); color:var(--cream); }
.btn-accent{ background:var(--terracotta); border-color:var(--terracotta); color:#fff; }
.btn-accent:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -18px rgba(200,16,46,.5); }
.btn-sm{ padding:.6em 1.1em; font-size:.8rem; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-split]{ opacity:1; transform:none; }
.reveal-stagger > *{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.is-visible > *{ opacity:1; transform:none; }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.15s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.25s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.35s; }

/* ---------- Placeholder photo blocks ----------
   No hay fotos reales todavía: estos bloques simulan el marco de una
   fotografía de producto con degradé cálido + ícono + etiqueta de aviso.
   Reemplazar por <img> reales cuando haya fotografía (ver README). */
.ph-photo{
  position:relative; overflow:hidden; border-radius:inherit;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg,var(--ph-a,#F3D9CE),var(--ph-b,#EAD9CE));
  color:var(--choco);
}
.ph-photo::after{
  content:"foto: " attr(data-ph);
  position:absolute; left:10px; bottom:10px;
  font-family:'Inter',sans-serif; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(255,253,247,.82); color:var(--choco-soft);
  padding:.35em .6em; border-radius:6px; font-weight:600;
}
/* El cartelito de referencia solo tiene sentido mientras el placeholder está
   vacío (sin foto real todavía). En cuanto hay un <img> real adentro, se oculta. */
.ph-photo:has(img)::after{ display:none; }
.ph-photo svg{ width:38%; height:38%; opacity:.55; }

/* Fotos reales dentro de ph-photo: recorte + filtro de color para unificar
   la paleta cálida del sitio con fotos de stock de origen diverso. */
.ph-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: grayscale(.25) saturate(.85) contrast(1.08) brightness(1.04);
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  background:transparent;
  transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.nav.is-solid{ background:rgba(255,253,247,.92); backdrop-filter:blur(10px); border-color:var(--line); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.brand{ font-family:'Fraunces',serif; font-style:italic; font-size:1.35rem; color:var(--choco); display:flex; flex-direction:column; line-height:1.1; }
.brand small{ font-family:'Inter',sans-serif; font-style:normal; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--choco-mute); margin-top:.3em; }
.nav-links{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.nav-links.left a{ font-size:.88rem; font-weight:500; position:relative; padding:.3em 0; text-transform:uppercase; letter-spacing:.09em; }
.nav-links.left a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--terracotta); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.nav-links.left a:hover::after{ transform:scaleX(1); }
.nav-links.right{ display:flex; }
.nav-burger{ display:none; width:44px; height:44px; border-radius:50%; align-items:center; justify-content:center; }
.nav-burger span{ display:block; width:20px; height:2px; background:var(--choco); position:relative; transition:background .2s; }
.nav-burger span::before,.nav-burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--choco); transition:transform .3s var(--ease); }
.nav-burger span::before{ top:-6px; } .nav-burger span::after{ top:6px; }
.nav-burger.is-open span{ background:transparent; }
.nav-burger.is-open span::before{ transform:translateY(6px) rotate(45deg); }
.nav-burger.is-open span::after{ transform:translateY(-6px) rotate(-45deg); }

.mobile-panel{
  position:fixed; inset:var(--nav-h) 0 0 0; z-index:99; background:var(--cream);
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  display:flex; flex-direction:column; padding:24px clamp(20px,6vw,40px); gap:6px; overflow-y:auto;
}
.mobile-panel.is-open{ opacity:1; transform:none; pointer-events:auto; }
.mobile-panel a{ font-family:'Fraunces',serif; font-size:1.5rem; padding:.5em 0; border-bottom:1px solid var(--line); }
.mobile-panel .btn{ margin-top:18px; align-self:flex-start; }

@media (max-width:860px){
  .nav-links.left{ display:none; }
  .nav-links.right .btn-line{ display:none; }
  .nav-burger{ display:inline-flex; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:var(--nav-h); overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 85% 12%, rgba(127,176,105,.22), transparent 60%),
    radial-gradient(ellipse 55% 45% at 8% 90%, rgba(200,16,46,.14), transparent 60%),
    var(--cream);
}

/* ---------- Hero: video de fondo con poster + overlay oscuro ----------
   El video se reproduce solo, en loop, sin sonido. Mientras carga se ve el
   poster. Si el usuario tiene prefers-reduced-motion activado, el video se
   oculta por completo y queda solo el poster fijo (ver media query abajo
   y el guard en main.js). */
.hero-media{ position:absolute; inset:0; overflow:hidden; }
.hero-poster,
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(46,46,46,.60) 0%, rgba(46,46,46,.42) 45%, rgba(46,46,46,.66) 100%);
}
@media (prefers-reduced-motion: reduce){
  .hero-video{ display:none; }
}

/* Texto del hero sobre fondo oscuro: se sobreescribe el color por defecto
   (pensado para fondo claro) para mantener buen contraste sobre el video. */
.hero .eyebrow{ color:var(--cream); }
.hero .eyebrow::before{ background:var(--cream); }
.hero-title{ color:var(--cream); }
.hero-title em{ color:var(--mostaza); }
.hero-sub{ color:rgba(255,253,247,.88); }
.hero .btn-line{ border-color:var(--cream); color:var(--cream); }
.hero .btn-line:hover{ background:var(--cream); color:var(--choco); }
.hero-scroll{ color:rgba(255,253,247,.8); }
.hero-scroll .line{ background:linear-gradient(rgba(255,253,247,.8),transparent); }
.hero-inner{ position:relative; max-width:640px; z-index:2; }
.hero-title{ font-size:clamp(2.6rem,6.4vw,4.6rem); line-height:1.02; margin:.5em 0 .4em; }
.hero-sub{ font-size:clamp(1rem,1.6vw,1.18rem); color:var(--choco-soft); max-width:480px; margin-bottom:1.6em; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-scroll{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--choco-mute); }
.hero-scroll .line{ width:1px; height:34px; background:linear-gradient(var(--choco-mute),transparent); animation:scrollLine 2.2s var(--ease) infinite; }
@keyframes scrollLine{ 0%{ opacity:0; transform:scaleY(0); transform-origin:top; } 40%{ opacity:1; transform:scaleY(1); transform-origin:top; } 60%{ transform-origin:bottom; transform:scaleY(1); } 100%{ opacity:0; transform-origin:bottom; transform:scaleY(0); } }


/* ============================================================
   SECTION HEAD (genérico)
   ============================================================ */
section{ padding:clamp(64px,10vw,120px) 0; position:relative; }
.section-head{ max-width:640px; margin-bottom:clamp(34px,5vw,56px); }
.section-head h2{ font-size:clamp(2rem,4vw,2.9rem); margin-top:.35em; line-height:1.08; }
.section-head p{ color:var(--choco-soft); margin-top:.9em; font-size:1.02rem; }
.section-head.center{ margin-inline:auto; text-align:center; }

/* ============================================================
   MENÚ / CATÁLOGO
   ============================================================ */
.menu-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.menu-tab{
  padding:.65em 1.3em; border-radius:999px; border:1px solid var(--line-strong);
  font-size:.86rem; font-weight:600; color:var(--choco-soft);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.menu-tab:hover{ border-color:var(--terracotta); color:var(--terracotta-deep); }
.menu-tab.is-active{ background:var(--choco); border-color:var(--choco); color:var(--cream); }

.menu-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:26px; }
.product{
  background:var(--paper); border-radius:22px; overflow:hidden; border:1px solid var(--line);
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.product:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.product-media{ aspect-ratio:4/3; }
.product-media .ph-photo{ height:100%; }
.product-body{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:.5em; flex:1; }
.product-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.product-top h3{ font-size:1.15rem; }
.product-price{ font-family:'Inter',sans-serif; font-weight:700; color:var(--terracotta-deep); white-space:nowrap; font-size:.98rem; }
.product-body p{ color:var(--choco-soft); font-size:.92rem; flex:1; }
.product-body .btn{ align-self:flex-start; margin-top:.4em; }
.product-tag{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sage); font-weight:700; }

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; background:var(--cream-2); }
.marquee-track{ display:flex; align-items:center; gap:26px; width:max-content; animation:marquee 42s linear infinite; }
.marquee-track span{ font-family:'Fraunces',serif; font-style:italic; font-size:1.3rem; color:var(--choco-mute); white-space:nowrap; }
.marquee-track .marquee-dot{ font-style:normal; font-size:.8rem; color:var(--choco-mute); opacity:.7; }
.marquee-track .marquee-brand{ color:#D3A13B; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   PEDIDOS
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-bottom:38px; }
.step{ padding:28px; border-radius:20px; background:var(--paper); border:1px solid var(--line); }
.step-num{ font-family:'Fraunces',serif; font-style:italic; font-size:1.6rem; color:var(--terracotta); }
.step h3{ font-size:1.2rem; margin:.5em 0 .35em; }
.step p{ color:var(--choco-soft); font-size:.92rem; }
.pedidos-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; background:var(--choco); color:var(--cream); padding:32px clamp(24px,4vw,44px); border-radius:24px; }
.pedidos-foot .pedidos-note{ max-width:460px; color:rgba(255,253,247,.78); font-size:.95rem; }
.pedidos-foot .btn-solid{ background:var(--cream); color:var(--choco); border-color:var(--cream); }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; } }

/* ============================================================
   GALERÍA
   ============================================================ */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:140px; gap:14px; }
.gallery-item{ border-radius:16px; overflow:hidden; cursor:zoom-in; grid-column:span 1; grid-row:span 1; }
.gallery-item.tall{ grid-row:span 2; }
.gallery-item.wide{ grid-column:span 2; }
.gallery-item .ph-photo{ height:100%; transition:transform .6s var(--ease); }
.gallery-item:hover .ph-photo{ transform:scale(1.06); }
@media (max-width:760px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
  .gallery-item.wide{ grid-column:span 2; }
}

.lightbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(46,46,46,.88); opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  padding:24px;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox-inner{ max-width:min(720px,92vw); width:100%; aspect-ratio:4/3; border-radius:20px; overflow:hidden; position:relative; }
.lightbox-close{ position:absolute; top:-46px; right:0; color:var(--cream); font-size:.85rem; display:flex; align-items:center; gap:.4em; }
@media (max-width:640px){ .lightbox-close{ top:-38px; } }

/* ============================================================
   NOSOTROS
   ============================================================ */
.nosotros-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:start; }
.nosotros-text p{ color:var(--choco-soft); margin-bottom:1em; }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:2em; }
.stat b{ font-family:'Fraunces',serif; font-size:2.1rem; display:block; color:var(--terracotta-deep); }
.stat span{ font-size:.8rem; color:var(--choco-mute); }
.insta-card{ background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:22px; box-shadow:var(--shadow); }
.insta-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.insta-head .avatar{ width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--terracotta),var(--mostaza)); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-style:italic; color:#fff; font-size:1.1rem; }
.insta-head strong{ display:block; font-size:.92rem; }
.insta-head span{ font-size:.78rem; color:var(--choco-mute); }
.insta-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.insta-grid div{ aspect-ratio:1; border-radius:10px; background:var(--cream-2); display:flex; align-items:center; justify-content:center; color:var(--terracotta-deep); }
.insta-grid svg{ width:34%; height:34%; }
.insta-foot{ display:flex; gap:14px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.insta-foot svg{ width:16px; height:16px; }
@media (max-width:860px){ .nosotros-grid{ grid-template-columns:1fr; gap:36px; } }

/* ============================================================
   RECETAS / BLOG (teaser)
   ============================================================ */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.blog-card{ background:var(--paper); border-radius:20px; overflow:hidden; border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.blog-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.blog-card .ph-photo{ aspect-ratio:16/10; }
.blog-card-body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:.5em; }
.blog-date{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sage); font-weight:700; }
.blog-card h3{ font-size:1.08rem; line-height:1.3; }
.blog-card p{ color:var(--choco-soft); font-size:.9rem; }
.blog-card .read-more{ font-size:.85rem; font-weight:600; color:var(--terracotta-deep); margin-top:.3em; display:inline-flex; align-items:center; gap:.4em; }
@media (max-width:860px){ .blog-grid{ grid-template-columns:1fr; } }

/* ============================================================
   UBICACIÓN
   ============================================================ */
.ubicacion-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:30px; align-items:stretch; }
.info-card{ background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:30px; display:flex; flex-direction:column; gap:22px; }
.info-row{ display:flex; gap:14px; align-items:flex-start; }
.info-row svg{ width:20px; height:20px; flex:none; margin-top:.2em; color:var(--terracotta-deep); }
.info-row b{ display:block; font-size:.92rem; margin-bottom:.3em; }
.info-row p{ color:var(--choco-soft); font-size:.9rem; }
.hours{ border-collapse:collapse; font-size:.88rem; color:var(--choco-soft); }
.hours td{ padding:.15em .6em .15em 0; }
.map-frame{ border-radius:22px; overflow:hidden; min-height:320px; border:1px solid var(--line); }
.map-frame iframe{ width:100%; height:100%; min-height:320px; border:0; filter:grayscale(.15) sepia(.08); }
@media (max-width:860px){ .ubicacion-grid{ grid-template-columns:1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:var(--choco); color:var(--cream); padding:60px 0 26px; }
.footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,253,247,.14); }
.footer-brand .brand{ color:var(--cream); }
.footer-brand .brand small{ color:rgba(255,253,247,.55); }
.footer-nav{ display:flex; gap:60px; flex-wrap:wrap; }
.footer-col h4{ font-family:'Inter',sans-serif; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,253,247,.5); margin-bottom:1em; }
.footer-col a{ display:block; font-size:.9rem; padding:.3em 0; color:rgba(255,253,247,.85); }
.footer-col a:hover{ color:var(--mostaza); }
.footer-social{ display:flex; gap:14px; }
.footer-social svg{ width:15px; height:15px; }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding-top:22px; font-size:.76rem; color:rgba(255,253,247,.5); }

/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.6);
  transition:transform .35s var(--ease);
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:26px; height:26px; }

/* ============================================================
   UTILIDADES / RESPONSIVE GLOBAL
   ============================================================ */
@media (max-width:640px){
  .steps{ gap:18px; }
  .gallery-grid{ gap:10px; }
  section{ padding:56px 0; }
}

.blog-page-hero{ padding-top:calc(var(--nav-h) + 50px); }
.blog-post-full{ max-width:720px; margin-inline:auto; }
.blog-post-full .ph-photo{ aspect-ratio:16/9; border-radius:20px; margin-bottom:2em; }
.blog-post-full h2{ font-size:clamp(1.7rem,3.6vw,2.4rem); margin-bottom:.4em; }
.blog-post-full .blog-date{ margin-bottom:.8em; display:block; }
.blog-post-full p{ color:var(--choco-soft); margin-bottom:1.2em; font-size:1.02rem; }