/* Paleta del manual de marca BNV */
:root {
  --negro: #252422;
  --gris: #4B4946;
  --crema: #FFFCF2;
  --beige: #E2DDD4;
  --azul: #9BB9F5;
  --amarillo: #FADC56;
  --rojo: #D6332F;
  --verde: #3DBE6B;

  --titulo: "Montserrat", system-ui, sans-serif;
  --serif: "Libre Caslon Text", Georgia, serif;
  --radio: 18px;
  --ancho: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: var(--titulo);
  font-size: 17px;
  line-height: 1.6;
  color: var(--negro);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); }
h3 { font-size: 1.4rem; }
/* La palabra especial de cada título va en Caslon itálica */
h1 em, h2 em, h3 em, .problema__remate em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
p { margin: 0 0 1em; }

.contenedor { width: min(var(--ancho), 100% - 32px); margin-inline: auto; }
.contenedor--angosto { width: min(820px, 100% - 32px); }
.centrado { text-align: center; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 1rem var(--titulo);
  padding: 16px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--negro); }
.boton--amarillo { background: var(--amarillo); color: var(--negro); border-color: var(--negro); }
.boton--negro { background: var(--negro); color: var(--crema); }
.boton--negro:hover { box-shadow: 0 6px 0 var(--amarillo); }
.boton--linea { background: transparent; color: inherit; border-color: currentColor; }
.boton--chico { padding: 10px 20px; font-size: .92rem; }

.etiqueta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 14px; border: 1.5px solid currentColor; border-radius: 999px;
  margin-bottom: 20px;
}
.enlace-flecha { color: inherit; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--amarillo); }

/* Punto que late (en vivo) */
.punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.punto--verde { background: var(--verde); box-shadow: 0 0 0 0 rgba(61,190,107,.6); animation: latido 1.8s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 9px rgba(61,190,107,0); } 100% { box-shadow: 0 0 0 0 rgba(61,190,107,0); } }

/* 0. Barra superior */
.barra { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--crema); transition: background .25s, padding .25s; padding: 18px 0; }
.barra.con-fondo { background: rgba(37, 36, 34, .96); padding: 10px 0; backdrop-filter: blur(8px); }
.barra__fila { display: flex; align-items: center; gap: 32px; }
.barra__logo img { height: 46px; width: auto; }
.barra__links { display: flex; gap: 26px; margin-left: auto; }
.barra__links a { color: inherit; text-decoration: none; font-weight: 500; font-size: .95rem; opacity: .85; }
.barra__links a:hover { opacity: 1; }

/* 1. Portada */
.portada { background: var(--negro); color: var(--crema); padding: 150px 0 64px; overflow: hidden; }
.portada__grilla { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.portada h1 em { color: var(--amarillo); }
.portada__bajada { font-size: 1.15rem; max-width: 38ch; opacity: .85; margin: 8px 0 24px; }
.portada__acciones { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 32px; }

.duo { display: flex; align-items: center; gap: 14px; }
.duo p { margin: 0; font-size: .95rem; line-height: 1.4; }
.duo p span { opacity: .7; font-size: .88rem; }
.duo__fotos { display: flex; flex: none; }
.duo__fotos img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--negro); }
.duo__fotos img + img { margin-left: -14px; }
.portada .duo__fotos img { border-color: var(--amarillo); }
.duo--chico .duo__fotos img { width: 40px; height: 40px; border-color: var(--crema); }
.duo--chico { margin-top: 28px; opacity: .9; }

.portada__visual { position: relative; min-height: 440px; display: grid; align-items: center; padding: 48px 0 40px; }
.tablero { background: #fff; color: var(--negro); border-radius: 16px; overflow: hidden; border: 3px solid var(--crema); box-shadow: 0 30px 70px rgba(0,0,0,.45); transform: rotate(-2deg); font-size: .8rem; }
.tablero__cabeza { display: flex; align-items: center; gap: 12px; background: var(--negro); color: var(--crema); padding: 14px 18px; }
.tablero__cabeza img { height: 28px; width: auto; }
.tablero__cabeza p { margin: 0; line-height: 1.25; }
.tablero__cabeza small { display: block; opacity: .6; font-size: .7rem; }
.tablero__rango { margin-left: auto; border: 1px solid rgba(255,252,242,.3); border-radius: 8px; padding: 5px 10px; font-size: .72rem; }
.tablero__cuerpo { padding: 16px 18px 18px; background: var(--crema); }
.tablero__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kpi { background: #fff; border: 1px solid var(--beige); border-radius: 10px; padding: 10px; }
.kpi--destacado { background: var(--amarillo); border-color: var(--amarillo); }
.kpi small { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.kpi b { display: block; font-size: 1.15rem; margin: 2px 0 4px; white-space: nowrap; }
.oculto-num { filter: blur(5px); user-select: none; }
.kpi i { font-style: normal; font-weight: 700; font-size: .68rem; color: #1E7A3E; background: #DDF3E4; padding: 2px 6px; border-radius: 6px; }
.kpi--destacado i { background: var(--negro); color: var(--amarillo); }
.tablero__grafico { margin-top: 10px; background: #fff; border: 1px solid var(--beige); border-radius: 10px; padding: 12px 14px 8px; }
.tablero__grafico p { margin: 0 0 8px; font-weight: 700; font-size: .78rem; }
.barras { display: flex; align-items: flex-end; gap: 12px; height: 150px; border-bottom: 1px solid var(--beige); }
.barras span { flex: 1; position: relative; height: var(--h); background: var(--azul); border-radius: 6px 6px 0 0; transform-origin: bottom; animation: crecer 1.2s cubic-bezier(.2,.8,.2,1) both; }
.barras span:last-child { background: var(--negro); }
.barras span:nth-child(2) { animation-delay: .1s; } .barras span:nth-child(3) { animation-delay: .2s; }
.barras span:nth-child(4) { animation-delay: .3s; } .barras span:nth-child(5) { animation-delay: .4s; } .barras span:nth-child(6) { animation-delay: .5s; }
.barras em { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-style: normal; font-size: .66rem; color: var(--gris); }
.tablero__grafico { padding-bottom: 26px; }
@keyframes crecer { from { transform: scaleY(0); } }
.chip {
  position: absolute; display: flex; align-items: center; gap: 10px;
  background: var(--crema); color: var(--negro); border: 2px solid var(--negro); border-radius: 14px;
  padding: 10px 16px; font-size: .9rem; font-weight: 600; box-shadow: 0 10px 0 rgba(0,0,0,.25);
  animation: flotar 6s ease-in-out infinite;
}
.chip--1 { top: 0; right: 4%; }
.chip--2 { top: 46%; right: -3%; background: var(--azul); animation-delay: -2s; }
.chip--3 { bottom: 2%; left: 2%; background: var(--amarillo); animation-delay: -4s; }
@keyframes flotar { 50% { transform: translateY(-10px); } }
.cifras { list-style: none; padding: 0; margin: 80px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,252,242,.2); }
.cifras li { padding: 28px 24px 0 0; }
.cifras strong { display: block; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600; color: var(--amarillo); }
.cifras span { font-size: .95rem; opacity: .8; }

/* 2. Marcas */
.marcas { background: var(--crema); padding: 44px 0 40px; border-bottom: 1px solid var(--beige); text-align: center; }
.marcas__titulo { font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin-bottom: 22px; }
.carrusel { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.carrusel__pista { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 72px; width: max-content; animation: desfile 16s linear infinite; }
.carrusel:hover .carrusel__pista { animation-play-state: paused; }
.carrusel__pista img { height: 28px; width: auto; opacity: .75; }
.marcas__texto { font-size: .95rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; white-space: nowrap; }
/* La pista tiene la lista dos veces: corre la mitad y vuelve sin que se note */
@keyframes desfile { to { transform: translateX(calc(-50% - 36px)); } }

/* Secciones */
.seccion { padding: 110px 0; }
.seccion--crema { background: var(--crema); }
.seccion--beige { background: var(--beige); }
.seccion--negro { background: var(--negro); color: var(--crema); }
.seccion--negro h2 em { color: var(--amarillo); }
.seccion__cabeza { max-width: 760px; margin-bottom: 52px; }
.seccion__cabeza p:last-child { font-size: 1.15rem; color: var(--gris); }
.seccion--negro .seccion__cabeza p:last-child { color: inherit; opacity: .8; }
.nota-ejemplo { margin: 20px 0 0; font-size: .85rem; color: var(--gris); }
.nota-ejemplo--clara { color: var(--crema); opacity: .55; }

/* 3. Problema */
.problema { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.problema h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
.problema__lista { list-style: none; padding: 0; margin: 0; }
.problema__lista li { font-size: 1.2rem; padding: 20px 0 20px 44px; border-bottom: 1px solid var(--beige); position: relative; }
.problema__lista li::before { content: ""; position: absolute; left: 0; top: 27px; width: 18px; height: 18px; border-radius: 50%; background: var(--rojo); }
.problema__remate { grid-column: 2; font-size: 1.6rem; font-weight: 600; margin-top: 12px; }
.problema__remate em { color: var(--rojo); }

/* 4. Método: tarjetas que se apilan al bajar */
.pila { display: grid; gap: 28px; }
.pila__tarjeta {
  position: sticky; top: calc(96px + var(--i) * 22px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  min-height: 460px; padding: 48px; border-radius: 24px; border: 2px solid var(--negro);
  box-shadow: 0 -10px 30px rgba(37,36,34,.08);
}
.pila__tarjeta--azul { background: var(--azul); }
.pila__tarjeta--amarillo { background: var(--amarillo); }
.pila__tarjeta--crema { background: var(--crema); }
.pila__tarjeta--negro { background: var(--negro); color: var(--crema); }
.pila__num { font-size: 4.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em; margin-bottom: 8px; opacity: .22; }
.pila__tarjeta h3 { font-size: 2.4rem; margin-bottom: 4px; }
.pila__frase { font-family: var(--serif); font-style: italic; font-size: 1.35rem; margin-bottom: 18px; }
.pila__frase em { font-style: italic; }
.pila__tarjeta--crema .pila__frase { color: var(--rojo); }
.pila__tarjeta--negro .pila__frase { color: var(--amarillo); }
.pila__texto > p:not(.pila__num):not(.pila__frase):not(.recibis) { font-size: 1rem; }
.recibis { margin: 22px 0 0; padding: 16px 18px; background: rgba(255,252,242,.7); border-radius: 12px; font-weight: 500; border: 1.5px solid var(--negro); }
.pila__tarjeta--crema .recibis { background: var(--beige); }
.pila__tarjeta--negro .recibis { background: rgba(255,252,242,.08); border-color: rgba(255,252,242,.3); }
.recibis span { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; }
.pila__tarjeta--negro .mock { color: var(--negro); box-shadow: 8px 8px 0 var(--amarillo); }

/* Maquetas animadas de cada paso */
.mock { background: #fff; border: 2px solid var(--negro); border-radius: 14px; padding: 22px; box-shadow: 8px 8px 0 var(--negro); font-size: .92rem; }
.mock__titulo { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 16px; }
.checklist, .ranking, .flujo { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--beige); }
.checklist li::before { content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; background: var(--verde); color: #fff; }
.checklist li.mal::before { content: "✕"; background: var(--rojo); }
.alerta__fila { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: var(--crema); border-left: 5px solid var(--amarillo); }
.alerta__fila:nth-child(2) { border-color: var(--azul); }
.alerta__fila:nth-child(3) { border-color: var(--verde); margin: 0; }
.alerta__fila b { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.ranking li { margin-bottom: 12px; }
.ranking span { display: block; font-size: .85rem; margin-bottom: 4px; }
.ranking i { display: block; height: 14px; border-radius: 99px; background: var(--rojo); width: 0; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.ranking li:first-child i { background: var(--negro); }
.patron { margin: 14px 0 0; padding: 10px 12px; background: var(--amarillo); border-radius: 10px; font-weight: 600; font-size: .85rem; }
.flujo { display: grid; gap: 12px; }
.flujo li { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 12px; background: var(--crema); border: 1.5px solid var(--beige); font-weight: 600; }
.flujo span { font-size: 1.4rem; }
/* Al activarse un panel, sus elementos entran de a uno */
.pila__tarjeta .checklist li, .pila__tarjeta .alerta__fila, .pila__tarjeta .flujo li, .pila__tarjeta .patron { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.pila__tarjeta.activo .checklist li, .pila__tarjeta.activo .alerta__fila, .pila__tarjeta.activo .flujo li, .pila__tarjeta.activo .patron { opacity: 1; transform: none; }
.pila__tarjeta.activo :is(.checklist li, .alerta__fila, .flujo li):nth-child(1) { transition-delay: .25s; }
.pila__tarjeta.activo :is(.checklist li, .alerta__fila, .flujo li):nth-child(2) { transition-delay: .6s; }
.pila__tarjeta.activo :is(.checklist li, .alerta__fila, .flujo li):nth-child(3) { transition-delay: .95s; }
.pila__tarjeta.activo .checklist li:nth-child(4) { transition-delay: 1.3s; }
.pila__tarjeta.activo .checklist li:nth-child(5) { transition-delay: 1.65s; }
.pila__tarjeta.activo .patron { transition-delay: 1.2s; }
.pila__tarjeta.activo .ranking i { width: var(--v); }
.pila__tarjeta.activo .ranking li:nth-child(2) i { transition-delay: .15s; }
.pila__tarjeta.activo .ranking li:nth-child(3) i { transition-delay: .3s; }
.pila__tarjeta.activo .ranking li:nth-child(4) i { transition-delay: .45s; }

/* 5. Números en vivo */
.numeros { display: grid; grid-template-columns: 360px 1fr; gap: 40px; align-items: center; }
.numeros__preguntas { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pregunta {
  width: 100%; text-align: left; cursor: pointer; background: transparent; color: var(--crema);
  border: 1.5px solid rgba(255,252,242,.25); border-radius: 14px; padding: 16px 18px; font-weight: 600; font-size: 1.02rem;
  position: relative; overflow: hidden; transition: background .2s, border-color .2s, color .2s;
}
.pregunta:hover { border-color: var(--crema); }
.pregunta.activo { background: var(--amarillo); color: var(--negro); border-color: var(--amarillo); }
.pregunta::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--negro); }
.pregunta.activo::after { animation: avance var(--duracion, 4.5s) linear forwards; }
.pausado .pregunta.activo::after { animation-play-state: paused; }
.ventana { background: var(--crema); border-radius: 16px; overflow: hidden; border: 3px solid var(--crema); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.ventana__barra { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--beige); color: var(--negro); font-size: .8rem; font-weight: 600; }
.ventana__barra i { width: 11px; height: 11px; border-radius: 50%; background: var(--rojo); }
.ventana__barra i:nth-child(2) { background: var(--amarillo); }
.ventana__barra i:nth-child(3) { background: var(--verde); margin-right: 8px; }
.ventana__fecha { margin-left: auto; background: #fff; border-radius: 99px; padding: 3px 10px; font-weight: 500; }
.ventana__pantallas { position: relative; aspect-ratio: 1440 / 900; background: #fff; }
.ventana__pantallas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: top center; opacity: 0; transform: scale(1.02); transition: opacity .6s, transform .8s; }
.ventana__pantallas img.activo { opacity: 1; transform: none; }

/* 6. Encaje */
.encaje { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.encaje__si { background: var(--azul); border-radius: var(--radio); padding: 36px; border: 2px solid var(--negro); }
.encaje__no { border-radius: var(--radio); padding: 36px; border: 2px dashed var(--gris); }
.encaje__titulo { font-family: var(--serif); font-style: italic; font-size: 1.5rem; margin-bottom: 18px; }
.encaje__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.encaje__lista button {
  width: 100%; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 14px;
  background: rgba(255,252,242,.6); border: 2px solid transparent; border-radius: 14px; padding: 14px 16px; font-weight: 600; font-size: 1.02rem;
  transition: background .2s, border-color .2s, transform .15s;
}
.encaje__lista button::before {
  content: ""; flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--negro); background: #fff;
  transition: background .2s;
}
.encaje__lista button:hover { transform: translateX(4px); }
.encaje__lista button[aria-pressed="true"] { background: var(--crema); border-color: var(--negro); }
.encaje__lista button[aria-pressed="true"]::before {
  background: var(--negro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23FADC56' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  animation: marcar .3s ease;
}
@keyframes marcar { 50% { transform: scale(1.25); } }
.encaje__medidor { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.medidor { flex: 1; height: 10px; background: rgba(37,36,34,.15); border-radius: 99px; overflow: hidden; }
.medidor span { display: block; height: 100%; width: 0; background: var(--negro); border-radius: 99px; transition: width .4s cubic-bezier(.2,.8,.2,1); }
.encaje__cuenta { margin: 0; font-weight: 600; white-space: nowrap; }
.encaje__listo { margin-top: 20px; padding: 20px; background: var(--amarillo); border: 2px solid var(--negro); border-radius: 14px; animation: aparecer .4s ease; }
.encaje__listo p { margin-bottom: 14px; }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } }
.encaje__no ul { list-style: none; padding: 0; margin: 0; }
.encaje__no li { padding: 10px 0 10px 32px; position: relative; color: var(--gris); }
.encaje__no li::before { content: "✕"; position: absolute; left: 0; font-weight: 700; color: var(--rojo); }

/* 7. Casos */
.casos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.caso { background: var(--crema); border-radius: var(--radio); padding: 32px; border: 2px solid var(--negro); position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.caso:hover { transform: translateY(-4px); box-shadow: 0 8px 0 var(--negro); }
.caso::after { content: ""; position: absolute; width: 120px; height: 120px; right: -40px; top: -40px; border-radius: 50%; }
.caso--amarillo::after { background: var(--amarillo); }
.caso--azul::after { background: var(--azul); }
.caso--rojo::after { background: var(--rojo); }
.caso__logo { height: 34px; width: auto; margin-bottom: 10px; }
.caso__rubro { font-size: .88rem; color: var(--gris); }
.caso__numero { font-size: clamp(2.2rem, 3.4vw, 2.9rem); font-weight: 700; line-height: 1; margin: 24px 0 4px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.caso__que { font-family: var(--serif); font-style: italic; font-size: 1.2rem; margin: 0; }
.caso__detalle { font-size: .95rem; color: var(--gris); margin: 0; padding-top: 16px; border-top: 1px solid var(--beige); }

/* 8. Personas */
.personas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.persona { display: grid; grid-template-columns: 170px 1fr; gap: 28px; padding: 32px; border: 2px solid var(--negro); border-radius: var(--radio); align-items: start; }
.persona__foto { width: 170px; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; border: 2px solid var(--negro); transform: rotate(-2deg); box-shadow: 6px 6px 0 var(--amarillo); }
.persona:nth-child(2) .persona__foto { transform: rotate(2deg); box-shadow: 6px 6px 0 var(--azul); }
.persona__foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.persona h3 { margin-bottom: 2px; }
.persona__rol { font-weight: 600; color: var(--rojo); font-size: .95rem; }

/* 9. Comparativa */
.tabla-scroll { overflow-x: auto; }
.comparativa { width: 100%; border-collapse: collapse; min-width: 720px; }
.comparativa th, .comparativa td { padding: 18px 16px; text-align: left; border-bottom: 1px solid rgba(255,252,242,.15); font-size: .98rem; }
.comparativa thead th { font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; opacity: .7; font-weight: 600; }
.comparativa tbody th { font-weight: 500; }
.comparativa td { opacity: .7; }
.comparativa .destacada { background: var(--amarillo); color: var(--negro); opacity: 1; font-weight: 700; }
.comparativa thead .destacada { border-radius: 12px 12px 0 0; font-size: 1rem; }

/* 10. FAQ */
.faq details { border-bottom: 1.5px solid var(--negro); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 48px 24px 0; font-weight: 600; font-size: 1.15rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 1.8rem; font-weight: 400; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--gris); padding-right: 48px; }

/* 11. Diagnóstico */
.diagnostico__grilla { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: start; }
.diagnostico__bajada { font-size: 1.15rem; opacity: .85; }
.diagnostico__pasos { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.diagnostico__pasos li { display: flex; gap: 16px; align-items: flex-start; font-size: 1.05rem; }
.diagnostico__pasos b { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--amarillo); color: var(--negro); display: grid; place-items: center; }
.diagnostico__pasos li:nth-child(2) b { background: var(--azul); }
.diagnostico__pasos li:nth-child(3) b { background: var(--rojo); color: var(--crema); }
.tarjeta-form { background: var(--crema); color: var(--negro); border-radius: var(--radio); padding: 36px; }

/* Formulario */
.form fieldset { border: 0; margin: 0; padding: 0; }
.form legend, .form__titulo { font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin-bottom: 20px; padding: 0; }
.form__progreso { height: 6px; background: var(--beige); border-radius: 99px; margin-bottom: 28px; overflow: hidden; }
.form__progreso span { display: block; height: 100%; width: 33%; background: var(--negro); transition: width .3s; }
.form__pregunta { font-weight: 600; margin: 18px 0 10px; }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opciones label { cursor: pointer; }
.opciones input { position: absolute; opacity: 0; pointer-events: none; }
.opciones span { display: block; padding: 16px; border: 2px solid var(--negro); border-radius: 12px; font-weight: 600; text-align: center; transition: background .15s; }
.opciones--chicas span { padding: 11px; font-size: .92rem; }
.opciones label:hover span { background: var(--beige); }
.opciones input:checked + span { background: var(--amarillo); }
.opciones input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 2px; }
.campo { display: block; margin-top: 16px; }
.campo span { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.campo input { width: 100%; font: inherit; padding: 14px 16px; border: 2px solid var(--negro); border-radius: 12px; background: #fff; }
.campo input:focus { outline: 3px solid var(--azul); outline-offset: 1px; }
.campo.con-error input, .opciones.con-error span { border-color: var(--rojo); }
.form__botones { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.agenda { height: 700px; margin: 0 -12px; }
.agenda iframe { width: 100%; height: 100%; border: 0; }

/* Ventana del formulario */
.modal { border: 0; padding: 44px 36px 36px; border-radius: 22px; width: min(560px, 100% - 24px); max-height: 92vh; background: var(--crema); color: var(--negro); }
.modal.con-agenda { width: min(1000px, 100% - 24px); }
.modal::backdrop { background: rgba(37, 36, 34, .75); }
.modal__cerrar { position: absolute; right: 16px; top: 10px; background: none; border: 0; font-size: 2rem; cursor: pointer; color: var(--negro); }

/* Botón flotante */
.flotante { position: fixed; right: 24px; bottom: 24px; z-index: 45; transition: opacity .3s, transform .3s; }
.flotante.oculto { opacity: 0; transform: translateY(20px); pointer-events: none; }
.flotante button {
  cursor: pointer; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; text-align: left;
  background: var(--negro); color: var(--crema); padding: 12px 24px 12px 18px; border-radius: 999px;
  border: 2px solid var(--amarillo); box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: transform .15s;
}
.flotante button:hover { transform: translateY(-3px); }
.flotante .punto { grid-row: span 2; }
.flotante__chico { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.flotante__grande { font-weight: 700; color: var(--amarillo); }

/* 12. Pie */
.pie { background: var(--negro); color: var(--crema); padding: 64px 0 48px; border-top: 1px solid rgba(255,252,242,.15); }
.pie__fila { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.pie__logo { height: 64px; width: auto; }
.pie p { margin: 0; opacity: .8; }
.pie__links { display: flex; gap: 24px; margin-left: auto; }
.pie__links a { color: inherit; text-decoration: none; font-weight: 600; }
.pie__copy { width: 100%; font-size: .85rem; }

/* Animación de entrada */
.aparece { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.aparece.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .aparece { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  .chip, .punto--verde, .barras span, .carrusel__pista { animation: none; }
}

/* Tablet */
@media (max-width: 1024px) {
  .numeros { grid-template-columns: 1fr; }
  .numeros__preguntas { grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); overflow-x: auto; scrollbar-width: none; }
  .casos { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .personas { grid-template-columns: 1fr; }
}

/* Celular */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .barra__links, .barra .boton { display: none; }
  .barra__logo img { height: 38px; }
  .portada { padding: 110px 0 48px; }
  .portada__grilla, .problema, .encaje, .diagnostico__grilla { grid-template-columns: 1fr; }
  .portada__visual { min-height: 300px; }
  .chip { font-size: .78rem; padding: 8px 12px; }
  .cifras { grid-template-columns: 1fr 1fr; margin-top: 48px; }
  .seccion { padding: 72px 0; }
  .problema { gap: 8px; }
  .problema__remate { grid-column: 1; }
  .encaje__si, .encaje__no { padding: 24px 20px; }
  .persona { grid-template-columns: 1fr; }
  .tarjeta-form { padding: 24px 20px; }
  .opciones { grid-template-columns: 1fr; }
  .opciones--chicas { grid-template-columns: 1fr 1fr; }
  .modal { padding: 44px 20px 24px; }
  .pie { padding-bottom: 110px; }
  .pie__links { margin-left: 0; }
  .flotante { right: 16px; bottom: 16px; left: 16px; }
  .flotante button { width: 100%; }
  /* En celular cada tarjeta es más alta que la pantalla: no se apilan para que no se tape el ejemplo */
  .pila__tarjeta { position: relative; top: auto; grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; min-height: 0; }
  .pila__num { font-size: 3rem; }
  .pila__tarjeta h3 { font-size: 1.9rem; }
  .tablero { font-size: .72rem; transform: rotate(-1.5deg); }
  .tablero__kpis { grid-template-columns: 1fr 1fr; }
  .barras { height: 110px; }
  .chip--2 { right: 0; }
  .persona__foto { width: 150px; }
}