/* =====================================================================
   ALT STUDIO · ESTILOS
   Identidad tomada de la propuesta de servicio en PDF:
   Inter (títulos y texto) + DejaVu Sans Mono (etiquetas),
   negro carbón, blanco, grises neutros y el punto rojo del logo.
   Composición editorial: bandas claras y oscuras alternadas,
   columnas angostas de texto, mucho aire.
   ===================================================================== */

/* ---------- Tipografías (archivos locales, sin servicios externos) ---------- */
@font-face{font-family:"Inter";src:url("../fuentes/inter-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fuentes/inter-medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fuentes/inter-semibold.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fuentes/inter-bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fuentes/inter-extrabold.woff") format("woff");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"DejaVu Sans Mono";src:url("../fuentes/dejavu-mono.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}

/* ---------- Colores y medidas: cambiar acá cambia toda la web ---------- */
:root{
  /* Paleta de marca */
  --carbon:#101012;      /* fondo de portada */
  --tinta:#0f0f11;       /* texto principal */
  --blanco:#ffffff;
  --niebla:#f2f2f3;      /* recuadros grises */
  --linea:#e3e3e6;       /* líneas divisorias */
  --gris:#6b6b72;        /* texto secundario */
  --rojo:#b3262b;        /* punto del logo */
  --verde:#1b7a43; --verde-fondo:#e5f2e8;  /* etiqueta ALT de los pasos */

  /* Tokens que usa cada sección (las bandas oscuras los redefinen) */
  --fondo:var(--blanco);
  --texto:var(--tinta);
  --suave:var(--gris);
  --borde:var(--linea);
  --caja:var(--niebla);

  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"DejaVu Sans Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --ancho:1200px;
  --radio:18px;
  --alto-cabecera:64px;
  color-scheme:light;
}

/* Bandas oscuras (portada, producción, trabajos, contacto, pie) */
.oscuro{
  --fondo:var(--carbon);
  --texto:#f4f4f5;
  --suave:#9d9da2;
  --borde:#2a2a2f;
  --caja:#1a1a1e;
  background:var(--fondo);
  color:var(--texto);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--alto-cabecera) + env(safe-area-inset-top,0px) + 8px)}
body{margin:0;background:var(--blanco);color:var(--tinta);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--carbon)}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:6px}
main:focus{outline:none}

.envoltura{width:100%;max-width:var(--ancho);margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
@media (min-width:900px){.envoltura{padding-left:max(48px,env(safe-area-inset-left,0px));padding-right:max(48px,env(safe-area-inset-right,0px))}}

.saltar{position:absolute;left:12px;top:-60px;z-index:100;background:var(--blanco);color:var(--tinta);padding:10px 16px;border-radius:99px;font-weight:600}
.saltar:focus{top:calc(12px + env(safe-area-inset-top,0px))}

/* ---------- Tipografía ---------- */
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.etiqueta{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--suave);line-height:1.5}
h1{font-size:clamp(40px,min(8.4vw,11.5vh),104px);font-weight:700;letter-spacing:-.045em;line-height:.98;text-wrap:balance}
h2{font-size:clamp(34px,5.4vw,60px);font-weight:700;letter-spacing:-.04em;line-height:1.02;text-wrap:balance}
h3{font-size:clamp(26px,3.6vw,40px);font-weight:700;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
h4{font-weight:400}
.bajada{font-size:clamp(17px,1.8vw,20px);color:var(--suave);max-width:46ch;line-height:1.5}
.texto{display:flex;flex-direction:column;gap:16px;max-width:58ch}
.texto p{color:var(--texto)}

/* ---------- Logo (como en la tapa del PDF) ---------- */
.punto{display:inline-block;width:.27em;height:.27em;border-radius:50%;background:var(--rojo);flex:none}
.logo{--logo:clamp(80px,min(19vw,21vh),220px);display:inline-grid;grid-template-columns:auto auto;align-items:start;justify-self:start;line-height:1}
.logo__alt{font-weight:800;font-size:var(--logo);letter-spacing:-.06em;line-height:.78;color:var(--texto)}
.logo .punto{font-size:var(--logo);width:.27em;height:.27em;margin-left:.09em;margin-top:-.02em}
.logo__studio{grid-column:1/-1;font-family:var(--mono);font-size:calc(var(--logo) * .165);letter-spacing:.06em;color:var(--suave);margin-top:.55em;padding-left:.15em}

.logo-mini{display:inline-flex;align-items:flex-start;gap:0;text-decoration:none;line-height:1}
.logo-mini__alt{font-weight:800;font-size:22px;letter-spacing:-.05em}
.logo-mini .punto{width:6px;height:6px;margin-left:4px;margin-top:1px}
.logo-mini__studio{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--suave);align-self:center;margin-left:12px}

/* ---------- Botones ---------- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:99px;border:1.5px solid transparent;font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .15s ease,background-color .2s,color .2s,border-color .2s}
.boton:active{transform:scale(.98)}
.boton--oscuro{background:var(--tinta);color:var(--blanco)}
.boton--oscuro:hover{background:#2b2b2f}
.boton--claro{background:var(--blanco);color:var(--tinta)}
.boton--claro:hover{background:#e3e3e6}
.boton--borde-claro{background:transparent;color:var(--texto);border-color:color-mix(in srgb,var(--texto) 35%,transparent)}
.boton--borde-claro:hover{border-color:var(--texto)}
.boton--chico{min-height:38px;padding:8px 16px;font-size:14px}
.boton--grande{min-height:56px;padding:14px 30px;font-size:16px}
.botones{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Aviso de vista previa ---------- */
.borrador{background:var(--rojo);color:var(--blanco);font-size:13px;line-height:1.4}
.borrador .envoltura{display:flex;gap:12px;align-items:baseline;padding-block:9px;flex-wrap:wrap}
.borrador .mono{font-size:10.5px;opacity:.85}

/* ---------- Cabecera ---------- */
.cabecera{--texto:#f4f4f5;--suave:#9d9da2;position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--carbon);color:var(--texto);border-bottom:1px solid transparent;transition:border-color .3s}
.cabecera.con-borde{border-bottom-color:#26262b}
.cabecera__fila{display:flex;align-items:center;gap:16px;min-height:var(--alto-cabecera)}
.cabecera .logo-mini{transition:opacity .35s ease,transform .35s ease}
.cabecera:not(.logo-visible) .logo-mini{opacity:0;transform:translateY(6px);pointer-events:none}
.menu{margin-left:auto}
.menu ul{display:flex;gap:4px}
.menu a{display:block;padding:8px 12px;border-radius:99px;text-decoration:none;font-size:14.5px;font-weight:500;color:var(--suave);transition:color .2s;white-space:nowrap}
.menu a:hover,.menu a[aria-current="true"]{color:var(--texto)}
.menu a[aria-current="true"]::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--rojo);margin-right:7px;vertical-align:middle;transform:translateY(-1px)}
.cabecera__cta{margin-left:8px}

/* Celular: el menú queda siempre a la vista, en una segunda fila */
@media (max-width:759px){
  .cabecera__fila{flex-wrap:wrap;gap:0 12px;min-height:0;padding-top:10px}
  .cabecera:not(.logo-visible) .logo-mini{opacity:1;transform:none;pointer-events:auto}
  .cabecera__fila{padding-bottom:0}
  .menu{order:3;flex-basis:100%;margin:6px 0 0;border-top:1px solid #26262b}
  .menu ul{justify-content:space-between;gap:0}
  .menu a{padding:12px 4px;font-size:14px;border-radius:0}
  .menu a[aria-current="true"]::before{margin-right:6px}
}

/* ---------- Portada ---------- */
/* ---------- Portada ----------
   Ocupa la primera pantalla: marca a la izquierda y textos a la derecha,
   centrados entre sí. En celular, uno debajo del otro.
   Abajo, una franja fina con los accesos directos (como el pie del PDF).
   El video va en su propia franja (.reel), debajo de la portada. */
.inicio{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:calc(100vh - var(--alto-cabecera));min-height:calc(100svh - var(--alto-cabecera));padding-block:clamp(24px,5vh,56px) clamp(20px,3.5vh,36px)}
.inicio::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(110deg,transparent 0 46px,rgba(255,255,255,.045) 46px 47px)}
.inicio__envoltura{position:relative;flex:1;display:flex;flex-direction:column;gap:clamp(28px,5vh,56px)}
.inicio__grilla{flex:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"marca" "texto";align-content:center;row-gap:clamp(28px,4.5vh,48px)}
.inicio__marca{grid-area:marca}
.inicio__texto{grid-area:texto;display:flex;flex-direction:column;gap:clamp(14px,2.2vh,20px);min-width:0;max-width:600px}
.inicio__texto .etiqueta{margin-bottom:2px}
.inicio__texto .bajada{max-width:36ch}
.inicio__texto .botones{margin-top:clamp(4px,1vh,10px)}
.inicio h1{font-size:clamp(42px,min(9.6vw,10.5vh),96px)}

/* Franja inferior con accesos a cada servicio */
.atajos{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;padding-top:16px;border-top:1px solid var(--borde)}
.atajos .etiqueta{margin-right:2px}
.atajos a{color:var(--texto);font-size:14.5px;font-weight:500;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:4px}
.atajos a:hover{text-decoration-color:currentColor}

@media (min-width:960px){
  .inicio__grilla{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"marca texto";column-gap:clamp(56px,7vw,112px);align-items:center}
  .inicio__marca{--logo:clamp(120px,min(17vw,30vh),240px)}

}
@media (max-width:959px){
  .inicio__marca{--logo:clamp(72px,24vw,132px)}
  .inicio__grilla{row-gap:clamp(22px,3.5vh,36px)}
  .inicio h1{font-size:clamp(38px,min(11vw,7vh),64px)}
  .inicio__texto .bajada{font-size:16px}
  /* En celular el menú de arriba ya lleva a cada sección */
  .atajos{display:none}
  .inicio{padding-block:clamp(20px,4vh,40px)}
}
@media (min-width:960px) and (max-height:680px){.atajos{display:none}}

/* Franja del video de portada */
.reel{position:relative;padding-block:clamp(8px,2vw,24px) clamp(64px,9vw,120px)}
.reel::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(110deg,transparent 0 46px,rgba(255,255,255,.045) 46px 47px)}
.reel .envoltura{position:relative}

/* Visor de video: marcas de encuadre como en un monitor de cámara */
.visor{position:relative;min-width:0}
.visor__marco{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:clamp(12px,1.6vw,20px);overflow:hidden;background:#17171a;isolation:isolate}
.visor__video,.visor__imagen{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visor__reservado{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;color:#9d9da2;background:radial-gradient(ellipse at 50% 60%,#24242a 0%,#17171a 70%)}
.visor__reservado .mono{color:#cfcfd4;font-size:10.5px}
.visor__aclaracion{font-size:14px;max-width:34ch}
.visor__esquina{position:absolute;width:clamp(16px,2.4vw,28px);height:clamp(16px,2.4vw,28px);border:0 solid rgba(255,255,255,.7);z-index:2}
.visor__esquina--1{top:clamp(12px,2vw,22px);left:clamp(12px,2vw,22px);border-top-width:1.5px;border-left-width:1.5px}
.visor__esquina--2{top:clamp(12px,2vw,22px);right:clamp(12px,2vw,22px);border-top-width:1.5px;border-right-width:1.5px}
.visor__esquina--3{bottom:clamp(12px,2vw,22px);left:clamp(12px,2vw,22px);border-bottom-width:1.5px;border-left-width:1.5px}
.visor__esquina--4{bottom:clamp(12px,2vw,22px);right:clamp(12px,2vw,22px);border-bottom-width:1.5px;border-right-width:1.5px}
.visor__rec,.visor__tc{position:absolute;z-index:2;color:#fff;font-size:10.5px;display:flex;align-items:center;gap:8px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.visor__rec{top:clamp(18px,3vw,36px);left:clamp(26px,4.2vw,58px)}
.visor__tc{top:clamp(18px,3vw,36px);right:clamp(26px,4.2vw,58px);font-variant-numeric:tabular-nums;letter-spacing:.12em}
.punto--chico{width:8px;height:8px}
.visor__pausa{position:absolute;z-index:3;bottom:clamp(18px,3vw,36px);right:clamp(26px,4.2vw,58px);min-height:36px;padding:6px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.4);background:rgba(16,16,18,.55);color:#fff;font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(6px)}
@media (max-width:520px){.visor__aclaracion{display:none}.visor__tc{display:none}}

@media (prefers-reduced-motion:no-preference){
  .visor__rec .punto{animation:rec 2.4s ease-in-out infinite}
  @keyframes rec{0%,60%{opacity:1}75%,85%{opacity:.55}100%{opacity:1}}
}

/* ---------- Secciones ---------- */
.seccion{--aire:clamp(80px,11vw,152px);padding-block:var(--aire);background:var(--fondo);color:var(--texto);
  /* Al llegar desde el menú, el título queda cerca de la cabecera y no después de todo el margen */
  scroll-margin-top:calc(clamp(20px,3vw,36px) - var(--aire))}
.encabezado{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(40px,6vw,72px);max-width:760px}
.encabezado--fila{max-width:none;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.encabezado--fila>div:first-child{display:flex;flex-direction:column;gap:18px}

/* Servicios: tres tarjetas independientes, del mismo peso */
.servicios{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:960px){.servicios{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.servicio{display:flex;flex-direction:column;gap:16px;align-items:flex-start;background:var(--niebla);border-radius:var(--radio);padding:clamp(26px,3.4vw,40px);min-width:0}
.servicio__icono{width:44px;height:44px;fill:none;stroke:var(--tinta);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.servicio h3{font-size:clamp(24px,2.2vw,28px)}
.servicio__texto{color:#3b3b42;font-size:16px}
.servicio__lista{display:flex;flex-direction:column;width:100%;margin-bottom:12px}
.servicio__lista li{padding:10px 0;border-top:1px solid var(--linea);font-size:15px;font-weight:500}
.servicio__lista li:last-child{border-bottom:1px solid var(--linea)}
.servicio .boton{margin-top:auto}
.servicio{transition:box-shadow .4s ease}
.servicio:target{box-shadow:0 0 0 1.5px var(--tinta)}

/* ---------- Trabajos ---------- */
/* Filas de hasta tres piezas con la misma altura:
   cada pieza ocupa un ancho proporcional a su formato (16:9 o 9:16). */
.trabajos{--aire:clamp(64px,8vw,112px)}
.trabajos .encabezado{margin-bottom:clamp(28px,4vw,44px)}
.trabajos__nota{color:var(--suave);font-size:14px;max-width:38ch}
.obras{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
.obras__fila{display:flex;gap:clamp(12px,1.6vw,20px);align-items:flex-start}
.obra{flex:var(--prop) 1 0;min-width:0;display:flex;flex-direction:column;gap:10px;margin:0}
.obra--horizontal{--prop:1.7778}
.obra--vertical{--prop:.5625}
@media (max-width:759px){
  .obras__fila{flex-wrap:wrap}
  .obra--horizontal{flex-basis:100%}
}
.obra__marco{position:relative;width:100%;max-width:100%;border-radius:14px;overflow:hidden;background:#1a1a1e;border:0;padding:0;color:#fff;display:block;cursor:pointer}
.obra--horizontal .obra__marco{aspect-ratio:16/9}
.obra--vertical .obra__marco{aspect-ratio:9/16}
.obra__marco img,.obra__marco video,.obra__marco iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.obra__marco img{transition:transform .5s ease}
.obra__marco:hover img{transform:scale(1.03)}
.obra__play{position:absolute;left:14px;bottom:14px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--tinta);display:flex;align-items:center;justify-content:center;z-index:1}
.obra--vacia .obra__marco{cursor:default;border:1.5px dashed #3a3a41;background:repeating-linear-gradient(110deg,#17171a 0 22px,#1b1b1f 22px 23px)}
.obra--vacia .obra__marco span{position:absolute;left:14px;bottom:12px;right:14px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#9d9da2}
.obra figcaption{display:flex;flex-direction:column;gap:2px}
.obra__titulo{font-weight:600;font-size:15.5px;line-height:1.3}
.obra__cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--suave)}

/* ---------- Por qué ALT ---------- */
.razones{display:grid;grid-template-columns:1fr;border-top:1.5px solid var(--tinta)}
@media (min-width:700px){.razones{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.razones{grid-template-columns:repeat(4,1fr)}}
.razones li{display:flex;flex-direction:column;gap:12px;padding:28px 0 32px;border-bottom:1px solid var(--borde)}
@media (min-width:700px){.razones li{padding:32px 28px 40px 0}.razones li:nth-child(even){padding-left:28px;border-left:1px solid var(--borde)}}
@media (min-width:1080px){.razones li{border-bottom:0}.razones li+li{padding-left:28px;border-left:1px solid var(--borde)}}
.razones h3{font-size:clamp(22px,2.2vw,26px)}
.razones p{color:var(--suave);font-size:16px}

/* ---------- Detrás de ALT ---------- */
.detras{background:var(--niebla);--fondo:var(--niebla);--caja:var(--blanco)}
.detras__grilla{display:grid;gap:clamp(36px,6vw,80px);align-items:center}
@media (min-width:900px){.detras__grilla.con-foto{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.retrato{max-width:460px;width:100%}
@media (max-width:899px){.retrato{max-width:300px;order:2}}
.retrato img,.retrato__reservado{width:100%;aspect-ratio:4/5;border-radius:var(--radio);object-fit:cover}
.retrato__reservado{display:flex;align-items:flex-end;padding:20px;border:1.5px dashed #c9c9ce;color:var(--gris);background:repeating-linear-gradient(110deg,#e9e9eb 0 22px,#e4e4e7 22px 23px)}
.retrato__reservado .mono{font-size:10px}
.detras__texto{display:flex;flex-direction:column;gap:18px;max-width:60ch;min-width:0}
.detras__texto h2{margin-bottom:6px}
.detras__texto .destacado{font-size:clamp(19px,2vw,22px);font-weight:600;letter-spacing:-.015em;line-height:1.45}
.detras__texto p:not(.etiqueta):not(.destacado){color:#3b3b42}

/* ---------- Preguntas ---------- */
.preguntas__grilla{display:grid;gap:8px}
@media (min-width:960px){.preguntas__grilla{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:72px;align-items:start}.preguntas .encabezado{position:sticky;top:calc(var(--alto-cabecera) + 40px)}}
.preguntas h2{font-size:clamp(34px,4.4vw,52px)}
.acordeon{border-top:1.5px solid var(--tinta)}
.acordeon details{border-bottom:1px solid var(--borde)}
.acordeon summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font-weight:600;font-size:clamp(17px,1.8vw,19px);letter-spacing:-.01em;line-height:1.35}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;transition:transform .25s ease}
.acordeon details[open] summary::after{transform:rotate(45deg)}
.acordeon details p{padding:0 40px 24px 0;color:var(--suave);max-width:60ch}

/* ---------- Contacto ---------- */
.contacto{position:relative;overflow:hidden}
.contacto::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(110deg,transparent 0 46px,rgba(255,255,255,.035) 46px 47px)}
.contacto .envoltura{position:relative}
.contacto__titulo{font-size:clamp(40px,6vw,76px)}
.contacto .encabezado{gap:14px;margin-bottom:32px}
.contacto .encabezado h2{margin-bottom:10px}
.contacto__grilla{display:grid;gap:40px}
@media (min-width:960px){.contacto__grilla{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}}
.contacto__texto{display:flex;flex-direction:column;min-width:0}
.via{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,3vw,26px);border:1px solid var(--borde);border-radius:var(--radio);background:color-mix(in srgb,var(--carbon) 70%,transparent);min-width:0;max-width:460px}
.via__dato{font-size:clamp(19px,2vw,22px);font-weight:600;letter-spacing:-.02em;overflow-wrap:anywhere;min-height:1.4em;user-select:all}
.via__dato.pendiente{color:var(--suave);font-weight:500;font-style:normal;user-select:none}
.via__dato.pendiente::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rojo);margin-right:10px;vertical-align:middle;transform:translateY(-2px)}
.via__acciones{display:flex;gap:8px;flex-wrap:wrap}

/* Formulario */
.formulario{display:flex;flex-direction:column;gap:18px;padding:clamp(22px,3.4vw,36px);border:1px solid var(--borde);border-radius:var(--radio);background:var(--caja);min-width:0}
.campo{display:flex;flex-direction:column;gap:8px}
.campo label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--suave)}
.campo input,.campo select,.campo textarea{width:100%;font:inherit;font-size:16px;color:var(--texto);background:var(--fondo);border:1px solid #34343a;border-radius:12px;padding:13px 14px;line-height:1.4;transition:border-color .2s,box-shadow .2s;color-scheme:dark}
.campo textarea{resize:vertical;min-height:132px}
.campo input::placeholder,.campo textarea::placeholder{color:#6b6b72}
.campo select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:linear-gradient(45deg,transparent 50%,#9d9da2 50%),linear-gradient(135deg,#9d9da2 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
.campo select:invalid{color:#6b6b72}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--texto);box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.campo select.elegido{border-color:var(--texto);box-shadow:0 0 0 3px rgba(255,255,255,.16)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.formulario__enviar{align-self:flex-start;margin-top:4px}
.formulario__enviar[disabled]{opacity:.6;cursor:progress}
.formulario__estado{font-size:15px;line-height:1.5;padding:12px 14px;border-radius:12px;background:#1f1f24}
.formulario__estado--ok{background:#13281c;color:#8fd4a8}
.formulario__estado--error{background:#2b1416;color:#f2a3a7}

/* ---------- Pie ---------- */
.pie{border-top:1px solid #26262b;padding-block:28px calc(28px + env(safe-area-inset-bottom,0px))}
.pie__fila{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.pie .mono{color:var(--suave);font-size:10.5px}
.logo-mini--pie .logo-mini__alt{font-size:18px}

/* ---------- Aviso breve ---------- */
.aviso{position:fixed;z-index:70;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);max-width:calc(100% - 32px);width:max-content;background:var(--tinta);color:var(--blanco);padding:12px 18px;border-radius:12px;font-size:14.5px;line-height:1.4;box-shadow:0 12px 32px -10px rgba(0,0,0,.5);border:1px solid #2a2a2f}

/* ---------- Aparición suave al desplazarse ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .aparece{animation:aparece .8s cubic-bezier(.2,.7,.2,1) both;animation-play-state:paused}
  .js .aparece.en-vista{animation-play-state:running}
  @keyframes aparece{from{opacity:.001;transform:translateY(22px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}