/* =====================================================================
   Retro Toons · maqueta Shopify · estilos.css
   Sistema: crema + tinta + terracota (sacados del logo de Instagram),
   Fredoka para títulos, Nunito para cuerpo, Kalam solo como nota a mano.
   Mobile first. Sin librerías.
   ===================================================================== */

@font-face{font-family:"Fredoka";src:url("fonts/fredoka.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Nunito";src:url("fonts/nunito.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Kalam";src:url("fonts/kalam-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --crema:#FBF4E4;        /* fondo de página (crema del perfil, suavizado) */
  --crema-2:#F7ECD0;      /* crema del logo: bloques, tarjetas, fondo de fotos */
  --crema-3:#F1E3C4;      /* crema más intensa: hover, bordes */
  --tinta:#2B2320;        /* texto */
  --tinta-70:rgba(43,35,32,.72);
  --tinta-50:rgba(43,35,32,.52);
  --linea:rgba(43,35,32,.14);
  --terracota:#D8703C;    /* el naranjo del logo: logo, display, decoración */
  --terracota-ui:#B9552A; /* botones y links: 4,8:1 con texto blanco */
  --terracota-oscuro:#9E4620;
  --cafe:#3A2A22;         /* pie de página */
  --blanco:#FFFFFF;       /* la pantalla de la tele y las tarjetas */

  --f-display:"Fredoka",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-cuerpo:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mano:"Kalam","Segoe Print","Bradley Hand",cursive;

  --ancho:1200px;
  --gutter:clamp(20px,4vw,48px);
  --seccion:clamp(56px,9vw,120px);
  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-pill:999px;
  --sombra:0 14px 34px -16px rgba(58,42,34,.28);
  --t:160ms;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--crema);color:var(--tinta);font-family:var(--f-cuerpo);font-size:16px;line-height:1.55;overflow-x:hidden}
@media (min-width:1024px){body{font-size:17px}}
img,svg,video{display:block;max-width:100%}
[hidden]{display:none!important}
img{height:auto}
a{color:var(--terracota-ui);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--terracota-oscuro)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.05;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.5rem,6vw,4.6rem);line-height:.98}
h2{font-size:clamp(1.85rem,3.4vw,2.6rem)}
h3{font-size:1.25rem;line-height:1.2}
p{margin:0 0 1em;max-width:65ch}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--terracota);outline-offset:3px;border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

.envoltura{width:min(var(--ancho),100% - 2*var(--gutter));margin-inline:auto}
.etiqueta{font-family:var(--f-display);font-weight:600;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--terracota-ui);margin:0 0 .75rem}
.bajada{font-size:1.125rem;color:var(--tinta-70)}
.mano{font-family:var(--f-mano);font-weight:700;color:var(--terracota-ui);line-height:1.2}
.precio{font-family:var(--f-display);font-weight:600;font-variant-numeric:tabular-nums}
.nota{font-size:.875rem;color:var(--tinta-70)}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.7em 1.5em;border-radius:var(--r-pill);border:2px solid transparent;font-family:var(--f-display);font-weight:600;font-size:1rem;text-decoration:none;line-height:1.1;transition:background var(--t),color var(--t),border-color var(--t),transform var(--t)}
.btn-1{background:var(--terracota-ui);color:#fff}
.btn-1:hover{background:var(--terracota-oscuro);color:#fff}
.btn-2{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.btn-2:hover{background:var(--tinta);color:var(--crema)}
.btn-3{background:var(--tinta);color:var(--crema)}
.btn-3:hover{background:#000;color:#fff}
.btn-claro{background:var(--crema);color:var(--tinta);border-color:var(--crema)}
.btn-claro:hover{background:#fff;color:var(--tinta)}
.btn-bloque{width:100%}
.btn:active{transform:translateY(1px)}
.enlace{font-family:var(--f-display);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.35em;min-height:44px}
.enlace::after{content:"→";transition:transform var(--t)}
.enlace:hover::after{transform:translateX(3px)}

/* ---------- aviso de maqueta (sacar en la tienda real) ---------- */
.aviso-maqueta{background:repeating-linear-gradient(135deg,#fff3c4 0 12px,#ffe8a3 12px 24px);color:var(--tinta);font-size:.8rem;text-align:center;padding:.45rem var(--gutter);border-bottom:1px dashed var(--tinta-50)}

/* ---------- barra superior ---------- */
.barra-superior{background:var(--cafe);color:var(--crema);font-size:.875rem}
.barra-superior .envoltura{display:flex;align-items:center;justify-content:center;gap:1.5rem;min-height:40px}
.barra-superior .envio{display:flex;align-items:center;gap:.5em;text-align:center}
.barra-superior .envio strong{font-family:var(--f-display);font-weight:600}
.barra-superior nav{display:none;gap:1.25rem;margin-left:auto}
.barra-superior nav a{color:var(--crema);text-decoration:none;opacity:.9;min-height:40px;display:inline-flex;align-items:center}
.barra-superior nav a:hover{opacity:1;text-decoration:underline}
@media (min-width:1024px){.barra-superior .envoltura{justify-content:flex-start}.barra-superior nav{display:flex}}

/* ---------- cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:40;background:rgba(251,244,228,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.cabecera .fila{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:64px;gap:1rem}
.cabecera .marca{justify-self:center;display:inline-flex;align-items:center;min-height:44px}
.cabecera .marca img{height:38px;width:auto}
.cabecera .iconos{justify-self:end;display:flex;gap:.25rem}
.icono-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:transparent;border:0;color:var(--tinta);text-decoration:none;position:relative}
.icono-btn:hover{background:var(--crema-2)}
.icono-btn .ic{width:24px;height:24px}
.icono-btn .burbuja{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--terracota-ui);color:#fff;font:600 .7rem/18px var(--f-display);text-align:center}
.abrir-menu{justify-self:start}
.nav-principal{display:none}
@media (min-width:900px){
  .cabecera .fila{min-height:76px}
  .cabecera .marca img{height:46px}
  .abrir-menu{display:none}
  .nav-principal{display:flex;justify-content:center;gap:clamp(.75rem,2vw,2rem);padding-bottom:.35rem}
  .nav-principal a{font-family:var(--f-display);font-weight:600;font-size:.95rem;letter-spacing:.02em;color:var(--tinta);text-decoration:none;padding:.55rem .25rem;border-bottom:2px solid transparent;transition:border-color var(--t),color var(--t)}
  .nav-principal a:hover,.nav-principal a[aria-current="page"]{border-color:var(--terracota);color:var(--tinta)}
}

/* ---------- menú móvil (capa completa) ---------- */
.menu-movil{border:0;padding:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;background:var(--crema);color:var(--tinta);margin:0}
.menu-movil::backdrop{background:rgba(43,35,32,.3)}
.menu-movil .cab{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:0 var(--gutter);border-bottom:1px solid var(--linea)}
.menu-movil ul{padding:.5rem var(--gutter)}
.menu-movil li a{display:flex;align-items:center;justify-content:space-between;min-height:58px;border-bottom:1px solid var(--linea);text-decoration:none;color:var(--tinta);font-family:var(--f-display);font-weight:600;font-size:1.25rem}
.menu-movil li.sec a{font-family:var(--f-cuerpo);font-weight:600;font-size:1rem;color:var(--tinta-70);min-height:50px}
.menu-movil .envio-movil{margin:1.25rem var(--gutter) 0;padding:1rem;border-radius:var(--r-md);background:var(--crema-2);font-size:.95rem}

/* ---------- hero con la tele ---------- */
.hero{padding:clamp(40px,6vw,72px) 0 clamp(48px,7vw,88px);overflow:hidden}
.hero .envoltura{display:grid;gap:2.5rem;align-items:center}
.hero h1{margin-bottom:.4em}
.hero .acciones{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;margin:1.5rem 0 1.25rem}
.hero .dato{display:flex;align-items:center;gap:.6em;font-size:.95rem;color:var(--tinta-70)}
.hero .dato b{font-family:var(--f-display);font-weight:600;color:var(--tinta);font-size:1.15rem}
@media (min-width:900px){.hero .envoltura{grid-template-columns:1.05fr 1fr;gap:3rem}}

.tele{position:relative;margin:0;width:min(100%,560px);justify-self:center}
.tele-antena{position:absolute;left:50%;top:2px;width:0;height:0;z-index:0}
.tele-antena i{position:absolute;left:-16px;top:-10px;width:32px;height:14px;border-radius:50%;background:var(--terracota)}
.tele-antena::before,.tele-antena::after{content:"";position:absolute;bottom:0;left:-5px;width:10px;height:64px;background:var(--terracota);border-radius:4px;transform-origin:bottom center}
.tele-antena::before{transform:rotate(-28deg)}
.tele-antena::after{transform:rotate(28deg)}
.tele-cuerpo{position:relative;z-index:1;background:var(--terracota);border-radius:var(--r-lg);padding:22px 88px 22px 22px;box-shadow:var(--sombra)}
.tele-pantalla{background:var(--blanco);border-radius:22px;aspect-ratio:5/4;overflow:hidden;position:relative;box-shadow:inset 0 0 0 4px rgba(255,255,255,.6)}
.tele-pantalla img{width:100%;height:100%;object-fit:cover;border-radius:18px}
.tele-pantalla::after{content:"";position:absolute;inset:0;border-radius:22px;box-shadow:inset 0 0 40px rgba(43,35,32,.18);pointer-events:none}
.tele-panel{position:absolute;right:26px;top:26px;bottom:26px;width:36px;display:flex;flex-direction:column;align-items:center;gap:14px}
.tele-perilla{width:30px;height:30px;border-radius:50%;background:var(--blanco);box-shadow:inset -3px -3px 0 rgba(43,35,32,.12)}
.tele-perilla.chica{width:20px;height:20px}
.tele-rejilla{margin-top:auto;width:26px;height:46px;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.75) 0 4px,transparent 4px 10px);border-radius:3px}
.tele figcaption{margin:1rem 0 0;font-size:1.3rem}
.tele figcaption a{color:inherit}
.tele .vivo{position:absolute;left:34px;top:34px;background:var(--tinta);color:var(--crema);font:600 .7rem/1 var(--f-display);letter-spacing:.1em;padding:.45em .7em;border-radius:6px;text-transform:uppercase}
.tele .vivo::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--terracota);margin-right:.5em;vertical-align:middle}
.personaje{position:absolute;z-index:0;pointer-events:none;filter:drop-shadow(0 8px 14px rgba(43,35,32,.25))}
.personaje.helga{width:clamp(96px,22%,150px);left:-6%;top:-10%;transform:rotate(-10deg)}
.personaje.angelica{width:clamp(110px,26%,180px);right:-7%;bottom:34px;transform:rotate(6deg);display:none;z-index:2}
@media (min-width:900px){.personaje.angelica{display:block}.tele{margin-top:2rem}}

/* ---------- franja de promesas ---------- */
.promesas{background:var(--crema-2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.promesas ul{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.5rem;padding:1.25rem 0}
.promesas li{display:flex;align-items:center;gap:.7rem;font-size:.95rem;line-height:1.3}
.promesas .ic{width:28px;height:28px;color:var(--terracota-ui)}
.promesas b{font-family:var(--f-display);font-weight:600;display:block}
@media (min-width:900px){.promesas ul{grid-template-columns:repeat(4,1fr);padding:1.5rem 0}}

/* ---------- secciones ---------- */
.seccion{padding:var(--seccion) 0}
.seccion-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.75rem 2rem;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.seccion-cab h2{margin:0}
.seccion-cab p{margin:0;color:var(--tinta-70)}
.fondo-2{background:var(--crema-2)}
.fondo-blanco{background:var(--blanco)}
.fondo-terracota{background:var(--terracota);color:var(--tinta)}
.fondo-terracota .etiqueta{color:var(--tinta)}
.fondo-cafe{background:var(--cafe);color:var(--crema)}

/* ---------- categorías ---------- */
.categorias{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.categoria{display:block;text-decoration:none;color:var(--tinta);background:var(--blanco);border-radius:var(--r-md);padding:.75rem .75rem 1rem;border:1px solid var(--linea);transition:transform var(--t),box-shadow var(--t)}
.categoria:hover{transform:translateY(-3px);box-shadow:var(--sombra);color:var(--tinta)}
.categoria .pantalla{aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--crema-2);margin-bottom:.75rem}
.categoria img{width:100%;height:100%;object-fit:cover;transition:transform 300ms}
.categoria:hover img{transform:scale(1.04)}
.categoria b{font-family:var(--f-display);font-weight:600;font-size:1.05rem;display:block}
.categoria span{font-size:.875rem;color:var(--tinta-70)}
@media (min-width:700px){.categorias{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
@media (min-width:1024px){.categorias{grid-template-columns:repeat(6,1fr)}}

/* ---------- grilla de productos ---------- */
.grilla{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem 1rem}
@media (min-width:700px){.grilla{grid-template-columns:repeat(3,1fr);gap:2rem 1.5rem}}
@media (min-width:1024px){.grilla{grid-template-columns:repeat(4,1fr)}}
.producto{display:flex;flex-direction:column;position:relative}
.producto .foto{position:relative;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;background:var(--crema-2);border:1px solid var(--linea)}
.producto .foto img{width:100%;height:100%;object-fit:cover;transition:opacity 260ms,transform 300ms}
.producto .foto img.segunda{position:absolute;inset:0;opacity:0}
.producto:hover .foto img.segunda,.producto:focus-within .foto img.segunda{opacity:1}
.producto .insignia{position:absolute;left:10px;top:10px;background:var(--crema);color:var(--tinta);font:600 .72rem/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;padding:.45em .65em;border-radius:6px;border:1px solid var(--linea)}
.producto .insignia.pedido{background:var(--tinta);color:var(--crema);border-color:var(--tinta)}
.producto h3{font-size:1.02rem;margin:.8rem 0 .15rem}
.producto h3 a{color:inherit;text-decoration:none}
.producto h3 a::after{content:"";position:absolute;inset:0}
.producto .dato{font-size:.85rem;color:var(--tinta-70);margin:0 0 .4rem}
.producto .pie{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:auto}
.producto .precio{font-size:1.05rem}
.producto .agregar{position:relative;z-index:1;min-height:44px;padding:.4em 1em;font-size:.9rem;border-radius:var(--r-pill);border:2px solid var(--tinta);background:transparent;transition:background var(--t),color var(--t)}
.producto .agregar:hover{background:var(--tinta);color:var(--crema)}
@media (max-width:699px){.producto .pie{flex-direction:column;align-items:stretch}.producto .agregar{width:100%}}

/* ---------- hola, soy Maddy ---------- */
.hola{display:grid;gap:2rem;align-items:center}
.hola .retrato{position:relative;width:min(100%,420px);margin:0 auto}
.hola .retrato img{border-radius:var(--r-md);transform:rotate(-2deg);box-shadow:var(--sombra);border:10px solid #fff}
.hola .retrato .mano{position:absolute;right:-6px;bottom:-14px;background:var(--crema);padding:.2em .6em;border-radius:8px;transform:rotate(3deg);font-size:1.2rem;box-shadow:0 0 0 3px #fff}
.hola .cuentas{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:1rem;font-size:.95rem}
.hola .cuentas a{display:inline-flex;align-items:center;gap:.4em;min-height:44px}
@media (min-width:900px){.hola{grid-template-columns:5fr 7fr;gap:4rem}}

/* ---------- proceso ---------- */
.pasos{display:grid;gap:1.5rem;counter-reset:paso}
.paso{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-md);padding:1.25rem;display:grid;grid-template-columns:72px 1fr;gap:1rem;align-items:start}
.paso .num{counter-increment:paso;width:72px;height:72px;border-radius:50%;background:var(--crema-2);display:grid;place-items:center;overflow:hidden}
.paso .num img{width:100%;height:100%;object-fit:cover}
.paso h3{margin:0 0 .3rem}
.paso h3::before{content:counter(paso) ". ";color:var(--terracota-ui)}
.paso p{margin:0;font-size:.95rem;color:var(--tinta-70)}
@media (min-width:900px){.pasos{grid-template-columns:repeat(3,1fr);gap:2rem}.paso{grid-template-columns:1fr;gap:1rem}.paso .num{width:88px;height:88px}}

/* ---------- impresión 3D ---------- */
.tresd{display:grid;gap:2rem;align-items:center}
.tresd .fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.tresd .fotos img{aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-md);width:100%;height:100%}
@media (min-width:900px){.tresd{grid-template-columns:5fr 7fr;gap:4rem}}

/* ---------- encargos (banda terracota) ---------- */
.encargos .envoltura{display:grid;gap:2rem;align-items:center}
.encargos .datos{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.5rem 0}
.encargos .datos b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.35rem}
.encargos .datos span{font-size:.875rem}
.encargos .muestra{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.encargos .muestra img{aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-md);width:100%;height:100%;border:4px solid rgba(255,255,255,.55)}
.encargos .muestra img:nth-child(2){transform:translateY(18px)}
@media (min-width:900px){.encargos .envoltura{grid-template-columns:7fr 5fr;gap:4rem}}

/* ---------- pie ---------- */
.pie-sitio{padding:var(--seccion) 0 2rem;font-size:.95rem}
.pie-sitio a{color:var(--crema);text-decoration:none;opacity:.88;min-height:36px;display:inline-flex;align-items:center}
.pie-sitio a:hover{opacity:1;text-decoration:underline;color:var(--crema)}
.pie-sitio .cols{display:grid;gap:2rem;margin-bottom:2.5rem}
.pie-sitio h3{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--crema);opacity:.7;margin-bottom:.75rem}
.pie-sitio .marca img{height:40px;margin-bottom:1rem}
.pie-sitio .redes{display:flex;flex-direction:column;gap:.1rem;margin-top:.75rem}
.pie-sitio .redes a{gap:.5em}
.pie-sitio form{display:flex;gap:.5rem;margin-top:.75rem}
.pie-sitio input[type=email]{flex:1;min-width:0;min-height:48px;padding:.5em 1em;border-radius:var(--r-pill);border:1px solid rgba(251,244,228,.35);background:rgba(255,255,255,.06);color:var(--crema)}
.pie-sitio input::placeholder{color:rgba(251,244,228,.55)}
.pie-sitio .legal{border-top:1px solid rgba(251,244,228,.18);padding-top:1.25rem;font-size:.8rem;opacity:.8;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}
.pie-sitio .legal p{margin:0;max-width:none}
@media (min-width:700px){.pie-sitio .cols{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.pie-sitio .cols{grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:3rem}}

/* ---------- carrito lateral (demo) ---------- */
.carrito{border:0;padding:0;margin:0 0 0 auto;width:min(420px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;background:var(--crema);color:var(--tinta);box-shadow:-20px 0 60px rgba(43,35,32,.2)}
.carrito::backdrop{background:rgba(43,35,32,.35)}
.carrito .cab{display:flex;align-items:center;justify-content:space-between;padding:1rem var(--gutter);border-bottom:1px solid var(--linea)}
.carrito .cab h2{font-size:1.4rem;margin:0}
.carrito .lineas{padding:1rem var(--gutter);display:flex;flex-direction:column;gap:1rem;overflow:auto;max-height:calc(100dvh - 260px)}
.carrito .linea{display:grid;grid-template-columns:72px 1fr auto;gap:.75rem;align-items:center}
.carrito .linea img{width:72px;height:72px;object-fit:cover;border-radius:10px;background:var(--crema-2)}
.carrito .linea b{font-family:var(--f-display);font-weight:600;display:block}
.carrito .vacio{color:var(--tinta-70);padding:2rem 0;text-align:center}
.carrito .resumen{position:absolute;left:0;right:0;bottom:0;padding:1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));border-top:1px solid var(--linea);background:var(--crema)}
.carrito .resumen .total{display:flex;justify-content:space-between;font-family:var(--f-display);font-weight:600;font-size:1.15rem;margin-bottom:.5rem}
.carrito .resumen .nota{margin:0 0 .75rem}

/* ---------- páginas interiores ---------- */
.migas{font-size:.85rem;color:var(--tinta-70);padding:1rem 0 0}
.migas a{color:inherit}
.migas span::before{content:"/";margin:0 .5em;opacity:.5}
.cab-pagina{padding:clamp(24px,4vw,48px) 0 clamp(24px,4vw,40px)}
.cab-pagina h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.cab-pagina p{color:var(--tinta-70);font-size:1.1rem}

/* colección: filtros */
.filtros{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1.75rem}
.filtros .chip{min-height:40px;padding:.4em 1em;border-radius:var(--r-pill);border:1.5px solid var(--linea);background:var(--blanco);font-family:var(--f-display);font-weight:600;font-size:.9rem;transition:background var(--t),border-color var(--t)}
.filtros .chip[aria-pressed=true]{background:var(--tinta);color:var(--crema);border-color:var(--tinta)}
.filtros .orden{margin-left:auto;display:flex;align-items:center;gap:.5em;font-size:.9rem}
.filtros select{min-height:40px;border-radius:var(--r-pill);border:1.5px solid var(--linea);background:var(--blanco);padding:.3em 2.2em .3em 1em}
.contador{font-size:.9rem;color:var(--tinta-70);margin:0 0 1rem}

/* ficha de producto */
.ficha{display:grid;gap:2rem;padding-bottom:var(--seccion)}
@media (min-width:900px){.ficha{grid-template-columns:7fr 5fr;gap:4rem;align-items:start}}
.galeria .principal{aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;background:var(--crema-2);border:1px solid var(--linea)}
.galeria .principal img{width:100%;height:100%;object-fit:cover;transition:object-position 300ms}
.galeria .miniaturas{display:flex;gap:.6rem;margin-top:.75rem;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:2px}
.galeria .miniaturas button{flex:none;width:76px;height:76px;padding:0;border-radius:12px;overflow:hidden;border:2px solid var(--linea);background:var(--crema-2);scroll-snap-align:start}
.galeria .miniaturas button[aria-current=true]{border-color:var(--tinta)}
.galeria .miniaturas img{width:100%;height:100%;object-fit:cover}
.compra h1{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:.2em}
.compra .dato-titulo{color:var(--tinta-70);margin:0 0 1rem;font-size:1.05rem}
.compra .precio-grande{display:flex;align-items:baseline;gap:.75rem;margin-bottom:1.5rem}
.compra .precio-grande .precio{font-size:1.9rem}
.compra .precio-grande .nota{margin:0}
.opcion{margin-bottom:1.25rem}
.opcion legend,.opcion > label{font-family:var(--f-display);font-weight:600;display:block;margin-bottom:.5rem}
.opcion legend span,.opcion > label span{font-family:var(--f-cuerpo);font-weight:400;color:var(--tinta-70)}
.muestras{display:flex;gap:.6rem;flex-wrap:wrap}
.muestras label{position:relative;cursor:pointer}
.muestras input{position:absolute;opacity:0;inset:0}
.muestras img{width:68px;height:68px;object-fit:cover;border-radius:12px;border:2px solid var(--linea);background:var(--crema-2);transition:border-color var(--t)}
.muestras input:checked + img{border-color:var(--tinta);box-shadow:0 0 0 2px var(--crema),0 0 0 4px var(--tinta)}
.muestras input:focus-visible + img{outline:3px solid var(--terracota);outline-offset:2px}
.muestras small{display:block;text-align:center;font-size:.75rem;margin-top:.25rem;max-width:68px}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0}
.chips span{display:inline-flex;align-items:center;min-height:44px;padding:.4em 1.1em;border-radius:var(--r-pill);border:1.5px solid var(--linea);background:var(--blanco);font-family:var(--f-display);font-weight:600;font-size:.95rem}
.chips input:checked + span{background:var(--tinta);color:var(--crema);border-color:var(--tinta)}
.chips input:focus-visible + span{outline:3px solid var(--terracota);outline-offset:2px}
.cantidad{display:inline-flex;align-items:center;border:1.5px solid var(--linea);border-radius:var(--r-pill);background:var(--blanco);margin-right:.75rem}
.cantidad button{width:44px;height:48px;border:0;background:transparent;font-size:1.3rem}
.cantidad input{width:44px;text-align:center;border:0;background:transparent;font-family:var(--f-display);font-weight:600;min-height:48px}
.fila-compra{display:flex;align-items:center;gap:.5rem;margin:1.5rem 0 1rem}
.fila-compra .btn{flex:1}
.aviso-envio{display:flex;gap:.6rem;align-items:flex-start;background:var(--crema-2);border-radius:var(--r-md);padding:.9rem 1rem;font-size:.95rem;margin-bottom:1.5rem}
.aviso-envio .ic{width:24px;height:24px;color:var(--terracota-ui);margin-top:2px}
.aviso-envio p{margin:0;max-width:none}
.acordeon{border-top:1px solid var(--linea)}
.acordeon details{border-bottom:1px solid var(--linea)}
.acordeon summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:52px;font-family:var(--f-display);font-weight:600;font-size:1.02rem}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{content:"+";font-size:1.4rem;color:var(--terracota-ui);transition:transform var(--t)}
.acordeon details[open] summary::after{transform:rotate(45deg)}
.acordeon .contenido{padding:0 0 1rem;font-size:.95rem;color:var(--tinta-70)}
.acordeon .contenido p{margin-bottom:.6em}
.acordeon .contenido ul{list-style:disc;padding-left:1.2em;margin-bottom:.6em}
.quien-dibuja{display:flex;gap:1rem;align-items:center;margin-top:1.5rem;padding:1rem;border-radius:var(--r-md);background:var(--blanco);border:1px solid var(--linea)}
.quien-dibuja img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.quien-dibuja p{margin:0;font-size:.95rem}
.barra-fija{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--crema);border-top:1px solid var(--linea);padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:1rem;transform:translateY(110%);transition:transform 220ms}
.barra-fija.visible{transform:none}
.barra-fija .precio{font-size:1.2rem}
@media (min-width:900px){.barra-fija{display:none}}
body.con-barra{padding-bottom:84px}
@media (min-width:900px){body.con-barra{padding-bottom:0}}

/* quién soy */
.capitulos{display:grid;gap:2rem}
.capitulo{display:grid;gap:1.25rem;align-items:center}
.capitulo img{border-radius:var(--r-md);width:100%;aspect-ratio:4/5;object-fit:cover}
.capitulo .texto p{color:var(--tinta-70)}
@media (min-width:900px){.capitulos{gap:4rem}.capitulo{grid-template-columns:5fr 7fr;gap:3rem}.capitulo:nth-child(even) img{order:2}}
.cuaderno{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.cuaderno figure{margin:0}
.cuaderno img{border-radius:var(--r-md);aspect-ratio:3/4;object-fit:cover;width:100%;border:6px solid #fff;box-shadow:var(--sombra)}
.cuaderno figcaption{font-size:.85rem;color:var(--tinta-70);margin-top:.5rem}
@media (min-width:700px){.cuaderno{grid-template-columns:repeat(4,1fr);gap:1.5rem}}
.dos-cuentas{display:grid;gap:1.25rem}
.cuenta{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-md);padding:1.5rem}
.cuenta h3{display:flex;align-items:center;gap:.5em}
.cuenta p{color:var(--tinta-70);margin-bottom:.75em}
@media (min-width:700px){.dos-cuentas{grid-template-columns:1fr 1fr;gap:2rem}}

/* encargos */
.tarjetas-encargo{display:grid;gap:1.25rem}
.tarjeta-encargo{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-md);padding:1.5rem;display:flex;flex-direction:column}
.tarjeta-encargo img{aspect-ratio:1;object-fit:cover;border-radius:12px;margin-bottom:1rem;background:var(--crema-2)}
.tarjeta-encargo p{color:var(--tinta-70);font-size:.95rem}
.tarjeta-encargo dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem .75rem;margin:auto 0 0;font-size:.95rem}
.tarjeta-encargo dt{color:var(--tinta-70)}
.tarjeta-encargo dd{margin:0;font-family:var(--f-display);font-weight:600}
@media (min-width:900px){.tarjetas-encargo{grid-template-columns:repeat(3,1fr);gap:2rem}}
.formulario{display:grid;gap:2rem}
@media (min-width:900px){.formulario{grid-template-columns:7fr 5fr;gap:4rem;align-items:start}}
.campo{display:grid;gap:.35rem;margin-bottom:1.1rem}
.campo label{font-family:var(--f-display);font-weight:600}
.campo input,.campo textarea,.campo select{min-height:48px;padding:.6em .9em;border-radius:12px;border:1.5px solid var(--linea);background:var(--blanco);width:100%}
.campo textarea{min-height:120px;resize:vertical}
.campo .ayuda{font-size:.85rem;color:var(--tinta-70)}
.consentimiento{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;margin:1rem 0 1.25rem}
.consentimiento input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--terracota-ui)}
.o-whatsapp{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-md);padding:1.5rem}
.o-whatsapp h3{margin-top:0}
.o-whatsapp p{color:var(--tinta-70)}
.galeria-encargos{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.galeria-encargos img{aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-md);width:100%}
@media (min-width:700px){.galeria-encargos{grid-template-columns:repeat(4,1fr);gap:1.5rem}}
.exito{background:var(--crema-2);border-radius:var(--r-md);padding:1.25rem;border:1px solid var(--linea)}

/* texto largo (envíos, privacidad) */
.prosa{max-width:70ch}
.prosa h2{font-size:1.6rem;margin-top:2.5rem}
.prosa h3{margin-top:1.5rem}
.prosa ul{list-style:disc;padding-left:1.2em;margin-bottom:1em}
.prosa table{border-collapse:collapse;width:100%;margin:1rem 0 1.5rem;font-size:.95rem}
.prosa th,.prosa td{text-align:left;padding:.6em .75em;border-bottom:1px solid var(--linea);vertical-align:top}
.prosa th{font-family:var(--f-display);font-weight:600}

/* ---------- aparición suave (se desactiva con reduced motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .revela{opacity:0;transform:translateY(12px);transition:opacity 300ms ease,transform 300ms ease}
  .js .revela.visto{opacity:1;transform:none}
}
@media print{.cabecera,.barra-superior,.aviso-maqueta,.barra-fija{display:none}}