:root{
  /* ControlTotalCR.tech — Modern Neutral (Slate Gray) + Acento Verde */
  --bg: #eef2f7;                 /* fondo gris suave */
  --bg-soft: #f6f8fb;            /* secciones */
  --card: #ffffff;               /* tarjetas */
  --accent: #16a34a;             /* verde */
  --accent-strong: #15803d;      /* hover */
  --accent-soft: rgba(22, 163, 74, 0.12);

  --text-main: #0f172a;          /* slate-900 */
  --text-muted: #475569;         /* slate-600 */
  --border-soft: rgba(15, 23, 42, 0.12);
  --shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

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

html{ -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; }

body{
  min-height:100vh;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text-main);
  background:
    radial-gradient(900px 600px at 12% 10%, rgba(22, 163, 74, 0.07), transparent 60%),
    radial-gradient(800px 520px at 85% 18%, rgba(59, 130, 246, 0.05), transparent 55%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 70%, #e8edf5 100%);
}

a{ color:inherit; text-decoration:none; }

.main-wrapper{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* HEADER / NAV */
header{
  background: rgba(246, 248, 251, 0.82);
  border-bottom: 1px solid var(--border-soft);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 9999;
}

.nav{
  max-width:1120px;
  margin:0 auto;
  padding:0.9rem 1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.nav-left{
  display:flex;
  align-items:center;
  gap:0.85rem;
  min-width:240px;
}

.nav-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  height:44px;
}

.nav-logo img{
  height:44px;
  width:auto;
  border-radius:12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

.nav-brand{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.nav-brand-main{
  font-weight:900;
  font-size:1.05rem;
  letter-spacing:0.2px;
}

.nav-brand-sub{
  font-size:0.78rem;
  color:var(--text-muted);
}

.nav-links{
  display:flex;
  gap:1.2rem;
  align-items:center;
  font-size:0.95rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav-links a{
  color: rgba(15, 23, 42, 0.78);
  position:relative;
  padding:0.25rem 0.1rem;
  transition: color .12s ease;
}

.nav-links a:hover{ color: var(--text-main); }

.nav-links a.active{ color: var(--accent); }

.nav-links a.active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-0.25rem;
  width:100%;
  height:2px;
  background: var(--accent);
  border-radius:999px;
}

/* LAYOUT */
main{ flex:1; }

.section{
  max-width:1120px;
  margin:0 auto;
  padding:2.6rem 1.25rem 3.6rem;
}

.hero{
  display:grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.5fr);
  gap:2.5rem;
  align-items:center;
}

.hero-text h1{
  font-size:2.35rem;
  line-height:1.12;
  margin-bottom:0.85rem;
  letter-spacing:-0.3px;
}

.hero-text p{
  color: var(--text-muted);
  font-size:1.02rem;
  line-height:1.75;
  margin-bottom:1.1rem;
}

.badge{
  display:inline-block;
  margin-bottom:0.85rem;
  padding:0.28rem 0.85rem;
  border-radius:999px;
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(22, 163, 74, 0.22);
}

.hero-highlight{
  display:inline-block;
  margin-top:0.25rem;
  font-size:0.95rem;
  color: rgba(15,23,42,.88);
}

.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:0.8rem;
  margin-top:1.55rem;
}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.62rem 1.35rem;
  border-radius:999px;
  font-size:0.95rem;
  border:1px solid transparent;
  cursor:pointer;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
  color:#ffffff;
  font-weight:800;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  box-shadow: 0 16px 34px rgba(22, 163, 74, 0.18);
}

.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 22px 50px rgba(22, 163, 74, 0.24);
}

.btn-outline{
  background: transparent;
  color: var(--text-main);
  border-color: rgba(15,23,42,.18);
  box-shadow: none;
  font-weight: 700;
}

.btn-outline:hover{
  border-color: rgba(22, 163, 74, 0.55);
}

/* CARDS / GRIDS */
.card{
  background: var(--card);
  border-radius:18px;
  padding:1.75rem 1.6rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-soft);
}

.cards-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap:1.35rem;
  margin-top:1.75rem;
}

.card h3{
  font-size:1.06rem;
  margin-bottom:0.45rem;
}

.card p{
  color: var(--text-muted);
  font-size:0.94rem;
  line-height:1.65;
}

/* CHIPS */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin-top:0.95rem;
}

.chip{
  font-size:0.82rem;
  padding:0.28rem 0.78rem;
  border-radius:999px;
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.18);
  color: rgba(15,23,42,.88);
}

/* TITLES */
.section-title{
  font-size:1.7rem;
  margin-bottom:0.45rem;
  letter-spacing:-0.2px;
}

.section-subtitle{
  color: var(--text-muted);
  font-size:0.95rem;
  margin-bottom:1.25rem;
  line-height:1.6;
}

/* ABOUT */
.about-layout{
  display:grid;
  grid-template-columns: minmax(0, 3.2fr) minmax(0, 2.3fr);
  gap:2rem;
}

.about-layout p{
  color: var(--text-muted);
  font-size:0.98rem;
  line-height:1.75;
  margin-bottom:0.95rem;
}

.list{
  list-style:none;
  margin-top:0.75rem;
}

.list li{
  font-size:0.95rem;
  color: var(--text-main);
  margin-bottom:0.45rem;
}

.list li span{ color: var(--text-muted); }

/* CONTACTO */
.contact-layout{
  display:grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.1fr);
  gap:2rem;
  align-items:flex-start;
}

.form-card{
  background: var(--card);
}

form{
  display:flex;
  flex-direction:column;
  gap:0.85rem;
}

label{
  font-size:0.88rem;
  margin-bottom:0.1rem;
  color: rgba(15,23,42,.92);
}

input[type="text"],
input[type="email"],
textarea{
  width:100%;
  padding:0.62rem 0.7rem;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.16);
  background: #ffffff;
  color: var(--text-main);
  font-size:0.95rem;
}

textarea{ min-height:130px; resize: vertical; }

input:focus,
textarea:focus{
  outline:none;
  border-color: rgba(22, 163, 74, 0.55);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14);
}

.form-row{
  display:flex;
  gap:0.85rem;
  flex-wrap:wrap;
}

.captcha-box{
  display:flex;
  align-items:center;
  gap:0.7rem;
  margin-top:0.25rem;
}

.captcha-question{
  padding:0.42rem 0.85rem;
  border-radius:999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size:0.9rem;
  border: 1px solid rgba(22, 163, 74, 0.22);
}

.alert{
  border-radius:12px;
  padding:0.8rem 0.85rem;
  font-size:0.9rem;
  margin-bottom:0.85rem;
}

.alert-error{
  background: rgba(220,38,38,0.08);
  border: 1px solid rgba(220,38,38,0.18);
  color: #991b1b;
}

.alert-success{
  background: rgba(22,163,74,0.10);
  border: 1px solid rgba(22,163,74,0.18);
  color: #166534;
}

/* FOOTER */
footer{
  border-top: 1px solid var(--border-soft);
  background: rgba(246, 248, 251, 0.82);
  backdrop-filter: blur(12px);
}

.footer-inner{
  max-width:1120px;
  margin:0 auto;
  padding:1.05rem 1.25rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  justify-content:space-between;
  align-items:center;
  font-size:0.85rem;
  color: var(--text-muted);
}

.footer-inner a{ color: var(--accent); }

/* RESPONSIVE */
@media (max-width: 900px){
  .hero,
  .about-layout,
  .contact-layout{
    grid-template-columns: minmax(0, 1fr);
  }
  .hero{ text-align:center; }
  .hero-cta{ justify-content:center; }
  .cards-grid{ margin-top: 1.1rem; }
}

@media (max-width: 640px){
  .nav{
    flex-direction:column;
    align-items:flex-start;
  }
  .nav-left{ min-width:auto; }
  .nav-links{
    width:100%;
    justify-content:flex-start;
    gap:0.9rem;
  }
  .section{
    padding-top:2.1rem;
    padding-bottom:2.8rem;
  }
  .hero-text h1{ font-size:2.0rem; }
}