:root{
  --blue:#1A56DB;--cobalt-dark:#1447B8;--celeste:#2D7DD2;
  --white:#FFFFFF;--light-bg:#F0F5FF;--surface:#F5F8FC;
  --text:#111827;--text-soft:#475569;--border:#D1DCF0;
  --error-border:#F5A8A8;--error-bg:#FFF0F0;
  --header-h:80px;

  /* ── ESCALA TIPOGRÁFICA ──────────────────────────────
     Títulos (headings)
     --fs-h1    Hero principal                 clamp(2.8rem, 5.5vw, 5rem)
     --fs-h2    Título de sección              clamp(1.7rem, 2.8vw, 2.4rem)
     --fs-h2-lg Título grande (¿Por qué?)      clamp(2.2rem, 4vw, 3.6rem)
     --fs-h3    Subtítulo / card title         1.05rem
     --fs-pres  Título sección presentación    clamp(1.9rem, 3vw, 2.8rem)

     Párrafos / cuerpo
     --fs-body  Texto corriente                1rem  (16px)
     --fs-p     Párrafo de sección             1rem  (16px)
     --fs-sm    Texto secundario               1rem  (16px)
     --fs-xs    Labels, badges                 0.8125rem (13px)
     --fs-xxs   Pie de página, meta            0.75rem (12px)

     UI
     --fs-btn   Botones y nav                  0.8125rem (13px)
     --fs-tag   Etiquetas s-tag                0.8125rem (13px)

     Stat números
     --fs-stat  Números destacados             2rem
  ─────────────────────────────────────────────────── */
  --fs-h1:     clamp(2.8rem, 5.5vw, 5rem);
  --fs-h2:     clamp(1.7rem, 2.8vw, 2.4rem);
  --fs-h2-lg:  clamp(2.2rem, 4vw, 3.6rem);
  --fs-h3:     1.05rem;
  --fs-pres:   clamp(1.9rem, 3vw, 2.8rem);
  --fs-body:   1rem;
  --fs-p:      1rem;
  --fs-sm:     1rem;
  --fs-xs:     0.8125rem;
  --fs-xxs:    0.75rem;
  --fs-btn:    0.8125rem;
  --fs-tag:    0.8125rem;
  --fs-stat:   2rem;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:'Outfit',sans-serif;background:var(--white);color:var(--text);overflow-x:hidden;max-width:100vw}

/* Tipografía corporativa — Outfit optimizado */
h1,h2,h3,h4,h5,h6,
nav a, .dd-trigger, .mob-nav a,
.btn-blue, .btn-ghost, .nav-cta,
.s-tag, .pres-tag span,
.porque-tag, .pq-name, .svc-name, .cf-step-title,
.foot-brand-name, .foot-col h4, .foot-bottom-links a, .foot-rec-btn,
.svc-link, .pres-quote cite{
  font-family:'Outfit',sans-serif;
}

/* ══════════════════════════════════════════════════════════
   SISTEMA DE ANIMACIONES PREMIUM — Miranda Tours
   Todas las animaciones usan transform + opacity → 60 FPS
   Intersection Observer: se ejecutan UNA sola vez
   ══════════════════════════════════════════════════════════ */

/* ── Keyframes base ─────────────────────────────────────── */
@keyframes mtFadeUp{
  from{ opacity:0; transform:translateY(40px) }
  to  { opacity:1; transform:translateY(0) }
}
@keyframes mtFadeLeft{
  from{ opacity:0; transform:translateX(-60px) }
  to  { opacity:1; transform:translateX(0) }
}
@keyframes mtFadeRight{
  from{ opacity:0; transform:translateX(60px) }
  to  { opacity:1; transform:translateX(0) }
}
@keyframes mtScaleUp{
  from{ opacity:0; transform:scale(.88) translateY(20px) }
  to  { opacity:1; transform:scale(1) translateY(0) }
}
@keyframes mtCardIn{
  from{ opacity:0; transform:translateY(32px) scale(.95) }
  to  { opacity:1; transform:translateY(0) scale(1) }
}
@keyframes mtBlurUp{
  from{ opacity:0; transform:translateY(28px); filter:blur(4px) }
  to  { opacity:1; transform:translateY(0);    filter:blur(0px) }
}

/* ── Estado inicial: todos los animables comienzan ocultos ─ */
/* Se aplica vía JS al observar, para no romper la carga inicial */

/* ── Hero: sin animación de sección, entra directo ─────── */
.hero.section-reveal{ opacity:1; transform:none; }

/* ── SECCIÓN 1: Presentación ─────────────────────────────── */
.pres-anim-left,
.pres-anim-right{
  opacity:0;
  will-change:opacity,transform;
}
.pres-anim-left.mt-visible{
  animation:mtFadeLeft 1400ms cubic-bezier(.22,1,.36,1) forwards;
}
.pres-anim-right.mt-visible{
  animation:mtFadeRight 1400ms cubic-bezier(.22,1,.36,1) forwards;
}

/* ── SECCIÓN 2: Servicios — intro desde derecha ──────────── */
.svc-intro-anim{
  opacity:0;
  will-change:opacity,transform;
}
.svc-intro-anim.mt-visible{
  animation:mtFadeRight 1300ms cubic-bezier(.22,1,.36,1) forwards;
}

/* Tarjetas: escalonadas con card-in */
.svc-card-anim{
  opacity:0;
  will-change:opacity,transform;
}
.svc-card-anim.mt-visible{
  animation:mtCardIn 1100ms cubic-bezier(.22,1,.36,1) forwards;
}
/* delays para las 5 tarjetas */
.svc-card-anim:nth-child(1).mt-visible{ animation-delay:0ms }
.svc-card-anim:nth-child(2).mt-visible{ animation-delay:250ms }
.svc-card-anim:nth-child(3).mt-visible{ animation-delay:500ms }

/* grid-bottom: continúa la secuencia */
.svc-grid-bottom .svc-card-anim:nth-child(1).mt-visible{ animation-delay:0ms }
.svc-grid-bottom .svc-card-anim:nth-child(2).mt-visible{ animation-delay:250ms }

/* Hover de imagen premium */
.svc-img img{
  transition:transform 850ms cubic-bezier(.22,1,.36,1);
}
.svc-card:hover .svc-img img{ transform:scale(1.05) }

/* ── SECCIÓN 3: ¿Por qué elegirnos? ─────────────────────── */
.pq-header-anim{
  opacity:0;
  will-change:opacity,transform;
}
.pq-header-anim.mt-visible{
  animation:mtFadeUp 1300ms cubic-bezier(.22,1,.36,1) forwards;
}
.pq-car-anim{
  opacity:0;
  will-change:opacity,transform;
}
.pq-car-anim.mt-visible{
  animation:mtScaleUp 1400ms cubic-bezier(.22,1,.36,1) 200ms forwards;
}
/* 4 bloques: TL, TR, BL, BR */
.pq-item-anim{
  opacity:0;
  will-change:opacity,transform;
}
.pq-item-anim.mt-visible{
  animation:mtCardIn 1100ms cubic-bezier(.22,1,.36,1) forwards;
}
/* delays por posición */
.pq-item-anim[data-delay="0"].mt-visible  { animation-delay:0ms }
.pq-item-anim[data-delay="1"].mt-visible  { animation-delay:280ms }
.pq-item-anim[data-delay="2"].mt-visible  { animation-delay:560ms }
.pq-item-anim[data-delay="3"].mt-visible  { animation-delay:840ms }

/* ── SECCIÓN 4: Cómo funciona ─────────────────────────────── */
/* Título desde la derecha */
.cf-title-anim{
  opacity:0;
  will-change:opacity,transform;
}
.cf-title-anim.mt-visible{
  animation:mtFadeRight 1300ms cubic-bezier(.22,1,.36,1) forwards;
}
/* Pasos: blur-up escalonado */
.cf-step-anim{
  opacity:0;
  will-change:opacity,transform,filter;
}
.cf-step-anim.mt-visible{
  animation:mtBlurUp 1200ms cubic-bezier(.22,1,.36,1) forwards;
}
.cf-step-anim[data-delay="0"].mt-visible{ animation-delay:300ms }
.cf-step-anim[data-delay="1"].mt-visible{ animation-delay:580ms }
.cf-step-anim[data-delay="2"].mt-visible{ animation-delay:860ms }

/* ── SECCIÓN 5: Contacto — contenido izquierda ────────────── */
.contact-intro-anim{
  opacity:0;
  will-change:opacity,transform;
}
.contact-intro-anim.mt-visible{
  animation:mtFadeLeft 1300ms cubic-bezier(.22,1,.36,1) forwards;
}

/* ── SECCIÓN 6: Ubicación ─────────────────────────────────── */
.location-text-anim,
.location-map-anim{
  opacity:0;
  will-change:opacity,transform;
}
.location-text-anim.mt-visible{
  animation:mtFadeRight 1300ms cubic-bezier(.22,1,.36,1) forwards;
}
.location-map-anim.mt-visible{
  animation:mtFadeRight 1300ms cubic-bezier(.22,1,.36,1) 280ms forwards;
}

/* ── SECCIÓN 7: Info de contacto (ítems) ─────────────────── */
.contact-item-anim{
  opacity:0;
  will-change:opacity,transform;
}
.contact-item-anim.mt-visible{
  animation:mtFadeUp 1000ms cubic-bezier(.22,1,.36,1) forwards;
}
.contact-item-anim[data-delay="0"].mt-visible{ animation-delay:0ms }
.contact-item-anim[data-delay="1"].mt-visible{ animation-delay:220ms }
.contact-item-anim[data-delay="2"].mt-visible{ animation-delay:440ms }
.contact-item-anim[data-delay="3"].mt-visible{ animation-delay:660ms }

/* ── Clases .reveal legadas: neutralizadas ──────────────── */
.reveal{ }
.reveal.from-left  { }
.reveal.from-right { }
.reveal.scale-up   { }
.reveal.visible,.reveal.from-left.visible,.reveal.from-right.visible,
.reveal.scale-up.visible,.reveal-d1.visible,.reveal-d2.visible,
.reveal-d3.visible,.reveal-d4.visible{ }

/* ── section-reveal: solo el hero lo usa activamente ─────── */
@keyframes sectionFadeUp{
  from{ opacity:0; transform:translateY(36px) }
  to  { opacity:1; transform:translateY(0) }
}
.section-reveal{
  opacity:0;
  transform:translateY(36px);
  will-change:opacity,transform;
}
.section-reveal.visible{
  animation:sectionFadeUp 1400ms cubic-bezier(.22,1,.36,1) forwards;
}

/* ── Cómo funciona: fondo siempre visible, sin animación de sección ── */
#como-funciona{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
  will-change:auto !important;
}

/* ── Dropdown animation */
@keyframes dropSlide{
  from{opacity:0;transform:translateY(-10px) scaleY(.96);transform-origin:top center}
  to  {opacity:1;transform:translateY(0)     scaleY(1);transform-origin:top center}
}

/* HEADER */
#header{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--header-h);display:flex;align-items:center;padding:0 8%;background:transparent;transition:background .4s,backdrop-filter .4s,box-shadow .4s}
#header.scrolled{background:rgba(10,20,45,.96);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.header-line{position:absolute;bottom:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.60) 20%,rgba(255,255,255,.72) 50%,rgba(255,255,255,.60) 80%,rgba(255,255,255,.40) 100%);pointer-events:none}
.nav-logo{flex-shrink:0}
.nav-logo img{height:56px;width:auto;display:block}
nav{flex:1;display:flex;align-items:center;justify-content:center;gap:6px}
nav a{color:rgba(255,255,255,.95);text-decoration:none;font-size:var(--fs-btn);font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:6px;position:relative;white-space:nowrap;transition:color .2s}
@keyframes navIndicatorSettle{0%{height:2.2px}55%{height:1.7px}100%{height:1.5px}}
nav a::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%) scaleX(0);transform-origin:center;width:calc(100% - 22px);height:1.5px;background:var(--celeste);opacity:0;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .4s ease;animation:navIndicatorSettle .5s cubic-bezier(.33,1,.68,1) both;border-radius:2px}
nav a:hover{color:#fff}
nav a:hover::after,nav a.active::after{transform:translateX(-50%) scaleX(1);opacity:1;animation:none;transition:transform .45s cubic-bezier(.65,0,.35,1),opacity .35s ease}
nav a.active{color:#fff}
.dd-wrap{position:relative}
.dd-trigger{color:rgba(255,255,255,.95);font-size:var(--fs-btn);font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap;position:relative;transition:color .2s;user-select:none}
.dd-trigger::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%) scaleX(0);width:calc(100% - 22px);height:1.5px;background:var(--celeste);transition:transform .25s ease;border-radius:2px}
.dd-wrap:hover .dd-trigger,.dd-wrap.open .dd-trigger{color:#fff}
.dd-wrap:hover .dd-trigger::after,.dd-wrap.open .dd-trigger::after{transform:translateX(-50%) scaleX(1)}
.chev{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s;display:inline-block}
.dd-wrap:hover .chev,.dd-wrap.open .chev{transform:rotate(-135deg) translateY(0)}
.dd-menu{
  position:fixed;
  top:var(--header-h);
  left:0; /* overridden by JS */
  min-width:210px;
  background:var(--white);
  border:1px solid var(--border);
  border-top:2px solid var(--blue);
  border-radius:0 0 14px 14px;
  padding:6px 6px 8px 6px;
  box-shadow:0 24px 56px rgba(37,99,235,.16);
  opacity:0;
  pointer-events:none;
  transform:translateY(-6px);
  transform-origin:top center;
  transition:opacity .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1);
}
.dd-menu.open{opacity:1;pointer-events:all;transform:translateY(0)}
.dd-menu a{display:block;padding:10px 16px;border-radius:8px;font-size:.84rem;color:var(--text);text-transform:none;letter-spacing:.03em;transition:background .18s,color .18s,padding-left .18s}
.dd-menu a::after{display:none!important}
.dd-menu a:hover{background:var(--light-bg);color:var(--blue);padding-left:22px}
.nav-cta{background:var(--blue)!important;color:#fff!important;padding:9px 24px!important;border-radius:100px!important;font-weight:600!important;letter-spacing:.06em;text-transform:uppercase;font-size:var(--fs-btn);text-decoration:none;white-space:nowrap;flex-shrink:0;transition:background .20s!important}
.nav-cta::after{display:none!important}
.nav-cta:hover{background:var(--cobalt-dark)!important}

/* HAMBURGER */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none;margin-left:auto;z-index:1100}
.hamburger span{display:block;width:24px;height:2px;background:var(--white);border-radius:2px;transition:transform .35s cubic-bezier(.23,1,.32,1),opacity .25s,width .3s;transform-origin:left center}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(1px,-1px)}
.hamburger.open span:nth-child(2){opacity:0;width:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(1px,1px)}

/* MOBILE NAV */
.mob-nav{display:none;position:fixed;inset:0;z-index:999;background:rgba(10,20,45,.98);flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s ease}
.mob-nav.open{opacity:1;pointer-events:all}
.mob-nav-items{display:flex;flex-direction:column;align-items:center;width:100%;max-width:340px}
.mob-nav a,.mob-link{color:rgba(255,255,255,.72);text-decoration:none;font-size:1.4rem;font-weight:500;letter-spacing:.10em;text-transform:uppercase;padding:18px 0;width:100%;text-align:center;border-bottom:1px solid rgba(255,255,255,.07);cursor:pointer;opacity:0;transform:translateY(22px);transition:color .25s,opacity .4s ease,transform .4s ease}
.mob-nav.open a,.mob-nav.open .mob-link{opacity:1;transform:translateY(0)}
.mob-nav.open a:nth-child(1),.mob-nav.open .mob-link:nth-child(1){transition-delay:.05s}
.mob-nav.open a:nth-child(2),.mob-nav.open .mob-link:nth-child(2){transition-delay:.10s}
.mob-nav.open a:nth-child(3),.mob-nav.open .mob-link:nth-child(3){transition-delay:.15s}
.mob-nav.open a:nth-child(4),.mob-nav.open .mob-link:nth-child(4){transition-delay:.20s}
.mob-nav.open a:nth-child(5),.mob-nav.open .mob-link:nth-child(5){transition-delay:.25s}
.mob-nav a:hover,.mob-link:hover{color:#fff}
.mob-chev{display:inline-block;font-size:.75rem;margin-left:6px;transition:transform .35s cubic-bezier(.22,1,.36,1);vertical-align:middle;opacity:.7}
.mob-link.open .mob-chev{transform:rotate(180deg);opacity:1}
.mob-sub{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:calc(100% + 0px);
  max-height:0;
  overflow:hidden;
  opacity:0;
  margin-top:0;
  transition:max-height .45s cubic-bezier(.22,1,.36,1), opacity .35s ease, margin-top .35s ease;
}
.mob-sub.open{
  max-height:320px;
  opacity:1;
  margin-top:4px;
}
.mob-sub-inner{
  display:flex;
  flex-direction:column;
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:6px;
  margin:8px 0 4px;
}
.mob-sub a{
  font-size:var(--fs-btn);
  letter-spacing:.10em;
  text-transform:uppercase;
  padding:12px 18px;
  color:rgba(255,255,255,.70);
  border:none!important;
  border-radius:10px;
  text-align:left;
  display:flex;
  align-items:center;
  gap:10px;
  transition:background .22s, color .22s, padding-left .22s;
}
.mob-sub a::before{
  content:'';
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--celeste);
  flex-shrink:0;
  opacity:.7;
  transition:opacity .22s, transform .22s;
}
.mob-sub a:hover{
  background:rgba(59,130,246,.12);
  color:#fff;
  padding-left:22px;
}
.mob-sub a:hover::before{ opacity:1; transform:scale(1.4); }
.mob-cta{margin-top:28px;background:var(--blue)!important;color:#fff!important;border-radius:100px!important;padding:16px 52px!important;font-size:.9rem!important;font-weight:600!important;border:none!important;width:auto!important;letter-spacing:.12em}
.mob-cta:hover{background:var(--celeste)!important}

/* HERO */
.hero{position:relative;width:100%;height:calc(100vh + var(--header-h));min-height:600px;overflow:hidden;cursor:grab;margin-top:calc(-1 * var(--header-h));padding:0!important}
.hero:active{cursor:grabbing}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;height:220px;background:linear-gradient(to bottom,rgba(5,15,40,.65) 0%,transparent 100%);z-index:2;pointer-events:none}
.slides-track{display:flex;height:100%;transition:transform .80s cubic-bezier(.77,0,.175,1)}
.slide{min-width:100%;height:100%;position:relative;overflow:hidden}
.slide-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.07);transition:transform 9s ease-out}
.slide.active .slide-bg{transform:scale(1)}
.slide-overlay{position:absolute;inset:0;background:linear-gradient(110deg,rgba(8,20,50,.68) 0%,rgba(8,20,50,.38) 52%,transparent 100%)}
.slide-content{position:absolute;top:50%;left:8%;max-width:620px;transform:translateY(-50%);opacity:0;transition:opacity .6s ease .25s,transform .6s ease .25s}
.slide.active .slide-content{opacity:1;transform:translateY(-50%)}
.slide-title{font-family:'Outfit',sans-serif;font-size:var(--fs-h1);font-weight:800;line-height:1.08;color:#fff;margin-bottom:16px;letter-spacing:-.02em}
.slide-title strong{font-weight:800;color:#fff;letter-spacing:-.02em}
.slide-desc{font-size:var(--fs-p);font-weight:400;line-height:1.80;color:rgba(255,255,255,.82);max-width:460px;margin-bottom:34px;letter-spacing:.01em}
.slide-btns{display:flex;gap:14px;flex-wrap:wrap}
/* ── ELEVACIÓN COMPARTIDA ──────────────────────────────
   Aplica a todos los botones del sitio (menos footer).
   Un solo lugar para controlar la animación de lift.
   ─────────────────────────────────────────────────── */
.btn-lift{
  transition:transform .30s cubic-bezier(.22,1,.36,1),
             box-shadow .30s cubic-bezier(.22,1,.36,1) !important;
}
.btn-lift:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.16) !important;
}
.btn-lift:active{
  transform:translateY(-1px) !important;
  box-shadow:0 3px 10px rgba(0,0,0,.12) !important;
}

.btn-blue{display:inline-flex;align-items:center;background:var(--blue);color:#fff;text-decoration:none;font-size:var(--fs-btn);font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:13px 28px;border-radius:100px;border:2px solid transparent;cursor:pointer;transition:background .20s}
.btn-blue:hover{background:var(--cobalt-dark)}
.btn-ghost{display:inline-flex;align-items:center;background:transparent;color:#fff;text-decoration:none;font-size:var(--fs-btn);font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:13px 28px;border-radius:100px;border:2px solid rgba(255,255,255,.40);cursor:pointer;transition:border-color .22s,background .22s}
.btn-ghost:hover{border-color:var(--celeste);background:rgba(59,130,246,.12)}
.carousel-dots{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:10}
.dot{width:8px;height:8px;border-radius:100px;background:rgba(255,255,255,.35);cursor:pointer;transition:background .3s,width .3s}
.dot.active{width:28px;background:var(--celeste)}
.carousel-arrows{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;padding:0 20px;pointer-events:none;z-index:10;box-sizing:border-box}
.arrow-btn{pointer-events:all;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .22s,transform .2s}
.arrow-btn:hover{background:rgba(37,99,235,.6);transform:scale(1.1)}

.progress-bar{position:absolute;bottom:0;left:0;height:3px;background:linear-gradient(90deg,var(--cobalt-dark),var(--celeste));z-index:10;width:0%;transition:width 0s}

/* SECTIONS */
section{padding:100px 48px}
.inner{max-width:1180px;margin:0 auto}
.s-tag{display:inline-block;font-size:var(--fs-tag);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.s-title{font-family:'Outfit',sans-serif;font-size:var(--fs-h2);font-weight:600;line-height:1.20;color:var(--text);margin-bottom:16px;letter-spacing:-.02em}
.s-title strong{font-weight:700;color:var(--blue)}
.s-desc{font-size:var(--fs-p);font-weight:400;color:var(--text-soft);line-height:1.82;max-width:540px;margin-bottom:52px}

/* PRESENTACIÓN */
#presentacion{
  background:var(--white);
  padding:80px 48px;
  overflow:hidden;
  position:relative;
}

.pres-wrap{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 480px;
  gap:96px;
  align-items:center;
  position:relative;
  z-index:1;
}

.pres-right img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
  border-radius:4px;
}

.pres-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.pres-tag{
  display:flex;align-items:center;gap:12px;
  margin-bottom:16px;
}
.pres-tag-line{display:block;width:28px;height:1.5px;background:var(--blue);flex-shrink:0}
.pres-tag span{
  font-size:var(--fs-tag);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue);
}

.pres-title{
  font-family:'Outfit',sans-serif;
  font-size:var(--fs-pres);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--text);
  margin-bottom:24px;
}
.pres-title span{color:var(--blue);font-weight:300;display:block}

.pres-rule{display:none}

.pres-body{
  font-size:var(--fs-p);
  color:var(--text-soft);
  line-height:1.82;
  margin-bottom:28px;
}

.pres-quote{
  border-left:3px solid var(--blue);
  padding:16px 20px;
  background:var(--light-bg);
  border-radius:0 8px 8px 0;
  margin-bottom:36px;
}
.pres-quote p{
  font-size:var(--fs-p);
  font-style:italic;
  color:var(--text);
  line-height:1.65;
  margin-bottom:10px;
}
.pres-quote cite{
  font-style:normal;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--blue);
}

.pres-btn{
  border-radius:100px !important;
  margin-top:0;
}

/* Responsive */
@media(max-width:1024px){
  #presentacion{padding:60px 40px}
  .pres-wrap{grid-template-columns:1fr 1fr;gap:60px}
}
@media(max-width:768px){
  #presentacion{padding:56px 32px}
  .pres-wrap{grid-template-columns:1fr;gap:40px}
  .pres-right img{aspect-ratio:4/3}
  .pres-btn{align-self:stretch;text-align:center;justify-content:center}
}
@media(max-width:640px){
  #presentacion{padding:48px 20px}
}

/* POR QUÉ ELEGIRNOS */
#porque{background:var(--white);padding:130px 48px 140px;overflow:hidden;position:relative}
.porque-header{text-align:center;margin-bottom:90px}
.porque-tag{display:inline-block;font-size:var(--fs-tag);font-weight:600;letter-spacing:.30em;text-transform:uppercase;color:var(--blue);margin-bottom:18px}
.porque-h{font-family:'Outfit',sans-serif;font-size:var(--fs-pres);font-weight:700;letter-spacing:-.02em;color:var(--text);line-height:1.1}
.porque-h strong{font-weight:700}
.porque-layout{display:grid;grid-template-columns:1fr 420px 1fr;gap:0 32px;align-items:center;max-width:1200px;margin:0 auto}
.porque-col{display:flex;flex-direction:column;gap:64px}
.porque-col.right{text-align:right}
.pq-item{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.porque-col.right .pq-item{align-items:flex-end}
.pq-icon-wrap{width:64px;height:64px;border-radius:50%;background:var(--light-bg);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;transition:background .4s,box-shadow .4s,transform .4s}
.pq-item:hover .pq-icon-wrap{background:var(--blue);box-shadow:0 14px 36px rgba(26,86,219,.35);transform:scale(1.12)}
.pq-icon-wrap i{font-size:1.25rem;color:var(--blue);transition:color .4s}
.pq-item:hover .pq-icon-wrap i{color:#fff}
.pq-icon-wrap::after{content:'';position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);width:1px;height:22px;background:linear-gradient(to bottom,rgba(26,86,219,.25),transparent)}
.porque-col.right .pq-item:last-child .pq-icon-wrap::after,.porque-col:not(.right) .pq-item:last-child .pq-icon-wrap::after{display:none}
.pq-name{font-size:var(--fs-h3);font-weight:600;color:var(--text);line-height:1.2}
.pq-txt{font-size:var(--fs-sm);color:var(--text-soft);line-height:1.72;max-width:270px}
/* Car wrapper — big & centered */
.porque-car-wrap{width:420px;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center}
/* Outer glowing halo — very visible */
.car-halo{position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(26,86,219,.22) 0%,rgba(45,125,210,.10) 50%,transparent 72%);animation:haloPulse 4s ease-in-out infinite;z-index:0}
@keyframes haloPulse{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.20);opacity:1}}
/* Second larger glow ring */
.car-halo2{position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(26,86,219,.07) 0%,transparent 65%);animation:haloPulse 4s 1.5s ease-in-out infinite;z-index:0}
/* Rotating dashed ring */
.car-ring{position:absolute;width:430px;height:430px;border-radius:50%;border:1.5px dashed rgba(26,86,219,.28);animation:ringRotate 20s linear infinite;z-index:0}
@keyframes ringRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.car-ring::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px 3px rgba(26,86,219,.5)}
/* Second counter-rotating ring */
.car-ring2{position:absolute;width:360px;height:360px;border-radius:50%;border:1px solid rgba(45,125,210,.15);animation:ringRotate 28s linear infinite reverse;z-index:0}
.car-ring2::before{content:'';position:absolute;bottom:-4px;right:20%;width:6px;height:6px;border-radius:50%;background:var(--celeste);box-shadow:0 0 8px 2px rgba(45,125,210,.4)}
.porque-car-wrap img{width:340px;position:relative;z-index:2;margin-left:-20px;filter:drop-shadow(0 32px 56px rgba(0,0,0,.30)) drop-shadow(0 8px 20px rgba(26,86,219,.15));animation:carFloat 5.5s ease-in-out infinite}
@keyframes carFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(.4deg)}}
/* Floating dots */
.car-dot{position:absolute;border-radius:50%;background:var(--blue);opacity:0;animation:dotAppear 4.5s ease-in-out infinite;z-index:1}
@keyframes dotAppear{0%,100%{opacity:0;transform:scale(0)}40%,60%{opacity:.6;transform:scale(1)}}
.car-dot-1{width:7px;height:7px;top:8%;left:12%;animation-delay:0s}
.car-dot-2{width:5px;height:5px;top:15%;right:10%;animation-delay:1.4s}
.car-dot-3{width:8px;height:8px;bottom:15%;left:8%;animation-delay:2.8s;background:var(--celeste)}
.car-dot-4{width:4px;height:4px;bottom:10%;right:15%;animation-delay:1s}
.car-dot-5{width:6px;height:6px;top:50%;left:4%;animation-delay:.6s;background:rgba(26,86,219,.5)}
.car-dot-6{width:5px;height:5px;top:45%;right:4%;animation-delay:2.2s}
@media(max-width:960px){
  #porque{padding:80px 32px 90px}
  .porque-layout{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    gap:48px 0;
  }
  /* Orden mobile: carro → col izquierda → col derecha */
  .porque-car-wrap{ order:1; display:flex; width:100%; justify-content:center }
  .porque-car-wrap img{ width:260px; margin-left:-16px }
  .car-halo{ width:280px; height:280px }
  .car-halo2{ width:360px; height:360px }
  .car-ring{ width:320px; height:320px }
  .car-ring2{ width:260px; height:260px }
  .porque-col:not(.right){ order:2 }
  .porque-col.right{ order:3; text-align:left }
  .porque-col{ gap:40px }
  .porque-col.right .pq-item{ align-items:flex-start }
  .porque-h{font-size:clamp(2rem,5vw,3rem)}
  .porque-header{margin-bottom:60px}
}
@media(max-width:640px){
  #porque{padding:72px 20px 80px}
  .porque-header{margin-bottom:48px}
  .porque-h{font-size:var(--fs-pres)}
  .porque-car-wrap img{ width:200px; margin-left:-12px }
  .car-halo{ width:220px; height:220px }
  .car-halo2{ width:280px; height:280px }
  .car-ring{ width:250px; height:250px }
  .car-ring2{ width:200px; height:200px }
  .porque-col,.porque-col.right{gap:0;text-align:left}
  .pq-item,.porque-col.right .pq-item{flex-direction:row;align-items:flex-start;gap:18px;padding:22px 0;border-bottom:1px solid var(--border)}
  .porque-col:last-child .pq-item:last-child{border-bottom:none}
  .pq-icon-wrap::after{display:none}
  .pq-icon-wrap{width:52px;height:52px;flex-shrink:0}
  .pq-name{font-size:var(--fs-body)}
  .pq-txt{font-size:var(--fs-sm);max-width:none}
}

/* ── Ajuste tablet (iPad Air y similares) — evita que las 4 tarjetas
   queden apiladas en una sola columna; las reparte en 2 columnas
   con el auto centrado arriba ────────────────────────────────── */
@media(min-width:641px) and (max-width:1024px){
  .porque-layout{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    gap:56px 40px;
    max-width:700px;
  }
  .porque-car-wrap{
    grid-column:1/-1;
    order:1;
    width:100%;
    justify-content:center;
  }
  .porque-col:not(.right){ order:2 }
  .porque-col.right{ order:3; text-align:right }
  .porque-col.right .pq-item{ align-items:flex-end }
}

/* SERVICIOS */
#servicios{background:var(--surface);padding:100px 48px}
.svc-intro{max-width:780px;margin:0 auto 64px;text-align:center}
.svc-intro .s-desc{max-width:100%;margin-bottom:0}

/* Grid: 3 arriba + 2 centrados abajo */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  max-width:1190px;
  margin:0 auto;
}
.svc-grid-bottom{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
  max-width:790px;
  margin:22px auto 0;
}

/* Card */
.svc-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .38s cubic-bezier(.22,1,.36,1), border-color .38s, box-shadow .38s;
}
.svc-card:hover{
  transform:translateY(-6px);
  border-color:rgba(45,125,210,.35);
  box-shadow:0 16px 40px rgba(0,0,0,.08);
}

/* Imagen superior */
.svc-img{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--light-bg);
}
.svc-img img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.svc-card:hover .svc-img img{transform:scale(1.06)}

/* Ícono flotante sobre la imagen (esquina inferior derecha) */
.svc-img-icon{
  position:absolute;
  bottom:12px;right:12px;
  width:38px;height:38px;
  border-radius:10px;
  background:rgba(10,20,45,.70);
  border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  transition:background .30s;
}
.svc-card:hover .svc-img-icon{background:var(--blue)}
.svc-img-icon i{font-size:.82rem;color:#fff}

/* Cuerpo de la card */
.svc-body{
  padding:22px 24px 24px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.svc-name{
  font-size:var(--fs-h3);
  font-weight:600;
  color:var(--text);
  margin-bottom:8px;
  line-height:1.25;
}
.svc-txt{
  font-size:var(--fs-sm);
  color:var(--text-soft);
  line-height:1.65;
  flex:1;
  margin-bottom:18px;
}

/* Link inferior */
.svc-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue);
  text-decoration:none;
  border-top:1px solid var(--border);
  padding-top:16px;
  transition:gap .25s, color .22s;
}
.svc-link:hover{gap:11px;color:var(--cobalt-dark)}
.svc-link i{font-size:.62rem;line-height:1;vertical-align:middle;position:relative;top:1.5px;transition:transform .25s}
.svc-link:hover i{transform:translateX(3px)}

/* Responsive */
@media(max-width:960px){
  #servicios{padding:80px 32px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc-grid-bottom{grid-template-columns:1fr;max-width:420px}
}
@media(max-width:640px){
  #servicios{padding:72px 20px}
  .svc-grid{grid-template-columns:1fr;gap:16px}
  .svc-grid-bottom{grid-template-columns:1fr;max-width:none;margin:16px auto 0}
  .svc-img{aspect-ratio:16/9}
}

/* ── Ajuste tablet (iPad Air y similares) — reparte las 5 tarjetas en
   un patrón 2 / 1 centrada / 2, aprovechando mejor el ancho disponible
   en lugar de dejar una columna 2+1 descompensada arriba y una sola
   columna angosta abajo ───────────────────────────────────────── */
@media(min-width:641px) and (max-width:1024px){
  .svc-grid{
    grid-template-columns:repeat(2,1fr);
    max-width:720px;
  }
  .svc-grid .svc-card:nth-child(3){
    grid-column:1/-1;
    max-width:348px;
    margin:0 auto;
  }
  .svc-grid-bottom{
    grid-template-columns:repeat(2,1fr);
    max-width:720px;
  }
}

/* NUESTRA FLOTA */
#flota{
  background:var(--white);
  padding:100px 48px;
}
.flota-intro{
  max-width:700px;
  margin:0 auto 72px;
  text-align:center;
}
.flota-intro .s-title{ margin-bottom:10px }
.flota-subtitle{
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--text-soft);
  margin-top:0;
}

/* 4 columnas → las 4 tarjetas alineadas en una sola fila */
.flota-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  max-width:1420px;
  margin:0 auto;
}

/* ── Tarjeta exterior: sin overflow:hidden ──────────────── */
.flota-card{
  border-radius:24px;
  cursor:default;
  will-change:auto;
  transition:
    transform  700ms cubic-bezier(.22,1,.36,1),
    box-shadow 700ms cubic-bezier(.22,1,.36,1);
}
/* scale(1.06) sobre tarjetas anchas = elevación inconfundible */
.flota-card:hover{
  transform:translateY(-32px) scale(1.06);
  box-shadow:0 16px 40px rgba(0,0,0,.08);
}

/* ── Inner wrapper: hace el clip ────────────────────────── */
.flota-card-inner{
  border:1px solid var(--border);
  border-radius:24px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:var(--white);
  height:100%;
  transition:border-color 700ms cubic-bezier(.22,1,.36,1);
}
.flota-card:hover .flota-card-inner{
  border-color:rgba(45,125,210,.40);
}

/* ── Imagen: más alta para dar cuerpo a la tarjeta ─────── */
.flota-img{
  flex-shrink:0;
  position:relative;
  width:100%;
  aspect-ratio:4/3;   /* imagen ligeramente menos alta */
  background:var(--light-bg);
}
.flota-img img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  transform:none !important;
  transition:none !important;
}

/* Badge */
.flota-badge{
  position:absolute;
  top:16px;
  right:16px;
  background:var(--blue);
  color:#fff;
  font-size:var(--fs-xxs);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:100px;
  line-height:1;
  white-space:nowrap;
  z-index:1;
}
.flota-badge.premium{
  background:linear-gradient(135deg,var(--blue) 0%,var(--celeste) 100%);
}

/* ── Cuerpo: más padding para más altura ────────────────── */
.flota-body{
  padding:28px 28px 30px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.flota-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:6px;
}
.flota-name{
  font-family:'Outfit',sans-serif;
  font-size:1.35rem;
  font-weight:700;
  color:var(--text);
  line-height:1.15;
}
.flota-num{
  font-family:'Outfit',sans-serif;
  font-size:.9rem;
  font-weight:500;
  color:var(--celeste);
  opacity:.70;
  letter-spacing:.04em;
  flex-shrink:0;
  padding-top:4px;
}
.flota-cat{
  font-size:var(--fs-xxs);
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:20px;
}

/* Línea decorativa */
.flota-rule{
  width:28px;
  height:2px;
  background:var(--blue);
  border-radius:2px;
  margin-bottom:20px;
  flex-shrink:0;
  transform-origin:left center;
  transition:width 600ms cubic-bezier(.22,1,.36,1);
}
.flota-card:hover .flota-rule{ width:68px; }

/* Lista */
.flota-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:11px;
  margin-bottom:24px;
  flex:1;
}
.flota-list li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:var(--fs-sm);
  color:var(--text-soft);
  line-height:1.45;
}
.flota-list li::before{
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--celeste);
  flex-shrink:0;
}

/* Botón */
.flota-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--blue);
  color:#fff;
  border:none;
  border-radius:100px;
  padding:16px 20px;
  font-family:'Outfit',sans-serif;
  font-size:var(--fs-btn);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  flex-shrink:0;
  transition:background .22s cubic-bezier(.22,1,.36,1);
}
.flota-btn:hover{ background:var(--cobalt-dark) }

/* Animación de entrada */
.flota-card-anim{
  opacity:0;
  will-change:opacity,transform;
}
.flota-card-anim.mt-visible{
  animation:mtCardIn 1100ms cubic-bezier(.22,1,.36,1) forwards;
}
.flota-card-anim[data-delay="0"].mt-visible{ animation-delay:0ms }
.flota-card-anim[data-delay="1"].mt-visible{ animation-delay:250ms }
.flota-card-anim[data-delay="2"].mt-visible{ animation-delay:500ms }
.flota-card-anim[data-delay="3"].mt-visible{ animation-delay:750ms }

/* Intro de sección */
.flota-intro-anim{
  opacity:0;
  will-change:opacity,transform;
}
.flota-intro-anim.mt-visible{
  animation:mtFadeUp 1300ms cubic-bezier(.22,1,.36,1) forwards;
}

/* Responsive */
@media(max-width:1024px){
  #flota{ padding:80px 40px }
  .flota-grid{ grid-template-columns:repeat(2,1fr); gap:24px }
  .flota-card:hover{ transform:translateY(-24px) scale(1.04) }
}
@media(max-width:640px){
  #flota{ padding:72px 20px }
  .flota-grid{ grid-template-columns:1fr; gap:20px }
  .flota-intro{ margin-bottom:48px }
  .flota-card:hover{ transform:translateY(-14px) scale(1) }
}

/* NOSOTROS */
#nosotros{background:var(--white)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about-img{border-radius:20px;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--border)}
.about-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.about-img:hover img{transform:scale(1.04)}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.stat{border-left:3px solid var(--celeste);padding-left:16px}
.stat-n{font-family:'Outfit',sans-serif;font-size:var(--fs-stat);font-weight:700;color:var(--blue);line-height:1}
.stat-n span{color:var(--celeste)}
.stat-l{font-size:var(--fs-xxs);color:var(--text-soft);margin-top:4px}

/* CÓMO FUNCIONA */
#como-funciona{padding:0;overflow:hidden;background:#0D1F3C}
.cf-layout{display:grid;grid-template-columns:1fr 1fr;min-height:460px}

/* Video side */
.cf-video-side{position:relative;overflow:hidden;min-height:420px}
.cf-video-wrap{position:absolute;inset:0}
.cf-video-wrap video{width:100%;height:100%;object-fit:cover;display:block}
.cf-video-overlay{position:absolute;inset:0;background:rgba(13,31,60,.30)}

/* Content side */
.cf-content-side{
  background:#0D1F3C;
  display:flex;align-items:center;justify-content:center;
  padding:64px 56px
}
.cf-content-inner{max-width:480px;width:100%}
.cf-content-inner .s-tag{color:var(--celeste);margin-bottom:14px}
.cf-content-inner .s-title{color:#fff;margin-bottom:36px}
.cf-content-inner .s-title strong{color:#fff}

/* Steps */
.cf-steps{display:flex;flex-direction:column;gap:0}
.cf-step{
  display:flex;align-items:flex-start;gap:20px;
  padding:20px 0;
  border-bottom:1px solid rgba(255,255,255,.08)
}
.cf-step:last-child{border-bottom:none}
.cf-step-num{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:var(--blue);
  color:#fff;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s
}
.cf-step:hover .cf-step-num{transform:scale(1.08)}
.cf-step-title{font-size:var(--fs-h3);font-weight:600;color:#fff;margin-bottom:5px;line-height:1.3}
.cf-step-txt{font-size:var(--fs-sm);color:rgba(255,255,255,.55);line-height:1.68}

/* Responsive */
@media(max-width:960px){
  .cf-layout{grid-template-columns:1fr}
  .cf-video-side{min-height:300px}
  .cf-content-side{padding:52px 40px}
}
@media(max-width:640px){
  .cf-video-side{min-height:240px}
  .cf-content-side{padding:44px 20px}
  .cf-content-inner{max-width:100%}
}

/* CONTACTO */
#contacto{background:var(--surface);padding:100px 48px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.contact-form-wrap{background:var(--white);border:1px solid var(--border);border-radius:24px;padding:48px 40px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;overflow:visible}
.form-group{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.form-group label{font-size:var(--fs-xs);font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:var(--text-soft)}
.form-group input,.form-group select,.form-group textarea{font-family:'Outfit',sans-serif;font-size:var(--fs-body);color:var(--text);background:var(--light-bg);border:1.5px solid var(--border);border-radius:10px;padding:13px 16px;outline:none;transition:border-color .22s,box-shadow .22s,background .22s;resize:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--blue);background:var(--white);box-shadow:0 0 0 3px rgba(26,86,219,.08)}
.form-group input.field-error,.form-group textarea.field-error{border-color:var(--error-border) !important;background:var(--error-bg) !important;box-shadow:none !important}
.form-group input::placeholder,.form-group textarea::placeholder{color:#9CA3AF}
.form-group textarea{min-height:130px}
.form-group select{appearance:none;cursor:pointer}
.btn-submit{width:100%;padding:15px;background:var(--blue);color:#fff;font-family:'Outfit',sans-serif;font-size:var(--fs-btn);font-weight:600;letter-spacing:.06em;text-transform:uppercase;border:none;border-radius:100px;cursor:pointer;transition:background .20s,opacity .20s}
.btn-submit:hover{background:var(--cobalt-dark)}
.btn-submit:disabled{opacity:.65;cursor:not-allowed;background:var(--blue)}
/* ═══════════════════════════════════════════════════════════
   POPUP CONFIRMACIÓN — animación One UI con origen real en el botón
   · La posición inicial se calcula en JS desde getBoundingClientRect()
     del botón "Enviar Consulta", por eso el CSS solo define el estado
     de reposo; la animación la maneja Web Animations API.
   · Curvas idénticas al sistema One UI del proyecto:
     apertura  cubic-bezier(0,.55,.45,1)  240ms
     cierre    cubic-bezier(.55,0,1,.45)  220ms
   ═══════════════════════════════════════════════════════════ */
/* Overlay — misma curva que los pickers nativos */
@keyframes overlayIn{
  0%   { opacity:0; }
  100% { opacity:1; }
}
@keyframes overlayOut{
  0%   { opacity:1; }
  100% { opacity:0; }
}
/* Popup — mismos keyframes que oneuiDropOpen/Close pero centrado */
@keyframes popupIn{
  0%   { opacity:0; transform:translateX(-50%) translateY(-50%) scale(.80); }
  100% { opacity:1; transform:translateX(-50%) translateY(-50%) scale(1);   }
}
@keyframes popupOut{
  0%   { opacity:1; transform:translateX(-50%) translateY(-50%) scale(1);   }
  100% { opacity:0; transform:translateX(-50%) translateY(-50%) scale(.70); }
}

.confirm-overlay{
  position:fixed;inset:0;background:rgba(10,20,50,.38);
  opacity:0;pointer-events:none;z-index:1100;
}
.confirm-overlay.active{
  animation:overlayIn .20s cubic-bezier(0,.55,.45,1) forwards;
  pointer-events:all;
}
.confirm-overlay.closing{
  animation:overlayOut .22s cubic-bezier(.55,0,1,.45) forwards;
  pointer-events:none;
}

.confirm-popup{
  position:fixed;left:50%;top:50%;
  transform:translateX(-50%) translateY(-50%) translateZ(0);
  transform-origin:center center;
  width:min(440px,92vw);
  background:var(--white);border-radius:22px;
  padding:36px 32px 32px;
  box-shadow:0 24px 64px rgba(10,20,60,.18),0 2px 8px rgba(10,20,60,.07);
  opacity:0;pointer-events:none;z-index:1101;
  text-align:center;
  will-change:auto;
}
.confirm-popup.visible{
  animation:popupIn .20s cubic-bezier(0,.55,.45,1) forwards;
  pointer-events:all;
}
.confirm-popup.closing{
  animation:popupOut .22s cubic-bezier(.55,0,1,.45) forwards;
  pointer-events:none;
}

.confirm-icon-wrap{display:flex;justify-content:center;margin-bottom:20px;}
.confirm-icon{
  width:64px;height:64px;border-radius:50%;
  background:var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:#fff;
  box-shadow:0 6px 20px rgba(26,86,219,.28);
}
.confirm-title{
  font-size:var(--fs-h3);font-weight:700;color:var(--text);
  margin:0 0 10px;letter-spacing:-.01em;
}
.confirm-desc{
  font-size:var(--fs-body);color:var(--text-soft);
  line-height:1.6;margin:0 0 24px;
}
.confirm-table{
  background:var(--light-bg);border-radius:14px;
  padding:6px 0;margin-bottom:26px;text-align:left;
}
.confirm-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 18px;border-bottom:1px solid var(--border);
}
.confirm-row:last-child{border-bottom:none;}
.confirm-label{font-size:var(--fs-body);color:var(--text-soft);}
.confirm-value{font-size:var(--fs-body);font-weight:700;color:var(--text);text-align:right;}
.confirm-btn{
  display:inline-block;padding:14px 44px;
  background:var(--blue);color:#fff;
  font-family:'Outfit',sans-serif;font-size:var(--fs-btn);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  border:none;border-radius:100px;cursor:pointer;
  transition:background .20s;
}
.confirm-btn:hover{background:var(--cobalt-dark);}

.contact-info{display:flex;flex-direction:column;gap:28px}
.map-wrap{border-radius:18px;overflow:hidden;border:1px solid var(--border);height:280px}
.map-wrap iframe{width:100%;height:100%;border:none;display:block}
.contact-details{display:flex;flex-direction:column;gap:14px}
.contact-item{display:flex;align-items:flex-start;gap:14px}
.contact-item-icon{width:40px;height:40px;flex-shrink:0;border-radius:10px;background:linear-gradient(135deg,#D6E4FF,#B5CFFF);display:flex;align-items:center;justify-content:center}
.contact-item-icon i{font-size:1rem;color:var(--blue)}
.contact-item-text strong{display:block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);margin-bottom:2px}
.contact-item-text span{font-size:var(--fs-sm);color:var(--text)}
.form-notice{display:none;padding:14px 18px;border-radius:10px;font-size:var(--fs-sm);font-weight:500;text-align:center;margin-top:16px}
.form-notice.success{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7;display:block}
.form-notice.error{background:#fce4ec;color:#c62828;border:1px solid #ef9a9a;display:block}

/* Campo fecha — mismo input que time-input-side, pero ancho completo (sin badge AM/PM) */
.date-input{ padding-right:16px !important; cursor:pointer !important; letter-spacing:normal !important; }
.fecha-side{ width:100% !important; flex:1 1 auto !important; display:flex; }
.fecha-side .date-input{ flex:1 1 auto; }



/* FOOTER */
footer{background:#0D1F3C;padding:96px 48px 56px}
.foot-inner{max-width:1180px;margin:0 auto}

/* Grid 3 columnas */
.foot-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1.1fr;
  gap:56px;
  padding-bottom:48px;
}

/* Columna 1 — Marca */
.foot-brand{}
.foot-brand-name{
  font-family:'Outfit',sans-serif;
  font-size:var(--fs-h3);
  font-weight:700;
  color:#fff;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.foot-brand p{
  font-size:var(--fs-sm);
  color:rgba(255,255,255,.45);
  line-height:1.75;
  max-width:260px;
  margin-bottom:24px;
}
.foot-rec-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:transparent;
  color:rgba(255,255,255,.60);
  border:1.5px solid rgba(255,255,255,.22);
  border-radius:100px;
  padding:10px 22px;
  font-family:'Outfit',sans-serif;
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .25s, border-color .25s, color .25s;
}
.foot-rec-btn i{font-size:.95rem;color:rgba(255,255,255,.60);transition:color .25s}
.foot-rec-btn:hover{background:#fff;border-color:#fff;color:#0D1F3C}
.foot-rec-btn:hover i{color:#0D1F3C}

/* Redes sociales */
.foot-social{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
}
.foot-social-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.60);
  font-size:.95rem;
  text-decoration:none;
  cursor:pointer;
  transition:background .25s, border-color .25s, color .25s;
}
.foot-social-btn:hover{background:var(--celeste);border-color:var(--celeste);color:#fff}

/* Columnas 2 y 3 */
.foot-col h4{
  font-size:var(--fs-tag);
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:22px;
}
.foot-col a{
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:rgba(255,255,255,.45);
  text-decoration:none;
  font-size:var(--fs-sm);
  line-height:1.5;
  margin-bottom:12px;
  transition:color .20s, padding-left .20s;
}
.foot-col a:hover{color:#fff;padding-left:4px}
.foot-col a i{
  font-size:.78rem;
  color:var(--celeste);
  flex-shrink:0;
  margin-top:3px;
}
.foot-col-svc a::before{
  content:'›';
  color:var(--celeste);
  font-weight:700;
  font-size:1rem;
  line-height:1;
  flex-shrink:0;
}

/* Divisor */
.foot-divider{
  border:none;
  border-top:1px solid rgba(255,255,255,.09);
  margin:0 0 24px;
}

/* Barra inferior */
.foot-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
}
.foot-bottom-links{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
}
.foot-bottom-links a{
  color:rgba(255,255,255,.32);
  text-decoration:none;
  font-size:var(--fs-xxs);
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:color .20s;
}
.foot-bottom-links a:hover{color:rgba(255,255,255,.75)}
.foot-copy{
  font-size:var(--fs-xxs);
  color:rgba(255,255,255,.28);
  white-space:nowrap;
}
.foot-copy strong{
  color:#fff;
  font-weight:700;
  letter-spacing:.04em;
}

/* Responsive */
@media(max-width:960px){
  footer{padding:64px 32px 44px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:40px}
  .foot-brand{grid-column:1/-1}
  .foot-brand p{max-width:100%}
}
@media(max-width:640px){
  footer{padding:56px 20px 64px}
  .foot-grid{grid-template-columns:1fr;gap:36px}
  .foot-brand{grid-column:auto}
  .foot-bottom{flex-direction:column;align-items:center;gap:20px;text-align:center}
  .foot-bottom-links{gap:14px 24px;justify-content:center;row-gap:14px}
  .foot-copy{text-align:center;margin-top:8px}
}

/* CUSTOM FORM DROPDOWNS */
.cf-select-wrap{position:relative;width:100%}
.cf-select-display{
  font-family:'Outfit',sans-serif;font-size:var(--fs-body);color:var(--text);
  background:var(--light-bg);border:1.5px solid var(--border);
  border-radius:10px;padding:13px 40px 13px 16px;outline:none;
  cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:space-between;
  transition:border-color .22s,box-shadow .22s,background .22s;
  white-space:nowrap;overflow:hidden;
}
.cf-select-display.ph{color:#9CA3AF}
.cf-select-wrap.open .cf-select-display{border-color:var(--blue);background:var(--white);box-shadow:0 0 0 4px rgba(37,99,235,.10)}
.cf-select-arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-soft);font-size:.70rem;transition:transform .30s cubic-bezier(.22,1,.36,1)}
.cf-select-wrap.open .cf-select-arrow{transform:translateY(-50%) rotate(180deg)}
.cf-dropdown{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--white);border:1.5px solid var(--border);border-radius:14px;
  padding:6px;z-index:500;
  box-shadow:0 4px 16px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05);
  max-height:220px;overflow-y:auto;
  opacity:0;
  transform:translateY(-10px) scale(.94);
  transform-origin:top center;
  pointer-events:none;
  will-change:transform,opacity;
}
.cf-dropdown::-webkit-scrollbar{width:4px}
.cf-dropdown::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.cf-select-wrap.open .cf-dropdown{
  animation:oneuiDropOpen .18s cubic-bezier(0,.55,.45,1) forwards;
  pointer-events:all;
}
.cf-select-wrap.closing .cf-dropdown{
  animation:oneuiDropClose .20s cubic-bezier(.55,0,1,.45) forwards;
  pointer-events:none;
}
.cf-option{padding:9px 14px;border-radius:8px;font-size:.88rem;color:var(--text);cursor:pointer;transition:background .18s,color .18s,padding-left .18s;display:flex;align-items:center;gap:8px}
.cf-option:hover{background:var(--light-bg);color:var(--blue);padding-left:18px}
.cf-option.selected{color:var(--blue);font-weight:600;background:rgba(37,99,235,.06)}
.cf-option.selected::after{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;font-size:.70rem;margin-left:auto;color:var(--blue)}
/* TIME INPUT */
/* TIME PICKER */
.time-field-row{display:flex;gap:10px;align-items:flex-start;position:relative}
.time-input-side{flex:0 0 auto;position:relative;width:148px}
.time-input-side input{
  width:100%;font-family:'Outfit',sans-serif;font-size:var(--fs-body);color:var(--text);
  background:var(--light-bg);border:1.5px solid var(--border);
  border-radius:10px;padding:13px 54px 13px 16px;outline:none;
  transition:border-color .22s,box-shadow .22s,background .22s;
  cursor:text;letter-spacing:.06em;
}
.time-input-side input:focus{border-color:var(--blue);background:var(--white);box-shadow:0 0 0 4px rgba(37,99,235,.10)}
.time-ampm-badge{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:var(--fs-xxs);font-weight:700;letter-spacing:.06em;
  color:var(--blue);background:rgba(37,99,235,.11);
  padding:3px 7px;border-radius:6px;
  cursor:pointer;user-select:none;
  border:1px solid rgba(37,99,235,.20);
  transition:background .18s,color .18s;
  display:none;white-space:nowrap;
}
.time-input-side.has-value .time-ampm-badge{display:block}
.time-ampm-badge:hover{background:var(--blue);color:#fff}

/* ═══════════════════════════════════════════════════
   Animation One UI
   Estilo de apertura/cierre inspirado en One UI 8.5:
   - Entrada rápida con deceleration curve (sin overshoot)
   - Salida corta y decidida con acceleration curve
   - Scale desde el origen del elemento
   - Opacity + scale + translate coordinados
   Reutilizable en cualquier panel flotante:
   estado base → opacity:0, scale(.88), translateY(-6px)
   estado open  → añadir clase .oneui-open
   estado close → añadir clase .oneui-closing (quitar tras 220ms)
   ═══════════════════════════════════════════════════ */

@keyframes oneuiOpen{
  0%   { opacity:0; transform:translateX(-10px) translateY(-50%) scale(.80); }
  100% { opacity:1; transform:translateX(0)     translateY(-50%) scale(1);   }
}
@keyframes oneuiClose{
  0%   { opacity:1; transform:translateX(0)    translateY(-50%) scale(1);   }
  100% { opacity:0; transform:translateX(-12px) translateY(-50%) scale(.70); }
}

/* Dropdown One UI (para cf-dropdown) */
@keyframes oneuiDropOpen{
  0%   { opacity:0; transform:translateY(-10px) scale(.94); }
  100% { opacity:1; transform:translateY(0)     scale(1);   }
}
@keyframes oneuiDropClose{
  0%   { opacity:1; transform:translateY(0)    scale(1);   }
  100% { opacity:0; transform:translateY(-14px) scale(.82); }
}

.time-picker-panel{
  position:absolute;left:158px;top:50%;
  background:var(--white);border:1.5px solid var(--border);border-radius:16px;
  padding:8px 12px;
  box-shadow:0 4px 16px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05);
  display:flex;align-items:center;gap:4px;
  opacity:0;
  transform:translateX(-10px) translateY(-50%) scale(.80);
  transform-origin:left center;
  pointer-events:none;
  z-index:300;white-space:nowrap;
  will-change:transform,opacity;
}
.time-picker-panel.visible{
  animation:oneuiOpen .20s cubic-bezier(0,.55,.45,1) forwards;
  pointer-events:all;
}
.time-picker-panel.closing{
  animation:oneuiClose .22s cubic-bezier(.55,0,1,.45) forwards;
  pointer-events:none;
}

.tp-col{display:flex;flex-direction:column;align-items:center;gap:1px}
.tp-btn{
  width:26px;height:22px;border:none;background:none;
  cursor:pointer;border-radius:6px;font-size:var(--fs-xxs);color:var(--text-soft);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;line-height:1;
}
.tp-btn:hover{background:var(--light-bg);color:var(--blue)}
.tp-btn:disabled{opacity:.35;cursor:not-allowed;background:none !important;color:var(--text-soft) !important}
.tp-val{
  font-size:var(--fs-h3);font-weight:600;color:var(--text);
  min-width:30px;text-align:center;letter-spacing:.04em;
  padding:2px 0;line-height:1.2;
}
.tp-sep{font-size:var(--fs-h3);font-weight:700;color:var(--text-soft);padding:0 1px;margin-top:1px}
.tp-period{display:flex;flex-direction:column;gap:3px;margin-left:6px}
.tp-period-btn{
  font-size:var(--fs-xxs);font-weight:700;letter-spacing:.07em;
  padding:4px 7px;border-radius:6px;border:1.5px solid transparent;
  cursor:pointer;transition:all .16s;color:var(--text-soft);background:var(--light-bg);
}
.tp-period-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.tp-period-btn:not(.active):hover{border-color:var(--celeste);color:var(--blue)}

/* Panel del calendario "Fecha" — reutiliza .time-picker-panel para fondo/borde/sombra,
   pero usa la animación oneuiDropOpen/oneuiDropClose (ya existente en el proyecto,
   misma usada en .cf-dropdown) porque es la variante vertical: se despliega
   verticalmente desde el borde del campo, en vez de la variante horizontal
   centrada (oneuiOpen) pensada para el panel de Hora. */
.date-picker-panel{
  left:0;top:calc(100% + 8px);
  transform:translateY(-10px) scale(.94);
  transform-origin:top left;
  flex-direction:column;align-items:stretch;gap:0;
  width:266px;padding:14px;white-space:normal;
  will-change:auto;
}
.date-picker-panel.visible{
  animation:oneuiDropOpen .20s cubic-bezier(0,.55,.45,1) forwards;
}
.date-picker-panel.closing{
  animation:oneuiDropClose .22s cubic-bezier(.55,0,1,.45) forwards;
}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dp-nav{
  width:28px;height:28px;border:none;background:var(--light-bg);border-radius:8px;
  cursor:pointer;color:var(--text-soft);font-size:1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.dp-nav:hover{background:var(--blue);color:#fff}
.dp-nav:disabled{opacity:.35;cursor:not-allowed;background:var(--light-bg);color:var(--text-soft)}
.dp-month{font-size:var(--fs-sm);font-weight:600;color:var(--text);text-transform:capitalize}
.dp-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}
.dp-dow span{font-size:var(--fs-xxs);font-weight:700;color:var(--text-soft);text-align:center;letter-spacing:.04em}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);color:var(--text);border-radius:8px;cursor:pointer;
  border:1.5px solid transparent;background:none;
  transition:background .15s,color .15s,border-color .15s;
}
.dp-day:hover{background:var(--light-bg)}
.dp-day.dp-disabled{color:#D1D5DB;cursor:not-allowed;pointer-events:none}
.dp-day.dp-today{border-color:var(--celeste);font-weight:700}
.dp-day.dp-selected{background:var(--blue);color:#fff;font-weight:700}
.dp-day.dp-empty{visibility:hidden;cursor:default}
/* RESPONSIVE */
@media(max-width:1080px){.foot-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:960px){nav{display:none}.nav-cta{display:none!important}.hamburger{display:flex}.mob-nav{display:flex}#header{padding:0 20px 0 20px}.hamburger{padding:8px 4px 8px 8px;margin-right:4px}.about-grid{grid-template-columns:1fr;gap:40px}.contact-grid{grid-template-columns:1fr;gap:40px}}
@media(max-width:640px){section{padding:72px 20px}footer{padding:56px 20px 24px}#contacto{padding:72px 20px}.slide-content{left:5%;right:5%;max-width:none;top:50%;transform:translateY(-50%)}.slide-btns{flex-direction:column;align-items:flex-start;gap:10px}.slide-btns a{width:auto;max-width:220px;justify-content:center;font-size:.78rem;padding:11px 20px}.form-row{grid-template-columns:1fr}.contact-form-wrap{padding:32px 22px}.stats-row{grid-template-columns:1fr 1fr}.foot-grid{grid-template-columns:1fr;gap:28px}.foot-bottom{flex-direction:column;gap:8px;text-align:center}.carousel-arrows{display:none}.date-picker-panel{width:calc(100vw - 76px);max-width:266px}}
/* ══════════════════════════════════════════════════════════
   MOBILE ANTI-BLUR — ≤768px
   Causa: will-change permanente en CSS promueve capas GPU
   antes y después de la animación, lo que en pantallas
   pequeñas produce texto levemente borroso (subpíxel offset
   en la capa compositada). Solución: will-change:auto fuera
   de la ventana de animación activa.
   Desktop (>768px) no se toca — está aprobado.
   ══════════════════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── 1. Liberar capas GPU en estado pre-animación ──── */
  .pres-anim-left,
  .pres-anim-right,
  .svc-intro-anim,
  .svc-card-anim,
  .pq-header-anim,
  .pq-car-anim,
  .pq-item-anim,
  .cf-title-anim,
  .cf-step-anim,
  .contact-intro-anim,
  .location-text-anim,
  .location-map-anim,
  .contact-item-anim,
  .flota-card-anim,
  .flota-intro-anim,
  .section-reveal{
    will-change: auto;
  }

  /* ── 2. Keyframes móvil: distancias reducidas ─────── */
  /* Menos recorrido = menos aceleración = menos drift subpíxel */
  @keyframes mtFadeUp{
    from{ opacity:0; transform:translateY(20px) }
    to  { opacity:1; transform:translateY(0) }
  }
  @keyframes mtFadeLeft{
    from{ opacity:0; transform:translateX(-24px) }
    to  { opacity:1; transform:translateX(0) }
  }
  @keyframes mtFadeRight{
    from{ opacity:0; transform:translateX(24px) }
    to  { opacity:1; transform:translateX(0) }
  }
  @keyframes mtScaleUp{
    from{ opacity:0; transform:scale(.94) translateY(12px) }
    to  { opacity:1; transform:scale(1) translateY(0) }
  }
  @keyframes mtCardIn{
    from{ opacity:0; transform:translateY(16px) scale(.97) }
    to  { opacity:1; transform:translateY(0) scale(1) }
  }
  @keyframes mtBlurUp{
    from{ opacity:0; transform:translateY(14px); filter:blur(2px) }
    to  { opacity:1; transform:translateY(0);    filter:blur(0) }
  }
  @keyframes sectionFadeUp{
    from{ opacity:0; transform:translateY(18px) }
    to  { opacity:1; transform:translateY(0) }
  }

  /* ── 3. Flota-card: sin hover en touch, sin capa GPU ─ */
  .flota-card{
    will-change: auto;
  }
  .flota-card:hover{
    transform: none;
    box-shadow: none;
  }

  /* ── 4. Popup: keyframes móvil con scale más conservador ─
     Scale .80→1 en mobile genera más subpíxel drift que en
     desktop. Reducimos a .92→1 para minimizar el blur. */
  @keyframes popupIn{
    0%   { opacity:0; transform:translateX(-50%) translateY(-50%) translateZ(0) scale(.92); }
    100% { opacity:1; transform:translateX(-50%) translateY(-50%) translateZ(0) scale(1);   }
  }
  @keyframes popupOut{
    0%   { opacity:1; transform:translateX(-50%) translateY(-50%) translateZ(0) scale(1);   }
    100% { opacity:0; transform:translateX(-50%) translateY(-50%) translateZ(0) scale(.88); }
  }
}

/* ── Botón flotante de WhatsApp ─────────────────────────
   Elemento nuevo e independiente. No modifica ninguna
   regla existente del sitio. */
.wa-float{
  position:fixed;
  right:24px;
  bottom:24px;
  width:60px;
  height:60px;
  border-radius:50%;
  background:linear-gradient(145deg,#25D366,#1DA851);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(17,24,39,.20),0 2px 8px rgba(37,211,102,.35);
  z-index:998;
  text-decoration:none;
  cursor:pointer;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease,background .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.wa-float i{
  color:#fff;
  font-size:30px;
  line-height:1;
  transform:translateZ(0);
}
.wa-float:hover{
  transform:translateY(-4px) scale(1.06);
  box-shadow:0 12px 32px rgba(17,24,39,.26),0 4px 14px rgba(37,211,102,.45);
  background:linear-gradient(145deg,#2AE374,#20B85B);
}
.wa-float:active{
  transform:translateY(-1px) scale(.97);
}
.wa-float::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);
  animation:waPulse 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes waPulse{
  0%   { box-shadow:0 0 0 0 rgba(37,211,102,.45); }
  70%  { box-shadow:0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow:0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width:600px){
  .wa-float{
    width:54px;
    height:54px;
    right:16px;
    bottom:16px;
  }
  .wa-float i{ font-size:27px; }
}
@media (prefers-reduced-motion:reduce){
  .wa-float,.wa-float:hover{ transition:none; }
  .wa-float::after{ animation:none; }
}