/* Ficha de venta por producto — molde aprobado (Web-Alma-PHN/producto/colageno.html).
   Lo escribe automatizacion/genera-ficha-producto.py: no se edita a mano. */
:root{--verde:#70B62F;--verde-osc:#5a9424;--tinta:#2b2b2b;--gris:#6b6b6b;--linea:#e6e6e6;--tinte:#f4faec;--wa:#1f9d55}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Quicksand',system-ui,sans-serif;background:#eef1ec;color:var(--tinta);display:flex;justify-content:center;padding:24px 12px;-webkit-font-smoothing:antialiased}
@media (max-width:520px){body{padding:0;background:#fff}}
.marco{width:100%;max-width:480px;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.12)}
@media (max-width:520px){.marco{border-radius:0;box-shadow:none}}
img{display:block;width:100%;height:auto}
a{color:var(--verde-osc)}
.anuncio{background:var(--verde);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;text-align:center;padding:9px 12px;text-transform:uppercase}
.header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-bottom:1px solid var(--linea)}
.header img{width:112px;height:auto}
.header a{color:var(--tinta);display:flex;align-items:center;text-decoration:none}
.header svg{width:22px;height:22px}
.migas{display:flex;flex-wrap:wrap;gap:6px;padding:10px 18px 0;font-size:12px;color:var(--gris)}
.migas a{color:var(--gris);text-decoration:none}
.galeria .principal{padding:6px 0}
.minis{display:flex;gap:8px;padding:0 16px 14px;overflow-x:auto}
.minis img{width:62px;height:62px;object-fit:cover;flex:0 0 auto;border:1.5px solid var(--linea);border-radius:8px;padding:3px;background:#fff;cursor:pointer}
.minis img.activa{border-color:var(--verde)}
.compra{display:block;padding:0 18px 20px}
.urgencia{display:flex;align-items:flex-start;gap:7px;color:var(--verde-osc);font-size:13.5px;font-weight:600;margin-bottom:8px;line-height:1.45}
.urgencia svg{width:16px;height:16px;flex:0 0 16px}
h1{font-size:23px;line-height:1.25;font-weight:700;margin-bottom:6px}
.marca-linea{font-size:13px;color:var(--gris);margin-bottom:12px}
.precio{display:flex;align-items:baseline;gap:7px;margin-bottom:4px}
.precio .ahora{font-size:28px;font-weight:700}
.precio .moneda{font-size:13px;font-weight:600;color:var(--gris)}
.precio-nota{font-size:12.5px;color:var(--gris);margin-bottom:15px}
.puntos{list-style:none;display:grid;gap:8px;margin-bottom:17px}
.puntos li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;font-weight:500;line-height:1.45}
.puntos svg{width:17px;height:17px;flex:0 0 17px;margin-top:2px;color:var(--verde)}
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:0;cursor:pointer;background:var(--verde);color:#fff;font-family:inherit;font-size:16.5px;font-weight:700;padding:16px;border-radius:10px;box-shadow:0 6px 16px rgba(112,182,47,.32);text-decoration:none}
.btn svg{width:20px;height:20px}
.btn:active{transform:translateY(1px)}
.btn-wa{margin-top:10px;background:#fff;color:var(--wa);border:2px solid var(--wa);box-shadow:none}
.btn-nota{text-align:center;font-size:12px;color:var(--gris);margin:9px 0 6px}
details.fila{border-bottom:1px solid var(--linea)}
details.fila summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;padding:14px 0;font-size:14.5px;font-weight:600}
details.fila summary::-webkit-details-marker{display:none}
details.fila .ic{width:19px;height:19px;flex:0 0 19px;color:var(--verde)}
details.fila .flecha{margin-left:auto;flex:0 0 8px;width:8px;height:8px;border-right:2px solid var(--gris);border-bottom:2px solid var(--gris);transform:rotate(45deg) translateY(-25%);transition:transform .15s}
details.fila[open] .flecha{transform:rotate(-135deg) translateY(-25%)}
details.fila .cuerpo{padding:0 0 14px;font-size:13.5px;line-height:1.6;color:#444}
.compra details.fila .cuerpo{padding-left:30px}
.ticker{background:var(--verde);color:#fff;overflow:hidden;padding:11px 0}
.ticker .pista{display:flex;width:max-content;animation:corre 26s linear infinite}
.ticker .pista>div{display:flex}
.ticker .item{display:inline-flex;align-items:center;gap:14px;padding:0 18px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.ticker .punto{width:5px;height:5px;border-radius:50%;background:#fff;opacity:.6}
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker .pista{animation:none}}
.pas{padding:26px 18px 6px}
.pas h2{display:flex;align-items:center;gap:9px;font-size:19px;line-height:1.3;margin-bottom:8px}
.pas .ic-tit{width:22px;height:22px;flex:0 0 22px;color:var(--verde)}
.pas p{font-size:15px;line-height:1.62;color:#3d3d3d;margin-bottom:14px}
.pas .foto-bloque{border-radius:12px;border:1px solid #e3efd3;background:var(--tinte);margin-bottom:8px}
.ficha,.faq{padding:26px 18px}
.ficha h2,.faq h2{font-size:19px;margin-bottom:4px}
.ficha .sub{font-size:13px;color:var(--gris);margin-bottom:12px}
.faq h2{margin-bottom:8px}
.beneficios{list-style:none;display:grid;gap:9px;margin-bottom:20px}
.beneficios li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5}
.beneficios svg{width:17px;height:17px;flex:0 0 17px;margin-top:2px;color:var(--verde)}
.comparativa{padding:26px 18px;background:var(--tinte)}
.comparativa h2{font-size:19px;text-align:center;margin-bottom:16px}
.comparativa table{width:100%;border-collapse:collapse;table-layout:fixed}
.comparativa th,.comparativa td{padding:11px 5px;text-align:center;font-size:12.5px;border-bottom:1px solid #dfe9d2}
.comparativa th:first-child,.comparativa td:first-child{text-align:left;width:52%;font-weight:600}
.comparativa thead th{font-size:13px;border-bottom:2px solid #cfe0bb}
.comparativa .yo{color:var(--verde-osc);font-weight:700}
.comparativa svg{width:19px;height:19px;margin:0 auto}
.comparativa .si{color:var(--verde)}
.comparativa .no{color:#c2c2c2}
.comparativa .nota{font-size:11px;color:var(--gris);text-align:center;margin-top:13px;line-height:1.5}
.relacionados{padding:26px 18px}
.relacionados h2{font-size:19px;margin-bottom:14px}
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rejilla a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--tinta);border:1px solid var(--linea);border-radius:12px;padding:10px}
.rejilla img{border-radius:8px;aspect-ratio:1;object-fit:cover}
.r-nombre{font-size:13.5px;font-weight:600;line-height:1.3}
.r-precio{font-size:13px;color:var(--verde-osc);font-weight:700}
.te-atiende{padding:22px 18px;border-top:1px solid var(--linea)}
.te-atiende h2{font-size:17px;margin-bottom:6px}
.te-atiende p{font-size:14px;line-height:1.55;color:#444;margin-bottom:6px}
.promo{display:flex;gap:12px;align-items:center;background:var(--tinte);border:1px solid #dcebc8;border-radius:12px;padding:10px;margin-bottom:14px}
.promo-fotos{position:relative;display:flex;align-items:center;flex:0 0 120px}
.promo-fotos img{width:52px;height:52px;object-fit:contain;background:#fff;border-radius:8px}
.promo-fotos .mas{font-weight:700;color:var(--verde-osc);padding:0 4px}
.promo-fotos .sello{position:absolute;right:-4px;top:-8px;background:var(--verde);color:#fff;font-size:10px;font-weight:700;border-radius:20px;padding:2px 7px;text-transform:uppercase}
.promo-texto strong{display:block;font-size:14px}
.promo-texto small{display:block;font-size:11.5px;color:var(--gris);line-height:1.4;margin-top:3px}
.franja{background:var(--verde);color:#fff;text-align:center;padding:15px;font-size:14px;font-weight:700;font-style:italic}
.legal{display:block;padding:20px 18px 26px;background:#f7f7f5;font-size:11.5px;line-height:1.6;color:var(--gris);text-align:center}