/* ============================================================
   PTA · Estilos v4 — papel/facturas + energía + animación
   Fondo de facturas arrugadas reactivo al cursor, separadores
   rasgados, tickets con picos, FAQ-papel, carruseles.
   Mobile-first · GSAP para scroll/cursor (carga progresiva).
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  font-family: var(--fuente-cuerpo);
  font-size: var(--fs-cuerpo);
  line-height: var(--lh-normal);
  color: var(--pta-texto);
  background: var(--pta-crema);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* ---------- Iconos flotantes laterales (parallax con scroll) ---------- */
/* z-index 4: por encima de los fondos de sección (main/footer=2, rasgado=3) y por
   debajo del header (60), WhatsApp (50) y overlays (200). Así pasan por delante
   de los fondos de calculadora/KPIs/FAQ en vez de quedar ocultos detrás. */
.flotantes { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.flotante { position: absolute; opacity: .94; will-change: transform; filter: drop-shadow(0 14px 26px rgba(22,30,38,.20)); }
.flotante img { display: block; width: 100%; height: auto; animation: temblor 3.4s ease-in-out infinite; transform-origin: center; }
.flotante:nth-child(even) img { animation-duration: 4.2s; animation-delay: -1.2s; }
@keyframes temblor { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
@media (max-width: 820px) { .flotantes { display: none; } }
@media (prefers-reduced-motion: reduce) { .flotante img { animation: none; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, h4 {
  font-family: var(--fuente-display); font-weight: 700; line-height: var(--lh-apretado);
  letter-spacing: var(--tr-titular); color: var(--pta-azul); text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-medio); }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--pta-naranja); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--pta-azul); color: #fff; }   /* azul/blanco 12:1 (antes naranja/blanco 2.91:1) */

/* ---------- Fondo: rejilla de papel que se arruga con el cursor ---------- */
.fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--pta-crema); }
/* Imagen única que cubre el viewport: sin baldosas, sin costuras. */
.fondo__grid { position: absolute; inset: 0; background: url("../img/fondo-papel.png") center center / cover no-repeat; }
.tile { display: none; }   /* baldosas antiguas del efecto cursor (descartado) */
.fondo__wash { position: absolute; inset: 0; background: rgba(251, 246, 238, .26); }

/* contenido por encima del fondo */
.fheader, main, .footer, .wa-flotante { position: relative; z-index: 2; }

/* ---------- Layout ---------- */
.contenedor { width: 100%; max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--sp-5); }
.seccion { padding-block: clamp(64px, 9vw, 130px); position: relative; }
.seccion--panel { background: rgba(255,255,255,.55); backdrop-filter: blur(2px); }
/* Secciones sólidas con grano */
.seccion--solido { background: rgba(236, 230, 219, .62); }
.con-grano { position: relative; isolation: isolate; }
.con-grano > * { position: relative; z-index: 1; }
.con-grano::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  /* Grano estático (textura de papel, sin movimiento — retirado el vibrar por petición de Fabio). */
}
.con-grano--claro::after { mix-blend-mode: overlay; opacity: .16; }
.seccion--oscura { background: rgba(31, 41, 51, .86); color: #c7d0d9; }
.seccion--oscura h2, .seccion--oscura h3 { color: #fff; }
.centro { text-align: center; }
.medido { max-width: 720px; }
.medido.centro { margin-inline: auto; }
.texto-suave { color: var(--pta-texto-suave); }

.eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--pta-naranja-texto); margin-bottom: var(--sp-4); }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--pta-naranja); }
.eyebrow--centro { justify-content: center; }
.seccion--oscura .eyebrow { color: var(--pta-naranja-claro); }
.lede { font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem); color: var(--pta-texto-suave); margin-top: var(--sp-4); max-width: 60ch; }
.acento { color: var(--pta-naranja-oscuro); }

/* ---------- Separadores rasgados / perforación ---------- */
.rasgado { display: block; width: 100%; height: clamp(38px, 5vw, 64px); position: relative; z-index: 3; }
.rasgado--oscuro-top, .rasgado--oscuro-bot {
  background: rgba(31, 41, 51, .86);
  -webkit-mask: url("../img/rasgado-oscuro.png") center / 100% 100% no-repeat;
          mask: url("../img/rasgado-oscuro.png") center / 100% 100% no-repeat;
}
.rasgado--oscuro-top { transform: scaleY(-1); }
.perfo { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--pta-texto-suave); font-family: var(--fuente-mono); font-size: .82rem; letter-spacing: .3em; padding: var(--sp-5) 0; position: relative; z-index: 2; }
.perfo::before, .perfo::after { content: ""; height: 0; border-top: 2px dashed currentColor; flex: 1; max-width: 160px; opacity: .45; }

/* ---------- Animación (anim helper) ---------- */
.js .anim { opacity: 0; transform: translateY(var(--rise)); }

/* Capa «Papel vivo»: piezas del hero que entran orquestadas (las revela GSAP en
   app.js una sola vez). Sin GSAP quedan visibles por el fallback .js .anim. */
.js [data-hero] { will-change: transform, opacity; }

/* Fallback progresivo con CSS scroll-driven (donde haya soporte y no lo lleve GSAP):
   reveals ligados al viewport, en hilo compositor, cero JS. Solo se activa si el
   navegador soporta animation-timeline; si no, no toca nada (el JS ya cubre el caso). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .reveal-css { animation: revelaCss linear both; animation-timeline: view(); animation-range: entry 8% cover 26%; }
  }
}
@keyframes revelaCss { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }

/* Motion global OFF para quien lo pide: nada se mueve, todo se ve. */
@media (prefers-reduced-motion: reduce) {
  .js .anim { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Botones ---------- */
.btn {
  --bg: var(--pta-naranja); --fg: var(--pta-azul);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-weight: 700; font-size: 1rem; line-height: 1; padding: 16px 28px; border-radius: var(--radio-pill);
  border: 2px solid transparent; background: var(--bg); color: var(--fg); cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur), color var(--dur); white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: 90ms; }   /* "sello que se estampa" */
.btn svg { width: 18px; height: 18px; }
.btn--primario { box-shadow: var(--sombra-naranja); }
/* Hover del CTA primario: se mantiene el texto azul oscuro sobre naranja (contraste 5.07:1,
   AA) en vez de blanco sobre naranja oscuro (3.81:1, fallaba AA). Sube y crece la sombra. */
.btn--primario:hover { box-shadow: 0 20px 46px rgba(232, 122, 4, .42); }
.btn--oscuro { --bg: var(--pta-azul); --fg: #fff; }
.btn--oscuro:hover { --bg: var(--pta-azul-800); }
.btn--claro { --bg: #fff; --fg: var(--pta-azul); box-shadow: var(--sombra); }
.btn--linea { --bg: transparent; --fg: var(--pta-azul); border-color: rgba(31,41,51,.2); }
.btn--linea:hover { --bg: var(--pta-azul); --fg: #fff; }
.btn--wa { --bg: var(--pta-wa); --fg: #06351c; }
.btn--wa:hover { --bg: var(--pta-wa-oscuro); --fg: #fff; }
.btn--grande { padding: 19px 36px; font-size: 1.08rem; }
.btn--bloque { width: 100%; }
.seccion--oscura .btn--linea, .ov__panel .btn--linea, .cta-mega .btn--linea { --fg: #fff; border-color: rgba(255,255,255,.3); }

/* ---------- Header flotante ---------- */
.fheader {
  position: fixed; top: 14px; left: 50%; z-index: 60;
  width: min(1200px, calc(100% - 28px)); display: flex; align-items: center; gap: var(--sp-4);
  padding: 8px 8px 8px 18px; border-radius: var(--radio-pill);
  background: rgba(255,253,248,.78); backdrop-filter: saturate(150%) blur(16px);
  border: 1px solid rgba(31,41,51,.08); box-shadow: 0 10px 34px rgba(22,30,38,.1);
  transform: translateX(-50%);
  transition: transform .35s var(--ease), box-shadow .35s, background .35s;
}
.fheader.compacta { box-shadow: 0 14px 40px rgba(22,30,38,.16); background: rgba(255,253,248,.94); }
.fheader.oculta { transform: translateX(-50%) translateY(-130%); }
/* Pinch-zoom (móvil): app.js rellena --vv-* con la zona realmente visible y el inverso del zoom.
   Sin esto el header, al ser `fixed`, se quedaba anclado al ancho de maqueta y se salía de la
   pantalla al ampliar con dos dedos. Contra-escalar mantiene su tamaño físico de siempre.
   Ojo: aquí NO se pone transición de transform, y no por estética — Chrome no recalcula un
   `transform` cuando lo único que cambia es una var() si esa propiedad tiene transición, así
   que con transición el header se quedaría clavado mientras el dedo mueve el zoom. */
.fheader.vv-zoom {
  left: 0; top: 0; transform-origin: top left;
  transform: translate(var(--vv-x, 0px), var(--vv-y, 0px)) scale(var(--vv-s, 1));
  transition: box-shadow .35s, background .35s;
}
.fheader.vv-zoom.oculta { transform: translate(var(--vv-x, 0px), var(--vv-y, 0px)) scale(var(--vv-s, 1)) translateY(-130%); }
.fheader__logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
.fheader__logo img { height: 38px; width: auto; }

/* --- Nav con desplegables --- */
.fnav { display: none; align-items: center; gap: 0; margin-inline: auto; }
.fnav__item { position: relative; }
.fnav__link { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: .94rem; color: var(--pta-azul); padding: 9px 12px; border-radius: var(--radio-pill); transition: background var(--dur), color var(--dur); cursor: pointer; white-space: nowrap; }
.fnav__link:hover, .fnav__item.has-menu:hover > .fnav__link, .fnav__item.abierto > .fnav__link { background: rgba(31,41,51,.06); }
.fnav__caret { width: 13px; height: 13px; opacity: .55; transition: transform var(--dur) var(--ease); }
.fnav__item.has-menu:hover .fnav__caret, .fnav__item.abierto .fnav__caret { transform: rotate(180deg); }

.fmenu {
  position: absolute; top: calc(100% + 12px); left: 50%;
  min-width: 256px; padding: 8px; display: grid; gap: 2px;
  background: rgba(255,253,248,.97); backdrop-filter: saturate(150%) blur(16px);
  border: 1px solid rgba(31,41,51,.08); border-radius: var(--radio);
  box-shadow: 0 20px 48px rgba(22,30,38,.18);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(8px) scale(.98); transform-origin: top center;
  transition: opacity .2s var(--ease), transform .24s var(--ease), visibility .24s;
  z-index: 5;
}
.fmenu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }  /* puente de hover */
.fnav__item.has-menu:hover > .fmenu,
.fnav__item.has-menu:focus-within > .fmenu,
.fnav__item.abierto > .fmenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
.fmenu a { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 11px; color: var(--pta-azul); transition: background var(--dur), transform var(--dur) var(--ease); }
.fmenu a:hover { background: rgba(232,122,4,.10); }
.fmenu__ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; background: #FFF1E0; color: var(--pta-naranja-oscuro); }
.fmenu__ic svg { width: 20px; height: 20px; }
.fmenu__ic--seg { background: var(--pta-ahorro-bg); color: var(--pta-ahorro); }
.fmenu__ic--form { background: #E9EDF4; color: var(--pta-azul); }
.fmenu__ic--b2b { background: #E8EEF6; color: #2C5AA0; }
.fmenu__tx b { display: block; font-size: .95rem; font-weight: 700; line-height: 1.15; }
.fmenu__tx small { display: block; font-size: .78rem; color: var(--pta-texto-suave); margin-top: 2px; }
.fmenu--simple { min-width: 210px; }
.fmenu--simple a { padding: 10px 13px; font-weight: 600; }

/* El contenido del header TIENE que caber dentro de la píldora. Por defecto un elemento flex no
   se encoge por debajo de su contenido (`min-width:auto`), así que el botón «Ahorrar en mi
   factura» empujaba el burger fuera del contenedor: a 375 px se salían 33 px. Ahora el botón sí
   cede y, si aun así no cabe, corta el texto con puntos suspensivos; el burger nunca se encoge. */
.fheader__cta { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.fheader__cta .btn { padding: 11px 16px; font-size: .9rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fheader__logo { min-width: 0; }
.fheader__logo img { max-width: 100%; }
.fheader .burger, .fheader .icon-btn { flex: 0 0 auto; }
.fheader__cta--vender { display: none; }

/* Móvil estrecho: antes de llegar a los puntos suspensivos, apretamos lo prescindible
   (hueco lateral, separaciones, logo y tamaño del botón). Así en un móvil normal el texto
   se sigue leyendo entero. */
@media (max-width: 430px) {
  .fheader { padding: 8px 8px 8px 12px; gap: var(--sp-3); }
  .fheader__logo img { height: 32px; }
  .fheader__cta { gap: 6px; }
  .fheader__cta .btn { padding: 10px 12px; font-size: .84rem; }
  .burger { width: 40px; height: 40px; }
}
@media (max-width: 360px) {
  .fheader__logo img { height: 28px; }
  .fheader__cta .btn { padding: 9px 10px; font-size: .8rem; }
}
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--pta-azul); color: #fff; border: 0; cursor: pointer; transition: transform var(--dur) var(--ease); }
.icon-btn:hover { transform: translateY(-2px); }
.icon-btn--wa { background: var(--pta-wa); color: #06351c; }
.icon-btn svg { width: 20px; height: 20px; }
.burger { display: inline-flex; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; background: var(--pta-azul); border-radius: 50%; border: 0; cursor: pointer; }
.burger span { width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mnav { position: fixed; inset: 0; z-index: 55; background: var(--pta-azul); color: #fff; padding: 88px var(--sp-5) var(--sp-7); display: none; flex-direction: column; gap: var(--sp-5); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mnav.abierto { display: flex; }
.mnav__group { display: grid; gap: 1px; }
.mnav__title { font-family: var(--fuente-mono); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--pta-naranja-claro); margin-bottom: var(--sp-2); }
.mnav__group a { font-family: var(--fuente-display); font-weight: 600; font-size: 1.3rem; color: #dfe5ea; padding: 7px 0; }
.mnav__group a:hover { color: #fff; }
.mnav__solo { font-family: var(--fuente-display); font-weight: 700; font-size: 1.5rem; color: #fff; padding: var(--sp-3) 0; border-block: 1px solid rgba(255,255,255,.12); }
.mnav__cta { display: grid; gap: var(--sp-3); margin-top: var(--sp-2); }
.mnav .btn--linea { --fg: #fff; border-color: rgba(255,255,255,.32); }

/* ---------- HERO ---------- */
.hero { position: relative; padding-top: calc(var(--header-h) + clamp(40px, 8vw, 90px)); padding-bottom: clamp(48px, 8vw, 96px); text-align: center; }
.hero__inner { position: relative; z-index: 2; max-width: 940px; margin-inline: auto; }
.hero__badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.8); border: 1px solid var(--pta-borde); border-radius: var(--radio-pill); padding: 8px 16px; font-size: var(--fs-pequeno); font-weight: 600; color: var(--pta-azul); box-shadow: var(--sombra-sm); margin-bottom: var(--sp-5); }
.hero__badge .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--pta-ahorro); box-shadow: 0 0 0 4px rgba(30,158,90,.18); }
.hero h1 { font-size: var(--fs-display); }
.hero h1 .resalte { color: var(--pta-naranja-oscuro); }
.hero__sub { font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem); color: var(--pta-texto-suave); margin: var(--sp-5) auto 0; max-width: 40ch; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-7); }
.hero__sellos { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); justify-content: center; margin-top: var(--sp-6); padding: 0; }
.hero__sellos li { list-style: none; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: var(--fs-pequeno); color: var(--pta-azul); }
.hero__sellos .tick { color: var(--pta-ahorro); flex: 0 0 auto; }

/* ---------- SERVICIOS (tickets recibo, 100% CSS) ---------- */
.tickets { display: grid; gap: var(--sp-7); margin-top: var(--sp-8); }
.ticket { display: flex; flex-direction: column; }
.ticket__paper {
  --z: 13px;                               /* tamaño del pico */
  position: relative; background: var(--pta-papel);
  padding: clamp(26px, 3vw, 36px) clamp(22px, 2.6vw, 30px) clamp(26px, 3vw, 34px);
  display: flex; flex-direction: column; flex: 1; min-height: 360px;
  filter: drop-shadow(0 14px 26px rgba(22, 30, 38, .12));
  transition: transform var(--dur) var(--ease);
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--z) 51% repeat-x,
    conic-gradient(from 135deg at top,    #0000, #000 1deg 89deg, #0000 90deg) top    / var(--z) 51% repeat-x;
          mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--z) 51% repeat-x,
    conic-gradient(from 135deg at top,    #0000, #000 1deg 89deg, #0000 90deg) top    / var(--z) 51% repeat-x;
}
.ticket__paper { transition: transform var(--dur-media) var(--ease-papel), filter var(--dur-media) var(--ease); }
.ticket:hover .ticket__paper { transform: translateY(-6px) rotate(-.6deg); filter: drop-shadow(0 22px 40px rgba(22, 30, 38, .18)); }   /* papel que se despega de la mesa */
.ticket__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.ticket__marca { font-family: var(--fuente-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--pta-texto-suave); }
.ticket__ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #FFF1E0; color: var(--pta-naranja-oscuro); }
.ticket__ico--seg { background: var(--pta-ahorro-bg); color: var(--pta-ahorro); }
.ticket__ico--form { background: #E9EDF4; color: var(--pta-azul); }
.ticket__ico--b2b { background: #E8EEF6; color: #2C5AA0; }
.ticket h3 { margin: var(--sp-4) 0 var(--sp-2); }
.ticket__desc { color: var(--pta-texto-suave); font-size: var(--fs-pequeno); }
.ticket__lineas { font-family: var(--fuente-mono); font-size: .8rem; margin: var(--sp-4) 0; padding: var(--sp-4) 0; border-block: 2px dashed #d9cdbb; display: grid; gap: 9px; color: var(--pta-texto); }
.ticket__lineas div { display: flex; justify-content: space-between; gap: var(--sp-3); }
.ticket__lineas .ok { color: var(--pta-ahorro); font-weight: 700; }
.ticket__total { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.ticket__total .et { font-family: var(--fuente-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--pta-texto-suave); }
.ticket__total .val { font-family: var(--fuente-display); font-weight: 800; font-size: 1.2rem; color: var(--pta-azul); line-height: 1.1; }
.ticket__total::after {                    /* código de barras */
  content: ""; display: block; height: 30px; margin-top: var(--sp-4);
  background: repeating-linear-gradient(90deg, var(--pta-azul) 0 2px, transparent 2px 3px, var(--pta-azul) 3px 6px, transparent 6px 7px, var(--pta-azul) 7px 8px, transparent 8px 11px);
  opacity: .9;
}
.ticket .btn { margin-top: var(--sp-5); }
/* base de "enrollado" para el efecto scroll (si hay JS) */
.js .ticket.enrolla { clip-path: inset(0 0 100% 0); }

/* ---------- CALCULADORA (subir factura + IA) ---------- */
.calc-sube { max-width: 680px; margin: var(--sp-8) auto 0; background: #fff; border: 1px solid var(--pta-borde); border-radius: var(--radio-lg); box-shadow: var(--sombra-fuerte); padding: clamp(22px, 3.5vw, 40px); position: relative; overflow: hidden; }
.calc-sube__chip { position: absolute; top: 18px; right: 18px; font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--pta-ahorro); background: var(--pta-ahorro-bg); padding: 5px 11px; border-radius: var(--radio-pill); }
.dropzona-xl { border: 2px dashed var(--pta-naranja); border-radius: var(--radio); background: linear-gradient(180deg, #FFF8EF, #FFF2E1); padding: clamp(28px, 5vw, 52px) var(--sp-4); text-align: center; cursor: pointer; transition: background var(--dur), border-color var(--dur), transform var(--dur) var(--ease); }
.dropzona-xl:hover { background: #FFEAD0; transform: translateY(-2px); }
.dropzona-xl .ico-sube { width: 56px; height: 56px; margin: 0 auto var(--sp-3); color: var(--pta-naranja-oscuro); }
.dropzona-xl b { font-family: var(--fuente-display); font-weight: 700; font-size: 1.35rem; color: var(--pta-azul); display: block; }
.dropzona-xl .ayuda { color: var(--pta-texto-suave); font-size: var(--fs-pequeno); margin-top: 4px; }
.calc-sube__priv { display: flex; gap: 9px; align-items: flex-start; justify-content: center; font-size: var(--fs-pequeno); color: var(--pta-texto-suave); margin-top: var(--sp-4); }
.calc-sube__priv svg { color: var(--pta-ahorro); flex: 0 0 auto; }
/* estado analizando */
.calc-estado { display: none; text-align: center; padding: var(--sp-6) 0; }
.calc-estado.activo { display: block; }
.calc-spin { width: 54px; height: 54px; margin: 0 auto var(--sp-4); border-radius: 50%; border: 4px solid var(--pta-borde); border-top-color: var(--pta-naranja); animation: girar .9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.calc-resultado { display: none; text-align: center; padding: var(--sp-4) 0; }
.calc-resultado.activo { display: block; }
.calc-resultado .grande { font-family: var(--fuente-display); font-weight: 800; font-size: clamp(2.4rem,1.6rem+3vw,3.4rem); color: var(--pta-ahorro); line-height: 1; }
.calc-oculto { display: none !important; }

/* Calculadora a 2 columnas: subir factura + ejemplos rotativos */
.calc2 { display: grid; gap: var(--sp-6); margin-top: var(--sp-8); align-items: stretch; }
.calc2 .calc-sube { max-width: none; margin: 0; }
@media (min-width: 880px) { .calc2 { grid-template-columns: 1.05fr .95fr; } }
.calc-ej { background: #fff; border: 1px solid var(--pta-borde); border-radius: var(--radio-lg); box-shadow: var(--sombra); padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; }
.calc-ej__tit { font-family: var(--fuente-display); font-weight: 700; font-size: 1.15rem; color: var(--pta-azul); margin-bottom: var(--sp-4); }
.calc-ej__card { background: var(--pta-fondo-gris); border-radius: var(--radio); padding: var(--sp-5); flex: 1; display: flex; flex-direction: column; gap: var(--sp-4); justify-content: center; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.calc-ej__card.cambiando { opacity: 0; transform: translateY(10px); }
.calc-ej__top { display: flex; align-items: center; gap: var(--sp-3); }
.calc-ej__avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; background: repeating-linear-gradient(45deg, #e3e8ed, #e3e8ed 7px, #eff2f5 7px, #eff2f5 14px); }
.calc-ej__top b { font-family: var(--fuente-display); color: var(--pta-azul); display: block; font-size: 1.02rem; }
.calc-ej__estrellas { color: var(--pta-aviso); font-size: .82rem; letter-spacing: 1px; }
.calc-ej__ahorro { font-family: var(--fuente-display); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); color: var(--pta-texto); }
.calc-ej__ahorro b { font-weight: 800; font-size: 1.35em; color: var(--pta-ahorro); }
.calc-ej__barra { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-pequeno); color: var(--pta-texto-suave); }
.calc-ej__barra b { color: var(--pta-azul); }
.calc-ej__ahora b { color: var(--pta-ahorro); }
.calc-ej__flecha { color: var(--pta-naranja); font-weight: 800; }
.calc-ej__cia { font-size: var(--fs-pequeno); color: var(--pta-texto-suave); }
.calc-ej__cia b { color: var(--pta-azul); }
.calc-ej__dots { display: flex; gap: 6px; justify-content: center; margin-top: var(--sp-4); }
.calc-ej__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--pta-borde); transition: background .2s; }
.calc-ej__dots i.on { background: var(--pta-naranja); }

/* ---------- Carrusel (marquee) ---------- */
.marquee { position: relative; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee__track { display: flex; gap: var(--sp-5); width: max-content; animation: desliz var(--vel, 36s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes desliz { to { transform: translateX(-50%); } }
.comercial-logo { flex: 0 0 auto; height: 64px; min-width: 150px; padding: 0 var(--sp-5); display: grid; place-items: center; background: #fff; border: 1px solid var(--pta-borde); border-radius: var(--radio); font-family: var(--fuente-display); font-weight: 700; color: var(--pta-texto-suave); box-shadow: var(--sombra-sm); }
.marquee--testi .marquee__track { --vel: 60s; }

/* testimonios (tarjetas del carrusel) */
.testi { flex: 0 0 min(360px, 80vw); background: #fff; border: 1px solid var(--pta-borde); border-radius: var(--radio-lg); padding: var(--sp-6); box-shadow: var(--sombra-sm); display: flex; flex-direction: column; gap: var(--sp-3); }
.testi__ahorro { font-family: var(--fuente-display); font-weight: 800; font-size: 1.9rem; color: var(--pta-ahorro); line-height: 1; }
.testi__ahorro span { font-size: .85rem; color: var(--pta-texto-suave); font-family: var(--fuente-cuerpo); font-weight: 600; }
.testi blockquote { color: var(--pta-texto); font-size: .98rem; }
.testi__quien { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; }
.testi__quien small { color: var(--pta-texto-suave); }
.estrellitas { color: var(--pta-estrella); letter-spacing: 1px; font-size: .9rem; }
.ph-avatar { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; background: repeating-linear-gradient(45deg, #e3e8ed, #e3e8ed 7px, #eff2f5 7px, #eff2f5 14px); }

/* ---------- EQUIPO (polaroids) ---------- */
.equipo { display: grid; gap: var(--sp-6); margin-top: var(--sp-8); }
.pola { background: #fff; border-radius: 6px; padding: 14px 14px 0; box-shadow: var(--sombra); position: relative; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.pola:nth-child(odd) { rotate: -2.2deg; }
.pola:nth-child(even) { rotate: 1.8deg; }
.pola:hover { rotate: 0deg; transform: translateY(-6px); box-shadow: var(--sombra-fuerte); z-index: 2; }
.pola::before { content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 78px; height: 22px; background: rgba(242,183,5,.42); box-shadow: 0 1px 4px rgba(0,0,0,.08); border-radius: 1px; }
.pola__foto { aspect-ratio: 4/4.4; border-radius: 3px; background: repeating-linear-gradient(45deg, #e7ebf0, #e7ebf0 8px, #eff2f6 8px, #eff2f6 16px); display: grid; place-items: center; color: var(--pta-texto-suave); font-size: var(--fs-micro); text-align: center; padding: var(--sp-3); }
.pola__cuerpo { padding: var(--sp-3) 4px var(--sp-5); }
.pola__nombre { font-family: var(--fuente-mano); font-weight: 700; font-size: 1.9rem; color: var(--pta-azul); line-height: .9; }
.pola__rol { font-family: var(--fuente-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--pta-naranja-oscuro); margin: 6px 0 8px; }
.pola__frase { font-size: var(--fs-pequeno); color: var(--pta-texto-suave); }
.equipo-nota { text-align: center; margin-top: var(--sp-6); font-size: var(--fs-pequeno); }

/* ---------- Equipo: foto + chinchetas ---------- */
.equipo-foto { position: relative; margin: var(--sp-8) auto 0; max-width: 1000px; border-radius: var(--radio-lg); overflow: visible; }
.equipo-foto > img { width: 100%; display: block; border-radius: var(--radio-lg); box-shadow: var(--sombra-fuerte); }
.pin { position: absolute; transform: translate(-50%, -50%); background: none; border: 0; padding: 0; cursor: pointer; z-index: 2; }
.pin__dot { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--pta-naranja); border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .45); animation: pin-pulso 2.4s ease-out infinite; }
@keyframes pin-pulso { 0% { box-shadow: 0 0 0 0 rgba(232,122,4,.55); } 70% { box-shadow: 0 0 0 16px rgba(232,122,4,0); } 100% { box-shadow: 0 0 0 0 rgba(232,122,4,0); } }
.pin__card { position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px); width: 232px; background: #fff; border-radius: var(--radio); box-shadow: var(--sombra-fuerte); padding: var(--sp-4); text-align: left; opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); pointer-events: none; z-index: 4; }
.pin__card::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: #fff; }
.pin:hover .pin__card, .pin:focus-visible .pin__card, .pin.activo .pin__card { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.pin:hover, .pin.activo { z-index: 5; }
.pin__card b { font-family: var(--fuente-display); font-size: 1.15rem; color: var(--pta-azul); display: block; }
.pin__rol { display: block; font-family: var(--fuente-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--pta-naranja-oscuro); margin: 2px 0 6px; }
.pin__frase { display: block; font-size: var(--fs-pequeno); color: var(--pta-texto-suave); margin-bottom: var(--sp-3); }
.pin__cta { display: flex; gap: 8px; }
.pin__cta .btn { padding: 8px 12px; font-size: .8rem; flex: 1; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-4); }
.kpi { text-align: center; }
.kpi__num { font-family: var(--fuente-display); font-weight: 800; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); color: #fff; line-height: 1; }
.kpi__num .u { color: var(--pta-naranja-claro); }
.kpi__label { font-size: var(--fs-pequeno); color: #c2ccd6; margin-top: var(--sp-2); }   /* subido de #9aa6b2 (3.87:1) a ≥4.5:1 sobre sección oscura */
.kpi__estrellas { color: var(--pta-aviso); letter-spacing: 2px; }
/* KPIs fuera de sección oscura: el número blanco sería invisible sobre crema → azul. */
.seccion--solido .kpi__num, .seccion--gris .kpi__num, .seccion:not(.seccion--oscura) .kpi__num { color: var(--pta-azul); }
.seccion--solido .kpi__num .u, .seccion--gris .kpi__num .u, .seccion:not(.seccion--oscura) .kpi__num .u { color: var(--pta-naranja-oscuro); }
.seccion--solido .kpi__label, .seccion--gris .kpi__label, .seccion:not(.seccion--oscura) .kpi__label { color: var(--pta-texto-suave); }

/* ---------- FAQ (3 grupos, papel desplegable) ---------- */
.faq-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-6); }
.faq-tab { font-weight: 700; font-size: .95rem; color: var(--pta-texto-suave); background: #fff; border: 1px solid var(--pta-borde); border-radius: var(--radio-pill); padding: 11px 20px; cursor: pointer; transition: all var(--dur); }
.faq-tab:hover { color: var(--pta-azul); }
.faq-tab.activo { background: var(--pta-azul); color: #fff; border-color: var(--pta-azul); }
.faq-grupo { display: none; max-width: var(--ancho-texto); margin: var(--sp-7) auto 0; }
.faq-grupo.activo { display: grid; gap: var(--sp-3); }
/* Cambio de tópico: el grupo entrante aparece con un fundido + leve subida. */
.js .faq-grupo.activo { animation: faqGrupoIn .45s var(--ease) both; }
.js .faq-grupo.activo .faq__item { animation: faqItemIn .5s var(--ease) both; }
.js .faq-grupo.activo .faq__item:nth-child(2) { animation-delay: .05s; }
.js .faq-grupo.activo .faq__item:nth-child(3) { animation-delay: .1s; }
.js .faq-grupo.activo .faq__item:nth-child(4) { animation-delay: .15s; }
@keyframes faqGrupoIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes faqItemIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Cada pregunta = una hoja de papel. Textura de tamaño FIJO anclada arriba:
   al desplegar no se reescala ni "se mueve" el fondo (bug anterior con cover). */
.faq__item { position: relative; border: 1px solid #e7ddcb; border-radius: 8px; overflow: hidden; box-shadow: var(--sombra-sm);
  background-color: var(--pta-papel);
  background-image: linear-gradient(rgba(255,253,248,.5), rgba(255,253,248,.5)), url("../img/fondo-papel.png");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center top;
  background-size: cover, 900px auto;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.faq__item[open] { box-shadow: var(--sombra); border-color: #ddcfb6; }
.faq__item::after { content: ""; position: absolute; top: 0; right: 0; border-width: 0 18px 18px 0; border-style: solid; border-color: #efe3cd #fff; z-index: 1; }  /* esquina doblada */
.faq__item summary { list-style: none; cursor: pointer; padding: var(--sp-5); font-family: var(--fuente-display); font-weight: 700; font-size: 1.08rem; color: var(--pta-azul); display: flex; justify-content: space-between; gap: var(--sp-4); align-items: center; transition: color var(--dur) var(--ease); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--pta-naranja-oscuro); }
.faq__item .mas { flex: 0 0 auto; width: 24px; height: 24px; position: relative; }
.faq__item .mas::before, .faq__item .mas::after { content: ""; position: absolute; inset: 50% 3px auto; height: 2px; background: var(--pta-naranja-oscuro); transform-origin: center; transition: transform .32s var(--ease); }
.faq__item .mas::after { transform: rotate(90deg); }
.faq__item[open] .mas::before { transform: rotate(180deg); }
.faq__item[open] .mas::after { transform: rotate(0); }
/* desplegado tipo papel: el JS anima la altura de .faq__wrap (0 ↔ contenido). */
.faq__wrap { overflow: hidden; height: 0; transition: height .4s var(--ease); will-change: height; }
.faq__item[open] .faq__wrap { height: auto; }   /* estado final y fallback sin JS */
.faq__a { overflow: hidden; }
.faq__a p { padding: 0 var(--sp-5) var(--sp-5); color: var(--pta-texto-suave); opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--ease) .08s, transform .3s var(--ease) .08s; }
.faq__item[open] .faq__a p { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .faq-grupo.activo, .js .faq-grupo.activo .faq__item { animation: none; }
  .faq__wrap, .faq__a p, .faq__item .mas::before, .faq__item .mas::after { transition: none; }
}

/* ---------- CTA mega ---------- */
.cta-mega { position: relative; overflow: hidden; border-radius: var(--radio-lg); min-height: 440px; display: grid; place-items: center; text-align: center; padding: clamp(48px, 8vw, 110px) var(--sp-5); color: #fff; }
.cta-mega__bg { position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(15,21,27,.5), rgba(15,21,27,.78)), url("../img/equipo-oficina.jpg") center / cover no-repeat; }
.cta-mega__facturas { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.cta-mega__facturas img { position: absolute; width: clamp(120px, 16vw, 220px); opacity: .14; filter: grayscale(.4) brightness(1.5); }
.cta-mega__nota { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--fuente-mono); font-size: var(--fs-micro); color: rgba(255,255,255,.6); background: rgba(0,0,0,.25); padding: 5px 10px; border-radius: 6px; }
.cta-mega__inner { position: relative; z-index: 2; max-width: 720px; }
.cta-mega h2 { color: #fff; font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4rem); }
.cta-mega p { color: #d8dee4; max-width: 46ch; margin: var(--sp-4) auto var(--sp-6); font-size: 1.1rem; }
.cta-mega__acc { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: inline-flex; align-items: center; gap: 10px; background: var(--pta-wa); color: #06351c; font-weight: 800; padding: 13px 18px; border-radius: var(--radio-pill); box-shadow: 0 14px 32px rgba(37,211,102,.42); transition: transform var(--dur) var(--ease); }
.wa-flotante:hover { transform: translateY(-2px) scale(1.02); }
.wa-flotante svg { width: 24px; height: 24px; }
.wa-flotante .txt { display: none; }

/* ---------- Footer ---------- */
.footer { background: var(--pta-azul-950); color: #93a0ac; padding-block: var(--sp-7) var(--sp-5); font-size: var(--fs-pequeno); }
.footer h4 { color: #fff; font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.footer a:hover { color: #fff; }
.footer__top { display: grid; gap: var(--sp-6); }
.footer__brand .fheader__logo img { height: 40px; }
.footer__brand p { max-width: 36ch; color: #aeb8c2; margin-top: var(--sp-3); line-height: 1.5; }
.footer__social { display: flex; gap: 9px; margin-top: var(--sp-4); }
.footer__social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #cdd6df; transition: background var(--dur), color var(--dur), transform var(--dur) var(--ease); }
.footer__social a:hover { background: var(--pta-naranja); color: var(--pta-azul); transform: translateY(-2px); }
.footer__social a.footer__social--wa:hover { background: var(--pta-wa); color: #06351c; }
.footer__social svg { width: 18px; height: 18px; }
.footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.footer ul { list-style: none; padding: 0; display: grid; gap: 7px; }
.footer__cols a { word-break: break-word; }
.footer__legal { border-top: 1px solid rgba(255,255,255,.1); margin-top: var(--sp-6); padding-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.footer__legal .datos { color: #6f7d89; line-height: 1.6; }
.footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* ---------- Overlays / formularios full-screen ---------- */
.ov { position: fixed; inset: 0; z-index: 200; display: none; }
.ov.abierto { display: block; }
.ov__fondo { position: absolute; inset: 0; background: rgba(15,21,27,.55); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; }
.ov.abierto .ov__fondo { opacity: 1; }
.ov__panel { position: absolute; inset: 0; background: var(--pta-blanco); overflow-y: auto; transform: translateY(20px); opacity: 0; transition: transform .4s var(--ease), opacity .4s; }
.ov.abierto .ov__panel { transform: none; opacity: 1; }
.ov__cerrar { position: fixed; top: 18px; right: 18px; z-index: 3; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--pta-azul); color: #fff; cursor: pointer; display: grid; place-items: center; }
.ov__cerrar svg { width: 22px; height: 22px; }
.ov__grid { min-height: 100%; display: grid; }
.ov__lado { display: none; background: var(--pta-azul); color: #cdd6df; padding: var(--sp-9) var(--sp-7); }
.ov__lado--vender { background: radial-gradient(70% 90% at 100% 0, var(--pta-azul-800), var(--pta-azul-950)); }
.ov__lado h2 { color: #fff; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem); }
.ov__lado .lede { color: #aeb8c2; }
.ov__lado .bullets { list-style: none; padding: 0; margin-top: var(--sp-6); display: grid; gap: var(--sp-4); }
.ov__lado .bullets li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.ov__lado .bullets .tick { color: var(--pta-naranja-claro); flex: 0 0 auto; margin-top: 3px; }
.ov__form { padding: var(--sp-9) var(--sp-5); display: flex; align-items: center; }
.ov__form-inner { width: 100%; max-width: 460px; margin-inline: auto; }
.ov__form .eyebrow { margin-bottom: var(--sp-3); }
.opciones { display: grid; gap: var(--sp-3); margin: var(--sp-4) 0; }
.opcion { display: flex; gap: var(--sp-3); align-items: center; padding: 15px 16px; border: 2px solid var(--pta-borde); border-radius: var(--radio); cursor: pointer; transition: border-color var(--dur), background var(--dur); font-weight: 600; }
.opcion:hover { border-color: var(--pta-naranja); }
.opcion input { accent-color: var(--pta-naranja); width: 18px; height: 18px; }
.opcion:has(input:checked) { border-color: var(--pta-naranja); background: #FFF7EE; }
.campo { margin-bottom: var(--sp-4); }
.campo label { display: block; font-weight: 700; font-size: var(--fs-pequeno); color: var(--pta-azul); margin-bottom: 6px; }
.campo input, .campo select { width: 100%; padding: 14px 15px; border: 1px solid var(--pta-borde); border-radius: var(--radio-sm); font: inherit; background: #fff; color: var(--pta-texto); transition: border-color var(--dur), box-shadow var(--dur); }
.campo input:focus, .campo select:focus { border-color: var(--pta-naranja); outline: none; box-shadow: 0 0 0 3px rgba(232,122,4,.16); }
.dropzona { border: 2px dashed var(--pta-naranja); border-radius: var(--radio); background: linear-gradient(180deg, #FFF8EF, #FFF2E1); padding: var(--sp-6) var(--sp-4); text-align: center; cursor: pointer; transition: background var(--dur); margin-bottom: var(--sp-4); }
.dropzona:hover { background: #FFEAD0; }
.dropzona svg { width: 40px; height: 40px; margin: 0 auto var(--sp-2); color: var(--pta-naranja-oscuro); }
.dropzona b { font-family: var(--fuente-display); font-weight: 700; color: var(--pta-azul); display: block; }
.rgpd { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-pequeno); color: var(--pta-texto-suave); margin: var(--sp-3) 0 var(--sp-5); }
.rgpd input { margin-top: 3px; }
.rgpd a { color: var(--pta-naranja-oscuro); text-decoration: underline; }

/* ---------- Formularios multipaso (dentro de los overlays) ---------- */
.ov__panel--ms { display: flex; }
.ovms { position: relative; width: 100%; min-height: 100%; display: flex; flex-direction: column; }
.ovms__bar { position: sticky; top: 0; height: 4px; background: var(--pta-borde-sutil); z-index: 4; }
.ovms__bar-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pta-naranja), var(--pta-naranja-claro)); transition: width .4s var(--ease); }
.ovms__head { position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); }
.ovms__back { border: 0; background: none; cursor: pointer; font-weight: 600; color: var(--pta-texto-suave); padding: 8px 12px 8px 8px; border-radius: var(--radio-pill); display: inline-flex; align-items: center; gap: 5px; transition: background var(--dur), color var(--dur); }
.ovms__back[hidden] { display: none; }   /* gana al display:inline-flex de arriba */
.ovms__back:hover { background: rgba(31,41,51,.06); color: var(--pta-azul); }
.ovms__back svg { width: 18px; height: 18px; }
/* Contador SIEMPRE centrado respecto al overlay, haya o no botón "Atrás". */
.ovms__count { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-family: var(--fuente-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--pta-texto-suave); }
.ovms__close { margin-left: auto; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--pta-fondo-gris); color: var(--pta-azul); cursor: pointer; display: grid; place-items: center; transition: background var(--dur); }
.ovms__close:hover { background: var(--pta-borde); }
.ovms__close svg { width: 20px; height: 20px; }
.ovms__view { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 560px; margin-inline: auto; padding: var(--sp-4) var(--sp-5) var(--sp-9); }
.ms-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.ms-paso { border: 0; padding: 0; margin: 0; min-width: 0; }
.ms-q { font-family: var(--fuente-display); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem); line-height: 1.1; letter-spacing: var(--tr-titular); color: var(--pta-azul); padding: 0; }
.ms-help { color: var(--pta-texto-suave); margin-top: var(--sp-3); font-size: var(--fs-pequeno); }
.ms-campo { margin-top: var(--sp-6); }

.ms-opts { display: grid; gap: var(--sp-3); }
.ms-opt { text-align: left; font: inherit; font-weight: 600; font-size: 1.05rem; color: var(--pta-azul); background: #fff; border: 2px solid var(--pta-borde); border-radius: var(--radio); padding: 16px 18px; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; transition: border-color var(--dur), background var(--dur), transform var(--dur) var(--ease), box-shadow var(--dur); }
.ms-opt:hover { border-color: var(--pta-naranja); transform: translateY(-1px); box-shadow: var(--sombra-sm); }
.ms-opt.sel { border-color: var(--pta-naranja); background: #FFF7EE; box-shadow: 0 0 0 3px rgba(232,122,4,.14); }
.ms-opt--multi::before { content: ""; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--pta-borde); flex: 0 0 auto; transition: background var(--dur), border-color var(--dur); }
.ms-opt--multi.sel::before { background: var(--pta-naranja); border-color: var(--pta-naranja); box-shadow: inset 0 0 0 3px #fff; }

.ms-field { margin-bottom: var(--sp-4); }
.ms-field label { display: block; font-weight: 700; font-size: var(--fs-pequeno); color: var(--pta-azul); margin-bottom: 6px; }
.ms-input { width: 100%; padding: 15px 16px; border: 2px solid var(--pta-borde); border-radius: var(--radio-sm); font: inherit; font-size: 1.1rem; background: #fff; color: var(--pta-texto); transition: border-color var(--dur), box-shadow var(--dur); }
.ms-input:focus { border-color: var(--pta-naranja); outline: none; box-shadow: 0 0 0 3px rgba(232,122,4,.16); }
textarea.ms-input { resize: vertical; min-height: 110px; }
.ms-next { margin-top: var(--sp-5); }

.ms-rgpd { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-pequeno); color: var(--pta-texto-suave); margin-top: var(--sp-5); }
.ms-rgpd input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--pta-naranja); flex: 0 0 auto; }
.ms-rgpd a { color: var(--pta-naranja-oscuro); text-decoration: underline; }
.ms-mkt { margin-top: var(--sp-3); }   /* casilla marketing agrupada bajo la de RGPD */
.ms-error { color: var(--pta-alerta); font-size: var(--fs-pequeno); font-weight: 600; margin-top: var(--sp-3); display: none; }
.ms-error.on { display: block; }

.ms-drop { border: 2px dashed var(--pta-naranja); border-radius: var(--radio); background: linear-gradient(180deg, #FFF8EF, #FFF2E1); padding: clamp(28px,5vw,46px) var(--sp-4); text-align: center; cursor: pointer; transition: background var(--dur), transform var(--dur) var(--ease); }
.ms-drop:hover { background: #FFEAD0; transform: translateY(-2px); }
.ms-drop.drag { background: #FFEAD0; border-style: solid; transform: translateY(-2px); }
.ms-drop svg { width: 50px; height: 50px; margin: 0 auto var(--sp-3); color: var(--pta-naranja-oscuro); }
.ms-drop b { font-family: var(--fuente-display); font-weight: 700; font-size: 1.2rem; color: var(--pta-azul); display: block; }
.ms-drop span { display: block; color: var(--pta-texto-suave); font-size: var(--fs-pequeno); margin-top: 4px; }
.ms-drop__cambiar { color: var(--pta-naranja-oscuro); font-weight: 600; margin-top: 8px; }

.ms-ok { text-align: center; }
.ms-ok__ic { width: 72px; height: 72px; margin: 0 auto var(--sp-5); border-radius: 50%; background: var(--pta-ahorro-bg); color: var(--pta-ahorro); display: grid; place-items: center; }
.ms-ok__ic svg { width: 36px; height: 36px; }
.ms-ok h2 { color: var(--pta-azul); }
.ms-ok p { color: var(--pta-texto-suave); max-width: 42ch; margin: var(--sp-3) auto var(--sp-6); }
.ms-ok__acc { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.ms-ok__acc .btn { margin: 0; }
/* "Cerrar": relleno gris suave + texto azul. El selector lleva .ov__panel para GANAR a la
   regla `.ov__panel .btn--linea { --fg:#fff }` (línea 146), que si no dejaba el texto blanco
   sobre gris claro = ilegible en la pantalla de éxito (que tiene fondo claro, no oscuro). */
.ov__panel .ms-ok__close { --bg: var(--pta-fondo-gris); --fg: var(--pta-azul); border-color: transparent; }
.ov__panel .ms-ok__close:hover { --bg: var(--pta-azul); --fg: #fff; border-color: transparent; }

@keyframes msIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes msInBack { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.ms-in { animation: msIn .34s var(--ease) both; }
.ms-in-back { animation: msInBack .34s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .ms-in, .ms-in-back { animation: none; } .ovms__bar-fill { transition: none; } }

/* ============================================================ Landings de servicio */
/* Cabecera lite (logo + 1 CTA, sin desplegables) */
/* Cabecera lite en 3 columnas: logo | título centrado | CTA (título centrado de verdad) */
.fheader--lite { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-4); }
.fheader--lite > .fheader__logo { justify-self: start; }
.fheader--lite > .fheader__titulo { justify-self: center; margin-inline: 0; }
.fheader--lite > .fheader__cta { justify-self: end; margin-left: 0; }
.fheader--lite .fheader__cta { gap: var(--sp-3); }
.lp-volver { display: none; font-weight: 600; font-size: .92rem; color: var(--pta-texto-suave); padding: 9px 12px; border-radius: var(--radio-pill); transition: background var(--dur), color var(--dur); }
.lp-volver:hover { background: rgba(31,41,51,.06); color: var(--pta-azul); }
@media (min-width: 720px) { .lp-volver { display: inline-flex; align-items: center; gap: 5px; margin-inline: auto; } }

/* Hero LP */
.lp-hero { text-align: center; padding-top: calc(var(--header-h) + clamp(30px, 6vw, 64px)); padding-bottom: clamp(36px, 6vw, 72px); }
.lp-hero__inner { position: relative; z-index: 2; max-width: 880px; margin-inline: auto; }
.lp-hero h1 { font-size: clamp(2.3rem, 1.4rem + 4vw, 4.2rem); }
.lp-hero h1 .resalte { color: var(--pta-naranja-oscuro); }
.lp-hero__sub { font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); color: var(--pta-texto-suave); margin: var(--sp-5) auto 0; max-width: 46ch; }
.lp-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-7); }
.lp-calc-hero { max-width: 640px; margin: var(--sp-8) auto 0; }
.lp-calc-hero .calc-sube { margin: 0; }

/* Antetítulo de sección centrado reutiliza .eyebrow--centro; helper de fondo claro */
.seccion--gris { background: rgba(240, 242, 245, .5); }

/* "Para quién es" — listas sí / no */
.lp-quien { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); max-width: 880px; margin-inline: auto; }
@media (min-width: 720px) { .lp-quien { grid-template-columns: 1fr 1fr; } }
.lp-quien__col { background: #fff; border: 1px solid var(--pta-borde); border-radius: var(--radio-lg); padding: clamp(22px,3vw,32px); box-shadow: var(--sombra-sm); }
.lp-quien__col h3 { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; margin-bottom: var(--sp-4); }
.lp-quien ul { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.lp-quien li { display: flex; gap: 11px; align-items: flex-start; color: var(--pta-texto); }
.lp-quien li svg { flex: 0 0 auto; margin-top: 3px; }
.lp-quien__col--si .ico { color: var(--pta-ahorro); }
.lp-quien__col--no { background: var(--pta-fondo-gris); }
.lp-quien__col--no .ico { color: var(--pta-alerta); }
.lp-quien__col--no li { color: var(--pta-texto-suave); }

/* "Cómo funciona" — pasos numerados */
.lp-pasos { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); counter-reset: paso; }
@media (min-width: 720px) { .lp-pasos { grid-template-columns: repeat(3, 1fr); } .lp-pasos--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lp-pasos--4 { grid-template-columns: repeat(4, 1fr); } }
.lp-paso { position: relative; background: var(--pta-papel); border: 1px solid var(--pta-borde); border-radius: var(--radio-lg); padding: clamp(24px,3vw,34px) clamp(22px,2.6vw,28px); box-shadow: var(--sombra-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
.lp-paso:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.lp-paso__n { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--pta-azul); color: #fff; font-family: var(--fuente-display); font-weight: 800; font-size: 1.3rem; margin-bottom: var(--sp-4); }
.lp-paso:nth-child(2) .lp-paso__n { background: var(--pta-naranja); color: var(--pta-azul); }
.lp-paso:nth-child(3) .lp-paso__n { background: var(--pta-ahorro); }
.lp-paso h3 { margin-bottom: var(--sp-2); }
.lp-paso p { color: var(--pta-texto-suave); font-size: var(--fs-pequeno); }

/* Cards (problema / beneficios / value-stack) */
.lp-cards { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); }
@media (min-width: 640px) { .lp-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .lp-cards--3 { grid-template-columns: repeat(3, 1fr); } .lp-cards--4 { grid-template-columns: repeat(4, 1fr); } }
.lp-card { background: #fff; border: 1px solid var(--pta-borde); border-radius: var(--radio-lg); padding: clamp(22px,2.6vw,30px); box-shadow: var(--sombra-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
.lp-card:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.lp-card__ico { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; background: #FFF1E0; color: var(--pta-naranja-oscuro); margin-bottom: var(--sp-4); }
.lp-card__ico svg { width: 26px; height: 26px; }
.lp-card--ahorro .lp-card__ico { background: var(--pta-ahorro-bg); color: var(--pta-ahorro); }
.lp-card--azul .lp-card__ico { background: #E9EDF4; color: var(--pta-azul); }
.lp-card h3 { font-size: 1.15rem; margin-bottom: var(--sp-2); }
.lp-card p { color: var(--pta-texto-suave); font-size: var(--fs-pequeno); }

/* Value stack (negocio "qué te montamos") */
.lp-stack { max-width: 760px; margin: var(--sp-8) auto 0; background: #fff; border: 1px solid var(--pta-borde); border-radius: var(--radio-lg); box-shadow: var(--sombra); padding: clamp(24px,3vw,40px); }
.lp-stack ul { list-style: none; padding: 0; display: grid; gap: var(--sp-4); }
.lp-stack li { display: flex; gap: var(--sp-3); align-items: flex-start; padding-bottom: var(--sp-4); border-bottom: 1px dashed var(--pta-borde); }
.lp-stack li:last-child { border-bottom: 0; padding-bottom: 0; }
.lp-stack li svg { flex: 0 0 auto; color: var(--pta-ahorro); margin-top: 2px; }
.lp-stack b { color: var(--pta-azul); display: block; }
.lp-stack span { color: var(--pta-texto-suave); font-size: var(--fs-pequeno); }

/* Caja de garantía (academy) */
.lp-garantia { max-width: 720px; margin: var(--sp-8) auto 0; background: linear-gradient(180deg, #fff, var(--pta-ahorro-bg)); border: 2px solid var(--pta-ahorro); border-radius: var(--radio-lg); padding: clamp(26px,3.4vw,42px); text-align: center; box-shadow: var(--sombra); }
.lp-garantia__sello { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--pta-ahorro); background: #fff; border: 1px solid var(--pta-ahorro); padding: 7px 15px; border-radius: var(--radio-pill); margin-bottom: var(--sp-4); }
.lp-garantia p { color: var(--pta-texto); max-width: 52ch; margin: var(--sp-3) auto 0; }

/* Fichas de equipo (landings) — placeholder de foto real */
.team { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); }
@media (min-width: 560px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .team { grid-template-columns: repeat(4, 1fr); } .team--3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-inline: auto; } }
.persona { background: #fff; border: 1px solid var(--pta-borde); border-radius: var(--radio-lg); overflow: hidden; box-shadow: var(--sombra-sm); display: flex; flex-direction: column; transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
.persona:hover { transform: translateY(-4px); box-shadow: var(--sombra-fuerte); }
.persona__foto { aspect-ratio: 1/1; background: repeating-linear-gradient(45deg, #e7ebf0, #e7ebf0 10px, #eff2f6 10px, #eff2f6 20px); display: grid; place-items: center; position: relative; overflow: hidden; }
.persona__inicial { font-family: var(--fuente-display); font-weight: 800; font-size: 3rem; color: var(--pta-azul); opacity: .5; }
.persona__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
/* Marco de foto vacío hasta que Fabio envíe las fotos (sin etiqueta "[Foto real]"). */
.persona__foto::after { content: none; }
.persona__cuerpo { padding: var(--sp-4); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.persona__nombre { font-family: var(--fuente-display); font-weight: 700; font-size: 1.2rem; color: var(--pta-azul); }
.persona__rol { font-family: var(--fuente-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--pta-naranja-oscuro); }
.persona__frase { font-size: var(--fs-pequeno); color: var(--pta-texto-suave); flex: 1; }
.persona__dato { font-size: var(--fs-micro); color: var(--pta-ahorro); font-weight: 700; }
.persona__contacto { display: flex; gap: 8px; margin-top: 4px; }
.persona__contacto a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--pta-fondo-gris); color: var(--pta-azul); transition: background var(--dur), color var(--dur); }
.persona__contacto a:hover { background: var(--pta-azul); color: #fff; }
.persona__contacto a.wa:hover { background: var(--pta-wa); color: #06351c; }
.persona__contacto svg { width: 17px; height: 17px; }
.persona--destacada { grid-column: 1 / -1; }
@media (min-width: 560px) { .persona--destacada { display: grid; grid-template-columns: 220px 1fr; align-items: stretch; } .persona--destacada .persona__foto { aspect-ratio: auto; } }

/* Selector de ramo (seguros) */
.lp-ramos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); max-width: 640px; margin: var(--sp-7) auto 0; }
@media (min-width: 640px) { .lp-ramos { grid-template-columns: repeat(4, 1fr); } }
.lp-ramo { background: #fff; border: 2px solid var(--pta-borde); border-radius: var(--radio-lg); padding: var(--sp-5) var(--sp-3); cursor: pointer; text-align: center; font: inherit; font-weight: 700; color: var(--pta-azul); display: flex; flex-direction: column; align-items: center; gap: 10px; transition: border-color var(--dur), transform var(--dur) var(--ease), box-shadow var(--dur); }
.lp-ramo:hover { border-color: var(--pta-naranja); transform: translateY(-3px); box-shadow: var(--sombra); }
.lp-ramo svg { width: 30px; height: 30px; color: var(--pta-naranja-oscuro); }

/* nota REAL: marcador visible de dato pendiente */
.real { font-family: var(--fuente-mono); font-size: var(--fs-micro); color: var(--pta-naranja-oscuro); background: #FFF1E0; padding: 1px 6px; border-radius: 5px; }

/* Cabecera lite: título/frase de la landing en el centro (sin botón Inicio) */
.fheader__titulo { margin-inline: auto; text-align: center; font-family: var(--fuente-display); font-weight: 700; font-size: 1.02rem; line-height: 1.05; color: var(--pta-azul); letter-spacing: var(--tr-titular); white-space: nowrap; }
.fheader__titulo small { display: block; font-family: var(--fuente-cuerpo); font-weight: 600; font-size: .72rem; color: var(--pta-texto-suave); letter-spacing: 0; margin-top: 2px; }
@media (max-width: 700px) { .fheader__titulo { display: none; } }

/* "Lo que incluye" — rejilla de features destacada */
.incluye { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); grid-template-columns: 1fr; }
@media (min-width: 640px) { .incluye { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .incluye--3 { grid-template-columns: repeat(3, 1fr); } .incluye--4 { grid-template-columns: repeat(4, 1fr); } }
.incluye__item { position: relative; background: #fff; border: 1px solid var(--pta-borde); border-radius: var(--radio-lg); padding: clamp(24px,3vw,32px); padding-left: clamp(28px,3.4vw,38px); box-shadow: var(--sombra-sm); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
.incluye__item:hover { transform: translateY(-5px); box-shadow: var(--sombra-fuerte); }
.incluye__item::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: var(--pta-naranja); }
.incluye__item:nth-child(4n+2)::before { background: var(--pta-ahorro); }
.incluye__item:nth-child(4n+3)::before { background: var(--pta-azul); }
.incluye__item:nth-child(4n+4)::before { background: var(--pta-naranja-claro); }
.incluye__ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, #FFF1E0, #FFE0BE); color: var(--pta-naranja-oscuro); margin-bottom: var(--sp-4); }
.incluye__item:nth-child(4n+2) .incluye__ico { background: linear-gradient(135deg, var(--pta-ahorro-bg), #CCEEDC); color: var(--pta-ahorro); }
.incluye__item:nth-child(4n+3) .incluye__ico { background: linear-gradient(135deg, #E9EDF4, #D5DDEA); color: var(--pta-azul); }
.incluye__ico svg { width: 30px; height: 30px; }
.incluye__item h3 { font-size: 1.2rem; margin-bottom: var(--sp-2); }
.incluye__item p { color: var(--pta-texto-suave); font-size: var(--fs-pequeno); }
.incluye__item .destacar { color: var(--pta-naranja-oscuro); font-weight: 700; }

/* KPIs y meta dentro de las fichas de equipo */
@media (min-width: 640px) { .team--kpi { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .team--kpi { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) {
  .team--academy { grid-template-columns: repeat(6, 1fr); }   /* [33][33][33] / [50][50] */
  .team--academy > .persona:nth-child(-n+3) { grid-column: span 2; }
  .team--academy > .persona:nth-child(n+4) { grid-column: span 3; }
  .team--negocio { grid-template-columns: repeat(3, 1fr); }   /* [33][33][33] */
}
.persona__kpis { display: flex; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3); border-top: 1px dashed var(--pta-borde); }
.persona__kpi { flex: 1; }
.persona__kpi b { display: block; font-family: var(--fuente-display); font-weight: 800; font-size: 1.1rem; color: var(--pta-ahorro); line-height: 1; }
.persona__kpi span { display: block; font-size: var(--fs-micro); color: var(--pta-texto-suave); margin-top: 3px; }
.persona__meta { font-size: var(--fs-micro); color: var(--pta-texto-suave); line-height: 1.55; }
.persona__meta b { color: var(--pta-azul); font-weight: 700; }
.persona__contacto .wa--msg::after { content: ""; }

/* Banda de CTA inline (variantes para no repetir) */
.cta-strip { margin-top: var(--sp-8); border-radius: var(--radio-lg); padding: clamp(24px,3.4vw,40px) clamp(24px,3.4vw,44px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5); position: relative; overflow: hidden; box-shadow: var(--sombra); }
.cta-strip__tx { max-width: 46ch; }
.cta-strip__tx h3 { font-size: clamp(1.3rem,1rem+1.4vw,1.85rem); color: inherit; line-height: 1.1; }
.cta-strip__tx p { margin-top: 6px; opacity: .88; }
.cta-strip .btn { flex: 0 0 auto; }
.cta-strip--naranja { background: linear-gradient(120deg, var(--pta-naranja-oscuro), var(--pta-naranja-claro)); color: #fff; }
.cta-strip--naranja h3 { color: #fff; }
.cta-strip--azul { background: radial-gradient(130% 150% at 0 0, var(--pta-azul-800), var(--pta-azul-950)); color: #cdd6df; }
.cta-strip--azul h3 { color: #fff; }
.cta-strip--papel { background: var(--pta-papel); border: 2px dashed #d9cdbb; color: var(--pta-azul); }
.cta-strip--papel .cta-strip__tx p { color: var(--pta-texto-suave); }

/* Quick-picks de producto en el hero (luz/gas) */
.lp-quick { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; align-items: center; margin-top: var(--sp-5); }
.lp-quick__et { font-weight: 600; color: var(--pta-texto-suave); font-size: var(--fs-pequeno); }
.lp-quick button { font: inherit; font-weight: 700; color: var(--pta-azul); background: #fff; border: 2px solid var(--pta-borde); border-radius: var(--radio-pill); padding: 11px 22px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: border-color var(--dur), background var(--dur), transform var(--dur) var(--ease); }
.lp-quick button:hover { border-color: var(--pta-naranja); background: #FFF7EE; transform: translateY(-2px); }
.lp-quick button svg { width: 18px; height: 18px; color: var(--pta-naranja-oscuro); }

/* ============================================================ Páginas de confianza (sobre nosotros · casos de éxito · opiniones) */

/* Manifiesto / declaración grande (intro de marca) */
.manifiesto { max-width: 820px; margin-inline: auto; text-align: center; }
.manifiesto p { font-family: var(--fuente-display); font-weight: 600; font-size: clamp(1.4rem, 1.05rem + 1.8vw, 2.2rem); line-height: 1.28; color: var(--pta-azul); letter-spacing: var(--tr-titular); text-wrap: balance; }
.manifiesto p .acento { color: var(--pta-naranja-oscuro); }
.manifiesto__firma { font-family: var(--fuente-mano); font-size: 1.6rem; color: var(--pta-texto-suave); margin-top: var(--sp-5); }

/* Bloque de transparencia "cómo ganamos dinero" (honestidad = confianza YMYL) */
.transparencia { max-width: 760px; margin: var(--sp-8) auto 0; background: linear-gradient(180deg, #fff, var(--pta-ahorro-bg)); border: 2px solid var(--pta-ahorro); border-radius: var(--radio-lg); padding: clamp(26px,3.4vw,42px); box-shadow: var(--sombra); }
.transparencia__sello { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--pta-ahorro); background: #fff; border: 1px solid var(--pta-ahorro); padding: 7px 15px; border-radius: var(--radio-pill); margin-bottom: var(--sp-4); }
.transparencia__sello svg { width: 18px; height: 18px; }
.transparencia h3 { font-size: clamp(1.3rem,1.1rem+1vw,1.7rem); margin-bottom: var(--sp-3); }
.transparencia p { color: var(--pta-texto); }
.transparencia p + p { margin-top: var(--sp-3); }
.transparencia b { color: var(--pta-azul); }

/* Hitos de historia (reutiliza rejilla tipo lp-cards) */
.hitos { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); }
@media (min-width: 720px) { .hitos { grid-template-columns: repeat(3, 1fr); } .hitos--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hitos--4 { grid-template-columns: repeat(4, 1fr); } }
.hito { position: relative; background: var(--pta-papel); border: 1px solid var(--pta-borde); border-radius: var(--radio-lg); padding: clamp(24px,3vw,32px); box-shadow: var(--sombra-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
.hito:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.hito__ano { font-family: var(--fuente-mono); font-weight: 700; font-size: 1.4rem; color: var(--pta-naranja-oscuro); display: block; margin-bottom: var(--sp-2); }
.hito h3 { font-size: 1.15rem; margin-bottom: var(--sp-2); }
.hito p { color: var(--pta-texto-suave); font-size: var(--fs-pequeno); }

/* Valoración media (hero de opiniones) */
.rating { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(22px,4vw,56px); max-width: 760px; margin: var(--sp-8) auto 0; background: #fff; border: 1px solid var(--pta-borde); border-radius: var(--radio-lg); box-shadow: var(--sombra); padding: clamp(26px,3.4vw,40px); }
.rating__score { text-align: center; }
.rating__num { font-family: var(--fuente-display); font-weight: 800; font-size: clamp(3rem,2rem+5vw,4.8rem); color: var(--pta-azul); line-height: .85; }
.rating__num small { font-size: .3em; color: var(--pta-texto-suave); font-weight: 700; }
.rating__estrellas { color: var(--pta-estrella); font-size: 1.4rem; letter-spacing: 3px; margin-top: var(--sp-3); }
.rating__count { color: var(--pta-texto-suave); font-size: var(--fs-pequeno); margin-top: var(--sp-2); }
.rating__barras { flex: 1; min-width: 210px; display: grid; gap: 7px; }
.rating__barra { display: flex; align-items: center; gap: 10px; font-size: var(--fs-pequeno); color: var(--pta-texto-suave); }
.rating__barra .et { width: 30px; flex: 0 0 auto; font-family: var(--fuente-mono); }
.rating__barra .track { flex: 1; height: 8px; border-radius: 99px; background: var(--pta-borde-sutil); overflow: hidden; }
.rating__barra .fill { display: block; height: 100%; background: var(--pta-aviso); border-radius: 99px; }

/* Tira de plataformas (fuentes de reseña: Google, Trustpilot…) */
.sellos-fuente { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.sello-fuente { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--pta-borde); border-radius: var(--radio-pill); padding: 9px 16px; font-weight: 700; font-size: var(--fs-pequeno); color: var(--pta-azul); box-shadow: var(--sombra-sm); }
.sello-fuente .estrellitas { font-size: .8rem; }

/* Muro de reseñas */
.resenas { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); align-items: start; }
@media (min-width: 640px) { .resenas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .resenas { grid-template-columns: repeat(3, 1fr); } }
.resena { background: #fff; border: 1px solid var(--pta-borde); border-radius: var(--radio-lg); padding: var(--sp-5); box-shadow: var(--sombra-sm); display: flex; flex-direction: column; gap: var(--sp-2); }
.resena__top { display: flex; align-items: center; gap: var(--sp-3); }
.resena__top .estrellitas { font-size: .9rem; }
.resena__fuente { margin-left: auto; font-family: var(--fuente-mono); font-size: var(--fs-micro); color: var(--pta-texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.resena blockquote { color: var(--pta-texto); font-size: .98rem; margin: var(--sp-1) 0 var(--sp-2); }
.resena__quien { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; }
.resena__quien b { font-family: var(--fuente-display); color: var(--pta-azul); }
.resena__quien small { display: block; color: var(--pta-texto-suave); font-size: var(--fs-micro); }

/* Casos de éxito — tarjeta con antes/después */
.casos { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); }
@media (min-width: 720px) { .casos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .casos--3 { grid-template-columns: repeat(3, 1fr); } }
.caso { background: #fff; border: 1px solid var(--pta-borde); border-radius: var(--radio-lg); box-shadow: var(--sombra-sm); padding: clamp(22px,2.8vw,32px); display: flex; flex-direction: column; gap: var(--sp-3); transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
.caso:hover { transform: translateY(-4px); box-shadow: var(--sombra-fuerte); }
.caso__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.caso__chip { font-family: var(--fuente-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--pta-naranja-oscuro); background: #FFF1E0; padding: 4px 10px; border-radius: var(--radio-pill); white-space: nowrap; }
.caso__chip--seg { color: var(--pta-ahorro); background: var(--pta-ahorro-bg); }
.caso__chip--form, .caso__chip--b2b { color: var(--pta-azul); background: #E9EDF4; }
.caso__perfil { font-weight: 700; color: var(--pta-azul); text-align: right; font-size: var(--fs-pequeno); }
.caso__perfil small { display: block; font-weight: 600; color: var(--pta-texto-suave); font-size: var(--fs-micro); }
.caso__ahorro { font-family: var(--fuente-display); font-weight: 800; font-size: clamp(2rem,1.4rem+2.2vw,2.8rem); color: var(--pta-ahorro); line-height: 1; }
.caso__ahorro span { font-size: .4em; color: var(--pta-texto-suave); font-weight: 700; font-family: var(--fuente-cuerpo); }
.caso__barra { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-pequeno); background: var(--pta-fondo-gris); border-radius: var(--radio); padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; }
.caso__barra .antes b { color: var(--pta-texto-suave); text-decoration: line-through; }
.caso__barra .flecha { color: var(--pta-naranja); font-weight: 800; }
.caso__barra .ahora b { color: var(--pta-ahorro); }
.caso__barra b { color: var(--pta-azul); font-weight: 800; }
.caso blockquote { color: var(--pta-texto); font-size: .96rem; border-left: 3px solid var(--pta-borde); padding-left: var(--sp-4); }
.caso__quien { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; font-size: var(--fs-pequeno); }
.caso__quien b { color: var(--pta-azul); }
.caso__quien small { color: var(--pta-texto-suave); }

/* ============================================================ Animaciones de confianza (las conduce assets/js/confianza.js; opt-in por data-*) */

/* Tira de frases ligada al scroll (cinta) */
.tira-banda { padding: var(--sp-5) 0; border-block: 1px solid var(--pta-borde-sutil); background: rgba(255,253,248,.45); display: grid; gap: var(--sp-3); }
.tira { position: relative; overflow: hidden; -webkit-mask: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.tira__pista { display: inline-flex; gap: var(--sp-5); white-space: nowrap; will-change: transform; font-family: var(--fuente-mono); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--pta-texto-suave); }
.tira__pista b { color: var(--pta-naranja); }
.tira__pista .sep { color: var(--pta-naranja); opacity: .7; padding: 0 var(--sp-2); }
@media (max-width: 820px) { .tira__pista { font-size: .72rem; gap: var(--sp-4); } }
@media (prefers-reduced-motion: reduce) { .tira { -webkit-mask: none; mask: none; } .tira__pista { transform: none !important; white-space: normal; flex-wrap: wrap; } }

/* Icono que gira con el scroll */
.girascroll { display: inline-block; will-change: transform; transform-origin: 50% 50%; }
.girascroll img, .girascroll svg { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .girascroll { transform: none !important; } }

/* KPI que cicla métricas solo cada X s */
.kpi-vivo { background: #fff; border: 1px solid var(--pta-borde); border-radius: var(--radio-lg); box-shadow: var(--sombra); padding: clamp(22px,3vw,34px); text-align: center; }
.kpiciclo { position: relative; overflow: hidden; }
.kpiciclo__valor { font-family: var(--fuente-display); font-weight: 800; font-size: clamp(2.2rem,1.4rem+3vw,3.4rem); line-height: var(--lh-apretado); color: var(--pta-azul); font-variant-numeric: tabular-nums; }
.kpiciclo__label { font-family: var(--fuente-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--pta-texto-suave); margin-top: var(--sp-2); }
.kpiciclo.--cambia .kpiciclo__valor, .kpiciclo.--cambia .kpiciclo__label { transition: opacity .22s var(--ease), transform .22s var(--ease); opacity: 0; transform: translateY(-8px); }
@media (prefers-reduced-motion: reduce) { .kpiciclo.--cambia .kpiciclo__valor, .kpiciclo.--cambia .kpiciclo__label { transition: none; opacity: 1; transform: none; } }

/* Cifra que sigue subiendo sola */
.livecount { transition: color .25s var(--ease); }
.livecount.tic { color: var(--pta-naranja); animation: lc-late .5s var(--ease); }
@keyframes lc-late { 0% { transform: translateY(0); } 30% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .livecount { animation: none !important; transform: none !important; color: inherit !important; } }

/* Línea/timeline que se dibuja (traza SVG) */
.traza__linea { fill: none; stroke: var(--pta-naranja); stroke-width: 3; stroke-linecap: round; }
.traza__hito { fill: var(--pta-crema); stroke: var(--pta-azul); stroke-width: 2; opacity: .45; transition: opacity .3s var(--ease), fill .3s var(--ease), stroke .3s var(--ease); }
.traza__hito.on { opacity: 1; fill: var(--pta-naranja); stroke: var(--pta-naranja-oscuro); }
@media (prefers-reduced-motion: reduce) { .traza__linea { stroke-dashoffset: 0 !important; } .traza__hito { opacity: 1; fill: var(--pta-naranja); stroke: var(--pta-naranja-oscuro); } }

/* Medidor que se llena (barra de ahorro + flecha) */
.medidor-wrap { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.medidor { position: relative; flex: 1; height: 10px; border-radius: var(--radio-pill); background: rgba(31,41,51,.08); overflow: hidden; }
.medidor__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--pta-naranja), var(--pta-ahorro)); will-change: width; }
.medidor__flecha { display: inline-flex; color: var(--pta-ahorro); will-change: transform, opacity; transform: translateY(6px); opacity: 0; }
.medidor__flecha svg { width: 18px; height: 18px; }
.medidor.lleno .medidor__flecha { transform: translateY(-2px); opacity: 1; transition: transform .5s var(--ease), opacity .4s var(--ease); }
@media (prefers-reduced-motion: reduce) { .medidor__flecha { opacity: 1; transform: none; } }

/* Sello/chispa al revelar */
[data-sello] { opacity: 0; will-change: transform, opacity; transform-origin: 50% 50%; }
[data-sello].--cae { animation: selloCae .5s var(--ease) forwards; }
@keyframes selloCae { 0% { opacity: 0; transform: translateY(-20px) scale(1.18) rotate(var(--sello-r,-8deg)); } 60% { opacity: 1; transform: translateY(2px) scale(.98) rotate(calc(var(--sello-r,-8deg)*.4)); } 100% { opacity: 1; transform: rotate(var(--sello-r,-8deg)); } }
.chispa { position: relative; }
.chispa::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 0, rgba(242,183,5,.5), transparent 60%); }
.chispa.salta::after { animation: chispaFlash .6s var(--ease) forwards; }
@keyframes chispaFlash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { [data-sello] { opacity: 1 !important; transform: none !important; animation: none !important; } .chispa.salta::after { animation: none !important; } }

/* Iconos-motivo laterales (distintos por página; giran con scroll) */
.motivos { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.motivo { position: absolute; opacity: .9; filter: drop-shadow(0 14px 26px rgba(22,30,38,.16)); }
.motivo svg, .motivo img { display: block; width: 100%; height: auto; }
@media (max-width: 820px) { .motivos { display: none; } }

/* Línea de tiempo (historia, "sobre nosotros") */
.timeline { position: relative; max-width: 720px; margin: var(--sp-8) auto 0; }
/* Raíl de la línea de tiempo: naranja sólido de arriba abajo (petición de Fabio). */
.timeline::before { content: ""; position: absolute; left: 20px; top: 8px; bottom: 8px; width: 3px; transform: translateX(-50%); background: var(--pta-naranja); border-radius: 3px; }
.timeline__svg { display: none; }   /* el SVG de "traza" ya no se usa; el raíl es el ::before */
.tl-item { position: relative; padding-left: 58px; padding-bottom: var(--sp-7); }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: 11px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--pta-papel); border: 3px solid var(--pta-naranja); box-shadow: 0 0 0 5px rgba(232,122,4,.10); z-index: 1; }
.tl-fecha { font-family: var(--fuente-mono); font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--pta-naranja-oscuro); }
.tl-card { background: #fff; border: 1px solid var(--pta-borde); border-radius: var(--radio-lg); box-shadow: var(--sombra-sm); padding: clamp(18px,2.4vw,26px); margin-top: 6px; transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
.tl-item:hover .tl-card { transform: translateX(4px); box-shadow: var(--sombra); }
.tl-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
.tl-card p { color: var(--pta-texto-suave); font-size: var(--fs-pequeno); }

/* Equipo en trío (3 + 3, cada uno al 33%, ancho completo) */
@media (min-width: 560px) { .team--trio { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .team--trio { grid-template-columns: repeat(3, 1fr); } }

/* Equipo de 2 personas (Marta + Rodri) — centradas y sin hueco a la derecha.
   Va después de `.team` @980 a propósito: misma especificidad, gana la última. */
@media (min-width: 560px) { .team--duo { grid-template-columns: repeat(2, 1fr); max-width: 620px; margin-inline: auto; } }

/* ============================================================ Correcciones R2 (2026-07-04) */

/* Logos reales en el carrusel (tamaños/formatos mixtos → caja uniforme, fondo blanco) */
.comercial-logo { height: 72px; min-width: 150px; padding: 12px 22px; background: #fff; }
.comercial-logo img { max-height: 44px; max-width: 130px; width: auto; object-fit: contain; display: block; }


/* Foto de autor del blog (Fabio Esteban) */
.art__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }

/* Header adaptativo por procedencia (solo landings; envueltos en .landing-heads) */
.fheader--landing { display: flex; align-items: center; gap: var(--sp-4); }
.fheader--landing .lpnav { display: none; align-items: center; gap: 2px; margin-inline: auto; }
.fheader--landing .lpnav a { font-weight: 600; font-size: .92rem; color: var(--pta-azul); padding: 9px 12px; border-radius: var(--radio-pill); transition: background var(--dur-micro) var(--ease); white-space: nowrap; }
.fheader--landing .lpnav a:hover { background: rgba(31,41,51,.06); }
@media (min-width: 1000px) { .fheader--landing .lpnav { display: flex; } }
/* Por defecto (entrada interna) se ve la cabecera normal; la de landing se oculta.
   Si la entrada es EXTERNA (html.nav-externa), se invierte. */
.landing-heads .fheader--landing { display: none; }
.nav-externa .landing-heads .fheader:not(.fheader--landing) { display: none; }
.nav-externa .landing-heads .mnav { display: none; }
.nav-externa .landing-heads .fheader--landing { display: flex; }

/* Banner de cookies (consent gate) */
.cookies { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 80; width: min(760px, calc(100% - 24px)); background: var(--pta-azul); color: #dfe5ea; border-radius: var(--radio); box-shadow: var(--sombra-fuerte); padding: var(--sp-4) var(--sp-5); display: none; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.cookies.on { display: flex; }
.cookies p { font-size: var(--fs-pequeno); flex: 1 1 260px; margin: 0; }
.cookies a { color: var(--pta-naranja-claro); text-decoration: underline; }
.cookies__btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; flex: 0 0 auto; }
.cookies .btn { padding: 11px 18px; white-space: nowrap; }
/* Entrada SOLO por opacidad: el keyframe no toca 'transform', así el translateX(-50%)
   de la regla base nunca se pisa y el banner queda SIEMPRE centrado (el msIn anterior
   terminaba en transform:none y lo descentraba fuera de pantalla). */
@keyframes cookiesIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) { .cookies.on { animation: cookiesIn .3s var(--ease) both; } }
@media (max-width: 640px) { .cookies { bottom: 10px; padding: var(--sp-4); } .cookies__btns { width: 100%; } .cookies__btns .btn { flex: 1; } }

/* ============================================================ «Papel vivo» — motion transversal
   Micro-interacciones (responden al usuario, cero bucle) + transición entre páginas. */

/* Transición entre páginas (MPA, cross-document). Crossfade nativo; Firefox y
   navegadores sin soporte navegan normal (progressive enhancement puro). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* El header y el logo "viajan" entre páginas sin parpadeo. */
.fheader { view-transition-name: pta-header; }
.footer { view-transition-name: pta-footer; }

/* Foco de formularios más grueso y claro (público mayor + accesibilidad). */
.ms-input:focus, .campo input:focus, .campo select:focus { box-shadow: 0 0 0 4px rgba(232, 122, 4, .22); }

/* Enlaces del footer y del menú: subrayado que "crece" al pasar (micro-interacción). */
.fmenu a, .footer__cols a { position: relative; }

/* Tarjetas de servicio/valor: al pasar el cursor se despegan (ya tienen translateY;
   aquí se añade la curva "papel" y una sombra que crece). */
.lp-card, .incluye__item, .caso, .resena, .hito, .lp-paso, .persona { transition: transform var(--dur-media) var(--ease-papel), box-shadow var(--dur-media) var(--ease); }

/* ============================================================ Blog (índice + artículo) */
.blog-cards { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); }
@media (min-width: 640px) { .blog-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .blog-cards { grid-template-columns: repeat(3, 1fr); } }
.blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pta-borde); border-radius: var(--radio-lg); overflow: hidden; box-shadow: var(--sombra-sm); transition: transform var(--dur-media) var(--ease-papel), box-shadow var(--dur-media) var(--ease); }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-fuerte); }
.blog-card__img { aspect-ratio: 16/9; background: linear-gradient(135deg, #FFF1E0, #E9EDF4); display: grid; place-items: center; color: var(--pta-naranja-oscuro); }
.blog-card__img svg { width: 48px; height: 48px; opacity: .5; }
.blog-card__img--foto { padding: 0; background: none; }
.blog-card__img--foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.blog-card__cat { font-family: var(--fuente-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--pta-naranja-texto); font-weight: 700; }
.blog-card h3 { font-size: 1.15rem; line-height: 1.2; }
.blog-card p { color: var(--pta-texto-suave); font-size: var(--fs-pequeno); flex: 1; }
.blog-card__meta { font-size: var(--fs-micro); color: var(--pta-texto-suave); margin-top: var(--sp-2); }
.blog-card__link { margin-top: var(--sp-2); font-weight: 700; color: var(--pta-naranja-texto); }

/* Artículo */
/* El header flotante mide ~74 px (14 de margen + la píldora) y va `fixed`, así que el artículo
   necesita dejarle su hueco: con el padding genérico de .seccion (64 px en móvil) el header
   tapaba las migas y el h1. Se reserva --header-h y encima el aire de la sección. */
.art { max-width: 820px; margin-inline: auto; background: rgba(255, 255, 255, .9); border: 1px solid var(--pta-borde-sutil); border-radius: var(--radio-lg); padding: clamp(22px, 4vw, 52px); box-shadow: var(--sombra-sm); }
.seccion.art { margin-block: calc(var(--header-h) + clamp(16px, 4vw, 40px)) clamp(48px, 8vw, 96px); padding-block: clamp(22px, 4vw, 52px); }
.art > .contenedor { padding-inline: 0; }   /* el inset lo pone el padding del panel, sin doblar */
@media (max-width: 520px) { .art { border-radius: 0; border-inline: 0; } }
.art__crumbs { font-size: var(--fs-micro); color: var(--pta-texto-suave); margin-bottom: var(--sp-4); }
.art__crumbs a { color: var(--pta-naranja-texto); }
.art h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); margin-bottom: var(--sp-4); }
.art__autor { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) 0; border-block: 1px solid var(--pta-borde-sutil); margin-bottom: var(--sp-6); }
.art__autor .ph-avatar { width: 46px; height: 46px; }
.art__autor b { color: var(--pta-azul); font-family: var(--fuente-display); }
.art__autor b a { color: inherit; text-decoration: none; }
.art__autor b a:hover { text-decoration: underline; }
.art__autor small { display: block; color: var(--pta-texto-suave); font-size: var(--fs-micro); }
.art__indice { background: var(--pta-fondo-gris); border-radius: var(--radio); padding: var(--sp-5); margin-bottom: var(--sp-6); }
.art__indice b { display: block; margin-bottom: var(--sp-2); font-family: var(--fuente-display); color: var(--pta-azul); }
.art__indice ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.art__indice a { color: var(--pta-naranja-texto); }
.art__cuerpo h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); margin: var(--sp-7) 0 var(--sp-3); scroll-margin-top: 96px; }
.art__cuerpo h3 { font-size: 1.2rem; margin: var(--sp-5) 0 var(--sp-2); }
.art__cuerpo p, .art__cuerpo li { color: var(--pta-texto); line-height: 1.75; margin-bottom: var(--sp-4); }
.art__cuerpo ul, .art__cuerpo ol { padding-left: var(--sp-5); margin-bottom: var(--sp-4); }
.art__cuerpo strong { color: var(--pta-azul); }
.art__cuerpo a { color: var(--pta-naranja-texto); text-decoration: underline; }
/* Tabla comparativa del cuerpo del artículo. El guion de contenido pide tabla cuando el
   artículo compara dos opciones (regulada vs libre, fija vs indexada…): es el formato que
   citan los buscadores con IA. Va envuelta en .art__tabla para que en móvil se desplace
   ella sola y no rompa el ancho de la página. */
.art__tabla { overflow-x: auto; margin: var(--sp-5) 0; }
.art__cuerpo table { width: 100%; min-width: 460px; border-collapse: collapse; background: #fff; border: 1px solid var(--pta-borde); border-radius: var(--radio); overflow: hidden; }
.art__cuerpo th, .art__cuerpo td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--pta-borde-sutil); line-height: 1.55; }
.art__cuerpo thead th { background: var(--pta-fondo-gris); color: var(--pta-azul); font-weight: 700; }
.art__cuerpo tbody td:first-child { font-weight: 600; color: var(--pta-azul); }
.art__cuerpo tbody tr:last-child td { border-bottom: 0; }

.art__cta { background: linear-gradient(120deg, var(--pta-naranja-oscuro), var(--pta-naranja-claro)); color: #fff; border-radius: var(--radio-lg); padding: clamp(24px,3.4vw,36px); text-align: center; margin: var(--sp-7) 0; box-shadow: var(--sombra); }
.art__cta h3 { color: #fff; font-size: 1.5rem; margin-bottom: var(--sp-2); }
.art__cta p { color: rgba(255,255,255,.9); margin-bottom: var(--sp-4); }
.art__rel { margin-top: var(--sp-8); }
.art__rel h2 { font-size: 1.4rem; margin-bottom: var(--sp-4); }

/* Respuesta directa al abrir el artículo (y al abrir cada H2). Son 40-60 palabras que se
   entienden sacadas de contexto: es el trozo que copian Google AI Overviews, ChatGPT o
   Perplexity cuando citan la página. Se marca visualmente para que también le sirva a quien
   entra con prisa y solo quiere la respuesta. */
.art__respuesta { font-size: 1.08rem; line-height: 1.7; color: var(--pta-azul); background: var(--pta-fondo-gris); border-left: 4px solid var(--pta-naranja); border-radius: var(--radio); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); }
.art__cuerpo .art__respuesta { margin-top: var(--sp-3); }
.art__respuesta strong { color: var(--pta-azul); }

/* Caja "dato" — dato propio / de la semana, citable (AEO). Reutilizable en cada artículo. */
.art__dato { background: var(--pta-fondo-gris); border-left: 4px solid var(--pta-naranja); border-radius: var(--radio); padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) - var(--sp-4)); margin: var(--sp-7) 0; }
.art__dato-et { display: inline-block; font-family: var(--fuente-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--pta-naranja-texto); font-weight: 700; margin-bottom: var(--sp-2); }
.art__dato p { margin: 0; }

/* Cabecera de página de autor (perfil) */
.autor-cab { display: flex; align-items: center; gap: var(--sp-5); margin: var(--sp-5) 0 var(--sp-7); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--pta-borde-sutil); }
.autor-cab__foto { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; box-shadow: var(--sombra-sm); }
.autor-cab__tx h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); margin: 2px 0 4px; }
.autor-cab__rol { color: var(--pta-naranja-texto); font-weight: 700; margin-bottom: var(--sp-2); }
.autor-cab__firma { color: var(--pta-texto-suave); line-height: 1.6; margin: 0; }
@media (max-width: 560px) { .autor-cab { flex-direction: column; align-items: flex-start; text-align: left; } .autor-cab__foto { width: 104px; height: 104px; } }

/* ============================================================ Newsletter (captación consentida, F2)
   Caja de email + consentimiento. La lógica va en assets/js/newsletter.js. */
.news { background: #fff; border: 1px solid var(--pta-borde); border-radius: var(--radio-lg); padding: clamp(22px, 3.4vw, 36px); display: grid; gap: var(--sp-4); box-shadow: var(--sombra); }
.news__tx h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); color: var(--pta-azul); margin: 4px 0 var(--sp-2); }
.news__tx p { color: var(--pta-texto-suave); margin: 0; line-height: 1.6; }
.news__form { display: grid; gap: var(--sp-3); }
.news__row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.news__email { flex: 1 1 220px; min-width: 0; padding: 13px 16px; border: 1px solid var(--pta-borde); border-radius: var(--radio); font: inherit; background: #fff; color: var(--pta-texto); }
.news__email:focus { outline: none; border-color: var(--pta-naranja); box-shadow: 0 0 0 4px rgba(232, 122, 4, .22); }
.news__btn { flex: 0 0 auto; white-space: nowrap; }
.news__consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-micro); color: var(--pta-texto-suave); line-height: 1.5; }
.news__consent input { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--pta-naranja); }
.news__consent a { color: var(--pta-naranja-texto); text-decoration: underline; }
.news__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.news__msg { margin: 0; font-size: var(--fs-micro); min-height: 1em; }
.news__msg--err { color: #c0392b; }
.news__msg--ok { color: #1E9E5A; }
.news__ok b { display: block; color: var(--pta-azul); font-family: var(--fuente-display); margin-bottom: 4px; }
.news__ok span { color: var(--pta-texto-suave); font-size: var(--fs-pequeno); }
@media (min-width: 660px) { .news { grid-template-columns: 1fr 1fr; align-items: center; column-gap: var(--sp-7); } }

/* ============================================================ Precio de la luz hoy (dato en vivo)
   La rellena assets/js/precio-luz.js leyendo /precio-luz.json (cron ESIOS en el servidor). */
.precioluz { background: #fff; border: 1px solid var(--pta-borde); border-radius: var(--radio-lg); box-shadow: var(--sombra); padding: clamp(22px, 3.4vw, 38px); display: grid; gap: var(--sp-5); }
.precioluz__tx h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); margin: 4px 0 var(--sp-2); }
.precioluz__tx p { color: var(--pta-texto-suave); margin: 0; line-height: 1.6; max-width: 62ch; }
.precioluz__cifras { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 620px) { .precioluz__cifras { grid-template-columns: repeat(3, 1fr); } }
.precioluz__kpi { position: relative; background: var(--pta-fondo-gris); border-radius: var(--radio); padding: var(--sp-4) var(--sp-5); border-left: 4px solid var(--pta-naranja); }
.precioluz__kpi--verde { border-left-color: #1E9E5A; }
.precioluz__kpi--rojo { border-left-color: #d84a3b; }
.precioluz__num { display: inline; font-family: var(--fuente-display); font-weight: 800; font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.6rem); color: var(--pta-azul); line-height: 1; }
.precioluz__u { font-family: var(--fuente-mono); font-size: var(--fs-micro); color: var(--pta-texto-suave); margin-left: 6px; }
.precioluz__lbl { display: block; margin-top: 6px; font-size: var(--fs-pequeno); color: var(--pta-texto-suave); }
.precioluz__lbl b { color: var(--pta-azul); font-family: var(--fuente-mono); }
.precioluz__foot { margin: 0; font-size: var(--fs-micro); color: var(--pta-texto-suave); line-height: 1.5; }
.precioluz__foot a { color: var(--pta-naranja-texto); font-weight: 700; text-decoration: none; white-space: nowrap; }
.precioluz__foot a:hover { text-decoration: underline; }

/* Barra de progreso de lectura (scroll-driven, cero JS donde haya soporte) */
.lee-progreso { position: fixed; top: 0; left: 0; height: 4px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--pta-naranja), var(--pta-naranja-claro)); z-index: 65; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .lee-progreso { animation: leeProg linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes leeProg { to { transform: scaleX(1); } }

/* ---------- Aviso wireframe ---------- */
.wf-aviso { position: relative; z-index: 70; background: var(--pta-azul-950); color: #cdd6df; text-align: center; font-size: .82rem; padding: 7px var(--sp-4); }
.wf-aviso b { color: var(--pta-aviso); }

/* ============================================================ Responsive */
@media (min-width: 600px) {
  .kpis { grid-template-columns: repeat(4, 1fr); }
  .wa-flotante .txt { display: inline; }
}
@media (min-width: 760px) {
  .tickets { grid-template-columns: repeat(2, 1fr); }
  .equipo { grid-template-columns: repeat(3, 1fr); }
  .footer__top { grid-template-columns: minmax(220px, 1fr) 1.7fr; gap: var(--sp-8); align-items: start; }
  .footer__cols { grid-template-columns: repeat(3, 1fr); }
  .footer__legal { grid-template-columns: 1fr auto; align-items: center; }
  .ov__grid { grid-template-columns: 1fr 1fr; }
  .ov__lado { display: flex; flex-direction: column; justify-content: center; }
}
@media (min-width: 1024px) {
  .tickets { grid-template-columns: repeat(4, 1fr); }
  .equipo { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1200px) {
  .fnav { display: flex; }
  .burger { display: none; }
  .fheader__cta--vender { display: inline-flex; }
}

/* ============================================================
   Linktree (/links) — bio de RRSS. Tarjetas con icono, tema factura/luz.
   ============================================================ */
.lt { min-height: 100dvh; display: flex; justify-content: center; padding: clamp(28px, 7vw, 56px) 16px 72px; }
.lt__wrap { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: var(--sp-6); }

/* Cabecera con "resplandor de bombilla" tras el logo */
.lt__head { text-align: center; position: relative; }
.lt__rays { position: absolute; top: -14px; left: 50%; width: 230px; height: 230px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(251, 157, 43, .30), rgba(251, 157, 43, 0) 62%); filter: blur(6px);
  z-index: 0; pointer-events: none; animation: ltGlow 4.2s ease-in-out infinite; }
.lt__head > :not(.lt__rays) { position: relative; z-index: 1; }
@keyframes ltGlow { 0%, 100% { opacity: .65; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.08); } }
.lt__logo { display: block; margin: 0 auto var(--sp-3); filter: drop-shadow(0 8px 18px rgba(22, 30, 38, .16)); }
.lt__head h1 { font-family: var(--fuente-display); font-size: clamp(1.5rem, 5vw, 1.85rem); letter-spacing: var(--tr-titular); margin: 0 0 var(--sp-2); color: var(--pta-azul); }
.lt__claim { margin: 0 auto; max-width: 40ch; color: var(--pta-texto-suave); font-size: var(--fs-cuerpo); line-height: var(--lh-normal); }

.lt__grupo { display: flex; flex-direction: column; gap: var(--sp-3); }
.lt__grupo .eyebrow { margin-bottom: 2px; text-align: center; }
.lt__grid { display: grid; gap: var(--sp-3); }
.lt__grid--2 { grid-template-columns: 1fr 1fr; }

/* Tarjeta de enlace: icono + título/subtítulo + flecha, con relieve de papel */
.lt-card { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  border-radius: 16px; background: var(--pta-papel); border: 1px solid var(--pta-borde);
  box-shadow: 0 2px 10px rgba(22, 30, 38, .05); text-decoration: none; color: var(--pta-texto);
  position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.lt-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--pta-naranja); opacity: 0; transition: opacity .18s ease; }
.lt-card:hover, .lt-card:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(22, 30, 38, .13); border-color: transparent; outline: none; }
.lt-card:hover::before, .lt-card:focus-visible::before { opacity: 1; }
.lt-card__ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, var(--pta-naranja-claro), var(--pta-naranja-oscuro));
  box-shadow: 0 4px 12px rgba(232, 122, 4, .28); transition: transform .18s ease; }
.lt-card:hover .lt-card__ic { transform: rotate(-6deg) scale(1.04); }
.lt-card__ic svg { width: 24px; height: 24px; }
.lt-card__tx { flex: 1 1 auto; min-width: 0; }
.lt-card__tx b { display: block; font-family: var(--fuente-display); font-size: 1.02rem; line-height: 1.15; color: var(--pta-azul); }
.lt-card__tx span { display: block; font-size: .85rem; color: var(--pta-texto-suave); margin-top: 2px; line-height: 1.3; }
.lt-card__go { flex: 0 0 auto; color: var(--pta-texto-suave); transition: transform .18s ease, color .18s ease; }
.lt-card__go svg { width: 20px; height: 20px; display: block; }
.lt-card:hover .lt-card__go { transform: translateX(3px); color: var(--pta-naranja); }
/* En la fila de 2 (luz/gas): tarjeta compacta, icono arriba y texto centrado */
.lt__grid--2 .lt-card { flex-direction: column; text-align: center; gap: 10px; padding: var(--sp-5) var(--sp-4); }
.lt__grid--2 .lt-card__go { display: none; }
.lt__grid--2 .lt-card__tx b { font-size: 1.1rem; }

/* Variantes de color del icono (azul para "vender", verde para web) */
.lt-card--azul .lt-card__ic { background: linear-gradient(135deg, var(--pta-azul-800), var(--pta-azul-950)); box-shadow: 0 4px 12px rgba(22, 30, 38, .28); }
.lt-card--azul::before { background: var(--pta-azul); }
.lt-card--web .lt-card__ic { background: linear-gradient(135deg, #34c06e, var(--pta-ahorro)); box-shadow: 0 4px 12px rgba(30, 158, 90, .28); }
.lt-card--web::before { background: var(--pta-ahorro); }

/* Fila de contacto: 3 botones compactos (WhatsApp / Llamar / Correo) */
.lt__contacto { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.lt-mini { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: var(--sp-4) var(--sp-3); border-radius: 14px; text-decoration: none; font-weight: 700; font-size: .85rem;
  transition: transform .18s ease, box-shadow .18s ease; text-align: center; }
.lt-mini svg { width: 24px; height: 24px; }
.lt-mini:hover, .lt-mini:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(22, 30, 38, .16); outline: none; }
.lt-mini--wa { background: var(--pta-wa); color: #fff; }
.lt-mini--tel { background: var(--pta-azul); color: #fff; }
.lt-mini--mail { background: var(--pta-papel); color: var(--pta-azul); border: 1px solid var(--pta-borde); }

/* CTA final "Cuéntanos qué necesitas" (abre el formulario de contacto) */
.lt-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 18px 20px; border: 0; border-radius: 16px; cursor: pointer;
  background: linear-gradient(135deg, var(--pta-naranja-claro), var(--pta-naranja-oscuro)); color: #fff;
  font-family: var(--fuente-display); font-size: 1.05rem; font-weight: 700; letter-spacing: var(--tr-titular);
  box-shadow: 0 8px 22px rgba(232, 122, 4, .32); transition: transform .18s ease, box-shadow .18s ease; }
.lt-cta svg { width: 22px; height: 22px; flex: 0 0 auto; }
.lt-cta:hover, .lt-cta:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(232, 122, 4, .42); outline: none; }

.lt__rrss { display: flex; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-2); }
.lt__rrss a { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pta-azul); color: var(--pta-blanco); transition: transform .15s ease, background .15s ease; }
.lt__rrss a:hover, .lt__rrss a:focus-visible { transform: translateY(-2px); background: var(--pta-naranja); }
.lt__rrss svg { width: 24px; height: 24px; }
.lt__legal { text-align: center; font-size: var(--fs-micro); color: var(--pta-texto-suave); }
.lt__legal a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .lt__rays { animation: none; }
  .lt-card, .lt-card__ic, .lt-card__go, .lt-mini, .lt-cta { transition: none; }
}