/* =====================================================================
   Embudo S.E.A. · R+H Recurso Mas Humano
   Identidad tomada del sitio recursomashumano.com:
   rojo #C8102E · tinta #1A1A1A · hueso #FAFAF8 · DM Sans + Playfair Display
   Firma: los 4 bloques rojos del logo R+H = las 4 reuniones que se alinean.
   ===================================================================== */
:root {
  --rojo: #C8102E;
  --rojo-osc: #A00D24;
  --tinta: #1A1A1A;
  --gris: #555555;
  --gris-suave: #6B6B6B;
  --linea: #E8E8E8;
  --hueso: #FAFAF8;
  --blanco: #FFFFFF;
  --rosado: #FBEFF1;
  --wa: #0F7A6E;
  --wa-osc: #0B6359;
  --display: 'Playfair Display', Georgia, serif;
  --cuerpo: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --radio: 6px;
  --cab: 64px;
}
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--hueso); color: var(--tinta);
  font-family: var(--cuerpo); font-size: 1.0625rem; line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rojo-osc); }
h1, h2, h3 { margin: 0 0 .6rem; line-height: 1.2; }
p { margin: 0 0 1rem; }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
code { font-family: var(--mono); font-size: .92em; background: var(--blanco); border: 1px solid var(--linea); padding: .05rem .35rem; border-radius: 4px; }

.saltar { position: absolute; left: -999px; top: 0; background: var(--tinta); color: #fff; padding: .6rem 1rem; z-index: 100; }
.saltar:focus { left: 0; }

/* ----------------------------------------------------------- marcadores */
mark.pendiente {
  background: #FFF3C4; color: #5C4400; font-family: var(--mono); font-size: .82em;
  padding: .08rem .35rem; border-radius: 3px; border: 1px dashed #C9A227;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 1.7;
}
.nota-pend { font-size: .9rem; margin: .4rem 0 1.2rem; }

/* ------------------------------------------------------------- cabecera */
.franja-demo {
  background: var(--tinta); color: #FFF; text-align: center; font-family: var(--mono);
  font-size: .8rem; letter-spacing: .06em; padding: .45rem 1rem; position: sticky; top: 0; z-index: 30;
}
.franja-demo::before { content: ''; display: inline-block; width: .55rem; height: .55rem; background: var(--rojo); margin-right: .55rem; vertical-align: .05rem; }
.cabecera { background: var(--blanco); border-bottom: 1px solid var(--linea); }
.cabecera-in { max-width: 1120px; margin: 0 auto; padding: .55rem 1.1rem; display: flex; align-items: center; justify-content: space-between; min-height: var(--cab); }
.logo img { width: 56px; height: auto; }
.cabecera-paso { font-family: var(--mono); font-size: .8rem; color: var(--gris); letter-spacing: .04em; text-transform: uppercase; }

/* --------------------------------------------------------------- layout */
.bloque { padding: 3.2rem 1.1rem; }
.estrecho { max-width: 680px; margin: 0 auto; }
.ancho { max-width: 1120px; margin: 0 auto; }
.centro { text-align: center; }
section.estrecho { padding-left: 1.1rem; padding-right: 1.1rem; }

.eyebrow { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rojo-osc); margin-bottom: .8rem; }
.titulo-l { font-family: var(--display); font-size: clamp(1.75rem, 6vw, 2.6rem); font-weight: 700; }
.titulo-m { font-family: var(--display); font-size: clamp(1.55rem, 5vw, 2.2rem); font-weight: 700; }
.titulo-s { font-family: var(--cuerpo); font-size: 1.15rem; font-weight: 700; margin-top: 2rem; }
.titulo-s small { font-weight: 400; color: var(--gris); font-size: .85rem; }
.lead { font-size: 1.12rem; color: #333; }
.nota { font-size: .88rem; color: var(--gris); }
.enlace { color: var(--rojo-osc); font-weight: 500; }

/* ------------------------------------------------------------- botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--rojo); color: #FFF; text-decoration: none; border: 0; border-radius: var(--radio);
  font: 700 1.05rem/1.2 var(--cuerpo); padding: .95rem 1.4rem; cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.boton:hover { background: var(--rojo-osc); }
.boton:active { transform: translateY(1px); }
.boton-grande { width: 100%; font-size: 1.15rem; padding: 1.1rem 1.4rem; box-shadow: 0 6px 0 var(--rojo-osc); margin-bottom: 6px; }
.boton-grande:active { box-shadow: 0 2px 0 var(--rojo-osc); transform: translateY(4px); }
.boton-borde { background: transparent; color: var(--tinta); border: 2px solid var(--tinta); }
.boton-borde:hover { background: var(--tinta); color: #FFF; }
.boton-wa { background: var(--wa); width: 100%; margin-top: 2rem; }
.boton-wa:hover { background: var(--wa-osc); }
.boton-wa svg { width: 1.5rem; height: 1.5rem; flex: none; }
.cta-bloque { margin: 1.6rem auto 0; max-width: 460px; text-align: center; }
.cta-sub { font-size: .88rem; color: var(--gris); margin: .6rem 0 0; text-align: center; }
.js .js-retraso:not(.visible) { display: none; }
.js-retraso.visible { animation: aparecer .5s ease-out both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------- firma: 4 bloques R+H */
.firma { display: flex; gap: 6px; height: 34px; align-items: flex-start; margin: 1.2rem 0 1.4rem; }
.firma i { width: 22px; height: 22px; background: var(--rojo); display: block; animation: alinear 1.1s cubic-bezier(.2,.8,.2,1) both; }
.firma i:nth-child(1) { --y: 12px; animation-delay: .15s; }
.firma i:nth-child(2) { --y: -4px; animation-delay: .3s; }
.firma i:nth-child(3) { --y: 9px; animation-delay: .45s; }
.firma i:nth-child(4) { --y: 3px; animation-delay: .6s; }
@keyframes alinear { from { transform: translateY(var(--y)); } to { transform: translateY(6px); } }
.firma-chica { height: 28px; justify-content: center; margin: 0 0 1rem; }
.firma-chica i { width: 16px; height: 16px; }
/* En los pasos la alineación avanza: paso 1 = 2 bloques alineados, paso 2 = 3. */
.firma-paso { justify-content: flex-start; }
.firma-paso i { animation: none; transform: translateY(6px); }
.firma-paso[data-paso="1"] i:nth-child(3) { transform: translateY(0); background: #D9D9D9; }
.firma-paso[data-paso="1"] i:nth-child(4) { transform: translateY(12px); background: #D9D9D9; }
.firma-paso[data-paso="2"] i:nth-child(4) { transform: translateY(12px); background: #D9D9D9; }
.firma-alineada { justify-content: flex-start; }
.firma-carga { justify-content: center; }
.firma-carga i { animation: latido 1s ease-in-out infinite; transform: none; }
.firma-carga i:nth-child(2) { animation-delay: .15s; } .firma-carga i:nth-child(3) { animation-delay: .3s; } .firma-carga i:nth-child(4) { animation-delay: .45s; }
@keyframes latido { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ---------------------------------------------------------------- hero */
.hero { background: var(--blanco); border-bottom: 1px solid var(--linea); padding: 1.8rem 1.1rem 2.6rem; }
.hero-in { max-width: 820px; margin: 0 auto; }
.titular { font-family: var(--display); font-weight: 700; font-size: clamp(1.45rem, 5.6vw, 1.95rem); max-width: 40ch; line-height: 1.22; letter-spacing: -.01em; margin: 0; }
.video { margin: 0; background: var(--tinta); border-radius: var(--radio); overflow: hidden; width: 100%; }
.video video, .video iframe { width: 100%; height: 100%; display: block; border: 0; object-fit: cover; }
.video-aviso { font-size: .82rem; margin: .5rem 0 0; }

/* --------------------------------------------------------------- dolor */
.lista-dolor { list-style: none; padding: 0; margin: 1.4rem 0 1rem; }
.lista-dolor li { position: relative; padding: .9rem 0 .9rem 2.4rem; border-bottom: 1px solid var(--linea); font-size: 1.08rem; }
.lista-dolor li::before { content: ''; position: absolute; left: 0; top: 1.25rem; width: 14px; height: 14px; background: var(--rojo); transform: translateY(4px) rotate(8deg); }

/* ------------------------------------------------------------- sistema */
.sistema { background: var(--blanco); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.sistema-grid { display: grid; gap: 2rem; }
.reuniones { list-style: none; padding: 0; margin: 1.6rem 0 .4rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; counter-reset: none; }
.reuniones li { background: var(--rojo); color: #FFF; padding: .8rem .6rem .7rem; display: flex; flex-direction: column; min-height: 104px; }
.reunion-n { font-family: var(--display); font-size: 2rem; font-weight: 700; line-height: 1; }
.reunion-t { font-size: .8rem; margin-top: auto; font-weight: 500; }
.reunion-d { font-family: var(--mono); font-size: .78rem; opacity: .9; }
.resultado-tit { font-weight: 700; margin: 1.4rem 0 .4rem; }
.resultados { list-style: none; padding: 0; margin: 0 0 1rem; }
.resultados li { padding: .35rem 0 .35rem 1.7rem; position: relative; }
.resultados li::before { content: ''; position: absolute; left: 0; top: .78rem; width: 10px; height: 10px; background: var(--tinta); }
.foto { margin: 0; }
.foto img { border-radius: var(--radio); width: 100%; height: auto; }

/* --------------------------------------------------------------- bonos */
.foto-producto { margin-bottom: 2rem; }
.lista-bonos { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 1rem; }
.lista-bonos li { background: var(--blanco); border: 1px solid var(--linea); border-left: 6px solid var(--rojo); padding: 1.1rem 1.2rem; border-radius: 0 var(--radio) var(--radio) 0; }
.lista-bonos h3 { font-size: 1.12rem; margin: .2rem 0 .35rem; }
.lista-bonos p { margin: 0; color: #333; }
.bono-n { font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rojo-osc); }
.lista-bonos-chica { margin-bottom: 1rem; }

/* -------------------------------------------------------------- prueba */
.prueba { background: var(--tinta); color: #F2F2F2; }
.prueba .titulo-m { color: #FFF; }
.prueba .nota { color: #BDBDBD; }
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #3A3A3A; margin: 1.6rem 0 2rem; border: 1px solid #3A3A3A; }
.cifras div { background: var(--tinta); padding: 1rem .6rem; }
.cifras dt { font-family: var(--mono); font-size: clamp(1.25rem, 5vw, 2rem); font-weight: 500; color: #FFF; }
.cifras dt::before { content: ''; display: block; width: 10px; height: 10px; background: var(--rojo); margin-bottom: .5rem; }
.cifras dd { margin: 0; font-size: .82rem; color: #C9C9C9; line-height: 1.35; }
.testimonios { display: grid; gap: 1rem; }
.testimonio { margin: 0; background: #242424; padding: 1.2rem 1.2rem 1rem; border-radius: var(--radio); }
.testimonio p { font-family: var(--display); font-style: italic; font-size: 1.08rem; line-height: 1.5; color: #FFF; }
.testimonio footer { font-size: .85rem; color: #C9C9C9; display: flex; flex-direction: column; }
.testimonio footer strong { color: #FFF; }
.empresas-tit { margin: 2rem 0 .6rem; font-size: .85rem; color: #C9C9C9; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.empresas { list-style: none; padding: 0; margin: 0 0 1.2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.empresas li { border: 1px solid #4A4A4A; padding: .3rem .7rem; font-weight: 700; font-size: .9rem; letter-spacing: .02em; color: #EDEDED; }

/* ----------------------------------------------------------------- bio */
.bio-grid { display: grid; gap: 1.6rem; }
.bio-foto { margin: 0; max-width: 280px; position: relative; }
.bio-foto img { border-radius: var(--radio); }
.bio-foto::after { content: ''; position: absolute; right: -10px; bottom: -10px; width: 46px; height: 46px; background: var(--rojo); z-index: -1; }
.bio-rol { font-weight: 700; color: var(--rojo-osc); }

/* -------------------------------------------------------------- cierre */
.cierre { background: var(--rosado); }
.precio-cierre { font-family: var(--mono); font-size: 1.05rem; }

/* ----------------------------------------------------------- formularios */
.form-pagina { padding-top: 2.2rem; }
.formulario { margin-top: 1.4rem; }
.campo { margin-bottom: 1rem; }
.campo label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .3rem; }
.campo input {
  width: 100%; font: 400 1.05rem var(--cuerpo); padding: .85rem .9rem; border: 1.5px solid #767676;
  border-radius: var(--radio); background: var(--blanco); color: var(--tinta);
}
.campo input:focus { border-color: var(--tinta); outline: none; box-shadow: 0 0 0 3px var(--rojo); }
.campo-error input { border-color: var(--rojo); }
.campo-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; }
.error { color: var(--rojo-osc); font-size: .88rem; margin: .3rem 0 0; font-weight: 500; }
.alerta { background: #FDECEE; border: 1px solid #F3B8C1; color: #7A0A1C; padding: .8rem 1rem; border-radius: var(--radio); font-weight: 500; }
.alerta-ok { background: #EAF6EF; border-color: #B7DEC6; color: #14532D; }

/* ---------------------------------------------------------------- pago */
.pago { padding-top: 2rem; }
.resumen { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: .3rem .9rem; align-items: center; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: .8rem; margin: 1rem 0 0; }
.resumen img { width: 84px; height: 60px; object-fit: cover; border-radius: 4px; grid-row: span 2; }
.resumen-nombre { font-weight: 700; margin: 0; line-height: 1.3; }
.resumen-desc { margin: 0; font-size: .85rem; color: var(--gris); }
.resumen .precio { grid-column: 1 / -1; margin: .4rem 0 0; text-align: right; font-family: var(--mono); }
.bump {
  display: grid; gap: .35rem; background: var(--blanco); border: 2px dashed var(--rojo);
  border-radius: var(--radio); padding: 1rem; margin-bottom: .9rem; cursor: pointer; border-width: 1.5px;
}
.bump:has(input:checked) { background: var(--rosado); border-style: solid; }
.bump-check { display: flex; gap: .6rem; align-items: center; font-weight: 700; color: var(--rojo-osc); background: #FFF3C4; padding: .45rem .6rem; border-radius: 4px; }
.bump-check input { width: 1.3rem; height: 1.3rem; accent-color: var(--rojo); flex: none; margin: 0; }
.bump-nombre { font-weight: 700; font-size: 1.05rem; }
.bump-precio { font-family: var(--mono); }
.bump-precio s { color: var(--gris-suave); }
.bump-precio strong { color: var(--rojo-osc); font-weight: 500; }
.bump-desc { font-size: .93rem; color: #333; }
.tarjeta { scroll-margin-top: 4rem; border: 1px solid var(--linea); background: var(--blanco); border-radius: var(--radio); padding: .4rem 1rem 1rem; margin: 1.2rem 0 0; }
.tarjeta legend { padding: 0 .3rem; margin: 0; }
.pruebas summary { cursor: pointer; font-size: .9rem; font-weight: 500; color: var(--rojo-osc); }
.pruebas p { font-size: .9rem; margin: .5rem 0 0; }
.total { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--tinta); margin: 1.4rem 0 .4rem; padding-top: .8rem; font-weight: 700; }
.total strong { font-family: var(--mono); font-size: 1.5rem; font-weight: 500; }
.procesando { position: fixed; inset: 0; background: rgba(250,250,248,.96); z-index: 50; display: grid; place-items: center; }
.procesando-in { text-align: center; font-weight: 700; }

/* ------------------------------------------------------- OTO / downsell */
.oferta { padding-top: 2rem; }
.confirmado { display: inline-block; background: #EAF6EF; color: #14532D; border: 1px solid #B7DEC6; padding: .4rem .8rem; border-radius: 999px; font-weight: 700; font-size: .92rem; }
.confirmado-suave { background: var(--blanco); color: var(--tinta); border-color: var(--linea); }
.oferta .video { margin: 1.2rem 0 0; }
.oferta .foto { margin: 1.2rem 0 1.4rem; }
.oferta-precio { font-family: var(--mono); text-align: center; font-size: 1.1rem; margin: 1.4rem 0 1rem; }
.oferta-precio s { color: var(--gris-suave); margin-right: .5rem; }
.oferta-precio strong { font-size: 2rem; font-weight: 500; color: var(--rojo-osc); }
.decision { text-align: center; }
.enlace-no { background: none; border: 0; color: var(--gris); text-decoration: underline; font: 400 .95rem var(--cuerpo); padding: 1rem .5rem; margin-top: .6rem; cursor: pointer; }
.enlace-no:hover { color: var(--tinta); }

/* -------------------------------------------------------------- gracias */
.gracias { padding-top: 2.4rem; }
.recibo { list-style: none; padding: 0; margin: 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
.recibo li { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--linea); }
.recibo li span:last-child { font-family: var(--mono); white-space: nowrap; }
.recibo-total { font-weight: 700; border-bottom: 0 !important; }
.pasos { padding: 0; margin: 0; list-style: none; counter-reset: paso; }
.pasos li { counter-increment: paso; position: relative; padding: 0 0 1.2rem 3rem; }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background: var(--rojo); color: #FFF; font-family: var(--display); font-weight: 700; display: grid; place-items: center; }
.pasos h3 { font-size: 1.05rem; margin: .2rem 0 .2rem; }
.pasos p { margin: 0 0 .4rem; }

/* ------------------------------------------------------------- legales */
.legal-pag { padding-top: 2.4rem; }
.legal-pag ul { padding-left: 1.2rem; }
.legal-pag li { margin-bottom: .5rem; }

/* ----------------------------------------------------------------- pie */
.pie { background: var(--blanco); border-top: 1px solid var(--linea); padding: 2rem 1.1rem 6rem; font-size: .9rem; color: var(--gris); }
.pie-in { max-width: 1120px; margin: 0 auto; }
.pie p { margin: 0 0 .5rem; }
.pie .credito { margin-top: 1.2rem; font-size: .82rem; color: var(--gris-suave); }
.pie a { color: var(--gris); }
.pie-marca strong { color: var(--tinta); }

/* ----------------------------------------------------- WhatsApp flotante */
.wa-flotante {
  position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 58px; height: 58px; border-radius: 50%;
  background: var(--wa); color: #FFF; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.wa-flotante:hover { background: var(--wa-osc); }
.wa-flotante svg { width: 30px; height: 30px; }

/* ------------------------------------------------------- panel simulación */
.p-admin .admin { max-width: 1120px; margin: 0 auto; padding: 1.6rem 1.1rem 3rem; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 1.2rem 0; }
.kpis div { background: var(--blanco); border: 1px solid var(--linea); border-top: 4px solid var(--rojo); padding: .8rem; border-radius: var(--radio); }
.kpis span { display: block; font-size: .8rem; color: var(--gris); }
.kpis strong { font-family: var(--mono); font-size: 1.4rem; font-weight: 500; }
.mapa { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; }
.mapa-fila { display: grid; gap: 1.6rem; position: relative; }
.mapa-lineal { grid-template-columns: minmax(0, 1fr); }
.nodo { border: 2px solid var(--tinta); border-radius: var(--radio); padding: .6rem .8rem; background: var(--hueso); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 .6rem; }
.nodo-t { font-weight: 700; font-size: .92rem; }
.nodo-n { font-family: var(--mono); font-size: 1.6rem; grid-row: span 2; }
.nodo-d { font-size: .78rem; color: var(--gris); }
.mapa-lineal .nodo:not(:last-child)::after, .mapa-fila + .mapa-bumps::before { content: ''; }
.mapa-lineal .nodo:not(:last-child)::after { position: absolute; left: 50%; bottom: -1.45rem; width: 2px; height: 1.3rem; background: var(--tinta); }
.nodo-compra { border-color: var(--rojo); background: var(--rosado); }
.nodo-oferta { border-style: dashed; }
.nodo-fin { background: var(--tinta); color: #FFF; border-color: var(--tinta); }
.nodo-fin .nodo-d { color: #CFCFCF; }
.mapa-bumps { font-size: .82rem; color: var(--gris); margin: .9rem 0 1.2rem; display: flex; flex-wrap: wrap; gap: .3rem .9rem; border-left: 3px solid var(--rojo); padding-left: .6rem; }
.mapa-bumps strong { font-family: var(--mono); color: var(--tinta); }
.mapa-rama { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
.rama { border-left: 2px solid var(--tinta); padding-left: .8rem; display: grid; gap: .5rem; align-content: start; }
.rama-et { font-family: var(--mono); font-size: .78rem; color: var(--gris); }
.rama-si { color: #14532D; font-weight: 500; }
.mapa-pie { margin-top: 1.2rem; padding-top: .8rem; border-top: 1px dashed #BDBDBD; font-size: .82rem; color: var(--gris); display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.chip { font-family: var(--mono); background: var(--tinta); color: #FFF; padding: .1rem .45rem; border-radius: 3px; font-size: .75rem; }
.tabla-envoltura { overflow-x: auto; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla th, .tabla td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); background: var(--hueso); }
.tabla td small { color: var(--gris); }
.tabla td:first-child { min-width: 9rem; }
.tabla-eventos td { white-space: nowrap; }
.tabla tr.mio td { background: #FFF8E1; }
.quienes { font-size: .8rem; color: var(--gris); min-width: 14rem; }
.ev { font-family: var(--mono); font-size: .78rem; padding: .05rem .4rem; border-radius: 3px; background: #EFEFEF; }
.ev-purchase { background: #EAF6EF; color: #14532D; }
.ev-lead { background: #E8EEFB; color: #1E3A8A; }
.ev-initiatecheckout { background: #FFF3C4; color: #5C4400; }
.ev-decline, .ev-paymentfailed { background: #FDECEE; color: #7A0A1C; }
.correos { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.correo { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
.correo summary { cursor: pointer; padding: .7rem .9rem; display: grid; gap: .1rem; list-style: none; }
.correo summary::-webkit-details-marker { display: none; }
.correo-dia { font-family: var(--mono); font-size: .75rem; color: var(--rojo-osc); }
.correo-asunto { font-weight: 700; }
.correo-meta { font-size: .8rem; color: var(--gris); overflow-wrap: anywhere; }
.correo-cancelado { opacity: .6; }
.correo-cuerpo { white-space: pre-wrap; font-family: var(--cuerpo); font-size: .9rem; margin: 0; padding: 0 .9rem .9rem; color: #333; }
.reiniciar { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; display: grid; gap: .8rem; justify-items: start; }

/* ------------------------------------------------------------ escritorio */
@media (min-width: 760px) {
  .bloque { padding: 4.5rem 1.5rem; }
  .hero { padding: 2.6rem 1.5rem 3.4rem; }
  .sistema-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 3rem; }
  .lista-bonos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lista-bonos-chica { grid-template-columns: minmax(0, 1fr); }
  .testimonios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bio-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 3rem; align-items: start; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mapa { padding: 1.4rem; }
  .mapa-lineal { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
  .mapa-lineal .nodo:not(:last-child)::after { left: auto; right: -1.4rem; bottom: auto; top: 50%; width: 1.4rem; height: 2px; }
  .mapa-rama { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.4rem; }
  .mapa-rama-chica { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mapa > .mapa-fila:not(.mapa-lineal) { max-width: 50%; }
  .correo summary { grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: baseline; gap: 1rem; }
}
@media (min-width: 1000px) {
  .testimonios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .firma i { animation: none; transform: translateY(6px); }
}

/* El botón flotante no tapa el titular: aparece tras los primeros 300 px de scroll. */
@supports (animation-timeline: scroll()) {
  .wa-flotante { animation: waEntra linear both; animation-timeline: scroll(); animation-range: 0 300px; }
  @keyframes waEntra { from { opacity: 0; transform: scale(.6); pointer-events: none; } to { opacity: 1; transform: none; } }
}

/* El botón flotante se aparta mientras hay un botón de compra o la tarjeta en pantalla (crítica de Fase 2). */
.wa-flotante { transition: opacity .2s; }
body.cta-visible .wa-flotante { opacity: 0 !important; pointer-events: none; }
.bumps-bloque { margin-top: 1.4rem; }