/* =====================================================================
   NAVELGAS · DESPENSA ASTURIANA — ESTILOS
   Colores y tipografías principales en :root (justo debajo).
   Las tipografías se cargan desde css/fuentes.css.
   ===================================================================== */

:root {
  --verde: #1F3A2E;
  --verde-oscuro: #152A21;
  --verde-medio: #2C4B3D;
  --oro: #D9B661;
  --oro-oscuro: #8C6D2C;
  --oro-claro: #EADBB0;
  --crema: #FBFAF7;
  --crema-2: #F4F0E7;
  --crema-3: #EAE3D5;
  --blanco: #FFFFFF;
  --tinta: #1D2A23;
  --tinta-suave: #55665D;
  --linea: #E3DCCC;
  --error: #A3261B;

  --titulos: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --texto: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ancho: 1180px;
  --cabecera: 68px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecera) + 24px); }
body { margin: 0; background: var(--crema); color: var(--tinta); font-family: var(--texto); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
@media (min-width: 768px) { body { font-size: 1.0625rem; } }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--verde); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--oro-oscuro); }
h1, h2, h3, h4 { font-family: var(--titulos); font-weight: 600; line-height: 1.08; color: var(--verde); margin: 0 0 .5em; }
h1 { font-size: clamp(2.6rem, 7vw, 4.2rem); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); }
h3 { font-size: clamp(1.45rem, 3vw, 1.8rem); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--oro-oscuro); outline-offset: 3px; }
::selection { background: var(--oro-claro); color: var(--verde-oscuro); }

.oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 480px) { .contenedor { padding-inline: 20px; } }
@media (min-width: 768px) { .contenedor { padding-inline: 32px; } }
.contenedor--estrecho { max-width: 800px; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--verde); color: var(--crema); padding: 10px 16px; text-decoration: none; }
.saltar:focus { top: 12px; color: var(--crema); }

/* Datos pendientes de rellenar: [entre corchetes] */
.pendiente { background: #FFF1BF; color: #6B4F00; padding: 0 .3em; border-radius: 2px; font-style: normal; }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 50px; padding: .8em 1.5em; border: 1px solid var(--verde); background: var(--verde); color: var(--crema); font: 600 .8rem/1.2 var(--texto); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-radius: 2px; cursor: pointer; text-align: center; transition: background-color .2s, color .2s, border-color .2s; }
.boton:hover { background: var(--verde-oscuro); border-color: var(--verde-oscuro); color: var(--crema); }
.boton svg { flex: none; }
.boton--oro { background: var(--oro); border-color: var(--oro); color: var(--verde-oscuro); }
.boton--oro:hover { background: #E5C676; border-color: #E5C676; color: var(--verde-oscuro); }
.boton--linea { background: transparent; color: var(--verde); }
.boton--linea:hover { background: var(--verde); color: var(--crema); }
.boton--linea-claro { background: transparent; color: var(--crema); border-color: rgba(251, 250, 247, .45); }
.boton--linea-claro:hover { background: transparent; border-color: var(--oro); color: var(--oro); }
.boton--bloque { width: 100%; }
.boton--pequeno { min-height: 40px; padding: .6em 1em; font-size: .72rem; }
.boton[disabled], .boton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.enlace-boton { background: none; border: 0; padding: 0; color: var(--verde); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: .85rem; }
.enlace-flecha { font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; display: inline-flex; gap: .5em; align-items: center; }
.enlace-flecha::after { content: "→"; transition: transform .2s; }
.enlace-flecha:hover::after { transform: translateX(4px); }

/* ---------- Antetítulos y adornos ---------- */
.antetitulo { font: 600 .74rem/1.4 var(--texto); letter-spacing: .22em; text-transform: uppercase; color: var(--oro-oscuro); margin: 0 0 1rem; display: flex; align-items: center; gap: .9em; }
.antetitulo::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .8; flex: none; }
.antetitulo--claro { color: var(--oro); }
.centrado { text-align: center; }
.centrado .antetitulo, .seccion__cabecera .antetitulo { justify-content: center; }
.centrado .antetitulo::after, .seccion__cabecera .antetitulo::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .8; flex: none; }
.adorno { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--oro); margin: 0 auto 1.2rem; }
.adorno::before, .adorno::after { content: ""; width: 44px; height: 1px; background: currentColor; }
.adorno span { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); }

/* ---------- Franja de campaña ---------- */
.franja-campana { background: var(--verde-oscuro); color: var(--oro-claro); font-size: .72rem; letter-spacing: .06em; text-align: center; padding: .55em 0; }
.franja-campana strong { color: var(--oro); font-weight: 700; }
.franja-campana .sep { opacity: .5; margin: 0 .5em; }
@media (max-width: 559px) { .franja-campana .solo-ancho { display: none; } }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: rgba(251, 250, 247, .97); border-bottom: 1px solid var(--linea); }
.cabecera__fila { display: flex; align-items: center; gap: 10px; min-height: var(--cabecera); position: relative; }
.cabecera__logo { display: block; flex: none; }
.cabecera__logo img { height: 38px; width: auto; }
@media (min-width: 400px) { .cabecera__logo img { height: 42px; } }
@media (min-width: 900px) { .cabecera__logo img { height: 46px; } }
.cabecera__pedido { margin-left: auto; display: inline-flex; align-items: center; gap: .55em; text-decoration: none; font-weight: 600; font-size: .82rem; color: var(--verde); padding: .55em .8em; border: 1px solid var(--linea); border-radius: 2px; background: var(--blanco); min-height: 44px; }
.cabecera__pedido:hover { border-color: var(--oro); color: var(--verde); }
.contador { min-width: 1.6em; height: 1.6em; padding: 0 .45em; border-radius: 1em; background: var(--oro); color: var(--verde-oscuro); font-size: .72rem; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; }
.contador[data-vacio] { background: var(--crema-3); color: var(--tinta-suave); }
.cabecera__menu { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--linea); background: var(--blanco); color: var(--verde); border-radius: 2px; cursor: pointer; flex: none; }
@media (max-width: 419px) { .cabecera__pedido .texto { display: none; } }

/* Cabecera transparente sobre la foto de la portada (solo en el inicio) */
.cabecera--sobre-portada { transition: background-color .45s ease, border-color .45s ease; }
.cabecera--sobre-portada .cabecera__logo { transition: opacity .45s ease, transform .45s ease; }
.cabecera--sobre-portada .cabecera__pedido, .cabecera--sobre-portada .cabecera__menu { transition: background-color .45s ease, border-color .45s ease, color .45s ease; }
.cabecera--transparente { background: transparent; border-bottom-color: rgba(251, 250, 247, .16); }
.cabecera--transparente .cabecera__logo { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.cabecera--transparente .cabecera__pedido, .cabecera--transparente .cabecera__menu { background: rgba(21, 42, 33, .2); border-color: rgba(251, 250, 247, .42); color: var(--crema); }
.cabecera--transparente .cabecera__pedido:hover { border-color: var(--oro); color: var(--crema); }
.cabecera--transparente .contador[data-vacio] { background: rgba(251, 250, 247, .22); color: var(--crema); }

.menu { display: none; }
.menu a { text-decoration: none; color: var(--tinta); }
@media (max-width: 899px) {
  .menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--crema); border-bottom: 1px solid var(--linea); box-shadow: 0 18px 30px rgba(21, 42, 33, .12); padding: 6px 20px 26px; flex-direction: column; max-height: calc(100vh - 100px); overflow-y: auto; }
  .menu.abierto { display: flex; }
  .menu a { padding: 13px 0; border-bottom: 1px solid var(--linea); font-family: var(--titulos); font-size: 1.55rem; font-weight: 600; color: var(--verde); }
  .menu a[aria-current="page"] { color: var(--oro-oscuro); }
  .menu .menu__cesta { font-size: 1.2rem; padding-left: 18px; font-weight: 500; }
  .menu .menu__cesta span { font-family: var(--texto); font-size: .8rem; color: var(--tinta-suave); margin-left: .5em; }
}
@media (min-width: 900px) {
  .menu { display: flex; gap: 30px; margin-left: auto; }
  .menu a { font-size: .86rem; font-weight: 600; letter-spacing: .03em; padding: 6px 0; border-bottom: 1px solid transparent; }
  .menu a:hover, .menu a[aria-current="page"] { border-color: var(--oro); color: var(--verde); }
  .cabecera--sobre-portada .menu a { transition: color .45s ease, border-color .2s; }
  .cabecera--transparente .menu a, .cabecera--transparente .menu a:hover { color: var(--crema); text-shadow: 0 1px 10px rgba(0, 0, 0, .3); }
  .menu .menu__cesta { display: none; }
  .cabecera__pedido { margin-left: 14px; }
  .cabecera__menu { display: none; }
}

/* ---------- Banda de concejos ---------- */
.concejos { background: var(--verde-oscuro); color: rgba(251, 250, 247, .74); border-block: 1px solid rgba(217, 182, 97, .32); overflow: hidden; padding: 11px 0; }
.concejos__pista { display: flex; width: max-content; animation: desplazar 170s linear infinite; }
.concejos:hover .concejos__pista { animation-play-state: paused; }
.concejos__lista { display: flex; list-style: none; margin: 0; padding: 0; }
.concejos__lista li { font: 500 .7rem/1 var(--texto); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; display: flex; align-items: center; }
.concejos__lista li::after { content: ""; width: 4px; height: 4px; background: var(--oro); transform: rotate(45deg); margin: 0 1.5em; opacity: .65; }
.concejos__lista li.destacado { color: var(--oro); font-weight: 800; }
.concejos__lista li.destacado::before { content: ""; width: 13px; height: 13px; margin-right: .7em; border: 1.5px solid var(--oro); border-radius: 50%; background: radial-gradient(circle at 42% 56%, var(--oro) 0 2px, transparent 2.6px), radial-gradient(circle at 64% 40%, var(--oro) 0 1.3px, transparent 1.8px); }
@keyframes desplazar { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .concejos { overflow-x: auto; }
  .concejos__pista { animation: none; }
}

/* ---------- Secciones ---------- */
.seccion { padding-block: 64px; }
@media (min-width: 768px) { .seccion { padding-block: 100px; } }
.seccion--crema { background: var(--crema-2); }
.seccion--verde { background: var(--verde); color: rgba(251, 250, 247, .86); }
.seccion--verde h2, .seccion--verde h3 { color: var(--crema); }
.seccion__cabecera { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.seccion__cabecera p { color: var(--tinta-suave); font-size: 1.05rem; }
.seccion--verde .seccion__cabecera p { color: rgba(251, 250, 247, .78); }
.seccion--verde .antetitulo { color: var(--oro); }

/* ---------- Portada: foto a pantalla completa con parallax y niebla ---------- */
.portada {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; align-items: center;
  background: var(--verde-oscuro); color: var(--crema);
  /* sube por debajo de la cabecera, que es transparente mientras se ve la portada */
  margin-top: calc(-1 * var(--alto-cabecera, 69px));
  padding-top: var(--alto-cabecera, 69px);
  min-height: calc(100vh - var(--alto-franja, 29px));
  min-height: calc(100svh - var(--alto-franja, 29px));
}
.portada__fondo { position: absolute; inset: -4% 0 -8%; z-index: -3; transform-origin: 50% 35%; will-change: transform; }
.portada__fondo picture, .portada__imagen { display: block; width: 100%; height: 100%; }
.portada__imagen { object-fit: cover; object-position: 50% 42%; }
.js .portada__imagen { opacity: 0; transform: scale(1.1); transition: opacity 1.8s ease, transform 3.4s cubic-bezier(.2, .6, .2, 1); }
.js .portada.cargada .portada__imagen { opacity: 1; transform: none; }
.portada__velo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 52% at 50% 50%, rgba(21, 42, 33, .5), rgba(21, 42, 33, 0) 72%),
    linear-gradient(180deg, rgba(21, 42, 33, .78) 0%, rgba(31, 58, 46, .34) 30%, rgba(31, 58, 46, .4) 62%, rgba(21, 42, 33, .95) 100%);
}

/* Niebla: bandas de bruma que se desplazan despacio (también en la sección de entrega) */
.niebla { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.niebla span {
  position: absolute; left: 0; bottom: -6%; width: 200%; height: 68%;
  background-repeat: repeat-x; background-size: 50% 100%;
  background-image:
    radial-gradient(ellipse 21% 36% at 18% 64%, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 25% 28% at 50% 46%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 19% 34% at 81% 68%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
  opacity: .5; will-change: transform; animation: niebla 90s linear infinite;
}
.niebla span + span {
  bottom: 22%; height: 52%; opacity: .3; animation-duration: 140s; animation-direction: reverse;
  background-image:
    radial-gradient(ellipse 24% 30% at 30% 52%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 20% 26% at 70% 40%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 70%);
}
.niebla--suave span { opacity: .3; }
.niebla--suave span + span { opacity: .18; }
@keyframes niebla { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.portada__contenido { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 40px 118px; will-change: opacity, transform; }
.portada__logo { width: clamp(138px, 18vw, 216px); height: auto; margin-bottom: clamp(16px, 3vh, 30px); filter: drop-shadow(0 6px 26px rgba(0, 0, 0, .28)); }
.portada .antetitulo { justify-content: center; }
.portada .antetitulo::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .8; flex: none; }
.portada__titulo { color: var(--crema); font-size: clamp(2.7rem, 7.6vw, 5.5rem); font-weight: 500; line-height: 1; margin-bottom: .38em; text-shadow: 0 2px 34px rgba(0, 0, 0, .3); }
.portada__titulo em { color: var(--oro); font-style: italic; }
.portada__entrada { font-size: clamp(1rem, 1.5vw, 1.12rem); color: rgba(251, 250, 247, .9); max-width: 37em; text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
.portada__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
@media (max-width: 479px) { .portada__botones .boton { flex: 1 1 100%; } }

/* Entrada escalonada del logo, el título y el lema */
.js .entrada { opacity: 0; animation: entrada 1.25s cubic-bezier(.2, .65, .2, 1) forwards; animation-delay: calc(.35s + var(--i, 0) * .16s); }
@keyframes entrada { from { opacity: 0; transform: translate3d(0, 30px, 0); } to { opacity: 1; transform: none; } }

/* Indicador «desliza» */
.portada__bajar { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(251, 250, 247, .82); text-decoration: none; font: 600 .64rem/1 var(--texto); letter-spacing: .32em; text-transform: uppercase; padding: 6px 0 0 .32em; }
.portada__bajar:hover { color: var(--oro); }
.portada__bajar i { position: relative; width: 1px; height: 46px; background: rgba(251, 250, 247, .28); overflow: hidden; }
.portada__bajar i::after { content: ""; position: absolute; left: 0; top: -16px; width: 1px; height: 16px; background: var(--oro); animation: bajar 2.4s cubic-bezier(.6, 0, .3, 1) infinite; }
.js .portada__bajar > * { opacity: 0; animation: entrada 1s ease 1.5s forwards; }
@keyframes bajar { 0% { transform: translateY(0); } 100% { transform: translateY(64px); } }
@media (max-width: 480px) {
  .portada__contenido { padding-block: 26px 100px; }
  .portada__logo { width: 118px; margin-bottom: 14px; }
  .portada .antetitulo { margin-bottom: .8rem; }
}
@media (max-height: 640px) { .portada__bajar { display: none; } .portada__contenido { padding-bottom: 48px; } }

/* Datos de campaña bajo la portada */
.portada-datos { background: var(--verde-oscuro); color: var(--crema); padding-block: 24px 26px; }
.portada__datos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; }
.portada__datos li { font-size: .74rem; color: rgba(251, 250, 247, .72); line-height: 1.4; padding-inline: 4px; }
.portada__datos li + li { border-left: 1px solid rgba(217, 182, 97, .22); }
.portada__datos strong { display: block; font-family: var(--titulos); font-size: 1.08rem; color: var(--oro); font-weight: 600; margin-bottom: 3px; line-height: 1.15; }
@media (min-width: 700px) { .portada__datos li { font-size: .84rem; } .portada__datos strong { font-size: 1.35rem; } }

/* Secciones con foto de fondo (mismo estilo que la portada) */
.seccion--foto { position: relative; overflow: hidden; isolation: isolate; background: var(--verde-oscuro); }
.seccion__fondo { position: absolute; inset: -16% 0; z-index: -3; will-change: transform; }
.seccion__fondo picture, .seccion__fondo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.seccion__velo { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(21, 42, 33, .92) 0%, rgba(31, 58, 46, .74) 40%, rgba(31, 58, 46, .76) 60%, rgba(21, 42, 33, .94) 100%); }
.seccion--foto .bloque { background: rgba(21, 42, 33, .38); }

/* Aparición suave de las secciones al bajar */
.revelar-activo .revelar { opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity 1s cubic-bezier(.2, .65, .2, 1), transform 1s cubic-bezier(.2, .65, .2, 1), border-color .2s; transition-delay: var(--retraso, 0s); }
.revelar-activo .revelar.visible { opacity: 1; transform: none; }
@media print { .revelar-activo .revelar, .js .entrada { opacity: 1 !important; transform: none !important; animation: none !important; } .niebla, .portada__bajar { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .entrada, .js .portada__bajar > * { animation: none; opacity: 1; }
  .js .portada__imagen { transition: none; opacity: 1; transform: none; }
  .niebla span, .portada__bajar i::after { animation: none; }
}

/* ---------- Tarjetas de cesta ---------- */
.rejilla-cestas { display: grid; gap: 26px; }
@media (min-width: 720px) and (max-width: 1023px) { .rejilla-cestas { grid-template-columns: 1fr 1fr; } .rejilla-cestas > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .rejilla-cestas { grid-template-columns: repeat(3, 1fr); } }
.tarjeta-cesta { background: var(--blanco); border: 1px solid var(--linea); display: flex; flex-direction: column; position: relative; }
.tarjeta-cesta__foto { display: block; overflow: hidden; background: var(--crema-3); position: relative; width: 100%; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; }

/* Etiqueta «Ver qué lleva» sobre las fotos que abren la ventana de la cesta */
.ver-contenido { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: .5em; padding: .62em 1em; background: rgba(21, 42, 33, .86); color: var(--crema); font: 600 .68rem/1 var(--texto); letter-spacing: .14em; text-transform: uppercase; border-radius: 2px; transition: background-color .25s, transform .25s; pointer-events: none; }
.ver-contenido svg { color: var(--oro); }
@media (hover: hover) {
  .ver-contenido { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s, background-color .25s; }
  [data-abrir-cesta]:hover .ver-contenido, [data-abrir-cesta]:focus-visible .ver-contenido { opacity: 1; transform: none; }
}
.tarjeta-cesta__foto img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform .6s ease; }
.tarjeta-cesta:hover .tarjeta-cesta__foto img { transform: scale(1.03); }
.tarjeta-cesta__cuerpo { padding: 24px 22px 26px; display: flex; flex-direction: column; flex: 1; }
@media (min-width: 768px) { .tarjeta-cesta__cuerpo { padding: 28px 28px 30px; } }
.tarjeta-cesta__nombre { font-size: 2.6rem; margin-bottom: .1em; font-weight: 600; }
.tarjeta-cesta__nombre a { color: inherit; text-decoration: none; }
.tarjeta-cesta__meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2em .7em; color: var(--tinta-suave); font-size: .88rem; margin-bottom: .9em; }
.tarjeta-cesta__resumen { font-size: .97rem; }
.tarjeta-cesta__botones { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.tarjeta-cesta__botones .boton { flex: 1 1 140px; padding-inline: .9em; letter-spacing: .1em; }
.tarjeta-cesta--destacada { background: var(--verde); border-color: var(--verde); color: rgba(251, 250, 247, .86); }
.tarjeta-cesta--destacada .tarjeta-cesta__nombre, .tarjeta-cesta--destacada .precio { color: var(--crema); }
.tarjeta-cesta--destacada .tarjeta-cesta__meta { color: rgba(251, 250, 247, .7); }
.tarjeta-cesta--destacada .antetitulo { color: var(--oro); }
.tarjeta-cesta--destacada .boton { background: var(--oro); border-color: var(--oro); color: var(--verde-oscuro); }
.tarjeta-cesta--destacada .boton:hover { background: #E5C676; border-color: #E5C676; }
.sello { position: absolute; top: 14px; right: 14px; z-index: 2; background: var(--oro); color: var(--verde-oscuro); font: 700 .66rem/1 var(--texto); letter-spacing: .16em; text-transform: uppercase; padding: .7em 1em; }

.precio { font-family: var(--titulos); font-weight: 600; font-size: 2rem; color: var(--verde); line-height: 1; font-variant-numeric: lining-nums; }

.lista-oro { list-style: none; padding: 0; margin: 0 0 1.5em; }
.lista-oro li { position: relative; padding-left: 1.4em; margin-bottom: .45em; font-size: .94rem; }
.lista-oro li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--oro); transform: rotate(45deg); }

/* ---------- Historia del oro (inicio) ---------- */
.dos-columnas { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .dos-columnas { grid-template-columns: 1fr 1fr; gap: 72px; } .dos-columnas--invertido > :first-child { order: 2; } }
.foto-marco { margin: 0; position: relative; isolation: isolate; }
.foto-marco img { width: 100%; object-fit: cover; }
.foto-marco::after { content: ""; position: absolute; inset: -12px 12px 12px -12px; border: 1px solid var(--oro); z-index: -1; opacity: .7; }
@media (max-width: 899px) { .foto-marco { margin-left: 12px; } }
.foto-marco figcaption { font-family: var(--titulos); font-style: italic; font-size: 1.05rem; color: var(--tinta-suave); margin-top: 12px; }
.hallazgos { margin: 28px 0; padding: 0; display: grid; gap: 0; }
.hallazgos div { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--linea); }
.hallazgos div:last-child { border-bottom: 1px solid var(--linea); }
.hallazgos dt { font-family: var(--titulos); font-size: 1.5rem; font-weight: 600; color: var(--verde); line-height: 1.2; }
.hallazgos dd { margin: 0; font-size: .95rem; color: var(--tinta-suave); }

/* ---------- Cómo funciona ---------- */
.pasos { display: grid; gap: 30px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 640px) { .pasos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pasos { grid-template-columns: repeat(4, 1fr); gap: 36px; } }
.paso { border-top: 1px solid var(--oro); padding-top: 20px; }
.paso__numero { font-family: var(--titulos); font-size: 3.2rem; color: var(--oro); line-height: 1; display: block; margin-bottom: .25em; font-weight: 500; }
.paso h3 { font-size: 1.5rem; }
.paso p { color: var(--tinta-suave); font-size: .95rem; margin: 0; }
.nota-centrada { text-align: center; color: var(--tinta-suave); font-size: .92rem; max-width: 640px; margin: 40px auto 0; }

/* ---------- Comparativa ---------- */
.tabla-envoltorio { border: 1px solid var(--linea); background: var(--blanco); overflow-x: auto; }
[data-comparativa] { max-width: 980px; margin-inline: auto; }
.comparativa { width: 100%; border-collapse: collapse; font-size: .9rem; }
.comparativa th, .comparativa td { padding: 12px 14px; border-bottom: 1px solid var(--linea); text-align: center; vertical-align: middle; }
.comparativa tbody tr:last-child th, .comparativa tbody tr:last-child td { border-bottom: 0; }
.comparativa tbody th { text-align: left; font-weight: 500; color: var(--tinta); }
.comparativa thead th { font-family: var(--titulos); font-weight: 600; font-size: 1.7rem; color: var(--verde); padding-top: 22px; padding-bottom: 16px; line-height: 1.1; }
.comparativa thead th a { color: inherit; text-decoration: none; }
.comparativa thead .precio { display: block; font-size: 1.15rem; color: var(--oro-oscuro); margin-top: 4px; }
.comparativa .col-oro { background: rgba(217, 182, 97, .1); }
.comparativa .no { color: #BDB5A4; }
.comparativa tfoot td { border-bottom: 0; padding-block: 16px 20px; }
@media (max-width: 599px) {
  .comparativa { font-size: .76rem; }
  .comparativa th, .comparativa td { padding: 10px 5px; }
  .comparativa tbody th { padding-left: 10px; width: 36%; }
  .comparativa thead th { font-size: 1.25rem; }
  .comparativa thead .precio { font-size: .95rem; }
  .comparativa tfoot .boton { padding: .5em .4em; letter-spacing: .06em; font-size: .64rem; min-height: 38px; width: 100%; }
}

/* ---------- Productores ---------- */
.rejilla-productores { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (min-width: 1100px) { .rejilla-productores { grid-template-columns: repeat(5, 1fr); } }
.mini-productor { display: flex; gap: 14px; align-items: center; padding: 12px 14px 12px 12px; border: 1px solid var(--linea); background: var(--blanco); text-decoration: none; color: inherit; transition: border-color .2s; }
.mini-productor:hover { border-color: var(--oro); color: inherit; }
.mini-productor img { width: 62px; height: 62px; object-fit: cover; border-radius: 50%; flex: none; }
.mini-productor strong { font-family: var(--titulos); font-size: 1.22rem; color: var(--verde); display: block; line-height: 1.15; font-weight: 600; }
.mini-productor span { font-size: .78rem; color: var(--tinta-suave); display: block; margin-top: 2px; }

.lista-fichas { display: grid; gap: 26px; }
.ficha-productor { background: var(--blanco); border: 1px solid var(--linea); display: grid; scroll-margin-top: calc(var(--cabecera) + 24px); }
.ficha-productor:target { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro); }
.ficha-productor__foto { background: var(--crema-3); }
.ficha-productor__foto img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ficha-productor__cuerpo { padding: 24px 22px 26px; }
@media (min-width: 700px) {
  .ficha-productor { grid-template-columns: 260px 1fr; }
  .ficha-productor__foto img { aspect-ratio: auto; min-height: 260px; }
  .ficha-productor__cuerpo { padding: 30px 34px; }
}
.ficha-productor h2 { font-size: clamp(1.8rem, 3.6vw, 2.3rem); margin-bottom: .2em; }
.lugar { display: flex; gap: .45em; align-items: center; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--oro-oscuro); font-weight: 700; margin-bottom: 1em; }
.aporta { font-size: .88rem; color: var(--tinta-suave); border-top: 1px solid var(--linea); padding-top: 14px; margin: 18px 0 0; }
.aporta strong { color: var(--tinta); }

/* ---------- Entrega (bloques) ---------- */
.bloques-entrega { display: grid; gap: 22px; }
@media (min-width: 768px) { .bloques-entrega { grid-template-columns: repeat(3, 1fr); } }
.bloque { border: 1px solid rgba(217, 182, 97, .35); padding: 26px 24px; }
.bloque svg { color: var(--oro); margin-bottom: 14px; }
.bloque h3 { font-size: 1.6rem; margin-bottom: .35em; }
.bloque p { font-size: .94rem; margin: 0; }
.llamada { text-align: center; margin-top: 56px; }
.llamada p { font-family: var(--titulos); font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--crema); font-weight: 500; line-height: 1.2; margin-bottom: .8em; }

/* ---------- Cabecera de página interior ---------- */
.pagina-cabecera { background: var(--crema-2); padding-block: 52px 44px; text-align: center; border-bottom: 1px solid var(--linea); }
@media (min-width: 768px) { .pagina-cabecera { padding-block: 76px 60px; } }
.pagina-cabecera h1 { margin-bottom: .25em; }
.pagina-cabecera p { color: var(--tinta-suave); max-width: 640px; margin: 0 auto; font-size: 1.05rem; }
.pagina-cabecera .antetitulo { justify-content: center; }
.pagina-cabecera .antetitulo::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .8; }

/* ---------- Migas ---------- */
.migas { font-size: .78rem; color: var(--tinta-suave); padding-block: 16px; }
.migas a { color: var(--tinta-suave); }
.migas span[aria-hidden] { margin: 0 .5em; opacity: .6; }

/* ---------- Ficha de cesta ---------- */
.ficha { display: grid; gap: 30px; padding-bottom: 56px; }
@media (min-width: 960px) { .ficha { grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: start; } .ficha__galeria { position: sticky; top: calc(var(--cabecera) + 24px); } }
.marco-foto { margin: 0; background: var(--crema-3); position: relative; }
.marco-foto img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.marco-foto .sello { top: 16px; left: 16px; right: auto; }
.marco-foto__boton { display: block; position: relative; width: 100%; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; overflow: hidden; }
.marco-foto__boton img { transition: transform .6s ease; }
.marco-foto__boton:hover img { transform: scale(1.02); }
.miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin-top: 10px; }
.miniaturas button { display: block; border: 1px solid transparent; padding: 0; margin: 0; background: var(--crema-3); cursor: pointer; transition: border-color .2s; }
.miniaturas button:hover { border-color: var(--oro); }
.miniaturas img { aspect-ratio: 1; object-fit: cover; width: 100%; background: var(--crema-3); }
.ficha__titulo { font-size: clamp(2.7rem, 6vw, 3.9rem); margin-bottom: .05em; }
.ficha__titulo small { display: block; font-family: var(--texto); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-oscuro); font-weight: 600; margin-bottom: .6em; }
.ficha__precio { font-size: 2.5rem; margin: 6px 0 14px; display: block; }
.ficha__datos { list-style: none; padding: 0; margin: 0 0 1.2em; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .9rem; color: var(--tinta-suave); }
.ficha__datos li { display: flex; gap: .5em; align-items: center; }
.ficha__datos svg { color: var(--oro-oscuro); }
.ficha__descripcion { font-size: 1.02rem; }
.ficha__compra { display: flex; gap: 10px; align-items: stretch; margin: 22px 0 10px; }
.ficha__compra .boton { flex: 1; }
.ficha__secundario { width: 100%; }
.ficha__error { color: var(--error); font-size: .88rem; font-weight: 600; min-height: 1.4em; margin: 8px 0 0; }
.cantidad { display: inline-flex; align-items: center; border: 1px solid #CFC7B6; background: var(--blanco); border-radius: 2px; flex: none; }
.cantidad button { width: 42px; height: 48px; border: 0; background: none; font-size: 1.35rem; line-height: 1; color: var(--verde); cursor: pointer; display: grid; place-items: center; }
.cantidad button:disabled { color: #CBC3B3; cursor: not-allowed; }
.cantidad output { min-width: 2em; text-align: center; font-weight: 700; font-size: .95rem; }
.cantidad--pequena button { width: 36px; height: 38px; font-size: 1.15rem; }

.avisos { margin-top: 26px; border-top: 1px solid var(--linea); }
.aviso { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linea); font-size: .9rem; margin: 0; line-height: 1.5; }
.aviso svg { flex: none; color: var(--oro-oscuro); margin-top: 1px; }
.aviso strong { color: var(--verde); }

/* Selectores de la Oro */
.selector { border: 1px solid var(--linea); background: var(--blanco); padding: 18px 16px 12px; margin: 0 0 16px; min-width: 0; }
@media (min-width: 480px) { .selector { padding: 20px 20px 14px; } }
.selector legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; }
.selector legend + * { clear: both; }
.selector__cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.selector__titulo { font-family: var(--titulos); font-size: 1.5rem; font-weight: 600; color: var(--verde); line-height: 1.2; }
.selector__estado { font-size: .74rem; font-weight: 700; padding: .35em .8em; border-radius: 1em; background: #FBE9D0; color: #7A4B00; white-space: nowrap; }
.selector__estado.completo { background: rgba(31, 58, 46, .1); color: var(--verde); }
.selector__ayuda { font-size: .84rem; color: var(--tinta-suave); margin: 4px 0 8px; }
.opciones-cachopo { list-style: none; padding: 0; margin: 0; }
.opcion-cachopo { display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linea); }
.opcion-cachopo img { width: 60px; height: 45px; object-fit: cover; background: var(--crema-3); }
.opcion-cachopo strong { display: block; font-family: var(--titulos); font-size: 1.2rem; color: var(--verde); line-height: 1.15; }
.opcion-cachopo small { display: block; font-size: .78rem; color: var(--tinta-suave); line-height: 1.35; }
.opcion-cachopo.elegido strong::after { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--oro); transform: rotate(45deg); margin-left: .5em; vertical-align: middle; }
.selector__pie { border-top: 1px solid var(--linea); padding-top: 10px; display: flex; justify-content: flex-end; }
.opciones-queso { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; padding-bottom: 6px; }
.opcion-queso { position: relative; display: flex; flex-direction: column; border: 1px solid var(--linea); cursor: pointer; background: var(--blanco); transition: border-color .2s, box-shadow .2s; }
.opcion-queso input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-queso img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.opcion-queso span { padding: 10px 12px 12px; display: block; }
.opcion-queso strong { display: block; font-family: var(--titulos); font-size: 1.25rem; color: var(--verde); line-height: 1.15; }
.opcion-queso small { display: block; font-size: .76rem; color: var(--tinta-suave); line-height: 1.35; margin-top: 2px; }
.opcion-queso:hover { border-color: var(--oro); }
.opcion-queso.elegida { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); }
.opcion-queso.elegida::after { content: "✓"; position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--verde); color: var(--crema); display: grid; place-items: center; font-size: .8rem; font-weight: 700; }
.opcion-queso:has(input:focus-visible) { outline: 2px solid var(--oro-oscuro); outline-offset: 2px; }
.selector--error { border-color: var(--error); }

/* Contenido de la cesta */
.contenido-cesta { padding-bottom: 64px; }
.contenido-cesta > h2 { margin-bottom: .8em; }
.grupos { display: grid; gap: 34px; }
@media (min-width: 900px) { .grupos { grid-template-columns: 1fr 1fr; gap: 34px 60px; align-items: start; } }
.grupo__titulo { font: 700 .72rem/1.4 var(--texto); letter-spacing: .22em; text-transform: uppercase; color: var(--oro-oscuro); border-bottom: 1px solid var(--oro); padding-bottom: 10px; margin: 0; }
.lista-productos { list-style: none; padding: 0; margin: 0; }
.producto { display: grid; grid-template-columns: 76px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linea); align-items: center; }
.producto img { width: 76px; height: 76px; object-fit: cover; background: var(--crema-3); }
.producto__ver { display: block; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; position: relative; }
.producto__ver::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; transition: border-color .2s; }
.producto__ver:hover::after { border-color: var(--oro); }
.producto__nombre { font-family: var(--titulos); font-size: 1.32rem; font-weight: 600; color: var(--verde); line-height: 1.15; margin: 0; }
.producto__detalle { font-size: .82rem; color: var(--tinta-suave); margin: 2px 0 0; }
.producto__cantidad { font-size: .86rem; font-weight: 700; margin: 3px 0 0; }
.producto__productor { font-size: .8rem; color: var(--tinta-suave); margin: 3px 0 0; }
.producto__productor a { color: var(--tinta-suave); }
.producto__sublista { list-style: none; padding: 0; margin: 6px 0 0; font-size: .82rem; color: var(--tinta-suave); }
.producto__sublista li::before { content: "· "; color: var(--oro-oscuro); }

/* Desplegables (alérgenos, preguntas) */
.desplegable { border: 1px solid var(--linea); background: var(--blanco); }
.desplegable + .desplegable { border-top: 0; }
.desplegable summary { list-style: none; cursor: pointer; padding: 18px 20px; font-family: var(--titulos); font-size: 1.35rem; font-weight: 600; color: var(--verde); display: flex; justify-content: space-between; align-items: center; gap: 16px; line-height: 1.25; }
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 1.5px solid var(--oro-oscuro); border-bottom: 1.5px solid var(--oro-oscuro); transform: rotate(45deg) translate(-3px, -3px); transition: transform .25s; }
.desplegable[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.desplegable summary:hover { color: var(--oro-oscuro); }
.desplegable__cuerpo { padding: 0 20px 22px; font-size: .94rem; }
.desplegable__cuerpo > :last-child { margin-bottom: 0; }
.desplegable--alergenos { margin-top: 40px; }
.alergenos-resumen { background: var(--crema-2); padding: 14px 16px; border-left: 3px solid var(--oro); font-size: .92rem; }
.tabla-alergenos { width: 100%; border-collapse: collapse; font-size: .86rem; margin: 6px 0 18px; }
.tabla-alergenos th, .tabla-alergenos td { text-align: left; vertical-align: top; padding: 12px 10px 12px 0; border-bottom: 1px solid var(--linea); }
.tabla-alergenos thead th { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 700; padding-top: 6px; }
.tabla-alergenos tbody th { font-weight: 700; color: var(--verde); width: 28%; }
.tabla-alergenos .contiene { font-weight: 700; color: var(--tinta); }
.tabla-alergenos .nota { display: block; color: var(--tinta-suave); font-size: .8rem; margin-top: 4px; }
@media (max-width: 639px) {
  .tabla-alergenos thead { display: none; }
  .tabla-alergenos tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--linea); }
  .tabla-alergenos th, .tabla-alergenos td { display: block; border: 0; padding: 2px 0; width: auto !important; }
  .tabla-alergenos td::before { content: attr(data-titulo) ": "; font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
}
.nota-legal { font-size: .84rem; color: var(--tinta-suave); }

/* Sugerencia de presentación */
.sugerencia { padding-bottom: 64px; }
.sugerencia figure { margin: 0 auto; max-width: 900px; }
.sugerencia img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sugerencia figcaption { font-family: var(--titulos); font-style: italic; font-size: 1.2rem; color: var(--tinta-suave); text-align: center; margin-top: 12px; }

/* ---------- Página de pedido ---------- */
.pedido { display: grid; gap: 36px; padding-block: 36px 80px; }
@media (min-width: 960px) { .pedido { grid-template-columns: 1fr 400px; gap: 56px; align-items: start; } .resumen { position: sticky; top: calc(var(--cabecera) + 24px); } }
@media (max-width: 959px) { .resumen { order: -1; } }
.resumen { background: var(--blanco); border: 1px solid var(--linea); padding: 22px 20px; }
.resumen h2 { font-size: 1.8rem; margin-bottom: .4em; }
.linea-pedido { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.linea-pedido img { width: 64px; height: 48px; object-fit: cover; background: var(--crema-3); }
.linea-pedido__titulo { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.linea-pedido__titulo strong { font-family: var(--titulos); font-size: 1.3rem; color: var(--verde); line-height: 1.15; }
.linea-pedido__titulo span { font-weight: 700; font-size: .92rem; white-space: nowrap; }
.linea-pedido__opciones { font-size: .78rem; color: var(--tinta-suave); margin: 4px 0 8px; line-height: 1.45; }
.linea-pedido__acciones { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.totales { margin: 14px 0 0; display: grid; gap: 6px; font-size: .92rem; }
.totales div { display: flex; justify-content: space-between; gap: 12px; }
.totales dt, .totales dd { margin: 0; }
.totales .total { border-top: 1px solid var(--linea); padding-top: 12px; margin-top: 6px; font-family: var(--titulos); font-size: 1.6rem; font-weight: 600; color: var(--verde); }
.totales .gratis { color: var(--verde); font-weight: 700; }
.consejo-envio { font-size: .8rem; background: var(--crema-2); padding: 10px 12px; margin: 12px 0 0; border-left: 3px solid var(--oro); }
.pedido-vacio { text-align: center; padding: 20px 0 6px; }
.pedido-vacio p { color: var(--tinta-suave); }

.formulario fieldset { border: 0; padding: 0; margin: 0 0 30px; min-width: 0; }
.formulario legend { font-family: var(--titulos); font-size: 1.75rem; font-weight: 600; color: var(--verde); margin-bottom: 14px; padding: 0; line-height: 1.15; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.campo label { font-size: .86rem; font-weight: 700; color: var(--tinta); }
.campo .opcional { font-weight: 400; color: var(--tinta-suave); }
.campo input, .campo select, .campo textarea { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid #CDC5B4; background: var(--blanco); border-radius: 2px; color: var(--tinta); width: 100%; min-height: 50px; }
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--verde); outline: 2px solid rgba(31, 58, 46, .14); outline-offset: 0; }
.campo input:user-invalid, .campo select:user-invalid, .campo textarea:user-invalid { border-color: var(--error); }
.campo .ayuda { font-size: .78rem; color: var(--tinta-suave); margin: 0; }
.fila-2 { display: grid; gap: 0 16px; }
@media (min-width: 560px) { .fila-2 { grid-template-columns: 1fr 1fr; } .fila-2--cp { grid-template-columns: 160px 1fr; } }
.casilla { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; margin-bottom: 14px; cursor: pointer; line-height: 1.5; }
.casilla input { width: 22px; height: 22px; accent-color: var(--verde); margin: 0; flex: none; }
.casilla--destacada { background: var(--crema-2); padding: 14px 16px; border: 1px solid var(--linea); }
.bloque-regalo { border-left: 3px solid var(--oro); padding-left: 16px; margin: 4px 0 18px; }
.calendario-nota { font-size: .8rem; color: var(--tinta-suave); background: var(--crema-2); padding: 10px 12px; margin: -4px 0 16px; }
.pedido-cerrado { background: #FBE9D0; color: #6B4100; padding: 16px 18px; border-left: 3px solid #C98A1B; margin-bottom: 24px; }
.envio-pedido { background: var(--verde); color: rgba(251, 250, 247, .88); padding: 22px 20px; margin-top: 8px; }
.envio-pedido p { font-size: .88rem; }
.envio-pedido .boton { background: var(--oro); border-color: var(--oro); color: var(--verde-oscuro); }
.envio-pedido .boton:hover { background: #E5C676; border-color: #E5C676; }
.envio-pedido__error { color: #FFD7CF; font-weight: 700; font-size: .88rem; margin: 12px 0 0; }
.confirmacion { background: var(--blanco); border: 1px solid var(--oro); padding: 24px 22px; margin-top: 16px; }
.confirmacion h3 { font-size: 1.6rem; }
.confirmacion__botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ---------- Textos largos (historia, legales, preguntas) ---------- */
.texto-largo { max-width: 740px; margin: 0 auto; padding-block: 52px 80px; }
.texto-largo h2 { font-size: clamp(1.8rem, 4vw, 2.3rem); margin-top: 1.6em; }
.texto-largo h2:first-child { margin-top: 0; }
.texto-largo h3 { font-size: 1.4rem; margin-top: 1.4em; }
.texto-largo li { margin-bottom: .4em; }
.texto-largo table { width: 100%; border-collapse: collapse; font-size: .86rem; margin: 0 0 1.4em; }
.texto-largo th, .texto-largo td { text-align: left; vertical-align: top; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--linea); }
.texto-largo th { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.texto-largo .tabla-envoltorio { border: 0; background: none; }
.fecha-legal { font-size: .84rem; color: var(--tinta-suave); }
.entradilla { font-family: var(--titulos); font-size: clamp(1.35rem, 3vw, 1.65rem); line-height: 1.45; color: var(--verde); font-weight: 500; }

.bloque-historia { padding-block: 56px; }
@media (min-width: 900px) { .bloque-historia { padding-block: 88px; } }
.bloque-historia + .bloque-historia { border-top: 1px solid var(--linea); }
.bloque-historia p { color: var(--tinta); }

.lista-preguntas { max-width: 820px; margin: 0 auto; padding-block: 52px 32px; }
.lista-preguntas h2 { font-size: clamp(1.6rem, 3.4vw, 2rem); margin: 40px 0 14px; }
.lista-preguntas h2:first-child { margin-top: 0; }
.contacto-final { text-align: center; padding-bottom: 80px; }

/* ---------- Ventana de la cesta (visor) ---------- */
html.visor-abierto { overflow: hidden; }
html.visor-abierto body { padding-right: var(--barra, 0); }
.visor { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px; }
.visor[hidden] { display: none; }
.visor__fondo { position: absolute; inset: 0; background: rgba(12, 24, 18, .8); opacity: 0; transition: opacity .4s ease; }
.visor__caja { position: relative; width: min(1060px, 100%); max-height: min(calc(100vh - 48px), 780px); max-height: min(calc(100dvh - 48px), 780px); overflow-y: auto; overscroll-behavior: contain; background: var(--crema); border-top: 3px solid var(--oro); box-shadow: 0 30px 90px rgba(0, 0, 0, .4); opacity: 0; transform: translate3d(0, 26px, 0) scale(.98); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1); outline: none; }
.visor.abierto .visor__fondo { opacity: 1; }
.visor.abierto .visor__caja { opacity: 1; transform: none; }
.visor__cerrar { position: sticky; top: 12px; z-index: 5; margin: 12px 12px -56px auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(251, 250, 247, .94); color: var(--verde); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); transition: background-color .2s, transform .2s; }
.visor__cerrar:hover { background: var(--oro); transform: rotate(90deg); }
.visor__vista > * { animation: vista-entra .5s cubic-bezier(.2, .7, .2, 1) both; }
.visor__vista[data-dir="1"] > * { --desde-x: 46px; }
.visor__vista[data-dir="-1"] > * { --desde-x: -46px; }
@keyframes vista-entra { from { opacity: 0; transform: translate3d(var(--desde-x, 0), var(--desde-y, 0), 0); } to { opacity: 1; transform: none; } }
@media (max-width: 799px) {
  .visor { padding: 0; align-items: stretch; }
  .visor__caja { width: 100%; max-height: none; height: 100%; border-top: 0; transform: translate3d(0, 48px, 0); }
}

/* Vista de la cesta */
.visor-cesta { display: grid; }
@media (min-width: 800px) { .visor-cesta { grid-template-columns: 1.05fr 1fr; } .visor-cesta__escena { position: sticky; top: 0; align-self: start; } }
.visor-cesta__escena, .visor-producto__escena { position: relative; margin: 0; background: var(--verde-oscuro); overflow: hidden; }
.visor-cesta__escena img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 800px) { .visor-cesta__escena img { aspect-ratio: auto; height: min(calc(100vh - 51px), 777px); height: min(calc(100dvh - 51px), 777px); } }
.visor-cesta__info { padding: 24px 20px 0; }
@media (min-width: 800px) { .visor-cesta__info { padding: 44px 40px 0; } }
.visor__titulo { font-size: clamp(2.3rem, 5vw, 3.1rem); margin-bottom: .1em; }
.visor-cesta__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em 1.1em; color: var(--tinta-suave); font-size: .88rem; margin: 6px 0 14px; }
.visor-cesta__meta .precio { font-size: 2rem; }
.visor-pista { display: flex; align-items: center; gap: .5em; font-size: .78rem; color: var(--tinta-suave); margin: 0; }
.visor-pista svg { color: var(--oro-oscuro); flex: none; }
.visor-lista { list-style: none; margin: 0 0 8px; padding: 0; }
.visor-grupo { font: 700 .66rem/1.4 var(--texto); letter-spacing: .2em; text-transform: uppercase; color: var(--oro-oscuro); padding: 18px 0 7px; border-bottom: 1px solid var(--oro); }
.visor-item { width: 100%; display: grid; grid-template-columns: 58px 1fr auto; gap: 14px; align-items: center; padding: 10px 2px 10px 0; background: none; border: 0; border-bottom: 1px solid var(--linea); text-align: left; cursor: pointer; color: inherit; font: inherit; }
.visor-item img { width: 58px; height: 58px; object-fit: cover; background: var(--crema-3); }
.visor-item strong, .visor-eleccion__titulo { display: block; font-family: var(--titulos); font-size: 1.2rem; font-weight: 600; color: var(--verde); line-height: 1.15; transition: color .2s; }
.visor-item small, .visor-eleccion small { display: block; font-size: .8rem; color: var(--tinta-suave); margin-top: 2px; }
.visor-item > svg { color: var(--oro-oscuro); transition: transform .2s; }
.visor-item:hover strong { color: var(--oro-oscuro); }
.visor-item:hover > svg { transform: translateX(3px); }
.visor-eleccion { padding: 12px 0 14px; border-bottom: 1px solid var(--linea); }
.visor-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-top: 10px; }
.visor-opcion { display: block; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--tinta); text-align: center; }
.visor-opcion img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--linea); background: var(--crema-3); transition: border-color .2s; }
.visor-opcion span { display: block; font-size: .72rem; font-weight: 700; margin-top: 5px; }
.visor-opcion:hover img { border-color: var(--oro); }
.visor__acciones { position: sticky; bottom: 0; z-index: 2; padding: 22px 0 14px; background: linear-gradient(180deg, rgba(251, 250, 247, 0), var(--crema) 34%); }
.visor__pie { display: grid; gap: 12px; padding-bottom: 28px; }
.visor__nota { font-size: .76rem; color: var(--tinta-suave); text-align: center; margin: 0; line-height: 1.5; }
.visor__pie .enlace-flecha { justify-self: center; }
.visor__pie .pedido-cerrado { margin: 18px 0 0; }

/* Flechas para pasar de una foto a otra */
.visor__flecha { position: absolute; top: 50%; z-index: 2; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; border: 0; background: rgba(251, 250, 247, .9); color: var(--verde); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); transition: background-color .2s, transform .2s; }
.visor__flecha:hover { background: var(--oro); }
.visor__flecha--ant { left: 12px; }
.visor__flecha--sig { right: 12px; }
.visor__flecha--ant:hover { transform: translateX(-2px); }
.visor__flecha--sig:hover { transform: translateX(2px); }
.visor-cesta__escena .ver-contenido { opacity: 1; transform: none; }

/* Vista de un producto */
.visor-producto { display: grid; }
@media (min-width: 800px) { .visor-producto { grid-template-columns: 1.3fr 1fr; } }
.visor-producto__foto { display: block; width: 100%; aspect-ratio: 1 / 1; max-height: 58vh; object-fit: cover; }
@media (min-width: 560px) and (max-width: 799px) { .visor-producto__foto { aspect-ratio: 4 / 3; } }
@media (min-width: 800px) { .visor-producto__foto { aspect-ratio: auto; max-height: none; height: min(calc(100vh - 51px), 777px); height: min(calc(100dvh - 51px), 777px); } }
.visor-producto__info { display: flex; flex-direction: column; padding: 26px 20px 28px; }
@media (min-width: 800px) { .visor-producto__info { justify-content: center; padding: 56px 40px 36px; } }
.visor-producto__contador { font: 700 .68rem/1.4 var(--texto); letter-spacing: .18em; text-transform: uppercase; color: var(--oro-oscuro); margin-bottom: .9em; }
.visor-producto__cantidad { font-weight: 700; font-size: .92rem; margin-bottom: .8em; }
.visor-producto__desc { font-size: 1.02rem; }
.visor-producto__productor { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; font-size: .84rem; color: var(--tinta-suave); }
.visor-producto__productor svg { color: var(--oro-oscuro); }
.visor__volver { margin-top: 18px; align-self: flex-start; }
@media (prefers-reduced-motion: reduce) {
  .visor__fondo, .visor__caja { transition: none; }
  .visor__vista > * { animation: none; }
}

/* ---------- Aviso flotante ---------- */
.aviso-flotante { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 80; background: var(--verde); color: var(--crema); padding: 16px 18px; box-shadow: 0 14px 34px rgba(0, 0, 0, .28); transform: translateY(150%); transition: transform .35s ease; border-top: 2px solid var(--oro); }
@media (min-width: 640px) { .aviso-flotante { left: auto; right: 24px; bottom: 24px; width: 400px; } }
.aviso-flotante.visible { transform: none; }
.aviso-flotante p { margin: 0 0 12px; font-size: .92rem; }
.aviso-flotante strong { color: var(--oro); }
.aviso-flotante__botones { display: flex; gap: 10px; }
.aviso-flotante__botones .boton { flex: 1; min-height: 42px; font-size: .7rem; }
@media (prefers-reduced-motion: reduce) { .aviso-flotante { transition: none; } }

/* ---------- Cookies ---------- */
.cookies { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; background: var(--blanco); color: var(--tinta); border: 1px solid var(--linea); border-top: 3px solid var(--oro); box-shadow: 0 16px 40px rgba(21, 42, 33, .22); padding: 20px; max-width: 560px; }
@media (min-width: 640px) { .cookies { left: 24px; bottom: 24px; } }
.cookies h2 { font-size: 1.45rem; margin-bottom: .3em; }
.cookies p { font-size: .86rem; margin-bottom: 12px; }
.cookies__opciones { border-top: 1px solid var(--linea); padding-top: 12px; margin-bottom: 12px; }
.cookies__opciones .casilla { margin-bottom: 10px; font-size: .84rem; }
.cookies__botones { display: flex; flex-wrap: wrap; gap: 8px; }
.cookies__botones .boton { flex: 1 1 120px; min-height: 44px; font-size: .7rem; }

/* ---------- Pie ---------- */
.pie { background: var(--verde-oscuro); color: rgba(251, 250, 247, .74); font-size: .9rem; padding-top: 60px; }
.pie a { color: rgba(251, 250, 247, .9); text-decoration: none; }
.pie a:hover { color: var(--oro); }
.pie__rejilla { display: grid; gap: 36px; padding-bottom: 44px; }
@media (min-width: 640px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .pie__rejilla { grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: 44px; } }
.pie__marca img { width: 190px; margin-bottom: 18px; }
.pie__marca p { font-size: .86rem; max-width: 30em; }
.pie h2 { font-family: var(--texto); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--oro); margin-bottom: 16px; font-weight: 700; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.pie__contacto li { display: flex; gap: 10px; align-items: flex-start; }
.pie__contacto svg { flex: none; color: var(--oro); margin-top: 3px; }
.redes { display: flex; gap: 10px; margin-top: 16px; }
.redes:empty { display: none; }
.redes a { width: 40px; height: 40px; border: 1px solid rgba(217, 182, 97, .4); display: grid; place-items: center; border-radius: 50%; }
.pie__legal { border-top: 1px solid rgba(217, 182, 97, .2); padding-block: 22px 30px; font-size: .76rem; display: grid; gap: 10px; }
.pie__legal p { margin: 0; }
.pie__legal nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pie__legal button { background: none; border: 0; padding: 0; color: rgba(251, 250, 247, .9); cursor: pointer; font-size: inherit; }
.pie__legal button:hover { color: var(--oro); }
.pie__alcohol { color: var(--oro-claro); }