/* =============================================================
   Sky AutoWorks · Landing /trendelantero
   Mobile-first. Sin frameworks. Contraste AA. Targets ≥44px.
   ============================================================= */

:root{
  --brand:        #0a1f44;   /* Azul corporativo oscuro */
  --brand-2:      #122c63;
  --accent:       #ff7a00;   /* Naranja CTA */
  --accent-dk:    #d96400;
  --wa:           #25d366;   /* WhatsApp green */
  --wa-dk:        #1ba851;
  --ink:          #14181f;
  --ink-2:        #3a414d;
  --ink-3:        #6b7280;
  --bg:           #ffffff;
  --bg-alt:       #f6f7fb;
  --line:         #e6e8ef;
  --shadow-sm:    0 1px 2px rgba(20,24,31,.08);
  --shadow-md:    0 6px 18px rgba(20,24,31,.10);
  --radius:       12px;
  --radius-sm:    8px;
  --maxw:         1080px;
  --tap:          48px;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  /* espacio inferior para el sticky bar móvil */
  padding-bottom: 76px;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{ font-weight:800; letter-spacing:-0.01em; color:var(--brand); margin:0 0 .4em; }
h1{ font-size: clamp(1.7rem, 5.2vw, 2.6rem); line-height:1.15; }
h2{ font-size: clamp(1.4rem, 3.6vw, 2rem); line-height:1.2; }
h3{ font-size: 1.05rem; line-height:1.3; color:var(--brand); }
p { margin:0 0 .8em; color:var(--ink-2); }
small{ color:var(--ink-3); }

a{ color:var(--brand-2); text-decoration: underline; text-underline-offset: 2px; }
a:hover{ color:var(--accent-dk); }

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

/* ============== HEADER ============== */
.hdr{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.hdr__wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height: var(--tap);
}
.hdr__logo{
  display:flex; align-items:center; gap:8px;
  text-decoration:none; color:var(--brand);
}
.hdr__logo-mark{
  display:inline-grid; place-items:center;
  width:34px; height:34px; border-radius:8px;
  background:var(--brand); color:#fff;
  font-weight:800; font-size:.85rem; letter-spacing:.02em;
}
.hdr__logo-text{ font-weight:700; font-size:.95rem; }
.hdr__phone{
  display:inline-flex; align-items:center; gap:6px;
  text-decoration:none;
  background:var(--accent); color:#fff;
  padding:10px 14px; border-radius:999px;
  font-weight:700; font-size:.92rem;
  min-height: 40px;
}
.hdr__phone:hover{ background:var(--accent-dk); color:#fff; }

/* ============== HERO ============== */
.hero{
  position:relative; overflow:hidden;
  color:#fff;
  padding: 28px 0 36px;
  min-height: 460px;
  display:flex; align-items:center;
}
.hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,31,68,.25) 0%, rgba(10,31,68,.55) 60%, rgba(10,31,68,.85) 100%),
    linear-gradient(135deg, #0a1f44 0%, #122c63 50%, #1a3a82 100%);
  /* Placeholder: cuando exista la foto real:
     background-image: url('img/hero-placeholder.jpg'), linear-gradient(...);
     background-size: cover; background-position: center; */
  z-index:0;
}
.hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,122,0,.25), transparent 60%),
    radial-gradient(circle at 10% 90%, rgba(37,211,102,.18), transparent 55%);
  z-index:0;
}
.hero__content{ position:relative; z-index:1; }
.hero h1{ color:#fff; }
.hero__sub{
  font-size: 1.05rem; color:#e8ecf5;
  max-width: 38ch;
}
.hero__sub strong{ color:#fff; background:rgba(255,122,0,.28); padding:0 .25em; border-radius:4px; }
.hero__horario{
  margin-top:14px; font-size:.85rem; color:#cfd6e6; margin-bottom:0;
}

.badge{
  display:inline-block;
  background: rgba(255,255,255,.14);
  color:#fff;
  padding: 6px 12px; border-radius:999px;
  font-size:.78rem; font-weight:600; letter-spacing:.02em;
  margin-bottom: 14px;
  border:1px solid rgba(255,255,255,.22);
}

.trust-row{
  list-style:none; padding:0; margin: 14px 0 18px;
  display:flex; flex-wrap:wrap; gap:8px 14px;
  font-size:.85rem; color:#e8ecf5;
}
.trust-row li{ display:inline-flex; align-items:center; gap:6px; }
.trust-ico{ color:#ffd166; }

/* ============== BUTTONS ============== */
.cta-row{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top: 8px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height: var(--tap);
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration:none;
  border:0; cursor:pointer;
  transition: transform .08s ease, background-color .15s ease, box-shadow .15s ease;
  box-shadow: var(--shadow-sm);
  line-height:1;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent-dk); color:#fff; }
.btn--whatsapp{ background:var(--wa); color:#fff; }
.btn--whatsapp:hover{ background:var(--wa-dk); color:#fff; }
.btn--ghost{
  background:#fff; color:var(--brand);
  border:1.5px solid var(--brand);
  box-shadow:none;
}
.btn--ghost:hover{ background:var(--brand); color:#fff; }
.btn--block{ width:100%; }

/* ============== SECTIONS ============== */
.section{ padding: 44px 0; }
.section--alt{ background: var(--bg-alt); }
.section .lede{ color:var(--ink-2); font-size:1.02rem; margin-bottom: 18px; max-width: 60ch; }
.section__cta{ margin-top: 18px; }

.section--sintomas{ background:#fff; }

/* ============== SÍNTOMAS ============== */
.symptoms{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns: 1fr; gap:10px;
}
.symptoms li{
  display:flex; align-items:center; gap:10px;
  background:#fff; padding:14px 16px;
  border:1px solid var(--line); border-radius: var(--radius);
  font-weight:600; color:var(--ink);
}
.symptoms li span{
  font-size:1.2rem;
}

/* ============== GRIDS (reparamos / why) ============== */
.grid{
  list-style:none; padding:0; margin:0;
  display:grid; gap:12px;
  grid-template-columns: repeat(2, 1fr);
}
.grid--reparamos li{
  background:#fff; border:1px solid var(--line);
  padding: 14px 14px; border-radius: var(--radius);
  font-weight:600; color:var(--ink);
  text-align:center; font-size:.95rem;
}
.grid--why{ grid-template-columns: 1fr; }
.grid--why li{
  background:#fff; border:1px solid var(--line);
  padding: 18px; border-radius: var(--radius);
  text-align:left;
}
.why__num{
  font-size: 2rem; font-weight:800; color:var(--accent);
  line-height:1; margin-bottom: 6px;
}
.why__num small{ font-size:1rem; color:var(--accent); }

/* ============== RATING + REVIEWS ============== */
.rating{ display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.rating__stars{ color:#f5a623; font-size:1.2rem; letter-spacing:2px; }
.rating strong{ color:var(--brand); }

.reviews{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.reviews li{
  background:#fff; border:1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
}
.reviews blockquote{
  margin:0 0 8px; font-style: italic; color:var(--ink);
}
.reviews cite{ font-size:.85rem; color:var(--ink-3); font-style:normal; }

/* ============== FORM ============== */
.section--form{ background:var(--bg-alt); }
.form{ display:grid; gap:14px; }
.field{ display:grid; gap:6px; }
.field > span{
  font-size: .92rem; font-weight: 600; color: var(--brand);
}
.field > span small{ font-weight:400; color:var(--ink-3); }
.field input,
.field select{
  font: inherit;
  padding: 12px 14px;
  border:1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background:#fff; color:var(--ink);
  min-height: var(--tap);
  width: 100%;
}
.field input:focus,
.field select:focus{
  outline:none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(10,31,68,.15);
}
/* Solo marcar rojo cuando el usuario ya interactuó y dejó el campo inválido.
   Truco: requiere placeholder=" " en inputs sin placeholder visible. */
.field input:not(:placeholder-shown):invalid:not(:focus){
  border-color: #c0392b;
}
.form__alt{ font-size:.9rem; color:var(--ink-2); margin: 6px 0 0; text-align:center; }
.form__msg{
  margin-top: 8px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  font-weight:600;
}
.form__msg--ok{ background:#e6f7ed; color:#1b6b3a; border:1px solid #b7e4c7; }
.form__msg--err{ background:#fdecec; color:#9b1c1c; border:1px solid #f5b5b5; }

/* honeypot */
.hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

/* ============== LOCATION ============== */
.location{ display:grid; gap:18px; grid-template-columns: 1fr; }
.location__map iframe{ border-radius: var(--radius); display:block; }

/* ============== FAQ ============== */
.faq{
  background:#fff; border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 16px; margin-bottom: 10px;
}
.faq summary{
  cursor:pointer; padding: 14px 0;
  font-weight: 700; color:var(--brand);
  list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.4rem; color:var(--accent); font-weight:800; }
.faq[open] summary::after{ content:"–"; }
.faq p{ padding: 0 0 14px; margin:0; color:var(--ink-2); }

/* ============== DISCLAIMER / NOTA LEGAL ============== */
.disclaimer{
  background: #fff8ee;
  border-top: 1px solid #f3d8a8;
  border-bottom: 1px solid #f3d8a8;
  padding: 22px 0;
  color: #5b4a23;
}
.disclaimer__title{
  font-weight: 800;
  color: #8a5a00;
  margin: 0 0 8px;
  font-size: .92rem;
  letter-spacing: .01em;
}
.disclaimer__list{
  list-style: disc;
  padding-left: 20px;
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
}
.disclaimer__list li{ margin-bottom: 4px; color: #5b4a23; }
.disclaimer__list strong{ color: #3d2f10; }

/* ============== FOOTER ============== */
.footer{
  background: var(--brand);
  color:#e8ecf5;
  padding: 28px 0;
  font-size:.92rem;
}
.footer a{ color:#fff; }
.footer a:hover{ color:var(--accent); }
.footer__wrap{
  display:grid; gap:14px;
  grid-template-columns: 1fr;
}
.footer__legal{ color:#aab4cc; font-size:.82rem; }

/* ============== STICKY BAR MÓVIL ============== */
.stickybar{
  position:fixed; left:0; right:0; bottom:0;
  z-index: 60;
  display:grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line);
  box-shadow: 0 -4px 16px rgba(20,24,31,.18);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.stickybar__btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height: 64px;
  background:#fff;
  text-decoration:none; font-weight: 800; font-size:1rem;
  color:#fff;
}
.stickybar__btn--call{ background: var(--accent); }
.stickybar__btn--call:hover{ background: var(--accent-dk); color:#fff; }
.stickybar__btn--wa{ background: var(--wa); }
.stickybar__btn--wa:hover{ background: var(--wa-dk); color:#fff; }

/* ============== RESPONSIVE ============== */
@media (min-width: 640px){
  .symptoms{ grid-template-columns: 1fr 1fr; }
  .grid--reparamos{ grid-template-columns: repeat(3, 1fr); }
  .grid--why{ grid-template-columns: 1fr 1fr; }
  .hero{ padding: 48px 0 56px; min-height: 520px; }
  .footer__wrap{ grid-template-columns: 1fr 1fr 1fr; align-items:center; }
}

@media (min-width: 960px){
  body{ padding-bottom: 0; }
  .stickybar{ display:none; }
  .grid--reparamos{ grid-template-columns: repeat(4, 1fr); }
  .grid--why{ grid-template-columns: repeat(4, 1fr); }
  .location{ grid-template-columns: 1fr 1.4fr; align-items:start; }
  .section{ padding: 64px 0; }
  .hero{ min-height: 580px; }
}

/* ============== PRINT / REDUCED MOTION ============== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn{ transition:none; }
}