/* ============================================================================= home.css — CAPA 3 de 3: LAYOUT DE LA HOME Solo secciones de esta página. Carga después de base.css y shop.css. ----------------------------------------------------------------------------- INVARIANTE: aquí no se redefine ningún componente de base.css ni de shop.css. Se comprueba con: grep -nE '^\.(btn|nav|topbar|iconbtn|tools|logo|sucrow|sacts|pcard|chip-f| ann|foot|scrim|cart|cmdk|news|cofstrip|prods)\b' home.css Debe devolver cero líneas. ============================================================================= */ /* =========================================================================== HERO — legibilidad garantizada Antes fallaba por DOS bugs encadenados, no por opacidad mal calibrada: 1) .hero .bg{z-index:-1} sobre un .hero sin contexto de apilamiento hacía que la foto subiera al contexto raíz y se pintara DETRÁS del fondo del (--bg #EDF1F8, opaco), así que la foto nunca se veía. Se cierra con `isolation:isolate` + z-index explícitos 0 / 1 / 2. 2) El overlay usaba class="scrim", que colisiona con el backdrop de overlays de shop.css (nace con opacity:0). .hero .scrim ganaba en position/inset/ background pero no declaraba opacity, así que el degradado era invisible. Renombrado a .hero-scrim: son dos componentes distintos y compartir nombre era el bug, no la especificidad. Medido en navegador, peor caso (foto blanca pura): 1.9:1 → 11.3:1 (AAA). =========================================================================== */ .hero{ position:relative; isolation:isolate; min-height:clamp(560px,78svh,760px); display:flex; align-items:flex-end; overflow:clip; } .hero .bg{ position:absolute; inset:0; z-index:0; background:var(--navy-deep); } .hero .bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 38%; filter:brightness(.82) saturate(.92) contrast(1.02); } /* Tres capas: direccional (densa donde vive el copy, disuelta al 74%) + ancla inferior + piso plano de seguridad contra fotos claras o quemadas. REGLA COMPARTIDA con el slider (.hscrim): la corrección de legibilidad es una sola, así que añadir diapositivas no puede volver a perderla. */ .hero .hero-scrim, .hscrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(96deg, rgba(11,23,54,.84) 0%, rgba(11,23,54,.74) 30%, rgba(11,23,54,.38) 52%, rgba(11,23,54,0) 74%), linear-gradient(to top, rgba(11,23,54,.55) 0%, rgba(11,23,54,.18) 28%, rgba(11,23,54,0) 52%), linear-gradient(0deg, rgba(11,23,54,.22), rgba(11,23,54,.22)); } .hero .wrap{ position:relative; z-index:2; } /* El ancho del copy es un REQUISITO DE CONTRASTE: fuera de la zona densa del gradiente el ratio cae de 7.4:1 a 3.7:1. No ensanchar sin recalcular. */ .hero .inner{ color:#fff; padding:var(--s9) 0; max-width:min(620px,46%); } /* Nunca `opacity` en texto sobre foto: baja el ratio de forma invisible al autor. El chip ES el contenedor de contraste del eyebrow. */ .hero .eyebrow{ display:inline-flex; align-items:center; gap:8px; color:#fff; opacity:1; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.38); border-radius:var(--radius-pill); padding:7px 15px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .hero h1{ font-size:clamp(38px,5.2vw,68px); font-weight:800; margin:20px 0 0; letter-spacing:-.025em; line-height:1.02; text-shadow:0 1px 2px rgba(11,23,54,.5), 0 10px 40px rgba(11,23,54,.35); } .hero p{ font-size:clamp(16px,1.6vw,19px); margin-top:18px; max-width:46ch; color:#E9EDF7; text-shadow:0 1px 2px rgba(11,23,54,.45); } .hero .cta{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; } .hero .proof{ display:flex; gap:20px; flex-wrap:wrap; margin-top:28px; padding-top:20px; border-top:1px solid rgba(255,255,255,.22); font-size:var(--fs-sm); color:#DDE4F2; } .hero .proof span{ display:inline-flex; align-items:center; gap:7px; } .hero .proof .ic{ width:16px; height:16px; color:var(--gold-onimg); } /* Móvil: hero PARTIDO. El copy vive sobre navy sólido (17.6:1), no sobre la foto. Elimina el riesgo de legibilidad en el ~70% del tráfico, sea cual sea la imagen. */ @media(max-width:820px){ .hero{ min-height:0; display:block; background:var(--navy-900); overflow:visible; } .hero .bg{ position:relative; height:46svh; min-height:260px; } .hero .hero-scrim{ top:0; bottom:auto; height:46svh; min-height:260px; background:linear-gradient(to top, var(--navy-900) 0%, rgba(11,23,54,.62) 46%, rgba(11,23,54,.24) 100%); } .hero .inner{ max-width:none; padding:var(--s5) 0 var(--s8); } .hero h1{ font-size:clamp(32px,8vw,44px); } } /* Alto contraste (Windows): los gradientes se descartan, así que la foto debe irse o el texto quedaría directamente encima. */ @media(forced-colors:active){ .hero .bg{ display:none; } .hero .hero-scrim{ background:Canvas; } .hero .eyebrow{ background:Canvas; border-color:CanvasText; } } /* =========================================================================== HERO SLIDER — 3 diapositivas, barrido diagonal + Ken Burns Hereda de `.hero` el tratamiento de scrim (regla compartida arriba), la tipografía y el comportamiento partido en móvil. `.hero` se conserva porque las páginas interiores (catálogo, síntomas) usan la versión estática como cabecera. El barrido con clip-path se mantiene —es la firma visual que el cliente aprobó en la v2— y degrada a fundido simple bajo prefers-reduced-motion. =========================================================================== */ .hero-slider{ position:relative; isolation:isolate; overflow:clip; min-height:clamp(580px,80svh,780px); background:var(--navy-deep); } .hslide{ position:absolute; inset:0; opacity:0; pointer-events:none; clip-path:polygon(100% 0, 100% 0, 100% 100%, 100% 100%); transition:clip-path .9s cubic-bezier(.76,0,.24,1), opacity .01s linear; } .hslide.active{ opacity:1; pointer-events:auto; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); } .hbg{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--navy-deep); } .hbg img{ width:100%; height:100%; object-fit:cover; object-position:50% 38%; filter:brightness(.82) saturate(.92) contrast(1.02); transform:scale(1.03); } .hslide.active .hbg img{ animation:ken 9s ease-out forwards; } @keyframes ken{ from{ transform:scale(1.03); } to{ transform:scale(1.12); } } .hinner{ position:relative; z-index:2; height:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--s6) 14vh; display:flex; flex-direction:column; justify-content:flex-end; } /* Mismo requisito de contraste que el hero estático: el copy no sale de la zona densa del gradiente. */ .hcopy{ max-width:min(620px,46%); color:#fff; } .heyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:var(--fs-xs); letter-spacing:.22em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.38); border-radius:var(--radius-pill); padding:7px 15px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .htitle{ font-family:var(--font-display); font-weight:800; color:#fff; font-size:clamp(38px,5.4vw,72px); line-height:1.02; letter-spacing:-.025em; max-width:16ch; margin:20px 0 0; text-shadow:0 1px 2px rgba(11,23,54,.5), 0 10px 40px rgba(11,23,54,.35); } .hsub{ color:#E9EDF7; font-size:clamp(16px,1.6vw,19px); max-width:46ch; margin-top:18px; text-shadow:0 1px 2px rgba(11,23,54,.45); } .hcta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; } /* Entrada escalonada del texto */ .hslide .hcopy > *{ opacity:0; transform:translateY(26px); } .hslide.active .heyebrow{ animation:hrise .6s .30s cubic-bezier(.2,.8,.2,1) forwards; } .hslide.active .htitle { animation:hrise .7s .42s cubic-bezier(.2,.8,.2,1) forwards; } .hslide.active .hsub { animation:hrise .6s .56s cubic-bezier(.2,.8,.2,1) forwards; } .hslide.active .hcta { animation:hrise .6s .70s cubic-bezier(.2,.8,.2,1) forwards; } @keyframes hrise{ to{ opacity:1; transform:none; } } /* ---------- Controles ---------- */ /* Sobre fotografía los controles invierten a blanco: --accent (#2A3F7A) sobre un scrim navy es prácticamente invisible. */ .harrow, .hpause{ position:absolute; z-index:4; border-radius:50%; cursor:pointer; border:1px solid rgba(255,255,255,.38); background:rgba(11,23,54,.42); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; display:grid; place-items:center; transition:background .18s, border-color .18s, color .18s; } .harrow:hover, .hpause:hover{ background:#fff; color:var(--navy-800); border-color:#fff; } .harrow{ top:50%; transform:translateY(-50%); width:52px; height:52px; } .harrow.prev{ left:24px; } .harrow.next{ right:24px; } .harrow .ic{ width:22px; height:22px; } .harrow.prev .ic{ transform:rotate(180deg); } .hpause{ right:var(--s6); bottom:6vh; width:44px; height:44px; } .hpause .ic-play{ display:none; } .hpause.paused .ic-play{ display:block; } .hpause.paused .ic-pause{ display:none; } .hdots{ position:absolute; left:var(--s6); bottom:6vh; z-index:4; display:flex; gap:10px; } /* Punto visual de 10px con área táctil real de 44px (WCAG 2.5.8) vía ::before. */ .hdot{ position:relative; width:10px; height:10px; padding:0; border:none; border-radius:var(--radius-pill); background:rgba(255,255,255,.45); cursor:pointer; transition:width .3s, background .3s; } .hdot::before{ content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%); } .hdot.on{ width:32px; background:#fff; } .hprog{ position:absolute; left:0; bottom:0; z-index:4; width:100%; height:3px; background:var(--gold); transform-origin:left; transform:scaleX(0); } .hprog.run{ animation:hprog 6.5s linear forwards; } /* DUR en base.js debe coincidir */ @keyframes hprog{ to{ transform:scaleX(1); } } @media(max-width:820px){ /* Igual que el hero estático: el copy baja a navy sólido (17.6:1) y deja de depender de la foto. Los slides pasan a fundido y se apilan en flujo. */ .hero-slider{ min-height:0; background:var(--navy-900); overflow:visible; } .hslide{ position:relative; inset:auto; clip-path:none; display:none; transition:opacity .4s; } .hslide.active{ display:block; } .hbg{ position:relative; height:46svh; min-height:250px; } .hscrim{ top:0; bottom:auto; height:46svh; min-height:250px; background:linear-gradient(to top, var(--navy-900) 0%, rgba(11,23,54,.62) 46%, rgba(11,23,54,.24) 100%); } .hinner{ padding:var(--s5) var(--s6) var(--s8); } .hcopy{ max-width:none; } .htitle{ font-size:clamp(32px,8vw,44px); max-width:none; } .harrow{ width:44px; height:44px; } .harrow.prev{ left:10px; } .harrow.next{ right:10px; } .harrow, .hpause{ top:auto; bottom:auto; } .harrow{ top:23svh; } .hdots{ position:relative; left:auto; bottom:auto; justify-content:center; padding:var(--s5) 0 0; } .hpause{ position:relative; right:auto; bottom:auto; margin:var(--s4) auto 0; } .hprog{ display:none; } } @media(prefers-reduced-motion:reduce){ .hslide{ transition:opacity .3s; clip-path:none !important; } .hslide:not(.active){ opacity:0; } .hslide.active{ opacity:1; } .hslide.active .hbg img{ animation:none; transform:none; } .hslide .hcopy > *{ opacity:1; transform:none; } .hslide.active .heyebrow, .hslide.active .htitle, .hslide.active .hsub, .hslide.active .hcta{ animation:none; } .hprog.run{ animation:none; } } @media(forced-colors:active){ .hbg{ display:none; } .hscrim{ background:Canvas; } .heyebrow{ background:Canvas; border-color:CanvasText; } } /* ---------- BARRA DE CONFIANZA ---------- */ .trust{ border-bottom:1px solid var(--line); background:var(--surface); } .trust .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); padding:22px 0; } .trust .it{ display:flex; gap:12px; align-items:center; justify-content:center; text-align:left; } .trust .ic{ width:24px; height:24px; color:var(--accent); } .trust b{ font-family:var(--font-display); font-size:13.5px; display:block; } .trust span{ font-size:var(--fs-xs); color:var(--ink-muted); } @media(max-width:760px){ .trust .wrap{ grid-template-columns:1fr 1fr; gap:14px; } } /* ---------- CATEGORÍAS — editorial ---------- */ .cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); } @media(max-width:900px){ .cats{ grid-template-columns:1fr 1fr; } } .cat{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4; cursor:pointer; } .cat img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); } .cat:hover img{ transform:scale(1.05); } .cat .ov{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,16,40,0) 45%, rgba(8,16,40,.72) 100%); } .cat .lbl{ position:absolute; left:18px; right:18px; bottom:18px; color:#fff; } .cat .lbl h3{ font-size:20px; font-weight:700; } .cat .lbl span{ font-size:var(--fs-xs); color:rgba(255,255,255,.88); } /* sólido, no opacity */ /* ---------- BANNER EDITORIAL DUAL ---------- */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); } @media(max-width:820px){ .split{ grid-template-columns:1fr; } } .ebanner{ position:relative; border-radius:var(--radius); overflow:hidden; min-height:440px; display:flex; align-items:flex-end; isolation:isolate; } .ebanner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); } .ebanner:hover img{ transform:scale(1.04); } .ebanner .ov{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,16,40,.12), rgba(8,16,40,.72)); } .ebanner .c{ position:relative; color:#fff; padding:var(--s7); } .ebanner .c .eyebrow{ color:var(--gold-onimg); } /* sólido, no #fff al 85% */ .ebanner .c h3{ font-size:30px; font-weight:700; margin:10px 0 14px; max-width:14ch; } /* ---------- BANDA DE HERENCIA ---------- */ .heritage{ background:var(--navy-800); color:#fff; } .heritage .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s8); align-items:center; padding:var(--s9) var(--s6); } @media(max-width:820px){ .heritage .wrap{ grid-template-columns:1fr; gap:var(--s7); } } .heritage .eyebrow{ color:var(--gold-onimg); } .heritage h2{ font-size:clamp(28px,3.6vw,40px); margin:14px 0 16px; color:#fff; } .heritage p{ color:rgba(255,255,255,.86); max-width:46ch; } .heritage .stats{ display:flex; gap:var(--s7); margin-top:var(--s6); flex-wrap:wrap; } .heritage .stats b{ font-family:var(--font-display); font-size:34px; font-weight:800; display:block; color:#fff; } .heritage .stats span{ font-size:12.5px; color:rgba(255,255,255,.76); } .heritage .ph{ border-radius:var(--radius); overflow:hidden; aspect-ratio:5/4; } .heritage .ph img{ width:100%; height:100%; object-fit:cover; } /* ---------- BLOG ---------- */ .blogs{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); } @media(max-width:820px){ .blogs{ grid-template-columns:1fr; } } .post{ cursor:pointer; } .post .imgwrap{ aspect-ratio:3/2; border-radius:var(--radius); } .post:hover .imgwrap img{ transform:scale(1.04); } .post .eyebrow{ margin:16px 0 8px; display:block; } .post h4{ font-size:19px; font-weight:700; letter-spacing:-.01em; } /* =========================================================================== SECCIONES DENSAS NUEVAS — portadas de theme-botica.css (líneas 136-221) con traducciones de tokens para la piel navy. =========================================================================== */ /* Contador animado (banda navy-deep) */ .countband{ padding:var(--s8) 0; } .countgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); text-align:center; } .countitem{ display:flex; flex-direction:column; gap:4px; } .bignum{ font-family:var(--font-display); font-weight:600; line-height:.9; font-size:clamp(40px,6vw,72px); color:var(--ink-invert); } .bignum .suf{ color:var(--gold-onimg); } .countlbl{ font-family:var(--font-body); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:color-mix(in srgb,var(--ink-invert) 74%, transparent); } @media(max-width:720px){ .countgrid{ grid-template-columns:repeat(2,1fr); gap:var(--s6) var(--s4); } } /* Compra por síntoma */ .symchips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:var(--s5); } .symchip{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border-radius:var(--radius-pill); background:var(--surface); border:1px solid var(--line-strong); color:var(--ink); font-family:var(--font-body); font-weight:600; font-size:14px; cursor:pointer; box-shadow:var(--shadow-sm); transition:background .16s, border-color .16s, color .16s, transform .16s; } .symchip .ic{ width:18px; height:18px; color:var(--sage); } .symchip:hover{ transform:translateY(-2px); border-color:var(--accent); } .symchip.on{ background:var(--accent-tint); border-color:var(--accent); color:var(--accent); } .symchip.on .ic{ color:var(--accent); } /* Gliser — marca propia (banda destacada) */ .gliser{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s7); align-items:center; } .gliser-media{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .gliser-media .imgwrap{ border-radius:var(--radius); aspect-ratio:4/5; border:1px solid var(--line-strong); background:var(--surface); box-shadow:var(--shadow-sm); } .gliser-media .imgwrap img{ object-fit:contain; padding:12%; } .seal{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--radius-pill); background:color-mix(in srgb,var(--gold) 14%, var(--surface)); border:1px solid color-mix(in srgb,var(--gold) 50%,transparent); color:var(--ink); font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:.04em; } @media(max-width:820px){ .gliser{ grid-template-columns:1fr; gap:var(--s6); } } /* Bundles / Kit-protocolo .kit pasa a REJILLA DE FILAS FIJAS: público · fotos · título · descripción (única fila 1fr — la que absorbe la diferencia de longitud del texto) · precio · avisos · botón. tarjetaKit() en shop.js SIEMPRE emite las 7 ranuras, aunque alguna esté vacía (kit sin audiencia, kit sin nota) — es la única forma de que dos cards con contenido distinto midan exactamente lo mismo dentro de su sección. Antes era flex+margin-top:auto en .kit-price, que solo empujaba el precio: los bloques legales y el botón, que venían después, quedaban fuera de ese mecanismo y descuadraban la fila igual. */ /* `grid-auto-rows:1fr` es lo que iguala TODAS las cards de la sección, no solo las de una misma fila: el estirado nativo de la rejilla actúa fila a fila, así que con 6 kits en 3 columnas las dos filas quedaban con alturas distintas (436,7 vs 458,3 px medidos). Con esto se resuelve en CSS puro — sin escuchador de resize, sin recálculos de layout y sin depender de que el JS cargue. */ .kits{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:var(--s5); } .kit{ display:grid; grid-template-rows:auto auto auto 1fr auto auto auto; gap:var(--s3); padding:var(--s5); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow-sm); } /* Tira de fotos de altura CONSTANTE: depende del ancho de la card (aspect-ratio), no del número de productos del kit. Antes cada foto llevaba flex:1 con aspect-ratio:1 propio, así que un kit de 2 productos tenía fotos más grandes -y por tanto una tira más alta- que uno de 3. Un kit de 2 rellena la tercera celda con un imgwrap vacío (lo resuelve tarjetaKit en shop.js). */ .kit-photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); aspect-ratio:3/1; } .kit-photos .imgwrap{ border-radius:10px; border:1px solid var(--line); background:var(--sunken); } .kit-photos .imgwrap img{ width:100%; height:100%; object-fit:contain; padding:14%; } .kit h4{ font-size:19px; } .kit-price{ display:flex; align-items:baseline; gap:10px; } .kit-price .now{ font-family:var(--font-display); font-weight:600; font-size:22px; color:var(--ink); } .kit-price .was{ color:var(--ink-muted); text-decoration:line-through; font-size:14px; } .kit-save{ font-family:var(--font-body); font-weight:700; font-size:12px; color:var(--accent); background:var(--accent-tint); padding:4px 9px; border-radius:var(--radius-pill); } .kit-aud{ align-self:flex-start; font-family:var(--font-body); font-weight:700; font-size:11.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--primary); background:var(--accent-tint); border:1px solid var(--navy-100); padding:4px 10px; border-radius:var(--radius-pill); } /* Ranura de audiencia en los kits "protocolo" (no tienen audience): se reserva el alto de la fila para que la rejilla de 7 filas no se desplace, pero no debe verse una insignia vacía flotando. visibility:hidden -no display:none- porque conserva el hueco en el flujo; esto es un rótulo de categoría, no la leyenda regulatoria, así que aquí sí es cosmético. */ .kit-aud[aria-hidden="true"]{ visibility:hidden; } :root[data-theme="dark"] .kit-aud{ border-color:var(--line-strong); } /* Avisos: insignias circulares de altura FIJA en vez de bloques de texto -antes .kit-legal-, que es lo que descuadraba la card cuando un kit traía dos avisos (kit-bebes) y el resto uno. El texto íntegro de cada leyenda sigue viviendo en el DOM: aria-label + .sr-only + el tooltip compartido .tip/.tip-bubble de base.css, visible también con foco de teclado. min-height fija la fila aunque el kit no traiga ningún aviso. */ .kit-flags{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); min-height:2rem; } .kit-flag{ display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:50%; background:var(--sunken); border:1px solid var(--line); color:var(--ink-muted); cursor:default; } .kit-flag .ic{ width:1.1rem; height:1.1rem; } @media(max-width:820px){ .kits{ grid-template-columns:1fr; } } /* Reseñas con foto */ .reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); } .review{ padding:var(--s5); display:flex; flex-direction:column; gap:12px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow-sm); } .review::before{ content:"\201C"; font-family:var(--font-display); font-size:48px; line-height:.8; color:var(--gold); display:block; } .rv-stars{ color:var(--gold); letter-spacing:2px; font-size:15px; } .rv-quote{ font-family:var(--font-body); font-style:italic; font-weight:400; font-size:18px; line-height:1.4; color:var(--ink); } .rv-top{ display:flex; align-items:center; gap:12px; } .rv-photo{ width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--surface); box-shadow:var(--shadow-sm); } .rv-name{ font-family:var(--font-body); font-weight:600; font-size:14px; color:var(--ink); } .rv-meta{ font-size:12px; color:var(--ink-muted); } @media(max-width:820px){ .reviews{ grid-template-columns:1fr; } } /* Médicos / Agendar */ .docs{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); } .doc{ overflow:hidden; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow-sm); } .doc .imgwrap{ aspect-ratio:4/3; } .doc .imgwrap img{ object-fit:cover; } .doc-body{ padding:16px 18px; display:flex; flex-direction:column; gap:6px; } .doc-body h4{ font-size:18px; } .doc-spec{ font-size:12.5px; color:var(--sage); font-weight:600; letter-spacing:.04em; text-transform:uppercase; } @media(max-width:820px){ .docs{ grid-template-columns:1fr; } } /* Marquee de marcas */ .brandmarquee{ overflow:hidden; border-block:1px solid var(--line-strong); background:var(--bg-alt); } .bm-track{ display:inline-flex; align-items:center; gap:64px; padding:22px 32px; white-space:nowrap; font-family:var(--font-display); font-weight:600; font-size:30px; color:var(--ink-muted); animation:bm 26s linear infinite; } .bm-track .dot{ color:var(--gold); } .brandmarquee:hover .bm-track{ animation-play-state:paused; } @keyframes bm{ to{ transform:translateX(-50%) } } /* Chochito loyalty */ .loyalty{ display:grid; grid-template-columns:1.2fr .8fr; gap:var(--s6); align-items:center; background:var(--accent-tint); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); border-radius:var(--radius-lg); padding:var(--s6) var(--s7); } .loyalty h3{ font-size:clamp(24px,3vw,34px); color:var(--ink); } @media(max-width:820px){ .loyalty{ grid-template-columns:1fr; padding:var(--s6); } } /* Instagram / lifestyle grid */ .iggrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; } .igcell{ aspect-ratio:1; border-radius:12px; overflow:hidden; position:relative; border:1px solid var(--line); } .igcell img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1); } .igcell:hover img{ transform:scale(1.08); } @media(max-width:820px){ .iggrid{ grid-template-columns:repeat(3,1fr); } } @media (prefers-reduced-motion:reduce){ .bm-track{ animation:none; } .igcell:hover img{ transform:none; } } /* Conteo por síntoma: el número sale del catálogo, así que el chip no puede prometer resultados que no existen. */ .symcount{ min-width:20px; padding:0 6px; border-radius:var(--radius-pill); background:var(--sunken); color:var(--ink-muted); font-size:11px; font-weight:700; line-height:18px; text-align:center; } .symchip.on .symcount{ background:var(--accent); color:#fff; } .sk-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); } @media(max-width:900px){ .sk-grid{ grid-template-columns:1fr 1fr; } }