/* generado por ensamblar.mjs — edita los fragmentos en 07-secciones, no este archivo */

/* ── cabecera ── */
/* Cabecera · one-motif: barra plana, transparente sobre el cielo y blanca al dejar el hero. */
  #cabecera { position: fixed; inset: 0 0 auto 0; z-index: 50; color: var(--color-tinta); }
  #cabecera::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-fondo);
    opacity: 0; transition: opacity var(--dur-2) var(--ease-out);
  }
  #cabecera.cab-baja::before { opacity: 1; }
  #cabecera .cab-barra {
    display: flex; align-items: center; gap: 0.5rem;
    min-height: 3.75rem; padding: 0.5rem var(--margen);
  }
  #cabecera .cab-marca { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; }
  #cabecera .cab-marca img { height: 2.75rem; width: auto; }
  #cabecera nav { display: flex; margin-left: auto; }
  #cabecera nav a {
    display: inline-flex; align-items: center; min-height: 2.75rem;
    padding-inline: clamp(0.3rem, 1.6vw, 0.9rem);
    font-size: var(--paso--1); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
    text-underline-offset: 0.3em; text-decoration-thickness: 2px;
  }
  #cabecera nav a:hover { text-decoration: underline; }
  #cabecera .cab-wa {
    display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding-inline: 0.85rem;
    background: var(--wa); color: var(--sobre-wa); border: 1.5px solid var(--sobre-wa); border-radius: var(--radio-boton);
    font-size: var(--paso--1); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
    transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  }
  #cabecera .cab-wa svg { width: 1.2em; height: 1.2em; flex: none; fill: currentColor; }
  #cabecera .cab-wa:hover { background: var(--wa-pulsado); }
  #cabecera .cab-wa:active { background: var(--wa-pulsado); transform: scale(0.97); transition-duration: 100ms; }
  @media (max-width: 23.4rem) {
    /* celulares muy angostos: el botón queda en su ícono; el nombre sigue para el lector de pantalla */
    #cabecera .cab-wa span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    #cabecera .cab-wa { padding-inline: 0.7rem; }
  }
  @media (min-width: 64rem) {
    #cabecera .cab-barra { min-height: 4.5rem; gap: 1rem; }
    #cabecera .cab-marca img { height: 3.25rem; }
  }
  @media (prefers-contrast: more) { #cabecera::before { opacity: 1; } }

/* ── hero ── */
/* Hero · paisaje-atardecer: escena por capas a pantalla completa (ref-1b). La cámara avanza al deslizar. */
  #hero {
    --p: 0;
    --lw: min(88vw, 50svh);                 /* ancho del logo */
    --suelo: 10svh;                         /* el logo pisa la colina aquí */
    --hierba-alto: calc((var(--suelo) + var(--lw) * 0.13) * 1.22);
    --c1: #fbd8cc; --c2: #ffc9b0; --c3: #ffcf9e; --c4: #ffdc9c; --c5: #fff0c4;   /* cielo cálido y claro */
    --sol-ambar: #ffd88a; --halo-oro: #ffc56e;
    --monte-1: #f0b9a8; --monte-2: #e3a59c; --monte-3: #c98f8f; --arbol: #b97f80;
    --pasto-alto: #a9a75c; --pasto-medio: #7c7f42; --pasto-bajo: #4a4f2a; --pasto-luz: #f2cf7e;
    --pasto-veta: #8f8a4a;
    --pasto-oscuro: #333d20;
    position: relative; height: 280svh; background: var(--color-fondo);
  }
  #hero .escena { position: sticky; top: 0; height: 100svh; overflow: clip; background: var(--color-fondo); isolation: isolate; }
  #hero .capa, #hero .telon, #hero .entra { position: absolute; inset: 0; }
  #hero .capa { will-change: transform; }
  #hero .telon, #hero .entra { pointer-events: none; }
  #hero svg { display: block; max-width: none; }

  /* a) cielo + sol (el telón baja con los dos) */
  #hero .cielo { background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 26%, var(--c3) 48%, var(--c4) 66%, var(--c5) 84%); transform: translateY(calc(var(--p) * -4%)) scale(1.06); transform-origin: 50% 0; }
  #hero .nubes { position: absolute; inset: 0; width: 100%; height: 100%; }
  #hero .nube { animation: none; }
  #hero .sol {
    transform: translateY(calc(var(--p) * 14svh)) scale(calc(1 + var(--p) * 0.18));
    transform-origin: var(--sol-x) var(--sol-y);
    --sol-x: 50%; --sol-y: 60%; --sol-d: min(90vw, 56svh);
  }
  #hero .sol::before, #hero .sol::after { content: ""; position: absolute; left: var(--sol-x); top: var(--sol-y); border-radius: 50%; translate: -50% -50%; }
  #hero .sol::before { width: calc(var(--sol-d) * 2.8); aspect-ratio: 1; background: radial-gradient(closest-side, color-mix(in oklab, var(--halo-oro) 62%, transparent) 0%, color-mix(in oklab, var(--halo-oro) 30%, transparent) 40%, color-mix(in oklab, var(--halo-oro) 10%, transparent) 70%, transparent 100%); }
  #hero .sol::after { width: var(--sol-d); aspect-ratio: 1; background: radial-gradient(closest-side, var(--sol) 0%, var(--sol) 30%, color-mix(in oklab, var(--sol-ambar) 85%, var(--sol)) 52%, color-mix(in oklab, var(--sol-ambar) 45%, transparent) 76%, transparent 100%); }

  /* c) colinas lejanas con neblina */
  #hero .lejos { transform: translateY(calc(var(--p) * -5svh)) scale(calc(1 + var(--p) * 0.14)); transform-origin: 50% 100%; }
  #hero .lejos svg { position: absolute; inset: 0; width: 100%; height: 100%; }

  /* d) logo de pie entre el fondo y la colina */
  #hero .logo-capa { transform: translateY(calc(var(--p) * -6svh)) scale(calc(1 + var(--p) * 0.25)); transform-origin: 50% 70%; opacity: calc(1 - (var(--p) - 0.42) * 2.4); }
  #hero .logo {
    position: absolute; bottom: var(--suelo); left: calc(50% - var(--lw) / 2 + var(--lw) * 0.0645); /* centra las LETRAS: el cuadro incluye las semillas que vuelan a la derecha */
    width: var(--lw); aspect-ratio: 803 / 890.7;
  }
  #hero .logo > img, #hero .logo > svg { position: absolute; display: block; max-width: none; overflow: visible; }
  #hero .logo .base { inset: 0; width: 100%; height: 100%; }
  #hero .logo .semilla { transform-origin: 50% 50%; }
  #hero .soplar {
    position: absolute; left: 13.41%; top: 0.79%; width: 83.81%; height: 29.110000000000003%;
    background: none; border: 0; padding: 0; border-radius: 50%; cursor: pointer; pointer-events: auto;
  }
  #hero .soplar:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 4px; }

  /* f) semillas en vuelo */
  #hero .vuelo { pointer-events: none; }
  #hero .vuela { position: absolute; left: 0; top: 0; height: auto; will-change: transform, opacity; }

  /* e) colina de hierba: tapa la base del logo */
  #hero .hierba { transform: scale(calc(1 + var(--p) * 0.55)); transform-origin: 50% 100%; }
  #hero .hierba svg { position: absolute; left: -2%; bottom: 0; width: 104%; height: var(--hierba-alto); overflow: visible; }
  #hero .frente { transform: scale(calc(1 + var(--p) * 0.7)); transform-origin: 50% 100%; pointer-events: none; }
  #hero .frente svg { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(5.5rem, 17svh, 11rem); }
  #hero .mecer { transform-box: fill-box; transform-origin: 50% 100%; }
  #hero .bruma { position: absolute; inset: auto 0 0 0; height: 30svh; background: linear-gradient(0deg, color-mix(in oklab, var(--c5) 0%, transparent), transparent); }
  #hero .petalo { position: absolute; height: auto; filter: blur(3px); opacity: 0.8; }
  #hero .petalo.p1 { width: clamp(3rem, 7vw, 6rem); right: 12%; bottom: 16svh; rotate: -18deg; }
  #hero .petalo.p2 { width: clamp(2.2rem, 4.5vw, 4rem); left: 38%; bottom: 4svh; rotate: 24deg; filter: blur(2px); }

  /* texto */
  #hero .texto {
    position: absolute; z-index: 9; left: var(--margen); right: var(--margen); top: calc(var(--alto-cabecera, 3.75rem) + clamp(0.5rem, 2svh, 1.5rem));
    text-align: center;
    transform: translateY(calc(var(--p) * -18svh)); opacity: calc(1 - var(--p) * 2.6);
  }
  #hero h1 { margin: 0; font-size: clamp(1.875rem, 1.45rem + 1.6vw, 3.125rem); color: var(--color-tinta); }
  #hero h1 span { display: block; }
  #hero .apoyo { margin: 0.6rem auto 0; max-width: 25rem; font-size: var(--paso-0); line-height: 1.5; color: var(--color-tinta); }
  #hero .botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.1rem; }
  #hero .btn {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding-inline: 1.25rem;
    border-radius: var(--radio-boton); font-size: var(--paso-0); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
    transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  }
  #hero .btn:active { transform: scale(0.97); transition-duration: 100ms; }
  #hero .btn-tinta { background: var(--color-tinta); color: var(--color-fondo); }
  #hero .btn-tinta:hover { background: var(--color-acento); }
  #hero .btn-wa { background: var(--wa); color: var(--sobre-wa); }
  #hero .btn-wa:hover { background: var(--wa-pulsado); }
  #hero .btn-wa svg { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
  #hero .btn:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 3px; }

  #hero .desliza {
    position: absolute; z-index: 5; left: var(--margen); bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem;
    padding-inline: 0.9rem 1.1rem; border-radius: var(--radio-boton); background: var(--sol); color: var(--color-tinta); font-size: var(--paso--1); font-weight: 600; text-decoration: none;
    opacity: calc(1 - var(--p) * 4);
  }
  #hero .desliza svg { width: 1.1rem; height: 1.1rem; stroke: currentColor; fill: none; stroke-width: 2; }
  #hero.rp-lejos .texto, #hero.rp-lejos .desliza { visibility: hidden; }
  #hero .blanco { z-index: 8; background: var(--color-fondo); opacity: calc((var(--p) - 0.74) * 4); pointer-events: none; }

  @media (min-width: 48rem) {
    #hero { --lw: min(60vw, 52svh); --suelo: 4svh; }
    #hero .apoyo { max-width: 48rem; }
    #hero .sol { --sol-x: 50%; --sol-y: 60%; --sol-d: min(52vw, 68svh); }
  }
  @media (min-width: 64rem) {
    #hero { --lw: min(42vw, 58svh); --suelo: 3svh; --hierba-alto: calc((var(--suelo) + var(--lw) * 0.25) * 1.22); }
    #hero h1 span { display: inline; }
  }
  @media (max-width: 47.99rem) { #hero .petalo.p2 { display: none; } }

  /* ── entrada (solo con JS y movimiento completo) ── */
  @keyframes rp-telon { from { transform: translateY(-100%); } to { transform: none; } }
  @keyframes rp-sube { from { transform: translateY(32%); } to { transform: none; } }
  @keyframes rp-logo { from { opacity: 0; transform: translateY(24px); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } }
  @keyframes rp-aparece { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes rp-mecer { from { transform: skewX(-2.2deg); } to { transform: skewX(1.6deg); } }
  @keyframes rp-nube { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }
  @keyframes rp-flota { 0%, 100% { translate: 0 0; } 50% { translate: -14px -18px; } }
  @keyframes rp-flecha { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(4px); } }
  html.js.rp-full #hero .telon { animation: rp-telon var(--dur-telon) var(--ease-out) both; }
  html.js.rp-full #hero .entra-lejos { animation: rp-sube 1500ms var(--ease-out) 700ms both; }
  html.js.rp-full #hero .entra-hierba { animation: rp-sube 1400ms var(--ease-out) 1000ms both; }
  html.js.rp-full #hero .entra-frente { animation: rp-sube 1400ms var(--ease-out) 1200ms both; }
  html.js.rp-full #hero .entra-logo { animation: rp-logo 1500ms var(--ease-out) 2700ms both; }
  html.js.rp-full #hero .entra-texto { animation: rp-aparece var(--dur-3) var(--ease-out) 300ms both; }
  html.js.rp-full #hero .mecer { animation: rp-mecer 7s var(--ease-in-out) infinite alternate; }
  html.js.rp-full #hero .mecer.m2 { animation-duration: 9s; animation-delay: -3s; }
  html.js.rp-full #hero .mecer.m3 { animation-duration: 11s; animation-delay: -6s; }
  html.js.rp-full #hero .nube { animation: rp-nube 38s var(--ease-in-out) infinite alternate; }
  html.js.rp-full #hero .nube.n2 { animation-duration: 52s; animation-delay: -20s; }
  html.js.rp-full #hero .petalo { animation: rp-flota 14s var(--ease-in-out) infinite; }
  html.js.rp-full #hero .petalo.p2 { animation-duration: 19s; animation-delay: -7s; }
  html.js.rp-full #hero .desliza svg { animation: rp-flecha 2.4s var(--ease-in-out) infinite; }
  html.rp-quieto #hero { height: auto; }
  html.rp-quieto #hero .escena { position: relative; }

/* ── catalogo ── */
#catalogo { padding-block: var(--espacio-seccion) 0; background: var(--color-fondo); color: var(--color-tinta); overflow: clip; }
#catalogo .cat-cabeza { max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--margen); display: grid; gap: var(--espacio-2); }
#catalogo .cat-cabeza h2 { font-size: var(--paso-4); }
#catalogo .cat-entrada { font-size: var(--paso-1); line-height: 1.45; max-width: 36ch; }
#catalogo .cat-pausa { justify-self: start; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.5rem 1.1rem; border: 1.5px solid var(--color-borde-control); border-radius: var(--radio-boton); background: var(--color-fondo); font-weight: 600; font-size: var(--paso--1); transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
#catalogo .cat-pausa:hover { background: var(--color-superficie); }
#catalogo .cat-pausa:active { transform: scale(0.97); }
#catalogo .cat-pausa svg { width: 14px; height: 14px; }
#catalogo:is(.rp-quieto *) .cat-pausa, #catalogo:is(.no-js *) .cat-pausa { display: none; }

#catalogo .bloque { margin-top: clamp(3.5rem, 2.6rem + 3.8vw, 6.5rem); display: grid; gap: var(--espacio-3); }
#catalogo .bloque-texto { width: 100%; max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--margen); display: grid; gap: 0.75rem; }
#catalogo .bloque-texto h3 { font-size: var(--paso-3); max-width: 14ch; }
#catalogo .bloque-texto p { font-size: var(--paso-0); max-width: 46ch; }
@media (min-width: 56rem) {
  #catalogo .bloque-texto { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; column-gap: var(--espacio-5); }
  #catalogo .bloque-texto p { padding-bottom: 0.4rem; }
}

/* Filas en deriva (E3). Sin JS o en reposo: fila desplazable con el dedo. */
#catalogo .fila { --alto: 15rem; --hueco: 0.75rem; overflow-x: auto; overflow-y: hidden; padding-block: calc(var(--alto) * 0.14 + 0.5rem); scrollbar-width: none; }
#catalogo .fila::-webkit-scrollbar { display: none; }
#catalogo .pista { display: flex; width: max-content; padding-inline: var(--margen); }
#catalogo .set { display: flex; gap: var(--hueco); padding-right: var(--hueco); }
#catalogo .foto { flex: none; position: relative; height: var(--alto); padding: 0; border: 0; background: var(--color-superficie); cursor: zoom-in; transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); -webkit-tap-highlight-color: transparent; }
#catalogo .foto img { height: 100%; width: auto; max-width: none; pointer-events: none; -webkit-user-drag: none; user-select: none; }
#catalogo .foto:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 3px; z-index: 3; }
@media (min-width: 48rem) { #catalogo .fila { --alto: 20rem; --hueco: 1rem; } }
@media (min-width: 75rem) { #catalogo .fila { --alto: 24rem; --hueco: 1.25rem; } }

#catalogo:is(.rp-full *) .fila { overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
#catalogo:is(.rp-full *) .fila.arrastrando { cursor: grabbing; }
#catalogo:is(.rp-full *) .pista { padding-inline: 0; will-change: transform; } /* la deriva y el arrastre los mueve el JS (transform) */
@media (hover: hover) and (pointer: fine) {
  #catalogo .foto:hover { transform: scale(1.08); z-index: 2; }
}
/* Primer toque: la foto se agranda en su sitio. Segundo toque: se abre completa. */
#catalogo .foto.grande, #catalogo .foto.grande:hover { transform: scale(1.3); z-index: 5; box-shadow: 0 22px 44px -16px rgb(21 18 26 / 0.5); }
#catalogo .foto.grande::after { content: "Toca otra vez para verla completa"; position: absolute; left: 0; right: 0; margin-inline: auto; width: max-content; bottom: 0.7rem; max-width: 84%; padding: 0.35rem 0.8rem; border-radius: 999px; background: rgb(255 255 255 / 0.94); color: var(--color-tinta); font-size: 0.72rem; font-weight: 600; line-height: 1.2; text-align: center; white-space: normal; pointer-events: none; }

/* Visor: la foto en HD */
#catalogo .visor { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-tinta); }
#catalogo .visor::backdrop { background: rgb(255 255 255 / 0.94); }
#catalogo .visor[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
#catalogo .visor-barra { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem var(--margen); }
#catalogo .visor-cuenta { font-size: var(--paso--1); font-weight: 600; font-variant-numeric: tabular-nums; }
#catalogo .visor-marco { position: relative; display: grid; place-items: center; min-height: 0; padding-inline: var(--margen); touch-action: pan-y; }
#catalogo .visor-marco img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
#catalogo .visor-pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem var(--margen) 1rem; }
#catalogo .visor-pie p { font-size: var(--paso--1); text-align: center; flex: 1; max-width: 46ch; margin-inline: auto; }
#catalogo .visor button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 48px; min-height: 48px; padding: 0.5rem 1rem; border: 1.5px solid var(--color-tinta); border-radius: var(--radio-boton); background: var(--color-fondo); font-weight: 600; transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
#catalogo .visor button:hover { background: var(--color-superficie); }
#catalogo .visor button:active { transform: scale(0.96); }
#catalogo .visor button svg { width: 18px; height: 18px; }
#catalogo:is(.rp-full *) .visor[open] .visor-marco img { animation: cat-visor 0.7s var(--ease-out); }
@keyframes cat-visor { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

#catalogo .cat-cierre { max-width: var(--ancho-max); margin: clamp(3.5rem, 2.6rem + 3.8vw, 6.5rem) auto 0; padding: 0 var(--margen) var(--espacio-seccion); }
#catalogo .cat-cierre a { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0.75rem 1.4rem; border-radius: var(--radio-boton); background: var(--color-tinta); color: var(--color-fondo); font-weight: 600; text-decoration: none; transition: transform var(--dur-1) var(--ease-out); }
#catalogo .cat-cierre a:active { transform: scale(0.97); }
#catalogo .cat-cierre p { font-size: var(--paso-1); margin-bottom: var(--espacio-2); max-width: 30ch; }

/* ── pedido ── */
#pedido { background: var(--color-fondo); color: var(--color-sobre-campo); padding-block: var(--espacio-seccion); }
#pedido .prod, #pedido .panel { border: 1px solid var(--color-borde-control); border-radius: 4px; }
#pedido .ped-cabeza { max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--margen); display: grid; gap: var(--espacio-2); }
#pedido .ped-cabeza h2 { font-size: var(--paso-3); }
#pedido .ped-cabeza p { font-size: var(--paso-1); line-height: 1.45; max-width: 38ch; }
#pedido .ped-cuerpo { max-width: var(--ancho-max); margin: var(--espacio-4) auto 0; padding-inline: var(--margen); display: grid; gap: var(--espacio-4); }
#pedido .ped-lista, #pedido .panel { min-width: 0; }
@media (min-width: 62rem) {
  #pedido .ped-cuerpo { grid-template-columns: minmax(0, 1fr) 23rem; align-items: start; }
  #pedido .panel { position: sticky; top: calc(var(--alto-cabecera, 72px) + 1rem); }
}

/* Filtros */
#pedido .chips { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--margen)); padding: 0.25rem var(--margen) 1rem; }
#pedido .chips::-webkit-scrollbar { display: none; }
#pedido .chip { flex: none; min-height: 44px; padding: 0.5rem 1.1rem; border: 1.5px solid var(--color-borde-control); border-radius: var(--radio-boton); background: var(--color-fondo); font-weight: 600; font-size: var(--paso--1); transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
#pedido .chip:hover { border-color: var(--color-tinta); }
#pedido .chip:active { transform: scale(0.96); }
#pedido .chip[aria-pressed="true"] { background: var(--color-tinta); border-color: var(--color-tinta); color: var(--color-fondo); }

/* Productos */
#pedido .productos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 40rem) { #pedido .productos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 62rem) and (max-width: 74.99rem) { #pedido .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#pedido .prod { background: var(--color-fondo); padding: 0.75rem 0.75rem 0.9rem; display: grid; gap: 0.3rem; align-content: start; transition: box-shadow var(--dur-2) var(--ease-out); }
#pedido .prod.tiene { box-shadow: inset 0 0 0 2px var(--color-acento); }
#pedido .prod-ilu { background: var(--color-superficie); aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 0.4rem; overflow: hidden; }
#pedido .ilu { width: 86%; height: auto; }
#pedido .prod-nombre { font-family: var(--font-texto); font-weight: 600; font-size: var(--paso-0); letter-spacing: 0; line-height: 1.3; }
#pedido .prod-nota { font-size: var(--paso--1); color: var(--color-tinta-suave); line-height: 1.4; }
#pedido .cuenta { display: flex; align-items: center; justify-content: space-between; margin-top: 0.55rem; padding: 2px; border: 1.5px solid var(--color-borde-control); border-radius: var(--radio-boton); }
#pedido .cuenta button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radio-boton); background: transparent; color: var(--color-tinta); transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
#pedido .cuenta button svg { width: 16px; height: 16px; }
#pedido .cuenta button:hover { background: var(--color-superficie); }
#pedido .cuenta button[data-mas] { background: var(--color-tinta); color: var(--color-fondo); }
#pedido .cuenta button[data-mas]:hover { background: var(--color-acento); }
#pedido .cuenta button:active { transform: scale(0.9); }
#pedido .cuenta button:disabled { opacity: 0.35; cursor: default; }
#pedido .cuenta output { min-width: 2ch; text-align: center; font-weight: 600; font-size: var(--paso-1); font-variant-numeric: tabular-nums; }
#pedido .prod.tiene .cuenta { border-color: var(--color-acento); }
#pedido .prod.tiene output { color: var(--color-acento); }

/* Ilustraciones (E6): trazo de tinta, rellenos planos del atardecer y el morado de la marca */
#pedido .ilu .fondo { fill: var(--color-fondo); }
#pedido .ilu .l { fill: none; stroke: var(--color-tinta); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#pedido .ilu .b, #pedido .ilu .c, #pedido .ilu .p, #pedido .ilu .y, #pedido .ilu .a, #pedido .ilu .s { stroke: var(--color-tinta); stroke-width: 3; stroke-linejoin: round; }
#pedido .ilu .b { fill: var(--color-fondo); }
#pedido .ilu .c { fill: var(--cielo-1); }
#pedido .ilu .p { fill: var(--cielo-3); }
#pedido .ilu .y { fill: var(--cielo-5); }
#pedido .ilu .s { fill: var(--cielo-4); }
#pedido .ilu .a { fill: var(--color-acento); }
#pedido .ilu .k { fill: var(--color-tinta); }
#pedido .ilu .wl { fill: none; stroke: var(--color-fondo); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#pedido:is(.rp-full *) .prod-ilu .ilu { transition: transform 0.6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { #pedido:is(.rp-full *) .prod:hover .ilu { transform: translateY(-4px) rotate(-2deg); } }
#pedido:is(.rp-full *) .ilu.sumado { animation: ped-sumado 0.7s var(--ease-out); }
@keyframes ped-sumado { 0% { transform: scale(1); } 35% { transform: scale(1.09) rotate(-3deg); } 100% { transform: scale(1); } }

/* Panel «Tu pedido» */
#pedido .panel { background: var(--color-fondo); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); display: grid; gap: 1rem; scroll-margin-top: calc(var(--alto-cabecera, 72px) + 1rem); }
#pedido .panel h3 { display: flex; align-items: center; gap: 0.6rem; font-size: var(--paso-2); }
#pedido .total { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding-inline: 0.5rem; border-radius: var(--radio-boton); background: var(--color-acento); color: var(--color-sobre-acento); font-family: var(--font-texto); font-weight: 600; font-size: var(--paso--1); letter-spacing: 0; font-variant-numeric: tabular-nums; }
#pedido:is(.rp-full *) .total.late { animation: ped-late 0.6s var(--ease-out); }
@keyframes ped-late { 40% { transform: scale(1.25); } }
#pedido .vacio { color: var(--color-tinta-suave); }
#pedido .lineas { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
#pedido .lineas li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0.35rem 0.35rem 0.85rem; background: var(--color-superficie); font-size: var(--paso--1); }
#pedido .lineas strong { font-weight: 600; font-variant-numeric: tabular-nums; }
#pedido .quitar { min-width: 44px; min-height: 44px; padding: 0 0.6rem; border: 0; background: transparent; color: var(--color-acento); font-weight: 600; font-size: var(--paso--1); text-decoration: underline; text-underline-offset: 3px; }
#pedido .campo { display: grid; gap: 0.35rem; font-weight: 600; font-size: var(--paso--1); }
#pedido .campo input, #pedido .campo textarea { width: 100%; padding: 0.75rem 0.85rem; border: 1.5px solid var(--color-borde-control); border-radius: 0; background: var(--color-fondo); font-weight: 400; font-size: 1rem; line-height: 1.45; resize: vertical; }
#pedido .campo input:focus-visible, #pedido .campo textarea:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 1px; border-color: var(--color-tinta); }
#pedido .enviar { display: flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 54px; padding: 0.75rem 1.25rem; border: 1.5px solid var(--sobre-wa); border-radius: var(--radio-boton); background: var(--wa); color: var(--sobre-wa); font-weight: 600; font-size: var(--paso-0); transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
#pedido .enviar svg { width: 22px; height: 22px; flex: none; }
#pedido .enviar:hover { background: var(--wa-pulsado); }
#pedido .enviar:active { transform: scale(0.97); }
#pedido .enviar:disabled { background: var(--color-superficie); border-color: var(--color-borde-control); color: var(--color-tinta-suave); cursor: not-allowed; transform: none; }
#pedido .nota { font-size: max(1rem, var(--paso--1)); color: var(--color-tinta-suave); }

/* Barra del celular: lleva al panel cuando ya hay algo sumado */
#pedido .ped-barra { position: sticky; bottom: 0.75rem; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 52px; margin-top: 0.5rem; padding: 0.75rem 1.25rem; border-radius: var(--radio-boton); background: var(--color-tinta); color: var(--color-fondo); font-weight: 600; text-decoration: none; box-shadow: 0 10px 30px -12px rgb(21 18 26 / 0.55); }
#pedido .ped-barra[hidden] { display: none; }
@media (min-width: 62rem) { #pedido .ped-barra { display: none; } }

/* ── pie ── */
footer.pie { background: var(--color-fondo); color: var(--color-tinta); padding: var(--espacio-seccion) var(--margen) calc(var(--espacio-4) + 4.5rem); }
footer.pie .pie-dentro { max-width: var(--ancho-max); margin-inline: auto; display: grid; gap: var(--espacio-4); }
footer.pie .pie-logo { width: min(100%, 34rem); height: auto; }
footer.pie .pie-frase { font-family: var(--font-display); font-weight: var(--peso-display); letter-spacing: var(--tracking-display); line-height: var(--leading-display); font-size: var(--paso-3); max-width: 16ch; }
footer.pie .pie-enlaces { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
footer.pie .pie-enlaces a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: color var(--dur-1) var(--ease-out); }
footer.pie .pie-enlaces a:hover { color: var(--color-acento); }
footer.pie .pie-enlaces a[hidden] { display: none; }
footer.pie .pie-legal { display: grid; gap: 0.5rem; font-size: var(--paso--1); color: var(--color-tinta-suave); max-width: 70ch; }
footer.pie .lb-creditos { list-style: none; padding: 0; }
footer.pie .lb-creditos a { display: inline; }
@media (min-width: 56rem) {
  footer.pie .pie-dentro { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; column-gap: var(--espacio-5); }
  footer.pie .pie-logo { grid-row: span 2; }
  footer.pie .pie-legal { grid-column: 1 / -1; }
}

/* Botón de WhatsApp anclado (E5): aparece al salir del hero y se retira sobre el carrito. */
.pie-wa { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-width: 56px; min-height: 56px; padding: 0 1.25rem 0 1.05rem; border: 1.5px solid var(--sobre-wa); border-radius: var(--radio-boton); background: var(--wa); color: var(--sobre-wa); font-weight: 600; text-decoration: none; box-shadow: 0 12px 30px -12px rgb(11 36 21 / 0.55); transition: transform 0.7s var(--ease-out), opacity 0.7s var(--ease-out), background-color var(--dur-1) var(--ease-out); }
.pie-wa svg { width: 24px; height: 24px; flex: none; }
.pie-wa:hover { background: var(--wa-pulsado); }
.pie-wa:active { transform: scale(0.95); }
.pie-wa.fuera { opacity: 0; transform: translateY(140%); pointer-events: none; visibility: hidden; transition: transform 0.7s var(--ease-out), opacity 0.7s var(--ease-out), visibility 0s linear 0.7s; }
@media (max-width: 30rem) { .pie-wa { padding: 0; width: 56px; } .pie-wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }