/* =========================
   Paleta y tokens
   ========================= */
:root{
  --brand:#0ea5e9;        /* celeste marca */
  --brand-2:#f5b301;      /* acento amarillo (moño) */
  --ink:#0f172a;          /* texto principal */
  --muted:#64748b;        /* texto secundario */
  --surface:#ffffff;      /* fondo cartas/section clara */
  --border:rgba(2,8,23,.08);
  --shadow:0 10px 30px rgba(2,8,23,.12);
  --radius-lg:1rem;
  --radius-md:.8rem;
  --focus:#1a73e8;        /* anillo de foco accesible */
  --focus-ring:0 0 0 4px rgba(26,115,232,.2);
  --play-bg:rgba(255,255,255,.92);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html{ scroll-behavior:smooth; }
body{ color:var(--ink); background:#fff; }

/* Tipografía y legibilidad suaves */
h1,h2,h3,h4,h5{ letter-spacing:.2px; }
.section-title{ font-weight:800; letter-spacing:.3px; }

/* Limpieza de transiciones para usuarios con reduced-motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* =========================
   Navbar
   ========================= */
.navbar .nav-link{ font-weight:500; }
.navbar .nav-link:hover{ color:var(--brand); }
.navbar .btn-brand{ margin-left:.5rem; }
.navbar-brand img{ height:40px; width:auto; }
.nav-logo{ height:40px; width:auto; }

/* =========================
   Botones
   ========================= */
.btn-brand{
  background:var(--brand);
  color:#fff;
  border:none;
  border-radius:var(--radius-lg);
  box-shadow:0 6px 20px rgba(14,165,233,.25);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
@media (hover:hover){
  .btn-brand:hover{
    filter:brightness(0.92);
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 10px 26px rgba(14,165,233,.28);
  }
}
.btn-brand:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  box-shadow:var(--focus-ring);
}

.btn-outline-primary{
  border-radius:var(--radius-lg);
  border-color:var(--brand);
  color:var(--brand);
}
@media (hover:hover){
  .btn-outline-primary:hover{
    background:rgba(14,165,233,.08);
    color:var(--brand);
    border-color:var(--brand);
  }
}
.btn-outline-primary:focus-visible,
.btn-outline-secondary:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  box-shadow:var(--focus-ring);
}

.btn-outline-secondary{
  border-radius:var(--radius-lg);
}

/* Enlaces foco accesible */
a:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:.3rem;
}

/* =========================
   Utilidades
   ========================= */
.text-muted{ color:var(--muted)!important; }
.badge-soft{
  background:rgba(14,165,233,.12);
  color:var(--brand);
  border:1px solid rgba(14,165,233,.25);
  border-radius:999px;
  padding:.35rem .6rem;
  font-weight:600;
}

/* =========================
   Hero
   ========================= */
.hero{
  background:linear-gradient(180deg, rgba(14,165,233,.08), transparent 60%);
}
.hero-img{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}

/* =========================
   Features / Cards
   ========================= */
.feature i{ font-size:1.6rem; color:var(--brand); }
.benefit-card,
.p-4.border.rounded-4{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  background:var(--surface);
}
@media (hover:hover){
  .benefit-card:hover,
  .p-4.border.rounded-4:hover{
    box-shadow:0 12px 30px rgba(2,8,23,.10);
    transform:translateY(-2px);
    border-color:rgba(14,165,233,.25);
  }
}

/* =========================
   Steps
   ========================= */
.step{
  border-left:3px solid var(--brand);
  padding-left:1rem;
  margin-left:.3rem;
}

/* =========================
   Galería
   ========================= */
.gallery img{
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:var(--radius-md);
  width:100%;
  height:100%;
  box-shadow:0 8px 24px rgba(2,8,23,.08);
}

/* =========================
   Formularios
   ========================= */
.form-control{
  border-radius:.75rem;
  border-color:var(--border);
}
.form-control::placeholder{ color:rgba(100,116,139,.85); }
.form-control:focus{
  border-color:var(--brand);
  box-shadow:var(--focus-ring);
}
.was-validated .form-control:invalid,
.form-control.is-invalid{
  border-color:#ef4444;
  box-shadow:0 0 0 4px rgba(239,68,68,.15);
}
.was-validated .form-control:valid,
.form-control.is-valid{
  border-color:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.12);
}
#mailtoStatus{ min-height:1.25rem; }

/* =========================
   FAQ (accordion)
   ========================= */
.accordion-button:not(.collapsed){
  background:#f8fafc;
  color:var(--ink);
}
.accordion-button:focus{ box-shadow:none; }
.accordion-button:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  z-index:2;
}

/* =========================
   Footer
   ========================= */
footer{
  border-top:1px solid var(--border);
  background:#fff;
}

/* =========================
   Responsivo
   ========================= */
@media (max-width:991px){
  .navbar .btn-brand{
    margin-top:.5rem;
    width:100%;
  }
}

/* =========================
   Video (ligero + responsive)
   ========================= */
.video-block{ max-width:1000px; margin-inline:auto; }

.lite-video{
  position:relative;
  width:100%;
  max-width:960px;
  margin:0 auto;
  cursor:pointer;
  background:#000;
  padding-top:56.25%; /* 16:9 */
  border-radius:12px;
  overflow:hidden;
}
.lite-video .lite-thumb{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(0.9);
}
.lite-video .lite-play{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-size:64px; line-height:1;
  background:var(--play-bg);
  padding:12px 24px;
  border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.lite-video:focus-visible .lite-play{ outline:3px solid var(--focus); }

@media (max-width:576px){
  .lite-video .lite-play{
    font-size:48px;
    padding:10px 18px;
  }
}

/* Opción iframe simple (si no usás la versión ligera) */
.video-wrapper{
  position:relative;
  width:100%; max-width:960px; margin:0 auto;
  padding-top:56.25%; /* 16:9 */
  border-radius:12px; overflow:hidden;
}
.video-wrapper iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* =========================
   Sticky CTA (móvil)
   ========================= */
@media (max-width:992px){
  .sticky-cta{
    position:fixed; bottom:0; left:0; right:0; z-index:1030;
    backdrop-filter:saturate(140%) blur(6px);
    background:rgba(255,255,255,.9);
    border-top:1px solid var(--border);
    padding:calc(.6rem + var(--safe-bottom)) .5rem .6rem .5rem;
  }
  /* Evitar que el contenido quede tapado por la barra */
  body{ padding-bottom:calc(68px + var(--safe-bottom)); }
}

/* =========================
   Detalles extra
   ========================= */
.img-fluid.rounded-3{ border-radius:var(--radius-md)!important; }

/* Sombra suave en imágenes clave (hero/galería) */
.shadow-soft{ box-shadow:var(--shadow); }