:root{
    --teal: #007297;
    --teal-dark: #004d66;
    --teal-deep: #0F2A33;
    --red: #0066B3;
    --bg: #F2F6F7;
    --surface: #FFFFFF;
    --line: #D4E1E4;
    --ink: #0F2A33;
    --ink-soft: #4C6067;
    --ink-faint: #7C8E93;
    --plate: #0F2A33;
    --plate-line: rgba(255,255,255,0.14);
    --radius: 4px;
    --max: 1140px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Source Sans 3', -apple-system, sans-serif;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Archivo', sans-serif;
    color:var(--teal-deep);
    margin:0;
    letter-spacing:-0.01em;
  }
  .mono{ font-family:'IBM Plex Mono', monospace; }
  a{ color:inherit; }
  img{max-width:100%;display:block;}
  .wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }
  .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  :focus-visible{ outline: 3px solid var(--red); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } }

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:var(--surface);
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 24px; gap:20px;
  }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand-mark{
    width:36px; height:36px; border-radius:8px;
    background:var(--teal);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .brand-mark svg{ width:20px; height:20px; }
  .brand-name{ font-family:'Archivo', sans-serif; font-weight:700; font-size:17px; color:var(--teal-deep); line-height:1.1; }
  .brand-tag{ font-size:11.5px; color:var(--ink-faint); font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em; }
  nav{ display:flex; align-items:center; gap:28px; }
  nav a{ text-decoration:none; font-size:14.5px; color:var(--ink-soft); font-weight:600; }
  nav a:hover{ color:var(--teal); }
  .nav-links{ display:flex; gap:26px; }
  .header-cta{ display:flex; align-items:center; gap:10px; }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 20px; border-radius:var(--radius);
    font-weight:700; font-size:14.5px; text-decoration:none;
    border:1.5px solid transparent; cursor:pointer;
    font-family:'Source Sans 3', sans-serif;
  }
  .btn-primary{ background:var(--red); color:#fff; }
  .btn-primary:hover{ background:#c40228; }
  .btn-outline{ background:transparent; border-color:var(--teal); color:var(--teal); }
  .btn-outline:hover{ background:rgba(0,114,151,0.07); }
  .btn-ghost-phone{ color:var(--teal-deep); font-weight:700; font-size:14.5px; text-decoration:none; }
  .menu-toggle{ display:none; background:none; border:1.5px solid var(--line); border-radius:6px; padding:8px 10px; cursor:pointer; }
  .menu-toggle svg{ width:20px; height:20px; display:block; }

  /* ---------- hero ---------- */
  .hero{ padding:56px 0 64px; background:var(--bg); }
  .hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
  .badge-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
  .badge{
    display:inline-flex; align-items:center; gap:6px;
    background:#fff; border:1px solid var(--line); border-radius:100px;
    padding:6px 13px; font-size:12.5px; font-weight:600; color:var(--teal-deep);
  }
  .badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--red); }
  .hero h1{ font-size:40px; font-weight:800; line-height:1.14; margin-bottom:18px; }
  .hero h1 .accent{ color:var(--teal); }
  .hero-sub{ font-size:17px; color:var(--ink-soft); max-width:520px; margin-bottom:28px; }
  .hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px; }
  .hero-stats{ display:flex; gap:0; border-top:1px solid var(--line); padding-top:22px; }
  .hero-stat{ padding-right:28px; margin-right:28px; border-right:1px solid var(--line); }
  .hero-stat:last-child{ border-right:none; margin-right:0; }
  .hero-stat b{ display:block; font-family:'Archivo',sans-serif; font-size:24px; color:var(--teal-deep); font-weight:800; }
  .hero-stat span{ font-size:12.5px; color:var(--ink-faint); }

  /* ---------- slider con imágenes ---------- */

.hero-slider {
  background: var(--plate);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 44px -18px rgba(15,42,51,0.55);
  height: 340px;
  min-height: 340px;
}

.slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.slide {
  min-width: 100%;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: block;
  overflow: hidden;
}

.slide img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  object-fit: cover;
}

/* ---------- controles ---------- */

.slider-controls {
  position: absolute;
  bottom: 12px;
  right: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 5;
}

.slider-btn {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s;
}

.slider-btn:hover {
  background: rgba(255,255,255,0.25);
}

.slider-btn svg {
  width: 16px;
  height: 16px;
}

.slider-dots {
  display: flex;
  gap: 6px;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s;
}

.slider-dot.active {
  background: var(--red);
}

  /* ---------- section shell ---------- */
  section{ padding:76px 0; }
  .section-head{ max-width:600px; margin-bottom:40px; }
  .eyebrow{
    font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--teal);
    margin-bottom:10px; font-weight:600;
  }
  .section-head h2{ font-size:29px; font-weight:800; line-height:1.2; margin-bottom:12px; }
  .section-head p{ color:var(--ink-soft); font-size:16px; }

  /* ---------- services ---------- */
  .services{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  .service-card{ background:#fff; padding:26px 24px; }
  .service-icon{ width:38px; height:38px; margin-bottom:16px; color:var(--teal); }
  .service-icon svg{ width:100%; height:100%; }
  .service-card h3{ font-size:17px; font-weight:700; margin-bottom:7px; }
  .service-card p{ font-size:14px; color:var(--ink-soft); margin:0; }

  /* ---------- why / trust ---------- */
  .trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
  .trust-item{ border-left:2px solid var(--teal); padding-left:16px; }
  .trust-item h3{ font-size:16px; font-weight:700; margin-bottom:6px; }
  .trust-item p{ font-size:14px; color:var(--ink-soft); margin:0; }

  /* ---------- process ---------- */
  .process{ background:var(--teal-deep); color:#fff; }
  .process .section-head h2, .process .eyebrow{ color:#fff; }
  .process .eyebrow{ color:#8FC6D6; }
  .process .section-head p{ color:#B9D4DB; }
  .process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
  .process-step{ padding-right:20px; position:relative; }
  .process-num{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--red); margin-bottom:14px; }
  .process-step h3{ color:#fff; font-size:16.5px; font-weight:700; margin-bottom:8px; }
  .process-step p{ font-size:13.5px; color:#B9D4DB; margin:0; }
  .process-line{ position:absolute; top:8px; left:0; right:0; height:1px; background:rgba(255,255,255,0.15); z-index:0; }

  /* ---------- coverage ---------- */
  .coverage-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
  .zone-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin-top:6px; }
  .zone-list div{ font-size:14.5px; padding:9px 0; border-bottom:1px solid var(--line); color:var(--ink-soft); }
  .zone-list div b{ color:var(--teal-deep); }

  /* ---------- testimonials ---------- */
  .testimonials{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .test-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .test-card{ background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:22px; }
  .test-card p{ font-size:14.5px; color:var(--ink-soft); margin:0 0 16px; }
  .test-name{ font-weight:700; font-size:14px; color:var(--teal-deep); }
  .test-meta{ font-size:12.5px; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace; }

  /* ---------- faq ---------- */
  .faq-list{ max-width:760px; }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-q{
    width:100%; text-align:left; background:none; border:none; cursor:pointer;
    padding:18px 0; display:flex; justify-content:space-between; align-items:center;
    font-family:'Archivo',sans-serif; font-weight:700; font-size:15.5px; color:var(--teal-deep);
  }
  .faq-q .plus{ font-size:20px; color:var(--teal); flex-shrink:0; margin-left:20px; transition:transform .18s ease; }
  .faq-item[data-open="true"] .plus{ transform:rotate(45deg); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .22s ease; }
  .faq-item[data-open="true"] .faq-a{ max-height:200px; }
  .faq-a p{ padding-bottom:18px; margin:0; font-size:14.5px; color:var(--ink-soft); }

  /* ---------- final cta ---------- */
  .cta-final{
    background:var(--teal);
    color:#fff;
    border-radius:10px;
    padding:44px 40px;
    display:flex; justify-content:space-between; align-items:center; gap:24px;
  }
  .cta-final h2{ color:#fff; font-size:25px; margin-bottom:8px; }
  .cta-final p{ color:#D6ECF1; margin:0; font-size:15px; }
  .cta-final .btn-primary{ background:#fff; color:var(--teal-deep); }
  .cta-final .btn-primary:hover{ background:#EAF6F8; }

  /* ---------- footer ---------- */
  footer{ background:var(--teal-deep); color:#B9D4DB; padding:44px 0 26px; }
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; margin-bottom:30px; }
  footer h4{ color:#fff; font-size:14px; margin-bottom:12px; }
  footer p{ font-size:13.5px; margin:0 0 8px; }
  footer a{ text-decoration:none; }
  footer a:hover{ color:#fff; }
  .footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); padding-top:20px; font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

  /* ---------- floating whatsapp ---------- */
  .float-wa{
    position:fixed; bottom:22px; right:22px; z-index:60;
    background:#1EAD5B; width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px -8px rgba(0,0,0,0.4);
    text-decoration:none;
  }
  .float-wa svg{ width:28px; height:28px; }

  /* ---------- responsive ---------- */
  @media (max-width: 880px){
    .nav-links{ display:none; }
    .menu-toggle{ display:inline-flex; }
    .hero-grid{ grid-template-columns:1fr; gap:36px; }
    .hero h1{ font-size:32px; }
    .hero-slider{ min-height:auto; }
    .services-grid{ grid-template-columns:1fr 1fr; }
    .trust-grid{ grid-template-columns:1fr 1fr; }
    .process-grid{ grid-template-columns:1fr 1fr; gap:28px 20px; }
    .process-line{ display:none; }
    .coverage-grid{ grid-template-columns:1fr; }
    .test-grid{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr; gap:22px; }
    .cta-final{ flex-direction:column; text-align:center; }
  }
  @media (max-width: 560px){
    .services-grid{ grid-template-columns:1fr; }
    .trust-grid{ grid-template-columns:1fr; }
    .process-grid{ grid-template-columns:1fr; }
    .hero-stats{ flex-wrap:wrap; row-gap:16px; }
    .zone-list{ grid-template-columns:1fr; }
  }


  /* ---------- map section (nuevo) ---------- */
  .map-section{
    background:var(--surface);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .map-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
  }
  .map-info h2{
    font-size:26px;
    font-weight:800;
    margin-bottom:14px;
  }
  .map-info p{
    color:var(--ink-soft);
    font-size:15.5px;
    margin-bottom:20px;
  }
  .map-info .btn{
    margin-top:8px;
  }
  .map-container{
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 16px 32px -12px rgba(15,42,51,0.18);
  }
  .map-container iframe{
    display:block;
    width:100%;
    height:350px;
    border:0;
  }