@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fuentes/montserrat.woff2') format('woff2');
}
[hidden] { display: none !important; }
:root {
--marino: #004aad;
--marino-oscuro: #00387f;
--verde: #00d870;
--cielo: #74d9ff;
--nube: #f2f8fd;
--crema: #faf8f3;
--arena: #f1ece1;
--hoja: #07753f;
--corteza: #4a4741;
--carbon: #2c2c2c;
--bosque: #2d5a27;
--bosque-oscuro: #1e3d1a;
--salvia: #eef5ee;
--salvia-borde: #d3e5d1;
--marfil: #f9fbf9;
--tierra: #b06a2c;
--tierra-texto: #9c5d26;
--tierra-suave: #fdf3e8;
--grafito: #5a625a;
--acento: #0a8146;
--acento-oscuro: #07753f;
--acento-suave: #eff6f1;
--acento-borde: #d3e5d9;
--sombra-suave: 0 1px 2px rgb(0 56 127 / 0.04), 0 8px 24px -12px rgb(0 56 127 / 0.14);
--sombra-alta: 0 2px 4px rgb(0 56 127 / 0.05), 0 24px 48px -24px rgb(0 56 127 / 0.3);
--sombra-flotante: 0 2px 4px rgb(0 56 127 / 0.06), 0 14px 32px -14px rgb(0 56 127 / 0.22);
}
.tema-nutricion { --acento: #0a8146; --acento-oscuro: #07753f; --acento-suave: #eff6f1; --acento-borde: #d3e5d9; }
.tema-belleza   { --acento: #c04350; --acento-oscuro: #a4353f; --acento-suave: #fdf3f2; --acento-borde: #f0d9d7; }
.tema-oportunidad { --acento: #1d3a67; --acento-oscuro: #14294a; --acento-suave: #eef2f8; --acento-borde: #d4dded; }
.tema-cuidado   { --acento: #5e6b8e; --acento-oscuro: #4b5672; --acento-suave: #f5f6f8; --acento-borde: #dcdee6; }
.tema-hogar     { --acento: #627772; --acento-oscuro: #4e5f5b; --acento-suave: #f6f7f7; --acento-borde: #dce1e0; }
body[class*="tema-"]:not(.panel) {
--flota-fondo: var(--acento);
--flota-fondo-hover: var(--acento-oscuro);
--flota-tinta: #fff;
--flota-foco: var(--acento-oscuro);
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
background: var(--crema);
color: var(--carbon);
font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
[id] { scroll-margin-top: 88px; }
.romper { overflow-wrap: anywhere; }
.oculto-visualmente {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lan-trampa {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
html:has(body > main.tema-nutricion) { --barra-pulgar: #0a8146; }
html:has(body > main.tema-belleza)   { --barra-pulgar: #c04350; }
html:has(body > main.tema-cuidado)   { --barra-pulgar: #5e6b8e; }
html:has(body > main.tema-hogar)     { --barra-pulgar: #627772; }
html {
--barra-pulgar: var(--lan-acento, var(--marino));
--barra-carril: transparent;
scrollbar-color: var(--barra-pulgar) var(--barra-carril);
}
* { scrollbar-width: thin; }
@supports not (scrollbar-color: auto) {
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--barra-carril); }
::-webkit-scrollbar-thumb {
background: var(--barra-pulgar);
border-radius: 999px;
border: 3px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--barra-pulgar) 80%, #000); }
}
body.landing p { max-width: 62ch; }
body.landing p + p { margin-top: 14px; }
body.landing li { margin-bottom: 6px; }
body.landing .lan-formulario :focus-visible { outline-offset: -2px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.envoltorio { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 20px; }
.estrecho   { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: 20px; }
.medio      { width: 100%; max-width: 860px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 640px) {
.envoltorio { padding-inline: 32px; }
}
.centrado { text-align: center; }
.pila { display: grid; gap: 16px; }
.pila-ancha { display: grid; gap: 28px; }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fila-separada { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.crecer { flex: 1 1 auto; min-width: 0; }
.textura-papel { position: relative; }
.textura-papel::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.5;
background-image: radial-gradient(circle at 1px 1px, rgb(74 71 65 / 0.055) 1px, transparent 0);
background-size: 22px 22px;
}
.halo { position: relative; isolation: isolate; overflow: hidden; }
.halo::after {
content: '';
position: absolute;
z-index: -1;
inset: -20% -10% auto -10%;
height: 80%;
pointer-events: none;
background:
radial-gradient(42% 55% at 18% 22%, rgb(0 216 112 / 0.18), transparent 70%),
radial-gradient(46% 60% at 84% 12%, rgb(116 217 255 / 0.32), transparent 72%);
animation: halo-respira 60s ease-in-out infinite;
}
@keyframes halo-respira {
0%, 100% { transform: translate(0, 0) scale(1); }
50%      { transform: translate(-18px, 10px) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
.halo::after { animation: none; }
}
.onda { pointer-events: none; line-height: 0; }
.onda svg { display: block; width: 100%; height: 52px; }
.onda-invertida { transform: rotate(180deg); }
@media (min-width: 640px) { .onda svg { height: 80px; } }
.con-onda { padding-top: 0; }
.con-onda > .envoltorio,
.con-onda > .estrecho { margin-top: 40px; }
.ramita { display: inline-flex; align-items: center; gap: 6px; color: var(--verde); }
.ramita svg { display: block; }
@media (prefers-reduced-motion: no-preference) {
.ramita svg { animation: hoja-brota 0.45s ease-out backwards; }
.ramita svg:nth-child(2) { animation-delay: 0.14s; }
.ramita svg:nth-child(3) { animation-delay: 0.28s; }
}
@keyframes hoja-brota {
from { opacity: 0; scale: 0.4; translate: 0 5px; }
to { opacity: 1; scale: 1; translate: 0 0; }
}
.hoja-peq { width: 14px; height: 14px; opacity: 0.7; }
.hoja-med { width: 16px; height: 16px; }
.volteada { transform: scaleX(-1); }
.hoja-fondo {
position: absolute;
top: -12px;
right: -12px;
width: 80px;
height: 80px;
color: rgb(0 216 112 / 0.10);
transition: color 0.2s;
pointer-events: none;
}
.tarjeta-hoja { position: relative; overflow: hidden; }
.tarjeta-hoja:hover .hoja-fondo { color: rgb(0 216 112 / 0.20); }
.burbuja {
display: grid;
place-items: center;
aspect-ratio: 1;
width: 100%;
border-radius: 42% 58% 54% 46% / 47% 43% 57% 53%;
border: 1px solid #fff;
background: rgb(255 255 255 / 0.7);
backdrop-filter: blur(4px);
box-shadow: var(--sombra-suave);
padding: 40px;
}
.burbuja-alt {
display: grid;
place-items: center;
aspect-ratio: 1;
border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
background: linear-gradient(to bottom right, #fff, var(--nube));
box-shadow: var(--sombra-suave);
padding: 48px;
}
@keyframes emerger {
from { opacity: 0; transform: translateY(14px); }
to   { opacity: 1; transform: none; }
}
.emerger { animation: emerger 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.emerger { animation: none; }
* { transition-duration: 0.01ms !important; }
.boton:hover, .boton:active,
.boton:hover .flecha,
.boton-texto:active, .boton-menu:active,
.red:hover, .red:active,
a.tarjeta:hover, a.tarjeta:active,
.rejilla-familias .tarjeta:hover,
.rejilla-familias .tarjeta:hover .icono-familia,
.camino:hover, .camino:active,
.camino:hover .camino-flecha,
.elegible:active,
.escala-punto:active .escala-boton,
.rejilla-opciones label:active,
.selector-estrellas label:hover {
transform: none !important;
}
.interruptor-menu:checked ~ .nav-secciones { animation: none !important; }
.interruptor-menu:checked ~ .nav-secciones a { animation: none !important; }
.interruptor-menu:checked ~ .velo-menu { animation: none !important; }
}
.cabecera {
position: sticky;
top: 0;
z-index: 50;
background: rgb(250 248 243 / 0.85);
backdrop-filter: blur(12px);
}
.cabecera::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, #0a8146, #c04350, #5e6b8e, #627772);
opacity: 0.35;
pointer-events: none;
}
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.cabecera {
animation: cabecera-se-posa linear both;
animation-timeline: scroll();
animation-range: 0 140px;
}
.cabecera > div {
animation: cabecera-encoge linear both;
animation-timeline: scroll();
animation-range: 0 140px;
}
}
}
@keyframes cabecera-se-posa { to { box-shadow: 0 8px 24px rgb(44 44 44 / 0.09); } }
@keyframes cabecera-encoge { to { height: 58px; } }
@media (prefers-reduced-motion: no-preference) {
.marca img { transform-origin: 50% 85%; }
.marca:hover img { animation: logo-saluda 0.9s ease-in-out 1; }
}
@keyframes logo-saluda {
25% { transform: rotate(-6deg); }
60% { transform: rotate(5deg); }
100% { transform: none; }
}
.cabecera > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
height: 68px;
}
.marca {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 16.5px;
text-decoration: none;
flex-shrink: 0;
white-space: nowrap;
}
.marca img { width: 36px; height: 36px; }
.marca .m1 { color: var(--marino); }
.marca .m2 { color: var(--hoja); }
.nav-secciones { display: none; gap: 28px; }
.nav-secciones a {
position: relative;
color: var(--corteza);
text-decoration: none;
font-size: 14.5px;
font-weight: 500;
padding-block: 12px;
white-space: nowrap;
transition: color 0.18s ease;
}
.nav-secciones a:hover { color: var(--marino); }
.nav-secciones a::after {
content: "";
position: absolute;
left: 50%;
right: 50%;
bottom: 2px;
height: 6px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M3 8.5c38-5.5 92-7 194-4' stroke='%2307753f' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
transition: left 0.24s cubic-bezier(0.22, 1, 0.36, 1),
right 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
.nav-secciones a:hover::after { left: 10px; right: 10px; }
}
.nav-secciones a:focus-visible::after { left: 10px; right: 10px; }
.nav-secciones a.activa { color: var(--marino); }
.nav-secciones a.activa::after { left: 10px; right: 10px; }
.nav-secciones a { display: inline-flex; align-items: center; }
.nav-icono {
width: 0;
height: 16px;
margin-right: 0;
opacity: 0;
flex-shrink: 0;
}
.interruptor-menu { position: absolute; opacity: 0; width: 0; height: 0; }
.boton-menu {
order: -1;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 12px;
color: var(--marino);
cursor: pointer;
flex-shrink: 0;
margin-left: -10px;
}
@media (max-width: 767px) {
.marca { margin-right: auto; }
}
.boton-menu { transition: background-color 0.2s, transform 0.12s ease; }
.boton-menu:hover { background: var(--nube); }
.boton-menu:active { transform: scale(0.92); }
.boton-menu svg { width: 24px; height: 24px; }
.boton-menu .cerrar { display: none; }
.interruptor-menu:checked ~ .nav-secciones {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 2;
background:
radial-gradient(circle at 1px 1px, rgb(74 71 65 / 0.05) 1px, transparent 0) 0 0 / 22px 22px,
var(--crema);
border-bottom: 1px solid var(--arena);
box-shadow: var(--sombra-suave);
padding: 8px 20px 18px;
animation: menu-baja 0.2s ease-out;
}
@keyframes menu-baja {
from { opacity: 0; transform: translateY(-10px); }
to   { opacity: 1; transform: none; }
}
.interruptor-menu:checked ~ .nav-secciones a {
padding: 15px 8px;
border-bottom: 1px solid var(--arena);
font-size: 16.5px;
border-radius: 8px;
animation: menu-entra 0.3s ease-out backwards;
}
.interruptor-menu:checked ~ .nav-secciones a:nth-of-type(2) { animation-delay: 0.04s; }
.interruptor-menu:checked ~ .nav-secciones a:nth-of-type(3) { animation-delay: 0.08s; }
.interruptor-menu:checked ~ .nav-secciones a:nth-of-type(4) { animation-delay: 0.12s; }
@keyframes menu-entra {
from { opacity: 0; transform: translateY(-6px); }
to   { opacity: 1; transform: none; }
}
.interruptor-menu:checked ~ .nav-secciones a .nav-icono {
width: 18px;
height: 18px;
margin-right: 10px;
opacity: 1;
color: var(--hoja);
}
.interruptor-menu:checked ~ .nav-secciones a::after { content: none; }
.interruptor-menu:checked ~ .nav-secciones a:active { background: var(--nube); }
.interruptor-menu:checked ~ .nav-secciones a.activa { color: var(--marino); font-weight: 600; }
.interruptor-menu:checked ~ .nav-secciones a:last-of-type { border-bottom: 0; }
.velo-menu { display: none; }
.interruptor-menu:checked ~ .velo-menu {
display: block;
position: fixed;
left: 0;
right: 0;
top: 68px;
bottom: 0;
z-index: 1;
background: rgb(44 44 44 / 0.28);
cursor: pointer;
animation: velo-aparece 0.25s ease-out;
}
@keyframes velo-aparece {
from { opacity: 0; }
to   { opacity: 1; }
}
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.interruptor-menu:checked ~ .velo-menu {
animation: velo-aparece 0.25s ease-out, velo-se-posa linear both;
animation-timeline: auto, scroll();
animation-range: normal, 0 140px;
}
}
}
@keyframes velo-se-posa { to { top: 58px; } }
.interruptor-menu:checked ~ .boton-menu .abrir { display: none; }
.interruptor-menu:checked ~ .boton-menu .cerrar { display: block; }
.interruptor-menu:focus-visible ~ .boton-menu {
outline: 2px solid var(--marino);
outline-offset: 2px;
}
@media (min-width: 768px) {
.nav-secciones { display: flex; align-items: center; gap: 16px; }
.boton-menu { display: none; }
.interruptor-menu:checked ~ .nav-secciones {
display: flex;
flex-direction: row;
position: static;
background: none;
border: 0;
box-shadow: none;
padding: 0;
gap: 16px;
}
.interruptor-menu:checked ~ .nav-secciones a { border: 0; padding-block: 12px; font-size: 14.5px; }
.interruptor-menu:checked ~ .nav-secciones a::after { content: ""; }
.interruptor-menu:checked ~ .nav-secciones { animation: none; }
.interruptor-menu:checked ~ .nav-secciones a { animation: none; }
.interruptor-menu:checked ~ .nav-secciones a .nav-icono { width: 0; margin-right: 0; opacity: 0; color: currentColor; }
.velo-menu { display: none !important; }
}
@media (min-width: 1024px) {
.nav-secciones,
.interruptor-menu:checked ~ .nav-secciones { gap: 18px; }
.nav-secciones a,
.interruptor-menu:checked ~ .nav-secciones a {
padding-inline: 12px;
border-radius: 999px;
transition: color 0.18s ease, background-color 0.18s ease;
}
.nav-secciones a:hover { background: var(--salvia); }
}
.redes { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.red {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 999px;
color: var(--marino);
transition: background-color 0.2s, color 0.2s, transform 0.15s ease;
}
.red:hover { background: var(--marino); color: #fff; }
@media (hover: hover) { .red:hover { transform: scale(1.08); } }
.red:active { transform: scale(0.94); }
.red svg { width: 20px; height: 20px; }
.boton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
text-wrap: balance;
text-align: center;
border: 0;
border-radius: 999px;
padding: 14px 28px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s, border-color 0.2s, color 0.2s,
transform 0.12s ease, box-shadow 0.2s ease;
}
@media (hover: hover) {
.boton:hover:not(:disabled) { transform: translateY(-1px); }
}
.boton:active:not(:disabled) { transform: translateY(1px); }
.boton-principal { background: var(--acento); color: #fff; }
.boton-principal:hover { background: var(--acento-oscuro); }
.boton-principal:disabled { opacity: 0.7; cursor: default; }
.boton-marino { background: var(--marino); color: #fff; }
.boton-marino:hover { background: var(--marino-oscuro); }
.boton-grande { padding: 16px 34px; font-size: 16px; box-shadow: var(--sombra-alta); }
.boton-contorno {
background: #fff;
border: 1px solid rgb(0 74 173 / 0.25);
color: var(--marino);
}
.boton-contorno:hover { border-color: var(--marino); background: var(--nube); }
.boton-suave {
background: transparent;
border: 1px solid var(--salvia-borde);
color: var(--grafito);
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
}
.boton-suave:hover { border-color: var(--acento); color: var(--acento); }
.boton-texto {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: none; border: 0; padding: 12px 20px;
color: var(--corteza); font-size: 15px; font-weight: 500;
border-radius: 999px; cursor: pointer;
transition: background-color 0.2s, color 0.2s, transform 0.12s ease;
}
.boton-texto:hover:not(:disabled) { background: var(--acento-suave); }
.boton-texto:active:not(:disabled) { transform: translateY(1px); }
.boton-texto:disabled { opacity: 0; cursor: default; }
.sorteo-parrilla {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
gap: 6px;
}
@media (min-width: 700px) {
.sorteo-parrilla { grid-template-columns: repeat(10, 1fr); }
}
.sorteo-numero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 62px;
padding: 6px 4px;
border: 1px solid #dde3ea;
border-radius: 10px;
background: #fff;
overflow: hidden;
text-decoration: none;
cursor: pointer;
transition: transform 0.12s ease, box-shadow 0.2s, border-color 0.2s;
}
.sorteo-numero:hover,
.sorteo-numero:focus-visible {
border-color: var(--marino);
box-shadow: var(--sombra-suave, 0 2px 10px rgba(0, 0, 0, 0.08));
transform: translateY(-1px);
}
.sorteo-elegido {
border-color: var(--marino);
border-width: 2px;
box-shadow: 0 0 0 3px var(--nube);
}
.sorteo-cifra {
font-size: 17px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--corteza);
}
.sorteo-quien {
font-size: 10.5px;
line-height: 1.2;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--corteza);
opacity: 0.75;
}
.sorteo-dado { background: var(--nube); border-color: var(--marino); }
.sorteo-dado .sorteo-cifra { color: var(--marino); }
.sorteo-mio { background: #eff6f1; border-color: var(--hoja); }
.sorteo-mio .sorteo-cifra { color: var(--hoja); }
.boton-wa {
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: #25d366;
color: #fff;
flex: 0 0 auto;
transition: transform 0.12s ease, background-color 0.15s;
}
.boton-wa .icono-lin { width: 20px; height: 20px; }
.boton-wa:hover { background: #1ebe5b; transform: scale(1.06); }
.wa-texto {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 600;
color: var(--marino);
}
.tarjeta {
background: #fff;
border: 1px solid var(--arena);
border-radius: 24px;
padding: 28px;
}
ol.pila:has(> .tarjeta-informe) { padding-left: 0; }
.tarjeta-informe {
list-style: none;
background: #fff;
border: 1px solid var(--salvia-borde);
border-radius: 16px;
padding: 20px;
min-width: 0;
}
.icono-familia {
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 16px;
background: var(--acento-suave);
color: var(--acento);
}
.rejilla-familias .tarjeta {
transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.24s ease,
border-color 0.24s ease;
}
.rejilla-familias .icono-familia {
transition: background-color 0.24s ease, color 0.24s ease,
transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
.rejilla-familias .tarjeta:hover {
transform: translateY(-5px);
border-color: var(--acento-borde);
box-shadow: 0 18px 32px -20px var(--acento);
}
.rejilla-familias .tarjeta:hover .icono-familia {
background: var(--acento);
color: #fff;
transform: scale(1.06);
}
}
.rejilla-familias { display: grid; gap: 20px; }
.rejilla-tres { display: grid; gap: 20px; }
.rejilla-familias .tarjeta {
background: var(--acento-suave);
border-color: var(--acento-borde);
}
.rejilla-familias .icono-familia { background: #fff; }
@media (hover: hover) {
.rejilla-familias .tarjeta:hover { border-color: var(--acento); }
}
.familia-enlace {
position: relative;
display: block;
text-decoration: none;
color: inherit;
}
@media (max-width: 639px) {
.familia-enlace {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 14px;
align-items: center;
}
.familia-enlace .icono-familia { grid-area: 1 / 1; }
.familia-enlace h3 { grid-area: 1 / 2; margin-top: 0 !important; }
.familia-enlace p { grid-column: 1 / -1; }
}
.familia-flecha {
position: absolute;
right: 18px;
bottom: 16px;
display: grid;
place-items: center;
color: var(--acento);
opacity: 1;
transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
.familia-flecha { opacity: 0; transform: translateX(-6px); }
.familia-enlace:hover .familia-flecha { opacity: 1; transform: translateX(0); }
}
.paso-cifra {
position: absolute;
right: 2px;
bottom: -26px;
font-size: 110px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.05em;
color: var(--hoja);
opacity: 0.08;
pointer-events: none;
user-select: none;
}
.gama-hero { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) {
.gama-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; }
}
.gama-migas {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 28px;
}
.gama-miga {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
border: 1px solid var(--acento-borde);
border-radius: 999px;
background: #fff;
font-size: 13px;
font-weight: 600;
color: var(--acento);
text-decoration: none;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.gama-miga:hover { border-color: var(--acento); transform: translateY(-2px); }
.gama-miga-actual { background: var(--acento); border-color: var(--acento); color: #fff; }
.gama-escena { position: relative; display: none; }
@media (min-width: 900px) { .gama-escena { display: block; } }
.gama-burbuja {
width: min(100%, 400px);
aspect-ratio: 1;
margin-inline: auto;
display: grid;
place-items: center;
background: var(--acento-suave);
border: 1px solid var(--acento-borde);
border-radius: 42% 58% 54% 46% / 47% 43% 57% 53%;
box-shadow: var(--sombra-suave);
}
.gama-icono-gigante {
width: 46%;
height: 46%;
color: var(--acento);
stroke-width: 0.9;
opacity: 0.85;
}
.gama-flotante {
position: absolute;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 16px;
background: #fff;
border: 1px solid var(--acento-borde);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: var(--corteza);
box-shadow: var(--sombra-flotante);
white-space: nowrap;
}
.gama-flotante svg { color: var(--acento); }
.gama-flotante-1 { top: 9%; left: 0; }
.gama-flotante-2 { top: 46%; right: -2%; }
.gama-flotante-3 { bottom: 7%; left: 10%; }
@media (prefers-reduced-motion: no-preference) {
.gama-flotante { animation: gama-flota 7s ease-in-out infinite; }
.gama-flotante-2 { animation-delay: -2.3s; }
.gama-flotante-3 { animation-delay: -4.6s; }
}
@keyframes gama-flota {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
.gama-criterio { display: grid; gap: 20px; }
@media (min-width: 820px) { .gama-criterio { grid-template-columns: repeat(2, 1fr); } }
.gama-bloque {
position: relative;
overflow: hidden;
background: var(--acento-suave);
border-color: var(--acento-borde);
padding: 28px;
}
.gama-bloque .icono-familia { background: #fff; }
.gama-bloque-cifra {
position: absolute;
right: 4px;
bottom: -24px;
font-size: 96px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.05em;
color: var(--acento);
opacity: 0.07;
pointer-events: none;
user-select: none;
}
.gama-pautas-rejilla { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) {
.gama-pautas-rejilla { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; }
}
.gama-pautas-nota {
margin-top: 24px;
padding: 12px 18px;
border-left: 3px solid var(--acento);
background: #fff;
border-radius: 0 12px 12px 0;
font-size: 13.5px;
line-height: 1.7;
color: var(--corteza);
max-width: 42ch;
}
.gama-pautas {
position: relative;
display: grid;
gap: 26px;
list-style: none;
padding: 0;
margin: 0;
}
.gama-pautas::before {
content: '';
position: absolute;
left: 25px;
top: 26px;
bottom: 26px;
border-left: 2px dashed var(--acento-borde);
}
.gama-pauta {
position: relative;
display: flex;
align-items: flex-start;
gap: 18px;
}
.gama-pauta-icono {
display: grid;
place-items: center;
width: 52px;
height: 52px;
flex-shrink: 0;
border-radius: 50%;
background: #fff;
border: 1.5px solid var(--acento-borde);
color: var(--acento);
box-shadow: var(--sombra-suave);
}
.gama-pauta-texto { display: grid; gap: 3px; padding-top: 5px; }
.gama-pauta-texto strong { color: var(--marino); font-size: 15.5px; line-height: 1.4; }
.gama-pauta-texto > span { color: var(--corteza); font-size: 14px; line-height: 1.65; }
.gama-frase {
background: var(--acento);
color: #fff;
padding-block: 56px 60px;
position: relative;
overflow: hidden;
}
.gama-frase p {
font-size: clamp(21px, 3.4vw, 32px);
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.01em;
max-width: 26ch;
margin-inline: auto;
}
.gama-comillas {
display: block;
font-size: 96px;
font-weight: 800;
line-height: 0.3;
margin-bottom: 14px;
opacity: 0.35;
user-select: none;
}
@media (min-width: 768px) {
.rejilla-pasos { position: relative; }
.rejilla-pasos::before {
content: '';
position: absolute;
top: 37px;
left: 40px;
right: 40px;
border-top: 2px dashed var(--verde);
opacity: 0.55;
}
}
@media (min-width: 640px) { .rejilla-familias { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rejilla-familias { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) { .rejilla-tres { grid-template-columns: repeat(3, 1fr); } }
.portada-rejilla { display: grid; gap: 40px; align-items: center; }
.portada-burbuja { display: none; }
@media (min-width: 900px) {
.portada-rejilla:has(.portada-burbuja) { grid-template-columns: 1.15fr 0.85fr; gap: 56px; }
.portada-burbuja { display: block; }
.portada-rejilla.sobre-rejilla { grid-template-columns: 0.65fr 1.35fr; }
}
.portada-burbuja { max-width: 380px; margin-inline: auto; width: 100%; }
.sobre-rejilla strong,
.con-resalte strong { color: var(--carbon); font-weight: 600; }
a.tarjeta {
transition: border-color 0.2s, background-color 0.2s, transform 0.15s ease,
box-shadow 0.2s ease;
}
@media (hover: hover) {
a.tarjeta:hover {
transform: translateY(-2px);
box-shadow: var(--sombra-flotante);
}
}
a.tarjeta:active {
transform: translateY(0);
box-shadow: var(--sombra-suave);
transition-duration: 0.06s;
}
.campo {
width: 100%;
border: 1px solid var(--arena);
border-radius: 12px;
background: #fff;
padding: 12px 16px;
font-size: 16px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.campo:hover:not(:focus) { border-color: var(--salvia-borde); }
.campo:focus {
border-color: var(--acento);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent);
}
textarea.campo { resize: vertical; min-height: 84px; }
.pregunta {
border: 1px solid var(--arena);
background: #fff;
border-radius: 20px;
padding: 22px;
transition: border-color 0.2s, background-color 0.2s;
}
.pregunta.error { border-color: var(--tierra); background: var(--tierra-suave); }
.pregunta h3 { font-size: 17px; font-weight: 600; color: var(--acento); line-height: 1.35; }
.pregunta .obligatoria { color: var(--acento); margin-left: 4px; }
.pregunta .ayuda { margin-top: 8px; font-size: 13.5px; line-height: 1.65; color: var(--corteza); white-space: pre-line; }
.pregunta .control { margin-top: 16px; }
.pregunta .fallo { margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--tierra-texto); }
.ayuda-plegada { margin-top: 8px; }
.ayuda-plegada summary {
cursor: pointer;
list-style: none;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13.5px;
font-weight: 600;
color: var(--acento, var(--marino));
}
.ayuda-plegada summary::-webkit-details-marker { display: none; }
.ayuda-plegada summary::before { content: '+'; font-weight: 700; }
.ayuda-plegada[open] summary::before { content: '−'; }
.elegible {
display: flex;
align-items: flex-start;
gap: 12px;
border: 1px solid var(--arena);
background: #fff;
border-radius: 14px;
padding: 15px 16px;
cursor: pointer;
transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.elegible:hover { border-color: color-mix(in srgb, var(--acento) 50%, transparent); }
.elegible:active { background: var(--acento-suave); transform: scale(0.995); }
.elegible.marcado {
border-color: var(--acento);
background: var(--acento-suave);
box-shadow: inset 0 0 0 1px var(--acento);
}
.elegible.marcado span { font-weight: 600; }
.elegible input { margin-top: 2px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--acento); }
.elegible span { font-size: 14.5px; line-height: 1.4; }
.escala { display: flex; flex-wrap: wrap; gap: 8px; }
.escala-punto { cursor: pointer; }
.escala-boton {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid var(--arena);
background: #fff;
color: var(--corteza);
font-size: 15px;
font-weight: 600;
transition: border-color 0.15s, background-color 0.15s, color 0.15s,
transform 0.12s ease;
}
.escala-punto:hover .escala-boton { border-color: var(--acento); }
.escala-punto:active .escala-boton { transform: scale(0.92); }
.escala-punto input:checked + .escala-boton,
.escala-boton.marcado { background: var(--acento); border-color: var(--acento); color: #fff; }
.escala-punto input:focus-visible + .escala-boton { outline: 2px solid var(--acento); outline-offset: 2px; }
.escala-etiquetas { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12.5px; color: var(--corteza); }
.escala-punto:has(~ .escala-punto input:checked) .escala-boton {
background: var(--acento-suave);
border-color: var(--acento);
color: var(--acento-oscuro);
}
.etapas {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
margin: 14px 0 0;
padding: 0;
list-style: none;
}
.etapa {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12.5px;
font-weight: 600;
color: var(--corteza);
opacity: 0.55;
}
.etapa-punto {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid var(--arena);
background: #fff;
font-size: 11px;
flex-shrink: 0;
}
.etapa-check { width: 12px; height: 12px; }
.etapa-hecha { opacity: 1; }
.etapa-hecha .etapa-punto { background: var(--acento-suave); border-color: var(--acento); color: var(--acento); }
.etapa-actual { opacity: 1; color: var(--acento-oscuro, var(--acento)); }
.etapa-actual .etapa-punto { background: var(--acento); border-color: var(--acento); color: #fff; }
@media (max-width: 560px) {
.etapa:not(.etapa-actual) .etapa-nombre { display: none; }
.etapas { gap: 6px 8px; }
}
.portadilla {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
}
.portadilla-dato {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 14px;
border: 1px solid var(--arena);
border-radius: 999px;
background: #fff;
font-size: 13px;
font-weight: 600;
color: var(--carbon);
}
.portadilla-dato svg { color: var(--acento); }
.portadilla-promesa { background: var(--acento-suave); border-color: var(--acento-borde); color: var(--acento-oscuro, var(--acento)); }
.portadilla-promesa svg { color: inherit; }
.continuar-donde-iba {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 20px;
margin-bottom: 24px;
}
.continuar-donde-iba span { line-height: 1.65; }
.respiro {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
font-size: 13.5px;
color: var(--corteza);
}
.respiro strong { color: var(--acento-oscuro, var(--acento)); }
.paso-cabecera { display: flex; align-items: center; gap: 14px; }
.paso-cabecera-icono {
display: grid;
place-items: center;
width: 46px;
height: 46px;
flex-shrink: 0;
border-radius: 14px;
background: var(--acento-suave);
color: var(--acento);
}
.resumen-estudio {
margin-top: 24px;
border: 1px solid var(--arena);
border-radius: 16px;
background: #fff;
}
.resumen-estudio summary {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 20px;
cursor: pointer;
font-weight: 600;
font-size: 15px;
color: var(--acento-oscuro, var(--acento));
list-style: none;
}
.resumen-estudio summary::-webkit-details-marker { display: none; }
.resumen-estudio summary svg { width: 18px; height: 18px; }
.resumen-etapa { padding: 4px 20px 16px; border-top: 1px solid var(--crema); }
.resumen-etapa-titulo {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding-top: 12px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--acento);
}
.resumen-etapa-titulo a { font-size: 12.5px; letter-spacing: normal; text-transform: none; font-weight: 600; color: var(--marino); }
.resumen-etapa dl { margin: 10px 0 0; display: grid; gap: 8px; }
.resumen-etapa dl > div { display: grid; gap: 1px; }
.resumen-etapa dt { font-size: 12.5px; color: var(--corteza); }
.resumen-etapa dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--carbon); line-height: 1.5; }
.gracias-pasos {
position: relative;
margin: 20px 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 20px;
counter-reset: gracias;
}
.gracias-pasos::before {
content: '';
position: absolute;
left: 15px;
top: 18px;
bottom: 18px;
border-left: 2px dashed var(--salvia-borde);
}
.gracias-pasos li {
position: relative;
padding-left: 48px;
counter-increment: gracias;
}
.gracias-pasos li::before {
content: counter(gracias);
position: absolute;
left: 0;
top: 0;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--salvia);
border: 1.5px solid var(--salvia-borde);
color: var(--hoja);
font-size: 13px;
font-weight: 700;
}
.rejilla-fila { border: 1px solid var(--arena); background: var(--crema); border-radius: 12px; padding: 12px; }
.rejilla-fila p { margin-bottom: 8px; font-size: 14.5px; font-weight: 500; }
.rejilla-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.rejilla-opciones label {
border: 1px solid var(--arena);
background: #fff;
border-radius: 999px;
padding: 6px 12px;
font-size: 13px;
color: var(--corteza);
cursor: pointer;
transition: border-color 0.15s, background-color 0.15s, color 0.15s,
transform 0.12s ease;
}
.rejilla-opciones label:hover { border-color: var(--acento); }
.rejilla-opciones label:active { transform: scale(0.94); }
.rejilla-opciones input { position: absolute; opacity: 0; pointer-events: none; }
.rejilla-opciones input:checked + span,
.rejilla-opciones label.marcado { background: var(--acento); border-color: var(--acento); color: #fff; }
.progreso { height: 6px; width: 100%; border-radius: 999px; background: var(--arena); overflow: hidden; margin-top: 12px; }
.progreso div { height: 100%; border-radius: 999px; background: var(--acento); transition: width 0.5s; }
.rotulo { margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--acento); }
.barra-inferior {
position: sticky;
bottom: 0;
border-top: 1px solid var(--arena);
background: rgb(255 255 255 / 0.95);
backdrop-filter: blur(8px);
margin-top: 40px;
}
body.cuestionario .barra-inferior {
position: static;
background: #fff;
backdrop-filter: none;
}
.barra-inferior > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 16px; }
.aviso {
border: 1px solid var(--tierra);
background: var(--tierra-suave);
border-radius: 12px;
padding: 16px 20px;
font-size: 13.5px;
line-height: 1.65;
}
.aviso-ok { border-color: var(--salvia-borde); background: var(--salvia); color: var(--bosque-oscuro); }
.aviso-flotante {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
z-index: 60;
width: max-content;
max-width: min(92vw, 540px);
box-shadow: 0 10px 30px rgb(44 44 44 / 0.18);
}
@media (prefers-reduced-motion: no-preference) {
.aviso-flotante { animation: aviso-se-va 0.5s ease-in 5s forwards; }
.aviso-flotante-error { animation-delay: 12s; }
}
@keyframes aviso-se-va {
to { opacity: 0; visibility: hidden; }
}
.aviso-mal { border-color: var(--tierra-texto); background: #fdf3e8; color: #8a4f1d; }
.etiqueta {
display: inline-flex;
align-items: center;
gap: 5px;
border-radius: 999px;
padding: 4px 12px;
font-size: 12px;
font-weight: 600;
}
.etiqueta svg { width: 13px; height: 13px; flex-shrink: 0; }
.etiqueta-verde { background: var(--salvia); color: var(--bosque); }
.etiqueta-tierra { background: var(--tierra-suave); color: var(--tierra-texto); }
.etiqueta-neutra { background: var(--arena); color: var(--corteza); }
.etiqueta-nuevo { background: var(--marino); color: #fff; }
.boton-peligro {
background: var(--tierra-texto);
color: #fff;
border-color: var(--tierra-texto);
}
.boton-peligro:hover { background: #874f20; border-color: #874f20; }
.tarjeta-estudio { border-left: 4px solid transparent; transition: border-color 0.15s ease; }
.tarjeta-estudio.sin-leer { border-left-color: var(--marino); background: var(--nube); }
.ficha-nueva { border-style: dashed; background: transparent; }
.etiqueta-familia { background: var(--acento-suave); color: var(--acento-oscuro); }
.informe { --acento: var(--bosque); --acento-oscuro: var(--bosque-oscuro); --acento-suave: var(--salvia); }
.informe h1, .informe h2 { color: var(--acento); }
.portada {
background: var(--acento-suave);
border-radius: 28px;
padding: 56px 32px;
text-align: center;
}
.seccion-informe { margin-top: 48px; }
.seccion-informe > h2 { font-size: 22px; margin-bottom: 20px; }
@media (min-width: 640px) { .seccion-informe > h2 { font-size: 26px; } }
.seccion-informe > h2 { display: flex; align-items: center; gap: 10px; }
.seccion-informe > h2 > svg { width: 1em; height: 1em; flex-shrink: 0; }
.icono-texto {
width: 1.05em;
height: 1.05em;
flex-shrink: 0;
vertical-align: -0.16em;
}
.producto { display: flex; align-items: flex-start; gap: 16px; }
.producto .foto {
display: grid;
place-items: center;
width: 88px;
height: 88px;
flex-shrink: 0;
border: 1px solid var(--salvia-borde);
border-radius: 14px;
background: #fff;
padding: 4px;
overflow: hidden;
}
.producto .foto img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.producto .paso {
display: grid;
place-items: center;
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 999px;
background: var(--acento);
color: #fff;
font-weight: 700;
font-size: 15px;
}
.chip {
display: inline-block;
border-radius: 999px;
background: var(--acento-suave);
color: var(--acento);
padding: 4px 12px;
font-size: 12.5px;
}
.barra-eje { height: 6px; width: 100%; max-width: 120px; border-radius: 999px; background: var(--arena); overflow: hidden; }
.barra-eje div { height: 100%; border-radius: 999px; background: var(--acento); }
.informe-cubierta { position: relative; overflow: hidden; }
.informe-cubierta-hoja {
position: absolute;
top: -44px;
right: -48px;
width: 220px;
height: 220px;
color: var(--acento);
opacity: 0.08;
transform: rotate(16deg);
pointer-events: none;
}
.informe-cubierta-nombre {
margin-top: 24px;
font-size: clamp(24px, 5vw, 30px);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--acento);
}
.informe-cubierta-firma {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 28px;
padding: 8px 20px 8px 10px;
background: #fff;
border: 1px solid var(--salvia-borde);
border-radius: 999px;
text-align: left;
}
.informe-cubierta-firma img,
.informe-firma img,
.informe-firma-inicial {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.informe-firma-inicial {
display: grid;
place-items: center;
background: var(--acento-suave);
color: var(--acento);
font-weight: 700;
font-size: 18px;
}
.informe-cubierta-firma > span:last-child,
.informe-firma > span:last-child { display: grid; gap: 1px; }
.informe-cubierta-firma strong,
.informe-firma strong { color: var(--acento); font-size: 14.5px; }
.informe-cubierta-firma span span,
.informe-firma span span { font-size: 12px; color: var(--grafito); }
.informe-indice {
margin-top: 32px;
border: 1px solid var(--salvia-borde);
background: #fff;
border-radius: 16px;
padding: 20px 24px;
}
.informe-indice-titulo {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--acento);
}
.informe-indice ol {
list-style: none;
margin: 14px 0 0;
padding: 0;
display: grid;
gap: 2px 28px;
}
@media (min-width: 640px) { .informe-indice ol { grid-template-columns: 1fr 1fr; } }
.informe-indice a {
display: flex;
align-items: center;
gap: 9px;
padding: 5px 0;
text-decoration: none;
color: var(--carbon);
font-size: 14px;
}
.informe-indice a:hover > span:last-child { text-decoration: underline; }
.informe-indice a svg { color: var(--acento); }
.informe-indice-num { font-size: 11px; font-weight: 700; color: var(--grafito); font-variant-numeric: tabular-nums; }
.informe-h2 { color: var(--acento); }
.informe-h2-chip {
display: grid;
place-items: center;
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 12px;
background: var(--acento-suave);
color: var(--acento);
}
.informe-h2-chip svg { width: 20px; height: 20px; }
.informe-h2-num { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--grafito); }
.hallazgos-grupo {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.empieza-aqui {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
padding: 4px 12px;
border-radius: 999px;
background: var(--acento);
color: #fff;
font-size: 12px;
font-weight: 700;
}
.producto-datos { display: grid; gap: 6px; margin-top: 12px; }
.producto-dato {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px 12px;
border: 1px solid var(--salvia-borde);
border-radius: 10px;
background: var(--marfil);
font-size: 13px;
line-height: 1.6;
color: var(--grafito);
}
.producto-dato svg { color: var(--acento); margin-top: 2px; }
.producto-dato-alerta { background: var(--tierra-suave); border-color: #ecd9c2; color: var(--tierra-texto); }
.producto-dato-alerta svg { color: var(--tierra-texto); }
.producto-dato-bien { color: var(--acento); font-weight: 500; }
.informe-prioridades { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.informe-prioridad { display: flex; align-items: center; gap: 14px; }
.informe-prioridad-puesto {
display: grid;
place-items: center;
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 50%;
background: var(--acento-suave);
color: var(--acento);
font-size: 13px;
font-weight: 700;
}
.informe-prioridad-cuerpo { display: grid; gap: 6px; flex: 1; min-width: 0; }
.informe-prioridad-nombre { font-size: 14.5px; font-weight: 600; color: var(--carbon); }
.informe-prioridad-barra {
display: block;
height: 10px;
border-radius: 999px;
background: var(--arena);
overflow: hidden;
}
.informe-prioridad-barra span { display: block; height: 100%; border-radius: 999px; background: var(--acento); }
.informe-prioridad-primera .informe-prioridad-puesto { width: 34px; height: 34px; background: var(--acento); color: #fff; }
.informe-prioridad-primera .informe-prioridad-nombre { font-size: 16.5px; }
.informe-prioridad-primera .informe-prioridad-barra { height: 14px; }
.informe-cita { position: relative; margin-top: 24px; padding: 16px 4px 0 22px; }
.informe-comillas {
position: absolute;
top: -8px;
left: -6px;
font-size: 64px;
font-weight: 800;
line-height: 1;
color: var(--acento);
opacity: 0.22;
user-select: none;
}
.informe-cita p { font-size: 16.5px; font-weight: 600; line-height: 1.65; color: var(--acento); }
.informe-cita .informe-cita-de { margin-top: 6px; font-size: 12.5px; font-weight: 500; color: var(--grafito); }
.informe-firma {
display: flex;
align-items: center;
gap: 12px;
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid rgb(0 0 0 / 0.08);
}
.informe-firma img { width: 52px; height: 52px; }
.informe-salto { position: fixed; right: 16px; bottom: 16px; z-index: 60; }
.informe-salto summary {
list-style: none;
cursor: pointer;
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--acento);
color: #fff;
box-shadow: var(--sombra-flotante);
}
.informe-salto summary::-webkit-details-marker { display: none; }
.informe-salto summary svg { width: 22px; height: 22px; }
.informe-salto ol {
position: absolute;
right: 0;
bottom: 62px;
width: min(78vw, 300px);
max-height: 60vh;
overflow: auto;
list-style: none;
margin: 0;
padding: 10px;
background: #fff;
border: 1px solid var(--salvia-borde);
border-radius: 16px;
box-shadow: var(--sombra-alta);
display: grid;
gap: 2px;
}
.informe-salto a {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 10px;
text-decoration: none;
color: var(--carbon);
font-size: 13.5px;
}
.informe-salto a:hover { background: var(--acento-suave); }
.informe-salto a svg { color: var(--acento); flex-shrink: 0; }
.informe-membrete { display: none; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-scroll { overflow-x: auto; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tabla th, .tabla td { text-align: left; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--salvia-borde); }
.tabla th { font-weight: 600; color: var(--acento); }
.desplazable { overflow-x: auto; }
.pie { background: var(--marino-oscuro); color: #fff; padding: 40px 0 56px; overflow: hidden; }
.pie a { color: var(--cielo); }
.pie .legal { font-size: 12px; line-height: 1.7; color: rgb(116 217 255 / 0.8); padding-top: 32px; }
.pie .superior { display: flex; flex-direction: column; gap: 40px; border-bottom: 1px solid rgb(255 255 255 / 0.15); padding-bottom: 40px; }
@media (min-width: 640px) {
.pie .superior { flex-direction: row; align-items: flex-start; justify-content: space-between; }
}
.pie .red { color: #fff; border: 1px solid rgb(255 255 255 / 0.25); }
.pie-hoja {
position: absolute;
color: #fff;
opacity: 0.045;
pointer-events: none;
}
.pie-hoja-a { top: -8px; right: -20px; width: 190px; height: 190px; transform: rotate(18deg); }
.pie-hoja-b { bottom: 30px; left: -30px; width: 120px; height: 120px; transform: rotate(-140deg); }
.pie-nota {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 18px;
font-size: 13px;
color: var(--cielo);
text-decoration: none;
}
.pie-nota .valoracion-media { color: #f2c14e; }
.pie-nota .estrella { width: 16px; height: 16px; }
.pie-nota strong { color: #fff; font-size: 14px; }
.pie-nota:hover span { text-decoration: underline; }
.pie-insignia {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 16px;
padding: 6px 12px;
border: 1px solid rgb(255 255 255 / 0.22);
border-radius: 999px;
font-size: 12px;
font-weight: 500;
color: rgb(255 255 255 / 0.85);
}
.pie-insignia svg { color: var(--verde); }
.pie-correo { margin-top: 14px; font-size: 13.5px; }
.pie-correo a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.pie-correo a:hover { text-decoration: underline; }
.pie-presenta { flex: 0 1 320px; }
.pie-mapa {
flex: 1 1 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 28px 36px;
}
.pie-mapa-titulo {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgb(255 255 255 / 0.55);
margin-bottom: 12px;
}
.pie-mapa a {
display: block;
padding: 4px 0;
font-size: 14px;
text-decoration: none;
}
.pie-mapa a:hover { color: #fff; text-decoration: underline; }
.pie-solo-buscadores { display: none; }
.pie-atiende {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 18px;
padding: 8px 20px 8px 10px;
border: 1px solid rgb(255 255 255 / 0.18);
border-radius: 999px;
}
.pie-atiende img,
.pie-atiende-inicial {
width: 46px;
height: 46px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.pie-atiende-inicial {
display: grid;
place-items: center;
background: rgb(255 255 255 / 0.14);
color: #fff;
font-weight: 700;
font-size: 19px;
}
.pie-atiende > span:last-child { display: grid; gap: 1px; }
.pie-atiende strong { color: #fff; font-size: 14.5px; }
.pie-atiende > span:last-child > span { font-size: 12px; color: var(--cielo); }
@media (min-width: 800px) {
.pie .legal > p:first-child { columns: 2; column-gap: 48px; }
}
.pie-creditos {
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid rgb(255 255 255 / 0.12);
font-size: 12.5px;
line-height: 1.7;
color: rgb(255 255 255 / 0.75);
}
.pie-creditos strong { color: #fff; }
.pie-creditos a { font-weight: 600; }
.lan-pie-comun {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
display: grid;
gap: 10px;
}
.lan-pie-insignia {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 13px;
border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
border-radius: 999px;
font-size: 11.5px;
font-weight: 500;
}
.lan-pie-correo a {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12.5px;
color: inherit;
text-decoration: none;
}
.lan-pie-correo a:hover { text-decoration: underline; }
.lan-pie-creditos { margin-top: 14px; font-size: 12px; line-height: 1.7; opacity: 0.85; }
.lan-pie-creditos strong { font-weight: 700; }
.lan-pie-creditos a { color: inherit; font-weight: 600; }
@media (max-width: 799px) {
.lan-pie-dos { display: flex; flex-direction: column; gap: 12px; }
.lan-pie-dos > p:nth-child(1) { order: 1; }
.lan-pie-dos > .lan-pie-comun { order: 2; margin-top: 0; padding-top: 0; border-top: 0; }
.lan-pie-dos > .lan-pie-legal { order: 3; margin: 0; }
.lan-pie-dos > p:nth-child(2) { order: 4; margin: 0; }
.lan-pie-dos > .lan-pie-creditos {
order: 5;
margin-top: 4px;
padding-top: 14px;
border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
}
@media (min-width: 800px) {
.lan-pie-dos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 56px;
align-items: start;
}
.lan-pie-dos > p:nth-child(1) { grid-area: 1 / 1; }
.lan-pie-dos > p:nth-child(2) { grid-area: 2 / 1; }
.lan-pie-dos > .lan-pie-legal { grid-area: 3 / 1; margin: 0; }
.lan-pie-dos > .lan-pie-comun { grid-area: 1 / 2 / 4 / 3; margin-top: 0; padding-top: 0; border-top: 0; }
.lan-pie-dos > .lan-pie-creditos {
grid-column: 1 / -1;
justify-self: stretch;
width: 100%;
max-width: none;
margin-top: 10px;
padding-top: 16px;
border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
text-align: center;
}
}
.subir {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 45;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: var(--flota-radio, 999px);
background: var(--flota-fondo, var(--marino));
color: var(--flota-tinta, #fff);
box-shadow: var(--flota-sombra, 0 8px 24px rgb(0 40 90 / 0.25));
opacity: 0;
transform: translateY(10px);
transition: opacity 0.25s ease, transform 0.25s ease, bottom 0.2s ease;
pointer-events: none;
}
.subir svg { width: 22px; height: 22px; }
.subir:hover { background: var(--flota-fondo-hover, var(--marino-oscuro)); }
.subir:focus-visible {
outline: 3px solid var(--flota-foco, var(--verde));
outline-offset: 2px;
}
.subir.visible {
opacity: 1;
transform: none;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.subir { transition: none; }
}
@media (min-width: 861px) and (max-width: 1300px) {
.subir { width: 40px; height: 40px; }
.subir svg { width: 19px; height: 19px; }
.subir.visible { opacity: 0.6; }
.subir.visible:hover,
.subir.visible:focus-visible { opacity: 1; }
}
@media (max-width: 860px) {
body.cuestionario .subir { display: none; }
}
.aviso-cookies {
position: fixed;
inset: auto 0 0 0;
z-index: 40;
padding: 12px;
animation: emerger 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.6s backwards;
}
.aviso-cookies-caja {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
width: 100%;
max-width: 820px;
margin-inline: auto;
border: 1px solid var(--arena);
border-radius: 18px;
background: rgb(255 255 255 / 0.97);
backdrop-filter: blur(10px);
box-shadow: var(--sombra-alta);
padding: 12px 14px;
}
.aviso-cookies-en-flujo {
position: static;
padding-inline: 20px;
padding-bottom: 24px;
animation: none;
}
.aviso-cookies p { flex: 1 1 auto; min-width: 0; line-height: 1.55; color: var(--corteza); }
.aviso-cookies-mas { display: none; }
.aviso-cookies a { color: var(--marino); }
.aviso-cookies form { display: flex; }
.aviso-cookies .boton { width: auto; flex-shrink: 0; padding-inline: 14px; }
@media (min-width: 620px) {
.aviso-cookies { padding: 16px; }
.aviso-cookies-caja { gap: 20px; padding: 18px 20px; }
.aviso-cookies p { line-height: 1.65; }
.aviso-cookies-mas { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
.aviso-cookies { animation: none; }
}
.pie .marca,
.pie .marca .m1,
.pie .marca .m2 { color: #fff; }
.pie .marca img { filter: brightness(0) invert(1); }
.pie .red:hover { background: #fff; color: var(--marino-oscuro); }
.t-peq { font-size: 13px; }
.t-med { font-size: 14.5px; }
.t-gr  { font-size: 18px; }
.gris { color: var(--corteza); }
.grafito { color: var(--grafito); }
.acento { color: var(--acento); }
.titular { font-size: 38px; line-height: 1.08; letter-spacing: -0.02em; }
.seccion-titulo { font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; }
@media (min-width: 640px) {
.titular { font-size: 52px; }
.seccion-titulo { font-size: 42px; }
}
@media (min-width: 1024px) { .titular { font-size: 58px; } }
.tira-asesor {
display: inline-flex;
align-items: center;
gap: 12px;
text-align: left;
border: 1px solid var(--arena);
background: rgb(255 255 255 / 0.7);
border-radius: 999px;
padding: 8px 18px 8px 8px;
font-size: 14px;
color: var(--carbon);
}
.tira-asesor strong { display: block; font-weight: 600; color: var(--marino); }
.tira-asesor-frase { display: block; }
.tira-asesor-foto {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 999px;
object-fit: cover;
display: block;
}
.foto-cuenta {
display: grid;
place-items: center;
flex-shrink: 0;
width: 72px;
height: 72px;
border-radius: 999px;
object-fit: cover;
}
.foto-cuenta-inicial {
background: var(--marino);
color: #fff;
font-size: 24px;
font-weight: 700;
}
.indice-cuenta {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
margin: -16px 0 28px;
}
.indice-cuenta a {
color: var(--corteza);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid rgb(0 74 173 / 0.25);
padding-bottom: 2px;
}
.indice-cuenta a:hover {
color: var(--marino);
border-color: var(--marino);
}
.boton-copiar {
align-self: flex-start;
justify-self: start;
margin-top: 8px;
}
[data-copiar].copiado {
color: var(--hoja);
border-color: var(--hoja);
}
[data-copiar] { position: relative; }
@media (prefers-reduced-motion: no-preference) {
[data-copiar].copiado::after {
content: "";
position: absolute;
inset: -3px;
border-radius: inherit;
border: 2px solid var(--hoja);
pointer-events: none;
animation: aro-copiado 0.6s ease-out forwards;
}
}
@keyframes aro-copiado {
from { opacity: 0.7; transform: scale(0.92); }
to { opacity: 0; transform: scale(1.12); }
}
.tira-elegir {
position: relative;
flex-shrink: 1;
min-width: 0;
}
.tira-elegir-cabeza {
cursor: pointer;
list-style: none;
user-select: none;
max-width: 100%;
white-space: nowrap;
}
.tira-elegir-cabeza .tira-asesor-cargo { white-space: nowrap; }
.tira-elegir { max-width: 46%; }
.tira-elegir-cabeza > span { min-width: 0; overflow: hidden; }
.tira-elegir-cabeza strong,
.tira-elegir-cabeza .tira-asesor-cargo {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 560px) {
.tira-elegir { max-width: 52vw; }
.tira-elegir .tira-elegir-cabeza .tira-asesor-cargo { display: none; }
.tira-elegir-cabeza strong { font-size: 13px; }
.tira-elegir-flecha { width: 30px; height: 30px; }
}
.tira-elegir-cabeza::-webkit-details-marker { display: none; }
.tira-elegir-flecha {
display: grid;
place-items: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 50%;
background: var(--marino);
color: #fff;
transition: transform 0.2s ease;
}
.tira-elegir-flecha svg { width: 18px; height: 18px; }
.tira-elegir[open] .tira-elegir-flecha { transform: rotate(180deg); }
.tira-elegir-caja {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 40;
width: min(320px, calc(100vw - 32px));
padding: 18px;
border: 1px solid var(--arena);
border-radius: 16px;
background: #fff;
box-shadow: 0 18px 44px rgb(20 40 60 / 0.16);
}
.boton-enlace {
padding: 0;
border: 0;
background: none;
color: var(--corteza);
text-decoration: underline;
cursor: pointer;
font: inherit;
}
.boton-enlace:hover { color: var(--marino); }
@media (prefers-reduced-motion: reduce) {
.tira-elegir-flecha { transition: none; }
}
.tira-cabecera .tira-asesor-foto,
.tira-cabecera .tira-asesor-inicial { width: 34px; height: 34px; font-size: 13px; }
.tira-cabecera strong { font-size: 13.5px; line-height: 1.25; }
.tira-cabecera .tira-asesor-cargo {
display: block;
color: var(--hoja);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.tira-cabecera .tira-asesor-frase { display: none; }
@media (max-width: 560px) {
.tira-cabecera {
max-width: 58vw;
gap: 8px;
padding: 5px 12px 5px 5px;
flex-shrink: 1;
min-width: 0;
}
.tira-cabecera > span { min-width: 0; }
.cabecera .envoltorio:has(.tira-cabecera) { gap: 8px; }
.cabecera .envoltorio:has(.tira-cabecera) .marca { gap: 7px; }
.cabecera .envoltorio:has(.tira-cabecera) .marca img { width: 30px; height: 30px; }
.cabecera .envoltorio:has(.tira-cabecera) .marca > span {
font-size: 12px;
line-height: 1.1;
max-width: 7ch;
white-space: normal;
}
.tira-cabecera .tira-asesor-foto,
.tira-cabecera .tira-asesor-inicial { width: 30px; height: 30px; font-size: 12px; }
.tira-cabecera strong {
font-size: 12.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tira-cabecera .tira-asesor-cargo {
font-size: 9.5px;
letter-spacing: 0.04em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@media (max-width: 360px) {
.tira-cabecera { max-width: 46vw; padding-right: 9px; }
}
.tira-asesor-cuestionario,
.tira-asesor-gracias { display: flex; width: fit-content; }
.tira-asesor-cuestionario { margin-top: 20px; }
.tira-asesor-gracias { margin: 32px auto 0; }
.pildora {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid rgb(0 216 112 / 0.4);
background: #fff;
border-radius: 999px;
padding: 6px 16px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--hoja);
}
.vistazo {
background: #fff;
border: 1px solid var(--salvia-borde);
border-radius: 20px;
box-shadow: var(--sombra-alta);
padding: 24px;
}
.retrato-asesor {
aspect-ratio: 1;
width: 100%;
overflow: hidden;
border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
background: var(--nube);
box-shadow: var(--sombra-alta);
}
.retrato-asesor img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rejilla-dos { display: grid; gap: 16px; }
@media (min-width: 640px) { .rejilla-dos { grid-template-columns: repeat(2, 1fr); } }
.estudio-cabecera { display: grid; gap: 16px; max-width: 62ch; }
.estudio-icono {
display: grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: 20px;
background: #fff;
border: 1px solid var(--acento-borde);
color: var(--acento);
}
.estudio-puntos { display: grid; gap: 12px; margin-top: 32px; }
@media (min-width: 700px) { .estudio-puntos { grid-template-columns: repeat(2, 1fr); } }
.estudio-puntos li {
display: flex;
align-items: flex-start;
gap: 12px;
background: #fff;
border: 1px solid var(--acento-borde);
border-radius: 16px;
padding: 16px 20px;
font-size: 14.5px;
line-height: 1.55;
color: var(--corteza);
}
.estudio-puntos .marca-punto { color: var(--acento); flex-shrink: 0; margin-top: 1px; }
.estudio-puntos .marca-punto svg { width: 18px; height: 18px; }
.quitado { opacity: 0.55; border-style: dashed; }
.quitado h3 { text-decoration: line-through; }
.estudio-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; }
.estudios-dos { display: grid; gap: 20px; }
@media (min-width: 900px) {
.estudios-dos { grid-template-columns: 1fr 1fr; gap: 28px; }
}
.estudio-tarjeta {
display: flex;
flex-direction: column;
background: var(--acento-suave);
border: 1px solid var(--acento-borde);
border-radius: 24px;
padding: clamp(24px, 3.5vw, 40px);
}
.estudio-tarjeta .estudio-cabecera { max-width: none; gap: 12px; }
.estudio-nombre { font-size: clamp(24px, 3vw, 30px); line-height: 1.15; color: var(--acento); }
.estudio-tarjeta .estudio-puntos-columna { grid-template-columns: 1fr; margin-top: 24px; }
.estudio-tarjeta .estudio-puntos li { padding: 12px 16px; }
.estudio-tarjeta .estudio-pie { margin-top: auto; padding-top: 28px; }
.sobre-mas { margin-top: 16px; }
.sobre-mas summary {
cursor: pointer;
font-weight: 600;
color: var(--marino);
list-style: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.sobre-mas summary::-webkit-details-marker { display: none; }
.sobre-mas summary::before { content: '+'; font-weight: 700; }
.sobre-mas[open] summary::before { content: '−'; }
.sobre-mas summary::after { content: ''; }
.testimonio {
position: relative;
margin: 0;
background: var(--crema);
border: 1px solid var(--arena);
border-radius: 24px;
padding: 28px;
}
.testimonio::before {
content: '\201C';
position: absolute;
top: 4px;
left: 18px;
font-size: 64px;
line-height: 1;
color: var(--verde);
opacity: 0.18;
pointer-events: none;
}
.testimonio blockquote {
position: relative;
margin: 0;
font-size: 15px;
line-height: 1.75;
color: var(--corteza);
}
.testimonio figcaption {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--arena);
}
.testimonio .firma { font-size: 14.5px; font-weight: 600; color: var(--marino); }
.valoracion { display: inline-flex; gap: 2px; color: #b8830f; }
.valoracion .estrella { width: 17px; height: 17px; }
.valoracion-media {
position: relative;
display: inline-block;
line-height: 0;
color: #b8830f;
}
.valoracion-media .vm-fondo,
.valoracion-media .vm-frente { display: flex; gap: 2px; }
.valoracion-media .vm-frente {
position: absolute;
inset: 0 auto 0 0;
overflow: hidden;
white-space: nowrap;
}
.valoracion-media .estrella { width: 22px; height: 22px; flex-shrink: 0; }
.nota-media {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
margin-top: 22px;
padding: 10px 18px;
border: 1px solid var(--arena);
border-radius: 999px;
background: #fff;
}
.nota-media-cifra { font-size: 20px; color: var(--marino); line-height: 1; }
.selector-estrellas {
display: inline-flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 4px;
color: var(--arena);
}
.selector-estrellas input { position: absolute; opacity: 0; width: 0; height: 0; }
.selector-estrellas label {
cursor: pointer;
line-height: 0;
padding: 2px;
transition: color 0.15s, transform 0.1s;
}
.selector-estrellas svg { width: 30px; height: 30px; fill: none; }
.selector-estrellas input:checked ~ label,
.selector-estrellas label:hover,
.selector-estrellas label:hover ~ label { color: #b8830f; }
.selector-estrellas input:checked ~ label svg,
.selector-estrellas label:hover svg,
.selector-estrellas label:hover ~ label svg { fill: currentColor; }
.selector-estrellas label:hover { transform: scale(1.08); }
.selector-estrellas input:focus-visible + label {
outline: 2px solid var(--acento);
outline-offset: 2px;
border-radius: 4px;
}
.botones-portada { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
@media (min-width: 640px) {
.botones-portada { flex-direction: row; align-items: center; justify-content: center; }
}
@media (min-width: 900px) { .botones-portada { justify-content: flex-start; } }
.portada-texto { text-align: center; }
@media (min-width: 900px) {
.portada-rejilla:has(.portada-burbuja) .portada-texto { text-align: left; }
.portada-rejilla:not(:has(.portada-burbuja)) .portada-texto {
max-width: 46ch;
margin-inline: auto;
}
.portada-rejilla:not(:has(.portada-burbuja)) .portada-texto p { margin-inline: auto; }
.portada-rejilla:not(:has(.portada-burbuja)) .botones-portada { justify-content: center; }
}
.icono-peq { width: 15px; height: 15px; flex-shrink: 0; }
.icono-lin { width: 22px; height: 22px; flex-shrink: 0; }
.icono-med { width: 26px; height: 26px; flex-shrink: 0; }
.icono-gr { width: 30px; height: 30px; flex-shrink: 0; }
.flecha { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.2s; }
.boton:hover .flecha { transform: translateX(4px); }
.portada-seccion { padding-block: 56px 88px; }
@media (min-width: 900px) { .portada-seccion { padding-block: 112px 96px; } }
.portada-dos { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) {
.portada-dos { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
.portada-dos .portada-texto { text-align: left; }
}
.portada-entrada {
margin-top: 24px;
max-width: 52ch;
font-size: 16.5px;
line-height: 1.7;
color: var(--corteza);
}
@media (max-width: 899px) { .portada-entrada { margin-inline: auto; } }
.resaltado { position: relative; color: var(--hoja); white-space: nowrap; }
.trazo-subrayado {
position: absolute;
left: -0.04em;
bottom: -0.12em;
width: calc(100% + 0.08em);
height: 0.22em;
color: rgb(0 216 112 / 0.55);
}
.portada-garantias {
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
margin-top: 28px;
padding: 0;
list-style: none;
justify-content: center;
}
@media (min-width: 900px) { .portada-garantias { justify-content: flex-start; } }
.portada-garantias li {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13.5px;
font-weight: 500;
color: var(--corteza);
}
.portada-garantias svg { color: var(--hoja); }
.portada-nota {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 16px;
font-size: 13.5px;
color: var(--corteza);
text-decoration: none;
}
.portada-nota strong { font-size: 15px; color: var(--marino); }
.portada-nota:hover span { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
.portada-texto .trazo-subrayado path {
stroke-dasharray: 1;
animation: trazo-dibujado 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.35s backwards;
}
.vm-frente {
animation: estrellas-llenas 1s ease-out 0.5s backwards;
}
.valoracion .estrella {
transform-origin: center;
animation: estrella-brota 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.valoracion .estrella:nth-child(1) { animation-delay: 0.2s; }
.valoracion .estrella:nth-child(2) { animation-delay: 0.28s; }
.valoracion .estrella:nth-child(3) { animation-delay: 0.36s; }
.valoracion .estrella:nth-child(4) { animation-delay: 0.44s; }
.valoracion .estrella:nth-child(5) { animation-delay: 0.52s; }
.etapa-hecha .etapa-check path {
stroke-dasharray: 26;
animation: trazo-check 0.4s ease-out backwards;
}
.etapa:nth-child(2) .etapa-check path { animation-delay: 0.08s; }
.etapa:nth-child(3) .etapa-check path { animation-delay: 0.16s; }
.etapa:nth-child(4) .etapa-check path { animation-delay: 0.24s; }
.etapa:nth-child(5) .etapa-check path { animation-delay: 0.32s; }
.etapa:nth-child(6) .etapa-check path { animation-delay: 0.4s; }
.etapa:nth-child(7) .etapa-check path { animation-delay: 0.48s; }
.etapa:nth-child(8) .etapa-check path { animation-delay: 0.56s; }
.progreso div { animation: progreso-avanza 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.gama-bloque-cifra { animation: cifra-posa 0.8s ease-out 0.15s backwards; }
.gama-bloque:nth-child(2) .gama-bloque-cifra { animation-delay: 0.27s; }
.gama-bloque:nth-child(3) .gama-bloque-cifra { animation-delay: 0.39s; }
.gama-bloque:nth-child(4) .gama-bloque-cifra { animation-delay: 0.51s; }
.portada-garantias li { animation: garantia-brota 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.portada-garantias li:nth-child(1) { animation-delay: 0.25s; }
.portada-garantias li:nth-child(2) { animation-delay: 0.35s; }
.portada-garantias li:nth-child(3) { animation-delay: 0.45s; }
.portada-firma img,
.portada-firma-inicial,
.pie-atiende img,
.pie-atiende-inicial {
animation: aro-pulso 1.2s ease-out 0.9s 1;
}
.galeria-testimonios .testimonio,
.rejilla-familias > * {
animation: emerger 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.galeria-testimonios .testimonio:nth-child(2),
.rejilla-familias > *:nth-child(2) { animation-delay: 0.07s; }
.galeria-testimonios .testimonio:nth-child(3),
.rejilla-familias > *:nth-child(3) { animation-delay: 0.14s; }
.galeria-testimonios .testimonio:nth-child(4),
.rejilla-familias > *:nth-child(4) { animation-delay: 0.21s; }
.galeria-testimonios .testimonio:nth-child(5),
.rejilla-familias > *:nth-child(5) { animation-delay: 0.28s; }
.sor-premio-1 .sor-medalla,
.sor-premio-2 .sor-medalla,
.sor-premio-3 .sor-medalla,
.sor-ganador .sor-medalla { position: relative; overflow: hidden; }
.sor-premio-1 .sor-medalla::after,
.sor-premio-2 .sor-medalla::after,
.sor-premio-3 .sor-medalla::after,
.sor-ganador .sor-medalla::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(115deg, transparent 32%, rgb(255 255 255 / 0.75) 50%, transparent 68%);
transform: translateX(-130%);
animation: medalla-brillo 1.1s ease-out 0.9s 1 forwards;
}
}
@keyframes trazo-check {
from { stroke-dashoffset: 26; }
to { stroke-dashoffset: 0; }
}
@keyframes progreso-avanza {
from { width: var(--progreso-de, 0%); }
}
@keyframes cifra-posa {
from { opacity: 0; transform: translateY(16px); }
}
@keyframes garantia-brota {
from { opacity: 0; transform: scale(0.6); }
}
@keyframes aro-pulso {
from { box-shadow: 0 0 0 0 rgb(0 216 112 / 0.45); }
to { box-shadow: 0 0 0 14px rgb(0 216 112 / 0); }
}
@keyframes medalla-brillo {
to { transform: translateX(130%); }
}
@keyframes trazo-dibujado {
from { stroke-dashoffset: 1; }
to { stroke-dashoffset: 0; }
}
@keyframes estrellas-llenas {
from { max-width: 0; }
to { max-width: 100%; }
}
@keyframes estrella-brota {
from { opacity: 0; transform: scale(0.3) rotate(-15deg); }
to { opacity: 1; transform: none; }
}
.portada-firma {
display: inline-flex;
align-items: center;
gap: 14px;
margin-top: 32px;
padding: 10px 24px 10px 12px;
background: #fff;
border: 1px solid var(--arena);
border-radius: 999px;
text-align: left;
}
.portada-firma img,
.portada-firma-inicial {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.portada-firma-inicial {
display: grid;
place-items: center;
background: var(--salvia);
color: var(--hoja);
font-weight: 700;
font-size: 22px;
}
.portada-firma > span:last-child { display: grid; gap: 2px; }
.portada-firma strong { color: var(--marino); font-size: 15.5px; }
.portada-caminos { display: grid; gap: 14px; }
.portada-caminos-rotulo {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--corteza);
text-align: center;
}
@media (min-width: 900px) { .portada-caminos-rotulo { text-align: left; } }
.camino {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
border: 1px solid var(--acento-borde);
border-left: 4px solid var(--acento);
border-radius: 20px;
background: #fff;
text-decoration: none;
color: inherit;
box-shadow: 0 1px 2px rgb(31 41 55 / 0.04);
transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.24s ease, border-color 0.24s ease,
background-color 0.24s ease;
}
.camino-icono {
display: grid;
place-items: center;
width: 52px;
height: 52px;
flex-shrink: 0;
border-radius: 16px;
background: var(--acento-suave);
color: var(--acento);
transition: background-color 0.24s ease, color 0.24s ease;
}
.camino-texto { display: grid; gap: 4px; min-width: 0; }
.camino-texto strong { font-size: 16.5px; color: var(--acento); line-height: 1.3; }
.camino-texto .t-peq { line-height: 1.5; }
.camino-dato {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 2px;
font-size: 12.5px;
font-weight: 500;
color: var(--corteza);
}
.camino-flecha {
margin-left: auto;
display: grid;
place-items: center;
flex-shrink: 0;
color: var(--acento);
transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
.camino:hover {
transform: translateY(-3px);
border-color: var(--acento);
border-left-color: var(--acento);
background: var(--acento-suave);
box-shadow: 0 18px 34px -22px var(--acento);
}
.camino:hover .camino-icono { background: var(--acento); color: #fff; }
.camino:hover .camino-flecha { transform: translateX(4px); }
}
.camino:active { transform: translateY(0) scale(0.995); background: var(--acento-suave); }
.halo-dos-familias::after {
background:
radial-gradient(40% 52% at 14% 20%, rgb(0 216 112 / 0.20), transparent 70%),
radial-gradient(38% 50% at 88% 16%, rgb(192 67 80 / 0.13), transparent 72%),
radial-gradient(44% 58% at 60% 4%, rgb(116 217 255 / 0.22), transparent 74%);
}
@page { size: A4; margin: 16mm 14mm; }
@media print {
body { background: #fff; }
.no-imprimir, .cabecera, .pie, .barra-inferior { display: none !important; }
.pagina-nueva { break-before: page; }
.bloque-entero, .tarjeta, .tarjeta-informe, .producto { break-inside: avoid; page-break-inside: avoid; }
h1, h2, h3 { break-after: avoid; }
a[href]::after { content: ''; }
@page { margin: 18mm 13mm; }
.informe-membrete {
display: block;
position: fixed;
top: -13mm;
left: 0;
right: 0;
text-align: center;
font-size: 9.5px;
color: #6f6f6a;
}
.portada { background: #fff !important; border: 2px solid var(--acento); }
.informe-cubierta-firma { border-color: var(--acento); }
.informe .tarjeta-informe { background: #fff !important; border: 1px solid #d9d9d4 !important; }
.informe-cierre { border: 1.5px solid var(--acento) !important; }
.informe .producto-dato { background: #fff !important; }
.informe .chip { background: #fff !important; border: 1px solid var(--acento); }
.informe-h2-chip { background: #fff !important; border: 1px solid var(--acento); }
.informe-indice { break-inside: avoid; }
.producto .paso,
.empieza-aqui {
background: #fff !important;
color: var(--acento) !important;
border: 2px solid var(--acento);
}
.producto .foto { background: #fff !important; }
.informe-prioridad-barra,
.informe-prioridad-barra span,
.informe-prioridad-puesto {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
.lan-columna { display: grid; align-content: start; }
.gracias-dos { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1060px) {
.gracias-dos { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
}
.gracias-arte { display: none; }
@media (min-width: 1060px) {
.gracias-arte { display: block; justify-self: end; width: 100%; max-width: 340px; }
}
.gracias-horas { display: block; width: 100%; height: auto; }
.gracias-hora {
fill: currentColor;
opacity: 0.18;
animation: gracias-entra 0.4s ease-out backwards;
animation-delay: calc(0.35s + var(--i) * 0.045s);
}
.gracias-hora-respuesta { opacity: 0.42; }
.gracias-hora-ahora {
fill: var(--gracias-acento, currentColor);
opacity: 1;
animation-delay: 0.3s;
}
.gracias-tramo {
fill: none;
stroke: currentColor;
stroke-width: 1.5;
opacity: 0.3;
animation: gracias-entra 0.5s ease-out backwards 1.2s;
}
@keyframes gracias-entra {
from { opacity: 0; }
}
.gracias-leyenda {
display: grid;
gap: 11px;
margin: 26px 0 0;
padding: 0;
list-style: none;
}
.gracias-leyenda li {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
font-size: 13px;
line-height: 1.45;
opacity: 0.75;
}
.gracias-leyenda li::before {
content: '';
flex: none;
width: 5px;
height: 20px;
border-radius: 2.5px;
background: currentColor;
opacity: 0.42;
}
.gracias-leyenda .gracias-leyenda-ahora { opacity: 1; font-weight: 600; }
.gracias-leyenda .gracias-leyenda-ahora::before {
background: var(--gracias-acento, currentColor);
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.gracias-hora,
.gracias-tramo { animation: none; }
}
.panel-ancho { max-width: 1600px; padding-inline: clamp(20px, 3vw, 48px); }
.rejilla-estudios { display: grid; gap: 10px; }
@media (min-width: 1100px) {
.rejilla-estudios { grid-template-columns: 1fr 1fr; }
}
.rejilla-moderar { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1100px) {
.rejilla-moderar { grid-template-columns: 1fr 1fr; }
}
.lan-buscador {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
.lan-buscador .campo { max-width: 340px; }
.lan-rejilla .tarjeta.lan-ficha {
border-top: 4px solid var(--cat, var(--marino));
}
.lan-ficha .lan-icono {
background: var(--cat-fondo, var(--nube));
color: var(--cat, var(--marino));
}
.lan-etiquetas {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.lan-chip {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
border: 1px solid var(--cat, var(--marino));
background: var(--cat-fondo, var(--nube));
color: var(--cat, var(--marino));
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.4;
font-family: inherit;
}
button.lan-chip { cursor: pointer; }
button.lan-chip:hover { filter: brightness(0.95); }
button.lan-chip.activa,
button.lan-chip[aria-pressed="true"] {
background: var(--cat, var(--marino));
color: #fff;
}
.lan-categorias { width: 100%; }
.lan-rejilla {
display: grid;
gap: 16px;
grid-template-columns: 1fr;
align-items: start;
}
@media (min-width: 680px) { .lan-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .lan-rejilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { .lan-rejilla { grid-template-columns: repeat(4, 1fr); } }
.lan-cabeza { display: flex; align-items: flex-start; gap: 12px; }
.lan-cabeza h3 { font-size: 17px; color: var(--marino); line-height: 1.25; }
.lan-cabeza p { margin-top: 4px; }
.lan-icono {
display: grid;
place-items: center;
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--nube);
color: var(--marino);
}
.lan-icono svg { width: 21px; height: 21px; }
.lan-objetivo { margin-top: 12px; line-height: 1.6; }
.lan-enlace {
margin-top: 12px;
font-weight: 600;
font-size: 13.5px;
}
.lan-acciones {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.lan-comun { margin-top: 44px; }
.lan-comun-titulo {
margin-bottom: 10px;
color: var(--marino);
font-size: 16px;
}
.lan-comun .lan-pasos { padding-left: 18px; }
.lan-guia {
margin-top: 10px;
border-top: 1px solid #eef1f5;
padding-top: 10px;
}
.lan-guia summary {
cursor: pointer;
color: var(--marino);
font-size: 13.5px;
font-weight: 600;
padding: 4px 0;
min-height: 32px;
}
.lan-guia summary:hover { color: var(--hoja); }
.lan-vista {
margin-top: 10px;
width: 100%;
height: auto;
border-radius: 10px;
border: 1px solid #dde3ea;
}
.lan-rotulo-guia {
margin: 14px 0 6px;
color: var(--marino);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.lan-guia > .lan-rotulo-guia:first-of-type { margin-top: 10px; }
.lan-texto {
width: 100%;
font-family: inherit;
font-size: 14px;
line-height: 1.6;
resize: vertical;
background: var(--nube, #f6f8fa);
}
.lan-pasos {
margin: 8px 0 0;
padding-left: 20px;
color: var(--corteza);
font-size: 14.5px;
line-height: 1.7;
}
.lan-pasos li { margin-bottom: 8px; }
.lan-pasos li:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
}
@media (max-width: 420px) {
}
@media (prefers-reduced-motion: reduce) {
}
.tira-asesor-cargo {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--hoja);
}
.ficha-numeros {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px 12px;
margin-top: 12px;
font-size: 12.5px;
color: var(--corteza);
}
.ficha-numeros strong { color: var(--marino); font-weight: 700; }
.ficha-numeros-ojo strong { color: var(--tierra-texto); }
.totales-equipo {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 24px;
text-align: center;
}
@media (min-width: 640px) { .totales-equipo { grid-template-columns: repeat(4, 1fr); } }
.totales-equipo strong {
display: block;
font-size: 26px;
line-height: 1.1;
color: var(--marino);
}
.totales-equipo span {
display: block;
margin-top: 4px;
font-size: 12.5px;
color: var(--corteza);
}
.permisos-lista .elegible:has(input:checked) {
border-color: var(--acento);
background: var(--acento-suave);
}
.cita-suya {
margin: 10px 0 0;
padding: 14px 18px;
border-left: 3px solid var(--acento);
background: var(--acento-suave);
border-radius: 0 12px 12px 0;
font-size: 17px;
line-height: 1.6;
color: var(--marino);
}
.lectura-oportunidad {
--acento: #1d3a67;
border-color: #cdd8ea;
background: linear-gradient(180deg, #f5f8fc 0%, #fff 220px);
}
.lectura-privada {
display: flex;
align-items: flex-start;
gap: 9px;
margin: 0 0 22px;
padding: 12px 16px;
border-radius: 12px;
background: #eef2f8;
border: 1px solid #d4dded;
font-size: 13.5px;
line-height: 1.65;
color: #1d3a67;
}
.lectura-privada svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.lectura-cabeza {
display: grid;
gap: 22px;
padding-bottom: 24px;
border-bottom: 1px solid var(--arena);
}
@media (min-width: 720px) {
.lectura-cabeza { grid-template-columns: 1.1fr 1fr; gap: 32px; }
}
.lectura-temp {
display: inline-block;
margin: 8px 0 0;
padding: 7px 20px;
border-radius: 999px;
font-size: 21px;
font-weight: 700;
letter-spacing: -0.01em;
}
.temp-caliente { background: #fdecd8; color: #8a4b0a; border: 1px solid #f3cf9f; }
.temp-templado { background: #eef2f8; color: #1d3a67; border: 1px solid #d4dded; }
.temp-frio     { background: #f1f3f5; color: #565f6b; border: 1px solid #dfe3e7; }
.lectura-cuando {
padding: 16px 18px;
border-radius: 14px;
background: #f8fafc;
border: 1px solid var(--arena);
}
.lectura-ejes {
display: grid;
gap: 18px;
padding-block: 24px;
border-bottom: 1px solid var(--arena);
grid-template-columns: 1fr;
}
@media (min-width: 620px) { .lectura-ejes { grid-template-columns: 1fr 1fr; gap: 20px 32px; } }
@media (min-width: 980px) { .lectura-ejes { grid-template-columns: repeat(5, 1fr); gap: 18px; } }
.lectura-bloque { padding-block: 22px; border-bottom: 1px solid var(--arena); }
.lectura-bloque:last-of-type { border-bottom: 0; }
.lectura-bloque h3 {
margin: 0;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gris-texto, #6b7280);
}
.lectura-etiqueta {
margin: 8px 0 0;
font-size: 18px;
font-weight: 700;
color: #1d3a67;
}
.lectura-avisos { list-style: none; padding: 0; }
.lectura-avisos li {
position: relative;
padding-left: 22px;
line-height: 1.8;
}
.lectura-avisos li::before {
content: '';
position: absolute;
left: 2px;
top: 0.66em;
width: 8px;
height: 8px;
border-radius: 2px;
background: #c9873a;
}
.lectura-mensaje {
margin: 14px 0 0;
padding: 18px 20px;
border-radius: 14px 14px 14px 4px;
background: #eef2f8;
border: 1px solid #d4dded;
font-size: 15.5px;
line-height: 1.8;
color: var(--corteza);
white-space: pre-wrap;
}
.campo-clave { position: relative; }
.campo-clave .campo { width: 100%; padding-right: 46px; }
.ver-clave {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
display: grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--gris-texto, #6b7280);
cursor: pointer;
}
.ver-clave:hover { color: var(--marino); background: var(--acento-suave, #eff6f1); }
.ver-clave[hidden] { display: none; }
.ver-clave svg { width: 20px; height: 20px; }
.ver-clave .ojo-cerrado { display: none; }
.ver-clave.viendo .ojo-abierto { display: none; }
.ver-clave.viendo .ojo-cerrado { display: block; }
.lan-qr { margin-top: 12px; }
.lan-qr summary {
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: var(--marino);
}
.lan-qr-caja {
display: grid;
gap: 12px;
justify-items: center;
margin-top: 14px;
padding: 18px;
border-radius: 14px;
background: #fff;
border: 1px solid var(--arena);
text-align: center;
}
.lan-qr-svg {
width: min(280px, 80vw);
height: auto;
display: block;
}
@media print {
.lan-qr-svg { width: 60mm; }
}
.galeria-testimonios { columns: 1; column-gap: 20px; margin-top: 32px; }
@media (min-width: 640px) { .galeria-testimonios { columns: 2; } }
@media (min-width: 900px) { .galeria-testimonios { columns: 3; } }
@media (min-width: 1100px) { .galeria-testimonios { columns: 4; } }
@media (min-width: 1500px) { .galeria-testimonios { columns: 5; } }
.galeria-ancha { max-width: 1480px; }
@media (min-width: 1100px) {
.galeria-testimonios .testimonio { padding: 20px; }
}
.galeria-testimonios .testimonio {
break-inside: avoid;
margin: 0 0 20px;
}
.filtro-testimonios {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.filtro-testimonios a {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 18px;
border-radius: 999px;
border: 1px solid var(--arena);
background: #fff;
color: var(--acento, var(--marino));
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.filtro-testimonios a svg { width: 15px; height: 15px; }
.filtro-testimonios a:hover {
border-color: var(--acento, var(--marino));
background: var(--acento-suave, #f4f1ea);
}
.filtro-testimonios a[aria-current="true"] {
background: var(--acento, var(--marino));
border-color: var(--acento, var(--marino));
color: #fff;
}
body.tema-nutricion:not(.panel),
body.tema-belleza:not(.panel) {
position: relative;
background:
radial-gradient(90% 40% at 50% 0%,
color-mix(in srgb, var(--acento) 8%, transparent) 0%, transparent 70%),
var(--crema);
}
.cielo-cuestionario {
position: fixed;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
body.tema-nutricion:not(.panel) main,
body.tema-belleza:not(.panel) main {
position: relative;
z-index: 1;
}
.cielo-cuestionario span {
position: absolute;
bottom: -3vh;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--acento);
opacity: 0;
animation: mota-sube linear infinite;
}
.cielo-cuestionario span:nth-child(1) { left: 6%;  animation-duration: 34s; animation-delay: 0s; }
.cielo-cuestionario span:nth-child(2) { left: 18%; animation-duration: 46s; animation-delay: -14s; width: 5px; height: 5px; }
.cielo-cuestionario span:nth-child(3) { left: 46%; animation-duration: 38s; animation-delay: -25s; width: 4px; height: 4px; }
.cielo-cuestionario span:nth-child(4) { left: 71%; animation-duration: 30s; animation-delay: -6s; }
.cielo-cuestionario span:nth-child(5) { left: 85%; animation-duration: 42s; animation-delay: -31s; width: 5px; height: 5px; }
.cielo-cuestionario span:nth-child(6) { left: 94%; animation-duration: 36s; animation-delay: -18s; width: 4px; height: 4px; }
@keyframes mota-sube {
0%   { transform: translateY(0); opacity: 0; }
10%  { opacity: 0.18; }
85%  { opacity: 0.10; }
100% { transform: translateY(-108vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.cielo-cuestionario span { animation: none; opacity: 0.10; bottom: auto; top: 30%; }
}
body.tema-nutricion:not(.panel) main > header,
body.tema-belleza:not(.panel) main > header {
padding: 20px 22px;
border-radius: 18px;
background: color-mix(in srgb, var(--acento) 5%, #ffffff);
border: 1px solid var(--acento-borde, var(--arena));
}
.reenganche { border-left: 3px solid #c9873a; }
.testimonio-foto {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 2px solid #fff;
box-shadow: 0 2px 8px rgb(31 41 51 / 0.12);
}
.testimonio-inicial {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
flex-shrink: 0;
font-size: 13.5px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--acento, var(--hoja));
background: var(--acento-suave, #fff);
border: 1px solid var(--acento-borde, var(--arena));
}
.testimonio figcaption { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.galeria-portada { margin-top: 0; }
@media (min-width: 600px) { .galeria-portada { columns: 2; } }
@media (min-width: 960px) { .galeria-portada { columns: 3; } }
.galeria-portada .testimonio { padding: 20px; }
.galeria-portada .testimonio blockquote { font-size: 14.5px; line-height: 1.65; }
.portada-seccion { position: relative; overflow: hidden; }
.motas-portada {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.motas-portada span {
position: absolute;
bottom: -3vh;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--verde, #0a8146);
opacity: 0;
animation: mota-portada-sube linear infinite;
}
.motas-portada span:nth-child(1) { left: 5%;  animation-duration: 32s; animation-delay: 0s; }
.motas-portada span:nth-child(2) { left: 19%; animation-duration: 44s; animation-delay: -15s; width: 5px; height: 5px; }
.motas-portada span:nth-child(3) { left: 44%; animation-duration: 36s; animation-delay: -26s; width: 4px; height: 4px; }
.motas-portada span:nth-child(4) { left: 68%; animation-duration: 28s; animation-delay: -7s; }
.motas-portada span:nth-child(5) { left: 84%; animation-duration: 40s; animation-delay: -31s; width: 5px; height: 5px; }
.motas-portada span:nth-child(6) { left: 95%; animation-duration: 34s; animation-delay: -18s; width: 4px; height: 4px; }
@keyframes mota-portada-sube {
0%   { transform: translateY(0); opacity: 0; }
10%  { opacity: 0.35; }
85%  { opacity: 0.18; }
100% { transform: translateY(-106vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.motas-portada span { animation: none; opacity: 0.12; bottom: auto; top: 32%; }
}
.pre-doc { padding: clamp(20px, 4vw, 40px); }
.pre-doc-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid var(--salvia-borde); padding-bottom: 16px; }
.pre-doc-titulo { text-align: right; }
.pre-doc-asesor { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.sor-cabecera { display: block; }
.sor-cabecera .pre-doc-titulo { text-align: left; }
.sor-tipo { margin: 0; font-weight: 700; letter-spacing: 0.12em; }
.sor-titulo {
margin: 6px 0 0;
font-size: clamp(26px, 4.4vw, 36px);
line-height: 1.12;
letter-spacing: -0.015em;
text-wrap: balance;
}
.sor-cuando { margin-top: 10px; }
.sor-premios {
display: grid;
gap: 12px;
margin: 14px 0 0;
padding: 0;
list-style: none;
counter-reset: premio;
}
.sor-premio {
display: flex;
align-items: flex-start;
gap: 14px;
margin: 0;
line-height: 1.55;
}
.sor-premio-que { display: block; }
.sor-premio-puesto {
display: block;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.7;
margin-bottom: 2px;
}
.sor-medalla {
flex: none;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--medalla, currentColor);
box-shadow: var(--medalla-filo, none);
color: #2b2318;
font-size: 14px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.sor-premio .sor-medalla { opacity: 0.28; }
.sor-premio-1 .sor-medalla,
.sor-premio-2 .sor-medalla,
.sor-premio-3 .sor-medalla { opacity: 1; }
.sor-premio-1 {
--medalla: linear-gradient(145deg, #f6dd8a 0%, #d4af37 45%, #a3801f 100%);
--medalla-filo: inset 0 0 0 1px rgb(255 255 255 / 0.45), 0 2px 8px -3px rgb(163 128 31 / 0.9);
}
.sor-premio-2 {
--medalla: linear-gradient(145deg, #f2f4f6 0%, #c3cad1 45%, #8f979f 100%);
--medalla-filo: inset 0 0 0 1px rgb(255 255 255 / 0.5), 0 2px 8px -3px rgb(143 151 159 / 0.9);
}
.sor-premio-3 {
--medalla: linear-gradient(145deg, #e8b48a 0%, #b87333 45%, #8a5222 100%);
--medalla-filo: inset 0 0 0 1px rgb(255 255 255 / 0.35), 0 2px 8px -3px rgb(138 82 34 / 0.9);
}
.sor-salido {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 6px;
padding: 3px 11px;
border-radius: 999px;
box-shadow: inset 0 0 0 1px currentColor;
font-size: 13px;
font-variant-numeric: tabular-nums;
opacity: 0.75;
}
.sor-premio-1 .sor-salido,
.sor-premio-2 .sor-salido,
.sor-premio-3 .sor-salido {
background: var(--medalla);
box-shadow: var(--medalla-filo);
color: #2b2318;
opacity: 1;
}
.sor-salido strong { font-weight: 800; }
.sor-salido-no {
background: none;
box-shadow: inset 0 0 0 1px currentColor;
color: inherit;
opacity: 0.55;
font-size: 12px;
}
.sorteo-premiado { position: relative; }
.sorteo-premiado .sorteo-cifra { position: relative; color: #2b2318; font-weight: 800; }
.sorteo-premiado::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--medalla, currentColor);
box-shadow: var(--medalla-filo, none);
}
.sorteo-premiado-1 { --medalla: linear-gradient(145deg, #f6dd8a 0%, #d4af37 45%, #a3801f 100%); }
.sorteo-premiado-2 { --medalla: linear-gradient(145deg, #f2f4f6 0%, #c3cad1 45%, #8f979f 100%); }
.sorteo-premiado-3 { --medalla: linear-gradient(145deg, #e8b48a 0%, #b87333 45%, #8a5222 100%); }
.sorteo-premiado:not(.sorteo-premiado-1):not(.sorteo-premiado-2):not(.sorteo-premiado-3) {
--medalla: none;
}
.sorteo-premiado:not(.sorteo-premiado-1):not(.sorteo-premiado-2):not(.sorteo-premiado-3)::before {
background: none;
box-shadow: inset 0 0 0 2px currentColor;
}
.sorteo-premiado:not(.sorteo-premiado-1):not(.sorteo-premiado-2):not(.sorteo-premiado-3) .sorteo-cifra {
color: inherit;
}
.sor-cabecera-arte { display: none; }
@media (min-width: 720px) {
.sor-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 28px; }
.sor-cabecera .pre-doc-titulo { flex: 1 1 auto; }
.sor-cabecera-arte {
display: flex;
flex: none;
align-items: flex-start;
gap: 10px;
padding-top: 6px;
}
}
.sor-colgada {
display: grid;
justify-items: center;
transform-origin: top center;
animation: sor-mece 5.5s ease-in-out infinite;
animation-delay: calc(var(--i) * -1.4s);
}
.sor-colgada-2 { margin-top: 9px; }
.sor-colgada-3 { margin-top: 18px; }
.sor-cinta {
width: 3px;
height: 16px;
border-radius: 2px;
background: currentColor;
opacity: 0.35;
}
.sor-medalla-grande {
width: 42px;
height: 42px;
font-size: 16px;
margin-top: -1px;
}
.sor-colgada-1 .sor-medalla-grande {
--medalla: linear-gradient(145deg, #f6dd8a 0%, #d4af37 45%, #a3801f 100%);
--medalla-filo: inset 0 0 0 1px rgb(255 255 255 / 0.45), 0 3px 10px -4px rgb(163 128 31 / 0.95);
opacity: 1;
}
.sor-colgada-2 .sor-medalla-grande {
--medalla: linear-gradient(145deg, #f2f4f6 0%, #c3cad1 45%, #8f979f 100%);
--medalla-filo: inset 0 0 0 1px rgb(255 255 255 / 0.5), 0 3px 10px -4px rgb(143 151 159 / 0.95);
opacity: 1;
}
.sor-colgada-3 .sor-medalla-grande {
--medalla: linear-gradient(145deg, #e8b48a 0%, #b87333 45%, #8a5222 100%);
--medalla-filo: inset 0 0 0 1px rgb(255 255 255 / 0.35), 0 3px 10px -4px rgb(138 82 34 / 0.95);
opacity: 1;
}
@keyframes sor-mece {
0%, 100% { transform: rotate(-2deg); }
50%      { transform: rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
.sor-colgada { animation: none; }
}
.pre-doc-cara { border-radius: 50%; object-fit: cover; }
.pre-doc-tabla td { vertical-align: middle; }
.calc-columnas {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.calc-dura-linea {
display: flex;
align-items: flex-end;
gap: 8px;
margin-top: 12px;
}
.calc-dura-linea select { width: auto; }
.calc-lado {
display: flex;
flex-direction: column;
}
.calc-lado .calc-resultado { margin-top: auto; }
.calc-resultado {
margin-top: 18px;
padding: 14px;
border-radius: 10px;
background: var(--nube);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.calc-cifra {
font-size: 30px;
font-weight: 700;
color: var(--marino);
}
.calc-veredicto {
margin-top: 16px;
border-left: 4px solid var(--hoja);
}
@media (min-width: 640px) {
.calc-columnas { grid-template-columns: 1fr 1fr; }
}
.comparar-ficha,
.comparar-salidas {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: center;
}
.comparar-ficha img {
width: 120px;
height: 120px;
object-fit: contain;
flex-shrink: 0;
}
@media (max-width: 560px) {
.comparar-ficha img { width: 88px; height: 88px; }
.comparar-salidas .boton { width: 100%; justify-content: center; }
}
.pre-doc-pct {
display: inline-block;
margin-left: 6px;
padding: 2px 8px;
border-radius: 999px;
background: var(--verde-suave, #e8f5ec);
color: var(--bosque, #0b5f36);
font-size: 12.5px;
font-weight: 700;
white-space: nowrap;
}
.pre-producto { display: flex; align-items: center; gap: 10px; }
.pre-producto img { border-radius: 8px; background: #fff; flex: 0 0 auto; }
.pre-totales td { font-weight: 700; color: var(--marino); font-size: 17px; border-top: 2px solid var(--salvia-borde); }
@media print {
.pre-doc { box-shadow: none; border: none; padding: 0; }
}
@media (max-width: 640px) {
.pre-doc-cabecera { flex-direction: column; align-items: flex-start; }
.pre-doc-titulo { text-align: left; }
.pre-doc-tabla, .pre-doc-tabla tbody, .pre-doc-tabla tfoot { display: block; width: 100%; }
.pre-doc-tabla thead { display: none; }
.pre-doc-tabla tr { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: flex-end; padding: 14px 0; border-bottom: 1px solid var(--salvia-borde); }
.pre-doc-tabla td { display: block; border: none; padding: 0; }
.pre-doc-tabla td.pre-producto { flex: 1 1 100%; align-items: center; }
.pre-doc-tabla tbody td:not(.pre-producto)::before { display: block; font-size: 12px; color: var(--corteza); font-weight: 400; }
.pre-doc-tabla tbody td:nth-child(2)::before { content: 'Cantidad'; }
.pre-doc-tabla tbody td:nth-child(3)::before { content: 'Precio'; }
.pre-doc-tabla tbody td:nth-child(4)::before { content: 'Importe'; }
.pre-doc-descuento td[colspan]::before { content: none; }
.pre-doc-descuento td[colspan] { display: none; }
.pre-doc-descuento { justify-content: space-between; }
.pre-doc-tabla tfoot .pre-totales { justify-content: space-between; align-items: center; border-bottom: none; }
.pre-doc-tabla .pre-totales td { border-top: none; }
}
.lan-extra { padding: 40px 20px; }
.lan-extra-dentro { max-width: 960px; margin-inline: auto; }
.lan-extra-titulo {
margin-bottom: 24px;
text-align: center;
font-size: clamp(22px, 3.6vw, 30px);
font-weight: 800;
letter-spacing: -0.01em;
color: var(--lan-acento);
}
.lan-quien { display: grid; gap: 16px; }
@media (min-width: 760px) { .lan-quien { grid-template-columns: 1fr 1fr; align-items: start; } }
.lan-quien-caja {
background: var(--lan-carta-fondo, #fff);
color: var(--lan-carta-tinta, #33322e);
border: 1px solid var(--lan-carta-borde, rgb(0 0 0 / 0.08));
border-radius: min(var(--flota-radio, 18px), 18px);
padding: 22px 24px;
}
.lan-quien-si { border-top: 4px solid var(--lan-acento); }
.lan-quien-no { opacity: 0.92; }
.lan-quien-cabeza {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 15px;
margin-bottom: 12px;
}
.lan-quien-si .lan-quien-cabeza { color: var(--lan-acento); }
.lan-quien-no .lan-quien-cabeza { color: var(--lan-carta-tinta, #77756e); opacity: 0.85; }
.lan-quien-caja ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.lan-quien-caja li {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: 14px;
line-height: 1.6;
}
.lan-quien-caja li svg { flex-shrink: 0; margin-top: 3px; }
.lan-quien-si li svg { color: var(--lan-acento); }
.lan-quien-no li svg { color: var(--lan-carta-tinta, #a9a69e); opacity: 0.6; }
.lan-cambio { display: grid; gap: 12px; align-items: stretch; }
@media (min-width: 760px) { .lan-cambio { grid-template-columns: 1fr auto 1fr; } }
.lan-cambio-caja {
background: var(--lan-carta-fondo, #fff);
color: var(--lan-carta-tinta, #33322e);
border: 1px solid var(--lan-carta-borde, rgb(0 0 0 / 0.08));
border-radius: min(var(--flota-radio, 18px), 18px);
padding: 22px 24px;
}
.lan-cambio-hoy { opacity: 0.92; }
.lan-cambio-con { border: 2px solid var(--lan-acento); }
.lan-cambio-cabeza {
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 12px;
color: var(--lan-carta-tinta, #77756e);
opacity: 0.85;
}
.lan-cambio-con .lan-cambio-cabeza { color: var(--lan-acento); opacity: 1; }
.lan-cambio-caja ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.lan-cambio-caja li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.6; }
.lan-cambio-caja li svg { flex-shrink: 0; margin-top: 3px; color: var(--lan-carta-tinta, #a9a69e); opacity: 0.6; }
.lan-cambio-con li svg { color: var(--lan-acento); }
.lan-cambio-flecha {
display: grid;
place-items: center;
color: var(--lan-acento);
transform: rotate(90deg);
}
@media (min-width: 760px) { .lan-cambio-flecha { transform: none; } }
.lan-cta-medio { text-align: center; padding: 8px 20px 40px; }
.lan-cta-medio a {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 13px 26px;
border-radius: var(--flota-radio, 999px);
background: var(--lan-acento);
color: var(--lan-boton-tinta, #fff);
font-size: 15px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 10px 26px -12px var(--lan-acento);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lan-cta-medio a:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px var(--lan-acento); }
.lan-voces-rejilla {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 16px;
align-items: start;
}
.lan-voz {
display: grid;
gap: 12px;
margin: 0;
padding: 20px 22px;
background: var(--lan-carta-fondo, #fff);
color: var(--lan-carta-tinta, #33322e);
border: 1px solid var(--lan-carta-borde, rgb(0 0 0 / 0.08));
border-radius: min(var(--flota-radio, 18px), 18px);
}
.lan-voz:first-child { border-left: 4px solid var(--lan-acento); }
.lan-voz blockquote { margin: 0; font-size: 14px; line-height: 1.7; }
.lan-voz figcaption {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: 12.5px;
font-weight: 600;
}
.lan-voz .valoracion { color: var(--lan-acento); }
.lan-voz .estrella { width: 14px; height: 14px; }
.lan-voces-mas { margin-top: 16px; text-align: center; font-size: 13px; }
.lan-voces-mas a { color: var(--lan-acento); font-weight: 600; text-decoration: none; }
.lan-voces-mas a:hover { text-decoration: underline; }
.lan-gesto { padding: 6px 0; line-height: 0; }
.lan-gesto svg { display: block; width: min(100%, 420px); height: 40px; margin-inline: auto; }
.lan-extra-banda { padding-block: 28px; }
.lan-banda-viva {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
}
.lan-dato {
display: grid;
justify-items: center;
gap: 4px;
text-align: center;
background: var(--lan-carta-fondo, #fff);
color: var(--lan-carta-tinta, #33322e);
border: 1px solid var(--lan-carta-borde, rgb(0 0 0 / 0.08));
border-radius: min(var(--flota-radio, 16px), 16px);
padding: 18px 16px;
}
.lan-dato-icono {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: min(var(--flota-radio, 12px), 12px);
background: color-mix(in srgb, var(--lan-acento) 14%, var(--lan-carta-fondo, #fff));
color: var(--lan-acento);
margin-bottom: 4px;
}
.lan-dato strong { font-size: 18px; font-weight: 800; color: var(--lan-acento); }
.lan-dato > span:last-child { font-size: 12.5px; color: var(--lan-carta-tinta, #77756e); opacity: 0.85; line-height: 1.5; }
.legal-suelto {
margin: 28px auto 0;
padding: 0 16px 24px;
max-width: 720px;
text-align: center;
font-size: 12px;
line-height: 1.7;
opacity: 0.75;
}
.legal-suelto a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.legal-suelto a:hover { opacity: 1; }
body .lan-banda-viva > div.lan-tira-dato {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 14px;
align-items: center;
}
.lan-tira-dato > strong,
.lan-tira-dato > span { display: block; }
.lan-tira-dato > .lan-tira-icono {
grid-row: 1 / 3;
width: 42px;
height: 42px;
padding: 9px;
border-radius: 50%;
color: inherit;
background: rgb(127 127 127 / 0.16);
background: color-mix(in srgb, currentColor 14%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
.lan-banda-viva > * { animation: garantia-brota 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.lan-banda-viva > *:nth-child(2) { animation-delay: 0.12s; }
.lan-banda-viva > *:nth-child(3) { animation-delay: 0.24s; }
.lan-banda-viva > *:nth-child(4) { animation-delay: 0.36s; }
.lan-dibujo-vivo { animation: dibujo-respira 9s ease-in-out infinite; }
}
@keyframes dibujo-respira {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.lan-quien-responde {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.lan-quien-responde img,
.lan-quien-inicial {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 2px solid var(--lan-acento, currentColor);
}
.lan-quien-inicial {
display: grid;
place-items: center;
font-weight: 700;
font-size: 20px;
}
.lan-quien-responde > span { display: grid; gap: 2px; }
.lan-quien-responde strong { font-size: 15px; line-height: 1.35; }
.lan-quien-responde span span { font-size: 12.5px; opacity: 0.75; }
.lan-promesas {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 0 0 18px;
padding: 0;
}
.lan-promesas li {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
}
.lan-testimonio:first-child {
border-left: 4px solid var(--lan-acento, currentColor);
font-size: 1.02em;
}
.lan-duda-icono {
width: 1.05em;
height: 1.05em;
flex-shrink: 0;
vertical-align: -0.16em;
margin-right: 9px;
opacity: 0.8;
}
.pre-decidir {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-top: 24px;
}
.pre-decidir .boton {
min-width: 220px;
text-align: center;
padding: 14px 28px;
font-size: 15px;
font-weight: 600;
}
.pre-decidir .boton-marino { border: 1px solid transparent; }
@media (max-width: 560px) {
.pre-decidir { flex-direction: column; }
.pre-decidir form, .pre-decidir .boton { width: 100%; }
}
.ed-quitar {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
padding: 6px 12px;
border: 1px solid var(--arena);
border-radius: 999px;
background: #fff;
cursor: pointer;
user-select: none;
}
.ed-quitar:hover { border-color: var(--tierra-texto); color: var(--tierra-texto); }
.quitado .ed-quitar {
border-color: var(--tierra-texto);
color: var(--tierra-texto);
font-weight: 600;
}
.ed-cuenta {
flex: 1;
text-align: right;
margin-right: 12px;
}
.ed-cuenta[data-hay] {
color: var(--tierra-texto);
font-weight: 600;
}
.lan-pie-legal {
margin-top: 14px;
font-size: 12.5px;
opacity: 0.85;
}
.lan-pie-legal a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.lan-pie-legal a:hover { opacity: 1; text-decoration-thickness: 2px; }
.ficha-titular {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 2px;
font-size: 12.5px;
line-height: 1.6;
color: #6b675f;
}
.ficha-titular a { color: inherit; }
html.al-llegar :is(
.emerger, .ramita, .valoracion, .vm-frente, .trazo-subrayado, .progreso,
.etapa-hecha, .gama-bloque, .portada-garantias, .portada-firma, .pie-atiende,
.galeria-testimonios > *, .rejilla-familias > *, .sor-medalla, .lan-banda-viva,
.hoy-fila, .hoy-pastilla, .cont-numeros, .barra-eje, .lan-voz,
body.landing [class*="-rejilla"]:not(.lan-voces-rejilla),
.opo-muestra, .opo-pasos, .opo-cita, .tarjeta-estudio, body.panel tbody tr
):not(.a-la-vista),
html.al-llegar :is(
.emerger, .ramita, .valoracion, .vm-frente, .trazo-subrayado, .progreso,
.etapa-hecha, .gama-bloque, .portada-garantias, .portada-firma, .pie-atiende,
.galeria-testimonios > *, .rejilla-familias > *, .sor-medalla, .lan-banda-viva,
.hoy-fila, .hoy-pastilla, .cont-numeros, .barra-eje, .lan-voz,
body.landing [class*="-rejilla"]:not(.lan-voces-rejilla),
.opo-muestra, .opo-pasos, .opo-cita, .tarjeta-estudio, body.panel tbody tr
):not(.a-la-vista) *,
html.al-llegar .sor-medalla:not(.a-la-vista)::after,
html.al-llegar .lan-voz:not(.a-la-vista)::before {
animation-name: none !important;
}
.titular-por-palabras .pal {
animation: pal-entra 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
animation-delay: calc(var(--i, 0) * 55ms);
}
.tras-el-titular > h1 ~ p,
.tras-el-titular > h1 ~ div,
.tras-el-titular > h1 ~ a {
animation: resto-entra 0.6s ease-out both;
animation-delay: calc(var(--palabras, 6) * 55ms + 120ms);
}
@keyframes pal-entra {
from { opacity: 0; filter: blur(6px); }
to { opacity: 1; filter: blur(0); }
}
@keyframes resto-entra {
from { opacity: 0; translate: 0 8px; }
to { opacity: 1; translate: 0 0; }
}
html.al-llegar .icono-trazado:not(.a-la-vista) * { animation-name: none !important; }
.icono-trazado :is(path, line, polyline, circle, rect, ellipse, polygon) {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: trazo-dibujado 0.9s ease-out both;
animation-delay: 0.15s;
}
.lan-banda-viva > :nth-child(2) .icono-trazado * { animation-delay: 0.3s; }
.lan-banda-viva > :nth-child(3) .icono-trazado * { animation-delay: 0.45s; }
body.landing [class*="-rejilla"]:not(.lan-voces-rejilla) > * {
animation: tarjeta-sube 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
body.landing [class*="-rejilla"]:not(.lan-voces-rejilla) > :nth-child(2) { animation-delay: 80ms; }
body.landing [class*="-rejilla"]:not(.lan-voces-rejilla) > :nth-child(3) { animation-delay: 160ms; }
body.landing [class*="-rejilla"]:not(.lan-voces-rejilla) > :nth-child(4) { animation-delay: 240ms; }
body.landing [class*="-rejilla"]:not(.lan-voces-rejilla) > :nth-child(5) { animation-delay: 320ms; }
body.landing [class*="-rejilla"]:not(.lan-voces-rejilla) > :nth-child(6) { animation-delay: 400ms; }
body.landing [class*="-rejilla"]:not(.lan-voces-rejilla) > :nth-child(n + 7) { animation-delay: 480ms; }
@keyframes tarjeta-sube {
from { opacity: 0; translate: 0 10px; }
to { opacity: 1; translate: 0 0; }
}
body.landing header > [aria-hidden="true"] {
translate: 0 calc(var(--desplaza, 0) * 0.22px);
}
.lan-voz { position: relative; }
.lan-voz::before {
content: '\201C';
position: absolute;
top: 2px;
left: 12px;
font-size: 72px;
line-height: 1;
color: var(--lan-acento, currentColor);
opacity: 0.12;
pointer-events: none;
animation: comilla-crece 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.lan-voz > * { position: relative; }
.lan-voz .estrella {
animation: estrella-brota 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.lan-voz .estrella:nth-child(2) { animation-delay: 70ms; }
.lan-voz .estrella:nth-child(3) { animation-delay: 140ms; }
.lan-voz .estrella:nth-child(4) { animation-delay: 210ms; }
.lan-voz .estrella:nth-child(5) { animation-delay: 280ms; }
@keyframes comilla-crece {
from { opacity: 0; scale: 0.6; }
to { opacity: 0.12; scale: 1; }
}
.lan-flotante.late {
animation: flota-late 2.4s ease-in-out infinite;
}
@keyframes flota-late {
0%, 100% { scale: 1; }
50% { scale: 1.06; }
}
@media (prefers-reduced-motion: reduce) {
body.landing [class*="-rejilla"] > *,
.lan-voz::before,
.lan-voz .estrella,
.lan-flotante.late { animation: none; }
body.landing header > [aria-hidden="true"] { translate: none; }
}
.tira-evento {
display: block;
text-decoration: none;
--ev-tinta: color-mix(in srgb, var(--ev-color, #004aad) 78%, #000);
color: var(--ev-tinta);
background: var(--ev-fondo, #eef3f8);
border-top: 3px solid var(--ev-color, #004aad);
transition: filter 0.15s ease;
}
.tira-evento-oscura {
--ev-tinta: #fff;
background: linear-gradient(90deg, var(--ev-fondo, #0d244a), color-mix(in srgb, var(--ev-fondo, #0d244a) 70%, var(--ev-color, #004aad)));
}
.tira-evento:hover,
.tira-evento:focus-visible { filter: brightness(1.04) saturate(1.15); }
.tira-evento-oscura:hover,
.tira-evento-oscura:focus-visible { filter: brightness(1.12); }
.tira-evento-dentro {
max-width: 1180px;
margin-inline: auto;
padding: 9px 24px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: 14px;
line-height: 1.4;
}
.tira-evento-que {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 999px;
background: var(--ev-color, #004aad);
color: #fff;
white-space: nowrap;
}
.tira-evento-nombre {
font-weight: 600;
min-width: 0;
overflow-wrap: anywhere;
}
.tira-evento-cuando { opacity: 0.82; }
.tira-evento-mas { opacity: 0.8; font-size: 13px; }
.tira-evento-ir {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
white-space: nowrap;
color: var(--ev-color, #004aad);
}
.tira-evento-oscura .tira-evento-ir { color: #fff; }
@media (max-width: 720px) {
.tira-evento-dentro { padding: 9px 18px; gap: 4px 8px; font-size: 13.5px; }
.tira-evento-que { display: none; }
.tira-evento-nombre { flex-basis: 100%; }
.tira-evento-ir { margin-left: auto; font-size: 13px; }
}
@media print {
.tira-evento { display: none; }
}
.gama-hoja {
position: absolute;
z-index: -1;
color: var(--acento, var(--verde));
opacity: 0.06;
pointer-events: none;
}
.gama-hoja-a { top: -40px; right: -50px; width: 360px; height: 360px; transform: rotate(22deg); }
.gama-hoja-b { bottom: -70px; left: -60px; width: 230px; height: 230px; transform: rotate(-150deg); }
.gama-raiz {
position: absolute;
z-index: -1;
left: 0;
bottom: 6px;
width: 100%;
height: 120px;
fill: none;
stroke: var(--acento, var(--verde));
stroke-width: 2;
stroke-linecap: round;
opacity: 0.3;
pointer-events: none;
}
.gama-raiz path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazo-dibujado 2.6s ease-out 0.4s both; }
.gama-raiz circle { fill: var(--acento, var(--verde)); stroke: none; animation: estrella-brota 0.5s ease-out both; }
.gama-raiz circle:nth-of-type(1) { animation-delay: 1.4s; }
.gama-raiz circle:nth-of-type(2) { animation-delay: 2.4s; }
.gama-ondas {
position: absolute;
z-index: -1;
left: 0;
bottom: 0;
width: 100%;
height: 80px;
fill: none;
stroke: var(--acento, var(--verde));
stroke-width: 2;
opacity: 0.14;
pointer-events: none;
animation: ondas-se-mecen 16s ease-in-out infinite;
}
.gama-ondas path:nth-child(2) { opacity: 0.7; }
.gama-ondas path:nth-child(3) { opacity: 0.45; }
@keyframes ondas-se-mecen {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-28px); }
}
.halo-suave::after {
background:
radial-gradient(40% 55% at 14% 28%, color-mix(in srgb, var(--acento, var(--verde)) 14%, transparent), transparent 70%),
radial-gradient(38% 50% at 86% 18%, color-mix(in srgb, var(--marino) 9%, transparent), transparent 72%);
}
.fondo-motas {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.fondo-motas span {
position: absolute;
bottom: -12px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--acento, var(--verde));
opacity: 0;
animation: fondo-mota-sube 16s linear infinite;
}
.fondo-motas span:nth-child(1) { left: 8%; animation-delay: 0s; }
.fondo-motas span:nth-child(2) { left: 24%; width: 4px; height: 4px; animation-delay: 3s; }
.fondo-motas span:nth-child(3) { left: 41%; animation-delay: 7s; }
.fondo-motas span:nth-child(4) { left: 58%; width: 5px; height: 5px; animation-delay: 1.5s; }
.fondo-motas span:nth-child(5) { left: 76%; animation-delay: 9s; }
.fondo-motas span:nth-child(6) { left: 91%; width: 4px; height: 4px; animation-delay: 5s; }
@keyframes fondo-mota-sube {
0% { transform: translateY(0); opacity: 0; }
10% { opacity: 0.16; }
85% { opacity: 0.08; }
100% { transform: translateY(-620px); opacity: 0; }
}
.galeria-testimonios { position: relative; isolation: isolate; }
.galeria-testimonios::before {
content: '';
position: absolute;
inset: -28px -16px;
z-index: -1;
background-image: radial-gradient(circle, rgb(0 74 173 / 0.10) 1px, transparent 1.6px);
background-size: 18px 18px;
-webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
pointer-events: none;
}
body.deporte footer, body.tatuajes footer, body.deportistas footer {
position: relative;
isolation: isolate;
overflow: hidden;
}
body.deporte footer::before, body.tatuajes footer::before, body.deportistas footer::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: repeating-linear-gradient(-30deg, rgb(255 255 255 / 0.035) 0 2px, transparent 2px 24px);
pointer-events: none;
}
body.inicio {
background: linear-gradient(180deg, var(--crema) 0%, var(--marfil) 100%) fixed;
}
body.inicio section[style*="var(--crema)"] { background: transparent !important; }
body.landing header { position: relative; isolation: isolate; }
body.landing header::after {
content: '';
position: absolute;
z-index: -1;
top: -10%;
left: -6%;
width: 56%;
height: 78%;
border-radius: 50%;
background: radial-gradient(closest-side, var(--lan-acento, var(--verde)), transparent);
filter: blur(34px);
opacity: calc(0.2 - var(--desplaza, 0) / 900 * 0.2);
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.gama-raiz path, .gama-raiz circle, .gama-ondas, .fondo-motas span { animation: none; }
.gama-raiz path { stroke-dashoffset: 0; }
.gama-raiz circle { opacity: 1; }
.fondo-motas span { display: none; }
}
.guia-lista { display: grid; gap: 14px; margin-top: 32px; }
.guia-ficha {
display: block;
text-decoration: none;
color: inherit;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.guia-ficha:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.guia-ficha { border-left: 4px solid var(--acento, var(--verde)); }
.guia-pagina { position: relative; isolation: isolate; overflow: hidden; }
.guia-hoja {
position: absolute;
z-index: -1;
top: -30px;
right: -70px;
width: 340px;
height: 340px;
rotate: 22deg;
color: var(--acento, var(--verde));
opacity: 0.07;
pointer-events: none;
animation: gama-flota 11s ease-in-out infinite;
}
@media (max-width: 560px) { .guia-hoja { width: 220px; height: 220px; right: -80px; } }
@media (prefers-reduced-motion: reduce) { .guia-hoja { animation: none; } }
.guia-ficha h2, .guia-ficha h3 { margin-top: 10px; font-size: 19px; line-height: 1.3; color: var(--marino); }
.guia-ficha p { margin-top: 8px; line-height: 1.65; }
.guia-chip {
display: inline-block;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--acento, var(--verde));
}
.guia-leer { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--marino); }
.guia-entrada { margin-top: 16px; font-size: 18px; line-height: 1.7; color: var(--corteza); max-width: 58ch; }
.guia-cuerpo h2 { margin-top: 36px; font-size: 21px; line-height: 1.3; color: var(--marino); }
.guia-cuerpo p { margin-top: 12px; font-size: 16.5px; line-height: 1.8; color: var(--corteza); max-width: 62ch; }
.guia-cuerpo .sobre-titulo a { color: inherit; text-decoration: none; }
.guia-cuerpo .sobre-titulo a:hover { text-decoration: underline; }