/* ZERO · Descubre y tienda
   css/descubre.css

   El hero, los encabezados de vista, el titular semanal, las burbujas, los
   colapsables, las tarjetas de producto, el carrito, las recomendaciones de
   usuarios, compartir perfil, la visita sin cuenta y los iconos de coleccion.

   Salio de index.html, que tenia 5302 lineas. Es 1 de 8 pedazos y se
   carga en un orden fijo desde index.html: NO lo reacomodes ahi. */

/* ===== hero completo (discover) ===== */
/* LA PORTADA OCUPA LA PANTALLA ENTERA, ni un punto menos.
   -------------------------------------------------------------------
   Aquí había un `max-height:852px`, que es la altura de un iPhone 14 Pro. En
   cualquier teléfono más alto —un Pro Max mide 932— la portada se quedaba 80
   puntos corta y por el hueco se asomaba el "Lo de esta semana" de la sección
   siguiente, abajo a la izquierda, antes de que nadie hubiera deslizado nada.
   Un titular a medio salir no se lee como diseño: se lee como que la página
   está mal armada.

   El tope solo hacía falta en una compu, donde #phone se dibuja como un
   teléfono de mentira con su marco. Así que ahí se pone, y solo ahí: la misma
   cuenta que usa #phone en css/base.css (100vh menos los 24px de arriba y de
   abajo del body, con techo de 900). */
.fullhero{position:relative;height:100dvh;min-height:480px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  /* El colchón de abajo tiene que dejar pasar la barra flotante Y el botón de
     la Z que sobresale de ella; por eso suma la franja segura del teléfono en
     vez de ser un número fijo. */
  padding:0 26px calc(176px + env(safe-area-inset-bottom,0px))}
@media(min-width:500px){
  /* Los 48 son el colchón del body y los 2 el borde de #phone: la altura que le
     queda por dentro al teléfono de mentira. El techo, los 900 de #phone menos
     ese mismo borde. */
  .fullhero{height:min(calc(100dvh - 50px),898px)}
}
/* logotipo: manual §tipografía — Inter Light 300, mayúsculas, tracking 0.32em. Nunca bold.
   El tracking va SOLO entre letras: por eso el texto es "ZERO" sin espacios escritos a mano. */
.fh-brand{position:absolute;top:58px;left:26px;font-size:26px;letter-spacing:.32em;color:var(--ink);z-index:2;
  font-weight:300;text-transform:uppercase}
.fh-title{position:relative;z-index:2;font-size:var(--fs-portada);font-weight:300;
  line-height:var(--lh-portada);letter-spacing:var(--tr-portada)}
/* Segundas líneas de titular: se distinguen SOLO por color, nunca por cursiva.
   La cursiva se retiró el 4 ago 2026; ver docs/identidad-visual.md §4. */
.fh-title em,.hero h1 em,.mega em{font-style:normal;color:var(--sand)}
/* La flechita va justo encima del botón de la Z —que sobresale 30 puntos por
   arriba de la barra—, no detrás de él: los dos viven en el centro de la
   pantalla y se pisarían. De ahí que sume la franja segura igual que la barra. */
.scroll-arrow{position:absolute;bottom:calc(120px + env(safe-area-inset-bottom,0px));
  left:50%;z-index:2;color:var(--sand);cursor:pointer;animation:bounce 2.2s infinite}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(9px)}}

/* ===== encabezados de vista ===== */
/* Misma razón que en .meter-card: los 64px alcanzaban en una compu, pero en un
   teléfono con muesca la franja del reloj se come parte de ellos.
   Va con max() y no con un simple "+": el valor de respaldo de env() solo entra
   cuando el navegador NO entiende env(), y los que sí lo entienden devuelven 0
   en una pantalla sin muesca. Sumando a secas, la compu se quedaba con 30px —
   menos de los 64 que tenía antes. Con max() nunca baja de 64, y en un iPhone
   crece lo que haga falta. */
.hero{position:relative;padding:max(64px,calc(30px + env(safe-area-inset-top,0px))) 22px 20px}
.hero h1{position:relative;z-index:2;font-size:var(--fs-titular);font-weight:400;
  letter-spacing:var(--tr-titular);line-height:var(--lh-titular)}
.hero p{position:relative;z-index:2;margin-top:10px;color:var(--ink-dim);font-size:13.5px;max-width:300px;line-height:1.55}
.brand{position:relative;z-index:2;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--ink-dim);margin-bottom:12px}

.section{padding:22px 22px 4px}
/* Los subtítulos de sección son más grandes que el token `label` del manual.
   Ese token vive en tokens/typography.css, que se genera solo y no se toca a
   mano, así que la escala propia de la interfaz se declara aquí. */
.section h2,.subhead{font-size:15px;line-height:1.25;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-dim);font-weight:500}
.section h2{margin-bottom:16px}
.subhead{margin:2px 0 12px}

/* ===== titular semanal ===== */
/* token `display`: es el único fluido de la escala. Peso 300, no 350, porque el
   manual solo declara los pesos que existen como archivo. Ver scripts/lib/brand.mjs */
h2.mega,.section h2.mega{font-size:var(--fs-display);line-height:var(--lh-display);
  letter-spacing:var(--tr-display);font-weight:300;
  color:var(--ink);margin-bottom:10px;text-wrap:balance;will-change:transform;text-transform:none}
.week-sub{font-size:12.5px;color:var(--ink-dim);line-height:1.55;max-width:310px;margin-bottom:24px}

/* ===== burbujas ===== */
@keyframes bob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-6px) rotate(.5deg)}}
/* Las fichas de artículo conservan la burbuja como fondo, pero ya no flotan
   sueltas: todas miden lo mismo y se alinean, y el texto se lee de corrido
   (etiqueta · fecha, título, autor). El radio cambia de una a otra para que
   cada una siga pareciendo un canto rodado y no una tarjeta. */
.bub{position:relative;overflow:hidden;width:100%;padding:18px 22px 18px 18px;text-align:left;
  cursor:pointer;margin-bottom:12px;display:block;
  transition:transform 160ms var(--ease)}
.bub:active{transform:scale(.98)}
.bub::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(11,11,14,.30),rgba(11,11,14,.66))}
.bub-in{position:relative;z-index:1}
/* La foto entra por la izquierda, dentro de la burbuja, y todo el texto se
   recorre a la derecha. El `min-width:0` del bloque de texto es lo que permite
   que los títulos largos partan renglón en vez de estirar la fila. */
.bub .bub-in{display:flex;align-items:center;gap:14px}
.bub-ph{flex:0 0 82px;height:82px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(250,246,238,.18),rgba(11,11,14,.45));
  box-shadow:0 8px 20px rgba(11,11,14,.38),inset 0 0 0 1px rgba(250,246,238,.14)}
.bub-ph img{width:100%;height:100%;object-fit:cover;display:block}
.bub-tx{flex:1;min-width:0}
.bub-meta{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.bub .tag{font-size:10.5px;letter-spacing:1.6px;color:var(--sand);font-weight:600}
.bub .bub-date{font-size:11px;letter-spacing:.02em;color:rgba(242,237,230,.6);white-space:nowrap}
.bub b{display:block;font-size:17px;line-height:1.28;margin:0 0 7px;font-weight:600;
  color:#faf6ee;text-wrap:balance}
.bub span{font-size:11.5px;color:rgba(242,237,230,.8)}
.bub-by{display:block}
.bub:nth-child(5n+1){border-radius:46px 26px 40px 30px}
.bub:nth-child(5n+2){border-radius:26px 46px 28px 42px}
.bub:nth-child(5n+3){border-radius:40px 30px 46px 26px}
.bub:nth-child(5n+4){border-radius:30px 42px 26px 46px}
.bub:nth-child(5n){border-radius:44px 32px 32px 44px}
/* la foto repite, en chico, el canto rodado de la burbuja que la contiene */
.bub:nth-child(5n+1) .bub-ph{border-radius:26px 14px 22px 16px}
.bub:nth-child(5n+2) .bub-ph{border-radius:14px 26px 16px 24px}
.bub:nth-child(5n+3) .bub-ph{border-radius:22px 16px 26px 14px}
.bub:nth-child(5n+4) .bub-ph{border-radius:16px 24px 14px 26px}
.bub:nth-child(5n) .bub-ph{border-radius:24px 18px 18px 24px}
.stat.sbub{position:relative;overflow:hidden;border:none;padding:22px 8px;animation:bob 8s ease-in-out infinite}
.stat.sbub::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,14,.28),rgba(11,11,14,.55))}
.stat.sbub .bub-in{position:relative;z-index:1}
.stat.sbub b{color:#faf6ee}
.stat.sbub span{color:rgba(250,246,238,.82)}
.stat.sbub:nth-child(1){border-radius:52% 48% 44% 56%/48% 56% 44% 52%;
  background:radial-gradient(circle at 30% 30%,var(--t1),var(--t2) 62%,color-mix(in srgb,var(--t2) 25%,#0b0b0e))}
.stat.sbub:nth-child(2){border-radius:44% 56% 52% 48%/56% 44% 52% 48%;animation-delay:1.1s;
  background:radial-gradient(circle at 70% 40%,var(--t3),var(--t4) 62%,color-mix(in srgb,var(--t4) 25%,#0b0b0e))}
.stat.sbub:nth-child(3){border-radius:56% 44% 48% 52%/44% 52% 48% 56%;animation-delay:2.2s;
  background:radial-gradient(circle at 40% 60%,var(--t5),var(--t6) 62%,color-mix(in srgb,var(--t6) 25%,#0b0b0e))}

/* ===== colapsables ===== */
.collap-head{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:4px 0 14px}
.collap-head h2{margin:0!important}
.collap-head .chev{color:var(--sand);font-size:15px;transition:transform .3s}
.collap-head.open .chev{transform:rotate(180deg)}
.collap{display:none}
.collap.open{display:block;animation:fade .35s var(--ease)}

/* ===== reveal on scroll ===== */
.view .section{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.view .section.inview{opacity:1;transform:none}

/* ===== discover: productos ===== */
.hscroll{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:2px 22px 8px;margin:0 -22px}
.hscroll::-webkit-scrollbar{display:none}
/* La tarjeta es una COLUMNA y la nota se empuja al fondo con `margin-top:auto`.
   Antes no lo era: el nombre podía ocupar una línea o dos, y la nota quedaba a
   distinta altura en cada tarjeta de la fila. Fijar la altura del nombre a dos
   renglones exactos (`min-height` + recorte a 2 líneas) es lo que hace que la
   fila se lea como una sola línea de notas y no como una escalera. */
.prod-card{flex:0 0 158px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:12px;
  cursor:pointer;transition:transform 160ms var(--ease);
  display:flex;flex-direction:column}
.prod-card:active{transform:scale(.96)}
.prod-thumb{height:122px;border-radius:15px;margin-bottom:10px;position:relative;overflow:hidden}
.prod-thumb svg{position:absolute;inset:0;width:100%;height:100%}
.prod-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prod-card b{font-size:13px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.25;min-height:calc(13px * 1.25 * 2)}
.prod-card span{font-size:11px;color:var(--ink-dim)}
.prod-card .prod-sub{display:block;margin:2px 0 8px}
/* `align-self` y no `align-items:flex-start` en la tarjeta: estirar es lo
   correcto para todo lo demás —la foto ocupa el ancho entero y sus capas van
   posicionadas, así que encogerla al contenido la deja en cero y desaparece—.
   La única que no debe estirarse es la píldora de la nota. */
.prod-card .badge{margin-top:auto;align-self:flex-start}  /* el hueco mínimo lo pone .prod-sub */
.badge{display:inline-block;margin-top:8px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;
  background:rgba(20,20,28,.85);font-variant-numeric:tabular-nums}
.tag{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--sand)}

/* ===== compras: carrito y tienda ===== */
.cartbtn{position:absolute;top:8px;right:8px;z-index:2;width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(11,11,14,.72);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;
  transition:transform 140ms var(--ease)}
.cartbtn svg{position:static;width:16px;height:16px;stroke:var(--sand);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cartbtn:active{transform:scale(.88)}
.cartbtn.inline{position:static;flex:0 0 34px}
.shop-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.shop-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:8px;display:flex;flex-direction:column}
.shop-card .prod-thumb{height:78px;border-radius:12px;cursor:pointer}
.shop-card b{font-size:11.5px;font-weight:600;line-height:1.2;margin-top:6px}
/* Nota y precio viajan pegados al botón: el aire sobrante se va ARRIBA del bloque
   (margin-top:auto en la meta), no entre la meta y el botón. Así las tarjetas de
   2 y 3 líneas de nombre terminan idénticas de la meta para abajo.
   Las mismas reglas valen para "los más comprados": una sola tarjeta, dos usos. */
.shop-card .shop-meta,.best-card .shop-meta{margin-top:auto;margin-bottom:12px;
  justify-content:space-between;gap:6px}
.shop-card .badge,.best-card .badge{font-size:var(--fs-caption);padding:4px 9px;margin-top:0}
.shop-card b{margin-bottom:8px}
.shop-card .buybtn{margin-top:0;padding:8px;font-size:11px;gap:5px}
.shop-card .buybtn svg{width:13px;height:13px}
.shop-count{font-size:11.5px;color:var(--ink-dim);margin:2px 0 12px}
.shop-meta{display:flex;align-items:center;gap:6px;margin-top:6px}
/* el precio va un escalón por debajo de la nota: la nota es el dato de ZERO, el
   precio es contexto. tabular-nums para que $99 y $589 no bailen de ancho. */
.shop-price{font-size:11px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.shop-filters{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 6px;align-items:center}
.shop-filters .fpill{flex:0 0 auto}
/* "Filtros" pertenece a lo de ABAJO, no a lo de arriba. Antes estaba pegado a
   los 3 más comprados y separado de los productos que filtra, y a la vista
   parecía el pie de la sección anterior en vez del encabezado de la siguiente.
   Regla de siempre: un título va junto a lo que titula. */
#shopFiltersWrap{margin:16px 0 2px}
#shopFiltersWrap .collap-head{padding:2px 0 4px}
/* punto junto a "Filtros" cuando hay alguno puesto */
.filtro-on{display:none;width:7px;height:7px;border-radius:50%;background:var(--sand);
  margin-left:9px;vertical-align:middle}
.filtro-on.on{display:inline-block}
.score-filter{flex:0 0 auto;display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:7px 12px;font-size:12px;font-weight:600;color:var(--ink-dim);white-space:nowrap}
.score-filter input{width:46px;background:none;border:none;outline:none;color:var(--ink);font-family:inherit;
  font-size:16px;font-weight:600;text-align:center}
.score-filter input::-webkit-outer-spin-button,.score-filter input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* los 3 más comprados: 3 en una fila, sin scroll */
.best-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
/* Vidrio dorado, distinto al del resto del catálogo. El tinte va ENCIMA de
   var(--card), no en su lugar: así el fondo animado sigue viéndose a través y
   la tarjeta no se convierte en un rectángulo opaco. El dorado es el mismo
   acento que ya usa la app para lo destacado, así que diferencia sin estrenar
   un color nuevo. Las dos variables se redefinen en modo día más abajo. */
.best-card{position:relative;border-radius:18px;padding:8px;
  background:linear-gradient(160deg,var(--best-glass),transparent),var(--card);
  border:1px solid var(--best-edge);
  cursor:pointer;transition:transform 160ms var(--ease);display:flex;flex-direction:column}
.best-card:active{transform:scale(.96)}
.best-card .prod-thumb{height:80px;border-radius:12px;margin-bottom:6px;flex:0 0 80px}
/* mismo criterio que .shop-card: el botón se ancla al fondo de la tarjeta */
.best-card b{font-size:11.5px;font-weight:600;line-height:1.2;display:block;margin-bottom:8px}
.buybtn{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:7px;border:none;border-radius:14px;
  padding:10px;font-family:inherit;font-size:12.5px;font-weight:600;color:#fff;cursor:pointer;
  background:linear-gradient(120deg,var(--coral),var(--rose));transition:transform 140ms var(--ease)}
.buybtn:active{transform:scale(.96)}
.buybtn svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ===== recomendaciones de usuarios ===== */
.rec-card{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px;
  margin-bottom:10px;align-items:center}
.rec-card .fp-img{flex:0 0 54px;width:54px;height:54px;border-radius:14px}
.rec-card b{font-size:13.5px;font-weight:600;display:block;margin-bottom:4px}
.rec-note{font-size:12px;color:var(--ink-dim);line-height:1.5;margin-top:6px}
.rec-score{flex:0 0 38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:13px}
.sec-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sec-row h2{margin-bottom:0!important}
.addrec{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:none;
  cursor:pointer;background:linear-gradient(135deg,var(--coral),var(--rose));color:#fff;font-size:22px;line-height:1;
  box-shadow:0 6px 18px color-mix(in srgb,var(--rose) 40%,transparent);transition:transform 140ms var(--ease)}
.addrec:active{transform:scale(.9)}
.vpick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.vpick button{background:var(--card2);border:1px solid var(--line);color:var(--ink);border-radius:20px;
  padding:9px 14px;font-family:inherit;font-size:12.5px;cursor:pointer}
.vpick button.sel{border-color:var(--sand);color:var(--sand)}

/* ===== título de comunidad con movimiento ===== */
.hero .comm-title{font-size:clamp(36px,10.5vw,46px);line-height:1.06;letter-spacing:-.5px}
.comm-title .cw{display:inline-block;animation:wordfloat 5.5s ease-in-out infinite}
.comm-title .cw:nth-child(2){animation-delay:.9s}
.comm-title em .cw{animation-delay:1.7s;color:var(--sand)}
@keyframes wordfloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-7px) rotate(-1.2deg)}}

/* ===== compartir perfil ===== */
.share-chip{position:relative;z-index:2;margin-top:14px}
/* Desde que el botón bajó debajo de las burbujas ya no vive dentro del hero, así
   que no hereda su margen: el renglón se lo pone él. Se alinea a la izquierda
   con el mismo margen de 22px que el resto de la página, para que el borde
   izquierdo siga siendo una sola línea de arriba a abajo. */
.share-row{padding:16px 22px 0}

/* ===== visita sin cuenta =====
   Lo que cambia cuando alguien mira un perfil compartido sin haber entrado.
   Todo cuelga de body.visita, así que basta quitar esa clase para que la app
   vuelva a ser la de siempre. */
/* El "← Comunidad" de arriba mentiría: quien visita no viene de Comunidad y no
   tiene a dónde regresar. Se esconde en vez de llevar a una pantalla cerrada. */
body.visita .view .back{display:none}
/* La salida de la puerta, al revés: solo existe mientras haya un perfil debajo
   al cual volver. */
.gate-volver{display:none}
body.visita .gate-volver{display:block;margin:18px auto 0;background:none;border:none;
  color:var(--ink-dim);font-family:inherit;font-size:13px;cursor:pointer;padding:8px}
body.visita .gate-volver:active{color:var(--ink)}
.share-row .share-chip{margin-top:0}

/* ===== iconos de colecciones =====
   RELLENOS, no de trazo. Los de antes eran líneas de 1.7 puntos; los doce de
   ahora son siluetas macizas —gotas fundidas, parientes del isotipo— y con
   `fill:none` no se verían en absoluto. Ver ICONS en js/perfil.js. */
.col-ico svg{width:21px;height:21px;fill:currentColor;stroke:none}
/* LA FLECHA DE ABRIR UNA COLECCIÓN, más grande.
   Era un "▾" de trece píxeles al lado de una ✕ del mismo tamaño: dos cosas
   iguales a la vista, una que abre y otra que borra. La ✕ ya no está, y la
   flecha se queda sola y crece hasta medirse en dedo — 40 puntos de área,
   que es el mínimo con el que se acierta sin mirar. */
.chev-btn{background:none;border:none;color:var(--ink-dim);cursor:pointer;
  flex:0 0 40px;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--ease)}
.chev-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.col-card.open .chev-btn{transform:rotate(180deg)}
.icon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:12px 0 6px}
.icon-item{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--card2);
  border:1px solid var(--line);border-radius:12px;cursor:pointer;color:var(--ink-dim);
  transition:transform 140ms var(--ease)}
.icon-item:active{transform:scale(.9)}
.icon-item svg{width:20px;height:20px;fill:currentColor;stroke:none}

/* gradientes por paleta (avatares, iconos, fondos) */
.g1{background:radial-gradient(circle at 30% 30%,var(--t1),var(--t2) 45%,color-mix(in srgb,var(--t2) 22%,#0b0b0e) 80%)}
.g2{background:radial-gradient(circle at 70% 40%,var(--t3),var(--t4) 50%,color-mix(in srgb,var(--t4) 22%,#0b0b0e) 85%)}
.g3{background:radial-gradient(circle at 40% 60%,var(--t5),var(--t6) 55%,color-mix(in srgb,var(--t6) 22%,#0b0b0e) 85%)}
.g4{background:radial-gradient(circle at 60% 30%,var(--t1),var(--t6) 55%,color-mix(in srgb,var(--t6) 20%,#0b0b0e) 85%)}
.g5{background:radial-gradient(circle at 35% 65%,var(--t3),var(--t2) 52%,color-mix(in srgb,var(--t2) 22%,#0b0b0e) 85%)}