/* =========================================================================== app.css — convención de diseño del kit de la red de apellidos (_kit/css/kit.css + diseno.md), adaptada a este proyecto. QUÉ SE TOMA DEL KIT · Nombres de token: --brand / --brand-dark / --brand-soft, --nav-solid, --hero-bg, --s-1…--s-7, --r*, --sh-*, --wrap. · Los DOS OSCUROS: uno para la barra y otro distinto para la portada, para que el hero no parezca una prolongación de la barra. · Los arquetipos de vista: A portada, B ficha, C listado, D búsqueda (sin hero), E herramienta, F legal (hero plano), G blog, H 404. · El gesto de la casa: `.list-item` con filete izquierdo de 3 px que se tiñe de --brand al pasar por encima. · Una sola medida para todo el contenido (aquí --wrap, 980 px). QUÉ NO SE TOMA · `.with-aside`. Aquí NO hay barras laterales en ninguna vista: el contenido va a una sola columna. Es una decisión de este proyecto. · Banderas, mapas, podios y sprites: son de aquel dominio, no de este. El kit son 222 KB para 19 sitios. Esto son ~50 KB para uno, con las mismas convenciones. YA NO SE INCRUSTA EN EL . Se incrustaba cuando pesaba 14 KB y era lo correcto: ahorrarse una petición en la primera pintura compensaba pagarlos de nuevo en cada página. Con 50 KB y 22 tipos de página la cuenta se da la vuelta —cada visita a cada página se tragaba los 50 KB antes de una sola letra, y dentro del HTML no se pueden cachear—, así que va enlazada desde common/head.php con la marca de tiempo de asset() y caché immutable a un año. Por el cable son 13 KB comprimidos, una vez. Si algún día vuelve a bajar de ~15 KB, incrustarla vuelve a ser lo mejor: la decisión depende del tamaño, no del gusto. =========================================================================== */ :root { /* --- Marca: AHORA SE HEREDA, NO SE ELIGE ------------------------------ Este bloque era la paleta propia del sitio (teal y naranja quemado). Ya no lo es: desde que perritos.org vende el seguro de responsabilidad civil del perro, el sistema de diseño es el mismo que el de seguroobligatoriopatinete.com —«menta y cielo»— y vive en assets/css/style.css, que se carga ANTES que esta hoja. Aquí no se define ni un color: cada token del corpus apunta al token equivalente del sistema. Así las ~60 clases heredadas (.card, .list-item, .rejilla-razas, .filtro-*, .aguja-*, .podio-*, .picto-*…) adoptan la marca nueva sin tocarlas una por una, y sobre todo: cuando el sistema cambie un color, cambia aquí también. Una sola fuente de verdad, que era justo lo que no había cuando el ámbar heráldico se coló desde el proyecto de apellidos. Regla al tocar esto: si te encuentras escribiendo un #hex en este fichero, el sitio tiene dos paletas otra vez. El hex va en style.css. */ --brand: var(--menta-hondo); /* enlaces y acentos: menta legible sobre blanco, AA */ --brand-dark: #005A4B; /* hover del anterior; no hay token equivalente en el sistema */ --brand-light: var(--menta); /* para SOBRE los oscuros */ --brand-contrast: var(--blanco); --brand-soft: var(--menta-tenue); /* fondos suaves, chips, hover */ /* Los DOS OSCUROS del kit siguen siendo dos, pero ya no son dos teales: son el azul noche del sistema y su variante. La barra de verdad la pinta ahora .navbar de style.css; esto queda para lo que aún los use. */ --nav-solid: var(--tinta); --hero-bg: linear-gradient(135deg, var(--tinta-2) 0%, var(--tinta) 100%); /* --- Neutros --------------------------------------------------------- */ --text: var(--tinta); --text-soft: var(--tinta-suave); /* 4,54:1 sobre blanco, comprobado. El valor anterior de esta hoja (#8a9499) daba 3,5:1 y el primer intento de retokenizar puso #8496B3, que daba 3,0. Los tres sitios donde este token lleva TEXTO —el rol de la firma, el puesto del ranking y el select deshabilitado— son texto pequeño, así que necesita 4,5. No se toca sin volver a medirlo. */ --text-faint: #626F8C; --border: var(--borde); --surface: var(--blanco); --surface-alt: var(--nube); --page-bg: var(--blanco); /* --- Tipografía ------------------------------------------------------ Las tres familias propias del sistema, servidas en woff2 desde assets/fonts. La escala fluida se queda: es buena y es de esta casa. */ --font: var(--f-cuerpo); --fs-xs: .8125rem; --fs-sm: .875rem; --fs-lg: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); --fs-h3: clamp(1.125rem, 1.02rem + .5vw, 1.375rem); --fs-h2: clamp(1.3125rem, 1.15rem + .8vw, 1.75rem); --fs-h1: clamp(1.625rem, 1.35rem + 1.4vw, 2.375rem); /* --- Espaciado. Sin valores sueltos ---------------------------------- */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; /* --- Formas: las del sistema ----------------------------------------- */ --r-sm: .5rem; --r: .75rem; --r-lg: 1rem; --r-xl: var(--radio); --r-full: 999px; --sh-sm: 0 1px 2px rgba(22,41,77,.05); --sh: var(--sombra); --sh-md: var(--sombra); --sh-lg: var(--sombra-alta); /* --- Layout ---------------------------------------------------------- Aquí SÍ se separa del sistema, y a conciencia. El sistema mide 1240 px porque su contenido son rejillas de tarjetas y tablas de coberturas. El corpus es texto largo a una sola columna: 349 fichas de raza, 26 rankings y ~5.000 artículos. A 1240 px una ficha son 130 caracteres por línea, que no se lee. Se conserva el ancho único de 980 px que ya tenía este sitio y la razón por la que se eligió: TODO mide lo mismo —hero, cifras, prosa, rejillas, tablas y anuncios— y sale de este token. El sistema usa --ancho para sus páginas y el corpus usa --wrap para las suyas; que no coincidan es la decisión, no un descuido. */ --wrap: 980px; --tap: 44px; } /* --------------------------------------------------------------- base --- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); /* Crece con la ventana: en móvil 16 px (el mínimo que evita el zoom automático de iOS en los campos) y 18 px en escritorio, que es lo que mantiene legible una columna de 980 px. */ font-size: clamp(1rem, .95rem + .25vw, 1.125rem); line-height: 1.65; color: var(--text); background: var(--page-bg); overflow-x: hidden; } img, svg { display: block; max-width: 100%; height: auto; } input, button, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } /* [hidden] es una regla del navegador y pierde contra cualquier selector de clase: sin esto, un `.btn` con hidden se seguía pintando y ocupando sitio. Pasaba en la barra del asistente, donde los tres botones se repartían el ancho aunque solo uno estuviera visible. */ [hidden] { display: none !important; } :focus-visible { outline: 3px solid var(--brand-light); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--s-4); text-wrap: balance; } h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.02em; } h2 { font-size: var(--fs-h2); font-weight: 700; margin-top: var(--s-7); } h3 { font-size: var(--fs-h3); font-weight: 700; margin-top: var(--s-6); } p { margin: 0 0 var(--s-4); text-wrap: pretty; } a { color: var(--brand); text-underline-offset: .15em; } a:hover { color: var(--brand-dark); } ul, ol { padding-left: 1.2rem; margin: 0 0 var(--s-4); } strong { font-weight: 650; } /* La prosa NO lleva medida propia: la del contenedor ya es la de lectura. Darle un max-width menor es lo que hacía que un párrafo saliera más estrecho que el h2 que tiene encima. */ .prosa, .lead { max-width: none; } .lead { font-size: var(--fs-lg); color: var(--text-soft); } .container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-4); } .bloque { margin-block: var(--s-7); } .defer { content-visibility: auto; contain-intrinsic-size: auto 700px; } @media (min-width: 48em) { .container { padding-inline: var(--s-5); } } /* ---------------------------------------------------------- barra nav --- */ /* La barra es fija y el hero pasa por debajo: sin este filete los dos oscuros se tocan sin borde y no se distingue dónde acaba una y empieza el otro. */ .nav { background: var(--nav-solid); color: #fff; position: sticky; top: 0; z-index: 30; box-shadow: 0 1px 0 rgba(255,255,255,.14), var(--sh-md); } .nav-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); padding-block: var(--s-2); } .nav-logo { display: inline-flex; align-items: center; min-width: 0; } .nav-logo img { height: 2.1rem; width: auto; object-fit: contain; } @media (min-width: 48em) { .nav-logo img { height: 2.6rem; } } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); padding: 0; background: none; border: 1px solid rgba(255,255,255,.35); border-radius: var(--r); color: #fff; } .nav-toggle span { position: relative; width: 20px; height: 2px; background: currentColor; border-radius: 2px; } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px; } .nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); } .nav-links { display: none; flex-basis: 100%; padding-bottom: var(--s-2); } .nav-links.abierto { display: block; } .nav-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); } .nav-link { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); color: #fff; text-decoration: none; font-weight: 600; border-radius: var(--r-sm); } .nav-link:hover { background: rgba(255,255,255,.16); color: #fff; } @media (min-width: 48em) { .nav-toggle { display: none; } .nav-links { display: block; flex-basis: auto; padding: 0; } .nav-links ul { gap: var(--s-2); } } /* -------------------------------------------------------------- hero --- */ /* Tres tamaños. Dicen de qué TIPO de página se trata antes de leer una palabra: sin sufijo portada · sm ficha · xs listado, herramienta y legal. */ .hero { position: relative; overflow: hidden; background: var(--hero-bg); color: #fff; text-align: center; padding: 5rem 0; margin-bottom: var(--s-7); } .hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 50%, rgba(255,255,255,.10) 0, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255,255,255,.10) 0, transparent 50%); } .hero-content { position: relative; z-index: 1; color: #fff; } .hero-title { font-size: 3rem; font-weight: 800; color: #fff; margin-bottom: var(--s-4); } .hero-subtitle { font-size: 1.25rem; margin-bottom: 2.5rem; opacity: .95; color: #fff; margin-inline: auto; } .hero.hero-sm { padding: 3rem 0; margin-bottom: var(--s-6); } .hero.hero-sm .hero-title { font-size: 2.25rem; } .hero.hero-sm .hero-subtitle { font-size: 1rem; margin-bottom: 0; opacity: .9; } .hero.hero-xs { padding: 2.5rem 0; margin-bottom: var(--s-6); } .hero.hero-xs .hero-title { font-size: 2rem; } .hero.hero-xs .hero-subtitle { font-size: 1rem; margin-bottom: 0; opacity: .9; } /* Color plano: legales y estáticas, que no deben competir con la portada. El kit usa aquí --nav-solid, pero entonces la barra y el hero son el mismo color y se funden en un solo bloque. Se usa el oscuro de la marca: sigue siendo plano y sin degradado, que es lo que distingue estas páginas, pero la barra se sigue leyendo como barra. */ .hero.hero-flat { background: var(--brand-dark); } .hero.hero-flat::before { content: none; } @media (max-width: 36em) { .hero { padding: 3rem 0; } .hero-title { font-size: 2rem; } .hero-subtitle { font-size: 1.0625rem; margin-bottom: var(--s-5); } } /* Cifras del hero. Tres, no cuatro: en móvil caen a una columna. */ .hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-4); margin: var(--s-6) auto 0; } .hero.hero-sm .hero-stats { margin-top: var(--s-5); gap: var(--s-4); } .stat-hero { padding: var(--s-4); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-lg); transition: background .15s ease, border-color .15s ease; } .stat-hero:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.4); } .stat-number { display: block; font-size: 2.25rem; font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: var(--s-1); text-shadow: 0 2px 4px rgba(0,0,0,.2); text-wrap: balance; } /* En la ficha las "cifras" a veces son texto ("Perros de trabajo", "10 a 12 años"), no un número corto. A 1,75 rem fijos esas partían en dos líneas y descuadraban la fila entera, así que la escala se adapta al ancho. */ .hero.hero-sm .stat-number { font-size: clamp(1.125rem, .95rem + .7vw, 1.625rem); } .stat-label { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; opacity: .85; } /* Buscador del hero */ .search-box { margin: 0 auto; } .search-form { display: flex; gap: var(--s-3); margin: 0; } .search-input-wrapper { position: relative; flex: 1; min-width: 0; } .search-input { width: 100%; height: 3rem; padding: 0 var(--s-4) 0 2.75rem; font-size: 1rem; color: var(--text); background: #fff; border: 0; border-radius: var(--r); box-shadow: var(--sh-md); } .search-input:focus { outline: 3px solid var(--brand-light); outline-offset: 2px; } .search-icon { position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; } /* Botón blanco: uno de marca desaparece sobre un hero de marca */ .search-form .btn { background: #fff; color: var(--brand-dark); font-weight: 700; box-shadow: var(--sh-md); flex: none; } .search-form .btn:hover { background: var(--brand-soft); color: var(--brand-dark); } @media (max-width: 36em) { .search-form { flex-direction: column; } .search-form .btn { width: 100%; } } /* Autocompletado */ .sug-wrap { position: relative; } #sug { display: none; position: absolute; top: calc(100% + .25rem); left: 0; right: 0; z-index: 40; list-style: none; margin: 0; padding: var(--s-1); background: #fff; border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh-lg); max-height: 60vh; overflow-y: auto; text-align: left; } #sug.abierto { display: block; } #sug li { margin: 0; padding: var(--s-2) var(--s-3); min-height: var(--tap); cursor: pointer; border-radius: var(--r-sm); color: var(--text); } #sug li:hover { background: var(--brand-soft); } /* ---------------------------------------------------------- migas ------ */ .breadcrumb { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; list-style: none; padding: var(--s-2) var(--s-3); margin: 0 0 var(--s-5); background: var(--brand-soft); border-radius: var(--r); color: var(--text); font-size: var(--fs-sm); } .breadcrumb > * + *::before { content: "› "; color: var(--text-faint); } /* ------------------------------------------------ rejilla de razas ----- */ /* Cuatro columnas en escritorio, dos en móvil. La foto manda: a 48 px al lado del nombre no se veía —era más pequeña que la propia línea de texto— y las filas descuadraban cuando el nombre ocupaba dos o tres líneas. */ .rejilla-razas { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; } .rejilla-razas > li { margin: 0; } @media (min-width: 36em) { .rejilla-razas { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 48em) { .rejilla-razas { grid-template-columns: repeat(4, 1fr); } } .tarjeta-raza { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: var(--text); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .tarjeta-raza:hover { border-color: var(--brand-light); box-shadow: var(--sh-md); transform: translateY(-2px); color: var(--brand-dark); } /* Cuadrada y recortada: con alturas distintas la rejilla se desordena */ .tarjeta-foto { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--surface-alt); } /* El pictograma no se recorta: se centra sobre su fondo */ .tarjeta-picto { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; } .tarjeta-picto .picto { width: 68%; height: 68%; border-radius: 0; } .tarjeta-picto .picto svg { width: 100%; height: 100%; } .tarjeta-nombre { display: block; padding: var(--s-2) var(--s-3) var(--s-3); font-size: var(--fs-sm); font-weight: 650; line-height: 1.25; text-wrap: balance; } /* ----------------------------------------------------- listados -------- */ /* El filete izquierdo que se tiñe al pasar por encima es el gesto de la casa */ .grid-auto { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); list-style: none; margin: 0; padding: 0; } .grid-auto-sm { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr)); list-style: none; margin: 0; padding: 0; } .grid-auto li, .grid-auto-sm li { margin: 0; } .list-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); min-height: var(--tap); border-left: 3px solid transparent; border-radius: var(--r-sm); background: var(--surface); color: var(--text); text-decoration: none; transition: background .12s ease, border-color .12s ease; } .list-item:hover { border-left-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); text-decoration: none; } /* min-width:0 para que un nombre largo ("Petit Basset Griffon Vendéen") parta línea en vez de desbordar la celda: por defecto un hijo flex no encoge por debajo de su contenido. */ .list-item > span { min-width: 0; } /* ------------------------------------------------- imagen de raza ------ */ /* DOS CAPAS, y cada una cubre lo que la otra no puede: · pictograma: las 349, cero peticiones (las 14 siluetas van en un sprite) · foto real: las 211 que tienen material libre en Commons El reparto de una a otra lo decide common/imagen.php, no la hoja. */ .picto-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .picto { display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--pb); border-radius: var(--r); } /* El color viaja en --pc/--pb desde PHP, ya resuelto: el mismo marcado sirve dentro y fuera de esta hoja (correo, SVG suelto, og:image). */ .picto svg { display: block; fill: var(--pc); } .picto-sm { width: 2rem; height: 2rem; border-radius: var(--r-sm); } .picto-sm svg { width: 1.75rem; height: 1.34rem; } .picto-md { width: 3rem; height: 3rem; } .picto-md svg { width: 2.5rem; height: 1.92rem; } .picto-lg { width: 6rem; height: 6rem; border-radius: var(--r-lg); } .picto-lg svg { width: 5rem; height: 3.83rem; } .picto-xl { width: 10rem; height: 10rem; border-radius: var(--r-xl); } .picto-xl svg { width: 8.25rem; height: 6.32rem; } /* Miniatura cuadrada de imagen_raza(). Comparte lado y radio con .picto para que dé igual si una raza tiene foto o no: las dos ocupan el mismo hueco y nada se descuadra. La usa la cabecera de la comparativa; las rejillas van con .tarjeta-raza, que es más grande. La escala completa se mantiene aunque hoy solo se pinte 'lg', porque es la que declara imagen_raza_medidas(). */ .foto-mini { flex: none; object-fit: cover; border-radius: var(--r); background: var(--surface-alt); } .foto-sm { width: 2rem; height: 2rem; border-radius: var(--r-sm); } .foto-md { width: 3rem; height: 3rem; } .foto-lg { width: 6rem; height: 6rem; border-radius: var(--r-lg); } .foto-xl { width: 10rem; height: 10rem; border-radius: var(--r-xl); } /* Cabecera de la comparativa: la imagen centrada sobre el nombre de la raza */ .comparativa .col-raza { text-align: center; vertical-align: bottom; } .comparativa .col-raza .foto-mini, .comparativa .col-raza .picto { display: block; margin: 0 auto var(--s-2); } /* aspect-ratio + object-fit: la maqueta no salta aunque un recorte venga con otra proporción, y no hay que fiarse de que las 228 sean exactas. */ .foto-raza { margin: 0 0 var(--s-5); } .foto-raza img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); background: var(--surface-alt); } .foto-raza figcaption { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--text-soft); } .foto-raza figcaption a { color: var(--text-soft); text-decoration: underline; } .foto-raza figcaption a:hover { color: var(--brand); } /* Chips A-Z: 2,75 rem, --surface-alt en reposo, --brand + blanco en el activo */ .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block: var(--s-5); padding: 0; list-style: none; } .chip { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 var(--s-2); background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r); color: var(--text); text-decoration: none; font-weight: 600; } .chip:hover { background: var(--brand-soft); border-color: var(--brand-light); color: var(--brand-dark); } .chip.activo { background: var(--brand); border-color: var(--brand); color: #fff; } /* -------------------------------------------------------- tarjetas ----- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); transition: box-shadow .15s ease, transform .15s ease; overflow: hidden; } .card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); } /* auto-fit sobre el contenedor: las tarjetas no dependen del ancho de la ventana, así que la rejilla es la misma en todas las vistas. */ .cards { display: grid; gap: var(--s-4); list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); } .cards li { margin: 0; } .cards a { display: flex; flex-direction: column; height: 100%; gap: var(--s-1); padding: var(--s-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); text-decoration: none; color: var(--text); transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .cards a:hover { box-shadow: var(--sh-md); transform: translateY(-2px); border-color: var(--brand-light); } .cards b { font-size: var(--fs-lg); line-height: 1.3; color: var(--brand-dark); } .cards span { font-size: var(--fs-sm); color: var(--text-soft); } /* --------------------------------------------------------- panel ------- */ /* Arquetipo E: los controles SIEMPRE dentro del panel, nunca sobre el degradado */ .kit-panel { margin: 0 auto var(--s-6); padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-md); } /* ---------------------------------------------------- datos y notas ---- */ .datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--s-3); margin: 0 0 var(--s-5); padding: var(--s-4); background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-lg); } .datos div { min-width: 0; } .datos dt { font-size: var(--fs-xs); color: var(--text-soft); text-transform: uppercase; letter-spacing: .05em; } .datos dd { margin: 0; font-weight: 700; } .notas { list-style: none; margin: 0; padding: 0; } .notas li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-3); min-height: var(--tap); border-bottom: 1px solid var(--border); border-left: 3px solid transparent; border-radius: var(--r-sm); } .notas li:hover { border-left-color: var(--brand); background: var(--brand-soft); } .notas a { flex: 1 1 10rem; min-width: 0; text-decoration: none; } .notas a:hover { text-decoration: underline; } /* --brand (menta hondo, 5,18:1) y NO --brand-light (menta puro, 2,12:1 sobre blanco). Las estrellas son el dato más repetido del sitio: aparecen 26 veces en cada una de las 349 fichas y en los 26 rankings. Que se lean no es un detalle. */ .estrellas { color: var(--brand); letter-spacing: .08em; white-space: nowrap; } /* Números tabulares a la derecha, como manda el arquetipo B */ .barra { --pct: 0%; position: relative; flex: 0 0 auto; width: 6rem; height: .5rem; background: var(--border); border-radius: var(--r-full); overflow: hidden; } .barra::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct); background: var(--brand); border-radius: var(--r-full); } @media (min-width: 36em) { .barra { width: 9rem; } } .pct { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 3.5ch; text-align: right; } .cuenta { display: inline-block; font-size: .7em; font-weight: 700; color: var(--brand-dark); background: var(--brand-soft); border-radius: var(--r-full); padding: .15em .7em; vertical-align: middle; } /* ------------------------------------------------------- compartir ----- */ /* Va debajo del podio y no al final: ahí es donde a alguien le apetece enseñarlo. La URL se pinta en texto para que sin JavaScript se pueda seleccionar a mano; el botón de copiar solo aparece si el navegador puede. */ .compartir { margin-bottom: var(--s-6); padding: var(--s-4); background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-lg); } .compartir-txt { margin: 0 0 var(--s-3); font-size: var(--fs-sm); } .compartir-url { margin: 0 0 var(--s-3); overflow-x: auto; } .compartir-url code { display: block; padding: var(--s-2) var(--s-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: var(--fs-xs); white-space: nowrap; color: var(--text-soft); } .compartir-botones { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; } /* ---------------------------------------------------------- podio ------ */ /* Las tres primeras del test, en tarjeta grande. El resto sigue en lista: son dos lecturas distintas —la respuesta se mira de una en una, la cola se compara— y por eso no comparten formato. La cabecera de esta hoja dice que del kit no se toman "podios". Se mantiene: aquel era un podio de banderas con escalones dibujados. Este es la misma .tarjeta-raza del resto del sitio, solo que ordenada y con medalla. */ .podio { display: grid; gap: var(--s-4); grid-template-columns: 1fr; list-style: none; margin: 0 0 var(--s-6); padding: 0; } .podio > li { position: relative; margin: 0; } @media (min-width: 36em) { .podio { grid-template-columns: repeat(3, 1fr); align-items: start; } /* Orden VISUAL 2-1-3, que es como se lee un podio. El DOM se queda 1-2-3 porque ese es el orden real: es lo que dicta un lector de pantalla y lo que se ve en móvil, donde no hay tres columnas que ordenar. */ .podio-1 { order: 2; } .podio-2 { order: 1; } .podio-3 { order: 3; } /* El primero no crece: son los otros dos los que bajan. Así las tres fotos miden lo mismo y la jerarquía la marca la posición, no el tamaño. */ .podio-2, .podio-3 { padding-top: var(--s-6); } } .podio-1 .tarjeta-raza { border-color: var(--brand-light); box-shadow: var(--sh-md); } .podio-puesto { position: absolute; top: -.5rem; left: -.5rem; z-index: 2; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-full); background: var(--nav-solid); color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: var(--sh); } .podio-1 .podio-puesto { width: 2.75rem; height: 2.75rem; font-size: 1.25rem; background: var(--brand-light); color: var(--brand-dark); } @media (min-width: 36em) { .podio-2 .podio-puesto, .podio-3 .podio-puesto { top: 1.5rem; } } .podio-pct { display: block; margin-top: var(--s-2); text-align: center; font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--brand-dark); } .podio-1 .podio-pct { font-size: 1.75rem; } .podio-encaje { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--text-soft); text-transform: uppercase; letter-spacing: .05em; } /* Filas de ranking con foto: guías, rankings por parámetro y resultado del test. Son listas ORDENADAS, así que siguen siendo lista y no tarjetas: la posición es un dato y en una rejilla se pierde. */ .notas li .puesto { flex: none; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-faint); } .fila-raza { display: flex; align-items: center; gap: var(--s-3); flex: 1 1 12rem; min-width: 0; text-decoration: none; } .fila-raza:hover { text-decoration: underline; } /* La cola de un ranking va sin miniatura (ver ranking0.php), así que sus filas pueden ser más bajas: sin imagen que sostener, el alto mínimo de 44 px del objetivo táctil ya lo da el propio enlace. */ .notas-compacta li { min-height: 0; padding-block: var(--s-1); } .notas-compacta .fila-raza { padding-block: var(--s-2); } /* La miniatura no se encoge ni se deforma: con nombres largos el flex se la comía y las filas quedaban desalineadas. */ .fila-raza .foto-mini, .fila-raza .picto { flex: none; width: 3rem; height: 3rem; border-radius: var(--r); object-fit: cover; } .fila-raza .picto svg { width: 2.5rem; height: 1.92rem; } .fila-raza > span { min-width: 0; } /* ---------------------------------------------------------- filtro ----- */ /* Los controles van pegados arriba al hacer scroll: con 349 tarjetas debajo, perderlos de vista obliga a subir para cambiar un solo control. */ .filtro { position: sticky; top: 3.5rem; z-index: 20; margin-bottom: var(--s-5); padding: var(--s-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); } /* TRES columnas fijas en escritorio, no auto-fit. Con auto-fit el número de columnas cambiaba con el ancho de la ventana y los controles saltaban de sitio; con tres fijas la posición de cada pregunta es siempre la misma y se memoriza. Baja a dos y a una en pantallas estrechas. */ .filtro-controles { display: grid; gap: var(--s-4); grid-template-columns: 1fr; } @media (min-width: 34em) { .filtro-controles { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 52em) { .filtro-controles { grid-template-columns: repeat(3, 1fr); } } /* ------------------------------------------------ calculadoras ---------- */ /* Formulario de una sola respuesta: edad y coste. A diferencia del filtro, aquí no se explora, se pregunta una cosa y se contesta una cosa, así que el formulario es estrecho y la respuesta enorme. */ .calc { display: grid; gap: var(--s-4); grid-template-columns: 1fr; margin-bottom: var(--s-5); padding: var(--s-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); } @media (min-width: 40em) { .calc { grid-template-columns: repeat(2, 1fr); } } .calc-campo { min-width: 0; } .calc-campo label { display: block; margin-bottom: var(--s-1); } .calc-campo input, .calc-campo select { width: 100%; padding: var(--s-2); min-height: var(--tap); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); } .calc-campo small { display: block; margin-top: var(--s-1); font-size: var(--fs-xs); color: var(--text-soft); } .calc-pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); grid-column: 1 / -1; } /* La respuesta. Grande de verdad: es lo único que ha venido a ver quien entra, y con el tamaño de párrafo por defecto se perdía entre el formulario y la tabla que viene debajo. */ .resultado-grande { margin-bottom: var(--s-5); padding: var(--s-5) var(--s-4); text-align: center; background: var(--brand-soft); border-radius: var(--r-lg); } .resultado-cifra { margin: 0; line-height: 1; font-size: clamp(3rem, 2rem + 6vw, 5rem); font-weight: 800; color: var(--brand-dark); font-variant-numeric: tabular-nums; } .resultado-txt { margin: var(--s-2) 0 0; font-size: var(--fs-lg); color: var(--text); } .resultado-nota { margin: var(--s-3) 0 0; font-size: var(--fs-sm); color: var(--text-soft); } /* Nota bajo una partida de la tabla de coste: de dónde sale esa cifra */ .coste-nota { display: block; font-size: var(--fs-xs); color: var(--text-soft); font-weight: 400; } .fila-total { font-weight: 800; background: var(--brand-soft); } .fila-total td, .fila-total th { border-top: 2px solid var(--brand-light); } /* ------------------------------------------- elegir razas (comparador) -- */ /* Un solo desplegable y las ya elegidas como fichas quitables: cuatro real es invisible: sin esto, quien navega con teclado no ve dónde está. */ .talla-chip input:focus-visible + span { outline: 2px solid var(--brand-dark); outline-offset: 2px; } /* ------------------------------------------------ preguntas frecuentes -- */ /* Acordeón con
, sin una línea de JavaScript: se abre y se cierra solo, se imprime bien y los navegadores modernos lo encuentran con Ctrl+F aunque esté cerrado, que es justo lo que un bloque de FAQ necesita. */ .faq-item { border: 1px solid var(--border); border-radius: var(--r); margin-bottom: var(--s-2); background: var(--surface); } .faq-item summary { padding: var(--s-3) var(--s-4); font-weight: 650; cursor: pointer; /* El marcador por defecto se pinta pegado al texto y descuadra la sangría; con list-style se quita y lo pone el ::after, alineado a la derecha. */ list-style: none; position: relative; padding-right: var(--s-6); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; position: absolute; right: var(--s-4); top: var(--s-3); color: var(--brand); font-weight: 700; } .faq-item[open] summary::after { content: '−'; } .faq-item[open] summary { border-bottom: 1px solid var(--border); } .faq-item p { margin: 0; padding: var(--s-3) var(--s-4); color: var(--text-soft); } /* ----------------------------------------------------- calculadoras ---- */ /* Arquetipo E del kit: herramienta. Panel de controles arriba, resultado grande justo debajo. La cifra es el contenido de la página, así que se pinta como tal y no como un dato más dentro de un párrafo. */ .calc { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); align-items: end; margin-bottom: var(--s-5); padding: var(--s-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); } .calc-campo { min-width: 0; } .calc-campo > label { display: block; margin-bottom: var(--s-1); } .calc-campo select, .calc-campo input[type=number] { width: 100%; padding: var(--s-2); min-height: var(--tap); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); } .calc-campo select:disabled { background: var(--surface-alt); color: var(--text-faint); } .calc-campo small { display: block; color: var(--text-soft); font-size: var(--fs-xs); margin-top: .2rem; } .calc-pie { display: flex; gap: var(--s-2); align-items: flex-end; } .calc-pie .btn { flex: 1; } .resultado-grande { margin: 0 0 var(--s-6); padding: var(--s-5); background: var(--brand-soft); border-radius: var(--r-lg); text-align: center; } .resultado-cifra { margin: 0; font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--brand-dark); font-variant-numeric: tabular-nums; } .resultado-txt { margin: var(--s-2) 0 0; font-size: var(--fs-lg); } .resultado-nota { margin: var(--s-2) 0 0; color: var(--text-soft); font-size: var(--fs-sm); } /* La nota de cada partida va bajo su nombre, en la propia celda: en una tabla de dos columnas no cabe una tercera de explicaciones, y sin ellas el lector no puede juzgar si la cifra le vale. */ .coste-nota { display: block; font-weight: 400; color: var(--text-soft); font-size: var(--fs-xs); line-height: 1.4; margin-top: .15rem; } .fila-total td, .fila-total th { border-top: 2px solid var(--brand-light); } @media (max-width: 48em) { .calc-pie .btn { min-width: 0; } } /* Cuando no queda ninguna raza. Es un resultado, no un error: se pinta como texto tranquilo y no como aviso rojo. */ .vacio { margin: var(--s-5) 0; padding: var(--s-5); background: var(--brand-soft); border-radius: var(--r-lg); color: var(--text-soft); text-align: center; } /* En móvil el panel ocuparía media pantalla: ahí deja de ser pegajoso. */ @media (max-width: 48em) { .filtro { position: static; } .filtro-controles { grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); } .filtro-barra { flex-direction: column; align-items: stretch; } .filtro-acciones .btn { flex: 1; } } /* ------------------------------------------------- datos derivados ----- */ /* Los índices en los que la raza destaca. Enlazan a su ranking: son navegación y reparto de enlaces internos, no una etiqueta decorativa. */ .distintivos { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); } .distintivo { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2) var(--s-1) var(--s-3); background: var(--brand-soft); border: 1px solid var(--brand-light); border-radius: var(--r-full); color: var(--brand-dark); font-size: var(--fs-sm); font-weight: 650; text-decoration: none; } .distintivo:hover { background: var(--brand-light); color: #fff; text-decoration: none; } .distintivo-pct { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25em; padding: 0 .35em; border-radius: var(--r-full); background: var(--surface); color: var(--brand-dark); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); } /* Percentiles. El filete de color dice la dirección de un vistazo, sin que haya que leer «por encima» o «por debajo» en cada línea. */ .percentiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); } .percentiles li { margin: 0; padding: var(--s-2) var(--s-3); border-left: 3px solid var(--border); border-radius: var(--r-sm); background: var(--surface-alt); font-size: var(--fs-sm); } .percentiles .pc-alto { border-left-color: var(--brand); } .percentiles .pc-bajo { border-left-color: var(--text-faint); } /* Avisos por contradicción. Es el bloque que dice lo que otras webs se callan, así que se pinta como advertencia y no como una lista más. */ .avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); } .avisos li { margin: 0; padding: var(--s-4); background: var(--surface-alt); border: 1px solid var(--border); border-left: 4px solid var(--brand-light); border-radius: var(--r); } .avisos h3 { margin: 0 0 var(--s-2); font-size: var(--fs-lg); } .avisos p { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); } /* Fórmula del índice, en su página de ranking: enseñarla es lo que separa un índice defendible de un número inventado. */ .formula { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-1); } .formula li { display: flex; align-items: baseline; gap: var(--s-3); margin: 0; padding: var(--s-1) var(--s-3); background: var(--surface-alt); border-radius: var(--r-sm); font-size: var(--fs-sm); } .formula .peso { flex: none; min-width: 2.5ch; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; } .formula .suma { color: var(--brand-dark); } .formula .resta { color: var(--text-faint); } /* -------------------------------------------------------- autoría ------ */ /* Va justo bajo el título de la ficha: quién responde de esto y desde cuándo. Discreta a propósito —no compite con el contenido— pero siempre presente. */ .firma { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-5); padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-soft); } .firma-rol { display: block; font-size: var(--fs-xs); color: var(--text-faint); } .firma-fecha { margin-left: auto; } /* El aviso de que nadie con colegiación ha revisado esto. Se pinta solo mientras la plaza siga vacante en data/equipo.json. */ .aviso-vet { padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5); background: var(--surface-alt); border-left: 3px solid var(--brand-light); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text-soft); } .persona { margin-bottom: var(--s-6); } .persona h3 { margin-bottom: var(--s-1); } .persona-rol { color: var(--brand-dark); font-weight: 650; margin-bottom: var(--s-3); } .persona-enlaces a { margin-right: var(--s-3); font-size: var(--fs-sm); } /* La plaza vacante se pinta como un anuncio, no como una persona: borde discontinuo para que se lea de un vistazo que ahí no hay nadie todavía. */ .vacantes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); } .vacante { padding: var(--s-4); border: 2px dashed var(--border); border-radius: var(--r-lg); background: var(--surface-alt); } .vacante h3 { margin: 0 0 var(--s-2); font-size: var(--fs-lg); color: var(--text-soft); } .vacante p { margin: 0; font-size: var(--fs-sm); } /* ---------------------------------------------------- comparativa ------ */ .tabla-scroll { overflow-x: auto; margin-bottom: var(--s-5); } .comparativa { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .comparativa th, .comparativa td { padding: var(--s-2) var(--s-3); text-align: left; border-bottom: 1px solid var(--border); } .comparativa thead th { background: var(--nav-solid); color: #fff; white-space: nowrap; } .comparativa thead th a { color: #fff; } .comparativa tbody th { font-weight: 400; } .comparativa td { text-align: center; } /* El ganador con FONDO suave, no con color de texto */ .comparativa .gana { background: var(--brand-soft); } /* -------------------------------------------------------- búsqueda ----- */ /* Arquetipo D: sin hero. Barra de contexto con el término y el recuento. */ .barra-busqueda { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5); background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r); } .barra-busqueda strong { color: var(--brand-dark); } .barra-busqueda .recuento { color: var(--text-soft); font-size: var(--fs-sm); } mark { background: var(--brand-soft); color: var(--brand-dark); padding: 0 .15em; border-radius: 2px; } /* Vacío: el porqué y tres salidas reales, nunca un "sin resultados" seco */ .vacio { padding: var(--s-5); background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-lg); } /* -------------------------------------------------------- anuncios ----- */ /* El alto se reserva: cuando AdSense no rellena pone display:none en línea al y sin altura en el contenedor la página salta. */ .ad-slot { --alto: 280px; display: flex; align-items: center; justify-content: center; margin-block: var(--s-6); min-height: var(--alto); contain: layout; } .ad-slot ins { display: block; width: 100%; } /* ------------------------------------------------------------ botones -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--tap); padding: var(--s-2) var(--s-5); border: 0; border-radius: var(--r); background: var(--brand); color: #fff; font-weight: 700; text-decoration: none; transition: background .15s ease; } .btn:hover { background: var(--brand-dark); color: #fff; } .btn-lg { min-height: 3rem; padding-inline: var(--s-6); } .btn-2 { background: var(--brand-light); color: #22160a; } .btn-2:hover { background: var(--brand); color: #fff; } /* Secundario de contorno: «Limpiar» no debe pesar lo mismo que «Filtrar». Va aquí y no en el bloque del filtro porque .btn está definido más abajo en la hoja y, con la misma especificidad, gana el último. */ .btn-lin { background: transparent; color: var(--brand-dark); box-shadow: inset 0 0 0 1px var(--border); } .btn-lin:hover { background: var(--brand-soft); color: var(--brand-dark); } /* Llamada a la acción */ .cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-block: var(--s-6); padding: var(--s-5); background: var(--brand-soft); border: 1px solid var(--brand-light); border-radius: var(--r-xl); } .cta p { margin: 0; } .cta b { display: block; font-size: var(--fs-lg); color: var(--brand-dark); } /* --------------------------------------------------------- formularios - */ label { display: inline-block; margin-bottom: var(--s-1); font-weight: 600; } /* :not(.search-input) porque si no esta regla pisa el padding izquierdo del buscador del hero —selector de atributo gana a selector de clase— y el icono de la lupa acaba encima del texto del campo. */ input[type=text], input[type=email], input[type=search]:not(.search-input), select, textarea { display: block; width: 100%; min-height: 2.75rem; padding: var(--s-2) var(--s-3); font-size: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); } fieldset { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-4); margin: 0 0 var(--s-4); } legend { font-weight: 700; padding-inline: var(--s-2); color: var(--brand-dark); } /* ------------------------------------------------- asistente por pasos - */ /* `.paso` ya estaba cogido en assets/css/style.css por las tarjetas numeradas de «cómo funciona»: un círculo con el número en ::before y 3.2rem de hueco arriba para dejarle sitio. Los pasos del asistente comparten el nombre de la clase y heredaban las dos cosas, así que el número se pintaba encima de la pista del paso. Aquí la numeración la lleva la barra de progreso. */ .asistente .paso { margin-bottom: var(--s-5); padding-top: var(--s-4); } .asistente .paso::before { content: none; } .asistente.con-js .paso { border: 0; padding: 0; margin-bottom: 0; } .asistente.con-js legend { padding: 0; font-size: var(--fs-h2); } .paso-pista { color: var(--text-soft); font-size: var(--fs-sm); margin-bottom: var(--s-5); } /* La barra de progreso se queda pegada bajo la barra de navegación: en un paso de seis preguntas se pierde de vista enseguida y es lo que dice cuánto falta. */ .paso-barra { position: sticky; top: 3.4rem; z-index: 20; padding: var(--s-3) 0 var(--s-2); margin-bottom: var(--s-4); background: var(--page-bg); } .paso-progreso { height: .375rem; background: var(--border); border-radius: var(--r-full); overflow: hidden; } .paso-progreso span { display: block; height: 100%; width: 20%; background: var(--brand); border-radius: var(--r-full); transition: width .25s ease; } .paso-cuenta { display: flex; justify-content: space-between; gap: var(--s-3); margin: var(--s-2) 0 0; font-size: var(--fs-sm); color: var(--text-soft); font-variant-numeric: tabular-nums; } .paso-ajustados { color: var(--brand-dark); font-weight: 600; } /* --- Una tarjeta por pregunta --- */ .agujas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); } .aguja-fila { margin: 0; padding: var(--s-4); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--r-lg); transition: border-color .15s ease, background .15s ease; } /* Se marca lo que el visitante ha tocado: de un vistazo se ve qué está pesando en el resultado y qué se ha quedado a cero. */ .aguja-fila[data-activo="1"] { border-color: var(--brand-light); border-left-color: var(--brand); background: var(--brand-soft); } .aguja-label { display: block; margin: 0 0 var(--s-3); font-weight: 650; line-height: 1.3; } .aguja { display: flex; align-items: center; gap: var(--s-2); } /* Los botones son lo que hace usable esto con el dedo: arrastrar un pulgar por once posiciones es puntería, tocar -/+ no. 44 px de objetivo. */ .aguja-btn { flex: none; width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; font-weight: 700; color: var(--brand-dark); background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r); user-select: none; -webkit-user-select: none; } .aguja-btn:hover { background: var(--brand-soft); border-color: var(--brand-light); } .aguja-btn:active { background: var(--brand); color: #fff; } .aguja-pista { position: relative; flex: 1; min-width: 0; height: var(--tap); } /* Marcas en -5, 0 y +5 para que la posición central se vea sin tener que leer */ .aguja-marcas { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none; padding-inline: .75rem; } .aguja-marcas i { width: 2px; height: .625rem; background: var(--border); border-radius: 1px; } .aguja-marcas i:nth-child(2) { height: .875rem; background: var(--bd2, var(--text-faint)); } .aguja-pie { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-2); } .aguja-extremo { flex: none; font-size: var(--fs-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; } .aguja-valor { flex: 1; text-align: center; font-size: var(--fs-sm); color: var(--text-soft); } .aguja-fila[data-activo="1"] .aguja-valor { color: var(--brand-dark); font-weight: 650; } /* --- El rango --- */ .aguja input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; background: none; border: 0; -webkit-appearance: none; appearance: none; --pos: 50%; } .aguja input[type=range]:focus { outline: none; } .aguja input[type=range]:focus-visible { outline: 3px solid var(--brand-light); outline-offset: 2px; border-radius: var(--r); } .aguja input[type=range]::-webkit-slider-runnable-track { height: .375rem; border-radius: var(--r-full); background: var(--border); } .aguja input[type=range]::-moz-range-track { height: .375rem; border-radius: var(--r-full); background: var(--border); } /* Pulsador grande: 1,75 rem es lo mínimo para agarrarlo con el dedo */ .aguja input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.75rem; height: 1.75rem; margin-top: -.6875rem; background: var(--surface); border: 3px solid var(--brand); border-radius: 50%; box-shadow: var(--sh-md); cursor: grab; } .aguja input[type=range]::-moz-range-thumb { width: 1.75rem; height: 1.75rem; background: var(--surface); border: 3px solid var(--brand); border-radius: 50%; box-shadow: var(--sh-md); cursor: grab; } .aguja-fila[data-activo="1"] input[type=range]::-webkit-slider-thumb { background: var(--brand); border-color: var(--brand-dark); } .aguja-fila[data-activo="1"] input[type=range]::-moz-range-thumb { background: var(--brand); border-color: var(--brand-dark); } .aguja input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; } /* --- Barra de acción --- */ .paso-nav { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); } .paso-nav .siguiente, .paso-nav .enviar { margin-left: auto; } /* En móvil va fija abajo, en la zona del pulgar: si no, hay que recorrer las seis preguntas del paso para llegar al botón de avanzar. */ @media (max-width: 48em) { .paso-nav { position: sticky; bottom: 0; z-index: 20; margin: var(--s-5) calc(var(--s-4) * -1) 0; padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 12px rgba(0,0,0,.06); } .paso-nav .btn { flex: 1; } .paso-nav .siguiente, .paso-nav .enviar { margin-left: 0; } .paso-barra { top: 3.1rem; } .aguja-fila { padding: var(--s-3); } } .opciones { list-style: none; margin: 0; padding: 0; } .opciones li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--border); } .opciones li:last-child { border-bottom: 0; } .opciones .sino { display: flex; gap: var(--s-1); flex: none; } .opciones .sino label { display: inline-flex; align-items: center; gap: var(--s-1); margin: 0; min-height: var(--tap); padding: 0 var(--s-3); background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r); font-weight: 500; font-size: var(--fs-sm); cursor: pointer; } .opciones .sino input { margin: 0; } .opciones .sino label:has(input:checked) { background: var(--brand); color: #fff; border-color: var(--brand); } /* ------------------------------------------------------- paginación ---- */ .paginacion { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1); list-style: none; margin: var(--s-6) 0; padding: 0; } .paginacion li { margin: 0; } .paginacion a, .paginacion span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); padding: 0 var(--s-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); text-decoration: none; } .paginacion a:hover { background: var(--brand-soft); border-color: var(--brand-light); } .paginacion .activa { background: var(--brand); border-color: var(--brand); color: #fff; } /* ------------------------------------------------------------- pie ----- */ .site-footer { background: var(--nav-solid); color: #fff; padding-block: var(--s-7); margin-top: var(--s-7); } .site-footer a { color: #fff; } .site-footer a:hover { color: var(--brand-light); } .footer-cols { display: grid; grid-template-columns: 1fr; gap: var(--s-5); margin-bottom: var(--s-5); } @media (min-width: 36em) { .footer-cols { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 62em) { .footer-cols { grid-template-columns: repeat(3, 1fr); } } .footer-cols h2 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 var(--s-2); color: rgba(255,255,255,.6); } .footer-cols ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); } .footer-cols li { margin-bottom: var(--s-1); } .site-footer .legal { border-top: 1px solid rgba(255,255,255,.15); padding-top: var(--s-4); font-size: var(--fs-sm); text-align: center; color: rgba(255,255,255,.7); margin: 0; } /* ------------------------------------------------------- utilidades ---- */ .text-center { text-align: center; } .m-0 { margin: 0; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 99; padding: var(--s-2) var(--s-4); background: var(--brand-light); color: #22160a; font-weight: 700; } .skip-link:focus { left: 0; } @media print { .nav, .hero, .site-footer, .ad-slot, .chips, .cta { display: none !important; } }