/* COPIA del sistema de diseño de MarcaCheck (nuevo-frontend/demo/assets/css/landing.css, 11/10/2026: el tablero gira con .entra; sin el content-visibility de la demo, rompe los saltos a #precio y #faq en el celular).
   No se edita acá: los cambios los hace el diseñador y se vuelven a copiar. */
/* ===================== Landing ===================== */
.contenedor { width: 100%; max-width: var(--ancho-max); margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .contenedor { padding: 0 16px; } }

/* --- barra superior --- */
.barra {
  position: sticky; top: 0; z-index: 50; height: 68px;
  background: rgba(255, 255, 255, .78); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color var(--d-media), box-shadow var(--d-media);
}
.barra.con-sombra { border-bottom-color: var(--borde); box-shadow: 0 1px 0 rgba(14,42,71,.02), 0 6px 24px rgba(14,42,71,.05); }
.barra .contenedor { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.barra nav { display: flex; gap: 4px; }
.barra nav a {
  position: relative; padding: 8px 12px; border-radius: 8px; font-size: var(--t-14); font-weight: 500; color: var(--texto-2);
  text-decoration: none; transition: color var(--d-rapida), background var(--d-rapida);
}
.barra nav a:hover { color: var(--tinta-900); background: var(--sutil); }
.barra nav a.activo { color: var(--tinta-900); }
.barra nav a.activo::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--acento-500); }
.barra .acciones { display: flex; gap: 8px; justify-content: flex-end; }
.barra .hamburguesa { display: none; }
@media (max-width: 960px) {
  .barra .contenedor { grid-template-columns: 1fr auto; }
  .barra nav, .barra .acciones a.btn-secundario { display: none; }
  .barra .hamburguesa { display: inline-flex; }
}
.menu-movil {
  position: fixed; inset: 68px 0 auto 0; z-index: 49; background: var(--superficie); border-bottom: 1px solid var(--borde);
  padding: 8px 16px 20px; display: grid; gap: 2px; box-shadow: var(--s-3);
  transform-origin: top; animation: aparece var(--d-media) var(--ease-salida);
}
.menu-movil[hidden] { display: none; }
.menu-movil a { padding: 12px; border-radius: 10px; color: var(--tinta-900); font-weight: 500; }
.menu-movil .btn { margin-top: 8px; }

/* --- hero --- */
.hero { position: relative; overflow: hidden; padding: 72px 0 88px; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 70%; height: 140%;
  background: radial-gradient(closest-side, rgba(14,154,141,.10), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--borde) 1px, transparent 1px), linear-gradient(90deg, var(--borde) 1px, transparent 1px);
  background-size: 48px 48px; opacity: .35;
  mask-image: radial-gradient(ellipse 60% 70% at 70% 40%, #000 10%, transparent 70%);
}
.hero .contenedor { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.etiquetas-hero { display: inline-flex; border: 1px solid var(--borde); border-radius: var(--r-full); background: var(--superficie); padding: 3px; gap: 2px; box-shadow: var(--s-1); }
.etiquetas-hero > span { font-family: var(--f-mono); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-full); color: var(--tinta-900); }
.etiquetas-hero > span + span { background: var(--acento-100); color: var(--acento-600); display: inline-flex; align-items: center; gap: 6px; }
.hero h1 { font-size: clamp(38px, 5vw, var(--t-60)); margin: 24px 0 20px; letter-spacing: -.03em; line-height: 1.06; }
.hero h1 em { font-style: normal; color: var(--acento-500); position: relative; white-space: nowrap; }
.hero h1 em svg { position: absolute; left: 0; bottom: -8px; width: 100%; height: 12px; color: var(--acento-500); opacity: .35; }
.hero .bajada { font-size: var(--t-18); color: var(--texto-2); max-width: 500px; line-height: 1.6; }
.hero .ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.estudio-mini {
  margin-top: 32px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 16px 16px 16px 16px; max-width: 520px;
}
.estudio-mini .ico { width: 40px; height: 40px; border-radius: 10px; background: var(--acento-100); color: var(--acento-600); display: grid; place-items: center; }
.estudio-mini .ico svg { width: 20px; height: 20px; }
.estudio-mini b { display: block; font-size: var(--t-14); }
.estudio-mini p { font-size: var(--t-13); color: var(--texto-2); line-height: 1.45; }
.estudio-mini a.link { font-size: var(--t-13); font-weight: 600; }

/* tablero animado del hero */
.tablero {
  position: relative; border-radius: var(--r-lg); background: var(--tinta-950); color: #fff; overflow: hidden;
  box-shadow: var(--s-4), 0 0 0 1px rgba(255,255,255,.04) inset; transform: perspective(1400px) rotateY(-4deg) rotateX(2deg);
  transition: transform .8s var(--ease-salida);
}
.tablero:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
/* el tablero conserva su giro al terminar de entrar */
.tablero.entra { transform: perspective(1400px) rotateY(-4deg) rotateX(2deg); }
.tablero.entra:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.tablero-cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; font-family: var(--f-mono); font-size: 11px; color: var(--tinta-200); border-bottom: 1px solid rgba(255,255,255,.06); }
.tablero-cab .izq { display: flex; align-items: center; gap: 10px; }
.tablero-cuerpo { position: relative; background: linear-gradient(180deg, #F7FAFC, #EEF6F6); color: var(--tinta-900); padding: 22px; min-height: 300px; }
.escena { position: absolute; inset: 22px; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-salida), transform .5s var(--ease-salida); pointer-events: none; }
.escena.activa { opacity: 1; transform: none; pointer-events: auto; }
.escena .paso-num { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; font-weight: 600; color: var(--acento-600); }
.escena .paso-num i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: var(--acento-500); color: var(--tinta-950); display: grid; place-items: center; font-size: 11px; }
.escena h3 { font-size: 22px; margin: 10px 0 16px; }
.mini-tabla { background: #fff; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; box-shadow: var(--s-1); }
.mini-tabla .fila { display: grid; grid-template-columns: 1fr auto; padding: 9px 14px; font-size: var(--t-13); border-top: 1px solid var(--borde); align-items: center; }
.mini-tabla .fila:first-child { border-top: 0; font-family: var(--f-mono); font-size: 11px; color: var(--texto-2); background: var(--fondo); }
.mini-tabla .fila .clase { font-family: var(--f-mono); font-size: 11px; color: var(--texto-2); }
.mini-tabla .fila.marcada { background: var(--alto-100); }
.escena.activa .mini-tabla .fila { animation: aparece .45s var(--ease-salida) both; }
.escena.activa .mini-tabla .fila:nth-child(2) { animation-delay: .08s; } .escena.activa .mini-tabla .fila:nth-child(3) { animation-delay: .16s; }
.escena.activa .mini-tabla .fila:nth-child(4) { animation-delay: .24s; } .escena.activa .mini-tabla .fila:nth-child(5) { animation-delay: .32s; }
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.versus .lado { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 14px; text-align: center; box-shadow: var(--s-1); }
.versus .lado small { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; color: var(--texto-2); text-transform: uppercase; margin-bottom: 6px; }
.versus .lado b { font-family: var(--f-display); font-size: 20px; letter-spacing: .02em; }
.versus .vs { font-family: var(--f-mono); font-size: 11px; color: var(--texto-2); }
.medidor { margin-top: 14px; display: grid; gap: 8px; }
.medidor .m { display: grid; grid-template-columns: 90px 1fr 40px; align-items: center; gap: 10px; font-size: 12px; color: var(--texto-2); }
.medidor .m .pista { height: 6px; border-radius: 6px; background: var(--sutil); overflow: hidden; }
.medidor .m .pista span { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--alto); transition: width 1s var(--ease-salida) .2s; }
.escena.activa .medidor .m .pista span { width: var(--v); }
.medidor .m b { text-align: right; color: var(--tinta-900); font-variant-numeric: tabular-nums; }
.correo-mini { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 16px; box-shadow: var(--s-2); display: grid; gap: 10px; }
.correo-mini .de { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--texto-2); }
.correo-mini .de img { width: 22px; }
.correo-mini b { font-size: 15px; }
.correo-mini .plazo { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--fondo); }
.correo-mini .plazo .dias { font-family: var(--f-display); font-size: 26px; font-weight: 800; color: var(--alto); line-height: 1; }
.tablero-progreso { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 22px 14px; background: #EEF6F6; }
.tablero-progreso span { height: 3px; border-radius: 3px; background: rgba(14,42,71,.10); overflow: hidden; }
.tablero-progreso span::after { content: ""; display: block; height: 100%; width: 0; background: var(--acento-500); }
.tablero-progreso span.hecho::after { width: 100%; }
.tablero-progreso span.corriendo::after { animation: llenar var(--dur, 4s) linear forwards; }
@keyframes llenar { to { width: 100%; } }
.tablero-pie { display: grid; grid-template-columns: repeat(3, 1fr); }
.tablero-pie div { padding: 14px 18px; border-left: 1px solid rgba(255,255,255,.06); transition: background var(--d-media); }
.tablero-pie div:first-child { border-left: 0; }
.tablero-pie div.activo { background: rgba(14,154,141,.10); }
.tablero-pie small { display: block; font-family: var(--f-mono); font-size: 10.5px; color: #7FE0D5; margin-bottom: 4px; }
.tablero-pie b { font-size: 13px; font-weight: 600; }

@media (max-width: 960px) {
  .hero { padding: 40px 0 56px; }
  .hero .contenedor { grid-template-columns: 1fr; gap: 40px; }
  .tablero, .tablero.entra { transform: none; }
}
@media (max-width: 560px) {
  .estudio-mini { grid-template-columns: auto 1fr; }
  .estudio-mini .btn { grid-column: 1 / -1; }
  .hero .ctas .btn { flex: 1 1 100%; }
  .tablero-pie b { font-size: 12px; }
  .tablero-pie div { padding: 12px; }
}

/* --- franja de cifras --- */
.cifras { background: var(--superficie); border-block: 1px solid var(--borde); }
.cifras .contenedor { display: grid; grid-template-columns: repeat(4, 1fr); }
.cifra { padding: 32px 24px; text-align: center; border-left: 1px solid var(--borde); display: grid; gap: 6px; align-content: center; }
.cifra:first-child { border-left: 0; }
.cifra b { font-family: var(--f-display); font-size: 34px; letter-spacing: -.03em; line-height: 1; color: var(--tinta-900); }
.cifra b.chico { font-size: 20px; line-height: 1.2; }
.cifra span { font-size: var(--t-13); color: var(--texto-2); max-width: 220px; margin: 0 auto; }
@media (max-width: 860px) {
  .cifras .contenedor { grid-template-columns: repeat(2, 1fr); padding: 0; }
  .cifra:nth-child(3) { border-left: 0; }
  .cifra:nth-child(n+3) { border-top: 1px solid var(--borde); }
  .cifra { padding: 24px 12px; }
}

/* --- secciones --- */
.seccion { padding: 104px 0; }
.seccion.alterna { background: var(--superficie); border-block: 1px solid var(--borde); }
.encabezado { max-width: 720px; margin-bottom: 48px; }
.encabezado.centrado { margin-inline: auto; text-align: center; }
.encabezado .rotulo { display: block; margin-bottom: 14px; }
.encabezado h2 { font-size: clamp(28px, 3.6vw, var(--t-38)); letter-spacing: -.03em; }
.encabezado p { margin-top: 14px; font-size: var(--t-16); color: var(--texto-2); }
@media (max-width: 720px) { .seccion { padding: 64px 0; } .encabezado { margin-bottom: 32px; } }

/* pasos (cómo te protege) */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; counter-reset: paso; }
.pasos::before { content: ""; position: absolute; top: 44px; left: 16%; right: 16%; height: 2px; background: linear-gradient(90deg, var(--acento-500), var(--tinta-800), var(--medio)); opacity: .18; }
.paso { padding: 28px; position: relative; background: var(--superficie); }
.paso .num-paso {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600; margin-bottom: 20px;
  background: var(--acento-100); color: var(--acento-600);
}
.paso:nth-child(2) .num-paso { background: var(--bajo-100); color: var(--bajo); }
.paso:nth-child(3) .num-paso { background: var(--medio-100); color: var(--medio-texto); }
.paso .rotulo { display: block; margin-bottom: 6px; }
.paso:nth-child(2) .rotulo { color: var(--tinta-800); }
.paso:nth-child(3) .rotulo { color: var(--medio-texto); }
.paso h3 { font-size: var(--t-20); margin-bottom: 8px; }
.paso p { color: var(--texto-2); }
@media (max-width: 860px) { .pasos { grid-template-columns: 1fr; } .pasos::before { display: none; } }

/* por qué ahora */
.metricas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.metrica { padding: 24px; display: flex; align-items: baseline; gap: 14px; }
.metrica b { font-family: var(--f-display); font-size: 36px; letter-spacing: -.03em; line-height: 1; }
.metrica span { color: var(--texto-2); font-size: var(--t-14); }
.contexto { margin-bottom: 24px; }
.contexto summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; font-size: var(--t-14); color: var(--acento-600); }
.contexto summary::-webkit-details-marker { display: none; }
.contexto summary svg { width: 16px; height: 16px; transition: transform var(--d-media) var(--ease-salida); }
.contexto[open] summary svg { transform: rotate(180deg); }
.contexto .cuerpo { margin-top: 14px; padding: 20px 24px; border-left: 2px solid var(--acento-500); background: var(--superficie); border-radius: 0 12px 12px 0; color: var(--texto-2); max-width: 860px; display: grid; gap: 10px; animation: aparece var(--d-media) var(--ease-salida); }
.comparacion { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.comparacion .col { padding: 0; }
.comparacion .col + .col { border-left: 1px solid var(--borde); background: linear-gradient(180deg, #FFFCF5, #fff 60%); }
.comparacion .cab { padding: 20px 24px; border-bottom: 1px solid var(--borde); }
.comparacion .cab b { font-family: var(--f-display); font-size: var(--t-18); display: block; }
.comparacion .cab span { font-size: var(--t-13); color: var(--texto-2); }
.comparacion ul { list-style: none; }
.comparacion li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--borde); font-size: var(--t-14); min-height: 76px; align-items: center; }
.comparacion li:first-child { border-top: 0; }
.comparacion li i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sutil); color: var(--texto-2); }
.comparacion .col + .col li i { background: var(--medio-100); color: var(--medio-texto); }
.comparacion li i svg { width: 13px; height: 13px; }
.cierre-comparacion { text-align: center; margin-top: 20px; font-size: var(--t-14); color: var(--texto-2); }
@media (max-width: 860px) {
  .metricas { grid-template-columns: 1fr; }
  .comparacion { grid-template-columns: 1fr; }
  .comparacion .col + .col { border-left: 0; border-top: 1px solid var(--borde); }
}

/* IA: beneficios */
.beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.beneficio { padding: 24px; display: grid; gap: 8px; align-content: start; }
.beneficio .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--fondo); border: 1px solid var(--borde); color: var(--acento-600); margin-bottom: 8px; transition: background var(--d-media), color var(--d-media); }
.beneficio:hover .ico { background: var(--acento-500); color: var(--tinta-950); border-color: transparent; }
.beneficio .ico svg { width: 20px; height: 20px; }
.beneficio h3 { font-size: var(--t-16); }
.beneficio p { font-size: var(--t-14); color: var(--texto-2); }
@media (max-width: 960px) { .beneficios { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .beneficios { grid-template-columns: 1fr; } }

/* ejemplos de similitud */
.similitudes-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 72px 0 24px; }
.similitudes-cab h3 { font-size: var(--t-24); margin-top: 8px; }
.similitudes-cab p { color: var(--texto-2); margin-top: 6px; max-width: 560px; }
.flechas { display: flex; gap: 8px; }
.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 12px; }
.carrusel::-webkit-scrollbar { display: none; }
.ejemplo { scroll-snap-align: start; padding: 20px; display: grid; gap: 16px; align-content: start; }
.ejemplo .tipo { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--acento-600); font-weight: 600; }
.ejemplo .par { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.ejemplo .signo { height: 72px; border-radius: 12px; border: 1px solid var(--borde); background: var(--fondo); display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: .02em; text-align: center; padding: 0 8px; }
.ejemplo .signo.logo-a { background: var(--tinta-900); color: #fff; font-style: italic; font-family: Georgia, serif; font-weight: 400; }
.ejemplo .signo.logo-b { background: #FFF4E5; color: #B2541A; letter-spacing: .12em; }
.ejemplo .signo.logo-c { background: linear-gradient(135deg, #E4F7F5, #EAF0F6); }
.ejemplo .signo img { width: 26px; display: inline-block; vertical-align: middle; margin-right: 6px; }
.ejemplo .vs { font-family: var(--f-mono); font-size: 10.5px; color: var(--texto-2); }
.ejemplo .pie-ej { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-13); color: var(--texto-2); }
.nota-legal { font-size: var(--t-12); color: var(--texto-2); margin-top: 8px; }
@media (max-width: 960px) { .carrusel { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (max-width: 600px) { .carrusel { grid-auto-columns: 86%; gap: 12px; } .similitudes-cab { flex-direction: column; align-items: flex-start; } }

/* banda de llamado */
.banda {
  margin-top: 72px; border-radius: var(--r-lg); padding: 40px 48px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  background: radial-gradient(120% 140% at 100% 0%, rgba(14,154,141,.30), transparent 50%), var(--tinta-950); color: #fff; position: relative; overflow: hidden;
}
.banda h3 { color: #fff; font-size: var(--t-24); }
.banda p { color: var(--tinta-200); margin-top: 8px; max-width: 620px; }
@media (max-width: 760px) { .banda { grid-template-columns: 1fr; padding: 28px 24px; } }

/* precios */
.selector-precios { display: flex; justify-content: center; margin-bottom: 40px; }
.panel-precios[hidden] { display: none; }
.panel-precios { animation: aparece var(--d-lenta) var(--ease-salida); }
.cab-precios { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.cab-precios h3 { font-size: var(--t-24); margin-top: 6px; }
.cab-precios p { color: var(--texto-2); margin-top: 6px; }
.ahorro { font-size: 10.5px; font-family: var(--f-mono); color: var(--acento-600); margin-left: 6px; }
.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.plan { padding: 28px; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 20px; position: relative; }
.plan.destacado { border: 1.5px solid var(--acento-500); box-shadow: var(--s-3), 0 0 0 4px rgba(14,154,141,.08); }
.plan .marca-dest { position: absolute; top: -12px; left: 28px; }
.plan h4 { font-size: var(--t-18); }
.plan .para { color: var(--texto-2); font-size: var(--t-13); margin-top: 4px; min-height: 40px; }
.plan .precio { display: flex; align-items: baseline; gap: 6px; }
.plan .precio b { font-family: var(--f-display); font-size: 40px; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan .precio span { color: var(--texto-2); font-size: var(--t-13); }
.plan .tachado { font-size: var(--t-12); color: var(--texto-2); margin-top: 6px; }
.plan .tachado s { margin-right: 4px; }
.plan ul { list-style: none; display: grid; gap: 10px; align-content: start; border-top: 1px solid var(--borde); padding-top: 20px; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: var(--t-14); }
.plan li svg { width: 16px; height: 16px; color: var(--acento-500); margin-top: 3px; }
.plan.oscuro { background: var(--tinta-950); color: #fff; border-color: var(--tinta-950); }
.plan.oscuro h4, .plan.oscuro .precio b { color: #fff; }
.plan.oscuro .para, .plan.oscuro li { color: var(--tinta-200); }
.plan.oscuro ul { border-color: rgba(255,255,255,.1); }
.como-se-calcula { margin-top: 24px; font-size: var(--t-13); color: var(--texto-2); text-align: center; max-width: 820px; margin-inline: auto; }
@media (max-width: 960px) { .planes { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

/* estudios */
.estudios-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.mini-func { padding: 20px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.mini-func .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--fondo); border: 1px solid var(--borde); display: grid; place-items: center; color: var(--tinta-800); }
.mini-func .ico svg { width: 18px; height: 18px; }
.mini-func b { display: block; font-size: var(--t-14); margin-bottom: 2px; }
.mini-func p { font-size: var(--t-13); color: var(--texto-2); }
.segmentos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
@media (max-width: 860px) { .estudios-grid { grid-template-columns: 1fr; } }

/* faq */
.faq { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; align-items: start; }
.faq .encabezado { position: sticky; top: 100px; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; gap: 16px; } .faq .encabezado { position: static; } }

/* contacto */
.contacto { display: grid; grid-template-columns: 5fr 7fr; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--s-3); border: 1px solid var(--borde); }
.contacto .lado-osc { background: radial-gradient(100% 80% at 0% 100%, rgba(14,154,141,.25), transparent 60%), var(--tinta-950); color: #fff; padding: 48px; display: grid; gap: 20px; align-content: start; }
.contacto .lado-osc h2 { color: #fff; font-size: var(--t-30); }
.contacto .lado-osc p { color: var(--tinta-200); }
.contacto .lado-osc ul { list-style: none; display: grid; gap: 14px; }
.contacto .lado-osc li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; color: #E6EEF5; font-size: var(--t-14); }
.contacto .lado-osc li i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(14,154,141,.2); color: #7FE0D5; }
.contacto .lado-osc li i svg { width: 13px; height: 13px; }
.contacto .lado-osc small { color: var(--tinta-200); font-size: var(--t-13); }
.contacto form { background: var(--superficie); padding: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contacto form .ancho { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .contacto { grid-template-columns: 1fr; }
  .contacto .lado-osc, .contacto form { padding: 28px 20px; }
  .contacto form { grid-template-columns: 1fr; }
}

/* pie */
.pie { background: var(--superficie); border-top: 1px solid var(--borde); padding: 64px 0 32px; margin-top: 104px; }
.pie .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
.pie p { color: var(--texto-2); font-size: var(--t-13); margin-top: 12px; max-width: 320px; }
.pie h5 { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); margin-bottom: 14px; font-weight: 600; }
.pie ul { list-style: none; display: grid; gap: 10px; }
.pie ul a { color: var(--tinta-900); font-size: var(--t-14); }
.pie .legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--borde); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: var(--t-12); color: var(--texto-2); }
.pie .legal p { max-width: none; margin: 0; font-size: var(--t-12); }
@media (max-width: 760px) { .pie .cols { grid-template-columns: 1fr 1fr; } .pie .cols > div:first-child { grid-column: 1 / -1; } }

/* botón flotante de WhatsApp */
.flotante {
  position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 52px; height: 52px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: var(--s-4);
  transition: transform var(--d-media) var(--ease-salida), background var(--d-rapida);
}
.flotante:hover { transform: translateY(-2px) scale(1.04); }
.flotante svg { width: 22px; height: 22px; }

@media (max-width: 420px) { .barra .acciones .btn-primario { padding: 0 12px; font-size: 13px; } .barra .logo b { font-size: 17px; } }