/* ═══════════════════════════════════════════════════════════════════════════════════════════ css/style_condones_talla.css — «¿Qué talla de preservativo necesito?» Doc: docs/proyectos/PROYECTO_LANDING_TALLAS_CONDONES_2026-09-25.md · Página: condones_talla.php Se enlaza en el con ?v=filemtime, fuera del compilado de megaMetatags (como style_primer.css). Móvil primero, según el boceto docs/condones/tallas_condones.png. Morado + fucsia sobre rosa claro. ⚠️ style.css fija h1-h5 con !important: sin !important aquí no hay jerarquía. ═══════════════════════════════════════════════════════════════════════════════════════════ */ .ct{ --ct-morado:#3a0ca3; --ct-morado-claro:#c7b3f5; --ct-lila:#efe7fb; --ct-lila-suave:#f6f1fe; --ct-rosa:#ec0868; --ct-rosa-oscuro:#c90458; --ct-rosa-suave:#fdf2f8; --ct-rosa-claro:#fbd9e9; --ct-tinta:#1f1440; --ct-texto:#3b3f4e; --ct-gris:#6b7080; --ct-linea:#ece7f6; --ct-radio:16px; color:var(--ct-texto); font-size:15px; line-height:1.5; background:var(--ct-rosa-suave); overflow-x:clip; } .ct *{box-sizing:border-box} .ct p{margin:0 0 .6rem} .ct a{color:var(--ct-rosa-oscuro)} .ct img{max-width:100%; height:auto} .ct-gris{color:var(--ct-gris)} .ct-oculto{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} .ct #category-breadcrumb{margin:.4rem 0 0} .ct h1{font-size:1.75rem !important; line-height:1.05; color:var(--ct-tinta); font-weight:800; margin:0 0 .5rem; text-transform:none; letter-spacing:-.02em} .ct h1 span{color:var(--ct-rosa); display:block} .ct h2{font-size:1.25rem !important; font-weight:700; color:var(--ct-tinta); margin:0 0 .3rem; text-transform:none} .ct h3{font-size:.95rem !important; font-weight:600; margin:0; text-transform:none} .ct-sub{color:var(--ct-gris); font-size:.9rem} .ct-antetitulo{text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; font-weight:700; color:var(--ct-rosa); margin:0 0 .3rem !important} /* ── Botones ── */ .ct-boton{display:inline-flex; align-items:center; justify-content:center; gap:.4rem; background:var(--ct-rosa); color:#fff !important; font-weight:700; font-size:.85rem; text-decoration:none !important; border:2px solid var(--ct-rosa); border-radius:999px; padding:.75rem 1.3rem; cursor:pointer; text-align:center; min-height:44px} .ct-boton:hover{background:var(--ct-rosa-oscuro); border-color:var(--ct-rosa-oscuro)} .ct-boton-grande{width:100%; font-size:1rem; padding:.9rem 1.2rem; margin:.2rem 0 .8rem} .ct-boton-ver{padding:.5rem .9rem; font-size:.8rem; min-height:38px} .ct :focus-visible{outline:3px solid var(--ct-morado); outline-offset:2px} /* ── Hero ── 🔑 Dos columnas YA en movil (texto | foto), que es como esta el boceto. Apiladas, el hero medía 536 px y dejaba la herramienta a 637 px del inicio: por debajo del pliegue en un movil normal, justo lo contrario de lo que pide el encargo («en móvil tiene que quedar visible rápidamente el comienzo de la herramienta»). Por debajo de 380 px sí se apila: ahí no caben dos. */ .ct-hero{padding:.8rem 0 .4rem} .ct-hero-rejilla{display:grid; grid-template-columns:1fr; gap:.4rem; align-items:center} .ct-hero-foto{text-align:center} .ct-hero-foto img{width:min(100%,200px); height:auto} .ct-entradilla{font-size:.92rem; color:var(--ct-texto)} @media (min-width:380px){ .ct-hero-rejilla{grid-template-columns:1.1fr .9fr; gap:.6rem} .ct-hero-foto img{width:min(100%,220px)} } /* ── La caja de la herramienta ── */ .ct-caja{background:#fff; border-radius:var(--ct-radio); padding:1rem; margin:0 0 1.2rem; box-shadow:0 2px 14px rgba(58,12,163,.07)} .ct-pestanas{display:grid; grid-template-columns:1fr 1fr; gap:.4rem; margin:0 0 1rem} .ct-pestana{display:flex; align-items:center; justify-content:center; gap:.4rem; background:var(--ct-lila-suave); color:var(--ct-tinta); border:0; border-radius:999px; padding:.7rem .6rem; font-size:.85rem; font-weight:600; cursor:pointer; min-height:44px} .ct-pestana.ct-on{background:var(--ct-rosa); color:#fff} .ct-fila-medida{display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; margin:0 0 .5rem} .ct-fila-medida label{font-weight:700; color:var(--ct-tinta); font-size:1rem; display:flex; align-items:center; gap:.35rem} .ct-fila-medida img{width:26px; height:auto; flex:none} .ct-cifra{margin-left:auto; font-size:1.6rem; font-weight:800; color:var(--ct-tinta); font-variant-numeric:tabular-nums} .ct-pildora{background:var(--ct-rosa-claro); color:var(--ct-rosa-oscuro); font-size:.75rem; font-weight:700; border-radius:999px; padding:.2rem .6rem; white-space:nowrap} /* Deslizador: se pinta a mano porque el de serie no permite el relleno de color en Firefox */ .ct-rango{-webkit-appearance:none; appearance:none; width:100%; height:10px; border-radius:999px; background:linear-gradient(90deg, var(--ct-rosa) 0 var(--ct-pct,50%), var(--ct-lila) var(--ct-pct,50%) 100%); margin:.2rem 0; cursor:pointer} .ct-rango::-webkit-slider-thumb{-webkit-appearance:none; width:28px; height:28px; border-radius:50%; background:#fff; border:5px solid var(--ct-morado); cursor:pointer} .ct-rango::-moz-range-thumb{width:28px; height:28px; border-radius:50%; background:#fff; border:5px solid var(--ct-morado); cursor:pointer} .ct-extremos{display:flex; justify-content:space-between; font-size:.78rem; color:var(--ct-gris)} .ct-ayuda{font-size:.8rem; color:var(--ct-gris); margin:.4rem 0 0} /* La calculadora del contorno */ .ct-calc{display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin:.6rem 0 0} .ct-calc label{font-weight:700; color:var(--ct-tinta); width:100%} .ct-calc input{flex:1 1 120px; min-width:110px; font-size:1.4rem; font-weight:700; text-align:center; color:var(--ct-tinta); border:2px solid var(--ct-lila); border-radius:12px; padding:.6rem .5rem; min-height:52px} .ct-calc input:focus{border-color:var(--ct-morado)} .ct-calc input[aria-invalid="true"]{border-color:var(--ct-rosa)} .ct-unidad{font-size:1.1rem; font-weight:700; color:var(--ct-gris)} .ct-calc .ct-boton{flex:1 1 100%} .ct-error{background:#fdecef; color:#b00033; border-radius:10px; padding:.55rem .7rem; font-size:.85rem; margin:.5rem 0 0} /* El resultado */ .ct-resultado{background:linear-gradient(135deg, var(--ct-rosa-suave), var(--ct-lila-suave)); border-radius:var(--ct-radio); padding:1rem; margin:1rem 0 .8rem; text-align:center} .ct-res-rotulo{text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; font-weight:700; color:var(--ct-rosa-oscuro); margin:0 0 .2rem} .ct-res-cifra{margin:0; line-height:1} .ct-res-cifra b{font-size:2.8rem; font-weight:800; color:var(--ct-tinta); font-variant-numeric:tabular-nums} .ct-res-cifra span{font-size:1.2rem; font-weight:700; color:var(--ct-tinta)} .ct-res-que{font-size:.85rem; font-weight:600; color:var(--ct-morado); margin:.3rem 0 .1rem} .ct-res-rango{font-size:.85rem; color:var(--ct-texto); margin:.2rem 0} .ct-res-nota{font-size:.78rem; color:var(--ct-gris); margin:.4rem 0 0} /* Afinar por largo */ .ct-afinar{border:1px solid var(--ct-linea); border-radius:var(--ct-radio); padding:.7rem .8rem; margin:0 0 .8rem} .ct-afinar summary{display:flex; align-items:center; gap:.45rem; font-weight:700; color:var(--ct-tinta); cursor:pointer; min-height:34px; list-style:none} .ct-afinar summary::-webkit-details-marker{display:none} .ct-afinar summary img{width:24px; height:auto; flex:none} .ct-check{display:flex; align-items:center; gap:.5rem; font-size:.85rem; margin:.6rem 0 0; cursor:pointer; min-height:34px} .ct-check input{width:20px; height:20px} /* Los tres pasos dentro de la pestaña «No sé medirme»: más pequeños que los de la sección de abajo, porque ahí son la referencia y aquí sólo acompañan al campo. */ .ct-pasos-calc{margin:1rem 0 0; border-top:1px solid var(--ct-linea); padding:.8rem 0 0} .ct-pasos-titulo{font-weight:700; color:var(--ct-tinta); font-size:.9rem; margin:0 0 .5rem} .ct-pasos-calc .ct-pasos{grid-template-columns:repeat(3,1fr); gap:.4rem} .ct-pasos-calc .ct-pasos li{padding:.5rem .35rem} .ct-pasos-calc .ct-pasos img{max-height:64px} .ct-pasos-calc .ct-pasos span{font-size:.72rem; line-height:1.25} .ct-sellos{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1rem; list-style:none; margin:0; padding:0; font-size:.78rem; color:var(--ct-gris)} .ct-sellos li{display:flex; align-items:center; gap:.3rem} .ct-sellos span{color:var(--ct-rosa)} /* ── Productos ── */ .ct-productos{margin:0 0 1.5rem} .ct-prod-cabecera{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.3rem; margin:0 0 .7rem} .ct-prod-n{font-size:.82rem; color:var(--ct-gris); margin:0} .ct-rejilla{display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem} .ct-tarjeta{background:#fff; border-radius:var(--ct-radio); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 1px 8px rgba(58,12,163,.06)} .ct-tarjeta[hidden]{display:none} .ct-tarjeta-foto{display:block; position:relative; background:#fff; text-align:center} .ct-tarjeta-foto img{width:100%; height:auto; aspect-ratio:240/288; object-fit:contain} .ct-tarjeta-datos{padding:.6rem .7rem .7rem; display:flex; flex-direction:column; gap:.25rem; flex:1} .ct-ins{display:inline-block; align-self:flex-start; background:var(--ct-lila); color:var(--ct-morado); font-size:.7rem; font-weight:600; border-radius:999px; padding:.18rem .55rem} .ct-ins b{font-weight:800} .ct-nombre a{color:var(--ct-tinta); text-decoration:none; font-size:.88rem; line-height:1.25; display:block} .ct-largo{font-size:.78rem; color:var(--ct-gris)} .ct-precio{margin-top:auto; padding-top:.3rem} .ct-precio b{font-size:1.15rem; color:var(--ct-tinta); font-weight:800} .ct-precio small{font-size:.75rem} .ct-precio s{color:var(--ct-gris); font-size:.78rem; margin-right:.25rem} .ct-estrellas{font-size:.75rem; display:flex; align-items:center; gap:.25rem} .ct-estrellas-fondo{position:relative; color:var(--ct-linea); white-space:nowrap} .ct-estrellas-fondo span{position:absolute; left:0; top:0; overflow:hidden; color:#ffb400} .ct-vacio{background:#fff; border-radius:var(--ct-radio); padding:1rem; text-align:center; color:var(--ct-gris)} /* ── Comprar por talla ── */ .ct-portalla{margin:0 0 1.5rem} .ct-tallas{display:flex; flex-wrap:wrap; gap:.45rem; margin:.6rem 0 0} .ct-talla{display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:70px; min-height:52px; background:#fff; border:2px solid var(--ct-lila); border-radius:12px; text-decoration:none !important; padding:.4rem .6rem} .ct-talla b{color:var(--ct-tinta); font-size:.95rem} .ct-talla span{color:var(--ct-gris); font-size:.76rem} .ct-talla:hover{border-color:var(--ct-rosa)} /* ── Cómo mido ── */ .ct-comomido{background:#fff; border-radius:var(--ct-radio); padding:1rem; margin:0 0 1.2rem} .ct-q{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--ct-rosa); color:#fff; font-weight:700; font-size:.85rem} .ct-pasos{display:grid; grid-template-columns:1fr; gap:.7rem; list-style:none; margin:.8rem 0 0; padding:0; counter-reset:ct} .ct-pasos li{background:var(--ct-lila-suave); border-radius:12px; padding:.7rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.4rem} .ct-pasos img{width:auto; max-width:100%; max-height:120px; height:auto; object-fit:contain} .ct-pasos span{font-size:.85rem; color:var(--ct-texto)} .ct-pasos b{color:var(--ct-rosa)} /* ── Ancho nominal ── */ .ct-nominal{background:#fff; border-radius:var(--ct-radio); padding:1rem; margin:0 0 1.2rem; display:grid; grid-template-columns:1fr; gap:.6rem; align-items:center} .ct-nominal img{width:min(100%,200px); height:auto; justify-self:center; object-fit:contain} .ct-ojo{background:var(--ct-rosa-suave); border-left:4px solid var(--ct-rosa); border-radius:0 10px 10px 0; padding:.5rem .7rem; font-size:.85rem; margin:.5rem 0 0} /* ── Tabla ── */ .ct-tabla-bloque{background:#fff; border-radius:var(--ct-radio); padding:1rem; margin:0 0 1.2rem} .ct-tabla{width:100%; border-collapse:collapse; margin:.8rem 0 0; font-size:.85rem} .ct-tabla th{text-align:left; color:var(--ct-gris); font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; padding:.4rem .5rem; border-bottom:2px solid var(--ct-linea)} .ct-tabla td{padding:.55rem .5rem; border-bottom:1px solid var(--ct-linea)} .ct-tabla tbody tr.ct-fila-on{background:var(--ct-rosa-suave); outline:2px solid var(--ct-rosa)} .ct-tabla tbody tr.ct-fila-on td:first-child{border-radius:8px 0 0 8px} .ct-tabla tbody tr.ct-fila-on td:last-child{border-radius:0 8px 8px 0} .ct-aviso{font-size:.78rem; color:var(--ct-gris); margin:.7rem 0 0} /* 🔑 En móvil la tabla deja de serlo: cada fila es una tarjeta y cada celda lleva su rótulo delante, sacado del `data-ct-th` que imprime el PHP. Sin scroll horizontal. */ @media (max-width:600px){ .ct-tabla thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} .ct-tabla, .ct-tabla tbody, .ct-tabla tr, .ct-tabla td{display:block; width:100%} .ct-tabla tr{border:1px solid var(--ct-linea); border-radius:12px; padding:.4rem .6rem; margin:0 0 .5rem} .ct-tabla td{border:0; padding:.25rem 0; display:flex; justify-content:space-between; gap:.6rem} .ct-tabla td::before{content:attr(data-ct-th); color:var(--ct-gris); font-size:.75rem; flex:none} .ct-tabla tbody tr.ct-fila-on{outline:2px solid var(--ct-rosa)} } /* ── Dudas ── */ .ct-dudas{margin:0 0 2rem} .ct-faqs{margin:.7rem 0 0} .ct-faq{background:#fff; border-radius:12px; padding:.7rem .9rem; margin:0 0 .5rem} .ct-faq summary{font-weight:600; color:var(--ct-tinta); cursor:pointer; min-height:34px; display:flex; align-items:center} .ct-faq p{margin:.5rem 0 0; font-size:.88rem; color:var(--ct-texto)} /* ═══ Tablet ═══ */ @media (min-width:600px){ .ct-rejilla{grid-template-columns:repeat(3,1fr)} .ct-pasos{grid-template-columns:repeat(3,1fr)} .ct-caja{padding:1.4rem} .ct-calc .ct-boton{flex:0 0 auto} .ct-nominal{grid-template-columns:1fr auto} .ct-nominal img{justify-self:end} } /* ═══ Escritorio ═══ */ @media (min-width:992px){ .ct{font-size:16px} .ct h1{font-size:2.6rem !important} .ct-hero{padding:1.4rem 0 .6rem} .ct-hero-rejilla{grid-template-columns:1.05fr .95fr; gap:1.5rem} .ct-hero-foto img{width:min(100%,460px)} .ct-rejilla{grid-template-columns:repeat(4,1fr); gap:.8rem} .ct-boton-grande{width:auto; min-width:320px; display:flex; margin:.2rem auto .9rem} /* El deslizador no puede medir 1.000 px: arrastrarlo de punta a punta seria un gesto absurdo y cada milimetro quedaria a 14 px del siguiente. Se acota el contenido. */ .ct-caja{padding:1.7rem 2rem} .ct-caja > *{max-width:700px; margin-left:auto; margin-right:auto} .ct-pestanas{max-width:520px} }