/* ------------------------------------------------------------------------- LA TIPOGRAFÍA SE SIRVE DESDE AQUÍ, NO DESDE GOOGLE. Antes eran tres etiquetas apuntando a fonts.googleapis.com y fonts.gstatic.com. No ponían ninguna cookie —así que no necesitaban consentimiento—, pero sí le daban a Google la IP de cada visitante, y eran el ÚNICO tercero que quedaba en toda la web. Alojarla nosotros cierra ese hueco del todo: ya no hay nadie más mirando, que es lo que la política de privacidad dice, y ahora es cierto sin matices. MANROPE ES UNA FUENTE VARIABLE, y por eso esto son DOS ficheros y no diez. Google servía la MISMA URL para 400, 600, 700 y 800 —comprobado en su CSS— porque el navegador saca todos los pesos de un único fichero con eje wght. Lo que cambia por peso es el subconjunto de caracteres, no el fichero. SOLO LATIN Y LATIN-EXT. Google servía además cirílico, griego y vietnamita: 40 KB de los que la web no pinta ni un carácter. EL EJE LLEGA A 800 Y NO A 900, medido con fontTools sobre el fichero descargado (wght 200-800). Le pedíamos un 900 que no existe desde el primer día. Se declara el rango de verdad para que el navegador recorte a 800 en vez de inventarse una negrita sintética. Y EL «v20» DEL NOMBRE NO ES ADORNO: es la versión de la fuente en Google. Los ficheros de /assets/ se sirven con «immutable» un año, o sea que el navegador NI SIQUIERA PREGUNTA si han cambiado — la misma trampa que se comió el CSS viejo y que arriba se resuelve con el hash. Aquí no hay hash, así que la versión hace de él: cambiar de fuente obliga a cambiar el nombre. ------------------------------------------------------------------------- */ @font-face{ font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap; src:url(/assets/fuentes/manrope-v20-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215, U+FEFF,U+FFFD; } @font-face{ font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap; src:url(/assets/fuentes/manrope-v20-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB, U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ --bg:#FEF8FB; --bg-top:#FCEBF3; --surface:#FFF; --text:#17203A; --muted:#6B7385; --faint:#9AA0AF; --border:#F0E4EC; --rosa:#E83E9B; --magenta:#C94ED0; --violeta:#9A4DE8; --verde:#16A34A; --rojo:#DC2626; --ambar:#B45309; --font:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.6;overflow-x:hidden} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto;display:block} /* ANCHO: 1240 px de contenido y el TEXTO a ~75 caracteres por línea. A 1040 la web se veía estrecha en un portátil de 1440 y en un monitor de 1920; más de 1300 deja las rejillas de tarjetas demasiado sueltas. Los párrafos no siguen al contenedor: una línea de 1200 px no se lee. */ .wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,32px)} main p{max-width:75ch} .cab{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--border); position:sticky;top:0;z-index:10} .cab-fila{display:flex;align-items:center;gap:14px;height:70px} .logo{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:800;letter-spacing:-.02em;margin-right:auto} .logo img{display:block;height:36px;width:auto} .logo b{color:var(--rosa)} .cab-nav{display:flex;align-items:center;gap:26px;font-weight:700;font-size:15px;color:#3A4257} .cab-nav a{position:relative} .cab-nav a:hover{color:var(--rosa)} .idioma{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:3px 11px;font-size:13px} .cab-app{display:inline-flex;align-items:center;background:linear-gradient(120deg,var(--rosa),var(--magenta)); color:#FFF;font-weight:800;font-size:14px;border-radius:999px;padding:10px 20px;margin-left:10px; box-shadow:0 6px 18px rgba(232,62,155,.28);white-space:nowrap} .cab-app:hover{box-shadow:0 8px 22px rgba(232,62,155,.38)} .cab-app .corto{display:none} /* EN ESCRITORIO HAY QUE ABRIR EL details A MANO, Y ESTO ES EL BUG QUE COSTÓ LA CABECERA ENTERA. Aquí ponía que en escritorio el details "no pinta nada" y que bastaba con esconder el summary. Es falso: un details CERRADO oculta su contenido, y quitarle el summary de en medio no lo abre — solo deja el menú escondido y sin nada que lo despliegue. O sea que en escritorio la cabecera salía con el logo y ningún enlace: ni Buscar, ni Marcas, ni Ingredientes, ni el cambio de idioma. En móvil funcionaba, que es justo lo que hizo que pasara inadvertido. Y hacen falta las DOS reglas de abajo porque los navegadores esconden ese contenido de dos maneras distintas: los de siempre con un display:none sobre las hijas que no son el summary, y los recientes con content-visibility sobre el pseudoelemento ::details-content. Con una sola, la mitad del parque se queda igual que estaba. */ .cab-menu{position:relative} .cab-menu>summary{list-style:none;cursor:pointer} .cab-menu>summary::-webkit-details-marker{display:none} /* Y VA EN SU PROPIA CONSULTA DE MEDIOS, no suelto. Suelto forzaría el menú abierto también en móvil, que es donde el details SÍ tiene que abrir y cerrar: se cambiaría un menú invisible en escritorio por uno permanentemente desplegado en el móvil. Debajo de 720 px no se toca nada y manda el navegador. */ @media (min-width:721px){ .cab-menu>summary{display:none} .cab-menu>.cab-nav{display:flex} .cab-menu::details-content{content-visibility:visible;block-size:auto} } @media (max-width:720px){ .cab-menu>summary{ display:grid;place-items:center;width:42px;height:42px;border-radius:13px; border:1px solid var(--border);background:var(--surface) } /* Las tres rayas, dibujadas con el borde del span y sus dos pseudos. */ .cab-menu>summary>span, .cab-menu>summary>span::before, .cab-menu>summary>span::after{ content:"";display:block;width:18px;height:2px;border-radius:2px;background:var(--text) } .cab-menu>summary>span{position:relative} .cab-menu>summary>span::before{position:absolute;top:-6px} .cab-menu>summary>span::after{position:absolute;top:6px} .cab-menu[open]>summary{border-color:var(--rosa)} .cab-fila{height:62px;gap:10px} .logo img{height:32px} .cab-app{padding:9px 16px;margin-left:0} .cab-app .largo{display:none} .cab-app .corto{display:inline} .cab-menu .cab-nav{ position:absolute;right:0;top:52px;flex-direction:column;align-items:flex-end;gap:14px; background:var(--surface);border:1px solid var(--border);border-radius:16px; padding:16px 20px;min-width:190px;box-shadow:0 12px 32px rgba(23,32,58,.12);z-index:20 } } /* EL HUECO DEL ANUNCIO SE RESERVA AUNQUE NO HAYA ANUNCIO. Sin una altura minima, el bloque aparece al cargar y empuja hacia abajo lo que el usuario ya estaba leyendo — un salto de contenido molesta mas que el propio anuncio, y Google lo penaliza como CLS. */ .anuncio{display:block;min-height:120px;margin:28px 0} /* El aviso de formato sin confirmar. Ambar y no rojo: no es un error nuestro ni un peligro, es un dato que la tienda no manda y que el usuario tiene que comprobar antes de pagar. */ .aviso-formato{ background:#FFF8E6;border:1px solid #F2DFA8;border-radius:12px; padding:12px 14px;font-size:14px;color:#6B5A20;margin:0 0 18px } .migas{font-size:13px;color:var(--muted);padding:18px 0 4px;display:flex;flex-wrap:wrap;gap:7px;align-items:center} .migas a:hover{color:var(--rosa);text-decoration:underline} .migas i{color:var(--faint);font-style:normal} h1{font-size:34px;line-height:1.18;font-weight:800;letter-spacing:-.025em;margin:14px 0 6px} h2{font-size:23px;font-weight:800;letter-spacing:-.02em;margin:38px 0 12px} h3{font-size:17px;font-weight:800;margin:0 0 6px} p{margin:0 0 14px} .sub{color:var(--muted);font-size:17px;margin:0 0 22px} .marca-linea{color:var(--rosa);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.06em;margin:0} .marca-linea a:hover{text-decoration:underline} .tarjeta{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px;margin:0 0 16px} .aviso{background:#FFF7ED;border:1px solid #FED7AA;border-radius:14px;padding:14px 16px;font-size:14px;color:#7C2D12} .rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:0 0 20px} .prod{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;display:block;transition:transform .12s ease,box-shadow .12s ease} /* El hueco de la foto se reserva SIEMPRE, haya imagen o no: si la altura la pusiera la imagen al llegar, la rejilla daría un salto por cada una que carga y el usuario acabaría pulsando lo que no quería. */ .prod .foto{position:relative;height:132px;display:grid;place-items:center;margin:-4px 0 10px} /* max-width ADEMAS de max-height: con solo el alto, una foto apaisada —Erborian Centella Cleansing Oil, por ejemplo— se salia de su tarjeta y rompia la rejilla. Nada de comillas invertidas aqui dentro: esto vive en una plantilla de JS y una sola cierra la cadena. */ .prod .foto img{max-height:132px;max-width:100%;width:auto;object-fit:contain;mix-blend-mode:multiply} /* La inicial de la marca cuando no hay foto. Discreta a propósito: sustituye a una imagen, no compite con el nombre del producto que va justo debajo. */ .prod .sinfoto{ display:grid;place-items:center;width:76px;height:76px;border-radius:50%; background:var(--bg);color:var(--faint);font-size:30px;font-weight:800;letter-spacing:-.02em } .dto{background:var(--verde);color:#FFF;font-weight:800;font-size:12px;border-radius:999px;padding:2px 8px} .prod .dto{position:absolute;top:0;right:0} .prod .dato s{color:var(--faint);font-weight:600;font-size:13px} .ficha-foto{display:grid;place-items:center;margin:14px 0 4px} @media (min-width:900px){ .ficha{display:grid;grid-template-columns:minmax(280px,400px) 1fr;gap:48px;align-items:start;margin-top:10px} .ficha.sin-foto{grid-template-columns:1fr} .ficha-foto{position:sticky;top:90px;margin:0;background:var(--surface);border:1px solid var(--border); border-radius:22px;padding:24px} .ficha-foto img{max-height:360px} .ficha-datos h1{margin-top:6px} } .ficha-foto img{max-height:260px;max-width:100%;width:auto;object-fit:contain} table.ofertas s{color:var(--faint);font-weight:600;font-size:14px} .prod:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(232,62,155,.10)} .prod .cat{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--violeta)} .prod .marca{font-size:13px;color:var(--muted);font-weight:700;margin-top:6px} .prod .nombre{font-size:15px;font-weight:800;line-height:1.3;margin:2px 0 8px} .prod .dato{font-size:13px;color:var(--faint)} .prod .precio{font-size:18px;font-weight:800;color:var(--verde)} .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px} .chip{border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700;border:1px solid var(--border);background:var(--surface)} .chip.prohibido{border-color:#FCA5A5;background:#FEF2F2;color:var(--rojo)} .chip.limitado{border-color:#FDE68A;background:#FFFBEB;color:var(--ambar)} .chip.alergeno{border-color:#FBCFE8;background:#FDF2F8;color:#BE185D} .chip.nano{border-color:#C7D2FE;background:#EEF2FF;color:#4338CA} .chip.libre{color:var(--muted)} .chip:hover{border-color:var(--rosa)} .leyenda{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted);margin:0 0 18px} .punto{display:inline-block;width:9px;height:9px;border-radius:99px;margin-right:6px;vertical-align:middle} .punto.prohibido{background:var(--rojo)} .punto.limitado{background:#F59E0B} .punto.alergeno{background:#EC4899} .punto.nano{background:#6366F1} .punto.libre{background:#CBD5E1} table.ofertas{width:100%;border-collapse:collapse;font-size:15px} table.ofertas th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);padding:0 10px 8px 0} table.ofertas td{padding:12px 10px 12px 0;border-top:1px solid var(--border)} table.ofertas .p{font-weight:800;font-size:17px} table.ofertas .boton{white-space:nowrap} @media (max-width:480px){table.ofertas .boton{padding:10px 15px;font-size:14px}} .boton{display:inline-block;background:linear-gradient(120deg,var(--rosa),var(--violeta));color:#FFF;font-weight:800;border-radius:999px;padding:11px 22px;font-size:15px} .boton:hover{opacity:.92} .boton.secundario{background:var(--surface);color:var(--text);border:1.5px solid var(--border)} p.amazon{margin:18px 0 4px} .buscador{display:flex;gap:10px;margin:8px 0 26px} .buscador input{flex:1;font-family:var(--font);font-size:16px;padding:14px 18px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text)} .buscador input:focus{outline:2px solid var(--rosa);outline-offset:1px} .cta{background:linear-gradient(120deg,var(--rosa),var(--violeta));color:#FFF;border-radius:22px;padding:28px;margin:40px 0 10px;text-align:center} .cta h2{color:#FFF;margin:0 0 6px} .cta p{opacity:.94;margin:0 auto 16px} .cta .boton{background:#FFF;color:var(--rosa)} /* OJO: la clase .pie es el pie de PAGINA. La linea de abajo de una tarjeta se llama .dato justo por esto: cuando se llamaba .pie heredaba de aqui el fondo rosa, el borde y 52 px de margen, y cada tarjeta salia con un ladrillo rosa dentro. Se veia raro y no habia nada roto — solo dos cosas distintas con el mismo nombre. */ .pie{border-top:1px solid var(--border);margin-top:64px;padding:44px 0 34px; background:linear-gradient(180deg,var(--bg-top),#F8E1EE)} .pie-arriba{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px;margin:0 0 30px} .pie-marca img{height:40px;width:auto} .pie-lema{font-style:italic;font-weight:800;font-size:20px;letter-spacing:-.01em;margin:6px 0 8px; background:linear-gradient(120deg,var(--rosa),var(--violeta));-webkit-background-clip:text; background-clip:text;color:transparent} .pie-desc{font-size:14px;color:var(--muted);max-width:330px;margin:0 0 16px} .pie-col{display:flex;flex-direction:column;gap:10px;font-size:14px;font-weight:700} .pie-col b{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin-bottom:2px} .pie-col a{color:#3A4257} .pie-col a:hover{color:var(--rosa)} .pie-aviso{font-size:13px;color:var(--muted);max-width:760px;margin:0 0 12px} .pie-legal{font-size:13px;color:var(--faint);margin:0} .pie-redes{display:flex;gap:10px} .pie-redes a{display:grid;place-items:center;width:38px;height:38px;border-radius:12px; background:var(--surface);border:1px solid var(--border);color:var(--rosa)} .pie-redes a:hover{border-color:var(--rosa)} .pie-redes svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round} .pie-redes svg .lleno{fill:currentColor;stroke:none} .pie-mercados{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:14px; margin:0 0 16px;padding:16px 0;border-top:1px solid #EFD3E3;border-bottom:1px solid #EFD3E3} .pie-mercados>span{color:var(--muted)} .pie-mercados b{font-weight:800} .pie-mercados a{font-weight:700;color:var(--muted);text-decoration:underline;text-underline-offset:3px} .pie-mercados a:hover{color:var(--rosa)} /* EL AVISO DE MERCADO VA ARRIBA DEL TODO Y NO ES PEGAJOSO. La cabecera sí lo es (position:sticky), así que una franja fija encima le robaría sitio a la pantalla en todas las páginas — que es exactamente lo que el §14 midió con el banner ANCHORED de la app. Esta se queda arriba y se va con el scroll. */ .sugerencia{display:flex;flex-wrap:wrap;justify-content:center;gap:10px; background:var(--text);color:#FFF;font-size:13px;padding:9px 22px;text-align:center} .sugerencia a{font-weight:800;text-decoration:underline;text-underline-offset:3px} /* --- Filtros del buscador ------------------------------------------------ Chips y no desplegables: un select nativo obliga a abrir, mirar y elegir — tres gestos para cambiar de «todas» a «perfumes»— y en escritorio se ve como un formulario de 2005. Los chips enseñan las opciones y el estado a la vez. Son