/* anda CONMiGO — landing clinica. Toma de Kaisfera la ESTRUCTURA (hero que presenta todo de golpe, botones cuadrados, retícula seria) pero no la voz: Kaisfera es tecnología y esto es clínica. Aquí mandan las personas, la luz cálida y las formas orgánicas (la marca es una huella). Nada de mono. La idea es PROGRESIÓN: Infantil -> TEENS -> Familia. El hero es un carrusel que avanza solo por las tres etapas y las pestañas son la linea de tiempo: la barra que se llena de 0 a 14 a 22 a familia es el paso del tiempo. */ /* ÍNDICE — el fichero va por CAPAS: cada regla vive en la suya, y su @media va pegado a su bloque (capa 5 del mapa: no hay un bloque «móvil» al final). Convención y porqués: docs/css.md. 1. TOKENS Y PALETAS — lo único que declara color, sombra, radio o fuente · Marca, líneas, terapias, superficies y tipografía · Paletas de línea: cada una manda solo en su página · Cómo se propaga el acento en una página de línea · Tonos del botón por paleta 2. BASE — reset, tipografía, secciones y foco · Reset, tipografía y utilidades · Rótulos y jerarquía de texto · Secciones y anclajes · Foco, salto al contenido y landmarks · Protección del contenido (copia.js: fotos; la selección NO se bloquea) 3. COMPONENTES COMPARTIDOS — lo que usan varias plantillas · Botones · Cabecera y mega-menú · Método: cuatro pasos · Cierre partido · Cabecera de página de contenido · Listas con marca de verificación · Bloque de muestra y cita destacada · Acordeón · Banda de llamada a la acción · Pie · Menú móvil · Acciones flotantes y barra fija de móvil · Cajón de cita · Tarjeta de área/terapia · Enfoque 360º · Mapa de centros · Migas de pan · Terapias relacionadas · Ilustración de sección · Cintas: reseñas y equipo · Cabecera de sección · Chips · Tarjeta de artículo/servicio · Bloque por tema · Panel de producto y línea de tiempo · Nota de disponibilidad 4. SECCIONES POR PLANTILLA — cada bloque solo lo usa su página · Portada: carrusel, pestañas, «por qué» y mosaico · Páginas de línea · Landing de terapia · Página de centros · Ficha de centro · Blog · Trabaja con nosotros · Servicio × centro · Mapa web · Equipo · Colegios · Ayudas y becas · 404 · Contacto · Índice de terapias · Programas y talleres · «Abre tu centro» · Páginas de provincia 6. MOVIMIENTO — fotogramas, transición entre documentos y «menos movimiento» · Movimiento 7. TÁCTIL — (hover:none): sin desenfoques ni transición entre documentos · Táctil */ /* ═══ 1. TOKENS Y PALETAS — lo único que declara color, sombra, radio o fuente ═══ */ /* ── Marca, líneas, terapias, superficies y tipografía ── */ :root{ /* ── MARCA (lo único que se ve en la home). Naranja corporativo + el oliva y el lima del logotipo. Sacados del CSS y los logotipos del sitio real. ── */ --inf:#f29310; --inf-hi:#d97d08; /* naranja corporativo (rellenos) */ --inf-txt:#9a5705; /* el naranja legible: 5,6:1 sobre blanco */ --inf-lima:#aeb538; /* lima de MiGO. SOLO gráfico: 2,2:1 */ --olive:#7d8141; --olive-hi:#676b34; /* oliva del wordmark (5,6:1: vale para texto) */ --grad:linear-gradient(100deg,var(--inf),var(--inf-lima) 55%,var(--olive)); /* El bloque de cierre en diagonal gusta como está (naranja -> oliva). No tocar. */ --grad-deep:linear-gradient(100deg,#a85f06,#8a6a1f 46%,var(--olive-hi)); /* ── LÍNEAS. No se mezclan con la marca en la misma pantalla: cada una manda solo en su propia página. Aquí solo se declaran. ── */ --teen:#7d39b3; --teen-hi:#6c4394; --teen-soft:#eee2f7; /* TEENS: morado del wordmark */ /* Familia: PROPUESTA nueva. El oliva oscuro original (#60614c) no gusta. Un petróleo/salvia profundo: calma, adulto, y no pelea ni con el naranja ni con el morado. 6,1:1 sobre blanco. Pendiente de OK. */ --fam:#2f6f73; --fam-hi:#265b5e; --fam-soft:#e3eeec; --luz-teen:rgba(125,57,179,.24); --luz-rosa:rgba(252,89,187,.20); --luz-fam:rgba(47,111,115,.26); --luz-salvia:rgba(120,170,165,.26); /* ── ACENTO ACTIVO. Por defecto, la marca. Cada línea lo redefine en su diapositiva y en su página; así el morado y el petróleo nunca aparecen donde no les toca: se declaran abajo, con `--acc-btn`. ── */ /* ── Color POR TERAPIA. Es un sistema real de la marca: cada disciplina tiene el suyo y los iconos ilustrados ya vienen teñidos, así que la ficha de Logopedia es rosa y la de Atención Temprana lima — no naranja de línea. Dos tonos: el VIVO (icono, filo, fondo) y el de TEXTO, oscurecido hasta AA, porque el rosa y el lima de marca dan 2,8:1 y 2,2:1 sobre blanco. ── */ --t-logopedia:#ec728f; --t-logopedia-txt:#a8324f; --t-logopedia-soft:#fde7ec; --t-temprana:#aeb538; --t-temprana-txt:#5e621f; --t-temprana-soft:#f1f3d8; --t-psicologia:#3876b3; --t-psicologia-txt:#2f6ba3; --t-psicologia-soft:#e4eef7; --t-psicopedagogia:#3876b3; --t-psicopedagogia-txt:#2f6ba3; --t-psicopedagogia-soft:#e4eef7; --t-ocupacional:#f29310; --t-ocupacional-txt:#8f5704; --t-ocupacional-soft:#fdeedb; --t-fisio:#f29310; --t-fisio-txt:#8f5704; --t-fisio-soft:#fdeedb; --acc:var(--inf); --acc-hi:var(--inf-hi); --acc-txt:var(--inf-txt); --acc-soft:var(--inf-soft); --acc-btn:var(--inf); /* el naranja de marca, sin apagar */ --la:var(--luz-inf); --lb:var(--luz-lima); /* ── Superficies cálidas ── */ --bg:#fffdfa; --surface:#ffffff; --surface-2:#faf6ee; --surface-hi:#f1ebdf; --border:#ebe5d9; --border-hi:#ddd5c4; --text:#2b2926; --muted:#5f5a53; --subtle:#6f6a62; --inf-soft:#fdeedb; --lima-soft:#f1f3d8; --luz-inf:rgba(242,147,16,.34); --luz-lima:rgba(174,181,56,.30); --luz-oliva:rgba(125,129,65,.26); --sh-sm:0 1px 1px rgba(43,41,38,.04),0 0 0 1px rgba(43,41,38,.03); --sh-lg:0 18px 40px -14px rgba(43,41,38,.18),0 3px 10px -4px rgba(43,41,38,.08); --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --titulo:var(--sans); --wrap:1120px; --navh:66px; --r:20px; } /* El blanco sobre el naranja de marca (#f29310) da 2,34:1. Se mantiene el naranja y se oscurece el texto (6,2:1); al pasar el ratón, un naranja apenas más cálido que sigue en AA con ese texto. Donde el botón es de otro color (oscuro), el texto sigue blanco. */ :root{--acc-btn-txt:var(--text);--acc-btn-hi:#e0850a} /* ── Paletas de línea: cada una manda solo en su página ── */ .teen,body.linea-teen{--acc:var(--teen);--acc-hi:var(--teen-hi);--acc-txt:var(--teen);--acc-soft:var(--teen-soft);--acc-btn:var(--teen);--la:var(--luz-teen);--lb:var(--luz-rosa)} .franq,body.linea-franq{--acc:#8a6a1f;--acc-hi:#6e5416;--acc-txt:#6e5416;--acc-soft:#f3ecd9;--acc-btn:#8a6a1f;--la:rgba(138,106,31,.26);--lb:var(--luz-inf)} .online,body.linea-online{--acc:var(--olive);--acc-hi:var(--olive-hi);--acc-txt:var(--olive-hi);--acc-soft:var(--lima-soft);--acc-btn:var(--olive-hi);--la:var(--luz-lima);--lb:var(--luz-oliva)} .fam,body.linea-fam{--acc:var(--fam);--acc-hi:var(--fam-hi);--acc-txt:var(--fam);--acc-soft:var(--fam-soft);--acc-btn:var(--fam);--la:var(--luz-fam);--lb:var(--luz-salvia)} body.linea-inf .eb,body.linea-teen .eb,body.linea-fam .eb,body.linea-inf .eyebrow,body.linea-teen .eyebrow,body.linea-fam .eyebrow{color:var(--acc-txt)} .c-linea--inf{--acc:var(--inf);--acc-hi:var(--inf-hi);--acc-txt:var(--inf-txt);--acc-soft:var(--inf-soft);--acc-btn:var(--inf)} .c-linea--teen{--acc:var(--teen);--acc-hi:var(--teen-hi);--acc-txt:var(--teen);--acc-soft:var(--teen-soft);--acc-btn:var(--teen)} /* El cajón de cita se tiñe de la línea desde la que se abrió: pedirla en TEENS y ver un formulario naranja hace dudar de si has pulsado donde querías. */ dialog.cita-dlg.es-teen{--acc:var(--teen);--acc-hi:var(--teen-hi);--acc-txt:var(--teen);--acc-soft:var(--teen-soft);--acc-btn:var(--teen)} dialog.cita-dlg.es-fam{--acc:var(--fam);--acc-hi:var(--fam-hi);--acc-txt:var(--fam);--acc-soft:var(--fam-soft);--acc-btn:var(--fam)} .teen,body.linea-teen,.fam,body.linea-fam,.online,body.linea-online,.franq,body.linea-franq,.c-linea--teen, dialog.cita-dlg.es-teen,dialog.cita-dlg.es-fam,.empleo{--acc-btn-txt:#fff;--acc-btn-hi:var(--acc-hi)} .c-linea--inf{--acc-btn-txt:var(--text);--acc-btn-hi:#e0850a} /* Cada diapositiva del carrusel de la portada lleva los colores de SU línea. Hasta ahora heredaban los de la página (naranja) y solo coincidían por casualidad: al cambiar el color de marca, Infantil salía verde. */ .slide.inf{--acc:var(--inf);--acc-hi:var(--inf-hi);--acc-txt:var(--inf-txt);--acc-soft:var(--inf-soft);--acc-btn:var(--inf);--acc-btn-txt:var(--text);--acc-btn-hi:#e0850a} .slide.teen{--acc:var(--teen);--acc-hi:var(--teen-hi);--acc-txt:var(--teen);--acc-soft:var(--teen-soft);--acc-btn:var(--teen);--acc-btn-txt:#fff;--acc-btn-hi:var(--teen-hi)} .slide.fam{--acc:var(--fam);--acc-hi:var(--fam-hi);--acc-txt:var(--fam);--acc-soft:var(--fam-soft);--acc-btn:var(--fam);--acc-btn-txt:#fff;--acc-btn-hi:var(--fam-hi)} .slide.online{--acc:var(--olive);--acc-hi:var(--olive-hi);--acc-txt:var(--olive-hi);--acc-soft:var(--lima-soft);--acc-btn:var(--olive-hi);--acc-btn-txt:#fff;--acc-btn-hi:#4c4f19} .slide.franq{--acc:#8a6a1f;--acc-hi:#6e5416;--acc-txt:#6e5416;--acc-soft:#f3ecd9;--acc-btn:#8a6a1f;--acc-btn-txt:#fff;--acc-btn-hi:#6e5416} /* ── Portada en el verde del logo (decisión de Javi, 2026-09-05) ── La home presenta TODAS las líneas, así que no puede ir en el naranja de Infantil. El oliva es el verde real del logotipo. Cada diapositiva del carrusel conserva el color de su línea. */ body.portada{--acc:#7d8141;--acc-hi:#5e621f;--acc-txt:#5e621f;--acc-soft:#f1f3d8;--acc-btn:#5e621f;--acc-btn-txt:#fff;--acc-btn-hi:#4c4f19;--la:rgba(125,129,65,.22);--lb:rgba(242,147,16,.14)} body.portada .slide.marca .s-name{background:linear-gradient(100deg,#7d8141 10%,#5e621f 60%,#3f4318);background-size:150% 100%;-webkit-background-clip:text;background-clip:text;color:transparent} /* El cajón de cita es de las familias: si la línea es Infantil (o aún no se ha elegido) va en naranja, aunque la página de fondo sea la portada verde o una corporativa. */ /* El cajón arranca en el verde de la marca y toma el color de la línea al elegir a quién acompañamos: Infantil naranja, TEENS morado, Familia verde azulado. */ dialog.cita-dlg:not(.es-teen):not(.es-fam):not(.es-inf){--acc:#7d8141;--acc-hi:#5e621f;--acc-txt:#5e621f;--acc-soft:#f1f3d8;--acc-btn:#5e621f;--acc-btn-txt:#fff;--acc-btn-hi:#4c4f19} dialog.cita-dlg.es-inf{--acc:var(--inf);--acc-hi:var(--inf-hi);--acc-txt:var(--inf-txt);--acc-soft:var(--inf-soft);--acc-btn:var(--inf);--acc-btn-txt:var(--text);--acc-btn-hi:#e0850a} /* ── Cómo se propaga el acento en una página de línea ── */ body[class*=linea-] .step .n{color:var(--acc-txt)} body[class*=linea-] .check-list svg{color:var(--acc)} body[class*=linea-] .cta-band{background:linear-gradient(110deg,var(--acc-hi),var(--acc))} body[class*=linea-] .cta-band .btn{color:var(--acc-txt)} body[class*=linea-] .cta-band .btn:hover{background:var(--acc-soft)} body[class*=linea-]:not(.terapia) .t-foto::before{border-radius:54% 46% 60% 40% / 44% 56% 44% 56%} body[class*=linea-]:not(.terapia) .t-foto img{width:82%;height:82%;object-fit:cover; border-radius:56% 44% 62% 38% / 42% 58% 42% 58%;box-shadow:var(--sh-lg)} /* Cuando la paleta viene en el `style` del elemento (una ficha de terapia, una tarjeta del blog), los dos tonos del botón vienen CON ella: los pone `paleta_btn()` de `_molde.py`. Antes había diez selectores `[style*="--acc-btn:#…"]` aquí, uno por color, que se rompían si cambiaba el color. */ .reembolso{margin:18px 0 0;font-size:14.5px;color:var(--muted);display:flex;gap:8px;align-items:flex-start} .reembolso svg{flex:none;width:16px;height:16px;margin-top:3px;color:var(--acc-txt)} /* ═══ 2. BASE — reset, tipografía, secciones y foco ═══ */ /* ── Reset, tipografía y utilidades ── */ *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.55; letter-spacing:-.006em;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img,picture,svg,video{display:block;max-width:100%} .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Nada se escapa a los lados. El mega-menú de escritorio (oculto con visibility, pero ocupa sitio) y la caja fija de la marca ensanchaban el documento: en tableta se podía arrastrar la página hacia la derecha. `clip` no crea contenedor de scroll, así que el header sticky sigue pegado al viewport (con `hidden` en body dejaría de estarlo). */ html,body{overflow-x:clip} /* Cuerpo a 16px en móvil, y los campos de formulario también (por debajo iOS hace zoom). */ @media(max-width:760px){ body{font-size:16px} } /* rótulo pequeño: sans en versalitas, no mono (mono es código, esto es clínica) */ .eb,.eyebrow,.s-kicker,.tab .eb,.step .n{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase} .s-kicker{margin:0 0 14px;color:var(--muted)} .eb{color:var(--acc-txt);margin:0 0 18px} .eyebrow{color:var(--acc-txt);margin:0 0 14px} .h2{font-size:clamp(30px,4.4vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0 auto 18px;max-width:16ch;text-wrap:balance} .lede{font-size:17px;color:var(--muted);max-width:56ch;margin:0 auto;line-height:1.6} .eb{transition:color .35s,background-color .35s,border-color .35s} .eyebrow{transition:color .35s,background-color .35s,border-color .35s} /* ── Secciones y anclajes ── */ .sec{padding:66px 0} .sec.alt{background:var(--surface-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .sec.center{text-align:center} #contenido{view-transition-name:blog-contenido} /* El header pegado tapaba el destino de los anclajes (#areas, #valoracion, índice del artículo). En el blog, además, la barra de temas va debajo del header. */ [id]{scroll-margin-top:calc(var(--navh) + 16px)} body:has(.temas-nav) [id]{scroll-margin-top:calc(var(--navh) + 66px)} /* Enlace de salto (lo inserta partials.js): fuera de pantalla hasta que recibe el foco. */ .skip{position:absolute;left:12px;top:-100px;z-index:2000;padding:10px 16px;border-radius:8px;background:#2b2926;color:#fff;font-weight:700;font-size:14px;text-decoration:none;transition:top .15s} .skip:focus-visible{top:12px;outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #2b2926} /* El destino del salto recibe el foco (tabindex=-1) pero no necesita anillo. */ #contenido:focus{outline:none} /* La cabecera envuelve al nav para dar el landmark
; en display:contents para no romper el sticky. */ .cab{display:contents} /* Anillo de foco uniforme en los controles que el sitio estiliza sin borde. */ .drop > button:focus-visible,.mnav > summary:focus-visible,.tab:focus-visible,.tn:focus-visible,.chip:focus-visible, .carr-fl:focus-visible,.mapa-paises button:focus-visible,.c-prov:focus-visible,.volver-paso:focus-visible, .cita-head .x:focus-visible,.cita-elegido button:focus-visible,summary:focus-visible{outline:2px solid var(--text);outline-offset:2px} /* ── Protección del contenido (2026-09-09) ── La otra mitad de `copia.js`: lo que solo el CSS puede hacer. Va en la capa 2 aunque nombre componentes de las capas 3 y 4 a propósito: es UNA decisión (de quién es lo que se publica) y se lee de una vez; no compite con nadie porque ninguna otra regla del fichero declara estas propiedades. Solo las FOTOS de contenido: en táctil, la pulsación larga es el «guardar imagen» de escritorio, y `-webkit-touch-callout` es lo único que la corta en iOS; `-webkit-user-drag` evita arrastrar la foto al escritorio. La lista es la MISMA que la de `copia.js`; fuera quedan el logotipo, los sellos, los iconos de terapia y el mapa. NO hay `user-select:none` en ninguna parte, y es una decisión, no un olvido: · Se llevaba por delante la firma de autoría. Sin selección no hay evento `copy`, así que en el cuerpo del artículo —justo donde más interesa firmar— no se pegaba nada. Medido: con la regla puesta, `getSelection().toString()` devolvía cadena vacía incluso seleccionando por código. · Protege poco: el texto sigue entero en «ver código fuente» y en el modo lector. · Y estorba a quien lo necesita (seleccionar para leer, para el traductor, para un lector de pantalla que sigue la selección). Con centros que pueden tener plazas concertadas, una barrera puesta a propósito es difícil de defender (RD 1112/2018). Ver docs/copia-contenido.md y docs/accesibilidad.md. */ .post-portada img,.prosa img,.gal-foto img,.c-galeria img,.retrato img,.miembro img,.t-foto img, .pc-img img:not(.pc-ico),.tile img,.s-photo img,.viz img,.libro-img img{ -webkit-touch-callout:none;-webkit-user-drag:none} /* ═══ 3. COMPONENTES COMPARTIDOS — lo que usan varias plantillas ═══ */ /* ── Botones (los cuadrados de Kaisfera: gustan) ── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:inherit;height:36px;padding:0 14px; font-size:13px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;border-radius:6px;cursor:pointer;border:1px solid transparent;transition:.12s ease} .btn:active{transform:translateY(.5px)} .btn svg{width:15px;height:15px;transition:transform .2s} .btn-arrow:hover svg{transform:translateX(3px)} .btn-ghost{background:var(--surface);color:var(--muted);border-color:var(--border-hi);box-shadow:var(--sh-sm)} .btn-ghost:hover{background:var(--surface-2);color:var(--text)} /* Sobre el naranja de marca el blanco da 2,34:1: el texto del botón lo dice la paleta (`--acc-btn-txt`), oscuro en naranja y blanco en todo lo demás. Igual el hover. */ .btn-primary{background:var(--acc-btn);color:var(--acc-btn-txt);box-shadow:0 1px 2px color-mix(in srgb,var(--acc-btn) 25%,transparent),inset 0 1px 0 rgba(255,255,255,.18)} .btn-color{background:var(--acc-btn);color:var(--acc-btn-txt);box-shadow:0 1px 2px rgba(43,41,38,.18),inset 0 1px 0 rgba(255,255,255,.2)} .btn-primary:hover,.btn-color:hover{background:var(--acc-btn-hi)} .btn-lg{height:48px;padding:0 22px;font-size:14px} /* Objetivo táctil de 44 px en móvil (40 donde el sitio es justo), sin tocar el escritorio. El resto de los objetivos vive en el @media de cada componente. */ @media(max-width:760px){ .btn{height:auto;min-height:44px} } /* ── Header (este gusta: no tocar) ── */ .nav{position:sticky;top:0;z-index:1100;height:var(--navh);background:rgba(255,253,250,.86);backdrop-filter:blur(12px); border-bottom:1px solid var(--border)} .nav-in{display:flex;align-items:center;gap:28px;height:var(--navh);max-width:var(--wrap);margin:0 auto;padding:0 26px} .brand{display:inline-flex;align-items:center;gap:0} .brand img{height:38px;width:auto} .nav-links{display:flex;align-items:center;gap:2px;margin-left:10px} .nav-links > a,.drop > button{position:relative;background:none;border:none;color:var(--muted);font:inherit;font-size:14px;font-weight:500; padding:8px 13px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color .15s} .nav-links > a:hover,.drop > button:hover,.drop:hover > button{color:var(--text)} .nav-links > a::after,.drop > button::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;border-radius:2px; background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .18s} .nav-links > a:hover::after,.drop:hover > button::after{transform:scaleX(1)} .drop{position:relative} .drop > button svg{width:12px;height:12px;opacity:.6;transition:transform .2s} .drop:hover > button svg{transform:rotate(180deg)} .drop-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:260px;background:var(--surface);border:1px solid var(--border); border-radius:14px;padding:7px;box-shadow:var(--sh-lg);opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .18s,transform .18s,visibility .18s} .drop:hover .drop-menu{opacity:1;visibility:visible;transform:translateY(0)} .drop-menu a{display:block;padding:9px 12px;border-radius:9px;transition:background .15s} .drop-menu a:hover{background:var(--surface-2)} .drop-menu.narrow{min-width:220px} /* Los enlaces de «Nosotros» se subrayan al pasar por encima igual que los del mega-menú de Servicios: antes solo cambiaban de fondo y no se notaba que fueran enlaces. */ .drop-menu a.simple{font-size:14px;font-weight:500;color:var(--text);position:relative} .drop-menu a.simple::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:1.5px;border-radius:2px; background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .18s} .drop-menu a.simple:hover::after,.drop-menu a.simple:focus-visible::after{transform:scaleX(1)} /* Mega-menú de servicios: los cinco productos de la marca, cada uno con su color. Es un ÍNDICE, no un lavado de color: aquí sí conviven. */ .drop-menu.mega{min-width:880px;max-width:calc(100vw - 48px);left:-8px;padding:0} .mega-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:18px 14px} .mega .col{position:relative;padding:0 8px} .mega .col + .col{border-left:1px solid var(--border)} .mega .col-cat{margin:4px 10px 8px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--subtle);white-space:nowrap} .mega .lnk{position:relative;display:block;padding:5px 11px;border-radius:7px;font-size:13px;color:var(--muted); line-height:1.3;transition:background .14s,color .14s} .mega .col:has(.lnk) .lnk:first-of-type{margin-top:6px;padding-top:9px;border-top:1px solid var(--border)} .mega .lnk::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:1.5px;border-radius:2px; background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .18s} .mega .lnk:hover,.mega .lnk:focus-visible{background:var(--surface-2);color:var(--lc,var(--text))} .mega .lnk:hover::after,.mega .lnk:focus-visible::after{transform:scaleX(1)} /* cada columna subraya con SU color */ .mega .col.inf{--lc:var(--inf-txt)} .mega .col.teens{--lc:var(--teen)} .mega .col.fam{--lc:var(--fam)} .mega .col.online{--lc:var(--olive-hi)} .mega .col.franq{--lc:var(--inf-txt)} /* el producto (nombre + descripción) también responde */ .mega .feat{position:relative} .mega .feat .ft{transition:color .14s} .mega .feat::after{content:"";position:absolute;left:11px;bottom:5px;width:22px;height:2px;border-radius:2px; background:var(--lc,var(--acc));transform:scaleX(0);transform-origin:left;transition:transform .18s} .mega .feat:hover::after,.mega .feat:focus-visible::after{transform:scaleX(1)} .mega .col.inf .ft{color:var(--inf-txt)} .mega .col.teens .ft{color:var(--teen)} .mega .col.fam .ft{color:var(--fam)} .mega .col.online .ft{color:var(--olive-hi)} .mega .col.franq .ft{color:var(--text)} .mega .col.teens .col-cat{color:var(--teen)} .mega .feat{display:block;padding:8px 11px;border-radius:9px;transition:background .15s} .mega .feat:hover{background:var(--surface-2)} .mega .feat .ft{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em} .mega .feat .fd{display:block;font-size:12.5px;color:var(--subtle);margin-top:3px;line-height:1.4} .mega-foot{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:12px 22px;border-top:1px solid var(--border);background:var(--surface-2);border-radius:0 0 14px 14px} .mega-foot .all{font-size:13px;font-weight:600;color:var(--acc-txt)} .mega-foot .all .ar{transition:transform .15s;display:inline-block} .mega-foot .all:hover .ar{transform:translateX(3px)} .mega-foot .qlinks{display:flex;gap:18px} .mega-foot .qlinks a{font-size:13px;color:var(--muted)} .mega-foot .qlinks a:hover{color:var(--text)} .nav-cta{margin-left:auto;display:flex;align-items:center;gap:6px} .nav-cta .btn{height:30px;padding:0 11px;border-radius:5px;font-size:12.5px} @media(max-width:760px){ .nav-links{display:none} .solo-esc{display:none} .nav-cta{gap:8px} .nav-in{padding:0 16px} } /* partials.js pinta el menú dentro de