/* =========================================================================
   Mundo Brick — hoja pública. Tipografía Nunito (redondeada, amigable),
   acento amarillo LEGO sobre fondo cálido, tinta casi negra. Todo lo que es
   color es un token: cambiar la paleta es tocar :root.
   ========================================================================= */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fuentes/nunito-400.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fuentes/nunito-600.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fuentes/nunito-800.woff2') format('woff2'); }

:root {
  --fondo: #FFFDF7;
  --superficie: #FFFFFF;
  --tinta: #151515;
  --tinta-suave: #5F5B52;
  --borde: #EAE5D8;
  --amarillo: #FFD500;
  --amarillo-oscuro: #F2C500;
  --amarillo-suave: #FFF4B8;
  --rojo: #D81E1E;
  --verde: #1B8A3A;
  --azul: #0A58CA;
  --fuente: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --radio: 14px;
  --radio-chico: 8px;
  --sombra: 0 6px 24px rgba(21, 21, 21, 0.08);
  --sombra-fuerte: 0 12px 40px rgba(21, 21, 21, 0.16);
  --alto-encabezado: 4.5rem;
  --ancho: 76rem;
  --gutter: 1rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--fuente); font-size: 1rem; line-height: 1.55; color: var(--tinta); background: var(--fondo); }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5em; font-weight: 800; letter-spacing: -0.01em; }
p { margin: 0 0 0.75em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.cifras { font-variant-numeric: tabular-nums; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar-contenido { position: absolute; left: -999px; top: 0; background: var(--tinta); color: #fff; padding: .5rem 1rem; z-index: 999; }
.saltar-contenido:focus { left: 1rem; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
main { min-height: 50vh; }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.25rem; border-radius: var(--radio-chico); border: 2px solid transparent; font-weight: 800; line-height: 1.2; cursor: pointer; text-align: center; transition: background .15s, transform .1s, box-shadow .15s; }
.boton:hover { text-decoration: none; }
.boton:active { transform: translateY(1px); }
.boton--primario { background: var(--amarillo); color: var(--tinta); border-color: var(--amarillo); }
.boton--primario:hover, .boton--primario:focus-visible { background: var(--amarillo-oscuro); border-color: var(--amarillo-oscuro); box-shadow: var(--sombra); }
.boton--fantasma { background: transparent; border-color: var(--tinta); color: var(--tinta); }
.boton--fantasma:hover { background: var(--tinta); color: #fff; }
.boton--hero { background: rgba(255,255,255,.9); color: var(--tinta); border-color: rgba(255,255,255,.9); }
.boton--hero:hover { background: #fff; }
.boton--grande { padding: .9rem 1.6rem; font-size: 1.05rem; }
.boton--ancho { width: 100%; }
.boton:disabled { opacity: .55; cursor: not-allowed; }
.boton-icono { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: transparent; cursor: pointer; }
.boton-icono:hover, .boton-icono:focus-visible { background: var(--amarillo-suave); }
.contador { position: absolute; top: .15rem; right: .1rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 999px; background: var(--rojo); color: #fff; font-size: .72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.contador[hidden] { display: none; }

/* Encabezado */
.encabezado { position: sticky; top: 0; z-index: 100; background: var(--superficie); border-bottom: 1px solid var(--borde); }
.encabezado__barra { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); height: var(--alto-encabezado); display: flex; align-items: center; gap: 1rem; }
.logo img { height: 3rem; width: auto; }
.nav { flex: 1; }
.nav__lista { display: flex; gap: .25rem; flex-wrap: wrap; }
.nav__lista a { display: inline-block; padding: .45rem .75rem; border-radius: 999px; font-weight: 600; color: var(--tinta-suave); }
.nav__lista a:hover, .nav__lista a.activo { background: var(--amarillo-suave); color: var(--tinta); text-decoration: none; }
.encabezado__acciones { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.boton-menu { display: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.boton-menu span { width: 22px; height: 2.5px; background: var(--tinta); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-mobil, .nav-mobil__fondo { display: none; }
@media (max-width: 860px) {
  .nav { display: none; }
  .boton-menu { display: flex; }
  .nav-mobil__fondo { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 90; }
  .nav-mobil { display: block; position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(84vw, 20rem); background: var(--superficie); z-index: 95; transform: translateX(100%); transition: transform .25s; padding: calc(var(--alto-encabezado) + .5rem) 1rem 1rem; overflow-y: auto; }
  .nav-mobil__lista a { display: block; padding: .8rem .75rem; border-radius: var(--radio-chico); font-weight: 700; font-size: 1.05rem; }
  .nav-mobil__lista a.activo, .nav-mobil__lista a:hover { background: var(--amarillo-suave); text-decoration: none; }
  .nav-toggle:checked ~ .nav-mobil__fondo { opacity: 1; pointer-events: auto; }
  .nav-toggle:checked ~ .nav-mobil { transform: translateX(0); }
  .nav-toggle:checked ~ .encabezado__acciones .boton-menu span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle:checked ~ .encabezado__acciones .boton-menu span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .encabezado__acciones .boton-menu span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .encabezado__acciones { position: relative; z-index: 96; }
}

/* Hero */
.hero { position: relative; overflow: hidden; background: #fff; aspect-ratio: 1920 / 650; min-height: 22rem; max-height: 34rem; display: flex; align-items: center; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__contenido { position: relative; z-index: 1; max-width: var(--ancho); width: 100%; margin: 0 auto; padding: 1.5rem var(--gutter); }
.hero__sobre { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--tinta-suave); margin-bottom: .5rem; }
.hero__caja { max-width: 34rem; background: rgba(255, 253, 247, .94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: var(--radio); padding: 1.75rem 2rem; box-shadow: var(--sombra-fuerte); }
.hero__titulo { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: .5rem; }
.hero__bajada { font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 600; margin-bottom: 1.25rem; color: var(--tinta-suave); }
.hero__acciones { display: flex; gap: .75rem; flex-wrap: wrap; }
@media (max-width: 640px) {
  .hero { aspect-ratio: auto; min-height: 24rem; align-items: flex-end; }
  .hero__video { object-position: 50% 0; }
  .hero__caja { padding: 1.25rem 1.1rem; }
  .hero__acciones .boton { flex: 1; }
}

/* Secciones */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: 2.5rem var(--gutter); }
.seccion__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.seccion__titulo { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0; }
.seccion__ver-todo { font-weight: 800; color: var(--azul); white-space: nowrap; }
.titulo-pagina { font-size: clamp(1.6rem, 3vw, 2.4rem); }

/* Beneficios */
.beneficios { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.beneficios__lista { max-width: var(--ancho); margin: 0 auto; padding: 1rem var(--gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.beneficio { display: flex; gap: .75rem; align-items: flex-start; }
.beneficio__icono { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--amarillo-suave); display: inline-flex; align-items: center; justify-content: center; }
.beneficio__titulo { font-weight: 800; margin: 0; }
.beneficio__detalle { margin: 0; color: var(--tinta-suave); font-size: .9rem; }
@media (max-width: 860px) { .beneficios__lista { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .beneficios__lista { grid-template-columns: 1fr; gap: .75rem; } .beneficio__detalle { display: none; } }

/* Temas */
.temas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tema { position: relative; display: block; border-radius: var(--radio); overflow: hidden; background: var(--superficie); border: 1px solid var(--borde); padding: 1rem; transition: transform .15s, box-shadow .15s; }
.tema:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--sombra); }
.tema__foto { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; margin-bottom: .75rem; }
.tema__nombre { display: block; font-weight: 800; font-size: 1.1rem; }
.tema__cantidad { color: var(--tinta-suave); font-size: .9rem; }
@media (max-width: 860px) { .temas { grid-template-columns: repeat(2, 1fr); } }

/* Banners promocionales */
.banner-promo { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }
.beneficios + .banner-promo { padding-top: 2rem; }
.banner-promo a { display: block; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); transition: transform .15s, box-shadow .15s; }
.banner-promo a:hover { transform: translateY(-2px); box-shadow: var(--sombra-fuerte); }
.banner-promo img { width: 100%; height: auto; }
.banner-promo + .seccion { padding-top: 2rem; }

/* Pasos */
.seccion--pasos { text-align: center; }
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.5rem; text-align: left; }
.paso { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem; }
.paso__num { display: inline-flex; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--amarillo); font-weight: 800; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: .75rem; }
.paso__titulo { font-weight: 800; font-size: 1.1rem; margin-bottom: .25rem; }
.paso p:last-child { margin: 0; color: var(--tinta-suave); }
@media (max-width: 700px) { .pasos { grid-template-columns: 1fr; } }

/* Grilla y tarjetas */
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1.1rem; }
.tarjeta { position: relative; display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.tarjeta__foto-enlace { display: block; background: #fff; padding: 1rem; }
.tarjeta__foto { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
.tarjeta__foto--vacia { display: flex; align-items: center; justify-content: center; color: var(--borde); aspect-ratio: 3 / 2; }
.tarjeta--agotada .tarjeta__foto { opacity: .45; }
.tarjeta__badge { position: absolute; top: .75rem; left: .75rem; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: var(--amarillo); color: var(--tinta); }
.tarjeta__badge--ultimo, .tarjeta__badge--oferta { background: var(--rojo); color: #fff; }
.tarjeta__badge--agotado { background: var(--tinta); color: #fff; top: auto; bottom: 45%; }
.tarjeta__badge + .tarjeta__badge { left: auto; right: .75rem; }
.tarjeta__cuerpo { display: flex; flex-direction: column; gap: .35rem; padding: .25rem 1rem 1rem; flex: 1; }
.tarjeta__tema { margin: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--tinta-suave); }
.tarjeta__nombre { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.tarjeta__nombre a:hover { text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chips li { font-size: .75rem; font-weight: 700; color: var(--tinta-suave); background: var(--fondo); border: 1px solid var(--borde); border-radius: 999px; padding: .1rem .55rem; }
.tarjeta__precios { margin-top: auto; padding-top: .5rem; }
.tarjeta__precio { margin: 0; font-size: 1.45rem; font-weight: 800; line-height: 1.1; display: flex; flex-direction: column; }
.tarjeta__precio-nota { font-size: .72rem; font-weight: 700; color: var(--verde); text-transform: uppercase; letter-spacing: .04em; }
.tarjeta__cuotas { margin: .2rem 0 0; font-size: .85rem; color: var(--tinta-suave); }
.tarjeta__comprar { margin-top: .5rem; width: 100%; }
.vacio { padding: 3rem 1rem; text-align: center; color: var(--tinta-suave); }

/* Catálogo */
.catalogo { max-width: var(--ancho); margin: 0 auto; padding: 1.5rem var(--gutter) 3rem; }
.migas { font-size: .85rem; color: var(--tinta-suave); margin-bottom: .75rem; }
.migas ol { display: flex; flex-wrap: wrap; gap: .35rem; }
.migas li + li::before { content: '›'; margin-right: .35rem; }
.migas a:hover { color: var(--tinta); }
.catalogo__cabecera { margin-bottom: 1rem; }
.catalogo__bajada { color: var(--tinta-suave); max-width: 60ch; }
.filtros { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; margin-bottom: 1rem; }
.filtro { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; font-weight: 800; color: var(--tinta-suave); }
.filtro select, .filtro input { font: inherit; font-weight: 600; color: var(--tinta); padding: .5rem .6rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: #fff; min-width: 10rem; }
.filtro--buscar { flex: 1; min-width: 12rem; }
.filtros__limpiar { font-weight: 700; color: var(--tinta-suave); padding: .7rem .25rem; }
.catalogo__conteo { color: var(--tinta-suave); font-size: .9rem; margin-bottom: .75rem; }
@media (max-width: 640px) { .filtro { flex: 1 1 45%; } .filtro select, .filtro input { min-width: 0; width: 100%; } .filtros .boton { flex: 1 1 100%; } }

/* Ficha */
.ficha { max-width: var(--ancho); margin: 0 auto; padding: 1.5rem var(--gutter) 2rem; }
.ficha__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: start; }
.ficha__galeria { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; }
.ficha__foto { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
.ficha__foto--vacia { display: flex; align-items: center; justify-content: center; color: var(--borde); }
.ficha__minis { display: flex; gap: .5rem; margin-top: .75rem; }
.ficha__mini { padding: .25rem; border: 2px solid transparent; border-radius: var(--radio-chico); background: #fff; cursor: pointer; }
.ficha__mini--activa { border-color: var(--amarillo); }
.ficha__mini img { width: 4.5rem; height: 3rem; object-fit: contain; }
.ficha__tema { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--tinta-suave); margin-bottom: .25rem; }
.ficha__nombre { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.ficha__precios { margin: 1.25rem 0 .5rem; }
.ficha__precio { font-size: 2.2rem; font-weight: 800; line-height: 1; margin: 0; }
.ficha__precio-nota { color: var(--verde); font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; margin: .25rem 0 .5rem; }
.ficha__lista { color: var(--tinta-suave); margin: 0; }
.ficha__stock { font-weight: 800; margin: .5rem 0 1rem; color: var(--verde); }
.ficha__stock--poco { color: var(--rojo); }
.ficha__stock--sin { color: var(--tinta-suave); }
.ficha__compra { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.ficha__cantidad { display: flex; flex-direction: column; font-size: .8rem; font-weight: 800; color: var(--tinta-suave); gap: .25rem; }
.ficha__cantidad input { width: 5rem; padding: .8rem .6rem; font: inherit; font-weight: 800; border: 2px solid var(--borde); border-radius: var(--radio-chico); text-align: center; }
.ficha__compra .boton { flex: 1; }
.ficha__garantias { margin-top: 1.5rem; display: grid; gap: .6rem; }
.ficha__garantias li { display: flex; gap: .6rem; align-items: center; color: var(--tinta-suave); font-weight: 600; }
.ficha__garantias svg { width: 22px; height: 22px; flex: none; color: var(--tinta); }
.ficha__garantias a { color: var(--azul); }
.ficha__detalle { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; margin-top: 2.5rem; }
.ficha__detalle h2 { font-size: 1.3rem; }
.ficha__descripcion p { font-size: 1.05rem; max-width: 60ch; }
.ficha__datos dl { display: grid; gap: .4rem; margin: 0; }
.ficha__datos dl > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--borde); padding: .4rem 0; }
.ficha__datos dt { color: var(--tinta-suave); font-weight: 600; }
.ficha__datos dd { margin: 0; font-weight: 800; }
@media (max-width: 800px) { .ficha__grid, .ficha__detalle { grid-template-columns: 1fr; gap: 1.25rem; } }

/* Carrito lateral */
.carrito-panel__fondo { position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .25s; }
.carrito-panel__fondo--visible { opacity: 1; }
.carrito-panel { position: fixed; top: 0; right: 0; z-index: 155; width: min(94vw, 26rem); height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--superficie); box-shadow: var(--sombra-fuerte); transform: translateX(100%); transition: transform .25s ease; }
.carrito-panel--visible { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .carrito-panel, .carrito-panel__fondo { transition: none; } }
.carrito-panel__cabecera { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--borde); }
.carrito-panel__cabecera h2 { margin: 0; font-size: 1.25rem; }
.carrito-panel__cerrar { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; background: transparent; font-size: 1.6rem; cursor: pointer; }
.carrito-panel__cerrar:hover { background: var(--fondo); }
.carrito-panel__cuerpo { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.carrito-panel__vacio { text-align: center; padding: 2rem 0; display: grid; gap: 1rem; }
.carrito-panel__lista { display: grid; gap: .75rem; }
.carrito-panel__item { display: grid; grid-template-columns: 4rem 1fr auto; gap: .75rem; align-items: start; padding-bottom: .75rem; border-bottom: 1px solid var(--borde); }
.carrito-panel__foto { width: 4rem; height: 3rem; object-fit: contain; border-radius: var(--radio-chico); background: #fff; }
.carrito-panel__foto--vacia { border: 1px dashed var(--borde); }
.carrito-panel__info { min-width: 0; }
.carrito-panel__nombre { font-weight: 800; margin: 0; font-size: .95rem; line-height: 1.25; }
.carrito-panel__unit { margin: .15rem 0 .4rem; color: var(--tinta-suave); font-size: .85rem; }
.carrito-panel__cantidad { display: inline-flex; align-items: center; gap: .5rem; }
.carrito-panel__cantidad button { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1.5px solid var(--borde); background: #fff; cursor: pointer; font-weight: 800; }
.carrito-panel__cantidad button:hover { border-color: var(--tinta); }
.carrito-panel__lateral { text-align: right; font-weight: 800; }
.carrito-panel__lateral p { margin: 0 0 .25rem; }
.carrito-panel__quitar { border: 0; background: transparent; color: var(--tinta-suave); font-size: .8rem; cursor: pointer; text-decoration: underline; }
.carrito-panel__totales { display: grid; gap: .35rem; }
.carrito-panel__linea { display: flex; justify-content: space-between; color: var(--tinta-suave); font-size: .9rem; }
.carrito-panel__linea--final { color: var(--tinta); font-weight: 800; font-size: 1.15rem; }
.carrito-panel__secundarias { display: flex; justify-content: space-between; gap: 1rem; }
.carrito-panel__secundarias button { border: 0; background: transparent; color: var(--tinta-suave); cursor: pointer; text-decoration: underline; font-weight: 600; }
body.carrito-abierto { overflow: hidden; }
.aviso { position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 1rem); z-index: 200; background: var(--tinta); color: #fff; padding: .7rem 1.1rem; border-radius: 999px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 90vw; text-align: center; }
.aviso--visible { opacity: 1; transform: translate(-50%, 0); }

/* Checkout */
.checkout { max-width: var(--ancho); margin: 0 auto; padding: 1.5rem var(--gutter) 3rem; }
.checkout__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: start; }
.checkout__form fieldset { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); padding: 1rem 1.25rem 1.25rem; margin: 0 0 1.25rem; display: grid; gap: .9rem; }
.checkout__form legend { font-weight: 800; font-size: 1.1rem; padding: 0 .4rem; }
.checkout__form label { display: grid; gap: .3rem; font-weight: 700; font-size: .9rem; }
.checkout__form input, .checkout__form textarea { font: inherit; padding: .7rem .8rem; border: 1.5px solid var(--borde); border-radius: var(--radio-chico); background: #fff; width: 100%; }
.checkout__form input:focus, .checkout__form textarea:focus { border-color: var(--tinta); outline: none; }
.checkout__form .invalido { border-color: var(--rojo); }
.opcional { font-weight: 400; color: var(--tinta-suave); }
.fila { display: grid; grid-template-columns: 2fr 1.5fr 1fr; gap: .75rem; }
.direccion { display: grid; gap: .9rem; }
.direccion[hidden] { display: none; }
.opciones { display: grid; gap: .6rem; }
.opcion { display: flex !important; gap: .75rem; align-items: flex-start; border: 1.5px solid var(--borde); border-radius: var(--radio-chico); padding: .75rem .9rem; cursor: pointer; }
.opcion:has(input:checked) { border-color: var(--tinta); background: var(--amarillo-suave); }
.opcion input { width: auto !important; margin-top: .3rem; accent-color: var(--tinta); }
.opcion span { display: grid; gap: .15rem; }
.opcion small { color: var(--tinta-suave); font-weight: 400; }
.opcion--deshabilitada { opacity: .55; cursor: not-allowed; }
.checkout__nota { color: var(--tinta-suave); font-size: .85rem; text-align: center; margin-top: .75rem; }
.checkout__resumen { position: sticky; top: calc(var(--alto-encabezado) + 1rem); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem; }
.checkout__resumen h2 { font-size: 1.2rem; }
.resumen__lista { display: grid; gap: .5rem; }
.resumen__lista li { display: flex; gap: .4rem; border-bottom: 1px solid var(--borde); padding-bottom: .5rem; font-size: .95rem; }
.resumen__precio { margin-left: auto; font-weight: 800; white-space: nowrap; }
.resumen__total { display: flex; justify-content: space-between; font-weight: 800; font-size: 1.3rem; margin: 1rem 0 .25rem; }
.pista { color: var(--tinta-suave); font-size: .9rem; margin: 0 0 .35rem; }
.checkout__volver { display: inline-block; margin-top: 1rem; color: var(--azul); font-weight: 700; }
.mensaje { padding: .75rem 1rem; border-radius: var(--radio-chico); font-weight: 700; margin: 0 0 1rem; }
.mensaje--error { background: #FDE8E8; color: #8E1515; }
.mensaje--ok { background: #E4F5E9; color: #155D2B; }
.mensaje[hidden] { display: none; }
@media (max-width: 800px) { .checkout__grid { grid-template-columns: 1fr; } .checkout__resumen { position: static; order: -1; } .fila { grid-template-columns: 1fr; } }

/* Pedido */
.pedido { max-width: var(--ancho); margin: 0 auto; padding: 1.5rem var(--gutter) 3rem; }
.pedido__codigo { color: var(--tinta-suave); margin-bottom: .25rem; }
.pedido__detalle { font-size: 1.1rem; max-width: 60ch; }
.linea-estado { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; margin: 1.25rem 0 1.75rem; counter-reset: paso; }
.linea-estado li { position: relative; padding-top: .9rem; font-size: .85rem; font-weight: 700; color: var(--tinta-suave); }
.linea-estado li::before { content: ''; display: block; height: .5rem; border-radius: 999px; background: var(--borde); position: absolute; top: 0; left: 0; right: 0; }
.linea-estado li.hecho { color: var(--tinta); }
.linea-estado li.hecho::before { background: var(--amarillo); }
.linea-estado li.actual::before { background: var(--tinta); }
.pedido__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: start; }
.pedido__pago, .pedido__resumen { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem; }
.pedido__pago h2, .pedido__resumen h2 { font-size: 1.2rem; }
.datos-pago { display: grid; gap: .5rem; margin: 0 0 1rem; }
.datos-pago > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--borde); padding: .4rem 0; flex-wrap: wrap; }
.datos-pago dt { color: var(--tinta-suave); font-weight: 600; }
.datos-pago dd { margin: 0; font-weight: 800; word-break: break-all; }
.copiable { cursor: copy; text-decoration: underline dotted; }
.pedido__vence { color: var(--tinta-suave); }
.pedido__comprobante { display: grid; gap: .75rem; margin: 1rem 0; padding: 1rem; border: 1.5px dashed var(--borde); border-radius: var(--radio-chico); }
.pedido__comprobante label { display: grid; gap: .4rem; font-weight: 700; }
.pedido__items { display: grid; gap: .5rem; }
.pedido__items li { display: flex; gap: .4rem; border-bottom: 1px solid var(--borde); padding-bottom: .5rem; }
.pedido__item-precio { margin-left: auto; font-weight: 800; white-space: nowrap; }
.pedido__total { font-size: 1.3rem; font-weight: 800; margin: 1rem 0 .25rem; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.pedido__total small { font-size: .8rem; color: var(--tinta-suave); font-weight: 600; }
.pedido__entrega { color: var(--tinta-suave); margin: 0; }
@media (max-width: 800px) { .pedido__grid { grid-template-columns: 1fr; } .linea-estado { grid-template-columns: repeat(2, 1fr); } }

/* Páginas simples */
.pagina-simple { max-width: 48rem; margin: 0 auto; padding: 2.5rem var(--gutter) 3rem; }
.pagina-texto h2 { font-size: 1.25rem; margin-top: 1.5rem; }
.pagina-texto p { font-size: 1.05rem; }
.form-seguimiento { display: flex; gap: .5rem; margin: 1rem 0; }
.form-seguimiento input { flex: 1; font: inherit; font-weight: 800; padding: .8rem 1rem; border: 1.5px solid var(--borde); border-radius: var(--radio-chico); font-size: 1.1rem; }

/* Pie */
.pie { background: var(--tinta); color: #E6E2D8; margin-top: 2rem; }
.pie__interior { max-width: var(--ancho); margin: 0 auto; padding: 2.5rem var(--gutter) 1.5rem; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.pie__col--marca img { width: 9rem; height: auto; background: #fff; padding: .5rem .75rem; border-radius: var(--radio-chico); margin-bottom: 1rem; }
.pie__col--marca p { max-width: 40ch; color: #B9B4A8; }
.pie__redes { display: flex; gap: .5rem; }
.pie__redes a { display: inline-flex; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255,255,255,.1); align-items: center; justify-content: center; }
.pie__redes a:hover { background: var(--amarillo); color: var(--tinta); }
.pie__titulo { font-weight: 800; color: #fff; margin-bottom: .5rem; }
.pie__col ul { display: grid; gap: .35rem; }
.pie__col a { color: #D8D3C7; }
.pie__col a:hover { color: var(--amarillo); }
.pie__legal { max-width: var(--ancho); margin: 0 auto; padding: 1rem var(--gutter) 2rem; font-size: .78rem; color: #8F8A7E; border-top: 1px solid rgba(255,255,255,.08); }
@media (max-width: 700px) { .pie__interior { grid-template-columns: 1fr 1fr; } .pie__col--marca { grid-column: 1 / -1; } }
.whatsapp-flotante { position: fixed; right: 1rem; bottom: 1rem; z-index: 80; display: inline-flex; align-items: center; gap: .5rem; background: #25D366; color: #fff; font-weight: 800; padding: .7rem 1rem; border-radius: 999px; box-shadow: var(--sombra-fuerte); }
.whatsapp-flotante:hover { text-decoration: none; background: #1EBE5A; }
@media (max-width: 640px) { .whatsapp-flotante span { display: none; } .whatsapp-flotante { padding: .8rem; } }