/* La tipografia de la marca, servida desde el propio dominio.
 *
 * Antes se declaraba "Archivo Black" sin cargarla y se confiaba en la cadena de
 * respaldo. En Windows caia a Arial Black y se veia bien; en Android no existe
 * ninguna de las alternativas pesadas y el logotipo quedaba en sans-serif
 * normal, justo en la app que usa el tecnico.
 *
 * Va el subconjunto latino, 18 KB, que cubre los acentos del español. Con
 * font-display:swap el texto se ve de inmediato con el respaldo y cambia cuando
 * la fuente llega: en terreno, con mala señal, nada se queda en blanco
 * esperando una tipografia. */
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/tipografia/archivo-black-latin.woff2") format("woff2");
}

/* Sistema visual de la web · TerraLub.

   Paleta corporativa del manual de identidad:
     grafito chasis #12212E · arcilla #9E3B1B · zinc #8A9199 · papel frío #EDEEF0

   Reparto de color, para que nada compita con la marca:
     · grafito  — acciones primarias y superficies oscuras.
     · arcilla  — la marca y la cadena de residuos peligrosos. Nada más.
     · estados  — crítico / atención / ok, siempre con texto o ícono al lado.

   A diferencia de la app de terreno —que fija una paleta de alta luminancia
   porque se lee bajo el sol— la web respeta la preferencia del sistema. En
   oscuro la arcilla se aclara para sostener el contraste sobre el grafito,
   tal como el manual manda aclarar LUB a blanco sobre fondo oscuro. */
:root{
  --fondo:#EDEEF0; --sup:#FFFFFF; --sup2:#E4E6EA; --sup3:#D8DCE1;
  --tinta:#12212E; --tinta2:#4A555F; --tinta3:#8A9199;
  --linea:#D9DCE1; --linea2:#C9CDD2;
  --grafito:#12212E; --grafito2:#3A4650; --grafito-bg:#DFE3E8;
  --arcilla:#9E3B1B; --arcilla-txt:#8A3317; --arcilla-bg:#F7E7E0;
  --crit:#B0202A; --crit-bg:#FAE3E5; --aten:#8A5A0B; --aten-bg:#FAEED4; --ok:#1E6B41; --ok-bg:#DCF0E3;
  --sombra-s:0 1px 2px rgba(18,33,46,.05), 0 1px 3px rgba(18,33,46,.06);
  --sombra:0 2px 4px rgba(18,33,46,.04), 0 12px 28px -14px rgba(18,33,46,.22);
  --sombra-l:0 8px 40px -12px rgba(18,33,46,.28);
  --r:12px; --r-s:8px;
  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"IBM Plex Mono","Cascadia Mono","SF Mono","Segoe UI Mono",Consolas,monospace;
  /* Ninguna de las cuatro primeras existe en Android, que es donde corre la app
     del tecnico: sin Roboto en la cadena la marca cae a sans-serif normal y
     pierde todo el peso. Roboto si tiene corte Black, y no cuesta una descarga. */
  --titular:"Archivo Black","Arial Black","Helvetica Neue",Impact,Roboto,"Noto Sans",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --fondo:#0A1219; --sup:#12212E; --sup2:#1A2E3E; --sup3:#243A4C;
    --tinta:#EDEEF0; --tinta2:#B8C2CB; --tinta3:#8A9199;
    --linea:#22384A; --linea2:#3A4E60;
    --grafito:#EDEEF0; --grafito2:#B8C2CB; --grafito-bg:#1A2E3E;
    --arcilla:#B4441F; --arcilla-txt:#E09A7B; --arcilla-bg:#2E1710;
    --crit:#F0868C; --crit-bg:#361419; --aten:#E0AE55; --aten-bg:#2E2410; --ok:#6BC891; --ok-bg:#12301F;
    --sombra-s:0 1px 2px rgba(0,0,0,.45);
    --sombra:0 2px 4px rgba(0,0,0,.35), 0 12px 28px -14px rgba(0,0,0,.75);
    --sombra-l:0 8px 40px -12px rgba(0,0,0,.85);
  }
}
:root[data-tema="oscuro"]{
  --fondo:#0A1219; --sup:#12212E; --sup2:#1A2E3E; --sup3:#243A4C;
  --tinta:#EDEEF0; --tinta2:#B8C2CB; --tinta3:#8A9199;
  --linea:#22384A; --linea2:#3A4E60;
  --grafito:#EDEEF0; --grafito2:#B8C2CB; --grafito-bg:#1A2E3E;
  --arcilla:#B4441F; --arcilla-txt:#E09A7B; --arcilla-bg:#2E1710;
  --crit:#F0868C; --crit-bg:#361419; --aten:#E0AE55; --aten-bg:#2E2410; --ok:#6BC891; --ok-bg:#12301F;
  --sombra-s:0 1px 2px rgba(0,0,0,.45);
  --sombra:0 2px 4px rgba(0,0,0,.35), 0 12px 28px -14px rgba(0,0,0,.75);
  --sombra-l:0 8px 40px -12px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fondo); color:var(--tinta); font-family:var(--sans);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; line-height:1.2; text-wrap:balance; letter-spacing:-.012em}
h1{font-size:clamp(24px,3.2vw,32px); font-weight:700}
h2{font-size:20px; font-weight:650}
h3{font-size:16px; font-weight:650}
p{margin:0}
a{color:var(--arcilla-txt)}
button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--arcilla); outline-offset:2px; border-radius:6px}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums; font-family:var(--mono)}
.oculto{display:none !important}

/* ---------------------------------------------------------------- ingreso */
.ingreso{min-height:100dvh; display:grid; grid-template-columns:1fr}
@media(min-width:940px){.ingreso{grid-template-columns:1.05fr .95fr}}
.ingreso-marca{
  background:#12212E; color:#EDEEF0; padding:40px 34px; display:flex;
  flex-direction:column; justify-content:space-between; gap:36px; position:relative; overflow:hidden;
}
.ingreso-marca::after{
  content:""; position:absolute; inset:auto -80px -120px auto; width:420px; height:420px;
  border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(158,59,27,.42), transparent 62%);
}
.ingreso-marca > *{position:relative; z-index:1}
.logo{display:flex; align-items:center; gap:11px; font-weight:700; font-size:16px; letter-spacing:-.01em}
.logo img{width:34px; height:34px; border-radius:0}

/* La palabra de la marca. El corte de color TERRA/LUB no se mueve nunca de
   lugar: arcilla la primera raíz, grafito (o blanco sobre oscuro) la segunda. */
.marca-txt{font-family:var(--titular); font-weight:900; font-size:17px; line-height:1;
  text-transform:uppercase; letter-spacing:.012em}
.marca-txt b,.marca-txt i{font-weight:inherit; font-style:normal}
.marca-txt b{color:var(--arcilla)}
.marca-txt i{color:currentColor}
.ingreso-marca .marca-txt b{color:#B4471F}
.ingreso-marca .marca-txt i{color:#FFFFFF}
.pie .marca-txt,.lateral .marca-txt{font-size:16px}
.ingreso-marca h1{font-size:clamp(28px,4.4vw,44px); max-width:15ch; color:#fff}
.ingreso-marca p{max-width:44ch; color:#B8C2CB; font-size:15.5px; margin-top:14px}
.ingreso-puntos{display:flex; flex-direction:column; gap:10px; margin-top:26px}
.ingreso-puntos div{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:#C9CDD2}
.ingreso-puntos span{color:#CE9D8D; font-family:var(--mono); font-size:11px; padding-top:3px; letter-spacing:.08em}
.ingreso-pie{font-family:var(--mono); font-size:11px; color:#8A9199; letter-spacing:.06em}

.ingreso-form{display:flex; align-items:center; justify-content:center; padding:40px 26px}
.ingreso-caja{width:100%; max-width:400px}
.ingreso-caja h2{margin-bottom:6px}
.ingreso-caja > p{color:var(--tinta2); font-size:14px; margin-bottom:24px}

/* ------------------------------------------------------------- formulario */
.campo{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.campo > label{font-size:12.5px; font-weight:600; color:var(--tinta2)}
.campo input,.campo select,.campo textarea{
  background:var(--sup); border:1px solid var(--linea2); border-radius:var(--r-s);
  padding:11px 13px; width:100%; transition:border-color .15s, box-shadow .15s;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--grafito); box-shadow:0 0 0 3px var(--grafito-bg);
}
.campo .pista{font-size:12px; color:var(--tinta3)}
.dos-col{display:grid; gap:0 14px; grid-template-columns:1fr}
@media(min-width:560px){.dos-col{grid-template-columns:1fr 1fr}}
.tres-col{display:grid; gap:0 14px; grid-template-columns:1fr}
@media(min-width:640px){.tres-col{grid-template-columns:repeat(3,1fr)}}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--grafito); color:var(--fondo); border:1px solid transparent;
  border-radius:var(--r-s); padding:11px 18px; font-weight:600; font-size:14.5px;
  transition:filter .15s, transform .05s;
}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45; cursor:not-allowed; filter:none}
.btn-ancho{width:100%; padding:13px}
.btn-sec{background:transparent; color:var(--tinta); border-color:var(--linea2)}
.btn-sec:hover{background:var(--sup2); filter:none}
.btn-peligro{background:var(--crit); color:#fff}
.btn-fantasma{background:transparent; color:var(--tinta2); border-color:transparent; padding:8px 10px}
.btn-fantasma:hover{background:var(--sup2); filter:none}
.btn-s{padding:7px 13px; font-size:13px}
.botones{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* -------------------------------------------------------------- estructura */
.marco{display:grid; grid-template-columns:1fr; min-height:100dvh}
@media(min-width:1000px){.marco{grid-template-columns:246px 1fr}}
.lateral{
  background:var(--sup); border-right:1px solid var(--linea); padding:20px 16px;
  display:none; flex-direction:column; gap:4px; position:sticky; top:0; height:100dvh;
}
@media(min-width:1000px){.lateral{display:flex}}
.lateral .logo{color:var(--tinta); margin-bottom:22px; padding:0 8px}
.lateral nav{display:flex; flex-direction:column; gap:2px; flex:1}
.nav-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-s);
  color:var(--tinta2); text-decoration:none; font-size:14.5px; border:0; background:transparent;
  text-align:left; width:100%; transition:background .12s, color .12s;
}
.nav-item:hover{background:var(--sup2); color:var(--tinta)}
.nav-item.activo{background:var(--grafito-bg); color:var(--grafito); font-weight:600}
.nav-item .globo{
  margin-left:auto; background:var(--arcilla); color:#fff; border-radius:99px;
  font-size:11px; font-family:var(--mono); padding:1px 7px; font-weight:400;
}
.usuario{border-top:1px solid var(--linea); padding-top:14px; margin-top:10px}
.usuario .nom{font-weight:600; font-size:14px}
.usuario .rol{font-size:12px; color:var(--tinta3); font-family:var(--mono); letter-spacing:.04em}

.superior{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px; background:var(--sup); border-bottom:1px solid var(--linea);
  position:sticky; top:0; z-index:30;
}
@media(min-width:1000px){.superior{display:none}}
.pestanas-mov{display:flex; gap:4px; overflow-x:auto; padding:10px 14px; background:var(--sup);
  border-bottom:1px solid var(--linea); position:sticky; top:57px; z-index:29}
@media(min-width:1000px){.pestanas-mov{display:none}}
.pestanas-mov .nav-item{width:auto; white-space:nowrap; padding:8px 13px; font-size:13.5px}

.contenido{padding:22px 18px 60px; max-width:1180px; width:100%; margin:0 auto}
@media(min-width:760px){.contenido{padding:30px 30px 70px}}
.cabecera{display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  flex-wrap:wrap; margin-bottom:22px}
.cabecera .sub{color:var(--tinta2); font-size:14px; margin-top:4px}

/* ------------------------------------------------------------- componentes */
.tarjeta{background:var(--sup); border:1px solid var(--linea); border-radius:var(--r);
  padding:18px; box-shadow:var(--sombra-s)}
.tarjeta + .tarjeta{margin-top:14px}
.tarjeta-t{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px}
.rejilla{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.rejilla-kpi{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-bottom:20px}
.kpi{background:var(--sup); border:1px solid var(--linea); border-radius:var(--r); padding:15px 17px}
.kpi .k{font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--tinta3)}
.kpi .v{font-size:29px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2; margin-top:3px}
.kpi .v small{font-size:14px; font-weight:400; color:var(--tinta2)}
.kpi .d{font-size:12.5px; color:var(--tinta2); margin-top:2px}

.pill{display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:99px; white-space:nowrap}
.p-ok{background:var(--ok-bg); color:var(--ok)}
.p-aten{background:var(--aten-bg); color:var(--aten)}
.p-crit{background:var(--crit-bg); color:var(--crit)}
.p-neu{background:var(--sup2); color:var(--tinta2); border:1px solid var(--linea)}
.p-arc{background:var(--arcilla-bg); color:var(--arcilla)}
.p-gra{background:var(--grafito-bg); color:var(--grafito)}

.medidor .pista{height:7px; border-radius:99px; background:var(--sup3); overflow:hidden}
.medidor .relleno{height:100%; border-radius:99px}
.medidor .leyenda{display:flex; justify-content:space-between; gap:10px; font-size:12px;
  color:var(--tinta2); margin-top:5px; font-variant-numeric:tabular-nums}

.aviso{border-radius:var(--r-s); padding:13px 15px; font-size:14px; border:1px solid; margin-bottom:16px}
.aviso b{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:4px; font-weight:400}
.a-ok{background:var(--ok-bg); color:var(--ok); border-color:var(--ok)}
.a-aten{background:var(--aten-bg); color:var(--aten); border-color:var(--aten)}
.a-crit{background:var(--crit-bg); color:var(--crit); border-color:var(--crit)}
.a-info{background:var(--grafito-bg); color:var(--grafito); border-color:var(--grafito)}

.tabla-caja{overflow-x:auto; border:1px solid var(--linea); border-radius:var(--r); background:var(--sup)}
table{border-collapse:collapse; width:100%; min-width:600px; font-size:14px}
th{text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta3); font-weight:400; padding:11px 14px; background:var(--sup2); white-space:nowrap}
td{padding:12px 14px; border-top:1px solid var(--linea); vertical-align:middle}
tbody tr:hover{background:var(--sup2)}

.lista-lim{list-style:none; margin:0; padding:0}
.lista-lim li{padding:14px 0; border-top:1px solid var(--linea); display:flex; gap:14px;
  justify-content:space-between; align-items:flex-start; flex-wrap:wrap}
.lista-lim li:first-child{border-top:0; padding-top:0}
.vacio{color:var(--tinta3); font-size:14px; padding:24px 0; text-align:center}

/* opciones tipo tarjeta (elegir equipo, mantención) */
.opciones{display:grid; gap:10px; grid-template-columns:1fr; margin-bottom:16px}
@media(min-width:560px){.opciones.dos{grid-template-columns:1fr 1fr}}
.opcion{
  display:flex; gap:12px; align-items:flex-start; text-align:left; width:100%;
  background:var(--sup); border:1.5px solid var(--linea2); border-radius:var(--r);
  padding:14px 16px; transition:border-color .12s, background .12s;
}
.opcion:hover{border-color:var(--grafito)}
.opcion[aria-pressed="true"]{border-color:var(--grafito); background:var(--grafito-bg)}
.opcion .marca-r{width:17px; height:17px; border-radius:50%; border:2px solid var(--linea2);
  flex-shrink:0; margin-top:2px; position:relative}
.opcion[aria-pressed="true"] .marca-r{border-color:var(--grafito)}
.opcion[aria-pressed="true"] .marca-r::after{content:""; position:absolute; inset:3px;
  border-radius:50%; background:var(--grafito)}
.opcion .tit{font-weight:600; font-size:14.5px}
.opcion .des{font-size:13px; color:var(--tinta2); margin-top:2px}

/* agenda */
.agenda{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.dia{border:1px solid var(--linea); border-radius:var(--r-s); background:var(--sup); padding:11px}
.dia .f{font-family:var(--mono); font-size:11px; color:var(--tinta3); letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:8px}
.bloque{display:block; width:100%; text-align:left; border:1.5px solid var(--linea2); background:var(--sup2);
  border-radius:6px; padding:8px 10px; font-size:13px; margin-bottom:6px; transition:border-color .12s}
.bloque:last-child{margin-bottom:0}
.bloque .h{font-family:var(--mono); font-size:10.5px; color:var(--tinta3); display:block}
.bloque.libre:hover{border-color:var(--grafito)}
.bloque[aria-pressed="true"]{border-color:var(--grafito); background:var(--grafito-bg); color:var(--grafito); font-weight:600}
.bloque[disabled]{opacity:.5; cursor:not-allowed; background:transparent}

.fila-ed{display:grid; gap:8px; grid-template-columns:1fr; align-items:end; margin-bottom:8px;
  padding-bottom:8px; border-bottom:1px dashed var(--linea)}
@media(min-width:700px){.fila-ed{grid-template-columns:1.1fr .7fr 1.1fr .7fr auto}}
.fila-ed .campo{margin-bottom:0}
.fila-ed .quitar{background:transparent; border:1px solid var(--linea2); border-radius:var(--r-s);
  padding:11px 12px; color:var(--tinta2)}

.modal-fondo{position:fixed; inset:0; background:rgba(10,18,25,.58); backdrop-filter:blur(3px);
  z-index:60; display:flex; align-items:flex-start; justify-content:center; padding:20px; overflow-y:auto}
.modal{background:var(--sup); border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra-l); width:100%; max-width:760px; padding:24px; margin:auto}
.modal h2{margin-bottom:4px}
.modal .sub{color:var(--tinta2); font-size:14px; margin-bottom:20px}

.hilo{list-style:none; margin:0; padding:0 0 0 20px; border-left:2px solid var(--linea)}
.hilo li{position:relative; padding:0 0 18px 16px}
.hilo li::before{content:""; position:absolute; left:-23px; top:5px; width:8px; height:8px;
  border-radius:99px; background:var(--linea2); border:2px solid var(--sup)}
.hilo li.res::before{background:var(--arcilla)}
.hilo li.rec::before{background:var(--aten)}
.hilo li.srv::before{background:var(--grafito)}
.hilo .f{font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; color:var(--tinta3); text-transform:uppercase}
.hilo .t{font-weight:600; margin:2px 0 3px}
.hilo .d{font-size:13.5px; color:var(--tinta2)}

.cargando{padding:60px 0; text-align:center; color:var(--tinta3)}
.sep{height:1px; background:var(--linea); margin:22px 0}
/* Separador con texto al medio: la linea se dibuja con un pseudo-elemento a
   cada lado para que el hueco se ajuste solo al largo de la palabra. */
.sep-o{height:auto; background:none; display:flex; align-items:center; gap:12px;
  font-size:12.5px; color:var(--tinta2)}
.sep-o::before,.sep-o::after{content:''; flex:1; height:1px; background:var(--linea)}
/* El boton lo dibuja la biblioteca de Google dentro de este contenedor: no se
   le puede dar estilo por dentro, solo centrarlo. */
.boton-google{display:flex; justify-content:center; min-height:44px}
.etiqueta{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta3); display:block; margin-bottom:10px}

/* ------------------------------------------------------------------ portada */
.portada-nav{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:18px;
  justify-content:space-between; padding:14px 20px; background:var(--sup);
  border-bottom:1px solid var(--linea); flex-wrap:wrap;
}
.portada-nav .logo{color:var(--tinta); text-decoration:none}
.portada-enlaces{display:none; gap:22px}
@media(min-width:860px){.portada-enlaces{display:flex}}
.portada-enlaces a{color:var(--tinta2); text-decoration:none; font-size:14.5px}
.portada-enlaces a:hover{color:var(--tinta)}

.ojo{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--arcilla); display:block; margin-bottom:12px}

.heroe{display:grid; grid-template-columns:1fr; gap:34px; padding:44px 20px 20px;
  max-width:1180px; margin:0 auto; align-items:center}
@media(min-width:940px){.heroe{grid-template-columns:1.02fr .98fr; padding:64px 30px 30px; gap:48px}}
.heroe h1{font-size:clamp(30px,4.6vw,48px); line-height:1.08; max-width:17ch}
.heroe-texto p{margin-top:18px; color:var(--tinta2); font-size:16.5px; max-width:52ch; line-height:1.6}
.heroe-imagen{border-radius:var(--r); overflow:hidden; box-shadow:var(--sombra)}
/* La foto trae sus dimensiones en el HTML para reservar el alto y no mover el
   texto al cargar; el aspect-ratio mantiene la reserva al escalar. */
.heroe-imagen img{display:block; width:100%; height:auto; aspect-ratio:16/10}
.heroe-datos{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px;
  padding-top:24px; border-top:1px solid var(--linea)}
.heroe-datos strong{display:block; font-size:24px; font-variant-numeric:tabular-nums; line-height:1.2}
.heroe-datos span{font-size:12.5px; color:var(--tinta2); line-height:1.35; display:block; margin-top:2px}

.franja{max-width:1180px; margin:0 auto; padding:56px 20px}
@media(min-width:760px){.franja{padding:76px 30px}}
.franja-t{max-width:62ch; margin-bottom:30px}
.franja-t h2{font-size:clamp(23px,3vw,31px)}
.franja-t p{margin-top:12px; color:var(--tinta2); font-size:16px; line-height:1.6}
.franja-oscura{max-width:none; background:var(--sup2); border-block:1px solid var(--linea)}
.franja-oscura > *{max-width:1180px; margin-left:auto; margin-right:auto}
.franja-oscura svg{border-radius:var(--r); box-shadow:var(--sombra); max-width:1180px; margin:0 auto}

.servicio h3{margin-bottom:8px}
.servicio .sub{color:var(--tinta2); font-size:14px; margin-bottom:14px}
.chequeos{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.chequeos li{position:relative; padding-left:24px; font-size:14px; color:var(--tinta2); line-height:1.45}
.chequeos li::before{
  content:""; position:absolute; left:0; top:6px; width:13px; height:8px;
  border-left:2px solid var(--arcilla); border-bottom:2px solid var(--arcilla); transform:rotate(-45deg);
}

.plan p{color:var(--tinta2); font-size:14px; min-height:44px}
.valor-oculto{margin-top:16px; padding-top:14px; border-top:1px dashed var(--linea2)}
.candado{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--tinta3)}
.candado::before{
  content:""; width:11px; height:9px; border:1.5px solid var(--tinta3); border-radius:2px;
  box-shadow:0 -4px 0 -1.5px transparent, inset 0 0 0 0 transparent; position:relative; top:2px;
}

.franja-contacto{display:grid; grid-template-columns:1fr; gap:30px}
@media(min-width:940px){.franja-contacto{grid-template-columns:.92fr 1.08fr; gap:50px; align-items:start}}
.contacto-texto h2{font-size:clamp(23px,3vw,31px)}
.contacto-texto p{margin-top:12px; color:var(--tinta2); font-size:16px; line-height:1.6}

.pie-legal{font-family:var(--mono); font-size:11px; color:var(--tinta3);
  letter-spacing:.04em; margin-top:8px}
.pie{background:var(--sup2); border-top:1px solid var(--linea); padding:36px 20px;
  display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center}
.pie p{color:var(--tinta2); font-size:13.5px; max-width:64ch}

/* estado de cuenta pendiente */
.espera{max-width:640px; margin:60px auto; text-align:center}
.espera .sello{width:74px; height:74px; margin:0 auto 22px; border-radius:50%;
  background:var(--aten-bg); color:var(--aten); display:grid; place-items:center;
  font-family:var(--mono); font-size:26px}

/* cotizador */
.cotiza-total{background:var(--grafito-bg); border:1px solid var(--grafito); border-radius:var(--r);
  padding:18px 20px; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap}
.cotiza-total .neto{font-size:13px; color:var(--tinta2)}
.cotiza-total .total{font-size:31px; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--grafito); line-height:1.15}

/* ==========================================================================
   Revisión de diseño: navegación con hamburguesa y pulido de controles
   ========================================================================== */

/* Radios más generosos en todo el sistema (las tarjetas y botones usan las
   variables, así que el cambio se propaga solo). */
:root{--r:14px; --r-s:10px}

/* Botones: altura táctil mínima y estados de pulsación consistentes. */
.btn{min-height:44px}
.btn-s{min-height:38px}
.btn-ancho{min-height:50px}
.nav-item{min-height:46px}
.campo input,.campo select,.campo textarea{min-height:46px}

/* Hamburguesa ------------------------------------------------------------- */
.hamb{
  width:44px; height:44px; flex-shrink:0; border:1px solid var(--linea2);
  background:var(--sup); border-radius:var(--r-s); cursor:pointer;
  display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  padding:0;
}
.hamb:hover{background:var(--sup2)}
.hamb span{display:block; width:18px; height:2px; border-radius:2px; background:var(--tinta)}
.solo-movil{display:inline-flex}
@media(min-width:860px){.portada-nav .solo-movil{display:none}}
@media(max-width:719px){.portada-acciones{display:none}}

/* Cajón de navegación móvil ------------------------------------------------ */
.velo-m{
  position:fixed; inset:0; z-index:69; background:rgba(10,18,25,.55);
  backdrop-filter:blur(2px);
}
.menu-movil{
  position:fixed; top:0; left:0; bottom:0; z-index:70;
  width:min(320px, 86vw); background:var(--sup);
  display:flex; flex-direction:column; gap:8px; overflow-y:auto;
  padding:22px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow:var(--sombra-l);
  animation:desliza-menu .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes desliza-menu{from{transform:translateX(-100%)}to{transform:none}}
@media (prefers-reduced-motion: reduce){.menu-movil{animation:none}}
.menu-movil .logo{margin-bottom:12px; color:var(--tinta)}
.menu-movil nav{display:flex; flex-direction:column; gap:2px}
.menu-movil .nav-item{font-size:15px}

/* La franja de pestañas horizontales quedó reemplazada por el cajón. */
.pestanas-mov{display:none}