:root{
  --bg:#f7f8fb;
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border:rgba(15,23,42,.12);
  --shadow:0 12px 32px rgba(2,6,23,.08);
  --radius:16px;

  --primary:#2563eb;
  --accent:#10b981;

  --container:1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  overflow-x:hidden;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(1000px 500px at 80% 0%, rgba(16,185,129,.10), transparent 55%),
    var(--bg);
}

a{color:inherit;text-decoration:none}
.container{width:min(var(--container),92vw);margin:0 auto}

.brand-logo{
  width:38px;
  height:38px;
  border-radius:14px;
  object-fit:cover;
  box-shadow:0 14px 22px rgba(37,99,235,.18);
}

.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;
}

.skip-link{
  position:absolute;left:-999px;top:8px;
  background:var(--surface);color:var(--text);
  padding:10px 12px;border-radius:12px;border:1px solid var(--border);
}
.skip-link:focus{left:12px;z-index:999}

/* Header */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:999;
  backdrop-filter:saturate(1.2) blur(10px);
  background:rgba(247,248,251,.78);
  border-bottom:1px solid var(--border);
}

.site-header.is-scrolled{
  box-shadow:0 10px 24px rgba(2,6,23,.08);
}

.header-inner{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:16px;
  align-items:center;
  padding:14px 0;
}

.brand{display:flex;align-items:center;gap:12px;min-width:240px}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-weight:900;letter-spacing:-0.2px}
.brand-tagline{font-size:12px;color:var(--muted);margin-top:2px}

.nav{display:flex;gap:18px;align-items:center}
.nav a{font-size:14px;color:var(--muted)}
.nav a:hover{color:var(--text)}

.header-cta{display:flex;gap:10px;justify-content:flex-end}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:12px;
  font-weight:800;font-size:14px;
  border:1px solid transparent;
  cursor:pointer;
  min-height:44px;
}
.btn--primary{
  background:var(--primary);color:#fff;
  border-color:rgba(37,99,235,.35);
  box-shadow:0 16px 28px rgba(37,99,235,.18);
}
.btn--accent{
  background:rgba(16,185,129,.12);
  color:#065f46;
  border-color:rgba(16,185,129,.26);
}
.btn--ghost{
  background:transparent;
  border-color:var(--border);
  color:var(--text);
}
.btn:hover{filter:brightness(0.98)}
.btn:active{transform:translateY(1px)}

/* Mobile nav toggle */
.nav-toggle{
  display:none;
  width:44px;height:44px;border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  cursor:pointer;
}
.nav-toggle span{
  display:block;height:2px;margin:6px 10px;
  background:var(--text);opacity:.8;border-radius:999px;
}

/* Hero */
.hero{padding:44px 0 22px}
.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:16px;align-items:stretch}
.hero-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
}
.hero-card h1{
  margin:0 0 10px;
  font-size:clamp(28px, 4vw, 40px);
  line-height:1.05;
  letter-spacing:-0.6px;
}
.lead{
  margin:0 0 18px;
  color:var(--muted);
  font-size:16px;line-height:1.55;
}

.search{
  display:flex;gap:10px;align-items:center;
  border:1px solid var(--border);
  background:rgba(2,6,23,.03);
  border-radius:14px;padding:10px;
}
.search input{
  flex:1;border:0;outline:0;background:transparent;
  padding:10px 8px;font-size:15px;color:var(--text);
  min-height:44px;
}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--muted);
  border-radius:999px;
  padding:8px 10px;
  font-size:13px;
  cursor:pointer;
  min-height:40px;
}
.chip:hover{color:var(--text)}

.disclaimer{margin:14px 0 0;color:var(--muted);font-size:13px}

.hero-aside{display:grid;gap:12px}
.panel{
  background:rgba(255,255,255,.78);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}
.panel--soft{background:rgba(255,255,255,.65)}
.panel-title{margin:0 0 10px;font-size:16px}
.panel-list{margin:0;padding-left:18px;color:var(--muted);font-size:14px;line-height:1.6}
.panel-text{margin:0 0 12px;color:var(--muted);font-size:14px}

/* Sections */
.section{padding:22px 0}
.section--alt{
  background:rgba(15,23,42,.03);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)
}
.section-head{margin-bottom:14px}
.section-head h2{margin:0;font-size:22px}
.section-head p{margin:6px 0 0;color:var(--muted)}

/* Cards */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 10px 22px rgba(2,6,23,.05);
  transition:transform .12s ease, box-shadow .12s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 16px 28px rgba(2,6,23,.08)}
.card-icon{
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.18);
  margin-bottom:10px;
  font-size:18px;
}
.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}

/* Steps */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.step{
  background:rgba(255,255,255,.78);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}
.step-num{
  width:28px;height:28px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.25);
  color:#065f46;
  font-weight:900;
  margin-bottom:10px;
}

/* FAQ */
.faq details{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 16px;
}
.faq details + details{margin-top:10px}
.faq summary{cursor:pointer;font-weight:900}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:10px 0 0;color:var(--muted);line-height:1.6}

/* Contact */
.contact{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
}
.contact-form{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 10px 22px rgba(2,6,23,.05);
}
.contact-form label{display:block;font-weight:800;font-size:13px;margin:10px 0}
.contact-form input, .contact-form textarea{
  width:100%;
  margin-top:8px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font:inherit;
  background:#fff;
}
.small{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.5}

.contact-box{
  background:rgba(255,255,255,.78);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}

/* Footer */
.footer{
  padding:28px 0 40px;
  color:var(--muted);
  font-size:13px;
}
.footer-inner{
  display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap
}
.footer-links{display:flex;gap:14px}
.footer-links a{color:var(--primary)}
.footer-links a:hover{text-decoration:underline}

/* Responsive (tablet) */
@media (max-width: 900px){
  .header-inner{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "brand toggle"
      "nav nav"
      "cta cta";
  }
  .brand{grid-area:brand;min-width:0}
  .header-cta{grid-area:cta;justify-content:flex-start}
  .nav{grid-area:nav;display:none;flex-direction:column;align-items:flex-start;padding:10px 0}
  .nav.is-open{display:flex}
  .nav-toggle{display:inline-block;grid-area:toggle}

  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
}

/* Responsive (mobile) */
@media (max-width: 600px){
  /* Layout base */
  .search{flex-direction:column;align-items:stretch}

  /* Mobile polish */
  .site-header{ background: rgba(247,248,251,.92); }
  .header-inner{ gap:10px; padding:12px 0; }

  .brand-logo{ width:34px; height:34px; border-radius:12px; }
  .brand-name{ font-size:15px; }
  .brand-tagline{ font-size:11px; }

  .header-cta{ gap:10px; width:100%; }
  .header-cta .btn{ width:100%; }

  .hero{ padding:22px 0 14px; }
  .hero-card{ padding:18px; }
  .lead{ font-size:15px; }

  .search .btn{ width:100%; }

  /* Chips carrusel */
  .chips{
    flex-wrap:nowrap;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom:6px;
    scrollbar-width:none;
  }
  .chips::-webkit-scrollbar{ display:none; }
  .chip{ white-space:nowrap; }

  /* Servicios: 2 columnas, icono más grande y texto visible pero compacto */
  .cards{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
  .card{
    padding:14px;
    border-radius:16px;
  }
  .card-icon{
    width:52px;
    height:52px;
    border-radius:18px;
    font-size:22px;
    margin-bottom:10px;
  }
  .card h3{
    margin:0 0 6px;
    font-size:14px;
    line-height:1.15;
  }
  .card p{
    margin:0;
    font-size:12.5px;
    line-height:1.25;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* Guía rápida: 3 pasos en una fila (compacto) */
  .steps{
    grid-template-columns:repeat(3,1fr);
    gap:10px;
  }
  .step{
    padding:12px;
    border-radius:14px;
  }
  .step-num{
    width:22px;
    height:22px;
    border-radius:8px;
    margin-bottom:8px;
    font-size:12px;
  }
  .step h3{
    margin:0 0 6px;
    font-size:13px;
    line-height:1.15;
  }
  .step p{
    margin:0;
    font-size:12px;
    line-height:1.25;
  }

  /* Flecha/Hint para indicar scroll horizontal (si usas steps-wrap) */
  .steps-wrap{
    position:relative;
  }
  .steps-wrap::after{
    content:"›";
    position:absolute;
    top:50%;
    right:8px;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border-radius:999px;
    display:grid;
    place-items:center;
    font-size:22px;
    font-weight:900;
    color:rgba(15,23,42,.75);
    background:rgba(255,255,255,.85);
    border:1px solid rgba(15,23,42,.12);
    box-shadow:0 10px 18px rgba(2,6,23,.10);
    pointer-events:none;
  }
  .steps-wrap::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:56px;
    height:100%;
    background:linear-gradient(90deg, rgba(247,248,251,0), rgba(247,248,251,1));
    pointer-events:none;
  }
  .steps-wrap.is-scrolled::before,
  .steps-wrap.is-scrolled::after{
    display:none;
  }

  /* Secciones */
  .section{ padding:18px 0; }
  .section-head p{ font-size:14px; }

  .faq details{ border-radius:16px; }
  .contact-form, .contact-box{ border-radius:18px; }

  .footer-inner{ gap:8px; }
}


@media (max-width: 360px){
  .cards{ grid-template-columns:1fr; }
    .steps{ grid-template-columns:1fr; }

}


/* =========================================================
   FIX: contenido que se sale del ancho en móvil (overflow)
   Pegar AL FINAL del styles.css (debajo de todo)
   ========================================================= */

html, body { max-width: 100%; overflow-x: hidden; }

/* Cualquier media (logo/imagenes) nunca debe romper el ancho */
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

/* Tu container ya está bien, pero reforzamos */
.container { width: min(var(--container), 92vw); margin: 0 auto; }

/* IMPORTANTÍSIMO en grids/flex: permite que los hijos no empujen el layout */
.header-inner,
.hero-grid,
.cards,
.steps,
.contact {
  min-width: 0;
}

.brand,
.hero-card,
.hero-aside,
.panel,
.card,
.step,
.contact-form,
.contact-box {
  min-width: 0;
}

/* Textos/URLs largos: que rompan línea y no creen scroll horizontal */
.panel-list,
.card p,
.lead,
.faq p,
.contact-box,
.contact-form {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Ajustes extra móviles */
@media (max-width: 600px){
  /* Fuerza 1 columna real en secciones clave */
  .hero-grid { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }

  /* Evita que paddings raros empujen */
  .hero-card, .panel, .contact-form, .contact-box { padding: 16px; }

  /* Asegura que el buscador no empuja */
  .search { width: 100%; }
  .search input { width: 100%; }

  /* Links largos no rompen */
  a { overflow-wrap: anywhere; }
}

@media (max-width: 600px){
  .hero-aside{ display:none; }
}

/* Evita que al hacer click en #secciones queden tapadas por el header fijo */
main{ scroll-margin-top: 90px; }
section{ scroll-margin-top: 90px; }
body{ padding-top: 42px; }

/* Móvil: un poco más de margen arriba */
@media (max-width: 600px){
  body{ padding-top: 120px; }
}