/* =========================================================================
   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: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fuentes/fraunces.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fuentes/fraunces-italic.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fuentes/manrope.woff2') format('woff2'); }

:root {
  --fondo: #FBF6F4;
  --superficie: #FFFFFF;
  --tinta: #2B1B22;
  --tinta-suave: #7C6A70;
  --borde: #EDE1DE;
  --crema: #F7E9E6;
  --amarillo: #C9847A;
  --amarillo-oscuro: #B06F65;
  --amarillo-suave: #F7E9E6;
  --dorado-claro: #E6B3A8;
  --rojo: #B0433A;
  --verde: #5E7D63;
  --azul: #9B5F56;
  --fuente: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fuente-titulos: 'Fraunces', Georgia, 'Times New Roman', serif;
  --radio: 14px;
  --radio-chico: 8px;
  --sombra: 0 8px 28px rgba(43, 27, 34, 0.08);
  --sombra-fuerte: 0 14px 44px rgba(43, 27, 34, 0.18);
  --alto-encabezado: 4.5rem;
  --ancho: 78rem;
  --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-weight: 400; font-size: 1rem; line-height: 1.6; 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 { font-family: var(--fuente-titulos); line-height: 1.1; margin: 0 0 0.5em; font-weight: 500; letter-spacing: -0.01em; font-variation-settings: 'opsz' 72, 'SOFT' 50; }
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: .8rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent; font-weight: 600; font-size: .9rem; letter-spacing: 0; text-transform: none; line-height: 1.2; cursor: pointer; text-align: center; transition: background .15s, color .15s, transform .1s, box-shadow .15s; }
.boton:hover { text-decoration: none; }
.boton:active { transform: translateY(1px); }
.boton--primario { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.boton--primario:hover, .boton--primario:focus-visible { background: var(--amarillo); border-color: var(--amarillo); color: #fff; box-shadow: var(--sombra); }
.boton--dorado { background: var(--amarillo); color: #fff; border-color: var(--amarillo); }
.boton--dorado:hover { background: var(--amarillo-oscuro); border-color: var(--amarillo-oscuro); }
.boton--fantasma { background: transparent; border-color: var(--tinta); color: var(--tinta); }
.boton--fantasma:hover { background: var(--tinta); color: #fff; }
.boton--hero { background: #fff; color: var(--tinta); border-color: var(--borde); }
.boton--hero:hover { border-color: var(--tinta); }
.boton--grande { padding: 1rem 1.9rem; font-size: 1rem; }
.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(--crema); }
.contador { position: absolute; top: .15rem; right: .1rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 999px; background: var(--amarillo); color: #fff; font-size: .7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.contador[hidden] { display: none; }

/* Encabezado */
.encabezado { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--tinta); 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 { font-family: var(--fuente-titulos); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; color: var(--tinta); white-space: nowrap; text-transform: none; font-variation-settings: 'opsz' 72, 'SOFT' 100; }
.logo span { color: var(--amarillo); font-style: italic; font-weight: 400; }
.logo:hover { text-decoration: none; }
.nav { flex: 1; }
.nav__lista { display: flex; gap: .25rem; flex-wrap: wrap; }
.nav__lista a { display: inline-block; padding: .45rem .8rem; border-radius: 999px; font-size: .9rem; font-weight: 500; color: var(--tinta-suave); }
.nav__lista a:hover, .nav__lista a.activo { background: var(--crema); 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: 2px; 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); color: var(--tinta); 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: .85rem .75rem; border-radius: var(--radio-chico); font-size: 1.05rem; font-weight: 600; }
  .nav-mobil__lista a.activo, .nav-mobil__lista a:hover { background: var(--crema); 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: rosado claro, titular grande, pinceles a la derecha */
.hero { background: linear-gradient(135deg, #F7E9E6 0%, #FBF6F4 60%, #FFFFFF 100%); color: var(--tinta); overflow: hidden; border-bottom: 1px solid var(--borde); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); min-height: 24rem; }
.hero__contenido { padding: 3.5rem 0; max-width: 38rem; }
.hero__sobre { font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--amarillo); margin-bottom: 1rem; }
.hero__titulo { font-size: clamp(2.6rem, 5.2vw, 4.2rem); font-weight: 500; margin-bottom: 1rem; color: var(--tinta); font-variation-settings: 'opsz' 144, 'SOFT' 100; }
.hero__titulo em { font-style: italic; color: var(--amarillo); font-weight: 400; }
.hero__bajada { font-size: 1.05rem; font-weight: 400; color: var(--tinta-suave); max-width: 44ch; margin-bottom: 1.75rem; }
.hero__acciones { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero__imagen { border-radius: 2rem 2rem 2rem 8rem; overflow: hidden; background: var(--tinta); box-shadow: var(--sombra-fuerte); }
.hero__imagen img { height: 20rem; width: auto; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__contenido { padding: 2.25rem 0 1.5rem; }
  .hero__imagen { display: none; }
  .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.7rem, 3vw, 2.4rem); margin: 0; }
.seccion__ver-todo { font-size: .9rem; font-weight: 600; color: var(--amarillo); white-space: nowrap; }
.titulo-pagina { font-size: clamp(2rem, 3.4vw, 2.8rem); }

/* 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(--crema); color: var(--amarillo-oscuro); display: inline-flex; align-items: center; justify-content: center; }
.beneficio__titulo { font-weight: 700; margin: 0; font-size: .95rem; }
.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; } }

/* Categorías */
.categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; }
.categoria { position: relative; display: block; overflow: hidden; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; text-align: center; transition: transform .15s, box-shadow .15s; }
.categoria:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--sombra); }
.categoria__foto { width: 100%; aspect-ratio: 1; object-fit: contain; margin-bottom: .75rem; }
.categoria__nombre { display: block; font-family: var(--fuente-titulos); font-size: 1.3rem; }
.categoria__cantidad { color: var(--tinta-suave); font-size: .8rem; }
.marcas { display: flex; flex-wrap: wrap; gap: .5rem; }
.marcas a { display: inline-flex; gap: .5rem; align-items: baseline; padding: .55rem 1rem; border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie); font-size: .9rem; font-weight: 500; }
.marcas a:hover { border-color: var(--amarillo); text-decoration: none; }
.marcas a span { color: var(--tinta-suave); font-size: .75rem; }
.marcas--grande a { font-size: 1.05rem; padding: .9rem 1.4rem; }

/* 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(--crema); color: var(--amarillo-oscuro); font-family: var(--fuente-titulos); align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: .75rem; }
.paso__titulo { font-family: var(--fuente-titulos); font-size: 1.35rem; 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(14.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: 1; object-fit: contain; }
.tarjeta__foto--vacia { display: flex; align-items: center; justify-content: center; color: var(--borde); aspect-ratio: 1; }
.tarjeta--agotada .tarjeta__foto { opacity: .45; }
.tarjeta__badge { position: absolute; top: .75rem; left: .75rem; padding: .25rem .65rem; border-radius: 999px; font-size: .7rem; font-weight: 700; background: var(--amarillo); color: #fff; }
.tarjeta__badge--ultimo, .tarjeta__badge--oferta { background: var(--tinta); 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__marca { margin: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--amarillo-oscuro); }
.tarjeta__nombre { margin: 0; font-family: var(--fuente); font-size: 1rem; line-height: 1.3; font-weight: 600; }
.tarjeta__nombre a:hover { text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chips li { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); border: 1px solid var(--borde); padding: .15rem .55rem; }
.tarjeta__precios { margin-top: auto; padding-top: .5rem; }
.tarjeta__precio { margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.1; display: flex; flex-direction: column; }
.tarjeta__precio-nota { font-size: .72rem; font-weight: 600; color: var(--verde); margin-top: .2rem; }
.tarjeta__cuotas { margin: .35rem 0 0; font-size: .82rem; 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: .78rem; font-weight: 700; color: var(--tinta-suave); }
.filtro select, .filtro input { font: inherit; font-size: .9rem; color: var(--tinta); padding: .55rem .7rem; 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-size: .9rem; font-weight: 600; color: var(--tinta-suave); padding: .8rem .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: 1; 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; flex-wrap: wrap; }
.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: 3.6rem; height: 3.6rem; object-fit: contain; }
.ficha__marca { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--amarillo-oscuro); margin-bottom: .25rem; }
.ficha__marca a:hover { text-decoration: underline; }
.ficha__descripcion-corta { color: var(--tinta-suave); font-size: 1.02rem; }
.ficha__nombre { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 500; }
.ficha__precios { margin: 1.25rem 0 .5rem; }
.ficha__precio { font-size: 2.2rem; font-weight: 700; line-height: 1; margin: 0; }
.ficha__precio-nota { color: var(--verde); font-size: .8rem; font-weight: 700; margin: .35rem 0 .5rem; }
.ficha__lista { color: var(--tinta-suave); margin: 0; }
.ficha__stock { font-weight: 500; 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: .78rem; font-weight: 700; color: var(--tinta-suave); gap: .25rem; }
.ficha__cantidad input { width: 5rem; padding: .9rem .6rem; font: inherit; font-weight: 700; border: 1.5px solid var(--borde); border-radius: 999px; 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-size: .95rem; }
.ficha__garantias svg { width: 22px; height: 22px; flex: none; color: var(--amarillo-oscuro); }
.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.6rem; }
.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: 700; text-align: right; }
@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: 500; 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: 500; 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-family: var(--fuente-titulos); font-size: 1.5rem; padding: 0 .4rem; }
.checkout__form label { display: grid; gap: .3rem; font-weight: 500; font-size: .88rem; }
.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(--amarillo); background: var(--crema); }
.opcion input { width: auto !important; margin-top: .3rem; accent-color: var(--amarillo); }
.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: 500; 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(--amarillo-oscuro); font-weight: 600; }
.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(--dorado-claro); }
.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: 500; 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: #E9DDE0; 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 1fr; gap: 2rem; }
.pie__logo { font-family: var(--fuente-titulos); font-size: 1.7rem; font-weight: 600; color: #fff; margin-bottom: .75rem; }
.pie__logo span { color: var(--dorado-claro); font-style: italic; font-weight: 400; }
.pie__col--marca p { max-width: 40ch; color: #B9A9AE; }
.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(--dorado-claro); color: var(--tinta); }
.pie__titulo { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--dorado-claro); margin-bottom: .75rem; }
.pie__col ul { display: grid; gap: .35rem; }
.pie__col a { color: #E9DDE0; }
.pie__col a:hover { color: var(--dorado-claro); }
.pie__legal { max-width: var(--ancho); margin: 0 auto; padding: 1rem var(--gutter) 2rem; font-size: .75rem; color: #9A8A90; 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: 500; font-size: .85rem; 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; } }

/* Import Beauty: ajustes de ficha */
.ficha__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ficha .seccion { padding-left: 0; padding-right: 0; }
.ficha__foto { aspect-ratio: 4 / 5; }

.checkout__form fieldset, .checkout__resumen, .pedido__pago, .pedido__resumen, .paso, .carrito-panel__foto { border-radius: var(--radio); }
.checkout__form input, .checkout__form textarea, .opcion { border-radius: var(--radio-chico); }
.mensaje { border-radius: var(--radio-chico); }