:root{
  --bg:#F5FAFA;           /* Fondo general claro */
  --surface:#FFFFFF;      /* Tarjetas / formularios */
  --primary:#5BA8A8;      /* Teal del logo */
  --primary-700:#3B7E7E;  /* Teal profundo */
  --text:#24333C;         /* Texto principal */
  --muted:#6D7A80;        /* Texto secundario */
  --white:#FFFFFF;

  --radius:1.25rem;
  --container: clamp(320px, 92vw, 1200px);
  --fs-h1: clamp(1.75rem, 2.5vw + 1rem, 3rem);
  --fs-h3: clamp(1.05rem, 0.6vw + 0.9rem, 1.3rem);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: linear-gradient(180deg, #F9FCFC, var(--bg));
}

.container{width:var(--container); margin-inline:auto; padding: clamp(0.75rem, 1.2vw, 1.25rem)}
.muted{color:var(--muted)}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.2) blur(6px);
  background:#ffffffcc;
  border-bottom:1px solid #00000010;
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.brand{display:flex; align-items:center; text-decoration:none}
/* Título de marca al lado del logo (2 líneas) */
.brand{display:flex; align-items:center; gap:.75rem} /* si ya existe, asegúrate del gap */
.brand-stack{
  display:flex; flex-direction:column; line-height:1.05;
}
.brand-line1{
  font-weight:800;
  font-size: clamp(1.05rem, 0.9vw + 0.8rem, 1.6rem);
  letter-spacing:.2px;
  color: var(--text);
}
.brand-line2{
  font-weight:700;
  font-size: clamp(.80rem, 0.5vw + .55rem, 1rem);
  letter-spacing:.14em;          /* sensación técnica/precisa */
  color: var(--text);     /* acento teal */
  margin-top: .12rem;
}
.brand-line3{
  font-weight:600;
  font-size: clamp(.80rem, 0.5vw + .55rem, 1rem);
  letter-spacing:.2px;          /* sensación técnica/precisa */
  color: var(--text);     /* acento teal */
  margin-top: .12rem;
}


/* Ajustes responsivos: en pantallas muy pequeñas compacta el título */
@media (max-width: 420px){
  .brand-line1{font-size:1.05rem}
  .brand-line2{font-size:.80rem; letter-spacing:.10em}
}

.logo{height:48px; width:auto}
.logo.lg{height:72px}
@media (max-width: 960px){ .logo.lg{height:56px} }

/* Sombra suave para logos blancos (sin fondo de color) */
.soft-shadow{
  /* Sombra más marcada para logos blancos sobre fondo claro */
  filter:
    drop-shadow(0 2px 1px rgba(0,0,0,.40))
    drop-shadow(0 18px 36px rgba(0,0,0,.38));
}

.menu{display:flex; gap:.6rem}
.btn{
  appearance:none; border:1px solid #0000001a; background:transparent;
  color:var(--text);
  padding:.7rem 1rem; border-radius:999px; cursor:pointer; font-weight:600;
  transition:.2s ease; text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
}
.btn:hover{transform:translateY(-1px); border-color:#00000030}
.btn.primary{background:linear-gradient(180deg, var(--primary), var(--primary-700)); border:none; color:var(--white)}
.btn.ghost{background:#00000008}

/* ---------- Hero ---------- */
.hero{
  display:grid; grid-template-columns: 1.2fr .8fr; align-items:center;
  min-height: clamp(520px, 62vh, 740px); gap:2rem
}
.hero-text h1{font-size:var(--fs-h1); line-height:1.1; margin:.25rem 0 1rem}
.hero-text p{max-width:60ch; color:var(--muted)}
.cta{display:flex; gap:.75rem; margin-top:1rem}

/* Solo imagen del logo (sin “mundo”) */
.hero-media{display:grid; place-items:center; min-height:280px}
.hero-logo{width:min(85%, 520px); height:auto}

/* ---------- Sección servicios ---------- */
.grid-3{display:grid; gap:1rem; grid-template-columns: repeat(3, minmax(0,1fr)); margin-block:2rem}
.card{
  background: var(--surface);
  border:1px solid #00000010;
  padding:1.1rem; border-radius:var(--radius);
  box-shadow: 0 10px 20px #00000010
}
.card h3{font-size:var(--fs-h3); margin:.2rem 0 .5rem}

/* ---------- Footer ---------- */
.site-footer{background: var(--bg); border-top:1px solid #00000010}
.footer-grid{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}

/* ---------- Modal + Form ---------- */
.modal{border:none; border-radius:var(--radius); padding:0; background:transparent}
.modal::backdrop{background:#00000070; backdrop-filter: blur(2px)}
.form{
  background:var(--surface); border:1px solid #00000010;
  padding:1.2rem; width:min(92vw, 420px); border-radius:var(--radius)
}
.form h2{margin:0 0 .75rem}
label{display:grid; gap:.4rem; margin:.5rem 0}
input{
  padding:.8rem 1rem; border-radius: .8rem; border:1px solid #0000001a;
  background:#FFFFFF; color:var(--text);
}
.form-actions{display:flex; gap:.6rem; margin-top:.6rem}
.form-links{display:flex; justify-content:space-between; margin-top:.6rem; font-size:.95rem}
.form-links a{color:var(--text); opacity:.8}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .hero{grid-template-columns:1fr}
}
/* CTA de marca en el header */
.cta-contacode{
  letter-spacing:.03em;
  padding:.7rem 1.1rem;
  font-weight:700;
}
@media (max-width:480px){
  .cta-contacode{ font-size:.95rem; padding:.6rem .9rem; }
}