:root{
  --c-primary:#477aa9;
  --c-secondary:#3b5266;
  --c-accent:#d9e1e9;
  --c-gray-1:#9fb2c2;
  --c-gray-2:#98a4b4;
  --c-bg:#ffffff;
  --c-text:#1c2833;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:var(--c-text);
  background:var(--c-bg);
  line-height:1.6;
}

h2{text-align: center;}

img{max-width:100%;height:auto;display:block}
.nowrap{white-space:nowrap}

.container{width:min(1120px, 92%);margin-inline:auto}

/* Header */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.brand-logo{height:36px;width:auto}
.site-nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.site-nav a{display:block;padding:.5rem .75rem;border-radius:.5rem;text-decoration:none;color:var(--c-secondary);font-weight:600}
.site-nav a:hover{background:var(--c-accent)}
.nav-toggle{display:none;background:none;border:0;font-size:1.5rem;line-height:1}

/* Hero */
.hero{background:var(--c-gray-2);padding:2.5rem 0; color: #fff;}
.hero-grid{display:grid;gap:2rem;grid-template-columns:1fr}
.hero h1{font-size:clamp(1.6rem, 2.5vw + 1rem, 3rem);line-height:1.2;margin:.25rem 0 .5rem}
.lead{font-weight:600;}
.bullets{margin:1rem 0 1.25rem;padding:0 0 0 1rem}
.badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.badge{background:#fff;border:1px solid var(--c-gray-1);color:var(--c-secondary);border-radius:999px;padding:.35rem .75rem;font-size:.9rem}

.cta-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.5rem}
.btn{display:inline-block;padding:.75rem 1rem;border-radius:.75rem;text-decoration:none;font-weight:700}
.btn-primary{background:var(--c-primary);color:#fff}
.btn-primary:hover{filter:brightness(.95)}
.btn-ghost{background:transparent;border:2px solid var(--c-primary);color:var(--c-primary)}
.btn-ghost:hover{background:var(--c-primary);color:#fff}

.hero-media{align-self:center;}

/* Why */
.why{padding:3rem 0}
.why h2{margin-top:0;color:var(--c-secondary)}
.cards{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}
.card{background:#fff;border:1px solid var(--c-accent);border-radius:1rem;padding:1.25rem}
.card .icon{width:28px;height:28px;margin-bottom:.5rem}

/* Robustez */
.robustez{padding:3rem 0;background:#98a4b4; color:#fff}
.two-col{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.checklist{columns:2;column-gap:2rem;margin:0;padding-left:1rem}
.feature-media{justify-self:center}

/* seguridad */
.seguridad{padding:3rem 0;background:#98a4b4; color:#fff}
.two-col{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}

/* checks */
.checks{padding:rem 0}
.check{display:grid;grid-template-columns:fr;gap:1rem;margin-top:1rem}
.check{background:#fff;border:1px solid var(--c-accent);border-radius:1rem;padding:.25rem}
.check .icon{width:28px;height:28px;margin-bottom:.5rem}

/* Features */
.features{padding:3rem 0;background:var(--c-bg)}
.two-col{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.features .checklist{columns:1;column-gap:2rem;margin:0;padding-left:1rem}
.feature-media{justify-self:center}

/* Dispositivos */
.dispositivos{padding:3rem 0}
.brand-block{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.brand-img{max-height:120px;object-fit:contain;justify-self:center}

/* About */
.about{padding:3rem 0;background:linear-gradient(180deg, #fff, var(--c-accent))}
.about img{border-radius:1rem}

/* Recursos */
.resources{padding:2rem 0; color: var(--c-gray-1)}
.resources-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.resource{display:flex;align-items:center;gap:.5rem;padding:1rem;border:1px solid var(--c-accent);border-radius:.75rem;text-decoration:none;color:var(--c-secondary);font-weight:700}
.resource .icon{width:22px;height:22px}

/* FAQ and Terms */
.faq,.terms{padding:3rem 0}
.accordion details{border:1px solid var(--c-accent);border-radius:.75rem;padding:.75rem 1rem;margin:.5rem 0;background:#fff}
.accordion summary{cursor:pointer;font-weight:700;color:var(--c-secondary)}
.acc-body{padding-top:.5rem;color:#22313f}

/* Contact */
.contact{padding:3rem 0;background:var(--c-accent)}
.contact-lead{margin-top:-.25rem}
.contact-grid{display:grid;grid-template-columns:2fr;gap:1.5rem;margin-top:1rem}
.contact-form fieldset{border:1px solid var(--c-gray-1);border-radius:1rem;padding:1rem;background:#fff}
.contact-form label{display:block;font-weight:700;margin-top:.5rem}
.contact-form input{display:block;width:100%;padding:.65rem .75rem;margin-top:.25rem;border:1px solid var(--c-gray-1);border-radius:.5rem}
.contact-form button{margin-top:1rem}
.contact-aside .icon{width:18px;height:18px;margin-right:.4rem;vertical-align:-3px}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}

/* Footer */
.site-footer{background:var(--c-secondary);color:#fff;padding:1.25rem 0}
.footer-inner{display:flex;flex-direction:column;gap:.5rem;align-items:center;justify-content:space-between; text-align: center;}
.footer-nav{display:flex;flex-wrap:wrap;gap:.75rem; font-size: .8rem;}
.footer-nav a{color:#fff;text-decoration:none;opacity:.9}
.footer-nav a:hover{opacity:1}
.footer-item img{height: 40px;}
.footer-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Responsive - Desktop layout matching PDF */
@media (min-width: 960px){
  .nav-toggle{display:none}
  .site-nav{display:block}
  .hero-grid{grid-template-columns:.7fr 1.3fr;align-items:center;min-height:520px}
  .cards{grid-template-columns:repeat(4,1fr)}
  .two-col{grid-template-columns:1.1fr .9fr}
  .brand-block{grid-template-columns:1.2fr .8fr}
  .resources-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1.1fr .9fr}
  .footer-inner{flex-direction:row}
}

/* Mobile nav */
@media (max-width: 959px){
  .nav-toggle{display:block}
  .site-nav{position:fixed;inset:56px 0 auto 0;background:#fff;border-top:1px solid var(--c-accent);transform:translateY(-120%);transition:.25s;padding:.75rem 4%;}
  .site-nav ul{flex-direction:column;gap:.25rem}
  body.nav-open .site-nav{transform:translateY(0)}
}

.checklist-box {
  background: #e9eef3;
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 600px;
  margin: 1rem auto;
}
.checklist2 {
  list-style: none;
  padding: 0;
  margin: 0;
  columns:1;
}

.checklist2 li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  color: #2b3a4b;
}

.checklist2 li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #6a8dad;
  font-weight: bold;
  font-size: 1.1rem;
}

@media (max-width: 600px) {
  .checklist-box {
    padding: 1rem;
    font-size: 0.95rem;
  }
}


.bullet-list {
  list-style: none !important;
  padding: 1.5rem;
  border-radius: 8px;
  max-width: 320px;
}

.bullet-list ul {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.bullet-list li {
  position: relative;
  color: #fff;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
}

.bullet-list li::before {
  content: "◯";
  position: absolute;
  left: 0;
  color: #fff;
  font-size: 1rem;
}

@media (max-width: 600px) {
  .bullet-list {
    max-width: 100%;
    padding: 1rem;
  }
}

.contact-form-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 2rem;
  max-width: 420px;
  margin: 2rem auto;
  font-family: 'Open Sans', sans-serif;
}

.contact-form-card h2 {
  color: #1c2833;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.contact-form-card .hint {
  font-size: 0.85rem;
  color: #6c7b8a;
  margin-bottom: 1rem;
}

.contact-form-card .hint span {
  color: #c0392b;
}

.contact-form-card label {
  display: block;
  font-size: 0.9rem;
  margin: 0.75rem 0 0.25rem;
  color: #2b3a4b;
}

.contact-form-card label span {
  color: #c0392b;
}

.contact-form-card input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 999px;
  background: #e9eef3;
  font-size: 0.95rem;
  color: #2b3a4b;
}

.contact-form-card input::placeholder {
  color: #98a4b4;
}

.contact-form-card button {
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.75rem;
  background: #3b5266;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.contact-form-card button:hover {
  background: #2f4253;
}

@media (max-width: 480px) {
  .contact-form-card {
    padding: 1.5rem;
  }
}