`) ya no
heredan el `list-style: none` del reset global y el navegador les pinta
su marcador por defecto. */
list-style: none;
background: var(--papel);
border: 1px solid var(--linea);
border-radius: var(--radio);
padding: var(--e-4) var(--e-3);
cursor: pointer;
outline: none;
box-shadow: 0 18px 34px -28px rgb(14 36 56 / .22);
animation: flotar 6s ease-in-out infinite;
animation-delay: calc(var(--i, 0) * -0.6s);
transition: opacity .4s ease, filter .4s ease, box-shadow .35s ease, border-color .35s ease;
}
@keyframes flotar {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
.tarjeta-flotante__icono {
display: grid;
place-items: center;
width: 42px; height: 42px;
margin-bottom: var(--e-2);
border-radius: 50%;
background: var(--oro-velo);
color: var(--oro);
transition: background .3s ease, color .3s ease;
}
.tarjeta-flotante__icono svg { width: 19px; height: 19px; }
.tarjeta-flotante__pregunta {
font-family: var(--display);
font-weight: 500;
font-size: 1.0625rem;
line-height: 1.4;
color: var(--tinta);
margin: 0;
}
.tarjeta-flotante__titulo {
font-family: var(--display);
font-weight: 600;
font-size: 1.1875rem;
line-height: 1.25;
color: var(--tinta);
margin: 0 0 .5rem;
}
.tarjeta-flotante__texto {
font-size: .9375rem;
line-height: 1.6;
color: var(--apagado);
margin: 0;
}
/* Destacada: quieta (se corta la animación para fijar su propia postura),
notablemente más grande —el texto crece con ella, es la misma tarjeta a
otra escala, no un truco aparte— y con la sombra cayendo en la dirección
contraria al sol fijo de arriba (la calcula app.js en `--sombra-x/y`).
Va como `.revelar-listo .revelar.tarjeta-flotante.destacado` a propósito:
`.revelar-listo .revelar.visible` (0,3,0) le ganaba a `.tarjeta-flotante.
destacado` (0,2,0) y forzaba `transform: none` — la tarjeta se quedaba en
su tamaño normal (nunca llegaba a crecer) en vez de agrandarse. */
.revelar-listo .revelar.tarjeta-flotante.destacado {
animation: none;
transform: translateY(-10px) scale(1.16);
z-index: 3;
border-color: var(--oro);
box-shadow:
var(--sombra-x, 0px) var(--sombra-y, 0px) 70px 14px rgb(176 141 85 / .32),
var(--sombra-x, 0px) var(--sombra-y, 0px) 26px 0 rgb(14 36 56 / .28),
0 30px 50px -22px rgb(14 36 56 / .35);
}
.tarjeta-flotante.destacado .tarjeta-flotante__icono { background: var(--oro); color: var(--papel); }
@media (max-width: 1024px) {
/* En rejillas de 2 columnas, crecer tanto como en escritorio hace que la
tarjeta destacada invada a sus vecinas: se modera la escala. */
.revelar-listo .revelar.tarjeta-flotante.destacado { transform: translateY(-6px) scale(1.08); }
}
/* El resto se apaga mientras una está destacada — `:has()` evita tener que
marcar "no activa" en cada tarjeta desde JS. `.carrusel__pagina` además de
`.tarjetas-flotantes`: en el carrusel el padre directo de las tarjetas ya
no es el `
` original, sino la página que las agrupa. */
.tarjetas-flotantes:has(.destacado) .tarjeta-flotante:not(.destacado),
.carrusel__pagina:has(.destacado) .tarjeta-flotante:not(.destacado) {
opacity: .42;
filter: saturate(.75);
}
@media (prefers-reduced-motion: reduce) {
.tarjeta-flotante { animation: none; }
}
@media (max-width: 1024px) {
.tarjetas-flotantes--preguntas { grid-template-columns: repeat(2, 1fr); }
.tarjetas-flotantes--soluciones { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
/* `#preguntas-destacadas` pasa por el carrusel JS a partir de 6 tarjetas
(ver `iniciarCarruseles` en app.js): ahí las `.tarjeta-flotante` ya no
cuelgan de `.tarjetas-flotantes--preguntas` sino de `.carrusel__pagina`,
así que hace falta repetir la regla con ese otro padre o el tamaño de
letra/padding solo se aplica en el fallback sin JS. */
.tarjetas-flotantes--preguntas .tarjeta-flotante,
#preguntas-destacadas .carrusel__pagina .tarjeta-flotante {
padding: var(--e-3) var(--e-2);
}
.tarjetas-flotantes--preguntas .tarjeta-flotante__pregunta,
#preguntas-destacadas .carrusel__pagina .tarjeta-flotante__pregunta {
font-size: .8125rem;
}
.tarjetas-flotantes--soluciones { grid-template-columns: 1fr; }
}
/* ── Carrusel (bloques de más de 6 tarjetas) ───────────────────────────────
`app.js` (`iniciarCarruseles`) solo interviene cuando hay más de 6 tarjetas
dentro de `[data-carrusel]`: agrupa la ``
original en páginas de `.carrusel__pagina` (6 a la vez, repartidas a
partes iguales) y las mete en esta pista. Sin JS, el `` original se ve
tal cual — la rejilla normal de arriba — así que nunca hay contenido
inaccesible.
El efecto es el de Osmo «Liquid Glass Carousel», pero acotado a como lo
quiere el cliente: solo la página vecina inmediata asoma a cada lado (no
dos), y con esa página se ve un cristal esmerilado detrás — no números de
página, unos puntitos con el activo destacado. */
.carrusel { position: relative; overflow: hidden; }
.carrusel__pista {
display: flex;
align-items: stretch;
gap: 2%;
cursor: grab;
touch-action: pan-y;
will-change: transform;
-webkit-user-select: none;
user-select: none;
}
.carrusel__pista:active { cursor: grabbing; }
.carrusel__pagina {
position: relative;
/* 78 % deja un 11 % de margen a cada lado; con el 2 % de `gap` de arriba
restado, quedan ~9 % de asomo real antes del encogido de la vecina —
lo bastante para que se note el cristal, pero solo "1 a cada lado". */
flex: 0 0 78%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.1rem;
border-radius: var(--radio);
transition: transform .6s cubic-bezier(.16,1,.3,1), filter .6s ease, opacity .6s ease;
}
.carrusel__pagina--activa { transform: none; opacity: 1; filter: none; }
/* Página vecina: la que se «desliza hacia» el centro. Encogida, atenuada y
con un velo de cristal encima — el «Liquid Glass» del que habla Osmo. */
.carrusel__pagina--vecina {
transform: scale(.94);
opacity: .55;
filter: blur(2px) saturate(.75);
}
.carrusel__pagina--vecina::after {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, rgb(255 255 255 / .32), rgb(255 255 255 / .04) 45%, transparent 75%);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
/* Cualquier página más allá de la vecina inmediata: fuera de vista (solo
quedan 3 candidatas a la vez — «1 en medio, 1 a cada lado»). */
.carrusel__pagina--lejana { opacity: 0; }
@media (max-width: 1024px) {
.carrusel__pagina { grid-template-columns: repeat(2, 1fr); }
}
.carrusel__puntos {
display: flex;
justify-content: center;
align-items: center;
gap: .55rem;
margin-top: var(--e-4);
}
.carrusel__punto {
width: 8px; height: 8px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--tenue);
cursor: pointer;
transition: background .3s ease, transform .3s cubic-bezier(.16,1,.3,1), width .3s cubic-bezier(.16,1,.3,1);
}
.carrusel__punto:hover { background: var(--oro-claro); }
.carrusel__punto--activo {
width: 22px;
border-radius: var(--radio-boton);
background: var(--oro);
}
@media (prefers-reduced-motion: reduce) {
.carrusel__pagina, .carrusel__punto { transition: none; }
}
/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.rejilla { display: block; }
.col-texto, .col-lateral, .col-titular, .col-cuerpo, .col-ancha, .col-intro, .col-form {
grid-column: auto;
position: static;
}
.col-lateral, .col-cuerpo, .col-form { margin-top: var(--e-5); }
.col-titular { margin-bottom: var(--e-4); }
.pie__interior { grid-template-columns: 1fr 1fr; }
.pie__logo { grid-column: 1 / -1; }
.fichas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.barra__menu { display: block; position: relative; width: 40px; height: 40px; }
.barra__menu-barras,
.barra__menu-barras::before,
.barra__menu-barras::after {
position: absolute;
left: 8px; right: 8px;
height: 1px;
background: currentColor;
transition: transform .2s ease, opacity .2s ease;
}
.barra__menu-barras { top: 19px; }
.barra__menu-barras::before { content: ''; top: -7px; }
.barra__menu-barras::after { content: ''; top: 7px; }
.barra__menu[aria-expanded="true"] .barra__menu-barras { background: transparent; }
.barra__menu[aria-expanded="true"] .barra__menu-barras::before { transform: translateY(7px) rotate(45deg); }
.barra__menu[aria-expanded="true"] .barra__menu-barras::after { transform: translateY(-7px) rotate(-45deg); }
.js .barra__nav {
display: none;
position: absolute;
top: 100%; left: 0; right: 0;
flex-direction: column;
align-items: stretch;
gap: var(--e-3);
background: var(--crema);
color: var(--tinta);
border-bottom: 1px solid var(--linea);
padding: var(--e-3) 1.5rem var(--e-4);
}
.js .barra__nav.abierto { display: flex; }
.barra__enlaces { flex-direction: column; align-items: stretch; gap: 0; }
.barra__enlaces a { display: block; padding: .9rem 0; border-bottom: 1px solid var(--linea); opacity: 1; }
.barra__acciones { flex-direction: column; align-items: stretch; gap: var(--e-2); margin-top: var(--e-1); }
.barra__tel { justify-content: center; padding: .5rem 0; }
.barra__acciones .boton { width: 100%; }
.barra .boton--luz { color: var(--tinta); border-color: var(--tinta); }
.contraste { grid-template-columns: 1fr; }
.contraste > div:first-child { border-right: 0; border-bottom: 1px solid rgb(14 36 56 / .12); }
.urgencia__interior { flex-direction: column; align-items: stretch; }
.urgencia .boton { width: 100%; }
}
@media (max-width: 640px) {
.seccion { padding-block: calc(var(--seccion) * .8); }
.barra__logo img { width: 148px; }
.acciones { flex-direction: column; align-items: stretch; width: 100%; max-width: 22rem; margin-inline: auto; }
.acciones .boton { width: 100%; }
.pareja { grid-template-columns: 1fr; }
.pie__interior { grid-template-columns: 1fr; gap: var(--e-4); }
.fichas { grid-template-columns: 1fr; }
.hero__confianza { gap: var(--e-1) var(--e-4); }
.hero__pie { display: none; }
.caja-form { padding: var(--e-4) var(--e-3); }
/* Solo los SUBTÍTULOS bajan en móvil (los títulos h1/h2/h3 no se tocan
aquí): son los que llenaban la pantalla entera de letra grande sin decir
más que el titular de encima. */
.manifiesto__afirma,
.giro__clave,
.contraste p,
.cita__texto { font-size: 1.5rem; line-height: 1.3; }
.fichas__texto,
.lista-check li { font-size: 1.0625rem; }
.entradilla { font-size: 1rem; }
.cta-movil {
display: flex;
gap: .6rem;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 40;
padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
background: var(--marino-hondo);
border-top: 1px solid var(--linea-noche);
transition: transform .25s ease, opacity .25s ease;
}
.cta-movil .boton { flex: 1; min-height: 48px; padding: .8rem .5rem; font-size: .625rem; letter-spacing: .16em; }
.cta-movil .boton--linea { color: var(--claro); border-color: var(--linea-noche); }
.whatsapp { bottom: 5.25rem; width: 46px; height: 46px; }
.whatsapp svg { width: 24px; height: 24px; }
body { padding-bottom: 4.25rem; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.revelar-listo .revelar { opacity: 1; transform: none; transition: none; }
/* Sin el giro: los 4 pasos se ven todos, uno debajo de otro, en vez de
quedarse parados en el paso 1 para siempre. */
.rueda-envoltorio { height: auto; }
.rueda { position: static; height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.rueda__pista { display: flex; flex-direction: column; gap: 2.5rem; transform: none !important; }
.rueda__paso { height: auto; grid-template-columns: 1fr; gap: 1.25rem; opacity: 1 !important; transform: none !important; }
.rueda__foto { height: 14rem; order: -1; }
}
@media print {
.barra, .cta-movil, .whatsapp, .saltar { display: none; }
}