:root{
    --verde:#1B794D;
    --verde-oscuro:#134F32;
    --crema:#F0EAD2;
    --marfil:#F8F4E6;
    --tinta:#1A2F31;
    --dorado:#EACB61;
    --linea: rgba(26,47,49,0.15);
    --max: 1120px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  button, a{ touch-action:manipulation; }
  body{
    background:var(--crema);
    color:var(--tinta);
    font-family:'Manrope', sans-serif;
    -webkit-font-smoothing:antialiased;
    padding-bottom:132px;
    overflow-x:hidden;
  }
  @media (min-width:860px){ body{ padding-bottom:0; } }

  h1,h2,h3,.serif{ font-family:'Fraunces', serif; }

  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  .wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }

  /* textura grano sutil */
  .grain{ position:relative; }
  .grain::after{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode:multiply;
  }

  /* ===== HEADER ===== */
  header{
    padding:18px 0;
    border-bottom:2px solid var(--tinta);
  }
  header .wrap{ display:flex; align-items:center; justify-content:space-between; }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand img{ width:48px; height:48px; border-radius:50%; }
  .brand span{ font-family:'Fraunces', serif; font-weight:600; font-size:1.15rem; letter-spacing:.02em; }
  .header-cta{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--verde); color:var(--marfil);
    padding:10px 18px; border-radius:999px;
    font-weight:700; font-size:.82rem; text-decoration:none;
    border:2px solid var(--tinta);
  }
  .header-cta svg{ width:16px; height:16px; }
  @media (max-width:600px){ .header-cta span.long{ display:none; } }

  /* ===== HERO ===== */
  .hero{
    position:relative;
    padding:64px 0 56px;
    border-bottom:2px solid var(--tinta);
  }
  .hero .wrap{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:48px;
    align-items:center;
  }
  @media (max-width:860px){ .hero .wrap{ grid-template-columns:1fr; gap:36px; } }

  .kicker{
    display:inline-flex; align-items:center; gap:8px;
    font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    color:var(--verde-oscuro); margin-bottom:18px;
  }
  .kicker::before{ content:""; display:inline-block; width:16px; height:2px; background:var(--dorado); }

  .hero h1{
    font-size:clamp(2.3rem, 5.2vw, 3.6rem);
    line-height:1.05;
    font-weight:600;
    letter-spacing:-.01em;
    max-width:14ch;
  }
  .hero h1 em{ font-style:italic; color:var(--verde); }

  .hero p.lead{
    margin-top:20px;
    font-size:1.08rem;
    line-height:1.6;
    max-width:46ch;
    color:#2c4143;
  }

  .hero-ctas{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 26px;
    font-weight:700; font-size:.95rem;
    text-decoration:none;
    border:2px solid var(--tinta);
    border-radius:6px;
    cursor:pointer;
  }
  .btn-primary{ background:var(--verde); color:var(--marfil); }
  .btn-primary:hover{ background:var(--verde-oscuro); }
  .btn-outline{ background:transparent; color:var(--tinta); }
  .btn-outline:hover{ background:var(--tinta); color:var(--crema); }
  .btn svg{ width:18px; height:18px; flex-shrink:0; }

  .hero-badge{
    position:relative;
    display:flex; justify-content:center; align-items:center;
  }
  .hero-badge img{
    width:min(340px, 90%);
    filter: drop-shadow(0 10px 24px rgba(26,47,49,.18));
  }

  /* ===== SECCIÓN GENÉRICA ===== */
  section{ padding:64px 0; border-bottom:2px solid var(--tinta); position:relative; }
  section.no-border{ border-bottom:none; }
  .section-title{
    font-size:clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight:600;
    max-width:16ch;
    margin-bottom:18px;
  }
  .section-lead{ max-width:56ch; font-size:1.02rem; line-height:1.6; color:#2c4143; }
  hr.rule{ border:none; border-top:1px solid var(--linea); margin:40px 0; }

  /* ===== POR QUÉ / NUESTRA FILOSOFÍA (carrusel) ===== */
  .philosophy{
    background:var(--verde-oscuro);
    padding-bottom:56px;
    overflow:hidden;
  }
  .kicker-light{ color:var(--crema); }

  .philosophy-track-wrap{
    margin-top:32px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    cursor:grab;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
  .philosophy-track-wrap::-webkit-scrollbar{ display:none; }
  .philosophy-track-wrap.is-dragging{ cursor:grabbing; scroll-behavior:auto; }
  .philosophy-track{
    display:flex;
    width:max-content;
    will-change:transform;
    user-select:none;
    -webkit-user-select:none;
  }
  .philosophy-group{
    display:flex;
    flex:0 0 auto;
  }

  .philosophy-slide{
    position:relative;
    flex:0 0 auto;
    width:300px;
    height:400px;
    margin-right:14px;
    border-radius:10px;
    overflow:hidden;
  }
  .philosophy-slide img{
    width:100%; height:100%; object-fit:cover; display:block;
    -webkit-user-drag:none;
    pointer-events:none;
  }
  .philosophy-slide::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(15,23,20,.88) 0%, rgba(15,23,20,.25) 48%, transparent 68%);
  }
  .philosophy-slide figcaption{
    position:absolute; left:0; right:0; bottom:0;
    padding:20px 20px 22px;
    z-index:2;
  }
  .philosophy-slide h3{
    color:#fff; font-size:1.05rem; font-weight:700; line-height:1.25; margin-bottom:6px;
  }
  .philosophy-slide p{
    color:rgba(248,244,230,.88); font-size:.85rem; line-height:1.5;
  }
  .philosophy-slide .btn{
    margin-top:14px; padding:10px 18px; font-size:.82rem; border-color:var(--dorado);
  }

  @media (max-width:640px){
    .philosophy-slide{ width:230px; height:340px; }
  }

  @media (prefers-reduced-motion: reduce){
    .philosophy-track-wrap{ scroll-snap-type:x mandatory; }
    .philosophy-slide{ scroll-snap-align:start; }
    .philosophy-group[aria-hidden="true"]{ display:none; }
  }

  /* dropcap intro */
  .dropcap p::first-letter{
    font-family:'Fraunces', serif;
    font-size:3.6rem;
    float:left;
    line-height:.8;
    padding:6px 8px 0 0;
    color:var(--verde);
    font-weight:600;
  }

  /* ===== ARMADOR DE PEDIDO ===== */
  .builder{
    margin-top:40px;
    display:grid; grid-template-columns:1.3fr .9fr; gap:40px;
    align-items:flex-start;
  }
  @media (max-width:900px){ .builder{ grid-template-columns:1fr; } }

  .flavor-picker{ border-top:1px solid var(--linea); }
  .flavor-legend{
    display:flex; align-items:baseline; justify-content:flex-end;
    padding:0 4px 10px;
    font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color:#5c7072;
  }
  .flavor-legend .legend-note{
    text-transform:none; font-weight:500; letter-spacing:0; opacity:.8;
  }
  .flavor-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 4px;
    border-bottom:1px solid var(--linea);
    gap:12px;
  }
  .flavor-row .fname{ font-weight:700; font-size:.98rem; }
  .flavor-row .fnote{ display:block; font-size:.78rem; color:#4a5f61; font-weight:500; margin-top:2px; }
  .stepper{ display:flex; align-items:center; gap:0; border:2px solid var(--tinta); border-radius:6px; overflow:hidden; }
  .stepper button{
    width:34px; height:34px; border:none; background:var(--marfil); color:var(--tinta);
    font-size:1.1rem; font-weight:700; cursor:pointer;
    touch-action:manipulation; -webkit-user-select:none; user-select:none;
  }
  .stepper button:hover{ background:var(--dorado); }
  .stepper .qty{ width:46px; text-align:center; font-weight:800; font-size:.95rem; }

  .order-summary{
    background:var(--tinta); color:var(--crema);
    border-radius:10px; padding:28px 26px;
    position:sticky; top:20px;
  }
  .order-summary h3{ font-family:'Fraunces',serif; font-size:1.3rem; margin-bottom:4px; }
  .order-summary .sub{ font-size:.82rem; color:#a9c2c4; margin-bottom:20px; }
  .order-line{ display:flex; justify-content:space-between; font-size:.9rem; padding:6px 0; border-bottom:1px solid rgba(240,234,210,.14); }
  .order-empty{ font-size:.88rem; color:#a9c2c4; padding:10px 0; }
  .order-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; padding-top:16px; border-top:2px solid var(--dorado); }
  .order-total .amt{ font-family:'Fraunces',serif; font-size:1.7rem; color:var(--dorado); font-weight:600; }
  .tier-note{ font-size:.76rem; color:#a9c2c4; margin-top:6px; }
  .order-summary .btn-primary{ width:100%; justify-content:center; margin-top:20px; background:var(--verde); border-color:var(--dorado); }
  .order-summary .btn-primary:disabled{ opacity:.4; cursor:not-allowed; }
  .halfdoz-note{ margin-top:16px; font-size:.8rem; color:#a9c2c4; line-height:1.5; }
  .halfdoz-note a{ color:var(--dorado); font-weight:700; }

  /* ===== TERRITORIO (zonas interactivas) ===== */
  .territory-grid{
    margin-top:40px;
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  }
  @media (max-width:860px){ .territory-grid{ grid-template-columns:1fr; } }

  .territory-card{
    border:2px solid var(--tinta); border-radius:14px;
    padding:30px 26px;
    background:var(--marfil);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .territory-card > summary{
    list-style:none; cursor:pointer;
    display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  }
  .territory-card > summary::-webkit-details-marker{ display:none; }
  .territory-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(26,47,49,.12); }

  .t-badge{
    width:84px; height:84px; margin-bottom:18px;
    display:flex; align-items:center; justify-content:center;
    position:relative;
  }
  .t-badge svg{ width:100%; height:100%; overflow:visible; }
  .t-ring{ fill:none; stroke:var(--tinta); stroke-width:2; stroke-dasharray:3 5; }
  .t-ring-solid{ fill:none; stroke:var(--verde); stroke-width:2; }
  .t-icon{ fill:none; stroke:var(--verde); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }

  .t-badge-pulse .pulse-ring{
    fill:none; stroke:var(--verde); stroke-width:2;
    transform-origin:center;
    animation:t-pulse 2.6s ease-out infinite;
  }
  .t-badge-pulse .pulse-ring:nth-child(2){ animation-delay:.9s; }
  .t-badge-pulse .pulse-ring:nth-child(3){ animation-delay:1.8s; }
  @media (prefers-reduced-motion: reduce){ .t-badge-pulse .pulse-ring{ animation:none; opacity:.5; } }
  @keyframes t-pulse{
    0%{ transform:scale(.55); opacity:.9; }
    100%{ transform:scale(1.25); opacity:0; }
  }

  .territory-card h3{ font-size:1.2rem; font-weight:700; margin-bottom:6px; }
  .territory-card > summary > p{ font-size:.92rem; color:#2c4143; line-height:1.5; margin-bottom:14px; }
  .t-toggle{
    display:inline-flex; align-items:center; gap:6px;
    font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
    color:var(--verde-oscuro);
  }
  .t-toggle::after{ content:"↓"; transition:transform .2s ease; }
  .territory-card[open] .t-toggle::after{ transform:rotate(180deg); }

  .t-detail{ margin-top:18px; padding-top:18px; border-top:1px dashed var(--linea); }
  .t-detail p{ font-size:.9rem; line-height:1.6; color:#2c4143; }
  .zone-tags{ display:flex; flex-wrap:wrap; gap:8px; }
  .zone-tag{ border:1.5px solid var(--tinta); border-radius:999px; padding:4px 12px; font-size:.78rem; font-weight:700; background:var(--crema); }

  /* ===== COCCIÓN (callout hacia la página de instrucciones) ===== */
  .cook-callout{
    margin-top:40px;
    display:flex; align-items:center; gap:24px; flex-wrap:wrap;
    border:2px solid var(--tinta); border-radius:14px;
    padding:20px; background:var(--marfil);
  }
  .cook-callout .thumb{
    position:relative; width:120px; height:120px; flex-shrink:0;
    border-radius:10px; overflow:hidden; border:2px solid var(--tinta);
  }
  .cook-callout .thumb img{ width:100%; height:100%; object-fit:cover; }
  .cook-callout .thumb .play{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(26,47,49,.35);
  }
  .cook-callout .thumb .play svg{ width:34px; height:34px; color:var(--crema); }
  .cook-callout .txt{ flex:1; min-width:200px; }
  .cook-callout .txt h3{ font-size:1.1rem; font-weight:700; margin-bottom:6px; }
  .cook-callout .txt p{ font-size:.9rem; color:#2c4143; line-height:1.5; }

  /* ===== MAYORISTAS ===== */
  .wholesale{ background:var(--marfil); }
  .wholesale-box{
    margin-top:32px;
    border:2px dashed var(--verde-oscuro);
    border-radius:10px;
    padding:32px;
    display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  }
  .wholesale-box .txt h3{ font-size:1.25rem; margin-bottom:8px; }
  .wholesale-box .txt p{ font-size:.94rem; color:#2c4143; max-width:46ch; line-height:1.55;}

  /* ===== TRUST STRIP ===== */
  .trust-strip{ padding:34px 0; }
  .trust-strip .wrap{ display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; }
  .trust-item{ display:flex; align-items:center; gap:10px; font-size:.85rem; font-weight:700; }
  .trust-item svg{ width:20px; height:20px; color:var(--verde); flex-shrink:0; }

  /* ===== FAQ ===== */
  .faq-list{ margin-top:32px; border-top:1px solid var(--linea); max-width:760px; }
  details{ border-bottom:1px solid var(--linea); padding:18px 0; }
  summary{ cursor:pointer; font-weight:700; font-size:1rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
  summary::-webkit-details-marker{ display:none; }
  summary::after{ content:"+"; font-family:'Fraunces',serif; font-size:1.4rem; color:var(--verde); flex-shrink:0; }
  details[open] summary::after{ content:"–"; }
  details p{ margin-top:12px; font-size:.92rem; line-height:1.6; color:#2c4143; max-width:64ch; }

  /* ===== CTA FINAL ===== */
  .cta-final{ background:var(--tinta); color:var(--crema); text-align:center; }
  .cta-final h2{ font-size:clamp(1.9rem,4.4vw,2.8rem); max-width:16ch; margin:0 auto 18px; }
  .cta-final p{ max-width:48ch; margin:0 auto 30px; color:#c7d6d7; font-size:1.02rem; line-height:1.6; }
  .cta-final .btn-primary{ border-color:var(--dorado); }

  /* ===== FOOTER ===== */
  footer{ background:var(--verde); color:var(--marfil); padding:44px 0 28px; }
  footer .wrap{
    display:grid;
    grid-template-columns:1.3fr repeat(5, 1fr);
    gap:24px;
  }
  @media (max-width:1050px){ footer .wrap{ grid-template-columns:1fr 1fr 1fr; } }
  @media (max-width:640px){ footer .wrap{ grid-template-columns:1fr 1fr; } }
  @media (max-width:420px){ footer .wrap{ grid-template-columns:1fr; } }
  .foot-brand{ display:flex; align-items:center; gap:12px; }
  .foot-brand img{ width:44px; height:44px; border-radius:50%; }
  .foot-brand span{ font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem; }
  footer .foot-col h4{ font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; opacity:.85; }
  footer .foot-col p, footer .foot-col a{ font-size:.88rem; line-height:1.7; text-decoration:none; color:var(--marfil); opacity:.95; }
  .foot-bottom{ margin-top:36px; padding-top:20px; border-top:1px solid rgba(248,244,230,.25); font-size:.76rem; opacity:.8; }

  /* ===== STICKY CTA MOBILE ===== */
  .sticky-cta{
    position:fixed; bottom:0; left:0; right:0;
    background:var(--tinta);
    border-top:2px solid var(--dorado);
    padding:14px 16px calc(14px + env(safe-area-inset-bottom));
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    z-index:100;
  }
  .sticky-cta .stxt{ color:var(--crema); }
  .sticky-cta .stxt strong{ display:block; font-family:'Fraunces',serif; font-size:1rem; }
  .sticky-cta .stxt span{ font-size:.74rem; color:#a9c2c4; }
  .sticky-cta .btn-primary{ padding:12px 20px; font-size:.86rem; border-color:var(--dorado); }
  @media (min-width:860px){ .sticky-cta{ display:none; } }

  .note-flag{
    display:inline-block; margin-top:10px; font-size:.78rem; padding:5px 10px;
    border:1px solid var(--linea); border-radius:6px; color:#4a5f61;
  }

  /* ===== TRANSICIONES ENTRE PÁGINAS (progressive enhancement) ===== */
  @media (prefers-reduced-motion: no-preference){
    @view-transition{
      navigation:auto;
    }
  }

  /* ===== REVEAL AL HACER SCROLL (progressive enhancement, puramente decorativo) ===== */
  @media (prefers-reduced-motion: no-preference){
    @supports ((animation-timeline: view()) and (animation-range: entry)){
      @keyframes reveal-in{
        from{ opacity:0; translate:0 28px; }
      }
      .reveal{
        animation: reveal-in .6s ease-out both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
      }
    }
  }

  /* ===== ENLACE "VOLVER" (páginas secundarias) ===== */
  .back-link{
    display:inline-flex; align-items:center; gap:8px;
    font-size:.82rem; font-weight:700; color:var(--tinta);
  }
  .back-link svg{ width:16px; height:16px; }
  .back-link:hover{ color:var(--verde-oscuro); }
  .header-links{ display:flex; align-items:center; gap:20px; }
  .header-links .text-link{
    font-size:.82rem; font-weight:700; color:var(--tinta);
    display:none;
  }
  @media (min-width:700px){ .header-links .text-link{ display:inline; } }
  .header-links .text-link:hover{ color:var(--verde-oscuro); }

  /* ===== PÁGINA: PRESENTACIÓN ===== */
  .story-hero{
    padding:72px 0 56px;
    border-bottom:2px solid var(--tinta);
  }
  .story-hero h1{
    font-size:clamp(2.2rem, 5.6vw, 4rem);
    line-height:1.08;
    font-weight:600;
    max-width:18ch;
    margin-bottom:28px;
  }
  .story-hero .lead-block{ max-width:62ch; }
  .story-hero .lead-block p{ font-size:1.12rem; line-height:1.7; color:#2c4143; }

  .story-block{
    padding:40px 0;
    border-bottom:1px solid var(--linea);
    max-width:64ch;
  }
  .story-block:last-of-type{ border-bottom:2px solid var(--tinta); }
  .story-block h2{ font-size:clamp(1.4rem, 2.6vw, 1.9rem); font-weight:600; margin-bottom:14px; max-width:20ch; }
  .story-block p{ font-size:1.02rem; line-height:1.7; color:#2c4143; max-width:56ch; }

  .story-cta{ text-align:center; padding:64px 0; }
  .story-cta h2{ font-size:clamp(1.6rem,3.4vw,2.2rem); max-width:18ch; margin:0 auto 24px; }
  .story-cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

  /* ===== PÁGINA: CÓMO SE COCINAN ===== */
  .cook-hero{ padding:56px 0; border-bottom:2px solid var(--tinta); }
  .cook-hero h1{ font-size:clamp(2rem, 4.6vw, 3rem); max-width:16ch; margin-bottom:16px; }
  .cook-hero .section-lead{ margin-bottom:0; }

  .cook-layout{
    padding:56px 0;
    display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:start;
  }
  @media (max-width:860px){ .cook-layout{ grid-template-columns:1fr; } }

  .video-frame{
    position:relative; border:2px solid var(--tinta); border-radius:14px;
    overflow:hidden; background:var(--tinta);
    aspect-ratio:9/16; max-width:360px; margin:0 auto;
  }
  .video-frame video{ width:100%; height:100%; object-fit:cover; display:block; }

  .cook-steps{ counter-reset:step; }
  .cook-step{
    display:flex; gap:18px; padding:20px 0; border-bottom:1px solid var(--linea);
  }
  .cook-step:first-child{ padding-top:0; }
  .cook-step .step-num{
    counter-increment:step;
    font-family:'Fraunces',serif; font-size:1.3rem; color:var(--verde);
    width:32px; flex-shrink:0;
  }
  .cook-step .step-num::before{ content:counter(step, decimal-leading-zero); }
  .cook-step h3{ font-size:1rem; font-weight:700; margin-bottom:4px; }
  .cook-step p{ font-size:.92rem; line-height:1.6; color:#2c4143; }

  .cook-modes{ margin-top:8px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:520px){ .cook-modes{ grid-template-columns:1fr; } }
  .cook-mode{ border:2px solid var(--tinta); border-radius:10px; padding:18px; background:var(--marfil); }
  .cook-mode h4{ font-size:.95rem; font-weight:800; margin-bottom:6px; }
  .cook-mode p{ font-size:.86rem; color:#2c4143; line-height:1.5; }
  .cook-confirm-note{
    margin-top:18px; font-size:.78rem; color:#4a5f61;
    border-left:3px solid var(--dorado); padding-left:12px; line-height:1.6;
  }