/* ========================================================================== TODO PET SHOP · Hoja de estilos principal Organizacion: 1) tokens · 2) base · 3) layout · 4) cabecera y pie 5) componentes · 6) paginas concretas · 7) utilidades · 8) responsive Mobile-first: los @media solo AMPLIAN a partir de 640/900/1200 px. ========================================================================== */ /* ------------------------------------------------------------------ 1. TOKENS */ :root { /* Paleta. Todos los pares texto/fondo cumplen contraste AA (>= 4.5:1). */ --c-fondo: #FDFBF7; /* crema calido */ --c-fondo-alt: #F5EFE5; /* crema mas saturado para bandas */ --c-superficie: #FFFFFF; --c-tinta: #1B2A27; /* verde casi negro, texto principal */ --c-tinta-suave: #52625E; /* texto secundario, 6.2:1 sobre --c-fondo */ --c-bosque: #12564A; /* verde marca: cabecera, pie, acentos serios */ --c-bosque-claro: #E4EEEA; --c-acento: #BC4726; /* terracota: CTA. Blanco encima = 5.1:1 */ --c-acento-osc: #94371D; --c-acento-suave: #FBEDE7; --c-mostaza: #F0B429; /* solo decorativo o con texto oscuro encima */ --c-mostaza-suave:#FDF3DC; --c-borde: #E6DED1; --c-borde-fuerte: #CFC3B0; --c-ok: #1F6F4A; --c-aviso: #8A5A00; /* Tipografia */ --f-titulo: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --f-texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Escala tipografica fluida: evita saltos entre breakpoints */ --t-xs: 0.78rem; --t-sm: 0.875rem; --t-base: 1rem; --t-md: clamp(1.05rem, 0.99rem + 0.3vw, 1.18rem); --t-lg: clamp(1.25rem, 1.13rem + 0.6vw, 1.5rem); --t-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); --t-2xl: clamp(1.85rem, 1.5rem + 1.7vw, 2.7rem); --t-3xl: clamp(2.2rem, 1.6rem + 2.8vw, 3.6rem); /* Espaciado */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-full: 999px; --sombra-1: 0 1px 2px rgba(27,42,39,.05), 0 2px 8px rgba(27,42,39,.05); --sombra-2: 0 4px 12px rgba(27,42,39,.07), 0 12px 32px rgba(27,42,39,.08); --ancho-max: 1200px; --ancho-texto: 68ch; --transicion: 180ms cubic-bezier(.2,.7,.3,1); } /* --------------------------------------------------------------------- 2. BASE */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--c-fondo); color: var(--c-tinta); font-family: var(--f-texto); font-size: var(--t-base); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Nota: no usamos overflow-x:hidden en body como parche. Convierte a en un contenedor de scroll propio y rompe el anclaje de #secciones y el position:sticky. El desbordamiento se corrige en origen con minmax(0,1fr) y min-width:0 en las rejillas, y con overflow-x en las tablas. */ h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 var(--e-4); text-wrap: balance; } h1 { font-size: var(--t-3xl); } h2 { font-size: var(--t-2xl); } h3 { font-size: var(--t-lg); } h4 { font-size: var(--t-md); } p { margin: 0 0 var(--e-4); text-wrap: pretty; } a { color: var(--c-acento-osc); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--c-acento); } img { max-width: 100%; height: auto; display: block; } /* El estilo por defecto del navegador da a

un margin: 1em 40px. Eso descuadraba la imagen principal de la ficha respecto a la tira de miniaturas y metía aire falso en las tarjetas. Lo reseteamos siempre. */ figure { margin: 0; } ul, ol { margin: 0 0 var(--e-4); padding-left: 1.15rem; } li { margin-bottom: var(--e-2); } strong { font-weight: 600; } small { font-size: var(--t-sm); } /* Foco visible y consistente en TODO el sitio (accesibilidad por teclado) */ :focus-visible { outline: 3px solid var(--c-acento); outline-offset: 3px; border-radius: 4px; } /* Enlace de salto para lectores de pantalla y navegacion por teclado */ .saltar { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--c-bosque); color: #fff; padding: var(--e-3) var(--e-4); border-radius: 0 0 var(--r-sm) 0; font-weight: 600; } .saltar:focus { left: 0; color: #fff; } /* ------------------------------------------------------------------- 3. LAYOUT */ .contenedor { width: 100%; max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--e-4); } .seccion { padding-block: var(--e-7); } .seccion--alt { background: var(--c-fondo-alt); } .prosa { max-width: var(--ancho-texto); } .prosa p, .prosa li { font-size: var(--t-md); } .rejilla { display: grid; gap: var(--e-5); } .rejilla--2 { grid-template-columns: 1fr; } .rejilla--3 { grid-template-columns: 1fr; } .encabezado-seccion { margin-bottom: var(--e-6); } .encabezado-seccion p { color: var(--c-tinta-suave); max-width: 60ch; margin-bottom: 0; } .antetitulo { display: inline-block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-acento-osc); margin-bottom: var(--e-2); } /* --------------------------------------------------- 4. CABECERA Y PIE */ .cabecera { position: sticky; top: 0; z-index: 100; background: var(--c-bosque); color: #fff; border-bottom: 1px solid rgba(255,255,255,.12); } .cabecera__fila { display: flex; align-items: center; gap: var(--e-4); min-height: 64px; } .marca { display: inline-flex; align-items: center; gap: var(--e-2); flex: none; color: #fff; text-decoration: none; font-family: var(--f-titulo); font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; white-space: nowrap; /* el nombre de la marca nunca se parte en dos lineas */ } .marca:hover { color: var(--c-mostaza); } .marca__huella { flex: none; } .marca__pet { color: var(--c-mostaza); } .nav-boton { margin-left: auto; display: inline-flex; align-items: center; gap: var(--e-2); background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-full); padding: .45rem .85rem; font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer; } .nav-boton:hover { background: rgba(255,255,255,.18); } .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--c-bosque); border-bottom: 1px solid rgba(255,255,255,.12); padding: var(--e-3) var(--e-4) var(--e-5); } .nav[data-abierto="true"] { display: block; } .nav__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .nav__lista a { display: block; color: rgba(255,255,255,.88); text-decoration: none; padding: .6rem .5rem; border-radius: var(--r-sm); font-weight: 500; } .nav__lista a:hover, .nav__lista a:focus-visible { background: rgba(255,255,255,.1); color: #fff; } .nav__lista a[aria-current="page"] { color: var(--c-mostaza); font-weight: 700; } /* Menu desplegable de movil: nombre completo de la categoria. */ .nav__corto { display: none; } .nav__largo { display: inline; } .nav__destacado { margin-top: var(--e-3); } .nav__destacado a { background: var(--c-acento); color: #fff !important; text-align: center; font-weight: 700; } .nav__destacado a:hover { background: var(--c-acento-osc); } .pie { background: var(--c-bosque); color: rgba(255,255,255,.82); padding-block: var(--e-7) var(--e-5); margin-top: var(--e-8); font-size: var(--t-sm); } .pie h2, .pie h3 { color: #fff; font-size: var(--t-base); font-family: var(--f-texto); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--e-3); } .pie a { color: rgba(255,255,255,.82); text-decoration: none; } .pie a:hover { color: var(--c-mostaza); text-decoration: underline; } .pie ul { list-style: none; padding: 0; } .pie__rejilla { display: grid; gap: var(--e-6); } .pie__legal { border-top: 1px solid rgba(255,255,255,.15); margin-top: var(--e-6); padding-top: var(--e-4); font-size: var(--t-xs); line-height: 1.6; } /* -------------------------------------------------------------- 5. COMPONENTES */ /* --- Botones --- */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); font-family: var(--f-texto); font-weight: 600; font-size: var(--t-base); padding: .78rem 1.35rem; border-radius: var(--r-full); border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: transform var(--transicion), background var(--transicion), box-shadow var(--transicion); line-height: 1.2; } .boton:hover { transform: translateY(-1px); } .boton:active { transform: translateY(0); } .boton--principal { background: var(--c-acento); color: #fff; box-shadow: var(--sombra-1); } .boton--principal:hover { background: var(--c-acento-osc); color: #fff; box-shadow: var(--sombra-2); } .boton--secundario { background: transparent; color: var(--c-bosque); border-color: var(--c-borde-fuerte); } .boton--secundario:hover { background: var(--c-bosque-claro); color: var(--c-bosque); border-color: var(--c-bosque); } .boton--claro { background: #fff; color: var(--c-bosque); } .boton--claro:hover { background: var(--c-mostaza-suave); color: var(--c-bosque); } .boton--bloque { width: 100%; } .boton--grande { font-size: var(--t-md); padding: .95rem 1.6rem; } /* Boton de compra en Amazon. El href se copia TAL CUAL del enlace corto. */ .boton-amazon { background: var(--c-acento); color: #fff; } .boton-amazon:hover { background: var(--c-acento-osc); color: #fff; } .boton-amazon svg { flex: none; } /* --- Chips / etiquetas --- */ .chip { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--t-xs); font-weight: 600; letter-spacing: .01em; padding: .3rem .7rem; border-radius: var(--r-full); background: var(--c-bosque-claro); color: var(--c-bosque); } .chip--acento { background: var(--c-acento-suave); color: var(--c-acento-osc); } .chip--mostaza { background: var(--c-mostaza-suave); color: var(--c-aviso); } .chip--gato { background: #EDE9F7; color: #4A3A78; } .lista-chips { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; padding: 0; margin: 0; } .lista-chips li { margin: 0; } /* --- Migas de pan --- */ .migas { font-size: var(--t-sm); color: var(--c-tinta-suave); padding-block: var(--e-4) 0; } .migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0; } .migas li { margin: 0; display: flex; gap: .35rem; align-items: center; } .migas li + li::before { content: "›"; color: var(--c-borde-fuerte); } .migas a { color: var(--c-tinta-suave); text-decoration: none; } .migas a:hover { color: var(--c-acento-osc); text-decoration: underline; } .migas [aria-current] { color: var(--c-tinta); font-weight: 600; } /* --- Tarjeta de producto --- */ .tarjeta { display: flex; flex-direction: column; background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion); } .tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--c-borde-fuerte); } .tarjeta__figura { position: relative; background: var(--c-fondo-alt); aspect-ratio: 4 / 3; overflow: hidden; } .tarjeta__figura img { width: 100%; height: 100%; object-fit: contain; padding: var(--e-4); transition: transform 400ms cubic-bezier(.2,.7,.3,1); } .tarjeta:hover .tarjeta__figura img { transform: scale(1.04); } .tarjeta__insignia { position: absolute; top: var(--e-3); left: var(--e-3); } .tarjeta__cuerpo { padding: var(--e-4) var(--e-4) var(--e-5); display: flex; flex-direction: column; flex: 1; gap: var(--e-2); } .tarjeta__marca { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-tinta-suave); } .tarjeta__titulo { font-size: var(--t-md); margin: 0; line-height: 1.3; } .tarjeta__titulo a { color: var(--c-tinta); text-decoration: none; } .tarjeta__titulo a:hover { color: var(--c-acento-osc); } .tarjeta__titulo a::after { content: ""; position: absolute; inset: 0; } /* toda la tarjeta es clicable */ .tarjeta { position: relative; } .tarjeta__resumen { font-size: var(--t-sm); color: var(--c-tinta-suave); margin: 0; } .tarjeta__pie { margin-top: auto; padding-top: var(--e-3); display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; } .precio { font-family: var(--f-titulo); font-size: var(--t-lg); font-weight: 700; color: var(--c-tinta); } .precio__nota { display: block; font-family: var(--f-texto); font-size: var(--t-xs); font-weight: 400; color: var(--c-tinta-suave); } .valoracion { font-size: var(--t-sm); color: var(--c-tinta-suave); display: inline-flex; align-items: center; gap: .3rem; } .valoracion__estrella { color: var(--c-mostaza); } /* --- Aviso de precio orientativo --- */ .aviso-precio { display: flex; gap: var(--e-2); align-items: flex-start; background: var(--c-mostaza-suave); border-left: 3px solid var(--c-mostaza); color: var(--c-aviso); font-size: var(--t-sm); line-height: 1.5; padding: var(--e-3); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .aviso-precio strong { color: var(--c-aviso); } /* --- Fecha de consulta del precio: texto pequeno y gris bajo el precio, sin recuadro. Amazon pide indicar cuando se consulto el importe. --- */ .precio-consultado { font-size: var(--t-xs); line-height: 1.5; color: var(--c-tinta-suave); margin: calc(var(--e-2) * -1) 0 0; } /* --- Nota discreta de afiliados: acompana a los enlaces alli donde estan, en lugar de una banda a pantalla completa en la cabecera --- */ .nota-afiliados { font-size: var(--t-xs); color: var(--c-tinta-suave); margin: 0 0 var(--e-4); display: flex; gap: .45rem; align-items: baseline; } .nota-afiliados a { color: var(--c-tinta-suave); } .nota-afiliados a:hover { color: var(--c-acento-osc); } /* --- Aviso de afiliados (banda superior, ya no se usa) --- */ .aviso-afiliados { background: var(--c-bosque-claro); color: var(--c-bosque); /* En movil ocupa tres lineas del primer pantallazo: lo dejamos legible pero discreto. Es obligatorio que sea visible, no que grite. */ font-size: var(--t-xs); line-height: 1.5; text-align: center; padding: var(--e-2) var(--e-4); margin: 0; border-bottom: 1px solid var(--c-borde); } @media (min-width: 640px) { .aviso-afiliados { font-size: var(--t-sm); padding-block: var(--e-3); } } .aviso-afiliados a { color: var(--c-bosque); font-weight: 600; } /* --- Tabla generica y comparativa --- */ .tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-borde); border-radius: var(--r-md); background: var(--c-superficie); } table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); } caption { text-align: left; font-size: var(--t-sm); color: var(--c-tinta-suave); padding: var(--e-3); } th, td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--c-borde); vertical-align: top; } thead th { background: var(--c-fondo-alt); font-weight: 700; white-space: nowrap; position: sticky; top: 0; } tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--c-fondo); } .tabla-specs th { width: 42%; font-weight: 600; color: var(--c-tinta-suave); background: var(--c-fondo); } .tabla-comparativa td:first-child, .tabla-comparativa th:first-child { min-width: 190px; } .tabla-comparativa .celda-producto { font-weight: 600; } .tabla-comparativa .celda-producto a { color: var(--c-tinta); text-decoration: none; } .tabla-comparativa .celda-producto a:hover { color: var(--c-acento-osc); text-decoration: underline; } .tabla-comparativa .celda-producto small { display: block; font-weight: 400; color: var(--c-tinta-suave); } .dato-vacio { color: var(--c-borde-fuerte); } .pista-scroll { font-size: var(--t-xs); color: var(--c-tinta-suave); margin: var(--e-2) 0 0; } /* --- Pros y contras --- */ .pros-contras { display: grid; gap: var(--e-4); } .panel-pc { border-radius: var(--r-md); padding: var(--e-4) var(--e-5); border: 1px solid var(--c-borde); } .panel-pc h3 { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-md); margin-bottom: var(--e-3); } .panel-pc ul { list-style: none; padding: 0; margin: 0; } .panel-pc li { position: relative; padding-left: 1.6rem; font-size: var(--t-sm); } .panel-pc li::before { position: absolute; left: 0; top: 0; font-weight: 700; } .panel-pc--pros { background: #F2F8F4; border-color: #CFE4D8; } .panel-pc--pros h3 { color: var(--c-ok); } .panel-pc--pros li::before { content: "+"; color: var(--c-ok); font-size: 1.15rem; line-height: 1.45; } .panel-pc--contras { background: var(--c-acento-suave); border-color: #F0D6CB; } .panel-pc--contras h3 { color: var(--c-acento-osc); } .panel-pc--contras li::before { content: "–"; color: var(--c-acento-osc); font-size: 1.15rem; line-height: 1.45; } /* --- Perfil de usuario --- */ .perfil { display: grid; gap: var(--e-4); } .perfil__bloque { background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-md); padding: var(--e-5); } .perfil__bloque h3 { font-size: var(--t-md); display: flex; gap: var(--e-2); align-items: center; } .perfil__bloque--si h3 { color: var(--c-ok); } .perfil__bloque--no h3 { color: var(--c-acento-osc); } .perfil__bloque ul { padding-left: 1.1rem; margin: 0; } .perfil__bloque li { font-size: var(--t-sm); } /* --- FAQ --- */ .faq { border-top: 1px solid var(--c-borde); } .faq details { border-bottom: 1px solid var(--c-borde); } .faq summary { cursor: pointer; list-style: none; padding: var(--e-4) 2.5rem var(--e-4) 0; font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-md); position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: .5rem; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--c-acento); border-bottom: 2px solid var(--c-acento); transform: translateY(-70%) rotate(45deg); transition: transform var(--transicion); } .faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); } .faq summary:hover { color: var(--c-acento-osc); } .faq__respuesta { padding-bottom: var(--e-4); max-width: var(--ancho-texto); } .faq__respuesta p:last-child { margin-bottom: 0; } /* --- Bloque de nota editorial --- */ .nota-editorial { background: var(--c-superficie); border: 1px solid var(--c-borde); border-left: 4px solid var(--c-bosque); border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--e-5); } .nota-editorial h3 { font-size: var(--t-md); } .nota-editorial p:last-child { margin-bottom: 0; } /* --- Fuentes de datos --- */ .fuentes { font-size: var(--t-sm); color: var(--c-tinta-suave); } .fuentes li { margin-bottom: var(--e-3); } .fuentes .dato { color: var(--c-tinta); font-weight: 600; } .pendiente { display: inline-block; background: var(--c-mostaza-suave); color: var(--c-aviso); border: 1px dashed var(--c-mostaza); border-radius: var(--r-sm); padding: .1rem .45rem; font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em; } /* --------------------------------------------------------- 6. PAGINAS CONCRETAS */ /* --- Hero de la home --- */ .hero { background: linear-gradient(170deg, var(--c-bosque) 0%, #0C3E36 100%); color: #fff; padding-block: var(--e-7) var(--e-8); position: relative; overflow: hidden; } .hero::after { content: ""; position: absolute; right: -12%; top: -30%; width: 60%; aspect-ratio: 1; background: radial-gradient(circle, rgba(240,180,41,.16) 0%, transparent 68%); pointer-events: none; } .hero h1 { color: #fff; margin-bottom: var(--e-4); } .hero p { color: rgba(255,255,255,.85); font-size: var(--t-md); max-width: 52ch; } .hero__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); } .hero__pastilla { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: var(--r-full); padding: .3rem .8rem; font-size: var(--t-xs); font-weight: 600; margin-bottom: var(--e-4); } /* --- Selector de especie (perro / gato) --- */ .selector-especie { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-5); } .selector-especie__boton { font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer; background: var(--c-superficie); color: var(--c-tinta); border: 1px solid var(--c-borde-fuerte); border-radius: var(--r-full); padding: .5rem 1.05rem; display: inline-flex; align-items: center; gap: .4rem; transition: background var(--transicion), color var(--transicion), border-color var(--transicion); } .selector-especie__boton:hover { border-color: var(--c-bosque); } .selector-especie__boton[aria-pressed="true"] { background: var(--c-bosque); border-color: var(--c-bosque); color: #fff; } .selector-especie__boton[disabled] { opacity: .55; cursor: not-allowed; } .selector-especie__contador { font-size: var(--t-xs); opacity: .75; } /* --- Rejilla de categorias --- */ .categoria-tarjeta { display: flex; flex-direction: column; gap: var(--e-3); background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-lg); padding: var(--e-5); text-decoration: none; color: var(--c-tinta); transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion); } .categoria-tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--c-bosque); color: var(--c-tinta); } .categoria-tarjeta__icono { width: 46px; height: 46px; flex: none; border-radius: var(--r-md); background: var(--c-bosque-claro); color: var(--c-bosque); display: grid; place-items: center; } .categoria-tarjeta__icono svg { width: 24px; height: 24px; } .categoria-tarjeta h3 { margin: 0; font-size: var(--t-md); } .categoria-tarjeta p { margin: 0; font-size: var(--t-sm); color: var(--c-tinta-suave); } .categoria-tarjeta__enlace { margin-top: auto; font-size: var(--t-sm); font-weight: 600; color: var(--c-acento-osc); } /* --- Ficha de producto --- */ /* minmax(0,1fr) + min-width:0 evita que un hijo con contenido ancho (la tira de miniaturas, una tabla) estire la columna y provoque scroll horizontal en movil. Es el fallo clasico de CSS Grid. */ .ficha__cabecera { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); padding-block: var(--e-5) var(--e-6); } .ficha__cabecera > * { min-width: 0; } .rejilla > *, .petmatch__disposicion > *, .resultado > * { min-width: 0; } .galeria__principal { background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-lg); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; padding: var(--e-4); } .galeria__principal img { width: 100%; height: 100%; object-fit: contain; } .galeria__miniaturas { display: flex; gap: var(--e-2); margin-top: var(--e-3); overflow-x: auto; padding-bottom: var(--e-2); } .galeria__miniatura { flex: none; width: 68px; height: 68px; padding: 4px; cursor: pointer; background: var(--c-superficie); border: 2px solid var(--c-borde); border-radius: var(--r-sm); transition: border-color var(--transicion); } .galeria__miniatura img { width: 100%; height: 100%; object-fit: contain; } .galeria__miniatura:hover { border-color: var(--c-borde-fuerte); } .galeria__miniatura[aria-current="true"] { border-color: var(--c-acento); } .compra { background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-lg); padding: var(--e-5); display: grid; gap: var(--e-4); box-shadow: var(--sombra-1); } .compra__precio { display: flex; align-items: baseline; gap: var(--e-3); flex-wrap: wrap; } .compra__precio .precio { font-size: var(--t-2xl); } .compra__lista { list-style: none; padding: 0; margin: 0; font-size: var(--t-sm); display: grid; gap: var(--e-2); } .compra__lista li { display: flex; gap: var(--e-2); align-items: flex-start; margin: 0; } .compra__lista svg { flex: none; margin-top: 3px; color: var(--c-bosque); } .bloque { padding-block: var(--e-6); border-top: 1px solid var(--c-borde); } .bloque > h2 { font-size: var(--t-xl); } /* --- Barra de compra fija en movil --- */ .barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--c-superficie); border-top: 1px solid var(--c-borde); padding: var(--e-3) var(--e-4); box-shadow: 0 -4px 16px rgba(27,42,39,.08); display: flex; align-items: center; gap: var(--e-3); transform: translateY(110%); transition: transform var(--transicion); padding-bottom: calc(var(--e-3) + env(safe-area-inset-bottom, 0px)); } .barra-movil[data-visible="true"] { transform: translateY(0); } .barra-movil__precio { font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-md); } .barra-movil .boton { flex: 1; padding-block: .65rem; } /* --- PetMatch --- */ .petmatch__panel { background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-lg); padding: var(--e-5); box-shadow: var(--sombra-1); } .campo { margin-bottom: var(--e-5); } .campo > label, .campo__leyenda { display: block; font-weight: 700; font-family: var(--f-titulo); font-size: var(--t-md); margin-bottom: var(--e-2); } .campo__ayuda { font-size: var(--t-sm); color: var(--c-tinta-suave); margin: 0 0 var(--e-3); } .campo fieldset { border: 0; padding: 0; margin: 0; } select.control { width: 100%; font: inherit; font-size: var(--t-base); color: var(--c-tinta); background: var(--c-fondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2352625E' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 1rem center / 16px; border: 1px solid var(--c-borde-fuerte); border-radius: var(--r-md); padding: .8rem 2.6rem .8rem 1rem; appearance: none; cursor: pointer; } select.control:hover { border-color: var(--c-bosque); } /* Casillas de categoria dibujadas como chips accesibles (el input real sigue existiendo y es navegable con teclado). */ .opciones-categoria { display: flex; flex-wrap: wrap; gap: var(--e-2); } .opcion-categoria { position: relative; } .opcion-categoria input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .opcion-categoria span { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--c-borde-fuerte); border-radius: var(--r-full); padding: .5rem 1rem; font-size: var(--t-sm); font-weight: 600; background: var(--c-fondo); transition: all var(--transicion); } .opcion-categoria span::before { content: ""; width: 15px; height: 15px; border-radius: 4px; flex: none; border: 2px solid var(--c-borde-fuerte); background: #fff; transition: all var(--transicion); } .opcion-categoria input:checked + span { background: var(--c-bosque); border-color: var(--c-bosque); color: #fff; } .opcion-categoria input:checked + span::before { background: var(--c-mostaza) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231B2A27' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") no-repeat center / 11px; border-color: var(--c-mostaza); } .opcion-categoria input:focus-visible + span { outline: 3px solid var(--c-acento); outline-offset: 3px; } .opcion-categoria input:hover + span { border-color: var(--c-bosque); } .petmatch__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; } .petmatch__resumen-raza { margin-top: var(--e-4); padding: var(--e-4); border-radius: var(--r-md); background: var(--c-bosque-claro); font-size: var(--t-sm); } .petmatch__resumen-raza dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--e-3); margin: var(--e-3) 0 0; } .petmatch__resumen-raza dt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--c-tinta-suave); font-weight: 700; } .petmatch__resumen-raza dd { margin: 0; font-weight: 600; color: var(--c-bosque); } .resultado { display: grid; gap: var(--e-4); background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-lg); padding: var(--e-5); } .resultado + .resultado { margin-top: var(--e-4); } .resultado__figura { background: var(--c-fondo-alt); border-radius: var(--r-md); aspect-ratio: 4/3; overflow: hidden; } .resultado__figura img { width: 100%; height: 100%; object-fit: contain; padding: var(--e-3); } .resultado__categoria { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--c-tinta-suave); } .resultado h3 { margin: .25rem 0 var(--e-3); font-size: var(--t-lg); } .razones { list-style: none; padding: 0; margin: 0 0 var(--e-4); display: grid; gap: var(--e-2); } .razones li { display: flex; gap: var(--e-2); font-size: var(--t-sm); margin: 0; align-items: flex-start; } .razones svg { flex: none; margin-top: 4px; } .razon--si svg { color: var(--c-ok); } .razon--alerta svg { color: var(--c-aviso); } .razon--alerta { color: var(--c-aviso); } .resultado__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); } .medidor-encaje { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-xs); font-weight: 700; color: var(--c-tinta-suave); text-transform: uppercase; letter-spacing: .06em; } .medidor-encaje__barra { width: 66px; height: 6px; border-radius: var(--r-full); background: var(--c-borde); overflow: hidden; } .medidor-encaje__relleno { height: 100%; background: var(--c-bosque); border-radius: inherit; } .estado-vacio { background: var(--c-mostaza-suave); border: 1px dashed var(--c-mostaza); border-radius: var(--r-lg); padding: var(--e-5); } .estado-vacio h3 { font-size: var(--t-lg); margin-bottom: var(--e-2); } .estado-vacio p { color: var(--c-aviso); } /* --- Paginas legales --- */ .legal h2 { font-size: var(--t-lg); margin-top: var(--e-6); } .legal h3 { font-size: var(--t-md); margin-top: var(--e-5); } .marcador { background: var(--c-mostaza-suave); border-bottom: 2px dotted var(--c-mostaza); color: var(--c-aviso); font-weight: 700; padding: 0 .25rem; border-radius: 3px; } /* ---------------------------------------------------------- 7. UTILIDADES */ .solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .oculto { display: none !important; } .centrado { text-align: center; } .sin-margen { margin-bottom: 0; } .mt-4 { margin-top: var(--e-4); } .mt-6 { margin-top: var(--e-6); } .texto-suave { color: var(--c-tinta-suave); } /* ---------------------------------------------------------- 8. RESPONSIVE */ @media (min-width: 640px) { .contenedor { padding-inline: var(--e-5); } .seccion { padding-block: var(--e-8); } .rejilla--2 { grid-template-columns: repeat(2, 1fr); } .rejilla--3 { grid-template-columns: repeat(2, 1fr); } .pros-contras { grid-template-columns: 1fr 1fr; } .perfil { grid-template-columns: 1fr 1fr; } .pie__rejilla { grid-template-columns: repeat(2, 1fr); } .resultado { grid-template-columns: 200px 1fr; align-items: start; } .galeria__miniatura { width: 76px; height: 76px; } } @media (min-width: 900px) { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } .ficha__cabecera { grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); gap: var(--e-6); align-items: start; } .hero { padding-block: var(--e-8) var(--e-9); } .barra-movil { display: none; } /* La navegacion pasa de menu desplegable a barra horizontal */ .nav-boton { display: none; } .nav { display: block; position: static; padding: 0; margin-left: auto; background: transparent; border: 0; } .nav__lista { display: flex; align-items: center; gap: var(--e-1); } .nav__lista a { padding: .45rem .7rem; font-size: var(--t-sm); white-space: nowrap; } /* Barra horizontal: nombre corto, para que los cinco entren en una fila. */ .nav__corto { display: inline; } .nav__largo { display: none; } .nav__destacado { margin-top: 0; margin-left: var(--e-2); } .nav__destacado a { padding-inline: 1rem; border-radius: var(--r-full); } .petmatch__disposicion { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: var(--e-6); align-items: start; } .petmatch__panel { position: sticky; top: 88px; } .compra { position: sticky; top: 88px; } } @media (min-width: 1200px) { .hero__contenido { max-width: 56ch; } } /* Impresion: quitamos cabecera fija, barra movil y sombras */ @media print { .cabecera, .barra-movil, .pie, .nav { display: none !important; } body { background: #fff; } .tarjeta, .compra { box-shadow: none; } } /* ========================================================================== BLOQUE DE RESEÑAS · "Qué dicen las reseñas reales" Tres piezas: panel de nota + histograma, temas recurrentes y tarjetas de opiniones destacadas. Todo el contenido sale de resumen_resenas en data/productos.json. ========================================================================== */ .resenas__cabecera { display: grid; gap: var(--e-5); align-items: start; } /* --- Panel de nota media + histograma --- */ .nota-global { background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-lg); padding: var(--e-5); text-align: center; } .nota-global__cifra { font-family: var(--f-titulo); font-weight: 700; line-height: 1; font-size: clamp(2.6rem, 2rem + 2.6vw, 3.4rem); color: var(--c-tinta); } .nota-global__sobre { font-size: var(--t-sm); color: var(--c-tinta-suave); } .nota-global__total { font-size: var(--t-sm); color: var(--c-tinta-suave); margin: var(--e-2) 0 0; } /* Estrellas: se dibujan con dos capas de texto para que el relleno sea proporcional a la nota (4,3 pinta un 86 % de la barra de estrellas). */ .estrellas { position: relative; display: inline-block; line-height: 1; white-space: nowrap; } .estrellas__fondo, .estrellas__frente { font-size: 1.05em; letter-spacing: .1em; } .estrellas__fondo { color: var(--c-borde-fuerte); } .estrellas__frente { position: absolute; inset: 0; overflow: hidden; color: var(--c-mostaza); } .estrellas--sm .estrellas__fondo, .estrellas--sm .estrellas__frente { font-size: .92em; } .histograma { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; gap: 6px; } .histograma li { display: grid; grid-template-columns: 3.6rem 1fr 2.5rem; align-items: center; gap: var(--e-2); margin: 0; } .histograma__etiqueta { font-size: var(--t-xs); color: var(--c-tinta-suave); text-align: left; } .histograma__pista { height: 9px; border-radius: var(--r-full); background: var(--c-fondo-alt); overflow: hidden; } .histograma__barra { display: block; height: 100%; border-radius: inherit; background: var(--c-mostaza); } .histograma li[data-estrella="1"] .histograma__barra, .histograma li[data-estrella="2"] .histograma__barra { background: var(--c-acento); } .histograma__pct { font-size: var(--t-xs); font-weight: 700; color: var(--c-tinta-suave); text-align: right; font-variant-numeric: tabular-nums; } .resenas__sintesis p { font-size: var(--t-md); } .resenas__sintesis p:last-child { margin-bottom: 0; } /* --- Temas que más se repiten --- */ .temas { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; gap: var(--e-3); } .temas li { position: relative; margin: 0; padding: var(--e-4) var(--e-4) var(--e-4) 2.4rem; background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-md); } .temas li::before { content: ""; position: absolute; left: var(--e-4); top: 1.55rem; width: 9px; height: 9px; border-radius: 50%; } .temas li[data-tono="positivo"]::before { background: var(--c-ok); } .temas li[data-tono="matiz"]::before { background: var(--c-mostaza); } .temas li[data-tono="negativo"]::before { background: var(--c-acento); } .tema__titulo { display: block; font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-base); margin-bottom: 2px; } .tema__texto { font-size: var(--t-sm); color: var(--c-tinta-suave); margin: 0; } /* --- Tarjetas de opiniones destacadas --- */ .resenas-destacadas { display: grid; gap: var(--e-4); margin-top: var(--e-4); } .resena-tarjeta { display: flex; flex-direction: column; gap: var(--e-2); background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-md); padding: var(--e-4); } .resena-tarjeta__cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-2); } .resena-tarjeta__titulo { font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-base); line-height: 1.3; margin: 0; } .resena-tarjeta__texto { font-size: var(--t-sm); color: var(--c-tinta-suave); margin: 0; } .resena-tarjeta__texto::before { content: "« "; } .resena-tarjeta__texto::after { content: " »"; } .resena-tarjeta__pie { margin-top: auto; padding-top: var(--e-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--t-xs); color: var(--c-tinta-suave); } .resena-tarjeta--baja { border-color: #F0D6CB; background: #FEFAF8; } .chip--verificada { background: #F2F8F4; color: var(--c-ok); } .resenas__aviso { font-size: var(--t-xs); color: var(--c-tinta-suave); margin: var(--e-4) 0 0; max-width: var(--ancho-texto); } @media (min-width: 640px) { .resenas-destacadas { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .resenas__cabecera { grid-template-columns: minmax(240px, 300px) 1fr; gap: var(--e-6); } .temas { grid-template-columns: repeat(2, 1fr); } .resenas-destacadas { grid-template-columns: repeat(3, 1fr); } } /* Aire entre los tres tramos del bloque de reseñas (nota, temas, opiniones) */ #opiniones h3 { margin-top: var(--e-6); font-size: var(--t-lg); } #opiniones h3 + .texto-suave { margin-top: calc(var(--e-3) * -1); }