/* ═══════════════════════════════════════════════════════════════════════════════════════════ css/style_primer.css — «Mi primer…»: listado recomendado para empezar Doc: docs/proyectos/PROYECTO_MI_PRIMER_2026-09-14.md · Página: primer.php Se enlaza en el con ?v=filemtime, fuera del compilado de megaMetatags (como style_mejores.css). Móvil primero, según el boceto docs/primer.jpg. Rosa para acciones; verde para el nivel. ═══════════════════════════════════════════════════════════════════════════════════════════ */ .pr{ --pr-rosa:#f04d98; --pr-rosa-oscuro:#d63a82; --pr-rosa-suave:#fdeef5; --pr-verde:#2fa596; --pr-verde-suave:#e3f6f3; --pr-lila:#efe7fb; --pr-tinta:#1f2230; --pr-texto:#3b3f4e; --pr-gris:#6b7080; --pr-linea:#e7e8ef; --pr-fondo:#f7f8fc; --pr-radio:14px; color:var(--pr-texto); font-size:15px; line-height:1.5; overflow-x:clip; } .pr *{box-sizing:border-box} .pr p{margin:0 0 .6rem} .pr a{color:var(--pr-rosa-oscuro)} .pr-gris{color:var(--pr-gris)} .pr-oculto{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} .pr-previa{background:var(--pr-tinta); color:#fff; text-align:center; font-size:.8rem; padding:.45rem 1rem} .pr #category-breadcrumb{margin:.4rem 0 0} /* ⚠️ style.css fija h1-h5 con !important: sin !important aquí no hay jerarquía */ .pr h1{font-size:2.1rem !important; line-height:1.05; color:var(--pr-tinta); font-weight:800; margin:0 0 .5rem; text-transform:none; letter-spacing:-.02em} .pr h1 span{color:var(--pr-rosa); display:block} .pr-h2{font-size:1.25rem; font-weight:700; color:var(--pr-tinta); margin:0 0 .3rem !important} .pr-sub{color:var(--pr-gris); font-size:.9rem} /* ── Botones ── */ .pr-boton{display:inline-flex; align-items:center; justify-content:center; gap:.4rem; background:var(--pr-rosa); color:#fff !important; font-weight:700; font-size:.85rem; letter-spacing:.02em; text-decoration:none !important; border:2px solid var(--pr-rosa); border-radius:10px; padding:.7rem 1.2rem; cursor:pointer; text-align:center} .pr-boton:hover{background:var(--pr-rosa-oscuro); border-color:var(--pr-rosa-oscuro)} .pr-boton-borde{background:#fff; color:var(--pr-tinta) !important; border-color:var(--pr-tinta)} .pr-boton-borde:hover{background:var(--pr-tinta); color:#fff !important; border-color:var(--pr-tinta)} /* ── Hero ── */ .pr-hero{background:linear-gradient(135deg, var(--pr-rosa-suave), #fff 70%); margin:.6rem 0 0; padding:1.4rem 0 0} .pr-hero-rejilla{display:grid; grid-template-columns:1fr; gap:.5rem; align-items:center} .pr-antetitulo{text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; font-weight:700; color:var(--pr-tinta); margin:0 0 .3rem !important} .pr-eslogan{font-size:1.2rem; color:var(--pr-tinta); margin:0 0 .6rem !important} .pr-entradilla{max-width:36rem} .pr-lema{font-weight:700; color:var(--pr-tinta); border-left:3px solid var(--pr-rosa); padding-left:.6rem; max-width:36rem} .pr-hero-foto{text-align:center} .pr-hero-foto img{width:min(260px, 70vw); height:auto; border-radius:50%; mix-blend-mode:multiply} /* Imagen principal (PNG transparente): sin recorte redondo ni mezcla, se ve entera */ .pr-hero-imagen img{border-radius:0; mix-blend-mode:normal; object-fit:contain} /* ── Sellos ── */ .pr-sellos{list-style:none; margin:1rem 0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem; text-align:center; font-size:.78rem; color:var(--pr-tinta)} .pr-sellos li{display:flex; flex-direction:column; align-items:center; gap:.3rem} .pr-sello-ico{display:inline-flex; align-items:center; justify-content:center; width:2.2rem; height:2.2rem; border-radius:50%; border:2px solid var(--pr-rosa); color:var(--pr-rosa); font-weight:800} /* ── Ayúdame a elegir / orientación ── */ .pr-ayuda, .pr-orientacion{display:flex; flex-direction:column; gap:.6rem; background:var(--pr-lila); border-radius:var(--pr-radio); padding:1.1rem; margin:0 0 1.4rem} .pr-orientacion{background:var(--pr-rosa-suave)} .pr-ayuda-titulo, .pr-orientacion-titulo, .pr-nivel-titulo{font-weight:800; font-size:1.15rem; color:var(--pr-tinta); margin:0 0 .2rem !important} .pr-orientacion-titulo{color:var(--pr-rosa-oscuro)} .pr-ayuda .pr-boton, .pr-orientacion .pr-boton{align-self:flex-start} /* ── Filtros ── */ .pr-filtros{margin:0 0 1rem} /* Móvil: una sola línea con scroll horizontal (dueño, 2026-09-16); desde 768 px vuelven a partirse en líneas */ .pr-chips{display:flex; flex-wrap:nowrap; gap:.45rem; margin:.4rem -15px .9rem; padding:0 15px .15rem; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x proximity} .pr-chips::-webkit-scrollbar{display:none} .pr-chip{flex:0 0 auto; white-space:nowrap; scroll-snap-align:start; background:#fff; border:1px solid var(--pr-linea); color:var(--pr-tinta); border-radius:999px; padding:.45rem .9rem; font-size:.85rem; cursor:pointer} .pr-chip[aria-pressed="true"]{background:var(--pr-rosa); border-color:var(--pr-rosa); color:#fff} .pr-barra{display:flex; justify-content:space-between; align-items:center; gap:.6rem; border-top:1px solid var(--pr-linea); padding-top:.7rem} .pr-orden select{border:1px solid var(--pr-linea); border-radius:8px; padding:.4rem .6rem; background:#fff; color:var(--pr-tinta); font-size:.85rem; max-width:55vw} /* ── Tarjeta ── */ .pr-lista{display:grid; grid-template-columns:1fr; gap:1rem; margin:0 0 1.6rem} .pr-tarjeta{background:#fff; border:1px solid var(--pr-linea); border-radius:var(--pr-radio); overflow:hidden} .pr-tarjeta[hidden]{display:none} .pr-tarjeta-cuerpo{display:grid; grid-template-columns:42% 1fr; gap:.8rem; padding:.9rem} .pr-tarjeta-foto{display:block} .pr-tarjeta-foto img{width:100%; height:auto; display:block} .pr-tarjeta-datos{display:flex; flex-direction:column; gap:.35rem; min-width:0} .pr-insignias{display:flex; flex-wrap:wrap; gap:.3rem} .pr-ins{font-size:.7rem; font-weight:600; border-radius:6px; padding:.15rem .45rem; line-height:1.3; white-space:nowrap} .pr-ins-nivel{background:var(--pr-verde-suave); color:var(--pr-verde)} /* Segmento del panel PrimerScore: un color por segmento (CPrimer::etiqueta_segmento) */ .pr-seg-0{background:#fde3ef; color:#b8266b} .pr-seg-1{background:#ede4fb; color:#6a3fb5} .pr-seg-2{background:#e2f0fb; color:#1f6fa8} .pr-seg-3{background:#e6f5ea; color:#2e7d4a} .pr-seg-4{background:#fff1dc; color:#a3610b} .pr-seg-5{background:#e0f5f3; color:#1d7f74} .pr-seg-6{background:#fbe9e3; color:#b2462a} .pr-seg-7{background:#eceef4; color:#454b5e} .pr-ins-top{background:var(--pr-rosa); color:#fff} .pr-ins-novedad{background:var(--pr-lila); color:#7a4fc2} .pr .pr-nombre{font-size:1rem !important; line-height:1.25; margin:.1rem 0 0; font-weight:700; text-transform:none} .pr-nombre a{color:var(--pr-tinta); text-decoration:none} .pr-estrellas{font-size:.8rem; display:flex; align-items:center; gap:.3rem} .pr-estrellas-fondo{position:relative; display:inline-block; color:#dcdde5; letter-spacing:1px; line-height:1} .pr-estrellas-fondo span{position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; color:var(--pr-amarillo, #ffb71b)} .pr-lleno{color:#ffb71b} .pr-precio s{color:var(--pr-gris); font-size:.85rem; margin-right:.3rem} .pr-precio b{font-size:1.45rem; color:var(--pr-tinta); font-weight:800} .pr-precio small{font-size:.9rem} .pr-boton-ver{margin-top:auto; padding:.55rem .8rem} .pr-porque{background:var(--pr-fondo); border-top:1px solid var(--pr-linea); padding:.8rem .9rem .9rem} .pr-porque-titulo{font-weight:700; color:var(--pr-tinta); margin:0 0 .25rem !important; font-size:.92rem} .pr-porque-titulo::before{content:"♡"; color:var(--pr-rosa); margin-right:.4rem} .pr-porque p{font-size:.88rem; color:var(--pr-texto)} .pr-porque ul{list-style:none; margin:0; padding:0; display:grid; gap:.25rem} .pr-porque li{font-size:.88rem; color:var(--pr-tinta); padding-left:1.5rem; position:relative} .pr-porque li::before{content:"✓"; position:absolute; left:0; top:0; width:1.1rem; height:1.1rem; border-radius:50%; border:1.5px solid var(--pr-verde); color:var(--pr-verde); font-size:.7rem; line-height:1rem; text-align:center; font-weight:700} .pr-vacio{background:var(--pr-fondo); border-radius:var(--pr-radio); padding:1rem; text-align:center; grid-column:1 / -1} /* ── Ver más, nivel, dudas ── */ .pr-mas{background:var(--pr-rosa-suave); border-radius:var(--pr-radio); padding:1.2rem; text-align:center; margin:0 0 1.4rem} .pr-mas .pr-h2{color:var(--pr-rosa-oscuro)} .pr-nivel{background:var(--pr-verde-suave); border-radius:var(--pr-radio); padding:1.1rem; margin:0 0 1.4rem} .pr-nivel a{font-weight:600} .pr-dudas{margin:0 0 1.4rem} .pr-faqs{display:grid; gap:.45rem; margin:.5rem 0 0} .pr-faq{border:1px solid var(--pr-linea); border-radius:10px; background:#fff} .pr-faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.75rem .9rem; font-weight:700; color:var(--pr-tinta)} .pr-faq summary::-webkit-details-marker{display:none} .pr-faq summary::after{content:"+"; font-size:1.3rem; line-height:1; color:var(--pr-rosa)} .pr-faq[open] summary::after{content:"−"} .pr-faq p{margin:0 !important; padding:0 .9rem .85rem; color:var(--pr-texto); line-height:1.5} /* ── Confianza y consejos ── */ .pr-confianza{margin:0 0 1.4rem} .pr-confianza-fila{display:flex; flex-direction:column; gap:.9rem; margin-top:.6rem} .pr-trusted{display:flex; align-items:center; gap:.7rem; color:var(--pr-tinta) !important; text-decoration:none} .pr-trusted img{width:120px; height:auto} .pr-prensa{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem} .pr-prensa .pr-gris{flex-basis:100%; font-size:.8rem} .pr-prensa img{height:28px; width:auto; filter:grayscale(1); opacity:.8} .pr-consejos{margin:0 0 2rem} .pr-consejos-fila{display:grid; grid-auto-flow:column; grid-auto-columns:72%; gap:.8rem; overflow-x:auto; padding:.5rem 0 .3rem; scroll-snap-type:x mandatory} .pr-consejo{scroll-snap-align:start; display:block; border:1px solid var(--pr-linea); border-radius:var(--pr-radio); overflow:hidden; color:var(--pr-tinta) !important; text-decoration:none; background:#fff} .pr-consejo img{width:100%; height:auto; display:block} .pr-consejo span{display:block; padding:.6rem .7rem; font-weight:600; font-size:.88rem} /* ── Tablet y escritorio ── */ @media (min-width:768px){ .pr-chips{flex-wrap:wrap; overflow-x:visible; margin-left:0; margin-right:0; padding:0} .pr h1{font-size:2.8rem !important} .pr-hero-rejilla{grid-template-columns:1.3fr 1fr} .pr-hero-foto img{width:340px} .pr-sellos{font-size:.88rem; max-width:720px; margin-left:auto; margin-right:auto} .pr-ayuda, .pr-orientacion{flex-direction:row; align-items:center; justify-content:space-between; padding:1.3rem 1.6rem} .pr-ayuda .pr-boton, .pr-orientacion .pr-boton{align-self:center; flex:none} .pr-lista{grid-template-columns:repeat(2, 1fr)} .pr-confianza-fila{flex-direction:row; justify-content:space-between; align-items:center} .pr-prensa .pr-gris{flex-basis:auto} .pr-consejos-fila{grid-auto-flow:row; grid-template-columns:repeat(3, 1fr); overflow:visible} } @media (min-width:1200px){ .pr-lista{grid-template-columns:repeat(3, 1fr)} }