/* ───────────────────────────────────────────────────────────
   UTILZONE DIGITAL — hoja de estilos
   Teal y azul profundo, con naranja solo para la acción principal.
   ─────────────────────────────────────────────────────────── */

:root{
  --teal:#0f8b84;
  --teal-claro:#14a79e;
  --teal-suave:#e6f4f3;
  --azul:#0b2942;
  --azul-medio:#1b4463;
  --naranja:#e8701a;
  --naranja-claro:#fef1e7;

  --fondo:#ffffff;
  --fondo-alt:#f6f9f9;
  --texto:#16262f;
  --texto-2:#5a6b74;
  --linea:#e2ebeb;

  --display:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cuerpo:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  --ancho:1120px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font:400 16px/1.65 var(--cuerpo);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:600;
  line-height:1.18; letter-spacing:-.02em; text-wrap:balance; color:var(--azul)}
p{margin:0}
a{color:var(--teal)}
ul{margin:0; padding-left:1.15rem}
li{margin-bottom:.4rem}

.contenedor{max-width:var(--ancho); margin:0 auto; padding-inline:20px}

/* ── Encabezado ── */
.sitio-cabecera{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.cabecera-fila{
  display:flex; align-items:center; gap:24px;
  padding-block:16px; flex-wrap:wrap;
}
.logo{
  font-family:var(--display); font-weight:700; font-size:19px;
  color:var(--azul); text-decoration:none; letter-spacing:-.025em;
  display:inline-flex; align-items:center; gap:9px; margin-right:auto;
}
.logo-marca{
  width:30px; height:30px; border-radius:8px; flex:none;
  background:linear-gradient(135deg,var(--teal) 0%,var(--azul) 100%);
  display:grid; place-items:center;
  color:#fff; font-size:15px; font-weight:700;
}
.logo span{color:var(--teal)}

.menu{display:flex; gap:26px; flex-wrap:wrap; align-items:center}
.menu a{
  color:var(--texto-2); text-decoration:none; font-size:15px; font-weight:500;
  padding-block:3px; border-bottom:2px solid transparent; transition:color .15s,border-color .15s;
}
.menu a:hover,.menu a[aria-current="page"]{color:var(--teal); border-bottom-color:var(--teal)}
@media(max-width:720px){
  .cabecera-fila{padding-block:13px}
  .menu{gap:16px; width:100%; margin-top:2px}
  .menu a{font-size:14px}
}

/* ── Botones ── */
.boton{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--naranja); color:#fff; text-decoration:none;
  padding:14px 28px; border-radius:9px;
  font-family:var(--display); font-weight:600; font-size:15.5px;
  box-shadow:0 2px 10px rgba(232,112,26,.26);
  transition:transform .15s, box-shadow .15s, background .15s;
}
.boton:hover{background:#d4620f; transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(232,112,26,.3)}
.boton.secundario{
  background:transparent; color:var(--azul);
  border:1.5px solid var(--linea); box-shadow:none;
}
.boton.secundario:hover{background:var(--teal-suave); border-color:var(--teal); color:var(--teal)}
a:focus-visible,button:focus-visible{outline:3px solid var(--teal); outline-offset:3px}

/* ── Etiquetas ── */
.etiqueta{
  display:inline-block; font-family:var(--display);
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal); background:var(--teal-suave);
  padding:7px 14px; border-radius:999px; margin-bottom:20px;
}

/* ── Portada ── */
.portada{
  background:
    radial-gradient(1000px 420px at 82% -8%, rgba(20,167,158,.14), transparent 62%),
    linear-gradient(180deg,var(--fondo-alt) 0%,var(--fondo) 100%);
  border-bottom:1px solid var(--linea);
}
.portada-in{padding-block:84px 76px; max-width:760px}
.portada h1{font-size:clamp(34px,5.4vw,54px); margin-bottom:22px}
.portada p{font-size:clamp(17px,2.1vw,19.5px); color:var(--texto-2); max-width:620px; margin-bottom:34px}
.portada-acciones{display:flex; gap:13px; flex-wrap:wrap}
@media(max-width:720px){.portada-in{padding-block:52px 48px}}

/* ── Secciones ── */
.seccion{padding-block:76px}
.seccion.alterna{background:var(--fondo-alt); border-block:1px solid var(--linea)}
.seccion-cabeza{max-width:650px; margin-bottom:46px}
.seccion-cabeza h2{font-size:clamp(26px,3.6vw,34px); margin-bottom:14px}
.seccion-cabeza p{color:var(--texto-2); font-size:17px}
@media(max-width:720px){.seccion{padding-block:52px}}

/* ── Servicios ── */
.rejilla{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.tarjeta{
  background:var(--fondo); border:1px solid var(--linea);
  border-radius:14px; padding:30px 26px; min-width:0;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.tarjeta:hover{transform:translateY(-3px); border-color:var(--teal);
  box-shadow:0 10px 30px rgba(11,41,66,.08)}
.tarjeta-icono{
  width:46px; height:46px; border-radius:11px; margin-bottom:20px;
  background:var(--teal-suave); color:var(--teal);
  display:grid; place-items:center;
}
.tarjeta-icono svg{width:23px; height:23px; stroke-width:1.9}
.tarjeta h3{font-size:18.5px; margin-bottom:10px}
.tarjeta p{color:var(--texto-2); font-size:15.3px; line-height:1.6}

/* ── Contacto ── */
.contacto-caja{
  background:var(--fondo); border:1px solid var(--linea);
  border-radius:16px; padding:36px 32px; max-width:620px;
}
.dato{display:flex; gap:16px; align-items:flex-start; padding-block:16px; min-width:0}
.dato + .dato{border-top:1px solid var(--linea)}
.dato-icono{
  width:40px; height:40px; border-radius:10px; flex:none;
  background:var(--teal-suave); color:var(--teal);
  display:grid; place-items:center;
}
.dato-icono svg{width:19px; height:19px; stroke-width:1.9}
.dato-texto{min-width:0}
.dato-texto .rotulo{
  display:block; font-family:var(--display);
  font-size:11.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--texto-2); margin-bottom:3px;
}
.dato-texto .valor{font-size:16.5px; font-weight:600; color:var(--azul); overflow-wrap:anywhere}
.dato-texto a.valor{color:var(--teal); text-decoration:none}
.dato-texto a.valor:hover{text-decoration:underline}
.dato-acciones{display:flex; gap:9px; margin-top:9px; flex-wrap:wrap}
.enlace-chico{
  font-size:13.5px; font-weight:600; font-family:var(--display);
  color:var(--teal); text-decoration:none;
  border:1px solid var(--linea); border-radius:7px; padding:6px 13px;
}
.enlace-chico:hover{background:var(--teal-suave); border-color:var(--teal)}
@media(max-width:720px){.contacto-caja{padding:26px 20px}}

/* ── Páginas legales ── */
.legal{padding-block:60px 76px}
.legal-cabeza{
  max-width:760px; margin-bottom:44px;
  padding-bottom:28px; border-bottom:2px solid var(--teal-suave);
}
.legal-cabeza h1{font-size:clamp(28px,4.2vw,40px); margin-bottom:14px}
.actualizado{
  font-family:var(--display); font-size:13.5px; font-weight:500; color:var(--texto-2);
}
.legal-cuerpo{max-width:760px}
.legal-cuerpo section{margin-bottom:38px}
.legal-cuerpo h2{
  font-size:19.5px; margin-bottom:13px;
  display:flex; gap:12px; align-items:baseline;
}
.legal-cuerpo h2 .num{
  font-size:14px; font-weight:700; color:var(--teal);
  font-variant-numeric:tabular-nums; flex:none;
}
.legal-cuerpo p{color:var(--texto-2); margin-bottom:12px}
.legal-cuerpo li{color:var(--texto-2)}
.legal-cuerpo strong{color:var(--texto); font-weight:600}
.aviso-caja{
  background:var(--teal-suave); border-left:3px solid var(--teal);
  border-radius:0 10px 10px 0; padding:20px 22px; margin-top:8px;
}
.aviso-caja p{color:var(--azul-medio); margin:0}
.aviso-caja p + p{margin-top:8px}

/* ── Pie ── */
.pie{background:var(--azul); color:#c3d4e0; padding-block:52px 30px; margin-top:0}
.pie-rejilla{
  display:grid; gap:34px; grid-template-columns:1.4fr 1fr 1fr; margin-bottom:34px;
}
@media(max-width:760px){.pie-rejilla{grid-template-columns:1fr; gap:28px}}
.pie h3{
  color:#fff; font-size:13px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; margin-bottom:16px;
}
.pie-marca{
  font-family:var(--display); font-size:21px; font-weight:700;
  color:#fff; margin-bottom:12px; letter-spacing:-.02em;
}
.pie-marca span{color:var(--teal-claro)}
.pie p{font-size:14.8px; margin-bottom:6px; overflow-wrap:anywhere}
.pie a{color:#c3d4e0; text-decoration:none; font-size:14.8px}
.pie a:hover{color:#fff; text-decoration:underline}
.pie-lista{list-style:none; padding:0; margin:0}
.pie-lista li{margin-bottom:9px}
.pie-abajo{
  border-top:1px solid rgba(255,255,255,.14); padding-top:24px;
  font-size:13.8px; color:#8fa8ba;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
}

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