/* «No sabías que existía» · catálogo. Pensado para celular: casi todos llegan desde el enlace del perfil. */
:root { --indigo: #4A35F5; --tinta: #130F2E; --crema: #FFF7EA; --mango: #FFC42E; --oro: #E39A00; --gris: #6B6680; --linea: #ECE3D2; --papel: #FFFFFF; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--crema); color: var(--tinta); font: 500 17px/1.45 Inter, system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
h1, h2, .precio, .num, mark, .boton, .compartir, .marca { font-family: 'Bricolage Grotesque', Inter, system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em; }
mark { background: var(--mango); color: var(--tinta); padding: 0 .16em .04em; display: inline-block; transform: rotate(-2deg); }
main { max-width: 1060px; margin: 0 auto; padding: 0 16px 40px; }

.cab { background: var(--indigo); padding: 10px 16px; position: sticky; top: 0; z-index: 5; }
.cab-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1060px; margin: 0 auto; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--crema); font-size: 18px; min-width: 0; }
.sello { width: 42px; height: 42px; border-radius: 50%; background: var(--crema); display: grid; place-items: center; flex: none; }
.cab-link { flex: none; color: var(--crema); font-weight: 700; font-size: 14px; padding: 8px 12px; border: 2px solid rgba(255, 247, 234, .55); border-radius: 999px; }
/* la franja que no se va: aquí no se paga, se compra en la tienda */
.franja { margin: 0; background: var(--tinta); color: var(--crema); font: 800 15.5px/1.25 'Bricolage Grotesque', Inter, sans-serif; letter-spacing: -0.01em; padding: 10px 16px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; text-align: center; }
.franja b { background: var(--mango); color: var(--tinta); padding: 1px 8px 3px; border-radius: 7px; transform: rotate(-2deg); }
.franja .flecha { color: var(--mango); }
.franja small { flex-basis: 100%; font: 600 12.5px/1.2 Inter, system-ui, sans-serif; letter-spacing: 0; opacity: .78; }
.logo-tienda { display: inline-flex; align-items: center; background: #fff; border-radius: 8px; padding: 4px 9px; vertical-align: middle; }
.logo-tienda img { display: block; height: 22px; width: auto; }
.destino .logo-tienda { border: 2px solid var(--linea); margin-right: 4px; }
.ico { width: 1.2em; height: 1.2em; flex: none; vertical-align: -0.22em; }

.portada { background: var(--indigo); color: var(--crema); margin: 0 -16px; padding: 26px 16px 30px; border-radius: 0 0 28px 28px; }
.portada h1 { font-size: clamp(30px, 8.4vw, 54px); line-height: 1.02; margin: 0 0 20px; }
.buscar { display: flex; gap: 8px; }
.buscar input { flex: 1; min-width: 0; font: 600 17px Inter, sans-serif; padding: 15px 16px; border-radius: 14px; border: 3px solid var(--tinta); background: #fff; color: var(--tinta); }
.buscar input:focus { outline: 4px solid var(--mango); }
.buscar button { font: 800 17px 'Bricolage Grotesque', sans-serif; padding: 0 18px; border-radius: 14px; border: 3px solid var(--tinta); background: var(--mango); color: var(--tinta); cursor: pointer; }

.fichas { display: flex; gap: 8px; overflow-x: auto; padding: 16px 16px 6px; margin: 0 -16px; scrollbar-width: none; }
.fichas::-webkit-scrollbar { display: none; }
.fichas a { flex: none; padding: 9px 15px; border-radius: 999px; border: 2px solid var(--tinta); font-weight: 700; font-size: 15px; background: #fff; }
.fichas a.on { background: var(--tinta); color: var(--crema); }

.sec { font-size: 25px; margin: 26px 0 12px; }
.sin { background: #fff; border: 2px dashed var(--tinta); border-radius: 16px; padding: 16px; margin: 18px 0 0; }
.rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .rejilla { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.tarjeta { position: relative; display: flex; flex-direction: column; background: #fff; border: 3px solid var(--tinta); border-radius: 20px; overflow: hidden; box-shadow: 0 5px 0 var(--tinta); }
.tarjeta:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--tinta); }
.tarjeta .foto { aspect-ratio: 1; display: block; background: #fff; }
.tarjeta img { width: 100%; height: 100%; object-fit: contain; display: block; }
.num { position: absolute; left: 8px; top: 8px; background: var(--indigo); color: var(--crema); padding: 3px 10px 4px; border-radius: 10px; font-size: 16px; z-index: 1; }
.num.grande { font-size: 24px; left: 12px; top: 12px; padding: 5px 14px 6px; }
.nom { padding: 10px 12px 0; font-weight: 700; font-size: 15px; line-height: 1.25; flex: 1; }
.fila { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 12px 12px; }
.precio { background: var(--mango); padding: 1px 9px 3px; font-size: 20px; transform: rotate(-2deg); display: inline-block; }
.precio.grande { font-size: 46px; padding: 0 16px 5px; }
.est { font-weight: 700; font-size: 14px; color: var(--gris); }
.ver { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 15px; color: var(--indigo); }
.tarjeta.agotado img { filter: grayscale(1); opacity: .55; }
.tarjeta.agotado .precio { background: var(--linea); }

.prod { padding-top: 14px; max-width: 720px; }
.volver { display: inline-block; font-weight: 700; color: var(--indigo); padding: 6px 0 12px; }
.marcofoto { position: relative; background: #fff; border: 3px solid var(--tinta); border-radius: 24px; overflow: hidden; box-shadow: 0 6px 0 var(--tinta); }
.marcofoto img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.prod h1 { font-size: clamp(27px, 7vw, 40px); line-height: 1.05; margin: 22px 0 6px; }
.frase { margin: 0 0 12px; font-size: 18px; color: #3a3552; }
.frase.clara { color: var(--crema); }
.linea { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 4px; }
.prod .est { font-size: 16px; }
.rev { margin: 4px 0 16px; font-size: 14px; color: var(--gris); font-weight: 600; }
.aviso { background: #fff; border: 3px solid var(--tinta); border-radius: 16px; padding: 14px 16px; font-weight: 700; }
.dos-col { display: grid; gap: 12px; }
@media (min-width: 620px) { .dos-col { grid-template-columns: 1fr 1fr; } }
.caja { border-radius: 20px; padding: 16px 18px; }
.caja h2 { margin: 0 0 6px; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; font-family: Inter, sans-serif; font-weight: 700; }
.caja ul { margin: 0; padding-left: 20px; font-weight: 600; }
.caja li + li { margin-top: 4px; }
.bueno { background: var(--indigo); color: var(--crema); }
.bueno h2 { color: var(--mango); }
.malo { border: 3px solid var(--tinta); background: #fff; }
.dos-col + .compartir { margin-top: 18px; }
.botones { display: grid; gap: 10px; margin: 18px 0 10px; }
.boton { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; white-space: nowrap; font-size: clamp(16px, 4.9vw, 22px); padding: 17px 12px; border-radius: 16px; background: var(--mango); border: 3px solid var(--tinta); box-shadow: 0 5px 0 var(--tinta); }
.boton.dos { background: #fff; font-size: 19px; padding: 14px 16px; }
.boton:active, .compartir:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--tinta); }
.compartir { width: 100%; font-size: 19px; padding: 14px 16px; border-radius: 16px; background: var(--indigo); color: var(--crema); border: 3px solid var(--tinta); box-shadow: 0 5px 0 var(--tinta); cursor: pointer; margin-top: 6px; }

.pie { background: var(--tinta); color: #CFC9E6; margin-top: 10px; font-size: 14px; line-height: 1.5; }
.pie-in { max-width: 1060px; margin: 0 auto; padding: 28px 16px 46px; display: grid; gap: 22px; }
@media (min-width: 720px) { .pie-in { grid-template-columns: 1.2fr .8fr 1.2fr; gap: 36px; } }
.pie p { margin: 0 0 8px; }
.pie-t { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 17px; color: var(--crema); }
.pie a { color: var(--crema); text-decoration: underline; text-underline-offset: 3px; }
.pie b { color: var(--crema); }
@media (prefers-reduced-motion: no-preference) { .tarjeta, .boton, .compartir { transition: transform .08s, box-shadow .08s; } }

/* ── Decidir fácil: prueba social, una sola acción, las dudas resueltas junto al botón ── */
.bajo { margin: 14px 0 0; font-size: 15px; font-weight: 600; opacity: .92; }
.estrellas { letter-spacing: 1px; background: linear-gradient(90deg, var(--oro) calc(var(--v) / 5 * 100%), var(--linea) 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prueba { padding: 4px 12px 0; font-size: 13.5px; font-weight: 700; color: var(--tinta); }
.prueba .cuantos { color: var(--gris); font-weight: 600; }
.prueba.grande { padding: 0; margin: 10px 0 0; font-size: 16.5px; font-weight: 600; }
.prueba.grande .estrellas { font-size: 21px; }
.fichas.gasto { align-items: center; padding-top: 4px; }
.rotulo { flex: none; font-weight: 700; font-size: 14px; color: var(--gris); }
.fichas button { flex: none; padding: 9px 15px; border-radius: 999px; border: 2px solid var(--tinta); font: 700 15px Inter, sans-serif; background: var(--papel); color: var(--tinta); cursor: pointer; }
.fichas button.on { background: var(--mango); }
.compra { background: var(--papel); border: 3px solid var(--tinta); border-radius: 22px; padding: 16px 16px 14px; margin: 14px 0 16px; box-shadow: 0 6px 0 var(--tinta); }
.compra .linea { margin: 0 0 14px; }
.compra .botones { margin: 0 0 10px; }
.ancla { font-weight: 700; font-size: 15px; color: var(--gris); }
.ancla s { text-decoration-thickness: 2px; }
.compra .rev { margin: -6px 0 14px; }
.rev.viejo { color: #9A4A00; }
.malo h2 span { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--gris); margin-left: 6px; }
.nopara { margin: 12px 0 0; font-size: 15.5px; }
.completo { margin: 10px 0 0; font-size: 13.5px; color: var(--gris); }
.acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.acciones .compartir, .guardar { margin: 0; font-size: 16.5px; padding: 13px 10px; }
.guardar { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; border-radius: 16px; background: var(--papel); color: var(--tinta); border: 3px solid var(--tinta); box-shadow: 0 5px 0 var(--tinta); cursor: pointer; }
.guardar[aria-pressed="true"] { background: var(--mango); }
.guardar:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--tinta); }
.como { margin: 14px 0 0; border: 2px dashed var(--tinta); border-radius: 16px; padding: 12px 14px; font-size: 15px; }
.como summary { cursor: pointer; font-weight: 700; }
.como ul { margin: 10px 0 0; padding-left: 20px; }
.como li + li { margin-top: 4px; }
/* barra fija de compra: aparece cuando el botón sale de la pantalla */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--crema); border-top: 3px solid var(--tinta); }
.barra-precio { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 26px; background: var(--mango); padding: 0 10px 3px; transform: rotate(-2deg); }
.barra .boton { flex: 1; font-size: 19px; padding: 12px 10px; box-shadow: 0 4px 0 var(--tinta); }
body.con-barra .pie-in { padding-bottom: 120px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 4px solid var(--mango); outline-offset: 2px; }

/* ── Confianza: dónde se compra, quién responde y qué NO pasa en este sitio ── */
.boton .ico { width: 20px; height: 20px; }
.boton.chico { display: inline-flex; font-size: 17px; padding: 11px 18px; box-shadow: 0 4px 0 var(--tinta); margin-top: 8px; }
.destino { margin: 0 0 14px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--gris); }
.destino b { color: var(--tinta); }
.seguro { list-style: none; margin: 0; padding: 14px 0 0; border-top: 2px solid var(--linea); display: grid; gap: 8px; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.seguro li { display: flex; gap: 9px; align-items: flex-start; }
.seguro .ico { width: 18px; height: 18px; color: #0B8A4B; margin-top: 1px; }
.pasos { margin: 34px 0 0; background: var(--papel); border: 3px solid var(--tinta); border-radius: 22px; padding: 18px 18px 16px; }
.pasos .sec { margin: 0 0 14px; }
.pasos ol { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 720px) { .pasos ol { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.pasos li { counter-increment: paso; position: relative; padding-left: 46px; font-size: 15.5px; line-height: 1.4; min-height: 34px; }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--indigo); color: var(--crema); display: grid; place-items: center; font: 800 18px 'Bricolage Grotesque', sans-serif; }
.pasos li b { display: block; }
.pasos .pasos-nota { margin: 16px 0 0; padding-top: 12px; border-top: 2px solid var(--linea); font-size: 14px; font-weight: 600; color: var(--gris); }
.texto { max-width: 680px; padding-top: 26px; }
.texto h1 { font-size: clamp(32px, 8vw, 46px); line-height: 1.05; margin: 0 0 12px; }
.texto h2 { font-size: 22px; margin: 30px 0 6px; }
.texto p, .texto ul { margin: 0 0 10px; }
.texto ul { padding-left: 22px; }
.texto li + li { margin-top: 4px; }
.texto a:not(.boton) { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.entrada { font-size: 19px; line-height: 1.4; }
.texto .pasos { margin: 22px 0 6px; }
.texto .pasos .sec { font-size: 22px; }