/* ============================================================
   CONPLAT — Landing RTO
   Sistema de diseño: azul de marca (fondo) + tarjetas blancas +
   verde "apto". Paleta tomada del Instagram @conplat.rto.pergamino.
   ============================================================ */

:root {
  --navy-900: #071a4a;
  --navy-800: #0a2166;   /* logo, tarjeta destacada */
  --navy-700: #12307f;
  --navy-600: #1a3f9e;
  --blue-600: #1d4ed8;   /* azul de marca — fondo principal del sitio */
  --blue-500: #2f63f0;   /* variante clara, glow / hover */
  --sky-50:   #f2f6fe;
  --sky-100:  #e7eefb;
  --green-600:#15a34a;
  --green-500:#22c55e;
  --green-300:#4ade80;
  --whatsapp: #25d366;
  --whatsapp-dark: #1da851;

  --ink:      #101828;
  --ink-soft: #1f2a44;
  --muted:    #5a6478;
  --line:     #e5e9f1;
  --bg:       #ffffff;
  --bg-soft:  #f6f8fc;

  /* Texto y superficies sobre el fondo azul de marca */
  --on-blue:        #ffffff;
  --on-blue-muted:  rgba(255,255,255,.86); /* .78 daba ~4.7:1, muy al límite del mínimo AA (4.5:1) */
  --on-blue-border: rgba(255,255,255,.18);
  --on-blue-soft:   rgba(255,255,255,.08);

  --radius:   16px;
  --radius-sm:12px;
  --radius-lg:24px;

  --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.05);
  --shadow-md: 0 8px 24px rgba(10,33,102,.08);
  --shadow-lg: 0 24px 60px rgba(10,33,102,.14);

  --maxw: 1160px;
  --font-head: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--on-blue);
  background: var(--blue-600);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-head);
  color: var(--navy-900);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; }

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.card:focus-visible,
.contact-cta:focus-visible,
.chip:focus-visible,
.wa-float:focus-visible {
  outline: 2.5px solid var(--on-blue);
  outline-offset: 3px;
  border-radius: 8px;
}
.card:focus-visible,
.contact-cta:focus-visible {
  outline-color: var(--blue-600);
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--navy-900);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 200;
}
.skip-link:focus { left: 16px; }

/* ---------------- Botones ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 15px 26px; font-size: 16px; }

/* Botón principal: pensado para usarse SOBRE el fondo azul (blanco + texto azul,
   igual que los botones "EFECTIVO/TRANSFERENCIA" del Instagram de la marca). */
.btn-primary { background: #fff; color: var(--blue-600); box-shadow: 0 8px 20px rgba(7,26,74,.22); }
.btn-primary:hover { background: var(--sky-50); box-shadow: 0 12px 28px rgba(7,26,74,.28); }

/* Botón sólido: pensado para usarse DENTRO de una tarjeta blanca (azul + texto blanco) */
.btn-solid { background: var(--blue-600); color: #fff; box-shadow: 0 6px 16px rgba(29,78,216,.28); }
.btn-solid:hover { background: var(--blue-500); box-shadow: 0 10px 24px rgba(29,78,216,.34); }

/* Botón fantasma: sobre el fondo azul, contorno blanco */
.btn-ghost { background: transparent; color: #fff; border-color: var(--on-blue-border); }
.btn-ghost:hover { border-color: rgba(255,255,255,.4); background: var(--on-blue-soft); }

.btn-arrow { display: inline-flex; transition: transform .18s ease; }
.btn-arrow svg { width: 16px; height: 16px; }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ---------------- Header ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(29,78,216,.68);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.site-header.scrolled {
  background: rgba(20,58,166,.82);
  border-color: var(--on-blue-border);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand:hover { text-decoration: none; }
.brand-mark { border-radius: 10px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .04em;
  color: #fff;
}
.brand-sub {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82); /* .7 quedaba abajo de 4.5:1 (AA) sobre el header azul */
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 28px; }
.nav > a {
  font-weight: 600;
  font-size: 15px;
}
.nav > a:not(.btn) { position: relative; padding-bottom: 3px; color: #fff; }
.nav > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--green-300);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav > a:not(.btn):hover { color: var(--green-300); text-decoration: none; }
.nav > a:not(.btn):hover::after,
.nav > a:not(.btn).active::after { transform: scaleX(1); }
.nav > a:not(.btn).active { color: var(--green-300); }
.nav-cta { margin-left: 4px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--on-blue-border);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span {
  width: 20px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------- Eyebrow ---------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-300);
  box-shadow: 0 0 0 4px rgba(74,222,128,.25);
}
/* Variante para usar dentro de tarjetas/paneles BLANCOS (ej. sección Flotas) */
.eyebrow-onwhite { color: var(--blue-600); }
.eyebrow-onwhite .dot { background: var(--green-500); box-shadow: 0 0 0 4px rgba(34,197,94,.15); }

/* ---------------- Hero ---------------- */
.hero {
  padding: 64px 0 40px;
  background:
    radial-gradient(1100px 460px at 85% -10%, var(--blue-500), transparent 60%),
    linear-gradient(180deg, var(--blue-600), var(--blue-600));
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}
.hero-copy h1 {
  color: #fff;
  font-size: clamp(34px, 5vw, 54px);
  margin-bottom: 20px;
}
.lede {
  font-size: clamp(17px, 2vw, 19px);
  color: var(--on-blue-muted);
  max-width: 46ch;
  margin-bottom: 28px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }

.hero-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0; padding: 0;
}
.hero-badges li {
  position: relative;
  padding-left: 24px;
  font-weight: 600;
  font-size: 14.5px;
  color: #fff;
}
.hero-badges li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 16px; height: 16px;
  transform: translateY(-50%);
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}
/* El logo es line-art azul marino (#0a2166) — contra el azul de marca (#1d4ed8)
   del fondo quedan a ~2:1 de contraste, casi invisible (ver captura del pedido).
   Este halo blanco de atrás sube el contraste local del trazo a >10:1 sin tocar
   los colores del logo ni del fondo. Pulso sutil, no un "cartel de neón" literal;
   se apaga solo con prefers-reduced-motion (regla global arriba del archivo). */
.hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 90%;
  height: 68%;
  background: radial-gradient(ellipse,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.7) 35%,
    rgba(255,255,255,.22) 60%,
    rgba(255,255,255,0) 78%);
  filter: blur(22px);
  animation: hero-glow-pulse 4.5s ease-in-out infinite;
}
.hero-art img {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 30px rgba(3,12,40,.28));
}
@keyframes hero-glow-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .82; transform: scale(.96); }
}

/* ---------------- Trust strip ---------------- */
.strip {
  border-top: 1px solid var(--on-blue-border);
  border-bottom: 1px solid var(--on-blue-border);
  background: var(--on-blue-soft);
}
.strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 30px 24px;
}
.strip-item { display: flex; flex-direction: column; gap: 6px; }
.strip-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 26px;
  color: #fff;
  letter-spacing: -0.01em;
}
.strip-label { color: var(--on-blue-muted); font-size: 14.5px; max-width: 34ch; }

/* ---------------- Sections ---------------- */
.section { padding: 84px 0; }
.section-soft { background: var(--navy-900); }

.section-head { max-width: 640px; margin-bottom: 46px; }
.section-head h2 { color: #fff; font-size: clamp(27px, 3.6vw, 38px); margin-bottom: 14px; }
.section-sub { color: var(--on-blue-muted); font-size: 17px; }

/* ---------------- Cards (servicios) ---------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.card {
  background: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-md);
  transition: transform .16s ease, box-shadow .16s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--sky-100);
  color: var(--navy-700);
  margin-bottom: 16px;
  box-shadow: inset 0 0 0 1px rgba(10,33,102,.05);
}
.card-icon svg { width: 24px; height: 24px; }
.card h3 { font-size: 18px; margin-bottom: 7px; }
.card p { color: var(--muted); font-size: 14.5px; }

.card-cta {
  background: linear-gradient(160deg, var(--navy-800), var(--navy-700));
  color: #eaf0ff;
  display: flex;
  flex-direction: column;
}
.card-cta:hover { box-shadow: 0 28px 64px rgba(3,12,40,.4); }
.card-cta h3 { color: #fff; }
.card-cta p { color: #c3d0f0; }
.link-arrow {
  margin-top: auto;
  padding-top: 14px;
  color: #fff;
  font-weight: 600;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.link-arrow span { transition: transform .16s ease; }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover span { transform: translateX(4px); }

/* ---------------- Steps (proceso) ---------------- */
.steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: step;
}
.step {
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow-md);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--blue-600);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  margin-bottom: 16px;
}
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 14.5px; }
@media (min-width: 960px) {
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -14px;
    width: 9px; height: 9px;
    transform: translateY(-50%) rotate(45deg);
    border-top: 2px solid var(--on-blue-border);
    border-right: 2px solid var(--on-blue-border);
  }
}

/* ---------------- Two-col (requisitos / vehículos) ---------------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.col .eyebrow { margin-top: 0; }
.col h2 { color: #fff; font-size: clamp(24px, 3vw, 32px); margin-bottom: 12px; }

.check-list {
  list-style: none;
  margin: 22px 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.check-list li {
  position: relative;
  padding-left: 34px;
  font-size: 15.5px;
  color: #fff;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1px;
  width: 22px; height: 22px;
  border-radius: 7px;
  background: #fff no-repeat center / 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315a34a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.note {
  font-size: 14px;
  color: var(--muted);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: var(--shadow-md);
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 26px; }
.chip {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--navy-800);
  background: #fff;
  padding: 9px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.mini-card {
  background: #fff;
  border-left: 4px solid var(--green-500);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  box-shadow: var(--shadow-md);
}
.mini-card strong { color: var(--navy-900); font-family: var(--font-head); }
.mini-card p { color: var(--muted); font-size: 14.5px; margin-top: 4px; }

/* ---------------- Flotas ---------------- */
.fleet {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 52px;
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 40px;
  align-items: center;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-lg);
}
.fleet::after {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(34,197,94,.12), transparent 70%);
  pointer-events: none;
}
.fleet-copy h2 { font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 14px; }
.fleet-copy > p { color: var(--muted); font-size: 17px; max-width: 52ch; margin-bottom: 20px; }
.fleet-list {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: flex; flex-direction: column; gap: 11px;
}
.fleet-list li {
  position: relative; padding-left: 28px;
  color: var(--ink-soft); font-size: 15.5px;
}
.fleet-list li::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 18px; height: 18px; transform: translateY(-50%);
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.fleet-art { display: flex; justify-content: center; }
.fleet-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--navy-800);
  font-family: var(--font-head);
  font-weight: 600;
  padding: 34px;
  border-radius: var(--radius);
  background: var(--sky-100);
}
.fleet-badge svg { width: 64px; height: 64px; color: var(--green-600); }

/* ---------------- Contacto / turno ---------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 24px;
}
.contact-actions { display: flex; flex-direction: column; gap: 16px; }
.contact-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-md);
  transition: transform .14s ease, box-shadow .14s ease;
}
.contact-cta:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.contact-cta-primary { box-shadow: 0 8px 26px rgba(29,78,216,.22); }
.cc-icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--sky-100);
  color: var(--navy-700);
  box-shadow: inset 0 0 0 1px rgba(10,33,102,.05);
}
.cc-icon svg { width: 26px; height: 26px; }
.cc-text { display: flex; flex-direction: column; }
.cc-text strong { font-family: var(--font-head); color: var(--navy-900); font-size: 16.5px; }
.cc-text span { color: var(--muted); font-size: 14.5px; }

.contact-info {
  background: #fff;
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-md);
}
.contact-info h3 { font-size: 18px; margin-bottom: 16px; }
.info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.info-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.info-list li:last-child { border-bottom: none; }
.info-k { color: var(--muted); }
.info-v { color: var(--ink-soft); font-weight: 600; text-align: right; }

/* ---------------- Botón flotante de WhatsApp ---------------- */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #fff;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .42), var(--shadow-md);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.wa-float svg { width: 30px; height: 30px; }
.wa-float:hover {
  text-decoration: none;
  background: var(--whatsapp-dark);
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 32px rgba(37, 211, 102, .5), var(--shadow-lg);
}
.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
  animation: wa-pulse 2.6s ease-out infinite;
}
@keyframes wa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); }
  70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (max-width: 560px) {
  .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .wa-float svg { width: 27px; height: 27px; }
}

/* ---------------- Footer ---------------- */
.site-footer {
  background: var(--navy-900);
  color: #cdd7ef;
  padding: 54px 0 26px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.site-footer .brand-name { color: #fff; }
.site-footer .brand-sub { color: #93a2c7; }
.footer-tag { color: #93a2c7; font-size: 14.5px; margin-top: 14px; max-width: 34ch; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: flex-start; }
.footer-nav a { color: #cdd7ef; font-weight: 600; font-size: 15px; }
.footer-nav a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 22px;
  color: #7e8fb6;
  font-size: 13.5px;
}

/* ---------------- Aparición al scrollear ----------------
   Solo se activa si JS agrega .js-anim a <html> (respeta
   prefers-reduced-motion y navegadores sin IntersectionObserver:
   ver script.js — sin esa clase, el contenido es visible siempre). */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.16,.8,.24,1), transform .6s cubic-bezier(.16,.8,.24,1);
}
.js-anim .reveal.is-visible { opacity: 1; transform: translateY(0); }

.js-anim .cards .reveal:nth-child(2) { transition-delay: .05s; }
.js-anim .cards .reveal:nth-child(3) { transition-delay: .1s; }
.js-anim .cards .reveal:nth-child(4) { transition-delay: .15s; }
.js-anim .cards .reveal:nth-child(n+5) { transition-delay: .18s; }

.js-anim .steps .reveal:nth-child(2) { transition-delay: .08s; }
.js-anim .steps .reveal:nth-child(3) { transition-delay: .16s; }
.js-anim .steps .reveal:nth-child(4) { transition-delay: .24s; }

.js-anim .strip-grid .reveal:nth-child(2) { transition-delay: .08s; }
.js-anim .strip-grid .reveal:nth-child(3) { transition-delay: .16s; }

.js-anim .two-col .reveal:nth-child(2) { transition-delay: .1s; }
.js-anim .contact-grid .reveal:nth-child(2) { transition-delay: .1s; }

/* ---------------- Chat de turnos (/turnos/) ---------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
/* La página /turnos/ es una herramienta, no una landing: el chat entero
   (cabecera + conversación + input) tiene que entrar en la primera pantalla,
   sin scrollear y sin quedar tapado por el header. <main> ocupa el alto de la
   ventana menos el header sticky (72px) y el panel se reparte ese alto; el
   footer queda abajo del pliegue, para quien scrollee. */
.page-chat > main {
  display: flex;
  /* Alto DEFINIDO (no min-height): si fuera min-height, el panel se dimensionaría
     por contenido y una conversación larga empujaría el input fuera de pantalla,
     en vez de scrollear adentro del log. */
  height: calc(100vh - 72px);
  height: calc(100dvh - 72px); /* dvh: descuenta la barra del navegador en mobile */
  min-height: 560px;           /* piso para ventanas muy bajas: ahí sí scrollea la página */
}
.page-chat .chat-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px 0 36px;
}
.page-chat .chat-section > .container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.chat-head { flex: none; max-width: 640px; margin: 0 auto 24px; text-align: center; }
.chat-head h1 { color: #fff; font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 12px; }
.chat-head .section-sub { font-size: 16px; }

.chat-panel {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 320px; /* piso: en ventanas muy bajas preferimos que la página scrollee */
  max-height: 720px; /* techo: en monitores altos el log no se vuelve un vacío */
}
.chat-panel-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.chat-log {
  flex: 1;
  min-height: 0; /* clave: deja que el log se achique dentro del panel */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Los mensajes se apoyan abajo, como en cualquier chat, en vez de dejar un
   vacío enorme entre el saludo y el input. Va margin-top:auto en el primer
   mensaje y NO justify-content:flex-end, que rompe el scroll al desbordar. */
.chat-log > :first-child { margin-top: auto; }
.chat-msg {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-msg.bot {
  align-self: flex-start;
  background: var(--bg-soft);
  color: var(--ink-soft);
  border-bottom-left-radius: 4px;
}
.chat-msg.user {
  align-self: flex-end;
  background: var(--blue-600);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 14px 16px;
  background: var(--bg-soft);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
}
.chat-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: chat-bounce 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

.chat-form {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}
.chat-input {
  flex: 1;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
}
.chat-input:focus { outline: none; border-color: var(--blue-600); }
.chat-input:disabled { background: var(--bg-soft); }
.chat-send:disabled { opacity: .6; cursor: not-allowed; }

.chat-hint {
  flex: none;
  text-align: center;
  color: var(--on-blue-muted);
  font-size: 14px;
  margin-top: 18px;
}
.chat-hint a { color: #fff; text-decoration: underline; }

/* Ventanas bajas (notebooks de 768px, celular apaisado): se comprime la
   cabecera para que el alto se lo lleve la conversación y no el título. */
@media (max-height: 780px) {
  .page-chat .chat-section { padding: 22px 0 26px; }
  .chat-head { margin-bottom: 18px; }
  .chat-head h1 { font-size: clamp(22px, 2.8vw, 28px); margin-bottom: 8px; }
  .chat-head .eyebrow { margin-bottom: 10px; }
  .chat-head .section-sub { font-size: 15px; }
  .chat-panel-head { padding: 14px 20px; }
  .chat-hint { margin-top: 12px; }
}
@media (max-height: 620px) {
  .chat-head .eyebrow, .chat-head .section-sub { display: none; }
  .chat-head h1 { font-size: 22px; }
  .chat-head { margin-bottom: 14px; }
}

@media (max-width: 560px) {
  .page-chat .chat-section { padding: 20px 0 24px; }
  .chat-head { margin-bottom: 16px; }
  .chat-head h1 { font-size: 24px; }
  .chat-panel-head { padding: 14px 16px; gap: 12px; }
  .chat-log { padding: 16px; }
  .chat-msg { max-width: 88%; }
  .chat-form { padding: 12px; gap: 8px; }
}

/* El botón flotante de WhatsApp se apoyaría justo encima del "Enviar" cuando
   el panel llega al borde inferior de la pantalla. En esta página el link
   "Escribinos por WhatsApp" debajo del panel ya cumple esa función. */
@media (max-width: 760px) {
  .page-chat .wa-float { display: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-art { order: -1; max-width: 460px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; gap: 44px; }
  .fleet { grid-template-columns: 1fr; padding: 40px; }
  .fleet-art { justify-content: flex-start; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav {
    position: fixed;
    inset: 72px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 12px 24px 20px;
    transform: translateY(-120%);
    transition: transform .24s ease;
    visibility: hidden;
  }
  .nav.open { transform: translateY(0); visibility: visible; }
  .nav > a { padding: 12px 4px; font-size: 16px; border-bottom: 1px solid var(--line); }
  .nav > a:not(.btn) { color: var(--ink-soft); }
  .nav > a:last-child { border-bottom: none; }
  .nav > a:not(.btn):hover { color: var(--blue-600); }
  .nav > a:not(.btn).active { color: var(--blue-600); }
  .nav > a:not(.btn)::after { display: none; }
  .nav-cta { margin: 10px 0 0; justify-content: center; }
  .nav-toggle { display: flex; }
}

@media (max-width: 560px) {
  .container { padding: 0 18px; }
  .section { padding: 60px 0; }
  .hero { padding: 40px 0 28px; }
  .strip-grid { grid-template-columns: 1fr; gap: 18px; padding: 24px 18px; }
  .cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .contact-cta { padding: 18px; gap: 14px; }
  .info-list li { flex-direction: column; gap: 2px; }
  .info-v { text-align: left; }
}