/* Resto de /despegue (15-oct-2026): del recorrido al pie. Carga sin bloquear el pintado (media="print" que
   js/despegue.js cambia a all; sin JavaScript entra con <noscript>). Va después de despegue.css en la cascada */
/* ------------------------------------------------------------ 2. recorrido del cliente */
.ruta{padding:clamp(88px,11vw,168px) 0 0}
.ruta__cabeza{display:flex;flex-direction:column;gap:14px}
.tarjeta{width:100%;background:#fff;box-shadow:0 24px 48px -28px rgba(0,0,0,.35);overflow:hidden}
.tarjeta em{font-style:normal;letter-spacing:1px;color:#E8A33D}

.busqueda{max-width:420px;border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:16px}
.busqueda__barra{display:flex;align-items:center;gap:12px;height:48px;padding:0 18px;border:1px solid #E2E2E2;border-radius:24px;font-size:16px}
.busqueda__barra svg{width:17px;height:17px;flex:none}
.busqueda__barra i{width:1.5px;height:20px;margin-left:-8px;background:#1A1B1E}
.busqueda__resultado{display:flex;gap:12px;align-items:flex-start;padding:0 4px 14px;border-bottom:1px solid #EEE}
.busqueda__foto{width:52px;height:52px;flex:none;border-radius:10px;background:linear-gradient(150deg,#8EDACD,#2A8C80)}
.busqueda__resultado > span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.busqueda__resultado b{font-size:15px;font-weight:600;color:#1A0DAB}
.busqueda__resultado small{font-size:13px;color:#4D5156}
.busqueda__sombra{display:block;height:8px;width:52%;margin:0 4px;border-radius:4px;background:#D6D8DB;opacity:.5;box-shadow:0 13px 0 #E3E5E8}
.busqueda__sombra--2{width:46%;margin-top:10px;opacity:.35}

.ficha{max-width:400px;border-radius:20px}
.ficha__fotos{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:64px 64px;gap:3px}
.ficha__fotos span:nth-child(1){grid-row:span 2;background:radial-gradient(circle at 30% 35%,rgba(255,255,255,.85) 0 10%,transparent 10.5%),radial-gradient(circle at 70% 65%,rgba(255,255,255,.4) 0 18%,transparent 18.5%),linear-gradient(150deg,#8EDACD,#2A8C80)}
.ficha__fotos span:nth-child(2){background:linear-gradient(160deg,#E8F3F1,#B9DDD7)}
.ficha__fotos span:nth-child(3){background:linear-gradient(160deg,#CFE7E3,#7FBFB5)}
.ficha__datos{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;font-size:14px;color:#4D5156}
.ficha__datos b{font-weight:600;font-size:20px;letter-spacing:-.01em;color:#1A1B1E}
.ficha__datos small{font-size:14px;color:#70757A}
.ficha__datos strong{font-weight:400;color:#188038}
.ficha__botones{display:flex;gap:8px;margin-top:10px}
.ficha__botones i{flex:1;display:flex;align-items:center;justify-content:center;height:36px;border:1px solid #DADCE0;border-radius:18px;font-style:normal;font-size:13px;font-weight:500;color:#1F64C8;white-space:nowrap}
.ficha__botones i:last-child{border-color:#1F64C8;background:#1F64C8;color:#fff}

.navegador{max-width:460px;border-radius:14px}
.navegador__barra{display:flex;align-items:center;gap:12px;height:42px;padding:0 14px;background:#F1F1F1}
.navegador__puntos{display:flex;gap:6px}
.navegador__puntos i{width:10px;height:10px;border-radius:50%;background:#E0E0E0}
.navegador__url{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:26px;border-radius:13px;background:#fff;font-size:13px;font-weight:500}
.navegador__url svg{width:10px;height:10px;color:#5F6368}
.navegador__pagina{display:flex;flex-direction:column;gap:12px;padding:18px;background:#F1F8F7;color:#0F2B29}

.navegador__pagina b{font-weight:600;font-size:22px;line-height:1.05;letter-spacing:-.015em}
.navegador__pagina small{font-size:13px;opacity:.72}

.chat{max-width:360px;border-radius:22px;background:#EFE9E1}
.chat__cabeza{display:flex;align-items:center;gap:10px;height:58px;padding:0 16px;background:#fff;border-bottom:1px solid #EEE}
.chat__cabeza i{width:32px;height:32px;flex:none;border-radius:50%;background:#1F8A7E}
.chat__cabeza span{display:flex;flex-direction:column}
.chat__cabeza b{font-size:15px;font-weight:600}
.chat__cabeza small{font-size:12px;color:#667781}
.chat__mensajes{display:flex;flex-direction:column;gap:10px;padding:18px 14px;font-size:14.5px;line-height:1.35}
.chat__mensajes span{max-width:82%;padding:9px 12px}
.chat__suyo{align-self:flex-end;background:#D9FDD3;border-radius:12px 12px 3px 12px}
.chat__mio{align-self:flex-start;background:#fff;border-radius:12px 12px 12px 3px}
.chat__caja{display:flex;align-items:center;height:42px;margin:0 12px 14px;padding:0 16px;border-radius:21px;background:#fff;font-size:14px;color:#8696A0}

}

/* ------------------------------------------------------------ recorrido con Café Arista (15-oct-2026)
   Prueba aprobada en pruebas/despegue-ruta-fija.html. Base: lista (sin JavaScript, «Reducir movimiento» y celular
   acostado). Con .historia--fija (la pone el JS) la escena queda fija y el JS mueve tarjetas y frases con el scroll.
   Tarjeta de 400 × 600 al estilo de la referencia «Tidewater» que dio Bruno, escalada con --kc */
.historia{--kc:1;padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,72px)}
.escena{display:flex;flex-direction:column;gap:clamp(56px,8vw,96px)}
.etapa{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(32px,5vw,72px);width:100%;max-width:calc(1280px + 2*var(--lado));margin-inline:auto;padding:0 var(--lado)}
.etapa__texto{justify-self:end;text-align:right}
.etapa__texto h3{margin-top:12px;font-weight:600;font-size:clamp(34px,3.3vw,54px);line-height:1;letter-spacing:-.03em;text-wrap:balance}
.etapa__marco{position:relative;width:calc(400px * var(--kc));height:calc(600px * var(--kc))}
@media (max-width:900px){
  .etapa{grid-template-columns:1fr;justify-items:center;gap:20px}
  .etapa__texto{justify-self:center;text-align:center}
  .etapa__texto h3{font-size:clamp(34px,9vw,44px)}
}
@media (max-width:440px){.historia{--kc:.82}}

/* Fija: la escena ocupa la pantalla y las 5 etapas se apilan en el mismo lugar */
.historia--fija{height:calc(5 * 85svh + 100svh);padding:0}
.historia--fija .escena{position:sticky;top:0;height:100svh;overflow:hidden;display:block}
.historia--fija .etapa{position:absolute;inset:0;max-width:none;align-content:center;pointer-events:none}
.historia--fija .etapa__texto,.historia--fija .etapa__marco{opacity:0;will-change:transform,opacity}
/* En celular la composición sube 72 px para no quedar debajo del botón flotante de WhatsApp */
@media (max-width:900px){.historia--fija .etapa{padding-top:70px;padding-bottom:72px}}
@media (min-width:901px){
  .historia--fija .etapa{display:block}
  .historia--fija .etapa__marco{position:absolute;left:calc(50% - 200px * var(--kc));top:calc(50% - 300px * var(--kc))}
  .historia--fija .etapa__texto{position:absolute;top:50%;margin-top:-1.2em;width:min(420px,calc(50vw - 200px * var(--kc) - 120px));right:calc(50% + 200px * var(--kc) + 64px)}
  .historia--fija .etapa--der .etapa__texto{right:auto;left:calc(50% + 200px * var(--kc) + 64px);text-align:left}
}

/* Avance del recorrido: ruta vertical a la izquierda en escritorio y horizontal arriba en celular. La línea se llena con
   --p (0 a 1) y el punto actual es la ▼ naranja con su nombre */
.avance{display:none}
.historia--fija .avance{display:block;position:absolute;z-index:20;left:var(--lado);top:50%;transform:translateY(-50%)}
.avance ol{position:relative;display:flex;flex-direction:column;gap:clamp(18px,3.4vh,34px);list-style:none}
.avance__linea{position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:#D6CFC3}
.avance__linea::after{content:"";position:absolute;inset:0;background:var(--naranja);transform-origin:50% 0;transform:scaleY(var(--p,0))}
.avance button{display:flex;align-items:center;gap:12px;min-height:44px;padding:0;border:0;background:none;cursor:pointer;color:var(--tinta-2);font:600 12px/1 var(--cond);letter-spacing:.18em;text-transform:uppercase}
.avance i{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:none}
.avance i::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--papel);box-shadow:inset 0 0 0 2px #B9B2A6;transition:background .3s ease}
.avance .visto i::before{background:var(--naranja);box-shadow:none;transform:scale(.8)}
.avance .actual i::before{width:16px;height:13px;border-radius:0;background:var(--naranja);box-shadow:none;clip-path:polygon(0 0,100% 0,50% 100%);transform:none}
.avance span{opacity:0;transform:translateX(-6px);transition:opacity .3s ease,transform .3s ease;white-space:nowrap}
.avance .actual span,.avance button:hover span,.avance button:focus-visible span{opacity:1;transform:none}
.avance .actual span{color:var(--tinta)}
@media (max-width:900px){
  .historia--fija .avance{left:50%;top:10px;transform:translateX(-50%);width:min(100% - 2*var(--lado),340px)}
  .avance ol{flex-direction:row;justify-content:space-between;gap:0}
  .avance__linea{left:22px;right:22px;top:21px;bottom:auto;width:auto;height:2px}
  .avance__linea::after{transform-origin:0 50%;transform:scaleX(var(--p,0))}
  .avance li{position:relative}
  .avance button{flex-direction:column;gap:0}
  .avance span{position:absolute;top:40px;left:50%;transform:translate(-50%,-4px)}
  .avance .actual span{transform:translate(-50%,0)}
  .avance li:first-child span{left:0;transform:none}
  .avance li:last-child span{left:auto;right:0;transform:none}
}

/* Tarjeta */
.tarjeta-tw{position:absolute;left:0;top:0;width:400px;height:600px;transform-origin:0 0;transform:scale(var(--kc));display:flex;flex-direction:column;gap:10px;padding:10px;border-radius:40px;
  background:linear-gradient(180deg,#FFFFFF 0%,#F3EEE6 55%,#E6DDD0 100%);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 40px 80px -30px rgba(43,26,16,.45),0 12px 28px -14px rgba(43,26,16,.3)}
.media{position:relative;flex:none;height:410px;border-radius:30px;overflow:hidden;isolation:isolate;background:#3A2416}
.media--ui::before{content:"";position:absolute;inset:-30px;z-index:-1;background:center/cover no-repeat;filter:blur(12px) saturate(1.1) brightness(.85)}
.media--local::before{background-image:url("/img/despegue/cafe-arista-local.webp")}
.media--pan::before{background-image:url("/img/despegue/cafe-arista-pan.webp")}
.media--capuchino::before{background-image:url("/img/despegue/cafe-arista.webp")}
.media__ui{position:absolute;left:50%;top:22px;width:380px;transform:translateX(-50%) scale(.94);transform-origin:50% 0;display:flex;justify-content:center}
.media__ui.ui--1{top:66px}
.media__ui.ui--4{top:40px;transform:translateX(-50%) scale(.98)}
.media__ui .tarjeta{box-shadow:0 24px 48px -20px rgba(20,10,4,.55)}
.media--foto .barra-qr{position:absolute;left:50%;top:0;height:100%;width:auto;transform:translateX(-50%)}
.media__pie{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:44px 18px 16px;background:linear-gradient(transparent,rgba(20,12,6,.62))}
.media__pie span{display:flex;flex-direction:column;color:#fff}
.media__pie b{font:600 19px/1.15 "Barlow",sans-serif}
.media__pie small{font-size:13px;color:rgba(255,255,255,.78)}
.media__pie em{flex:none;padding:12px 20px;border-radius:16px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font:600 15px/1 "Barlow",sans-serif;font-style:normal}
.panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px 22px 14px;border-radius:30px;background:rgba(255,255,255,.55);box-shadow:0 1px 0 rgba(255,255,255,.8) inset;text-align:center}
.panel__titulo{font:500 17px/1.3 "Barlow",sans-serif;color:#2B1A10}
.panel__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.panel__chips span{padding:8px 13px;border-radius:12px;background:rgba(43,26,16,.07);font:500 13px/1 "Barlow",sans-serif;color:#5A4636}
.panel__texto{padding-top:12px;border-top:1px solid rgba(43,26,16,.1);font:400 15px/1.45 "Barlow",sans-serif;color:#6E6156}

/* Piezas de Café Arista dentro de la tarjeta: fotos de Artlist (15-oct-2026) y recortes del capuchino */
.foto-cafe{background:url("/img/despegue/cafe-arista.webp") no-repeat #B37843}
.recorte-ancho{background-size:cover;background-position:50% 70%}
.busqueda__foto.foto-cafe{background-size:300%;background-position:50% 90%}
.ficha--cafe .ficha__fotos{grid-template-rows:72px 72px}
.ficha--cafe .ficha__fotos span:nth-child(1){background:url("/img/despegue/cafe-arista-local.webp") 40% 60%/cover no-repeat #B37843}
.ficha--cafe .ficha__fotos span:nth-child(2){background:url("/img/despegue/cafe-arista.webp") 52% 72%/200% no-repeat #B37843}
.ficha--cafe .ficha__fotos span:nth-child(3){background:url("/img/despegue/cafe-arista-pan.webp") 50% 62%/cover no-repeat #B37843}
.nav-cafe{max-width:480px;border-radius:14px}
.nav-cafe .navegador__pagina{gap:0;padding:0;background:#F4ECE1;color:#2B1A10;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
.nav-cafe__cab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 0 12px}
.nav-cafe__cab b{font-weight:400;font-style:italic;font-size:22px}
.nav-cafe__cab small{font:600 9px/1 var(--cond);letter-spacing:.32em;text-transform:uppercase;color:#8A4B2A}
.nav-cafe__foto{position:relative;height:150px}
.nav-cafe__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(30,16,8,.72))}
.nav-cafe__foto p{position:absolute;left:18px;right:18px;bottom:12px;z-index:1;color:#FBF5EC;font-size:22px;line-height:1.05}
.nav-cafe__foto p i{display:block;font-size:.72em;color:#E9C9A4}
.nav-cafe__pie{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px 16px}
.nav-cafe__pie span{font-style:italic;font-size:13px;color:#6B5A4E}
.nav-cafe__pie em{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:999px;background:#6B3A20;color:#FBF5EC;font:600 12px/1 "Barlow",sans-serif;font-style:normal}
.nav-cafe__pie em svg{width:13px;height:13px}
.chat--cafe .chat__cabeza{gap:12px}
.chat__avatar{width:36px;height:36px;flex:none}
.chat__hora{display:inline-flex;align-items:center;gap:3px;float:right;margin:6px 0 -4px 10px;font-size:11px;color:#667781}
.chat__hora svg{width:16px;height:11px}
/* QR sobre la tarjeta del porta-tarjetas en la foto: una matrix3d lleva la tarjeta plana de 311 × 448 a sus
   4 esquinas (442,236 · 760,238 · 755,706 · 444,684 de 1200 × 896); la capa escala con --k (lo pone el JS) */
.barra-qr{position:relative;aspect-ratio:1200/896;overflow:hidden;background:url("/img/despegue/cafe-arista-barra-qr.webp") center/cover no-repeat #B37843}
.barra-qr__capa{position:absolute;left:0;top:0;width:1200px;height:896px;transform-origin:0 0;transform:scale(var(--k,.457))}
.barra-qr__tarjeta{position:absolute;left:0;top:0;width:311px;height:448px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px;color:#2B1A10;text-align:center;mix-blend-mode:multiply;transform-origin:0 0;
  transform:matrix3d(0.91557032,-0.027057523,0,-0.00014070753,0.026074104,1.0332908,0,4.8670761e-05,0,0,1,0,442,236,0,1)}
.barra-qr__codigo{width:200px;height:200px;fill:#1E140D}
.barra-qr__tarjeta b{margin-top:10px;font:600 23px/1.15 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-style:italic}
.barra-qr__tarjeta span{font:500 17px/1.2 "Barlow",sans-serif;color:#5A4636}
.barra-qr__tarjeta em{font-style:normal;font-size:18px;letter-spacing:.2em;color:#B07A2A}

/* ------------------------------------------------------------ 3. precio y pasos (15-oct-2026)
   Prueba aprobada en pruebas/despegue-precio.html; adaptada de la referencia que dio Bruno */
/* El celular inclinado sale del borde en pantallas angostas: se recorta aquí (iPhone Safari no respeta overflow-x del body) */
.oferta{padding:clamp(56px,8vw,120px) 0;overflow-x:hidden;overflow-x:clip}
.oferta__escena{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;max-width:1120px;margin:0 auto}
.oferta__clara,.oferta__oscura{position:relative;border-radius:28px;overflow:hidden;isolation:isolate}
.oferta__clara{min-height:440px;display:flex;flex-direction:column;padding:44px 170px 36px 44px;background:radial-gradient(70% 80% at 15% 10%,#FBF3E7,rgba(251,243,231,0) 70%),linear-gradient(150deg,#F2E3CE,#E2C29C);color:#2B1A10}
.oferta__oscura{min-height:520px;margin-left:-28px;padding:52px 44px 44px 190px;background:#161719;color:var(--lume);display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.oferta__clara::after,.oferta__oscura::after{content:"";position:absolute;inset:0;z-index:-1;background:url("/assets/grano.webp");opacity:.3;mix-blend-mode:multiply;pointer-events:none}
.oferta__oscura::after{mix-blend-mode:screen;opacity:.08}
.oferta h2{font-weight:600;font-size:clamp(30px,3vw,42px);line-height:1.04;letter-spacing:-.022em;text-wrap:balance}
.oferta__lista{position:relative;max-width:290px;margin-top:26px}
.oferta__pasos{display:flex;flex-direction:column;gap:10px}
.oferta__pasos li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.55);box-shadow:0 1px 0 rgba(255,255,255,.7) inset;font-weight:500;font-size:16px}
.oferta__pasos li span{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:rgba(43,26,16,.08);font-size:13px;font-weight:600}
.oferta__sello{position:absolute;right:-42px;bottom:-16px;z-index:2;display:inline-flex;white-space:nowrap;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#fff;box-shadow:0 8px 20px -8px rgba(43,26,16,.35);font:600 12.5px/1 "Barlow",sans-serif;color:#2B1A10;transform:rotate(-6deg)}
.oferta__sello svg{width:14px;height:14px;color:#1F8A4E}
.oferta__nota{max-width:290px;margin-top:auto;padding-top:36px;font-size:13.5px;line-height:1.4;color:#6E5A48}
.oferta__precio{margin-top:28px;font-weight:600;font-size:clamp(56px,6vw,84px);line-height:.95;letter-spacing:-.04em}
.oferta__precio span{font-weight:500;font-size:.38em;letter-spacing:-.01em}
.oferta__iva{margin-top:8px;font-size:16px;color:var(--lume-2)}
.oferta__datos{margin-top:18px;font-size:15px;line-height:1.5;color:var(--lume-2)}
.oferta__datos b{color:var(--naranja);font-weight:600}
/* Contacto: botón principal, videollamada en blanco sólido y el teléfono aparte, legible y con su propio toque */
.oferta__acciones{display:flex;flex-direction:column;gap:12px;width:100%;max-width:380px;margin-top:auto;padding-top:28px}
.oferta__acciones .btn{justify-content:center}
.oferta__video{background:#fff;color:var(--tinta);font-weight:600}
.oferta__tel{display:flex;flex-direction:column;align-items:inherit;gap:4px;width:100%;max-width:380px;margin-top:20px;padding-top:18px;border-top:1px solid var(--linea-inv);color:var(--lume)}
.oferta__tel span{font:600 12px/1.2 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:var(--lume-2)}
.oferta__tel b{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:clamp(24px,2.2vw,30px);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.oferta__tel svg{width:22px;height:22px;flex:none;color:var(--naranja)}
.oferta__cel{position:absolute;left:50%;top:50%;z-index:3;width:290px;transform:translate(-55%,-50%) rotate(9deg)}
/* Sombra con box-shadow sobre el marco redondo: el drop-shadow del contenedor girado dejaba en iPhone una esquina recta */
.oferta__cel .cel{width:100%;box-shadow:0 0 0 1px rgba(241,236,224,.14),0 44px 60px -24px rgba(20,10,4,.5)}

/* Celular de pie */
@media (max-width:1060px),(orientation:landscape) and (max-height:500px){
  .oferta__escena{grid-template-columns:1fr;gap:0}
  .oferta__clara{min-height:0;padding:30px 47% 30px 20px}
  .oferta__clara h2{font-size:28px}
  .oferta__pasos li{padding:9px 10px;font-size:14px;gap:8px}
  .oferta__pasos li span{width:22px;height:22px;font-size:12px}
  .oferta__lista{max-width:none}
  .oferta__sello{right:auto;left:-6px;bottom:-30px;font-size:11.5px;transform:rotate(-4deg)}
  .oferta__nota{padding-top:40px}
  .oferta__oscura{min-height:0;margin:-24px 0 0;padding:44px 22px 26px;align-items:flex-start;text-align:left}
  .oferta__precio{margin-top:16px}
  .oferta__acciones{max-width:none;margin-top:0}
  .oferta__tel{max-width:none}
  .oferta__cel{left:auto;right:-18px;top:40px;width:min(45%,200px);transform:rotate(9deg)}
}
@media (max-width:480px){.oferta__acciones .btn{gap:8px;padding:0 12px;font-size:15px}}
/* Pantalla baja: la tarjeta oscura en dos columnas para no alargarse */
@media (orientation:landscape) and (max-height:500px){
  .oferta__oscura{display:grid;grid-template-columns:1fr auto;column-gap:32px;align-items:end}
  .oferta__oscura h2,.oferta__datos{grid-column:1}
  .oferta__precio,.oferta__iva{grid-column:1}
  .oferta__acciones{grid-column:2;grid-row:1 / span 4;align-self:end;min-width:320px}
  .oferta__tel{grid-column:1 / span 2}
}

/* ------------------------------------------------------------ 5. confianza (15-oct-2026)
   Cada compromiso es un documento real de Café Arista; cierra el módulo de videollamada */
.confianza{padding:var(--seccion) 0;background:var(--superficie)}
.confianza .h2{margin-bottom:clamp(48px,6vw,88px)}
  .conf2__rejilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.c2{display:flex;flex-direction:column;gap:10px}
.c2 h3{margin-top:12px;font-weight:600;font-size:22px;line-height:1.15;letter-spacing:-.01em}
.c2 > p{font-size:16px;line-height:1.5;color:var(--tinta-2);text-wrap:pretty}
.c2__pieza{position:relative;height:300px;border-radius:24px;overflow:hidden;isolation:isolate;display:grid;place-items:center;padding:22px;
  background:radial-gradient(120% 90% at 20% 0%,#F6EADB,rgba(246,234,219,0) 60%),linear-gradient(160deg,#EAD8C2,#D2B596)}
.c2__pieza::after{content:"";position:absolute;inset:0;z-index:-1;background:url("/assets/grano.webp");opacity:.3;mix-blend-mode:multiply}
.c2__pieza > *{box-shadow:0 22px 34px -20px rgba(43,26,16,.5),0 2px 6px rgba(43,26,16,.08)}
/* 1. términos y factura */
.c2__pieza--papeles{place-items:start}
.hoja{position:absolute;left:18px;top:20px;width:66%;padding:16px 16px 14px;border-radius:6px;background:#FFFDF8;transform:rotate(-4deg);font-family:"Barlow",sans-serif;color:#2B2A27}
.hoja__tit{font-weight:600;font-size:14px}
.hoja__sub{font-size:10px;letter-spacing:.06em;color:#8A847A}
.hoja ol{list-style:none;display:flex;flex-direction:column;gap:6px;margin:12px 0}
.hoja li{display:flex;gap:7px;font-size:10.5px;line-height:1.3;color:#4A4741}
.hoja li b{color:#B63A0B;font-weight:600}
.hoja__firmas{display:flex;gap:12px;padding-top:6px}
.hoja__firmas span{flex:1;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid #CFC8BC;padding-bottom:3px;min-height:34px;justify-content:flex-end}
.hoja__firmas i{font-style:normal;font-size:9px;color:#8A847A;order:2;margin-top:3px}
.firma{width:84px;height:24px}
.firma--fl{width:72px;height:20px}
.cfdi{position:absolute;right:16px;bottom:18px;width:62%;padding:13px 14px;border-radius:12px;background:#fff;transform:rotate(3deg);font-family:"Barlow",sans-serif;color:#1A1B1E}
.cfdi__cab{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:7px;margin-bottom:6px;border-bottom:1px solid #ECE8E1}
.cfdi__cab b{font-size:14px}
.cfdi__cab span{font-size:9.5px;letter-spacing:.08em;color:#8A847A}
.cfdi__fila,.cfdi__total{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;line-height:1.75}
.cfdi__fila span,.cfdi__total span{color:#8A847A}
.cfdi__fila b{font-weight:500}
.cfdi__fila .cfdi__ppd{padding:0 6px;border-radius:4px;background:#FFE9DE;color:#B63A0B;font-weight:600}
.cfdi__total{margin-top:4px;padding-top:5px;border-top:1px solid #ECE8E1;font-size:12px}
.cfdi__total b{font-weight:600}
.cfdi__comp{margin-top:7px;padding:5px 8px;border-radius:6px;background:#E8F5EC;font-size:9.5px;font-weight:600;color:#1E7A3C}
/* 2. cuentas a nombre del cliente */
.cuenta{width:100%;padding:16px;border-radius:16px;background:#fff;font-family:"Barlow",sans-serif;color:#1A1B1E}
.cuenta__dom{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:9px 12px;border-radius:10px;background:#F4EFE8;font:600 16px/1 -apple-system,"Helvetica Neue",sans-serif}
.cuenta__dom svg{width:13px;height:13px;color:#3E9B5B}
.cuenta__fila{display:flex;justify-content:space-between;gap:10px;padding:7px 2px;border-bottom:1px solid #F0ECE5;font-size:11.5px}
.cuenta__fila span{color:#8A847A}
.cuenta__fila b{font-weight:600;text-align:right}
.cuenta__sello{margin-top:11px;padding:7px 10px;border-radius:999px;background:#121316;color:#F1ECE0;font:600 11px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;text-align:center}
/* 3. aprobación por WhatsApp */
.c2__pieza--chat{background:#EFE9E1}
.c2__pieza--chat > *{box-shadow:none}
.ap{width:100%;display:flex;flex-direction:column;gap:10px;font-family:"Barlow",sans-serif}
.ap__msg{position:relative;max-width:86%;padding:6px 6px 8px;border-radius:14px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.ap__msg p{padding:6px 6px 0;font-size:13.5px;line-height:1.35;color:#1A1B1E}
.ap__msg small{display:flex;align-items:center;justify-content:flex-end;gap:3px;padding:2px 6px 0;font-size:10.5px;color:#667781}
.ap__msg small svg{width:15px;height:10px}
.ap__msg--fl{align-self:flex-start;background:#fff;border-top-left-radius:4px}
.ap__msg--fl img{display:block;width:100%;height:96px;object-fit:cover;object-position:50% 70%;border-radius:10px}
.ap__url{position:absolute;left:12px;top:12px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.9);font-size:10px;color:#2B1A10}
.ap__msg--yo{align-self:flex-end;padding:2px 4px 6px;background:#D9FDD3;border-top-right-radius:4px}
/* 4. pagos */
.pagos{width:100%;padding:16px;border-radius:16px;background:#161719;color:#F1ECE0;font-family:"Barlow",sans-serif}
.pagos__tit{font:600 11px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:#A39E93}
.pagos__barra{display:flex;gap:4px;margin:14px 0 12px}
.pagos__barra i{flex:1;height:10px;border-radius:999px;background:rgba(241,236,224,.14)}
.pagos__barra i:first-child{background:#FF5A1F}
.pagos__fila{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid rgba(241,236,224,.12)}
.pagos__fila b{display:block;font-weight:600;font-size:13px}
.pagos__fila small{display:block;font-size:11px;color:#A39E93}
.pagos__fila em{font-style:normal;font-weight:600;font-size:14px;white-space:nowrap}
.pagos__fila--ok em{color:#7CD69B}
@media (max-width:1100px){.conf2__rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}}
@media (max-width:640px){.conf2__rejilla{grid-template-columns:1fr;gap:44px}.c2__pieza{height:280px}}

/* Módulo de videollamada */
.vc{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:24px;min-height:470px;margin-top:clamp(56px,7vw,96px);
  border-radius:28px;overflow:hidden;isolation:isolate;background:#161719;color:#F1ECE0}
.vc::before{content:"";position:absolute;right:-10%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,rgba(255,90,31,.32),rgba(255,90,31,0))}
.vc::after{content:"";position:absolute;inset:0;z-index:-1;background:url("/assets/grano.webp");mix-blend-mode:screen;opacity:.08;pointer-events:none}
.vc__texto{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(32px,4vw,56px)}
.vc__eti{color:#FF8A5C}
.vc__tit{font-weight:600;font-size:clamp(32px,3.4vw,46px);line-height:1.04;letter-spacing:-.025em}
.vc__sub{max-width:26em;font-size:17px;line-height:1.5;color:#A39E93}
.vc__btn{margin-top:8px;background:#fff;color:var(--tinta);font-weight:600}
.vc__visual{position:relative;align-self:stretch;min-height:340px}
.llamada{position:absolute;left:6%;top:78px;width:560px;border-radius:18px;overflow:hidden;background:#232427;box-shadow:0 0 0 1px rgba(241,236,224,.1),0 40px 60px -30px rgba(0,0,0,.7);transform:rotate(-3deg);font-family:"Barlow",sans-serif}
.llamada__barra{display:flex;align-items:center;gap:8px;padding:11px 14px;font-size:12px;color:#C9C4B8}
.llamada__barra em{margin-left:auto;font-style:normal;font-variant-numeric:tabular-nums;color:#8E897F}
.llamada__rec{width:8px;height:8px;border-radius:50%;background:#FF5A1F;box-shadow:0 0 0 4px rgba(255,90,31,.2)}
.llamada__pantalla{display:grid;grid-template-columns:1fr 128px;gap:8px;padding:0 10px}
.llamada__comp{position:relative;height:250px;border-radius:12px;overflow:hidden;background:#F4ECE1}
.llamada__comp img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.llamada__comp::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(30,16,8,.7))}
.llamada__url{position:absolute;left:50%;top:10px;z-index:1;transform:translateX(-50%);padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.88);font-size:11px;color:#2B1A10}
.llamada__comp p{position:absolute;left:16px;bottom:14px;z-index:1;font:400 22px/1.05 "Iowan Old Style",Palatino,Georgia,serif;color:#FBF5EC}
.llamada__comp p i{display:block;font-size:.72em;color:#E9C9A4}
.llamada__tiles{display:flex;flex-direction:column;gap:8px}
.tile{position:relative;flex:1;display:grid;place-items:center;border-radius:12px}
.tile small{position:absolute;left:8px;bottom:6px;font-size:10px;color:#C9C4B8}
.tile--fl{background:#121316;box-shadow:inset 0 0 0 2px #FF5A1F}
.tile--fl img{width:40px;height:40px}
.tile--tu{background:#3A3B3F}
.tile--tu b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#6B3A20;font-weight:600;font-size:14px;color:#F4ECE1}
.llamada__controles{display:flex;justify-content:center;gap:10px;padding:12px}
.llamada__controles i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#3A3B3F;color:#E6E1D6}
.llamada__controles svg{width:17px;height:17px}
.llamada__controles .colgar{width:52px;border-radius:18px;background:#E5484D;color:#fff}
.vc__chip{position:absolute;left:0;top:30px;z-index:2;display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:14px;background:#fff;color:#5C5A55;font-size:12px;box-shadow:0 20px 30px -16px rgba(0,0,0,.6);transform:rotate(2deg)}
.vc__chip b{font-weight:600;font-size:15px;color:#121316}
@media (max-width:860px){
  .vc{grid-template-columns:1fr;gap:0}
  .vc__texto{padding-bottom:8px}
  .vc__visual{min-height:300px}
  .llamada{left:24px;top:40px;width:480px}
  .vc__chip{left:auto;right:18px;top:6px}
  .vc__visual{padding-top:0}
}
@media (max-width:480px){
  .vc{border-radius:22px}
  .vc__visual{min-height:250px}
  .llamada{width:400px}
  .llamada__comp{height:190px}
  .llamada__pantalla{grid-template-columns:1fr 96px}
  .vc__btn{width:100%;justify-content:center;gap:8px;padding:0 12px}
  .vc__visual{min-height:270px}
}

/* ------------------------------------------------------------ 6. preguntas (15-oct-2026): tarjetas por tema */
.preguntas{padding:var(--seccion) 0}
  .p2 .h2{margin-bottom:clamp(36px,5vw,64px)}
.p2__rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.ft{border-radius:24px;background:#FBF9F4;box-shadow:0 0 0 1px rgba(18,19,22,.07),0 18px 36px -28px rgba(43,26,16,.35)}
.ft__cab{display:flex;flex-direction:column;gap:8px;padding:24px 26px 18px;border-bottom:1px solid var(--linea)}
.ft__cab .etiqueta{display:inline-flex;align-items:center;gap:.6em}
.ft__cab .etiqueta::before{content:"";width:.8em;height:.66em;background:#FF5A1F;clip-path:polygon(0 0,100% 0,50% 100%)}
.ft__cab b{font-weight:600;font-size:22px;letter-spacing:-.01em}
.ft__lista{padding:4px 26px 10px}
.ft details + details{border-top:1px solid rgba(18,19,22,.08)}
.ft summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 0;cursor:pointer;list-style:none;font-weight:500;font-size:17px;line-height:1.3}
.ft summary::-webkit-details-marker{display:none}
.ft summary svg{width:26px;height:26px;flex:none;padding:5px;border-radius:50%;background:#EFE8DC;fill:none;stroke:currentColor;stroke-width:2;transition:transform .3s ease,background .3s ease,color .3s ease}
.ft details[open] summary svg{transform:rotate(45deg);background:#121316;color:#F1ECE0}
.ft details p{padding:0 0 18px;font-size:16px;line-height:1.55;color:var(--tinta-2);text-wrap:pretty}
.ft--contacto{position:relative;grid-column:span 2;align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-height:240px;padding:30px;overflow:hidden;isolation:isolate;background:#161719;color:#F1ECE0;box-shadow:none}
.ft--contacto::before{content:"";position:absolute;right:-15%;bottom:-60%;width:60%;aspect-ratio:1;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,rgba(255,90,31,.3),rgba(255,90,31,0))}
.ft__tit{font-weight:600;font-size:clamp(26px,2.4vw,34px);line-height:1.08;letter-spacing:-.02em}
.ft__sub{max-width:28em;font-size:16px;line-height:1.5;color:#A39E93}
.ft__btn{margin-top:auto;background:#fff;color:var(--tinta);font-weight:600}
@media (max-width:1060px){.p2__rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}.ft--contacto{grid-column:span 1}}
@media (max-width:640px){.p2__rejilla{grid-template-columns:1fr}.ft--contacto{grid-column:auto}.ft__cab,.ft__lista{padding-left:20px;padding-right:20px}.ft__btn{width:100%;justify-content:center}}

/* ------------------------------------------------------------ 7. cierre (15-oct-2026) */
.cierre{padding:0}
  /* A sangre con la carta de aproximación (ChatGPT): la primera pantalla es la salida y el cierre el aterrizaje; la pista
   queda detrás del celular del cliente */
.c3__caja{position:relative;overflow:hidden;isolation:isolate;padding:clamp(56px,7vw,104px) 0 0;
  background:url("/img/despegue/carta-aproximacion.webp") 50% 100%/cover no-repeat #F3EEE4;border-block:1px solid var(--linea)}
.c3__caja::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 48% 42% at 50% 26%,rgba(247,244,236,.9),rgba(247,244,236,0))}
.c3__texto{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:820px;margin:0 auto;text-align:center}
.c3__tit{font-weight:600;font-size:clamp(40px,5.4vw,80px);line-height:1;letter-spacing:-.03em;text-wrap:balance}
.c3__sub{max-width:32em;font-size:clamp(17px,1.4vw,20px);line-height:1.45;color:var(--tinta-2)}
.c3__botones{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;margin-top:10px}
.c3__video{background:#fff;color:var(--tinta);font-weight:600;box-shadow:inset 0 0 0 2px var(--tinta),0 14px 28px -14px rgba(43,26,16,.5)}
/* Cuatro negocios y el lugar del tuyo, al centro; salen por el borde inferior de la caja */
.c3__fila{display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,2vw,28px);margin-top:clamp(40px,5vw,64px);height:clamp(250px,26vw,360px)}
.c3__cel{position:relative;flex:none;align-self:flex-start;filter:drop-shadow(0 30px 30px rgba(43,26,16,.25))}
/* El mismo celular de la primera pantalla (270 px) reducido con scale: marco, esquinas y pantalla idénticos a cualquier tamaño */
.c3__cel{--s:.72;width:calc(270px * var(--s));height:calc(570px * var(--s))}
.c3__cel .cel{width:270px;transform:scale(var(--s));transform-origin:0 0}
.c3__cel--2{margin-top:44px}
.c3__cel--1{--s:.62;margin-top:88px;opacity:.9}
.c3__cel--tuyo{--s:.86}
.cel--tuyo{background:#0B0C0E}
.tuyo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:calc(30 * var(--u)) calc(18 * var(--u));
  background:#F7F4EC;border:calc(2 * var(--u)) dashed rgba(255,90,31,.85);border-radius:inherit;font-family:"Barlow",sans-serif;text-align:center;color:#121316}
.tuyo__url{position:absolute;top:calc(36 * var(--u));left:calc(14 * var(--u));right:calc(14 * var(--u));padding:calc(7 * var(--u)) 0;border-radius:999px;background:rgba(18,19,22,.06);font-size:calc(11 * var(--u))}
.tuyo__mas{display:grid;place-items:center;width:calc(64 * var(--u));height:calc(64 * var(--u));border-radius:50%;background:#FF5A1F;color:#121316;font-size:calc(38 * var(--u));line-height:1}
.tuyo b{font-weight:600;font-size:calc(24 * var(--u))}
.tuyo small{font-size:calc(12 * var(--u));color:#5C5A55}
.c3__marca{position:absolute;left:50%;top:-34px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.6em;white-space:nowrap;font:600 12px/1 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:#121316}
.c3__marca::before{content:"";width:.9em;height:.75em;background:#FF5A1F;clip-path:polygon(0 0,100% 0,50% 100%)}
@media (max-width:760px){
  .c3__caja{background-size:auto 820px;background-position:50% 100%}
  .c3__botones{flex-direction:column;width:100%}
  .c3__botones .btn{width:100%;justify-content:center}
  /* Celular: tres en abanico y más grandes, los de los lados detrás del tuyo */
  .c3__fila{height:300px;gap:0;margin-top:64px;margin-left:calc(-1 * var(--lado));margin-right:calc(-1 * var(--lado))}
  .c3__cel{--s:.58}
  .c3__cel--tuyo{--s:.68;z-index:2}
  .c3__cel--2{margin:40px -38px 0}
  .c3__cel--izq{transform:rotate(-6deg)}
  .c3__cel--der{transform:rotate(6deg)}
  .c3__cel--1{display:none}
}

/* ------------------------------------------------------------ pie (15-oct-2026) */
  .pie2{background:var(--tinta);color:var(--lume);padding:clamp(56px,7vw,96px) 0 28px}
.pie2__fila{display:grid;grid-template-columns:1.5fr 1fr 1.1fr .9fr;gap:40px}
.pie2__logo{width:180px;height:auto}
.pie2__marca p{margin-top:18px;max-width:22em;font-size:15px;line-height:1.55;color:var(--lume-2)}
.pie2__col{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.pie2__tit{margin-bottom:4px;font:600 12px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:#FF8A5C}
.pie2__col > a:not(.btn){display:inline-flex;align-items:center;min-height:32px;font-size:16px;color:var(--lume)}
.pie2__col > a:not(.btn):hover{text-decoration:underline;text-underline-offset:3px}
.pie2__wa{min-height:46px;padding:0 18px}
.pie2__col > .pie2__tel{gap:8px;font-weight:600;font-size:20px;font-variant-numeric:tabular-nums}
.pie2__tel svg{width:18px;height:18px;color:#FF5A1F}
.pie2__nota{font-size:14px;color:var(--lume-2)}
.pie2__letra{max-width:820px;margin-top:clamp(48px,6vw,72px);font-size:var(--chica);line-height:1.6;color:var(--lume-2)}
.pie2__base{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:28px;padding-top:18px;border-top:1px solid var(--linea-inv);font:500 12px/1.2 var(--cond);letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--lume-2)}
.pie2__base b{font-weight:500;color:var(--lume)}
.pie2__base a{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;color:var(--lume)}
@media (max-width:900px){.pie2__fila{grid-template-columns:1fr 1fr}.pie2__marca{grid-column:1 / -1}}
@media (max-width:520px){.pie2__fila{grid-template-columns:1fr;gap:32px}.pie2__base a{margin-left:0}}

/* ------------------------------------------------------------ flotante (el de la home; regla 29 y halo de la regla 44) */
.flotante{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:85;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border-radius:999px;background:#25D366;color:#fff;font:600 1rem/1 "Barlow",sans-serif;text-shadow:0 0 1px rgba(0,0,0,.75),0 1px 2px rgba(0,0,0,.4);box-shadow:0 10px 30px rgba(37,211,102,.42);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(16px) scale(.92);transition:background .15s,opacity .3s,transform .3s,visibility .3s}
.flotante:hover{background:#1EBE5B}
.flotante:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
.flotante svg{filter:drop-shadow(0 0 1px rgba(0,0,0,.6))}
.flotante span{white-space:nowrap}
.flotante--visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}
@media (max-width:640px){
  .flotante{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:58px;height:58px;padding:0;border-radius:50%}
  .flotante svg{width:28px;height:28px}
  .flotante span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

/* ------------------------------------------------------------ entradas suaves (regla 39: clase, animación e IntersectionObserver)
   Solo lo que está debajo de la ventana al cargar espera en opacidad 0; lo visible no se anima */
.espera{opacity:0}
.entra{animation:entra 700ms cubic-bezier(.2,.7,.2,1) both}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ pantalla baja (celular acostado, regla 61)
   Nada es fijo; la primera pantalla pasa a dos columnas para que texto, precio, botones y celular quepan juntos */
@media (orientation:landscape) and (max-height:500px){
  .etapa{grid-template-columns:minmax(0,1fr) auto;justify-items:stretch}
  .etapa__texto{justify-self:end;text-align:right}
  /* WhatsApp en círculo, como en la home acostada */
  .flotante{right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:52px;height:52px;padding:0;border-radius:50%}
  .flotante svg{width:26px;height:26px}
  .flotante span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .espera{opacity:1}
}