/* Paleta muestreada pixel a pixel de img/logo-groupland.png, no elegida a ojo:
   teal #117682 y carbon #464445 son los colores exactos del logo del cliente. */
:root{
  --teal:#117682;
  --teal-dk:#0d5a63;
  --teal-deep:#0a3b42;
  --ink:#464445;
  --ink-2:#6b6869;
  --line:#e3e9e9;
  --bg:#ffffff;
  --bg-alt:#f4f8f8;
  --wrap:1120px;
  --r:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--teal-dk)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}

.skip{position:absolute;left:-9999px;top:0;background:var(--teal);color:#fff;padding:12px 18px;z-index:100}
.skip:focus{left:8px;top:8px}

/* El destino del skip link recibe foco por tabindex="-1", asi que hay que
   silenciarle el outline: el usuario salto ahi a proposito, no lo tabulo. */
#main:focus{outline:none}

:where(a,input):focus-visible{
  outline:3px solid var(--teal);
  outline-offset:3px;
  border-radius:6px;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;min-height:72px}
.nav__brand img{width:auto;height:44px}
.nav__links{display:flex;align-items:center;gap:26px}
.nav__links a:not(.btn){
  color:var(--ink);text-decoration:none;font-weight:600;font-size:.94rem;
  padding:6px 0;border-bottom:2px solid transparent;
}
.nav__links a:not(.btn):hover{color:var(--teal);border-bottom-color:var(--teal)}

/* El toggle solo existe en mobile. Fuera de la media query va display:none y no
   solo invisible: si quedara con opacity:0 seguiria siendo una parada de
   tabulacion en desktop, sin nada visible que la acompane -- su indicador de
   foco cuelga de .nav__burger, que ahi esta oculto. */
.nav__cb{display:none}
.nav__burger{display:none;cursor:pointer;padding:10px;gap:5px;flex-direction:column;border-radius:8px}
.nav__bar{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--teal);color:#fff;text-decoration:none;
  font-weight:700;font-size:.95rem;
  padding:13px 24px;border-radius:999px;
  border:2px solid var(--teal);
  transition:background .18s ease,transform .18s ease;
}
.btn:hover{background:var(--teal-dk);border-color:var(--teal-dk);transform:translateY(-2px)}
.btn svg{width:19px;height:19px;fill:currentColor}
.btn--sm{padding:9px 18px;font-size:.88rem}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}

.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--teal-deep) 0%,var(--teal-dk) 55%,var(--teal) 100%);
  color:#fff;
}
/* Los dos motivos graficos del brand board del cliente. */
.hero__deco{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 14px,transparent 14px 42px),
    radial-gradient(rgba(255,255,255,.16) 1.5px,transparent 1.5px);
  background-size:auto,26px 26px;
  -webkit-mask-image:linear-gradient(200deg,#000 0%,transparent 62%);
  mask-image:linear-gradient(200deg,#000 0%,transparent 62%);
}
/* Mas angosto que .wrap a proposito: el hero es texto centrado y a 1120px las
   lineas quedan demasiado largas para leerlas de un saque. */
.hero__in{position:relative;width:100%;max-width:860px;margin-inline:auto;padding:88px 20px 96px;text-align:center}
.hero h1{
  margin:.25em 0 .5em;
  font-size:clamp(2.1rem,6.2vw,3.7rem);
  line-height:1.1;font-weight:800;letter-spacing:-.02em;
}
.hero__lead{font-size:clamp(1rem,2.1vw,1.16rem);color:rgba(255,255,255,.9);margin:0 auto 34px;max-width:62ch}
.hero__lead strong{color:#fff}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

.eyebrow{
  margin:0;text-transform:uppercase;letter-spacing:.22em;
  font-size:.74rem;font-weight:700;
  /* .88 y no .75: a este cuerpo hace falta para pasar AA contra el extremo
     claro del gradiente, no solo contra la zona oscura donde cae hoy. */
  color:rgba(255,255,255,.88);
}
.eyebrow--dark{color:var(--teal)}

.sect{padding:82px 0;scroll-margin-top:80px}
.sect--alt{background:var(--bg-alt);border-block:1px solid var(--line)}
.sect h2{
  margin:.35em 0 1.1em;
  font-size:clamp(1.55rem,3.6vw,2.3rem);
  line-height:1.2;font-weight:700;letter-spacing:-.015em;color:#2f2e2f;
}
.lead{font-size:1.06rem;color:var(--ink-2);margin:0}

.cards{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:32px 26px;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.card:hover{border-color:var(--teal);box-shadow:0 12px 30px rgba(17,118,130,.12);transform:translateY(-3px)}
.card__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:13px;
  background:rgba(17,118,130,.1);color:var(--teal);margin-bottom:18px;
}
.card__ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin:0 0 8px;font-size:1.22rem;font-weight:700;color:#2f2e2f}
.card p{margin:0;color:var(--ink-2);font-size:.97rem}

.nosotros{display:grid;gap:40px;grid-template-columns:1.35fr 1fr;align-items:center}
.valores{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.valores li{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);
  border-radius:10px;padding:16px 18px;font-weight:600;color:#2f2e2f;font-size:.98rem;
}

.contacto{margin:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.contacto__item{
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;display:flex;flex-direction:column;gap:4px;
}
.contacto__item--wide{grid-column:1/-1}
.contacto dt{
  text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;
  font-weight:700;color:var(--teal);
}
.contacto dd{margin:0}
.contacto dd,.contacto address{
  color:#2f2e2f;font-weight:600;font-size:1.02rem;font-style:normal;word-break:break-word;
}
.contacto a{color:inherit;text-decoration:none}
.contacto a:hover{color:var(--teal);text-decoration:underline}

.foot{background:var(--ink);color:rgba(255,255,255,.8);padding:34px 0}
.foot__in{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;font-size:.9rem}
.foot p{margin:0}
.foot strong{color:#fff}

.wsp{
  position:fixed;left:20px;bottom:20px;z-index:60;
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25d366;color:#fff;
  /* El borde no es decorativo: el blanco sobre el verde de WhatsApp da ~2:1 y
     WCAG pide 3:1 para un control. El verde es de marca y no se toca, asi que
     el contraste lo aporta el contorno. */
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 6px 20px rgba(0,0,0,.3);
  transition:transform .18s ease;
}
.wsp:hover{transform:scale(1.08)}
.wsp svg{width:28px;height:28px;fill:currentColor}

@media (max-width:820px){
  .nosotros{grid-template-columns:1fr}
}
@media (max-width:720px){
  .nav__cb{display:block;position:absolute;opacity:0;width:1px;height:1px}
  .nav__cb:focus-visible + .nav__burger{outline:3px solid var(--teal);outline-offset:2px}
  .nav__burger{display:flex}
  .nav__links{
    display:none;width:100%;flex-direction:column;align-items:flex-start;
    gap:4px;padding:8px 0 18px;
  }
  .nav__cb:checked ~ .nav__links{display:flex}
  .nav__links a:not(.btn){width:100%;padding:10px 0;border-bottom:1px solid var(--line)}
  .nav__links .btn{margin-top:10px}
  .hero__in{padding:64px 20px 72px}
  .sect{padding:62px 0}
  .hero__cta .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}