/* Pandemonium (PNDM) · hoja única del sitio.
   Regla: ningún color fuera de :root. Si aparece un # abajo, es un bug.
   Contrastes calculados (WCAG) en README.md > Tokens. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --grafito: #17191C;      /* tinta y fondo oscuro · 17,0:1 sobre papel */
  --niebla: #EDEEEA;       /* fondo alterno · 15,1:1 con grafito */
  --papel: #FBFBF9;        /* fondo de página */
  --chispa: #E8540C;       /* acento: el nodo del símbolo. NUNCA texto chico sobre claro (3,55:1) */
  --chispa-tinta: #A83C08; /* acento cuando es texto sobre claro · 6,1:1 papel, 5,4:1 niebla */
  --acero: #5D646B;        /* texto secundario · 5,8:1 papel, 5,2:1 niebla */
  --linea: #D0D1CC;        /* filetes (no es texto) */
  --error: #B42318;        /* 6,4:1 papel */
  --bien: #1F6B3A;         /* 6,3:1 papel */
  --pendiente-fondo: #FFF1B8;
  --pendiente-borde: #7A5C00;

  --ancho: 72rem;
  --radio: 4px;
  --t-cuerpo: 1.0625rem;
  --t-chico: 0.875rem;
  --expandida: 118%;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--grafito);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-cuerpo);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--grafito); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--chispa); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 {
  font-stretch: var(--expandida);
  font-weight: 620;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; text-wrap: pretty; }

.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--grafito); color: var(--papel); padding: 0.75rem 1rem; border-radius: var(--radio);
}
.saltar:focus { top: 1rem; }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; }

/* ---------- cabecera ---------- */
.cabecera { border-bottom: 1px solid var(--linea); background: var(--papel); }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; flex-wrap: wrap; }
.marca { display: inline-flex; align-items: center; min-height: 44px; }
.marca svg { height: 1.9rem; width: auto; }
.nav { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.75rem;
  text-decoration: none; font-weight: 500; border-radius: var(--radio);
}
.nav a:hover { background: var(--niebla); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--chispa); border-radius: 0; }

/* ---------- botones ---------- */
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 48px; padding: 0.7rem 1.25rem;
  font: inherit; font-weight: 600; font-stretch: 105%;
  border: 1.5px solid var(--grafito); border-radius: var(--radio);
  text-decoration: none; cursor: pointer; line-height: 1.2;
}
.boton-principal { background: var(--grafito); color: var(--papel); }
.boton-principal:hover { background: var(--papel); color: var(--grafito); }
.boton-secundario { background: transparent; color: var(--grafito); }
.boton-secundario:hover { background: var(--niebla); }
.boton svg { width: 1.2rem; height: 1.2rem; flex: none; }

/* ---------- secciones ---------- */
.seccion { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; border-top: 1px solid var(--linea); }
.seccion-alterna { background: var(--niebla); }
.volanta {
  font-size: var(--t-chico); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--chispa-tinta); margin-bottom: 1rem;
}
.bajada { font-size: 1.2rem; color: var(--grafito); max-width: 38em; }
.nota { font-size: var(--t-chico); color: var(--acero); }
.angosto { max-width: 42rem; }

/* hero */
.hero { padding: clamp(2rem, 1.25rem + 3vw, 4.5rem) 0 clamp(3rem, 2rem + 4vw, 5rem); }
.hero-grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (min-width: 60rem) { .hero-grilla { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 4rem; } }
.hero h1 { max-width: 16em; }

/* ficha "en marcha" del hero */
.ficha { border: 1px solid var(--grafito); border-radius: var(--radio); background: var(--papel); }
.ficha-titulo {
  margin: 0; padding: 0.7rem 1rem; border-bottom: 1px solid var(--grafito);
  font-size: var(--t-chico); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.ficha ul { list-style: none; margin: 0; padding: 0; }
.ficha li + li { border-top: 1px solid var(--linea); }
.ficha a { display: block; padding: 1rem; text-decoration: none; }
.ficha a:hover { background: var(--niebla); }
.ficha strong { display: block; font-stretch: var(--expandida); font-weight: 620; font-size: 1.1rem; }
.ficha span { display: block; color: var(--acero); font-size: 0.95rem; margin-top: 0.2rem; }
.ficha .estado { display: inline-block; margin-top: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--grafito); border: 1px solid var(--grafito); padding: 0.1rem 0.45rem; border-radius: 2px; }

/* lista numerada de servicios (filas, no tarjetas) */
.filas { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--grafito); }
.filas > li { display: grid; gap: 0.5rem 2rem; padding: 1.75rem 0; border-bottom: 1px solid var(--linea); }
@media (min-width: 48rem) { .filas > li { grid-template-columns: 4rem minmax(0, 14rem) minmax(0, 1fr); } }
.numero { font-stretch: 125%; font-weight: 700; color: var(--chispa-tinta); font-size: 1rem; letter-spacing: 0.04em; }
.filas h3 { margin: 0; font-size: 1.35rem; }
.filas p { margin: 0 0 0.6rem; }
.filas .nota { margin: 0; }

/* productos */
.productos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 52rem) { .productos { grid-template-columns: 1fr 1fr; } }
.producto { border: 1px solid var(--linea); background: var(--papel); border-radius: var(--radio); padding: 1.5rem; display: flex; flex-direction: column; }
.producto h3 { font-size: 1.5rem; }
.producto .enlace-fuerte { margin-top: auto; }
.producto figure { margin: 0 0 1.25rem; }
.enlace-fuerte { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* pasos */
.pasos { list-style: none; counter-reset: paso; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 48rem) { .pasos { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.pasos li { counter-increment: paso; padding: 1.25rem 0 1.25rem 3rem; border-top: 1px solid var(--linea); position: relative; }
.pasos li::before {
  content: counter(paso, decimal-leading-zero); position: absolute; left: 0; top: 1.3rem;
  font-stretch: 125%; font-weight: 700; color: var(--chispa-tinta); font-size: 0.95rem;
}
.pasos strong { display: block; margin-bottom: 0.2rem; }

/* dos columnas genérico */
.dos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 56rem) { .dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; } }

/* figuras con rótulo honesto */
figure { margin: 0; }
figcaption { font-size: var(--t-chico); color: var(--acero); margin-top: 0.6rem; }
.figura-oscura { background: var(--grafito); border-radius: var(--radio); padding: 1.5rem 1.5rem 0.25rem; }
.figura-oscura img { margin: 0 auto; border-radius: 2px; }
.figura-oscura figcaption { color: var(--niebla); padding-bottom: 1rem; }

/* lista con marcadores sobrios */
.lista { margin: 1rem 0 0; padding: 0; list-style: none; }
.lista li { padding: 0.55rem 0 0.55rem 1.4rem; position: relative; border-top: 1px solid var(--linea); }
.lista li:last-child { border-bottom: 1px solid var(--linea); }
.lista li::before { content: ""; position: absolute; left: 0.1rem; top: 1.15rem; width: 0.55rem; height: 2px; background: var(--grafito); }

/* rubros como texto */
.rubros { display: grid; gap: 0; margin-top: 1.5rem; border-top: 1px solid var(--grafito); }
@media (min-width: 48rem) { .rubros { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.rubros div { padding: 1.1rem 0; border-bottom: 1px solid var(--linea); }
.rubros dt { font-weight: 700; font-stretch: 110%; }
.rubros dd { margin: 0.25rem 0 0; color: var(--grafito); }

/* preguntas */
.preguntas details { border-top: 1px solid var(--linea); }
.preguntas details:last-child { border-bottom: 1px solid var(--linea); }
.preguntas summary { cursor: pointer; min-height: 48px; padding: 1rem 2rem 1rem 0; font-weight: 600; list-style: none; position: relative; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0.85rem; font-size: 1.3rem; font-weight: 500; }
.preguntas details[open] summary::after { content: "\2212"; }
.preguntas details p { padding-bottom: 0.5rem; max-width: 44em; }

/* límites: lo que no hace */
.limites { border-left: 3px solid var(--grafito); padding: 0.25rem 0 0.25rem 1.25rem; }

/* contacto */
.contacto-datos { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.contacto-datos li { padding: 0.8rem 0; border-top: 1px solid var(--linea); display: grid; gap: 0.15rem; }
.contacto-datos li:last-child { border-bottom: 1px solid var(--linea); }
.contacto-datos .rotulo { font-size: var(--t-chico); color: var(--acero); }
.contacto-datos a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 1.1rem; }

/* marcas pendientes: tienen que verse, a propósito */
.pendiente {
  display: inline; background: var(--pendiente-fondo); color: var(--grafito);
  outline: 1.5px dashed var(--pendiente-borde); outline-offset: 1px;
  font-size: 0.8em; font-weight: 600; padding: 0.05rem 0.35rem; border-radius: 2px;
}
.aviso-borrador {
  background: var(--pendiente-fondo); border: 1.5px dashed var(--pendiente-borde);
  padding: 1rem 1.25rem; border-radius: var(--radio); margin-bottom: 2rem;
}

/* ---------- formulario ---------- */
.formulario { display: grid; gap: 1.4rem; }
.campo { display: grid; gap: 0.4rem; }
.campo label, .campo legend { font-weight: 600; }
.campo .ayuda { font-size: var(--t-chico); color: var(--acero); margin: 0; }
.opcional { font-weight: 400; color: var(--acero); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  font: inherit; color: var(--grafito); background: var(--papel);
  min-height: 48px; padding: 0.6rem 0.8rem; width: 100%;
  border: 1.5px solid var(--acero); border-radius: var(--radio);
}
textarea { min-height: 6rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--chispa); outline-offset: 1px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.opciones { display: grid; gap: 0.25rem; margin-top: 0.3rem; }
@media (min-width: 30rem) { .opciones { grid-template-columns: 1fr 1fr; } }
.opcion { display: flex; align-items: center; gap: 0.65rem; min-height: 44px; font-weight: 400; cursor: pointer; }
.opcion input { width: 1.25rem; height: 1.25rem; accent-color: var(--grafito); flex: none; margin: 0; }
.campo-invalido input, .campo-invalido select, .campo-invalido textarea { border-color: var(--error); border-width: 2px; }
.error { display: none; color: var(--error); font-size: 0.95rem; font-weight: 600; margin: 0; }
.campo-invalido .error { display: flex; gap: 0.4rem; align-items: flex-start; }
.error::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--error); color: var(--papel); font-size: 0.8rem; margin-top: 0.15rem; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.estado-envio { padding: 1rem 1.25rem; border-radius: var(--radio); border: 2px solid var(--error); display: none; }
.estado-envio.visible { display: block; }
.estado-envio p:last-child { margin: 0; }
.caja-form { background: var(--papel); border: 1px solid var(--grafito); border-radius: var(--radio); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }

/* confirmación */
.confirmacion { border-left: 4px solid var(--bien); padding-left: 1.25rem; }
.sello-ok { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--bien); margin-bottom: 1rem; }

/* texto legal */
.legal h2 { font-size: 1.35rem; margin-top: 2.5rem; }
.legal h3 { font-size: 1.1rem; margin-top: 1.75rem; }
.legal li { margin-bottom: 0.4rem; }
.legal table { border-collapse: collapse; width: 100%; font-size: 0.95rem; margin: 1rem 0 1.5rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--linea); }
.legal th { border-bottom: 1px solid var(--grafito); }
.tabla-ancha { overflow-x: auto; }
.cita-aaip { border-left: 3px solid var(--linea); padding-left: 1rem; color: var(--grafito); }

/* ---------- pie ---------- */
.pie { background: var(--grafito); color: var(--niebla); padding: 3rem 0 2rem; }
.pie a { color: var(--niebla); }
.pie .envoltura { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .pie .envoltura { grid-template-columns: 1.4fr 1fr 1fr; } }
.pie svg { height: 1.7rem; width: auto; }
.pie h2 { font-size: var(--t-chico); letter-spacing: 0.08em; text-transform: uppercase; font-stretch: 100%; font-weight: 600; margin-bottom: 0.6rem; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li a { display: inline-flex; align-items: center; min-height: 44px; }
.pie .pie-legal { grid-column: 1 / -1; border-top: 1px solid var(--acero); padding-top: 1.25rem; font-size: var(--t-chico); color: var(--niebla); }
.pie .pendiente { color: var(--grafito); }

/* ---------- CTA fijo en celular ---------- */
.cta-fijo { display: none; }
@media (max-width: 47.99rem) {
  body.con-cta-fijo { padding-bottom: 5rem; }
  .cta-fijo {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
    background: var(--papel); border-top: 1px solid var(--grafito);
  }
  .cta-fijo .boton { width: 100%; }
}

/* 404 */
.error-404 { min-height: 55vh; display: flex; align-items: center; }
.codigo-404 { font-stretch: 125%; font-weight: 700; font-size: 1rem; letter-spacing: 0.08em; color: var(--chispa-tinta); }

/* video promo (termovigía): vertical en el celu, horizontal desde 48rem; sin autoplay */
.video-promo { display: block; margin-top: 1.5rem; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); }
.video-v { width: auto; height: auto; max-width: 100%; max-height: 80svh; aspect-ratio: 9 / 16; margin-inline: auto; }
.video-h { display: none; width: 100%; height: auto; aspect-ratio: 16 / 9; max-width: 56rem; }
@media (min-width: 48rem) { .video-v { display: none; } .video-h { display: block; } }

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

@media print {
  .cabecera .nav, .cta-fijo, .acciones { display: none; }
  .pie { background: none; color: var(--grafito); }
}
.pie-lema { margin-top: 1rem; }
.img-celu { max-height: 20rem; width: auto; }
.ficha-lista li { padding: 1rem; }
.logo-producto { height: 2.75rem; width: auto; margin-bottom: 1.5rem; }
code { font-size: 0.9em; overflow-wrap: anywhere; }
.lista-enlaces li { padding: 0 0 0 1.4rem; }
.lista-enlaces li::before { top: 1.45rem; }
.lista-enlaces a { display: flex; align-items: center; min-height: 48px; }
.ficha .estado { font-style: normal; }
@media (max-width: 29.99rem) {
  .solo-ancho { display: none; }
  .cabecera .envoltura { gap: 0.25rem; padding-top: 0.25rem; }
  .nav { margin-left: -0.75rem; }
}
/* ejemplo antes/después de listas de precios */
.ejemplo-lista { margin: 0 0 1.25rem; border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; background: var(--papel); }
.ej-rotulo { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acero); margin: 0 0 0.4rem; text-align: left; }
.ej-antes { background: var(--niebla); border-radius: 2px; padding: 0.75rem; margin-bottom: 1rem; }
.ej-crudo { margin: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.8rem; line-height: 1.6; overflow-wrap: anywhere; }
.ej-tabla { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.ej-tabla th, .ej-tabla td { text-align: left; padding: 0.4rem 0.45rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.ej-tabla th { border-bottom: 1px solid var(--grafito); font-weight: 600; }
.ej-tabla td:nth-child(3), .ej-tabla td:nth-child(4), .ej-tabla th:nth-child(3), .ej-tabla th:nth-child(4) { text-align: right; white-space: nowrap; }
.ej-revisar td { font-weight: 700; }
.ej-revisar td:last-child { color: var(--error); }
p + .limites { margin-top: 2rem; }
.producto .figura-oscura .img-celu { max-height: 15rem; }
@media (max-width: 29.99rem) { .ej-tabla th:first-child, .ej-tabla td:first-child { display: none; } }
.envoltura.angosto { max-width: var(--ancho); }
.envoltura.angosto > * { max-width: 44rem; }
.acciones + .nota { margin-top: 1rem; }
.cta-fijo[hidden] { display: none; }
.enlaces-fila { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
/* En el celu el menú entra en un renglón: Contacto queda en el botón fijo de WhatsApp y en el pie. */
@media (max-width: 29.99rem) { .nav a[href="/#contacto"] { display: none; } .nav a { padding: 0 0.5rem; } .nav { margin-left: -0.5rem; } }
.ficha > .nota { margin: 0; padding: 0.75rem 1rem 1rem; }
/* ---------- botón "Termovigía en 3D" de la cabecera (todas las páginas) ---------- */
.boton-3d {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; min-width: 44px; padding: 0 0.85rem;
  border: 2px solid var(--grafito); border-radius: var(--radio); background: var(--grafito); color: var(--papel);
  font-weight: 600; text-decoration: none; white-space: nowrap; order: 3;
}
.boton-3d:hover { background: var(--papel); color: var(--grafito); }
.boton-3d svg { width: 1.25rem; height: 1.25rem; flex: none; stroke: var(--chispa); }
.cabecera .nav { order: 2; }
@media (max-width: 47.99rem) {
  .boton-3d { order: 2; margin-left: auto; }
  .cabecera .nav { order: 3; flex-basis: 100%; }
}
/* ---------- /termovigia/placas/ ---------- */
.pl-cabeza { border-top: 0; padding-bottom: 1.5rem; }
.pl-sec { padding: 2.5rem 0; }
.pl-miga { font-size: var(--t-chico); color: var(--acero); margin: 0 0 0.75rem; }
.pl-miga a { color: inherit; display: inline-flex; min-height: 44px; align-items: center; }
.pl-rev { font-size: 0.5em; color: var(--acero); font-weight: 500; white-space: nowrap; }
.pl-estado { border-left: 4px solid var(--acero); padding: 0.6rem 0.9rem; background: var(--niebla); max-width: 44rem; }
.pl-estado-ok { border-left-color: var(--bien); }
.pl-estado-pend { border-left-color: var(--chispa); }
.pl-saltos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.pl-saltos a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--linea); border-radius: 999px; text-decoration: none; font-weight: 600; }
.pl-tarjetas { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.pl-tarjeta { display: block; border: 2px solid var(--grafito); border-radius: var(--radio); overflow: hidden; text-decoration: none; color: var(--grafito); background: var(--papel); }
.pl-tarjeta:hover, .pl-tarjeta:focus-visible { box-shadow: 0 0 0 3px var(--chispa); }
.pl-tarjeta img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--grafito); }
.pl-t-cuerpo { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.1rem 1.2rem; }
.pl-t-nombre { font-size: 1.5rem; font-weight: 700; font-stretch: var(--expandida); line-height: 1.15; }
.pl-t-dato { color: var(--acero); }
.pl-t-estado { font-weight: 600; padding-left: 0.6rem; border-left: 4px solid var(--acero); }
.pl-t-estado.pl-estado-ok { border-left-color: var(--bien); }
.pl-t-estado.pl-estado-pend { border-left-color: var(--chispa); }
.pl-t-ir { margin-top: 0.4rem; font-weight: 700; color: var(--chispa-tinta); }
.pl-t-ir::after { content: " →"; }
.pl-visor { position: relative; }
.pl-lienzo { position: relative; width: 100%; height: min(70vh, 34rem); min-height: 18rem; background: var(--grafito); border-radius: var(--radio); overflow: hidden; touch-action: none; }
.pl-lienzo canvas { display: block; width: 100%; height: 100%; }
.pl-poster { width: 100%; height: 100%; object-fit: contain; display: block; }
.pl-visor:not(.pl-listo) .pl-lienzo { touch-action: auto; }
.pl-cargar { position: absolute; left: 50%; top: calc(min(70vh, 34rem) / 2); transform: translate(-50%, -50%); min-height: 52px; padding: 0 1.4rem; box-shadow: 0 0 0 3px var(--papel); }
.pl-cargar:disabled { opacity: 0.85; }
.pl-peso { font-weight: 400; font-size: 0.85em; }
.pl-estado-visor:not(:empty) { margin-top: 0.6rem; padding: 0.6rem 0.9rem; background: var(--niebla); border-radius: var(--radio); font-weight: 600; }
.pl-controles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-top: 0.75rem; }
.pl-controles[hidden] { display: none; }
.pl-controles .boton { min-height: 48px; padding: 0 0.4rem; justify-content: center; }
@media (max-width: 22.5rem) { .pl-controles { grid-template-columns: repeat(2, 1fr); } }
.pl-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.75rem; margin: 1.5rem 0 0; }
.pl-datos div { border-top: 2px solid var(--grafito); padding-top: 0.5rem; }
.pl-datos dt { font-size: var(--t-chico); color: var(--acero); }
.pl-datos dd { margin: 0.15rem 0 0; font-weight: 600; }
.pl-galeria { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.pl-galeria li { padding: 0; }
.pl-galeria li::before { content: none; }
.pl-mini { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; text-decoration: none; color: var(--grafito); background: var(--papel); }
.pl-mini:hover, .pl-mini:focus-visible { border-color: var(--grafito); }
.pl-mini img { display: block; width: 100%; height: auto; }
.pl-mini span { padding: 0.6rem 0.75rem; min-height: 44px; display: flex; align-items: center; gap: 0.3rem; border-top: 1px solid var(--linea); font-weight: 500; }
.pl-hojas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
@media (max-width: 29.99rem) { .pl-galeria { grid-template-columns: 1fr 1fr; } .pl-mini span { font-size: 0.85rem; padding: 0.5rem; } }
.pl-pdfs a { overflow-wrap: anywhere; }
.pl-otra { margin-top: 2rem; }
.pl-sin-scroll, .pl-sin-scroll body { overflow: hidden; }
.pl-zoom { position: fixed; inset: 0; z-index: 100; background: var(--grafito); color: var(--papel); display: flex; flex-direction: column; }
.pl-zoom[hidden] { display: none; }
.pl-zoom-barra { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.5rem; background: var(--grafito); }
.pl-zoom-titulo { flex: 1; margin: 0; font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 0.4rem; }
.pl-zoom-b { min-width: 48px; min-height: 48px; border: 1px solid var(--acero); border-radius: var(--radio); background: transparent; color: var(--papel); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.pl-zoom-cerrar { background: var(--papel); color: var(--grafito); border-color: var(--papel); }
.pl-zoom-area { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; background: var(--papel); }
.pl-zoom-area img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; user-select: none; -webkit-user-drag: none; }
.pl-zoom-estado:not(:empty) { position: absolute; inset: auto 1rem 1rem; margin: 0; padding: 0.75rem 1rem; background: var(--grafito); color: var(--papel); border-radius: var(--radio); text-align: center; }
.pl-cargar[hidden], .pl-visor [hidden] { display: none; }

/* =====================================================================
   MOVIMIENTO (1-oct-2026, @diseno). Reglas:
   - Solo transform y opacity en lo que corre en bucle (compositor, 60 fps en celular).
   - Lo que entra al scroll lo marca sitio.js con .por-ver SOLO si está debajo del pliegue:
     sin JS o sin IntersectionObserver, todo se ve quieto y completo.
   - prefers-reduced-motion: todo quieto y en su estado final (bloque al final).
   - Los bucles se frenan fuera de pantalla (.dormido) y con los botones Pausar (WCAG 2.2.2).
   ===================================================================== */

/* ---------- hero oscuro con el símbolo vivo ---------- */
.hero-vivo { background: var(--grafito); color: var(--papel); overflow: hidden; }
.hero-vivo h1 { color: var(--papel); }
.hero-vivo .volanta { color: var(--chispa); }            /* chispa sobre grafito: 4,8:1 */
.hero-vivo .bajada { color: var(--niebla); }
.hero-vivo .boton-principal { background: var(--papel); color: var(--grafito); border-color: var(--papel); transition: background-color .2s, border-color .2s; }
.hero-vivo .boton-principal:hover { background: var(--chispa); border-color: var(--chispa); color: var(--grafito); }
.hero-vivo .boton-secundario { color: var(--papel); border-color: var(--niebla); transition: background-color .2s, color .2s; }
.hero-vivo .boton-secundario:hover { background: var(--papel); color: var(--grafito); }
@media (min-width: 60rem) { .hero-vivo .hero-grilla { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 3rem; align-items: center; } }

.hero-simbolo { width: 100%; max-width: 34rem; margin-inline: auto; }
.simbolo-vivo { width: 100%; height: auto; overflow: visible; }
/* en el celu el símbolo va chico arriba a la derecha: se ve sin scrollear y no empuja el botón */
@media (max-width: 59.99rem) {
  .hero-vivo .hero-grilla { position: relative; }
  .hero-simbolo { position: absolute; top: -0.35rem; right: 1.25rem; width: 6.25rem; margin: 0; }
  .hero-vivo .volanta { max-width: calc(100% - 7rem); }
}

.sv-traza { fill: none; stroke: var(--acero); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.sv-pulso { fill: none; stroke: var(--chispa); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 9 91; stroke-dashoffset: 100; opacity: 0; }
.sv-corchete { fill: none; stroke: var(--papel); stroke-width: 31; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1.2; stroke-dashoffset: 0; }
.sv-nodo { fill: var(--chispa); transform-box: fill-box; transform-origin: center; }
.sv-onda { fill: none; stroke: var(--chispa); stroke-width: 3; transform-box: fill-box; transform-origin: center; opacity: 0; }

/* el trazo se dibuja, el nodo aparece y empieza a latir, la señal pasa por el medio */
.sv-corchete { animation: sv-dibujar 0.95s cubic-bezier(.65,0,.35,1) 0.15s both; }
.sv-corchete-der { animation-delay: 0.3s; }
.sv-nodo { animation: sv-asomar 0.55s cubic-bezier(.34,1.56,.64,1) 1s both, sv-latir 2.4s ease-in-out 1.6s infinite; }
.sv-onda { animation: sv-onda 2.4s cubic-bezier(.2,.6,.3,1) 1.6s infinite; }
.sv-pulso { animation: sv-pulso 3.6s linear 1.4s infinite; }
.sv-traza { animation: sv-aparecer 0.8s ease 0.6s both; }

@keyframes sv-dibujar { from { stroke-dashoffset: 1.05; } to { stroke-dashoffset: 0; } }
@keyframes sv-asomar { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes sv-latir { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.12); } 24% { transform: scale(1); } }
@keyframes sv-onda { 0% { transform: scale(1); opacity: 0.85; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes sv-pulso { 0% { stroke-dashoffset: 100; opacity: 1; } 92% { opacity: 1; } 100% { stroke-dashoffset: -2; opacity: 0; } }
@keyframes sv-aparecer { from { opacity: 0; } to { opacity: 1; } }

/* el texto entra escalonado (corto: el H1 es el LCP) */
.entra { animation: entra 0.7s cubic-bezier(.2,.7,.2,1) both; }
.entra-1 { animation-delay: 0.05s; }
.entra-2 { animation-delay: 0.12s; }
.entra-3 { animation-delay: 0.24s; }
.entra-4 { animation-delay: 0.36s; }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- botón de pausa (cinta y carrusel) ---------- */
.boton-pausa {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.85rem;
  font: inherit; font-size: var(--t-chico); font-weight: 600; color: var(--grafito);
  background: transparent; border: 1.5px solid var(--grafito); border-radius: var(--radio); cursor: pointer;
}
.boton-pausa:hover { background: var(--grafito); color: var(--papel); }
.pausa-icono { width: 0.7rem; height: 0.8rem; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.boton-pausa[aria-pressed="true"] .pausa-icono {
  border: 0; width: 0; height: 0; border-left: 0.7rem solid currentColor;
  border-top: 0.42rem solid transparent; border-bottom: 0.42rem solid transparent;
}

/* ---------- cinta de trabajos hechos (fichas uniformes, 6-oct-2026) ----------
   Cada trabajo es una ficha del MISMO ancho: marca arriba (franja de alto fijo), título corto
   en negrita (hasta 2 renglones) y una línea chica de contexto. El detalle largo vive en
   <details class="cinta-detalle"> debajo: la cinta se lee de un vistazo, nada se pierde. */
.trabajos { background: var(--niebla); border-bottom: 1px solid var(--linea); padding: 0.9rem 0 0.75rem; }
.trabajos-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.trabajos-titulo { font-size: var(--t-chico); font-stretch: 100%; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; color: var(--acero); }
.cinta { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
/* ~51 px/s con 13 fichas (si se suman fichas, subir la duración en proporción: 5 s por ficha): se alcanza a leer una ficha entera mientras cruza */
.cinta-pista { display: flex; width: max-content; animation: cinta 65s linear infinite; }
.cinta-lista { display: flex; list-style: none; margin: 0; padding: 0; }
/* el espacio entre fichas es margen de cada li (también el último): las dos listas miden
   exactamente lo mismo y el salto de -50 % cae justo en el mismo cuadro */
.cinta-lista li { display: flex; flex-direction: column; flex: none; box-sizing: border-box; width: 15rem; margin-right: 1rem;
  padding: 0; background: var(--papel); border: 1px solid var(--linea); border-radius: 6px; }
/* 16-oct-2026: cada ficha es un enlace a su detalle en /trabajos/ (el duplicado de la animación va con tabindex -1) */
.cinta-enlace { display: flex; flex-direction: column; flex: 1 1 auto; padding: 0.85rem 1rem 0.9rem; color: inherit; text-decoration: none; border-radius: 5px; }
.cinta-enlace:hover .cinta-titulo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.cinta-enlace:focus-visible { outline-offset: -3px; }
.cinta:focus-within .cinta-pista { animation-play-state: paused; }
.cinta-ver { font-size: var(--t-chico); }
/* sin logo público (Villatoro, búsqueda web 16-oct): el nombre tipografiado, sin imitar un logo */
.marca-texto { font-stretch: 125%; font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em; color: var(--grafito); }
/* franja de marca: mismo alto para todas; cada logo a su alto óptico (área parecida, no alto
   igual: un logo ancho como Bunge a 2 rem pesa el triple que Mundo Outdoor). Archivos = 80 px de alto. */
.cinta-marca { display: flex; align-items: center; height: 2.75rem; margin-bottom: 0.7rem; }
.cinta-marca img { display: block; width: auto; max-width: 100%; height: 2rem; }
.marca-emsica img { height: 2rem; }
.marca-paradise img { height: 1.4rem; }
.marca-bunge img { height: 1.65rem; }
.marca-ldc img { height: 2.3rem; }
.marca-mundo img { height: 2.75rem; }
.marca-gimap img { height: 2.15rem; }
/* Barone: su logo es un sello negro sobre su amarillo (de su perfil público); va como chip, igual que Dosis */
.marca-barone img { height: 2.3rem; border-radius: 3px; }
.marca-eurotaller img { height: 2.75rem; border-radius: 3px; }
/* dos sellos en una ficha (6-oct-2026): destino a la izquierda, quien encargó o quien desarrolla
   a la derecha, más chico y tras un filete. Entra en los 13 rem útiles de la ficha (medido). */
.marca-doble { gap: 0.6rem; }
.marca-sep { flex: none; width: 1px; height: 1.6rem; background: var(--linea); }
.marca-doble img { min-width: 0; flex: 0 1 auto; object-fit: contain; object-position: left center; }
.marca-doble.marca-bunge img:first-child { height: 1.35rem; }
.marca-doble.marca-ldc img:first-child { height: 2.1rem; }
.marca-doble.marca-bunge .marca-bleyssol { height: 1.1rem; }
.marca-doble.marca-ldc .marca-gimap { height: 1.6rem; }
.marca-doble.marca-mundo .marca-montagne { height: 2.1rem; }
/* Dosis trae su propio fondo negro: un poco más bajo para que el bloque no pese más que el resto */
.marca-dosis img { height: 1.75rem; border-radius: 3px; }
/* sin logo: ícono de línea en un cuadrado del alto de la franja */
.cinta-icono { width: 2.75rem; justify-content: center; border: 1px solid var(--linea); border-radius: 6px; color: var(--grafito); }
.cinta-icono svg { width: 1.4rem; height: 1.4rem; }
.cinta-titulo { color: var(--grafito); font-stretch: 105%; font-weight: 650; font-size: 1rem; line-height: 1.25; }
.cinta-contexto { margin-top: 0.3rem; color: var(--acero); font-size: var(--t-chico); line-height: 1.35; }
.cinta-pie { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 1.5rem; margin-top: 0.35rem; }
.cinta-aviso { margin: 0; font-size: 0.8rem; color: var(--acero); }
.cinta-detalle { font-size: var(--t-chico); }
.cinta-detalle summary { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; color: var(--grafito);
  text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.cinta-detalle summary:hover { text-decoration-thickness: 2px; }
.cinta-detalle summary::-webkit-details-marker { display: none; }
.cinta-detalle summary::after { content: ""; width: 0.4em; height: 0.4em; margin: -0.2em 0 0 0.55em; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); }
.cinta-detalle[open] summary::after { margin-top: 0.25em; transform: rotate(-135deg); }
.cinta-detalle dl { margin: 0.25rem 0 0.75rem; display: grid; gap: 0.6rem; max-width: 46rem; }
.cinta-detalle dt { font-weight: 650; color: var(--grafito); }
.cinta-detalle dd { margin: 0.1rem 0 0; color: var(--acero); }
.cinta-detalle[open] { flex-basis: 100%; }
.cinta:hover .cinta-pista, .cinta.pausado .cinta-pista, .cinta.dormido .cinta-pista { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------- carrusel de servicios ---------- */
.seccion-servicios { border-top: 0; overflow: hidden; }
.carrusel-cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.carrusel-cabeza p { margin-bottom: 0; }
.carrusel-controles { display: flex; gap: 0.5rem; }
.boton-flecha {
  display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; cursor: pointer;
  background: var(--papel); color: var(--grafito); border: 1.5px solid var(--grafito); border-radius: var(--radio);
  transition: background-color .2s, color .2s;
}
.boton-flecha svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.boton-flecha:hover { background: var(--grafito); color: var(--papel); }
.boton-flecha[data-mover="-1"]:hover svg { transform: translateX(-3px); }
.boton-flecha[data-mover="1"]:hover svg { transform: translateX(3px); }
.boton-flecha:disabled { opacity: 0.35; cursor: default; background: var(--papel); color: var(--grafito); }
.boton-flecha:disabled svg { transform: none; }

/* La pista vive DENTRO de la envoltura (misma grilla que el resto) y recorta lo que sobra.
   2-oct-2026: antes salía a sangre hasta el borde de la ventana y la 4ª tarjeta quedaba cortada;
   el relleno derecho hacía que el último paso fuera de 56 px y las flechas parecían trabadas.
   El margen negativo de 0.5rem deja lugar a la sombra del hover sin salirse de la envoltura. */
.carrusel { margin-top: 2rem; }
.carrusel-pista {
  position: relative; list-style: none; margin: 0 -0.5rem; display: flex; gap: 1.25rem;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 0.5rem;
  padding: 0.75rem 0.5rem 1.5rem; overscroll-behavior-x: contain; scrollbar-width: none;
}
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista:focus-visible { outline-offset: -3px; }
.servicio { flex: 0 0 84%; scroll-snap-align: start; display: flex; }
@media (min-width: 40rem) { .servicio { flex-basis: calc((100% - 1.25rem) / 2); } }
@media (min-width: 60rem) { .servicio { flex-basis: calc((100% - 2.5rem) / 3); } }
.servicio > a {
  display: flex; flex-direction: column; width: 100%; text-decoration: none; color: var(--grafito);
  background: var(--papel); border: 1.5px solid var(--linea); border-radius: var(--radio); overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .35s;
}
.servicio > a:hover, .servicio > a:focus-visible { transform: translateY(-6px); border-color: var(--grafito); box-shadow: 0 14px 28px -18px var(--grafito); }
.servicio-cuerpo { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.25rem 1.25rem 1.1rem; flex: 1; }
.servicio-titulo { font-stretch: var(--expandida); font-weight: 650; font-size: 1.3rem; line-height: 1.15; }
.servicio-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: auto; padding-top: 0.6rem; }
.servicio .estado { font-style: normal; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--grafito); padding: 0.1rem 0.45rem; border-radius: 2px; }
.servicio .ir { font-weight: 650; display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.servicio .ir::after { content: "\2192"; display: inline-block; transition: transform .25s; }
.servicio > a:hover .ir::after, .servicio > a:focus-visible .ir::after { transform: translateX(5px); }
.servicio-nota { font-size: 0.8rem; color: var(--acero); }

/* ilustraciones de las tarjetas: se arman cuando la tarjeta entra en pantalla y reaccionan al hover */
.viz-marco { display: block; background: var(--grafito); padding: 1.1rem 1.25rem 0.9rem; }
.viz { width: 100%; height: auto; aspect-ratio: 320 / 150; overflow: hidden; }
.viz text { font-family: inherit; font-size: 13px; font-weight: 650; letter-spacing: 0.04em; }

.vt-banda { fill: var(--acero); opacity: 0.28; }
.vt-limite { stroke: var(--acero); stroke-width: 1.5; stroke-dasharray: 5 5; fill: none; }
.vt-linea { fill: none; stroke: var(--niebla); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 1.2; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.45,0,.2,1); }
.vt-punto { fill: var(--chispa); transform-box: fill-box; transform-origin: center; animation: sv-latir 1.6s ease-in-out infinite; }
.vt-texto { fill: var(--niebla); }
.vt-alerta { fill: var(--chispa); }

.vw-celu { fill: none; stroke: var(--niebla); stroke-width: 3; }
.vw-bloque { fill: var(--acero); transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s; }
.vw-b2 { fill: var(--niebla); opacity: 0.85; }
.vw-boton { fill: var(--chispa); transition: transform .4s cubic-bezier(.2,.7,.2,1); transform-box: fill-box; transform-origin: center; }
.vw-guia { stroke: var(--acero); stroke-width: 3; stroke-linecap: round; fill: none; opacity: 0.6; }
.vw-contenido { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.servicio > a:hover .vw-contenido { transform: translateY(-10px); }
.servicio > a:hover .vw-boton { transform: scale(1.08); }

.vs-eje { stroke: var(--acero); stroke-width: 2; }
.vs-barra { fill: var(--acero); transform-box: fill-box; transform-origin: bottom; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.vs-3 { fill: var(--chispa); }
.vs-texto { fill: var(--niebla); }
.servicio > a:hover .vs-1 { transform: scaleY(0.7); }
.servicio > a:hover .vs-2 { transform: scaleY(1.3); }
.servicio > a:hover .vs-4 { transform: scaleY(0.85); }

.vl-celda { fill: var(--acero); opacity: 0.7; }
.vl-marca { fill: var(--chispa); opacity: 1; }
.vl-fila { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.vl-texto { fill: var(--chispa); }
.servicio > a:hover .vl-3 { transform: translateX(6px); }

/* estado inicial (antes de entrar en pantalla): solo si sitio.js lo marcó */
.por-armar .vt-linea { stroke-dashoffset: 1.05; }
.por-armar .vw-bloque { transform: translateX(-18px); opacity: 0; }
.por-armar .vs-barra { transform: scaleY(0.05); }
.por-armar .vl-1 { transform: translate(-10px, 6px) rotate(-3deg); }
.por-armar .vl-2 { transform: translate(14px, -4px) rotate(2deg); }
.por-armar .vl-3 { transform: translate(-6px, 8px) rotate(-2deg); }
.vw-b2 { transition-delay: .08s; } .vw-b3 { transition-delay: .16s; } .vw-b4 { transition-delay: .24s; }
.vs-2 { transition-delay: .08s; } .vs-3 { transition-delay: .16s; } .vs-4 { transition-delay: .24s; }
.vl-2 { transition-delay: .1s; } .vl-3 { transition-delay: .2s; }
.servicio > a:hover .vw-bloque, .servicio > a:hover .vs-barra, .servicio > a:hover .vl-fila { transition-delay: 0s; }

/* ---------- revelado al scroll ---------- */
.revela { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.revela.por-ver { opacity: 0; transform: translateY(22px); }
.revela-hijos > * { transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.revela-hijos.por-ver > * { opacity: 0; transform: translateY(18px); }
.revela-hijos > :nth-child(2) { transition-delay: .1s; }
.revela-hijos > :nth-child(3) { transition-delay: .2s; }
.revela-hijos > :nth-child(4) { transition-delay: .3s; }
.revela-hijos > :nth-child(5) { transition-delay: .4s; }

/* filas: el número se enciende al entrar */
.filas .numero { transition: color .5s .35s; }
.filas.por-ver .numero { color: var(--linea); }

/* tarjetas de producto y enlaces fuertes: hover con intención (llevan a su página) */
.producto { transition: border-color .25s; }
.producto:hover { border-color: var(--grafito); }
.enlace-fuerte::after { content: "\2192"; margin-left: 0.35rem; display: inline-block; transition: transform .25s; }
.enlace-fuerte:hover::after { transform: translateX(4px); }

/* cómo trabajamos: una línea que se dibuja y los pasos que se encienden en orden */
.pasos-linea li { border-top: 0; padding-top: 1.6rem; transition: opacity .6s; }
.pasos-linea li::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grafito);
  transform-origin: left; transition: transform .8s cubic-bezier(.65,0,.35,1);
}
.pasos-linea li::before { top: 1.65rem; transition: color .4s; }
@media (min-width: 48rem) {
  .pasos-linea { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.5rem; }
  .pasos-linea li { padding-left: 0; padding-top: 3rem; }
  .pasos-linea li::before { top: 1rem; }
}
.pasos-linea li:nth-child(2), .pasos-linea li:nth-child(2)::after, .pasos-linea li:nth-child(2)::before { transition-delay: .25s; }
.pasos-linea li:nth-child(3), .pasos-linea li:nth-child(3)::after, .pasos-linea li:nth-child(3)::before { transition-delay: .5s; }
.pasos-linea li:nth-child(4), .pasos-linea li:nth-child(4)::after, .pasos-linea li:nth-child(4)::before { transition-delay: .75s; }
.pasos-linea.por-ver li::after { transform: scaleX(0); }
.pasos-linea.por-ver li::before { color: var(--linea); }
.pasos-linea.por-ver li { opacity: 0.3; }

/* datos que suben (solo cifras reales) */
.datos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 2.5rem 0 0; border-top: 1px solid var(--grafito); }
@media (min-width: 48rem) { .datos { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; } }
.datos > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.4rem; padding: 1.25rem 0; border-bottom: 1px solid var(--linea); }
.datos dd { margin: 0; font-stretch: 125%; font-weight: 700; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 1; letter-spacing: -0.01em; }
.datos dt { color: var(--acero); max-width: 22em; }

/* ---------- dormido (fuera de pantalla) y movimiento reducido ---------- */
.dormido .sv-nodo, .dormido .sv-onda, .dormido .sv-pulso, .dormido .vt-punto { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .entra, .sv-corchete, .sv-nodo, .sv-onda, .sv-pulso, .sv-traza, .vt-punto { animation: none; }
  .sv-onda, .sv-pulso { display: none; }
  /* quieta: las mismas fichas en grilla, todas a la vista */
  .cinta-pista { animation: none; width: auto; display: block; }
  .cinta { -webkit-mask-image: none; mask-image: none; max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; }
  .cinta-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.75rem; }
  .cinta-lista li { width: auto; margin: 0; }
  .cinta-lista[aria-hidden="true"], .boton-pausa { display: none; }
  .revela, .revela-hijos > *, .servicio > a, .vt-linea, .vw-bloque, .vw-contenido, .vs-barra, .vl-fila,
  .pasos-linea li, .pasos-linea li::after, .pasos-linea li::before, .filas .numero, .enlace-fuerte::after, .servicio .ir::after { transition: none; }
  .servicio > a:hover, .servicio > a:focus-visible, .servicio > a:hover * { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 40rem) {
  /* celular quieto: dos columnas para no apilar 8 fichas de a una */
  .cinta-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .cinta-enlace { padding: 0.75rem 0.75rem 0.8rem; }
  .cinta-titulo { font-size: 0.9375rem; }
}

/* ---------- /trabajos/ (portfolio, 16-oct-2026) ----------
   Una ficha por trabajo, con ancla propia. Filetes y texto, no tarjetas: se lee como un currículum. */
.trabajos-hero { padding-bottom: 1.5rem; }
.indice-trabajos ul { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.indice-trabajos a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.9rem; border: 1px solid var(--linea); border-radius: 999px; text-decoration: none; font-weight: 550; font-size: 0.95rem; background: var(--papel); }
.indice-trabajos a:hover { border-color: var(--grafito); }
.trabajos-lista { padding-top: 1rem; }
.trabajo { padding: 2.25rem 0; border-top: 1px solid var(--linea); }
.trabajo:first-child { border-top: 1px solid var(--grafito); }
.trabajo:target { box-shadow: inset 3px 0 0 var(--chispa); padding-left: 1rem; }
.trabajo-cabeza { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem 1.5rem; align-items: start; }
@media (min-width: 48rem) { .trabajo-cabeza { grid-template-columns: 11rem minmax(0, 1fr) auto; } }
.trabajo-cabeza h2 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); margin: 0 0 0.35rem; }
.trabajo-marca { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; }
.trabajo-marca img { height: 2rem; width: auto; max-width: 100%; }
.trabajo-marca.marca-barone img { height: 2.3rem; border-radius: 3px; }
.trabajo-marca.marca-doble img { height: 1.6rem; min-width: 0; object-fit: contain; }
.trabajo-icono { width: 2.75rem; justify-content: center; border: 1px solid var(--linea); border-radius: 6px; color: var(--grafito); }
.trabajo-icono svg { width: 1.4rem; height: 1.4rem; }
.trabajo-meta { margin: 0; color: var(--acero); font-size: 0.95rem; }
/* estado: el texto dice el estado; la forma del marcador lo refuerza (no depende del color) */
.estado-chip { display: inline-flex; align-items: center; gap: 0.45rem; justify-self: start; margin: 0; padding: 0.2rem 0.6rem; border: 1px solid var(--grafito); border-radius: 2px; font-size: 0.8rem; font-weight: 650; white-space: nowrap; }
.estado-chip::before { content: ""; width: 0.55rem; height: 0.55rem; flex: none; }
.estado-produccion::before { background: var(--bien); border-radius: 50%; }
.estado-banco::before { border: 2px solid var(--chispa-tinta); border-radius: 1px; }
.trabajo-datos { display: grid; gap: 0.9rem; margin: 1.25rem 0 0; max-width: 46rem; }
@media (min-width: 48rem) { .trabajo-datos { margin-left: 12.5rem; } .trabajo > .enlaces-fila { margin-left: 12.5rem; } }
.trabajo-datos > div { display: grid; gap: 0.15rem; }
@media (min-width: 40rem) { .trabajo-datos > div { grid-template-columns: 10rem minmax(0, 1fr); gap: 1rem; } }
.trabajo-datos dt { font-weight: 650; font-size: 0.95rem; }
.trabajo-datos dd { margin: 0; }
.trabajo > .enlaces-fila { margin-top: 0.75rem; }
.trabajo-con-foto { display: grid; gap: 1.5rem; }
@media (min-width: 64rem) { .trabajo-con-foto { grid-template-columns: minmax(0, 46rem) minmax(0, 1fr); align-items: start; } .trabajo-con-foto .trabajo-datos { margin-left: 12.5rem; max-width: none; } }
@media (min-width: 48rem) and (max-width: 63.99rem) { .trabajo-foto { margin-left: 12.5rem; } }
.trabajo-con-foto { margin-top: 1.25rem; }
.trabajo-con-foto .trabajo-datos { margin-top: 0; }
.trabajo-foto img, .caso-foto img { border-radius: var(--radio); width: 100%; }
.trabajo .cinta-aviso, .trabajos-lista .cinta-aviso { margin-top: 1.5rem; }

/* ---------- /trabajos/villatoro/ ---------- */
.miga { font-size: var(--t-chico); color: var(--acero); margin: 0 0 0.5rem; }
.miga a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }
.hero .estado-chip { margin-top: 0.5rem; }
.diagrama { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; max-width: 30rem; }
.diagrama svg { width: 100%; height: auto; }
.d-caja { fill: var(--papel); stroke: var(--grafito); stroke-width: 1.2; }
.d-caja-clave { fill: var(--niebla); stroke-width: 2; }
.d-caja-reles { fill: var(--niebla); }
.d-motor { fill: var(--papel); stroke: var(--grafito); stroke-width: 2; }
.d-linea { fill: none; stroke: var(--grafito); stroke-width: 1.5; }
.d-arm { stroke: var(--chispa-tinta); stroke-width: 2.5; }
.d-campo { stroke: var(--grafito); stroke-width: 2.5; }
.d-vuelta { stroke: var(--acero); stroke-dasharray: 5 4; }
.d-punta { fill: var(--grafito); }
.d-t { fill: var(--grafito); font-size: 14px; font-weight: 600; }
.d-fuerte { font-weight: 750; font-stretch: 115%; }
.d-s { fill: var(--acero); font-size: 11.5px; }
.tabla-medido { border-collapse: collapse; width: 100%; margin-top: 1rem; font-size: 0.95rem; }
.tabla-medido th, .tabla-medido td { text-align: left; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla-medido th { border-bottom: 1px solid var(--grafito); font-weight: 650; }
.tabla-medido td:first-child { font-weight: 600; }
.sr-solo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 16-oct-2026: con "Trabajos" el menú tiene 5 entradas; en el celu tiene que seguir en un renglón (medido a 360 y 390) */
@media (max-width: 29.99rem) { .nav { gap: 0; } .nav a { padding: 0 0.36rem; font-size: 0.97rem; letter-spacing: -0.005em; } }
@media (max-width: 23.99rem) { .nav a { padding: 0 0.3rem; font-size: 0.92rem; } }
.estado-armado::before { border: 2px solid var(--bien); border-radius: 50%; }
.falta-titulo { margin-top: 2rem; }
/* foco por teclado en la cinta: sin degradado en los bordes mientras hay foco adentro (sitio.js además centra la ficha) */
.cinta:focus-within { -webkit-mask-image: none; mask-image: none; }
.datos dt .enlace-fuerte { display: flex; width: fit-content; }