:root{
  --bg:#0d0d0f;--surface:#17171a;--surface2:#1f1f24;--ink:#f5f3ef;--muted:#9d9aa3;--line:#2b2b31;
  --accent:#ffcc00;--accent-soft:#2a2513;--accent-ink:#141308;--radius:14px;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(28px,4vw,42px);margin:.2em 0 .3em}
h2{font-size:clamp(20px,2.4vw,27px);margin:2em 0 .7em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
.btn{display:inline-block;padding:11px 18px;border:1px solid var(--line);border-radius:999px;background:var(--surface2);color:var(--ink);font-weight:500;white-space:nowrap;cursor:pointer}
.btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.btn.primary:hover{filter:brightness(1.08);color:var(--accent-ink)}
.acciones{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}

/* ---------- nav con buscador ---------- */
.nav{position:sticky;top:0;z-index:20;background:rgba(13,13,15,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:12px;min-height:64px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.logo{display:flex;align-items:center;flex:none;line-height:0}
.logo img{height:38px;width:auto;display:block}
.logo-pie{height:30px;width:auto;display:block;margin-bottom:8px}
.nav .cta{background:var(--accent);color:var(--accent-ink);padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.nav .cta:hover{text-decoration:none;filter:brightness(1.08)}
.busca{position:relative;flex:1 1 260px;min-width:0}
.busca input{width:100%;padding:10px 16px 10px 40px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:15px}
.busca input:focus{outline:none;border-color:var(--accent)}
.busca input::placeholder{color:var(--muted)}
.busca .lupa{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:15px;pointer-events:none}
.sug{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;z-index:30;max-height:60vh;overflow-y:auto}
.sug a{display:flex;gap:10px;align-items:center;padding:8px 12px;color:var(--ink);font-size:14px}
.sug a:hover,.sug a.sel{background:var(--surface2);text-decoration:none}
.sug img{width:44px;height:30px;object-fit:cover;border-radius:6px;flex:none}
.sug .ph2{width:44px;height:30px;border-radius:6px;background:var(--accent-soft);flex:none}
.sug small{color:var(--muted);display:block;font-size:12px}
.sug a.esmarca{background:rgba(255,204,0,.07)}
.sug a.esmarca:hover,.sug a.esmarca.sel{background:rgba(255,204,0,.14)}
.sug a.esmarca em{font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--accent-ink);background:var(--accent);padding:2px 7px;border-radius:999px;margin-left:6px;font-weight:600;vertical-align:1px}
.sug .icono{display:grid;place-items:center;color:var(--accent);font-size:15px;background:var(--accent-soft)}
.sub{display:flex;gap:14px;overflow-x:auto;padding:0 0 10px;scrollbar-width:none}
.sub::-webkit-scrollbar{display:none}
.sub a{color:var(--muted);font-size:13.5px;white-space:nowrap}
.sub a:hover{color:var(--accent)}

/* ---------- home ---------- */
/* El hero va a sangre: ocupa todo el ancho y el video lo llena con object-fit:cover.
   Antes usaba contain para no recortar nada y el resultado eran dos bandas negras a
   los costados en cuanto el alto quedaba limitado; se veía como un video pegado
   dentro de la página, no como un fondo. Con cover se pierden unos centímetros
   arriba y abajo, que en un video de recital no se extrañan, y la página se ve
   entera. En el celular (más abajo) sí se muestra el cuadro completo, porque ahí
   el video va apilado arriba del texto y no como fondo. */
.home .hero{position:relative;overflow:hidden;display:grid;align-items:end;
  width:100%;aspect-ratio:16/9;min-height:460px;max-height:min(760px,82vh);
  padding:72px 0 clamp(56px,8vh,96px);border-bottom:1px solid var(--line);background:#06060a}
/* El video va en z-index 0, NO en negativo: con un z-index negativo el navegador
   lo pinta DETRÁS del fondo del propio hero y nunca se ve, que es lo que pasaba.
   El primer fotograma lo aporta el atributo poster del <video>, así no hace falta
   ninguna imagen de fondo en CSS que después le tape encima. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center;z-index:0;border:0;pointer-events:none;opacity:1}
.home .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(6,6,8,.86) 0%,rgba(6,6,8,.6) 42%,rgba(6,6,8,.22) 100%)}
/* width:100% es obligatorio acá: el hero es un grid y, sin eso, este bloque se
   encoge al ancho de su propio texto y el margin:0 auto lo manda al centro de la
   pantalla. Con el ancho tomado, el título arranca a la izquierda como corresponde.
   El contenedor del hero es más ancho que el del resto del sitio (1320 contra 1180)
   para que el titular respire contra el borde en vez de quedar metido hacia adentro. */
.home .hero .wrap{position:relative;z-index:2;width:100%;max-width:1320px;margin:0 auto}
/* El hero es enorme comparado con el resto de la página, así que el texto necesita
   su propia escala: con el tamaño normal de h1 quedaba flotando perdido en el medio.
   Además se apoya abajo a la izquierda en vez de centrarse: deja ver el video y se
   lee como un titular, no como un cartel suelto. */
.home .hero h1{font-size:clamp(32px,4.6vw,62px);line-height:1.06;letter-spacing:-.02em;
  max-width:19ch;margin:0 0 .3em;text-shadow:0 2px 28px rgba(0,0,0,.8)}
.home .hero .lead{color:#e9e7ed;font-size:clamp(16px,1.35vw,21px);line-height:1.5;
  text-shadow:0 1px 14px rgba(0,0,0,.8);max-width:52ch;margin:0}
.home .hero .acciones{margin:26px 0 0}
.home .hero .btn{padding:13px 24px;font-size:16px}
/* En el celular el video no puede ocupar el fondo sin recortarse (la pantalla es
   vertical y el video apaisado), así que en vez de recortarlo se apila: el video
   entero arriba, el texto debajo. Nadie queda cortado y el texto se lee sobre el
   fondo liso, sin necesidad de oscurecer la imagen. */
@media(max-width:700px){
  .home .hero{display:block;aspect-ratio:auto;min-height:0;max-height:none;padding:0}
  .hero-video{position:relative;inset:auto;aspect-ratio:16/9;height:auto}
  .home .hero::after{display:none}
  .home .hero .wrap{padding-top:26px;padding-bottom:34px}
  .home .hero h1,.home .hero .lead{text-shadow:none}
}
.lead{font-size:clamp(16px,1.6vw,19px);color:var(--muted);max-width:62ch;margin:.4em 0}
.rubros-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.rubro{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--ink)}
.rubro:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.rubro span{color:var(--muted);font-size:13px}
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.pasos div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px}
.pasos strong{color:var(--accent)}
.pasos p{color:var(--muted);margin:.4em 0 0;font-size:15px}

/* ---------- grilla homogénea ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;align-items:stretch}
.grid.chico{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);color:var(--ink);display:flex;flex-direction:column;height:100%}
.card:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px);transition:.15s}
.card .ph{aspect-ratio:3/4;background:var(--surface2);display:grid;place-items:center;overflow:hidden;flex:none}
.card .ph img{width:100%;height:100%;object-fit:cover;object-position:var(--foco,50% 30%)}
.card .ini{font-size:28px;font-weight:800;color:var(--muted)}
.card .body{padding:11px 13px 13px;display:flex;flex-direction:column;gap:3px;flex:1;min-height:104px}
.card h3{margin:0;font-size:15px;min-height:2.4em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .cats{margin:0;font-size:12.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grid.chico .card .ph{aspect-ratio:1/1}

/* ---------- ficha ---------- */
.miga{font-size:13px;color:var(--muted);padding:18px 0 4px}
.miga a{color:var(--muted)}
.ficha .hero{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:28px;align-items:start;margin:8px 0 12px}
.ficha .foto{aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;background:var(--surface2);box-shadow:var(--shadow)}
.ficha .foto img{width:100%;height:100%;object-fit:cover;object-position:var(--foco,50% 30%)}
.prop{background:var(--accent-soft);border-left:3px solid var(--accent);padding:10px 14px;border-radius:8px;font-size:15px}
table.datos{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:15px}
table.datos th{text-align:left;color:var(--muted);font-weight:500;width:190px;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--line)}
table.datos td{padding:10px 14px;border-bottom:1px solid var(--line)}
table.datos tr:last-child th,table.datos tr:last-child td{border-bottom:0}
.texto{max-width:72ch}
.texto p{margin:0 0 1em}
.texto a.marca{color:var(--ink);text-decoration:none;border-bottom:1px dashed var(--accent);padding-bottom:1px}
.texto a.marca:hover{color:var(--accent)}
.vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.vid{position:relative;padding:0;border:1px solid var(--line);background:var(--surface2);border-radius:12px;overflow:hidden;cursor:pointer;aspect-ratio:16/9;display:block;width:100%}
.vid img{width:100%;height:100%;object-fit:cover;transition:.2s;display:block}
.vid:hover img{transform:scale(1.03);opacity:.85}
.vid .play{position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;background:var(--accent);box-shadow:0 6px 20px rgba(0,0,0,.45);transition:.15s}
.vid .play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--accent-ink)}
.vid:hover .play{transform:scale(1.08)}
.vid iframe,.vid.activo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* ventana de video con reproductor propio */
body.sin-scroll{overflow:hidden}
.modal-video{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.9);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:26px;animation:aparecer .14s ease-out}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.modal-video .caja{position:relative;width:min(1180px,100%,145vh)}
.modal-video .marco{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 26px 80px rgba(0,0,0,.65)}
.modal-video .yt{position:absolute;inset:0}
.modal-video .yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.modal-video .tapa{position:absolute;inset:0;cursor:pointer;background:transparent}
.cerrar-video{position:absolute;top:-52px;right:0;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--surface2);color:var(--ink);font:400 26px/1 system-ui;cursor:pointer;z-index:3}
.cerrar-video:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.modal-video .quien{position:absolute;top:0;left:0;right:0;padding:14px 18px;color:#fff;font-weight:600;font-size:15px;letter-spacing:.2px;background:linear-gradient(180deg,rgba(0,0,0,.65),transparent);pointer-events:none;transition:opacity .2s}
.modal-video .controles{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:26px 16px 12px;background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.35) 60%,transparent);transition:opacity .2s}
.marco.quieto .controles,.marco.quieto .quien{opacity:0}
.marco.quieto .tapa{cursor:none}
.modal-video .controles button{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer;transition:.15s}
.modal-video .controles button:hover{background:rgba(255,255,255,.14);color:var(--accent)}
.modal-video .controles svg{width:22px;height:22px;fill:currentColor}
.modal-video .t{color:#e9e6df;font:500 12.5px/1 ui-monospace,Consolas,monospace;min-width:42px;text-align:center;user-select:none}
.modal-video .barra{position:relative;flex:1;height:16px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.modal-video .fondo{position:absolute;left:0;right:0;height:4px;border-radius:4px;background:rgba(255,255,255,.28)}
.modal-video .rell{position:absolute;left:0;height:4px;width:0;border-radius:4px;background:var(--accent)}
.modal-video .punto{position:absolute;left:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--accent);box-shadow:0 1px 5px rgba(0,0,0,.6);transition:transform .12s}
.modal-video .barra:hover .punto{transform:scale(1.25)}
.modal-video .cargando{position:absolute;inset:0;display:grid;place-items:center;background:#000}
.modal-video .cargando[hidden]{display:none}
.modal-video .cargando span{width:38px;height:38px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:var(--accent);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.modal-video .grande{position:absolute;inset:0;display:none;place-items:center;background:rgba(0,0,0,.82)}
.marco.terminado .grande{display:grid}
.modal-video .grande button{width:76px;height:76px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer;display:grid;place-items:center}
.modal-video .grande svg{width:38px;height:38px;fill:currentColor;margin-left:4px}
.modal-video .marco:fullscreen{border-radius:0;aspect-ratio:auto;width:100vw;height:100vh}
@media(max-width:700px){.modal-video{padding:14px}.cerrar-video{top:-46px;width:38px;height:38px;font-size:22px}
  .modal-video .controles{gap:8px;padding:22px 10px 10px}.modal-video .t{min-width:36px;font-size:11.5px}}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:8px}
.faq summary{cursor:pointer;font-weight:500}
.faq p{color:var(--muted);margin:.6em 0 0}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{padding:5px 12px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);font-size:13.5px;color:var(--ink)}
.tag:hover{text-decoration:none;background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.tag.apagado{color:var(--muted);cursor:default}
table.datos .tag{display:inline-block;margin:2px 3px 2px 0}

/* ---------- listado ---------- */
.buscador{display:flex;gap:12px;align-items:center;margin:0 0 16px;position:relative}
.buscador .lupa{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:17px;pointer-events:none}
.buscador input{flex:1;padding:13px 18px 13px 44px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:inherit;color:inherit}
.buscador input:focus{outline:none;border-color:var(--accent)}
.buscador span{color:var(--muted);font-size:14px;white-space:nowrap}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:14px;scrollbar-width:thin}
.chips button{flex:none;padding:6px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:13.5px;cursor:pointer}
.chips button:hover{border-color:var(--accent)}
.chips button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.chips button[aria-pressed="true"] .quitar{display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;margin-left:3px;border-radius:999px;background:rgba(0,0,0,.2);
  font-size:13px;line-height:1;font-style:normal;vertical-align:-3px}
.chips button[aria-pressed="true"]:hover .quitar{background:rgba(0,0,0,.35)}
.vo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chips{margin-top:18px}
.controles{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin:2px 0 14px}
.controles label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13.5px}
.controles select{appearance:none;-webkit-appearance:none;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:7px 30px 7px 13px;font:inherit;font-size:13.5px;
  cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.controles select:focus{outline:none;border-color:var(--accent)}
.controles select:hover{border-color:var(--accent)}
.mas{text-align:center;padding:28px 0}

/* ---------- cierre + footer ---------- */
.cierre{background:linear-gradient(180deg,transparent,rgba(255,204,0,.07));border-top:1px solid var(--line);margin-top:64px;padding:48px 0}
.cierre h2{margin-top:0}
.error{padding:80px 0}
footer{border-top:1px solid var(--line);padding:32px 0;color:var(--muted);font-size:14px;background:var(--surface)}
footer .wrap{display:grid;grid-template-columns:1fr 1fr 2fr;gap:20px}
footer .rubros{display:flex;flex-wrap:wrap;gap:8px}
footer small{grid-column:1/-1;color:var(--muted);font-size:12.5px;padding-top:12px;border-top:1px solid var(--line)}
@media (max-width:820px){
  /* En pantallas angostas este botón caía en un renglón propio abajo del buscador
     y repetía lo que ya ofrece el botón flotante de abajo a la derecha. */
  .nav .cta{display:none}
  /* La segunda fila del encabezado sólo contiene el menú de rubros, que acá está
     oculto, pero seguía reservando su alto y dejaba una franja negra vacía. */
  .nav>.wrap:last-child{min-height:0;padding-top:0;padding-bottom:0}
  .ficha .hero{grid-template-columns:1fr;gap:16px}
  .ficha .foto{max-width:320px}
  footer .wrap{grid-template-columns:1fr}
  .sub{display:none}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
}
@media (max-width:560px){
  .nav .wrap{min-height:56px}
  .logo img{height:28px}
  .nav .cta{font-size:13px;padding:8px 12px;max-width:150px}
}
/* paginación rastreable */
.paginacion{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin:26px 0 8px}
.paginacion .pag{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-size:14px;text-decoration:none}
.paginacion a.pag:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.paginacion .pag.actual{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.paginacion .pag.hueco{border:0;background:none;color:var(--muted);min-width:18px;padding:0}
.paginacion .prev,.paginacion .next{font-weight:500}
@media(max-width:560px){.paginacion .pag{min-width:34px;height:34px;padding:0 9px;font-size:13px}}
/* acceso discreto al panel */
footer .acceso{color:var(--muted);opacity:.45;font-size:11.5px;margin-left:10px;text-decoration:none}
footer .acceso:hover{opacity:1;color:var(--accent);text-decoration:none}

.chips:empty{display:none}
.paginacion[hidden]{display:none}

#sindato{margin:-4px 0 12px}
#sindato:empty{display:none}

.aviso-vacio{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;color:var(--muted);margin:18px 0 16px;max-width:760px}

/* ---------- botón flotante de WhatsApp ----------
   El ícono es una burbuja de chat propia, no el logotipo de WhatsApp: la marca
   pide que su logo se use en su verde original y sin recolorear, así que pintarlo
   de amarillo iría contra sus propias reglas de uso. La palabra sí va, que es lo
   que el visitante necesita leer. */
.wa-flota{position:fixed;right:16px;bottom:16px;z-index:30;display:inline-flex;
  align-items:center;gap:9px;padding:12px 18px 12px 15px;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:15px;
  line-height:1;box-shadow:0 6px 24px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.25)}
.wa-flota:hover{text-decoration:none;color:var(--accent-ink);filter:brightness(1.07)}
.wa-flota:focus-visible{outline:3px solid #fff;outline-offset:3px}
.wa-flota svg{flex:0 0 auto}
@media(max-width:560px){
  .wa-flota{right:12px;bottom:12px;padding:12px 16px 12px 13px;font-size:14px}
  /* aire al final de la página para que el botón flotante no se apoye encima
     de la última línea del pie */
  footer .wrap{padding-bottom:76px}
}
@media print{.wa-flota{display:none}}


/* ---------- servicios propios ----------
   Las ilustraciones son SVG dibujados en arte.py y viajan dentro del HTML: no hay
   una sola petición extra al servidor por imagen. Cuando existe assets/servicios/
   <slug>.jpg, generar_sitio.py pone la foto en el mismo hueco y estas reglas la
   tratan igual, porque .arte sirve para las dos cosas. */
.serv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:8px 0 12px}
.serv-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;color:var(--ink);box-shadow:var(--shadow)}
.serv-card:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px);transition:.15s}
.serv-arte{aspect-ratio:16/9;background:#0b0b10;overflow:hidden;flex:none}
.serv-arte .arte{width:100%;height:100%;display:block;object-fit:cover}
.serv-txt{padding:13px 15px 16px;display:flex;flex-direction:column;gap:5px}
.serv-txt h3{margin:0;font-size:17px}
.serv-txt p{margin:0;font-size:14px;color:var(--muted);line-height:1.5}
.serv-card:hover h3{color:var(--accent)}

/* cabecera de la página de un servicio: el texto manda, la imagen acompaña */
.servicio .serv-cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);gap:32px;
  align-items:center;margin:10px 0 8px}
.servicio .serv-cab h1{margin-top:0}
.servicio .serv-arte.grande{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)}
.servicio h2{margin-top:2.2em}

/* "Qué incluye": una lista con tilde propia, no los bullets del navegador */
.incluye{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px 24px;max-width:960px}
.incluye li{position:relative;padding-left:30px;line-height:1.55;color:var(--ink)}
.incluye li::before{content:"";position:absolute;left:0;top:.42em;width:17px;height:17px;border-radius:50%;
  background:var(--accent-soft);border:1px solid var(--accent)}
.incluye li::after{content:"";position:absolute;left:5.5px;top:.66em;width:5px;height:9px;
  border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(43deg)}

.serv-cierre{background:linear-gradient(180deg,transparent,rgba(255,204,0,.07));
  border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 30px;margin:44px 0 8px}
.serv-cierre h2{margin-top:0}
.serv-cierre .lead{max-width:62ch}

/* el enlace a servicios se distingue del resto del menú, que son rubros del catálogo */
.sub a.destacado{color:var(--ink);font-weight:600}
.sub a.destacado:hover{color:var(--accent)}

.pie-tit{color:var(--ink);font-size:12.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.7px;margin:0 0 8px}
footer .pie-tit + .rubros{margin-bottom:16px}

@media(max-width:820px){
  .servicio .serv-cab{grid-template-columns:1fr;gap:18px}
  /* en el celular la ilustración va primero: entra por los ojos antes que el texto */
  .servicio .serv-cab .serv-info{order:2}
  .servicio .serv-cab .serv-arte{order:1}
}

/* ---------- landing de producción ----------
   Tiene portada propia porque es una landing, no un listado del catálogo. El
   telón es el mismo SVG de arte.py, puesto a sangre detrás del texto, con un
   degradado encima para que el titular se lea siempre. */
.serv-hero{position:relative;overflow:hidden;background:#0b0b10;
  border-bottom:1px solid var(--line);padding:0 0 clamp(34px,5vh,56px)}
.serv-hero .arte-fondo{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;pointer-events:none}
.serv-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(6,6,8,.92) 0%,rgba(6,6,8,.72) 46%,rgba(6,6,8,.3) 100%)}
.serv-hero .wrap{position:relative;z-index:2;width:100%;max-width:1320px;margin:0 auto}
.serv-hero .miga{padding-top:20px}
.serv-hero h1{font-size:clamp(30px,4vw,54px);line-height:1.07;letter-spacing:-.02em;
  max-width:17ch;margin:.1em 0 .34em;text-shadow:0 2px 26px rgba(0,0,0,.8)}
.serv-hero .lead{color:#e9e7ed;max-width:58ch;text-shadow:0 1px 14px rgba(0,0,0,.75)}
.serv-hero .acciones{margin-top:22px}
.produccion > .wrap{max-width:1320px}
.produccion h2{scroll-margin-top:110px}
@media(max-width:700px){
  .serv-hero{padding-bottom:30px}
  .serv-hero h1,.serv-hero .lead{text-shadow:0 1px 10px rgba(0,0,0,.9)}
}