/* ============================================================
   La Tortillería Europa — static presentation site
   Palette: mole (dark), masa (cream), chili, marigold, agave
   ============================================================ */

:root{
  --mole:        #241A12;
  --mole-2:      #2E2118;
  --mole-3:      #382919;
  --masa:        #F4EAD2;
  --masa-dim:    #D9CBA9;
  --chili:       #C0392B;
  --chili-dark:  #8F291D;
  --marigold:    #E5A431;
  --agave:       #6E8F53;
  --pink:        #C85C7C;
  --line:        rgba(244,234,210,0.14);

  --display: 'Alfa Slab One', serif;
  --body: 'Barlow', sans-serif;
  --hand: 'Caveat', cursive;

  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--mole);
  color:var(--masa);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:.01em;margin:0 0 .4em;color:var(--masa);}
h1{font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;}
h2{font-size:clamp(1.7rem,4vw,2.6rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em;}
.eyebrow{
  font-family:var(--hand);
  font-size:1.5rem;
  color:var(--marigold);
  display:inline-block;
  margin-bottom:.15em;
  transform:rotate(-1.5deg);
}
.lead{font-size:1.15rem;color:var(--masa-dim);max-width:62ch;}
.center{text-align:center;margin-left:auto;margin-right:auto;}
.btn{
  display:inline-block;
  font-family:var(--body);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.85rem;
  padding:.95em 1.7em;
  border-radius:2px;
  border:2px solid transparent;
  cursor:pointer;
}
.btn-primary{background:var(--chili);color:var(--masa);box-shadow:4px 4px 0 var(--marigold);}
.btn-primary:hover{background:var(--chili-dark);}
.btn-ghost{border-color:var(--masa);color:var(--masa);}
.btn-ghost:hover{background:var(--masa);color:var(--mole);}

/* ---------- papel picado divider ---------- */
.picado{
  height:26px;
  width:100%;
  background-repeat:repeat-x;
  background-size:52px 26px;
  background-image:
    radial-gradient(circle at 26px 0, transparent 12px, var(--mole) 13px);
}
.picado.flip{transform:rotate(180deg);}
.picado-red{ background-color:var(--chili); }
.picado-marigold{ background-color:var(--marigold); }
.picado-agave{ background-color:var(--agave); }
.picado-pink{ background-color:var(--pink); }

.bunting{
  display:flex;
  overflow:hidden;
  height:40px;
  margin:0;
}
.bunting span{
  flex:1 0 40px;
  height:40px;
  clip-path:polygon(0 0,100% 0,50% 100%);
  margin:0 2px;
}
.bunting span:nth-child(5n+1){background:var(--chili);}
.bunting span:nth-child(5n+2){background:var(--marigold);}
.bunting span:nth-child(5n+3){background:var(--agave);}
.bunting span:nth-child(5n+4){background:var(--pink);}
.bunting span:nth-child(5n+5){background:var(--masa-dim);}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(36,26,18,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px;}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.15rem;letter-spacing:.02em;}
.logo .mark{
  width:38px;height:38px;border-radius:50%;
  background:conic-gradient(var(--chili) 0 25%,var(--marigold) 25% 50%,var(--agave) 50% 75%,var(--pink) 75% 100%);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--body);font-weight:800;color:var(--mole);font-size:.75rem;
}
.logo small{display:block;font-family:var(--body);font-size:.62rem;letter-spacing:.15em;color:var(--masa-dim);text-transform:uppercase;font-weight:600;}
nav.links{display:flex;gap:22px;font-size:.92rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600;}
nav.links a{opacity:.85;border-bottom:2px solid transparent;padding-bottom:4px;}
nav.links a:hover{opacity:1;border-color:var(--marigold);}
.lang-switch{display:flex;gap:6px;font-size:.78rem;font-weight:700;text-transform:uppercase;}
.lang-switch a{padding:5px 9px;border:1px solid var(--line);border-radius:3px;opacity:.7;}
.lang-switch a.active{background:var(--marigold);color:var(--mole);border-color:var(--marigold);opacity:1;}
.lang-switch a:hover{opacity:1;}
.burger{display:none;background:none;border:0;color:var(--masa);font-size:1.6rem;cursor:pointer;}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:86px 0 70px;}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 78% 18%, rgba(197,63,43,.28), transparent 55%),
    radial-gradient(ellipse at 8% 92%, rgba(110,143,83,.22), transparent 50%);
  pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;position:relative;}
.hero-photo{
  position:relative;border-radius:6px;overflow:hidden;
  box-shadow:10px 10px 0 var(--chili), 20px 20px 0 var(--mole-3);
  aspect-ratio:4/5;
}
.hero-photo img{width:100%;height:100%;object-fit:cover;}
.hero-tags{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0;}
.tag{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  border:1px solid var(--line);padding:.4em .8em;border-radius:20px;color:var(--masa-dim);
}
.stamp{
  position:absolute;bottom:-18px;right:-18px;background:var(--marigold);color:var(--mole);
  width:104px;height:104px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  text-align:center;font-family:var(--display);font-size:.72rem;line-height:1.15;
  transform:rotate(-9deg);box-shadow:0 6px 16px rgba(0,0,0,.35);
  border:3px dashed var(--mole);
}

/* ---------- section shell ---------- */
section{padding:78px 0;}
.section-alt{background:var(--mole-2);}
.section-head{max-width:680px;margin-bottom:44px;}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center;}
.about-photo{border-radius:6px;overflow:hidden;box-shadow:-10px 10px 0 var(--agave);}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px;}
.fact{border-left:3px solid var(--marigold);padding-left:14px;}
.fact b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--marigold);}
.fact span{font-size:.85rem;color:var(--masa-dim);}

/* ---------- product categories ---------- */
.category-block{margin-bottom:64px;}
.category-block:last-child{margin-bottom:0;}
.cat-head{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center;margin-bottom:28px;}
.cat-head img{border-radius:6px;aspect-ratio:1/1;object-fit:cover;box-shadow:6px 6px 0 var(--chili);}
.cat-head .eyebrow{margin-bottom:.1em;}

.product-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;list-style:none;margin:0;padding:0;}
.product-card{
  background:var(--mole-2);
  border:1px solid var(--line);
  border-radius:6px;
  padding:20px 20px 18px;
  position:relative;
  transition:transform .15s ease, border-color .15s ease;
}
.product-card:hover{transform:translateY(-3px);border-color:var(--marigold);}
.product-card .num{
  font-family:var(--display);font-size:.72rem;color:var(--mole);background:var(--marigold);
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  position:absolute;top:-13px;left:16px;box-shadow:0 3px 8px rgba(0,0,0,.35);
}
.product-card h4{font-family:var(--body);font-weight:700;font-size:1.02rem;margin:6px 0 8px;line-height:1.3;}
.product-card .pack{
  display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--marigold);
  border:1px dashed var(--marigold);border-radius:20px;padding:.3em .8em;font-weight:700;letter-spacing:.02em;
}
.product-card .brand{display:block;margin-top:10px;font-size:.78rem;color:var(--masa-dim);}
.product-card.has-photo{padding-top:0;overflow:hidden;}
.product-card.has-photo .photo{aspect-ratio:4/3;overflow:hidden;margin:0 -20px 14px;}
.product-card.has-photo .photo img{width:100%;height:100%;object-fit:cover;}
.product-card.has-photo .body{padding:0 2px;}

/* ---------- producers ---------- */
.producers{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;}
.producer{
  border:1px solid var(--line);border-radius:6px;padding:26px 18px;text-align:center;
  background:var(--mole-2);
}
.producer .initial{
  width:54px;height:54px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1.2rem;color:var(--mole);background:var(--pink);
}
.producer:nth-child(5n+1) .initial{background:var(--chili);color:var(--masa);}
.producer:nth-child(5n+2) .initial{background:var(--marigold);}
.producer:nth-child(5n+3) .initial{background:var(--agave);color:var(--masa);}
.producer:nth-child(5n+4) .initial{background:var(--pink);}
.producer:nth-child(5n+5) .initial{background:var(--masa-dim);}
.producer h4{margin:0 0 4px;font-size:.98rem;}
.producer span{font-size:.78rem;color:var(--masa-dim);}

/* ---------- clients ---------- */
.clients{columns:3;gap:0 40px;}
@media(max-width:820px){.clients{columns:2;}}
@media(max-width:560px){.clients{columns:1;}}
.clients a{
  display:flex;justify-content:space-between;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--line);
  font-size:.94rem;break-inside:avoid;
}
.clients a span.city{color:var(--masa-dim);font-size:.82rem;white-space:nowrap;}
.clients a:hover{color:var(--marigold);}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.contact-card{background:var(--mole-2);border:1px solid var(--line);border-radius:8px;padding:34px;}
.contact-row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);}
.contact-row:last-child{border-bottom:0;}
.contact-row .ico{
  width:38px;height:38px;flex:none;border-radius:50%;background:var(--chili);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.contact-row h4{margin:0 0 3px;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;color:var(--marigold);}
.contact-row a,.contact-row div{color:var(--masa);}
.note-box{
  border:1px dashed var(--masa-dim);border-radius:8px;padding:22px;font-size:.92rem;color:var(--masa-dim);
}
.note-box b{color:var(--masa);}

/* ---------- footer ---------- */
footer{padding:44px 0 30px;border-top:1px solid var(--line);}
.footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;align-items:center;}
.footer-grid .logo small{color:var(--masa-dim);}
.foot-links{display:flex;gap:20px;font-size:.85rem;flex-wrap:wrap;}
.copyright{font-size:.78rem;color:var(--masa-dim);margin-top:22px;}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero-grid,.about-grid,.contact-grid,.cat-head{grid-template-columns:1fr;}
  .about-photo{order:-1;}
}
@media(max-width:760px){
  nav.links{position:fixed;inset:64px 0 0 0;background:var(--mole);flex-direction:column;padding:30px 24px;
    transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;}
  nav.links.open{transform:translateX(0);}
  nav.links a{padding:12px 0;border-bottom:1px solid var(--line);}
  .burger{display:block;}
}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}