/* ==========================================================
   DÓNDE Y CÓMO PEDIR — pasos + calendario de mercados + cierre
   ========================================================== */
.where { position: relative; background: var(--mint); color: var(--choc-900); padding: clamp(72px, 9vw, 130px) 0; margin-top: -1px; isolation: isolate; border-radius: clamp(28px, 5vw, 64px) clamp(28px, 5vw, 64px) 0 0; overflow: hidden; }
.where .eyebrow { color: var(--mint-800); }
.where h2 em { color: var(--choc); }
.where__head { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 16px; }
.where__grid { max-width: var(--maxw); margin: clamp(28px, 4vw, 56px) auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: start; }

/* Pasos tipo ticket */
.steps { display: grid; gap: 14px; counter-reset: s; }
.step { position: relative; background: var(--paper); border-radius: 22px; padding: 20px 22px 20px 78px; box-shadow: 0 14px 26px -18px rgba(20, 60, 50, .7); display: grid; gap: 6px; transition: transform .4s var(--ease); }
.step:hover { transform: translateX(6px) rotate(-.4deg); }
.step::before { counter-increment: s; content: counter(s); position: absolute; left: 18px; top: 18px; width: 44px; height: 44px; border-radius: 50%; background: var(--choc); color: var(--butter); display: grid; place-items: center; font: 400 1.4rem/1 var(--f-display); }
.step h3 { font: 400 1.35rem/1.05 var(--f-display); }
.step p { font-size: .94rem; opacity: .85; }
.step .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.step .tags span { font-size: .74rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--butter); }
.step--ok::after { content: 'Confirmado'; position: absolute; right: 16px; top: 16px; font: 800 .58rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; background: var(--mint-300); color: var(--mint-800); padding: 5px 8px; border-radius: 6px; }

/* Polaroid del puesto */
.where__left { display: grid; gap: clamp(20px, 3vw, 36px); }
.polaroid { margin: 0 auto; width: min(100%, 320px); background: var(--paper); padding: 12px 12px 16px; border-radius: 6px; transform: rotate(-3deg); box-shadow: 0 26px 40px -22px rgba(10, 50, 40, .85); transition: transform .5s var(--ease); }
.polaroid:hover { transform: rotate(1deg) scale(1.03); }
.polaroid img { width: 100%; height: auto; max-height: 420px; object-fit: cover; object-position: 50% 62%; border-radius: 3px; }
.polaroid figcaption { font: italic 600 1rem/1.2 var(--f-serif); text-align: center; padding-top: 12px; }
.polaroid small { font: 700 .66rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; opacity: .6; font-style: normal; }

/* Calendario */
.cal { background: var(--butter); border-radius: 32px; padding: clamp(18px, 3vw, 34px); box-shadow: 0 30px 50px -30px rgba(10, 50, 40, .8); position: relative; overflow: hidden; }
.cal__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.cal__month { font: 400 clamp(1.8rem, 3.4vw, 2.8rem)/1 var(--f-display); overflow: hidden; }
.cal__month span { display: inline-block; }
.cal__nav { display: flex; gap: 8px; }
.cal__nav button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--choc); display: grid; place-items: center; transition: background .25s, color .25s, transform .3s var(--ease); }
.cal__nav button:hover { background: var(--choc); color: var(--butter); transform: scale(1.08); }
.cal__nav svg { width: 20px; height: 20px; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(3px, .8vw, 8px); }
.cal__dow { margin-bottom: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-align: center; opacity: .6; text-transform: uppercase; }
.cal__grid { min-height: 0; }
.day { position: relative; aspect-ratio: 1 / .86; border-radius: 14px; display: grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(.82rem, 1.4vw, 1rem); transition: background .25s, transform .3s var(--ease), color .25s; }
.day.is-out { opacity: .22; }
.day:not(.is-out):not(.has-ev):hover { background: var(--butter-300); }
.day.is-today { box-shadow: inset 0 0 0 2px var(--choc); }
.day.has-ev { background: var(--choc); color: var(--butter); cursor: pointer; }
.day.has-ev::after { content: ''; position: absolute; bottom: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.day.has-ev.is-demo { background: repeating-linear-gradient(135deg, var(--blush) 0 6px, #f9c9bf 6px 12px); color: #6B1D12; }
.day.has-ev.is-demo::after { background: #6B1D12; }
.day.has-ev:hover { transform: translateY(-4px) rotate(-3deg); }
.day.is-sel { background: var(--caramel); color: #2E1A0B; transform: scale(1.08); box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .5); z-index: 1; }
.day.is-sel::after { background: var(--choc); }

.cal__info { margin-top: 18px; min-height: 160px; position: relative; }
.ev { background: var(--paper); border-radius: 22px; padding: 18px 20px; display: grid; gap: 10px; border: 2px solid var(--choc); }
.ev__kind { font: 800 .66rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ev__kind i { font-style: normal; background: var(--mint); padding: 5px 9px; border-radius: 6px; }
.ev__kind .st { background: var(--butter-300); }
.ev h3 { font: 400 clamp(1.3rem, 2.3vw, 1.8rem)/1.05 var(--f-display); }
.ev__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-weight: 600; font-size: .92rem; }
.ev__meta span { display: inline-flex; align-items: center; gap: 6px; }
.ev__meta svg { width: 16px; height: 16px; flex: none; }
.ev__img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 14px; }
.ev__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ev__vnote { font-size: .74rem; opacity: .7; line-height: 1.35; }
.cal__empty { padding: 20px; text-align: center; border: 2px dashed color-mix(in srgb, var(--choc) 30%, transparent); border-radius: 22px; font-size: .95rem; opacity: .85; display: grid; gap: 4px; place-items: center; min-height: 150px; }
.cal__cards { display: grid; gap: 12px; }
.cal__up { margin-top: 18px; display: grid; gap: 10px; }
.cal__up h3 { font: 800 .72rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.cal__up ul { display: grid; gap: 8px; }
.cal__up button { width: 100%; display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: 2px 10px; align-items: baseline; text-align: left; padding: 12px 16px; border-radius: 16px; background: var(--paper); border: 2px solid transparent; transition: border-color .25s, transform .3s var(--ease); }
.cal__up button:hover, .cal__up button:focus-visible { border-color: var(--choc); transform: translateY(-2px); }
.cal__up b { font-weight: 800; font-size: .9rem; }
.cal__up strong { font: 400 1.05rem/1.15 var(--f-display); overflow-wrap: anywhere; }
.cal__up small { grid-column: 2; font-size: .84rem; opacity: .8; overflow-wrap: anywhere; }
.cal__up p { font-size: .92rem; font-weight: 600; opacity: .8; }
.cal__demo { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .82rem; }
.switch { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch .tr { width: 44px; height: 26px; border-radius: 14px; background: color-mix(in srgb, var(--choc) 25%, transparent); position: relative; transition: background .25s; }
.switch .tr::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); transition: transform .3s var(--ease); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.switch input:checked + .tr { background: var(--choc); }
.switch input:checked + .tr::after { transform: translateX(18px); }
.switch input:focus-visible + .tr { outline: 3px solid var(--mint-600); outline-offset: 2px; }

/* Cobertura de entrega: mapa aproximado + comprobar una dirección */
.cov { max-width: var(--maxw); margin: clamp(28px, 4vw, 56px) auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.cov[hidden] { display: none; }
.cov__map, .cov__check { background: var(--butter); border-radius: 32px; padding: clamp(16px, 2.6vw, 28px); box-shadow: 0 30px 50px -30px rgba(10, 50, 40, .8); display: grid; gap: 12px; min-width: 0; }
/* Mapa cuadrado, a escala: los círculos son los radios reales */
.cov__svg { display: block; width: 100%; height: auto; aspect-ratio: 1; max-width: 560px; margin: 0 auto; border-radius: 20px; }
.cov__sea { fill: color-mix(in srgb, var(--mint) 45%, #fff); }
.cov__land { fill: var(--paper); }
.cov__sea { stroke: color-mix(in srgb, var(--mint-800, #2b6b5b) 25%, transparent); stroke-width: .6; }
.cov__ring { stroke-width: 2.5; stroke-linejoin: round; }
.cov__ring--local { fill: color-mix(in srgb, var(--caramel) 30%, transparent); stroke: #B86E22; }
.cov__ring--free { fill: color-mix(in srgb, var(--choc) 28%, transparent); stroke: var(--choc); }
.cov__ref, .cov__tag, .cov__scale text { paint-order: stroke; stroke: var(--paper); stroke-width: 3.5px; stroke-linejoin: round; text-anchor: middle; }
.cov__ref { font: 700 12.5px/1 var(--f-body); fill: var(--choc-900); }
.cov__tag { font: 800 14px/1 var(--f-body); fill: #8A4E12; letter-spacing: .04em; }
.cov__tag--free { fill: var(--choc); }
.cov__scale path { stroke: var(--choc-900); stroke-width: 2; fill: none; }
.cov__scale text { font: 700 11px/1 var(--f-body); fill: var(--choc-900); }
.cov__legend { display: grid; gap: 6px; font-size: .86rem; font-weight: 600; }
.cov__legend li { display: flex; align-items: center; gap: 10px; }
.cov__legend i { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--choc); }
.cov__legend .is-free { background: color-mix(in srgb, var(--choc) 28%, var(--paper)); }
.cov__legend .is-local { background: color-mix(in srgb, var(--caramel) 30%, var(--paper)); border-color: #B86E22; }
.cov__legend .is-ups { background: var(--paper); border-style: dashed; border-radius: 5px; }
.cov__fine, .cov__note { font-size: .8rem; opacity: .75; }
.cov__check h3 { font: 400 clamp(1.5rem, 2.6vw, 2.1rem)/1.05 var(--f-display); }
.cov__check label { font-weight: 700; font-size: .88rem; }
.cov__check input { width: 100%; min-height: 50px; border-radius: 14px; border: 2px solid color-mix(in srgb, var(--choc) 30%, transparent); background: #fff; padding: 12px 14px; font: 500 1rem/1.3 var(--f-body); color: var(--choc-900); }
.cov__check input:focus { outline: none; border-color: var(--choc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 70%, transparent); }
.cov__check .btn { justify-self: start; }
.cov__result { display: grid; gap: 10px; }
.cov__result:empty { display: none; }
.cov__matched { font-weight: 700; font-size: .9rem; overflow-wrap: anywhere; }
.cov__err { font-weight: 700; color: #A93226; }
.cov__opts { display: grid; gap: 6px; }
.cov__opts li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--paper); }
.cov__opts span { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================
   CIERRE
   ========================================================== */
.closing { position: relative; background: var(--choc-900); color: var(--butter); padding: clamp(80px, 10vw, 150px) 0 0; margin-top: -1px; overflow: hidden; }
.closing__inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) clamp(60px, 8vw, 120px); display: grid; gap: 22px; justify-items: start; }
.closing__logo { width: clamp(110px, 14vw, 190px); color: var(--butter); }
.closing__by { font-size: 1.1rem; opacity: .85; }
.closing__cookies { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cc { position: absolute; height: auto; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .45)); will-change: transform; }
.cc--1 { width: clamp(150px, 19vw, 290px); right: 25%; top: 10%; transform: rotate(-14deg); }
.cc--2 { width: clamp(130px, 15vw, 230px); right: 5%; top: 8%; transform: rotate(12deg); }
.cc--3 { width: clamp(110px, 13vw, 200px); right: 30%; bottom: 24%; transform: rotate(24deg); }
.closing__mascot { position: absolute; right: var(--gutter); bottom: 0; width: clamp(120px, 20vw, 280px); height: auto; }
.foot { border-top: 1.5px solid rgba(248, 239, 198, .2); max-width: var(--maxw); margin: 0 auto; padding: 24px var(--gutter) 90px; display: grid; gap: 16px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot__links a { font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--mint); }
.foot__links a:hover { color: var(--mint); }
.foot__legal { font-size: .8rem; opacity: .65; max-width: 70ch; line-height: 1.45; }
.foot__credit { text-align: center; font-size: .78rem; letter-spacing: .04em; margin-top: 4px; }
.foot__credit a { display: inline-block; padding: 6px 8px; color: rgba(248, 239, 198, .78); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color .25s, text-decoration-color .25s; }
.foot__credit a:hover, .foot__credit a:focus-visible { color: var(--mint); text-decoration-color: var(--mint); }

@media (max-width: 1000px) {
  .where__grid { grid-template-columns: 1fr; }
  .cov { grid-template-columns: 1fr; }
  .closing__mascot { width: 36vw; }
  .closing__by { max-width: 60%; }
  .cc--1 { width: 36vw; right: 3%; top: 1%; }
  .cc--2 { width: 28vw; right: -5%; top: 15%; }
  .cc--3 { display: none; }
}
@media (max-width: 520px) {
  .step { padding: 18px 16px 18px 70px; }
  .step::before { left: 14px; }
  .step--ok::after { display: none; }
  .day { border-radius: 10px; }
}