/* Pájaro Repostero — Landing styles */

:root{
  --olive:        #656839;   /* verde exacto del logo (fondo + ave) */
  --olive-deep:   #4f512c;
  --olive-soft:   #828457;
  --cream:        #f5efe2;
  --cream-soft:   #faf6ec;
  --paper:        #fbf8f1;
  --ink:          #2a241c;
  --ink-soft:     #5b5347;
  --copper:       #b66a3c;
  --copper-deep:  #8e4f29;
  --line:         rgba(42, 36, 28, .14);

  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sans:  "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}

/* ── Layout ─────────────────────────── */
.wrap{ max-width:1240px; margin:0 auto; padding:0 32px; }
@media (max-width:680px){ .wrap{ padding:0 22px; } }

.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--olive-deep);
}

.h-display{
  font-family:var(--serif);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.012em;
  color:var(--ink);
  font-feature-settings:"liga","dlig";
}
.h-display .em{
  font-style:italic;
  font-weight:500;
  color:var(--olive-deep);
}

/* ── Nav ────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--olive);
  border-bottom:1px solid color-mix(in oklab, var(--cream) 18%, transparent);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.nav-logo{
  display:flex; align-items:center;
}
.logo-img{
  height:64px; width:auto; display:block;
  mix-blend-mode:normal;
}
@media (max-width:480px){
  .logo-img{ height:52px; }
}
.footer-logo{
  height:54px; width:auto; display:block;
  border-radius:4px;
}
.nav-links{
  display:flex; gap:30px; font-size:14px;
  color:color-mix(in oklab, var(--cream) 78%, transparent);
}
.nav-links a{ position:relative; padding:4px 0; }
.nav-links a:hover{ color:var(--cream); }
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px;
  height:1px; background:var(--cream); transition:right .25s ease;
}
.nav-links a:hover::after{ right:0; }
@media (max-width:780px){ .nav-links{ display:none; } }

/* Nav button — cream on olive */
.nav .btn-primary{
  background:var(--cream);
  color:var(--ink);
}
.nav .btn-primary:hover{
  background:#fff;
  color:var(--ink);
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; border-radius:999px;
  font-size:13.5px; font-weight:500; letter-spacing:.02em;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  border:1px solid transparent;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--olive); color:#fbf8f1;
}
.btn-primary:hover{ background:var(--olive-deep); }
.btn-ghost{
  background:transparent; color:var(--ink); border-color:var(--ink);
}
.btn-ghost:hover{ background:var(--ink); color:var(--cream); }
.btn-copper{ background:var(--copper); color:#fbf8f1; }
.btn-copper:hover{ background:var(--copper-deep); }

/* ── Hero ───────────────────────────── */
.hero{
  padding:64px 0 90px;
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:60px;
  align-items:center;
}
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .hero{ padding:40px 0 70px; }
}
.hero h1{
  margin:18px 0 22px;
  font-size: clamp(48px, 7vw, 92px);
}
.hero h1 .bird-inline{
  display:inline-block; width:.78em; height:.78em; vertical-align:-.06em;
  margin: 0 .04em;
}
.hero-lede{
  font-size:17px; line-height:1.6; color:var(--ink-soft);
  max-width:46ch;
}
.hero-meta{
  display:flex; gap:28px; flex-wrap:wrap;
  margin:34px 0 30px;
  padding:18px 0 0;
  border-top:1px solid var(--line);
  color:var(--ink-soft);
  font-size:13px;
}
.hero-meta div b{
  display:block; color:var(--ink);
  font-family:var(--serif); font-weight:600; font-size:22px;
  line-height:1; margin-bottom:6px; letter-spacing:.005em;
}
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }

.hero-photo{
  position:relative;
  aspect-ratio: 4/5;
  border-radius:20px;
  overflow:hidden;
  background:#2a241c;
  box-shadow: 0 30px 60px -30px rgba(42,36,28,.45);
}
.hero-photo img{
  width:100%; height:100%; object-fit:cover;
}
.hero-photo .badge{
  position:absolute; left:18px; top:18px;
  background:var(--paper);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  padding:8px 12px; border-radius:999px;
  font-weight:500; color:var(--ink);
}
.hero-photo .seal{
  position:absolute; right:-30px; bottom:-30px;
  width:160px; height:160px; border-radius:50%;
  background:var(--olive); color:var(--cream);
  display:grid; place-items:center; text-align:center;
  font-family:var(--serif); font-style:italic; font-size:17px;
  line-height:1.2; padding:24px;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.3);
  transform:rotate(-8deg);
}



/* ── Section header ─────────────────── */
.section{ padding:110px 0; }
@media (max-width:780px){ .section{ padding:72px 0; } }

.section-head{
  display:grid; grid-template-columns: 1fr 1.2fr; gap:60px;
  align-items:end; margin-bottom:50px;
}
.section-head h2{
  font-size: clamp(36px, 5vw, 60px);
  margin:14px 0 0;
}
.section-head .lede{
  color:var(--ink-soft); font-size:16px; line-height:1.6;
  max-width:52ch;
}
@media (max-width:780px){
  .section-head{ grid-template-columns:1fr; gap:18px; }
}

/* ── Producto destacado ─────────────── */
.feature{
  background: var(--olive);
  color: var(--cream);
  border-radius:24px;
  overflow:hidden;
  position:relative;
}
.feature-grid{
  display:grid; grid-template-columns: 1fr 1fr; min-height:520px;
}
@media (max-width:880px){
  .feature-grid{ grid-template-columns:1fr; }
}
.feature-photo{
  position:relative; overflow:hidden; background:#000;
}
.feature-photo img{ width:100%; height:100%; object-fit:cover; }
.feature-copy{
  padding:64px 56px; display:flex; flex-direction:column; justify-content:center; gap:18px;
}
@media (max-width:880px){ .feature-copy{ padding:44px 30px; } }
.feature-copy .eyebrow{ color: color-mix(in oklab, var(--cream) 70%, var(--olive)); }
.feature-copy h3{
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size: clamp(34px, 4.5vw, 56px); line-height:1; margin:0;
}
.feature-copy p{ font-size:16px; line-height:1.65; opacity:.85; max-width:42ch; }
.feature-stats{
  margin-top:14px; display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.feature-stats div{ padding-right:14px; }
.feature-stats b{
  display:block;
  font-family:var(--serif); font-size:30px; font-weight:600;
  line-height:1; margin-bottom:6px;
}
.feature-stats span{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; opacity:.72; }

/* ── Catálogo ───────────────────────── */
.cat-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:28px;
}
@media (max-width:880px){ .cat-grid{ grid-template-columns:1fr; } }

.cat{
  position:relative; display:flex; flex-direction:column; gap:18px;
}
.cat-photo{
  aspect-ratio: 4/5;
  border-radius:18px; overflow:hidden;
  background:#ddd6c5;
  position:relative;
}
.cat-photo img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.cat:hover .cat-photo img{ transform:scale(1.04); }
.cat .num{
  position:absolute; left:14px; top:14px;
  font-family:var(--serif); font-style:italic;
  font-size:18px; color:var(--paper);
  text-shadow:0 1px 8px rgba(0,0,0,.4);
  z-index:1;
}
.cat .price{
  position:absolute; right:14px; top:14px;
  background:var(--paper); padding:6px 10px;
  border-radius:999px; font-size:11.5px; font-weight:500;
  letter-spacing:.04em; color:var(--ink);
  z-index:1;
}
.cat h4{
  margin:0;
  font-family:var(--serif); font-weight:500; font-size:28px;
  letter-spacing:.005em; line-height:1.1;
}
.cat p{
  margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.55;
}
.cat-meta{
  display:flex; gap:14px; flex-wrap:wrap;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--olive-deep);
}
.cat-meta span{ display:inline-flex; align-items:center; gap:6px; }
.cat-meta .dot{ width:5px; height:5px; border-radius:50%; background:var(--olive); }

/* ── Story (sobre el horno) ─────────── */
.story{ background: var(--paper); }
.story-grid{
  display:grid; grid-template-columns: 1fr 1.1fr; gap:64px; align-items:center;
}
@media (max-width:880px){ .story-grid{ grid-template-columns:1fr; gap:36px; } }
.story h2{ font-size: clamp(34px, 4.6vw, 56px); margin:14px 0 22px; }
.story p{ color:var(--ink-soft); font-size:16px; line-height:1.7; }
.story p + p{ margin-top:14px; }
.story-quote{
  margin-top:30px;
  font-family:var(--serif); font-style:italic; font-size:22px; line-height:1.4;
  color:var(--ink); border-left:2px solid var(--olive);
  padding:6px 0 6px 20px;
}
.story-quote cite{
  display:block; margin-top:10px;
  font-style:normal; font-family:var(--sans);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--olive-deep); font-weight:500;
}
.story-photos{
  display:grid; grid-template-columns: 1fr 1fr; gap:14px;
  grid-template-rows: 180px 220px;
}
.story-photos > div{
  border-radius:18px; overflow:hidden; background:#ddd6c5;
}
.story-photos > div img{ width:100%; height:100%; object-fit:cover; }
.story-photos > div:nth-child(1){ grid-row: span 2; }

/* ── Cómo pedir ─────────────────────── */
.steps{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:40px;
}
.step{
  padding:0 12px 0 0;
  display:flex; flex-direction:column; gap:14px;
}
@media (max-width:780px){
  .steps{ grid-template-columns:1fr; gap:30px; }
  .step{ padding:0; }
}
.step .n{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:42px; color:var(--olive); line-height:1;
}
.step h5{
  margin:0; font-family:var(--serif); font-weight:500; font-size:22px; line-height:1.2;
}
.step p{ margin:0; color:var(--ink-soft); font-size:14px; line-height:1.55; }

/* ── Contacto ───────────────────────── */
.contact{
  background: var(--olive);
  color: var(--cream);
  border-radius:24px;
  overflow:hidden;
  position:relative;
}
.contact-grid{
  display:grid; grid-template-columns: 1fr 1.1fr; gap:0;
}
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-side{
  padding:64px 56px;
  border-right:1px solid color-mix(in oklab, var(--cream) 18%, transparent);
}
@media (max-width:900px){
  .contact-side{ border-right:0; border-bottom:1px solid color-mix(in oklab, var(--cream) 18%, transparent); padding:44px 30px; }
}
.contact-side h2{
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size: clamp(34px, 4.5vw, 56px); line-height:1; margin:12px 0 18px;
}
.contact-side .eyebrow{ color:color-mix(in oklab, var(--cream) 70%, var(--olive)); }
.contact-side .lede{ opacity:.85; font-size:15.5px; line-height:1.65; max-width:38ch; }

.contact-list{
  margin-top:34px; display:flex; flex-direction:column; gap:18px;
  font-size:14.5px;
}
.contact-list .item{
  display:flex; gap:14px; align-items:flex-start;
}
.contact-list .item .ic{
  width:34px; height:34px; border-radius:50%;
  background:color-mix(in oklab, var(--cream) 12%, transparent);
  display:grid; place-items:center; flex:none;
  color:var(--cream);
}
.contact-list .item b{
  display:block; font-weight:500; margin-bottom:2px;
}
.contact-list .item span{ opacity:.78; font-size:13.5px; }

.contact-form{
  background:var(--paper); color:var(--ink);
  padding:54px 48px;
}
@media (max-width:900px){ .contact-form{ padding:36px 26px; } }

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.field label{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500;
}
.field input, .field textarea, .field select{
  font-family:inherit; font-size:15px; color:var(--ink);
  background:transparent;
  border:0; border-bottom:1px solid var(--line);
  padding:10px 0; outline:none;
  transition:border-color .2s ease;
  width:100%;
  appearance:none; border-radius:0;
}
.field textarea{ resize:vertical; min-height:90px; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--olive); }
.field select{ background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 14px) 18px, calc(100% - 9px) 18px; background-size: 5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:30px; }

.field.error input, .field.error textarea, .field.error select{ border-color:#a4451f; }
.field .err{ color:#a4451f; font-size:12px; margin-top:2px; }

.row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:580px){ .row2{ grid-template-columns:1fr; gap:0; } }

.chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.chip{
  font-size:12.5px; padding:8px 12px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-soft);
  cursor:pointer; transition: all .15s ease;
  background:transparent;
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.on{
  background:var(--ink); color:var(--cream); border-color:var(--ink);
}

.submit-row{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:24px; gap:18px; flex-wrap:wrap;
}
.fine{ font-size:11.5px; color:var(--ink-soft); max-width:38ch; }

.success{
  background:var(--paper); color:var(--ink);
  padding:60px 48px;
  display:flex; flex-direction:column; gap:16px; align-items:flex-start;
}
.success .check{
  width:48px; height:48px; border-radius:50%;
  background:var(--olive); color:var(--cream);
  display:grid; place-items:center;
}
.success h3{
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:34px; margin:0; line-height:1.1;
}
.success p{ color:var(--ink-soft); margin:0; font-size:15px; line-height:1.6; max-width:42ch; }

/* ── Footer ─────────────────────────── */
.footer{
  background:var(--ink); color: color-mix(in oklab, var(--cream) 85%, transparent);
  padding:70px 0 30px;
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px;
}
@media (max-width:780px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:30px; } }
.footer h6{
  margin:0 0 14px; font-family:var(--sans); font-size:11.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cream);
  font-weight:500;
}
.footer p, .footer a, .footer li{ font-size:14px; line-height:1.7; }
.footer ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
.footer a:hover{ color:var(--cream); }
.footer .brand{
  font-family:var(--serif); font-size:30px; font-weight:600;
  color:var(--cream); margin-bottom:14px;
}
.footer .brand small{
  display:block; font-family:var(--sans); font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:color-mix(in oklab, var(--cream) 60%, transparent);
  margin-top:6px; font-weight:500;
}
.foot-bottom{
  margin-top:60px; padding-top:24px;
  border-top:1px solid color-mix(in oklab, var(--cream) 12%, transparent);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:12px; color: color-mix(in oklab, var(--cream) 55%, transparent);
}


/* ── Selector de tamaños ────────────── */
.feat-sizes { margin-top:20px; }
.feat-sizes-label {
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  opacity:.65; display:block; margin-bottom:12px; font-weight:500;
}
.feat-sizes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.feat-size {
  border:1px solid color-mix(in oklab, var(--cream) 28%, transparent);
  border-radius:12px; padding:14px 10px;
  display:flex; flex-direction:column; gap:3px; align-items:center;
  text-align:center; cursor:pointer; color:var(--cream);
  background:transparent; transition:all .18s ease;
}
.feat-size:hover {
  border-color:color-mix(in oklab, var(--cream) 55%, transparent);
  background:color-mix(in oklab, var(--cream) 8%, transparent);
}
.feat-size.on {
  border-color:var(--cream);
  background:color-mix(in oklab, var(--cream) 15%, transparent);
}
.feat-size-d { font-family:var(--serif); font-size:24px; font-weight:600; line-height:1; }
.feat-size-name { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.72; }
.feat-size-pax { font-size:11px; opacity:.6; }
.feat-size-price { font-family:var(--serif); font-size:18px; margin-top:6px; line-height:1; }

/* Helpers */
.fade-in{ animation: fadeUp .8s ease both; }
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:translateY(0); }
}

/* Variants exposed via tweaks */
body[data-bg="paper"]{ background:var(--paper); }
body[data-bg="olive"]{ background:#dfdec7; }

body[data-display="italic"] .h-display{ font-style:italic; }
body[data-display="italic"] .h-display .em{ font-style:normal; }