/* ============================================================
   COTROCAR — Estilos del sitio
   Colores de marca en :root. Diseño adaptable a celular (ver final).
   ============================================================ */

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

:root {
  --blue-dark:  #0C447C;
  --blue-mid:   #185FA5;
  --blue-light: #378ADD;
  --blue-pale:  #E6F1FB;
  --green-dark:  #3B6D11;
  --green-mid:   #639922;
  --green-light: #97C459;
  --green-pale:  #EAF3DE;
  --text:       #1a1a1a;
  --text-muted: #4a5568;
  --surface:    #f7f9fc;
  --white:      #ffffff;
  --border:     #d0dde8;
  --error:      #c53030;
  --radius:     10px;
}

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { font-family: 'Barlow', Arial, sans-serif; color: var(--text); background: var(--surface); line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: var(--blue-mid); }

h2 { font-family: 'Barlow Condensed', Arial, sans-serif; font-size: 2.2rem; font-weight: 800; color: var(--blue-dark); line-height: 1.15; margin-bottom: 1rem; }
.section-label { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--green-mid); margin-bottom: .4rem; }
.section-subtitle { color: var(--text-muted); font-size: 1.05rem; max-width: 640px; margin-bottom: 2.5rem; }
section { padding: 4.5rem 2rem; }
.container { max-width: 1100px; margin: 0 auto; }

/* ── Navegación ───────────────────────────── */
nav { position: sticky; top: 0; z-index: 100; background: var(--blue-dark); padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 68px; box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.nav-logo { background: #fff; border-radius: 6px; padding: 4px 8px; }
.nav-logo img { height: 40px; width: auto; }
.nav-links { display: flex; gap: 1.8rem; list-style: none; align-items: center; }
.nav-links a { color: rgba(255,255,255,.85); text-decoration: none; font-size: .95rem; font-weight: 500; }
.nav-links a:hover { color: var(--green-light); }
.nav-cta { background: var(--green-mid); color: #fff !important; padding: .45rem 1rem; border-radius: 8px; font-weight: 600 !important; }
.nav-right { display: flex; align-items: center; gap: .75rem; }
.nav-cta-mobile { display: none; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; }
.nav-links.open { display: flex; flex-direction: column; position: absolute; top: 68px; left: 0; right: 0; background: var(--blue-dark); padding: 1rem 2rem 1.5rem; gap: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,.3); }

/* ── Portada ──────────────────────────────── */
.hero { position: relative; overflow: hidden; min-height: 540px; display: flex; align-items: center; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; filter: brightness(.4); }
.hero-content { position: relative; z-index: 2; padding: 5rem 2rem 4.5rem; max-width: 1100px; margin: 0 auto; width: 100%; }
.hero-badge { display: inline-block; background: rgba(151,196,89,.18); color: var(--green-light); border: 1px solid rgba(151,196,89,.4); padding: .25rem .85rem; border-radius: 20px; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1.2rem; }
.hero h1 { font-family: 'Barlow Condensed', Arial, sans-serif; font-size: clamp(2.2rem, 5.5vw, 3.8rem); font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 1rem; max-width: 820px; }
.hero h1 em { color: var(--green-light); font-style: normal; }
.hero-content p { font-size: 1.1rem; color: rgba(255,255,255,.88); max-width: 560px; margin-bottom: 1.5rem; }
.hero-points { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 2rem; color: #fff; font-weight: 500; }
.hero-points li::before { content: '✓ '; color: var(--green-light); font-weight: 700; }
.btn-primary { display: inline-block; background: var(--green-mid); color: #fff; padding: .8rem 2rem; border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: 1rem; border: none; cursor: pointer; }
.btn-primary:hover { background: var(--green-dark); }
.btn-outline { display: inline-block; border: 2px solid rgba(255,255,255,.6); color: #fff; padding: .7rem 1.8rem; border-radius: var(--radius); text-decoration: none; font-weight: 600; margin-left: .75rem; }
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* ── Nosotros ─────────────────────────────── */
#nosotros { background: var(--white); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.about-photo { border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 12px 40px rgba(12,68,124,.15); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-text p { color: var(--text-muted); margin-bottom: 1rem; }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1.5rem; }
.stat-block { background: var(--surface); border-radius: var(--radius); padding: .9rem 1rem; border-left: 4px solid var(--blue-mid); }
.stat-block .num { font-family: 'Barlow Condensed', Arial, sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--blue-dark); line-height: 1.1; }
.stat-block .lbl { font-size: .82rem; color: var(--text-muted); margin-top: .25rem; }

/* ── Productos ────────────────────────────── */
#productos { background: var(--surface); }
.products-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.product-card { background: var(--white); border-radius: 14px; border: 1.5px solid var(--border); overflow: hidden; }
.product-header { padding: 1.5rem 1.75rem 1.1rem; display: flex; align-items: center; gap: 1rem; }
.product-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-diesel { background: var(--blue-pale); }
.icon-kerosene { background: var(--green-pale); }
.product-card h3 { font-family: 'Barlow Condensed', Arial, sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--blue-dark); line-height: 1.2; }
.tag { display: inline-block; margin-top: .25rem; background: var(--blue-pale); color: var(--blue-mid); font-size: .75rem; font-weight: 600; padding: .2rem .65rem; border-radius: 20px; }
.tag.green { background: var(--green-pale); color: var(--green-dark); }
.product-body { padding: 1.2rem 1.75rem 1.75rem; border-top: 1px solid var(--border); }
.product-body p { color: var(--text-muted); font-size: .96rem; }
.product-features { list-style: none; margin-top: 1rem; display: flex; flex-direction: column; gap: .45rem; }
.product-features li { font-size: .92rem; color: var(--text-muted); display: flex; gap: .5rem; }
.product-features li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green-mid); flex-shrink: 0; margin-top: .55rem; }
.min-badge { margin-top: 1.1rem; display: inline-block; background: var(--blue-dark); color: #fff; font-weight: 600; font-size: .88rem; padding: .35rem .8rem; border-radius: 8px; }

/* ── Rubros ───────────────────────────────── */
.sectors { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.sectors span { background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: .35rem .9rem; font-size: .88rem; color: var(--text-muted); }

/* ── Flota ────────────────────────────────── */
.flota-img { width: 100%; max-height: 420px; object-fit: cover; object-position: center 55%; }
.flota-caption { background: var(--white); text-align: center; padding: 1.25rem 2rem; color: var(--text-muted); font-size: .92rem; }
.flota-caption strong { color: var(--blue-dark); }

/* ── Cobertura ────────────────────────────── */
#cobertura { background: var(--blue-dark); }
#cobertura h2 { color: #fff; }
#cobertura .section-label { color: var(--green-light); }
#cobertura .section-subtitle { color: rgba(255,255,255,.75); }
.coverage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.coverage-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 1.4rem; }
.coverage-card h3 { font-family: 'Barlow Condensed', Arial, sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--green-light); margin-bottom: .4rem; }
.coverage-card p { color: rgba(255,255,255,.75); font-size: .9rem; }
.coverage-note { margin-top: 2rem; background: rgba(151,196,89,.12); border: 1px solid rgba(151,196,89,.3); border-radius: var(--radius); padding: 1.1rem 1.5rem; color: rgba(255,255,255,.88); font-size: .95rem; }
.coverage-note a { color: var(--green-light); font-weight: 600; }

/* ── Preguntas frecuentes ─────────────────── */
#preguntas { background: var(--white); }
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--border); padding: 1rem 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--blue-dark); font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--green-mid); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details p { color: var(--text-muted); margin-top: .6rem; }

/* ── Cotización ───────────────────────────── */
#cotizar { background: var(--surface); }
.form-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start; }
.form-info p { color: var(--text-muted); margin-bottom: 1.5rem; }
.form-info ul { list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.form-info li { color: var(--text-muted); }
.form-info li::before { content: '✓ '; color: var(--green-mid); font-weight: 700; }
.form-info .wa-alt { margin-top: 1.5rem; font-size: .95rem; }
form { display: flex; flex-direction: column; gap: 1.1rem; background: var(--white); padding: 1.75rem; border-radius: 14px; border: 1.5px solid var(--border); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
label { font-size: .85rem; font-weight: 600; color: var(--blue-dark); margin-bottom: .3rem; display: block; }
.hint { font-size: .8rem; color: var(--text-muted); margin-top: .3rem; }
.field-error { font-size: .8rem; color: var(--error); margin-top: .3rem; display: none; }
.invalid .field-error { display: block; }
.invalid input, .invalid select { border-color: var(--error); }
input, select, textarea { width: 100%; padding: .7rem .9rem; border: 1.5px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 1rem; background: var(--surface); color: var(--text); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(55,138,221,.15); background: var(--white); }
textarea { resize: vertical; min-height: 80px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.submit-btn { width: 100%; background: var(--blue-dark); color: #fff; padding: .9rem; border: none; border-radius: 8px; font-family: inherit; font-size: 1.05rem; font-weight: 600; cursor: pointer; }
.submit-btn:hover { background: var(--blue-mid); }
.submit-btn:disabled { opacity: .7; cursor: wait; }
.form-status { display: none; border-radius: var(--radius); padding: 1rem 1.25rem; font-weight: 500; text-align: center; }
.form-status.ok { display: block; background: var(--green-pale); border: 1.5px solid var(--green-light); color: var(--green-dark); }
.form-status.error { display: block; background: #fff5f5; border: 1.5px solid #feb2b2; color: var(--error); }

/* ── Contacto ─────────────────────────────── */
#contacto { background: var(--white); }
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.contact-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px; padding: 1.4rem; display: flex; flex-direction: column; gap: .4rem; }
.contact-card h3 { font-family: 'Barlow Condensed', Arial, sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--blue-dark); }
.contact-card p, .contact-card a { color: var(--text-muted); font-size: .92rem; text-decoration: none; word-break: break-word; }
.contact-card a:hover { color: var(--blue-mid); }
.webpay-link { margin-top: .5rem; display: inline-block; background: #fff; border-radius: 8px; padding: .4rem; border: 1px solid var(--border); width: fit-content; }
.webpay-link img { width: 150px; height: auto; }

/* ── Pie de página ────────────────────────── */
footer { background: var(--blue-dark); color: rgba(255,255,255,.7); text-align: center; padding: 2rem; font-size: .87rem; }
footer strong { color: #fff; }
footer .foot-logo { background: #fff; border-radius: 6px; padding: 4px 8px; display: inline-block; margin-bottom: .75rem; }
footer .foot-logo img { height: 32px; width: auto; }
footer p + p { margin-top: .4rem; }

/* ── Botón flotante WhatsApp ──────────────── */
.wa-float { position: fixed; bottom: 24px; right: 24px; z-index: 999; width: 58px; height: 58px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.wa-float:hover { transform: scale(1.08); }

/* ── Tablet (≤ 960px) ─────────────────────── */
@media (max-width: 960px) {
  .contact-grid, .coverage-grid { grid-template-columns: repeat(2, 1fr); }
  .about-stats { grid-template-columns: 1fr; }
}

/* ── Celular (≤ 768px) ────────────────────── */
@media (max-width: 768px) {
  nav { padding: 0 1rem; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta-mobile { display: inline-block; background: var(--green-mid); color: #fff; padding: .4rem .85rem; border-radius: 8px; font-weight: 600; text-decoration: none; font-size: .9rem; }
  .nav-logo img { height: 34px; }
  .hero { min-height: 460px; }
  .hero-content { padding: 3rem 1.25rem; }
  .btn-primary, .btn-outline { display: block; text-align: center; margin: 0 0 .75rem 0; }
  section { padding: 3rem 1.25rem; }
  h2 { font-size: 1.8rem; }
  .about-grid, .products-grid, .form-layout, .form-row, .contact-grid, .coverage-grid { grid-template-columns: 1fr; }
  .form-layout { gap: 2rem; }
  form { padding: 1.25rem; }
  .flota-img { max-height: 260px; }
  .wa-float { width: 52px; height: 52px; bottom: 16px; right: 16px; }
}