/* =========================================================================
   NUTECH — Páginas de servicio (/servicios/<línea>/)
   Se carga después de styles.css y solo agrega lo que la portada no tiene.
   Las vistas usan los componentes de la portada: media-section, metrics,
   block, catalog/svc, process/steps, panel-list y robots-destacado.
   ========================================================================= */

/* ---------- 1. Tokens propios de estas páginas ---------- */
:root{
  --pend-bg:#FBEAEA;
  --ok:#4E5A0F;               /* punto de ronda sin novedad */
}
[data-theme="dark"]{
  --pend-bg:#3A2426;
  --ok:#D6DD56;
}

/* ---------- 2. Piezas de texto ---------- */
/* Mención a otro servicio: siempre lleva a ese servicio */
.ref{
  color:inherit;text-decoration:underline;text-decoration-color:var(--brand-yellow);
  text-decoration-thickness:2px;text-underline-offset:3px;border-radius:3px;
  transition:background-color var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft);
}
.ref:hover{color:var(--on-brand);background:var(--brand-yellow);text-decoration-color:transparent}

/* Dato pendiente de confirmar. Coral oscurecido: 5,2:1 sobre su fondo */
.pend{
  display:inline-block;padding:2px 8px;border-radius:5px;vertical-align:middle;
  background:var(--pend-bg);color:color-mix(in srgb,var(--coral-deep) 85%,var(--ink));
  font-size:12px;font-weight:700;letter-spacing:.04em;white-space:nowrap;text-transform:none;
}
.tick{
  flex:0 0 28px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:var(--brand-yellow);color:var(--on-brand);
}

/* ---------- 3. Componentes de la portada, con variantes ---------- */
/* Seis tarjetas: tres columnas. Se repiten los cortes de styles.css porque
   esta hoja va después y la regla base los pisaría. */
.catalog--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.catalog--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.catalog--3{grid-template-columns:1fr}}

/* Bloque a sangre sin foto real todavía: fondo de marca con las formas del isotipo */
.media-section--marca{min-height:clamp(440px,64vh,700px)}
.media-section--hero.media-section--marca{min-height:100svh}
.media-section--marca .bg{
  background:repeating-linear-gradient(135deg,var(--surface-dark-2) 0 12px,var(--surface-dark) 12px 24px);
}
.media-section--marca .veil{display:none}
.deco{position:absolute;right:0;bottom:0;z-index:-1;width:min(46%,560px);height:auto;pointer-events:none}
.media-section--right .deco{right:auto;left:0;transform:scaleX(-1)}
.deco .d1{fill:var(--brand-lime);opacity:.22}
.deco .d2{fill:var(--brand-lime-soft);opacity:.18}
.deco .d3{fill:var(--brand-yellow);opacity:.28}

/* Dos columnas: título a la izquierda, lista a la derecha */
.sv-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,54px);align-items:start}
.sv-split .block-head{margin-bottom:0}
.panel-list--1{grid-template-columns:1fr}
.panel-list li{font-size:15px}
.robots-destacado + .robots-destacado{margin-top:16px}

/* Pie de la línea incluida (Residuos dentro de Aseo) */
.sv-pie{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;margin-top:28px}
.sv-nota{
  flex:1 1 380px;max-width:none;padding:18px 20px;
  border:1px solid var(--line);border-left:4px solid var(--brand-yellow);border-radius:10px;
  background:var(--surface-raise);font-size:16px;
}
.sv-nota strong{color:var(--ink)}

@media (max-width:900px){.sv-split{grid-template-columns:1fr}}
@media (max-width:860px){.media-section--marca{min-height:auto}.media-section--hero.media-section--marca{min-height:100svh}}

/* ---------- 4. Transición entre soluciones (servicios.js) ---------- */
/* Las piezas que entran con la transición ya quedan visibles sin la
   transición CSS del revelado: si no, las dos animaciones se pisarían. */
html.js .reveal.sin-transicion{transition:none}

/* Telón: cubre la pantalla con la solución a la que se entra. Va bajo el
   encabezado (z-index 100), que sigue a la vista y usable. Las animaciones
   son de servicios.js (Web Animations). */
.telon{
  position:fixed;inset:0;z-index:95;display:flex;align-items:center;overflow:hidden;
  color:var(--on-media);
  background:repeating-linear-gradient(135deg,var(--surface-dark-2) 0 12px,var(--surface-dark) 12px 24px);
}
.telon[hidden]{display:none}
.telon .deco{z-index:0;width:min(54%,640px)}
.telon-in{position:relative;z-index:1;display:grid;gap:16px;justify-items:start;padding-top:var(--header-h)}
.telon-ico{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-yellow);color:var(--on-brand);
}
.telon-ico svg{width:30px;height:30px}
.telon-num{
  display:inline-flex;align-items:center;gap:10px;max-width:none;margin-top:6px;
  font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--on-media-soft);
}
.telon-num::before{content:"";width:22px;height:2px;background:var(--brand-yellow)}
.telon-nom{
  max-width:16ch;font-size:clamp(38px,7vw,96px);font-weight:800;line-height:.95;letter-spacing:.01em;
  text-transform:uppercase;text-wrap:balance;color:var(--on-media);
}
.telon-barra{display:block;width:min(320px,62vw);height:3px;margin-top:10px;background:var(--brand-yellow);transform-origin:left}

/* ---------- 4.b Galerías: el carrusel está en styles.css (es común a todo el sitio) ---------- */
/* Marco vertical para videos de celular */
.gal--v .gal-escena,.gal--v .rec{width:min(100%,400px,calc(min(76svh,720px) * 476 / 848));justify-self:center}

/* Banda oscura: texto a un lado, galería al otro (primer bloque de cada solución) */
.gal-band{
  position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(72px,9vw,120px);
  background:repeating-linear-gradient(135deg,var(--surface-dark-2) 0 12px,var(--surface-dark) 12px 24px);
}
.gal-band-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
.gal-band--v .gal-band-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.gal-band-txt h2{margin:16px 0 18px}
.gal-band-txt .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
@media (max-width:860px){
  .gal-band-grid,.gal-band--v .gal-band-grid{grid-template-columns:minmax(0,1fr)}
  .gal-band-txt .actions{flex-direction:column;align-items:stretch}
  .gal--v .gal-escena,.gal--v .rec{width:min(100%,340px,calc(70svh * 476 / 848))}
}

/* Portada de Seguridad con carrusel de fondo: espacio abajo para la línea del indicador */
@media (max-width:900px){.sg-hero:has(.gal--fondo) .sg-hero-body{padding-bottom:64px}}
@media (min-width:901px){.sg-hero:has(.gal--fondo) .sg-hero-body{padding-bottom:72px}}
/* ---------- 4.c Recorrido: solución anterior y siguiente ---------- */
.sol-nav{padding-block:clamp(56px,7vw,96px);border-top:1px solid var(--line)}
.sol-nav-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}
.sol-nav-todas{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;
}
.sol-nav-todas:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand-yellow);text-decoration-thickness:2px;text-underline-offset:4px}
.sol-nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sol-nav-a{
  position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  min-height:clamp(170px,18vw,230px);padding:24px 26px;border-radius:12px;
  background:var(--surface-dark);color:var(--on-media);text-decoration:none;
  transition:translate var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out);
}
.sol-nav-a--marca{background:repeating-linear-gradient(135deg,var(--surface-dark-2) 0 12px,var(--surface-dark) 12px 24px)}
.sol-nav-a img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:scale var(--t-slow) var(--ease-out)}
.sol-nav-velo{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,color-mix(in srgb,var(--surface-dark) 90%,transparent) 8%,color-mix(in srgb,var(--surface-dark) 38%,transparent));
}
.sol-nav-txt{display:grid;gap:6px}
.sol-nav-txt small{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--on-media-soft)}
.sol-nav-txt strong{font-size:clamp(20px,2.2vw,28px);font-weight:800;line-height:1.05;text-transform:uppercase;letter-spacing:.01em}
.sol-nav-flecha{
  flex:0 0 auto;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-yellow);color:var(--on-brand);transition:translate var(--t-mid) var(--ease-out);
}
.sol-nav-a--ant{flex-direction:row-reverse}
.sol-nav-a--ant .sol-nav-flecha svg{transform:scaleX(-1)}
.sol-nav-a:hover{translate:0 -4px;box-shadow:var(--shadow-md)}
.sol-nav-a:hover img{scale:1.05}
.sol-nav-a--sig:hover .sol-nav-flecha{translate:5px 0}
.sol-nav-a--ant:hover .sol-nav-flecha{translate:-5px 0}
.sol-nav-a:focus-visible{outline:3px solid var(--brand-yellow);outline-offset:3px}
@media (max-width:700px){
  .sol-nav-grid{grid-template-columns:1fr}
  .sol-nav-a{min-height:140px;padding:20px}
}

@media (prefers-reduced-motion:reduce){
  .sol-nav-a:hover{translate:0 0}
  .sol-nav-a:hover img{scale:1}
}
@media print{.telon,.rec,.sol-nav{display:none}}

/* ---------- 5. Seguridad: la presentación de su landing ---------- */
.sg-wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,4vw,48px)}
.sg-sec{padding-block:clamp(56px,8vw,96px)}
.sg-warm{background:var(--surface-warm)}
.sg-tint{background:var(--surface-tint)}
.sg-head{display:grid;gap:12px;margin-bottom:40px}
.sg h2{font-size:clamp(24px,3.6vw,40px);line-height:1.02}
.sg-head p{font-size:16px}
.sg p{max-width:62ch}
.sg .actions{display:flex;flex-wrap:wrap;gap:12px}

.sg-hero{
  position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;
  min-height:min(86svh,760px);padding-top:var(--header-h);color:var(--on-media);
  background:repeating-linear-gradient(135deg,var(--surface-dark-2) 0 12px,var(--surface-dark) 12px 24px);
}
/* Velo de la portada. Las fotos de su carrusel son claras (paredes blancas,
   carpas, centros comerciales): el velo no las tapa, solo asegura el texto.
   El tramo que importa es donde termina el párrafo (~58% del ancho en
   escritorio): con un 60% de oscuro, el texto blanco mantiene 4,5:1 aunque
   debajo haya blanco puro. De ahí a la derecha, donde está el sujeto de cada
   foto, el velo se abre casi entero. */
.sg-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,color-mix(in srgb,var(--surface-dark) 86%,transparent) 0%,color-mix(in srgb,var(--surface-dark) 64%,transparent) 55%,color-mix(in srgb,var(--surface-dark) 10%,transparent) 100%);
}
/* Como el hero de la portada, los tamaños se miden también contra el alto
   (svh): en un portátil bajo o un teléfono chico el bloque cabe sin scroll */
.sg-hero-body{position:relative;z-index:1;display:grid;gap:clamp(10px,1.8svh,16px);max-width:660px;padding-block:clamp(20px,6svh,64px) 72px}
.sg-hero h1{font-size:clamp(28px,min(5.6vw,7svh),56px);color:var(--on-media)}
.sg-hero .eyebrow{color:var(--on-media-soft)}
.sg-hero .lead{font-size:clamp(15px,min(1.6vw,2.4svh),20px);color:var(--on-media-soft)}
.sg-facts{display:flex;flex-wrap:wrap;gap:8px 24px;margin:8px 0 0;padding:0;list-style:none;font-size:14px;color:var(--on-media-soft)}
.sg-facts li{display:inline-flex;align-items:center;gap:8px}
/* Van después de las reglas base del hero: con la misma especificidad, gana la última */
/* Teléfono apaisado (667×375): falta alto para todo. Los botones van en fila
   y la fila de datos, que repite lo que dice la página más abajo, se omite. */
@media (max-width:900px) and (max-height:470px){
  .sg-hero-body{padding-block:8px 50px;gap:8px}
  .sg-hero h1{font-size:clamp(22px,7svh,30px)}
  .sg-hero .lead{font-size:14px;line-height:1.4}
  .sg-hero .actions .btn{width:auto;max-width:none;min-height:40px}
  .sg-hero .sg-facts,.sg-hero .eyebrow{display:none}
}
/* Teléfono de pantalla baja (375×667): unos píxeles menos abajo y en los datos para que todo quepa */
@media (max-width:900px) and (max-height:700px){
  .sg-hero:has(.gal--fondo) .sg-hero-body{padding-bottom:54px}
  .sg-hero .sg-facts{font-size:13px;margin-top:2px}
}
.sg-facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-yellow)}

.sg-cifras{border-bottom:1px solid var(--line)}
.sg-cifras dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:0}
.sg-cifras dl>div{display:grid;gap:4px;align-content:start;padding:24px;border-left:1px solid var(--line)}
.sg-cifras dl>div:first-child{border-left:0;padding-left:0}
.sg-cifras dt{order:2;font-size:14px;line-height:1.35;color:var(--ink-soft)}
.sg-cifras dd{order:1;margin:0;font-size:clamp(24px,3vw,32px);font-weight:800;line-height:1;color:var(--ink)}

.sg-auth{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,64px);align-items:start}
.sg-auth h2{margin-top:12px;font-size:clamp(24px,3.2vw,32px)}
.sg-auth p{margin-top:16px}
.sg-res{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px}
.sg-checks{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.sg-checks li{
  display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;padding:16px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface-raise);font-size:16px;color:var(--ink-soft);
}
.sg-checks strong{color:var(--ink)}

.sg-svcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--line)}
.sg-svc{display:grid;gap:12px;align-content:start;padding:32px;background:var(--surface-raise)}
.sg-ico{
  width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border-radius:8px;
  border:1px solid color-mix(in srgb,var(--brand-yellow) 40%,var(--surface-tint));background:var(--surface-tint);color:var(--ink);
}
.sg-svc p{font-size:16px}
.sg-svc--link{position:relative;transition:background-color var(--t-fast) var(--ease-soft)}
.sg-svc--link:hover{background:var(--surface-tint)}
.sg-svc--link h3 a{color:inherit;text-decoration:none}
.sg-svc--link h3 a::after{content:"";position:absolute;inset:0}
.sg-svc--link:hover h3 a{text-decoration:underline;text-decoration-color:var(--brand-yellow);text-decoration-thickness:2px;text-underline-offset:4px}
.sg-svc--link h3 a:focus-visible{outline:none}
.sg-svc--link:has(h3 a:focus-visible){outline:3px solid var(--brand-yellow);outline-offset:-3px}
.sg-rubros{margin-top:24px;font-size:16px}

.sg-band{background:var(--surface-dark);color:var(--on-media)}
.sg-band p,.sg-band .eyebrow{color:var(--on-media-soft)}
.sg-band h2{font-size:clamp(28px,4vw,40px);color:var(--on-media)}
.sg-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.sg-split--rev{grid-template-columns:.95fr 1.05fr}
.sg-split--rev .sg-photo{order:-1;justify-self:start}
.sg-copy{display:grid;gap:16px;max-width:560px}
.sg-points{display:grid;gap:16px;margin:8px 0 0;padding:0;list-style:none}
.sg-points li{display:grid;gap:4px;padding-left:16px;border-left:2px solid var(--brand-yellow);font-size:16px;color:var(--on-media-soft)}
.sg-points strong{color:var(--on-media)}
.sg-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0;padding:0;list-style:none}
.sg-chips li{
  display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;font-size:14px;font-weight:600;color:var(--on-media);
  border:1px solid color-mix(in srgb,var(--on-media) 28%,transparent);background:color-mix(in srgb,var(--on-media) 7%,transparent);
}
.sg-chips--claro li{color:var(--ink);border-color:var(--line-strong);background:var(--surface-raise)}

.sg-photo{
  position:relative;width:100%;margin:0;justify-self:end;overflow:hidden;border-radius:8px;
  background:repeating-linear-gradient(135deg,var(--surface-dark-2) 0 12px,var(--surface-dark) 12px 24px);
}
.sg-photo::after{content:"";position:absolute;left:0;bottom:0;width:96px;height:6px;background:var(--brand-yellow)}
.sg-photo img{width:100%;height:100%;object-fit:cover}
.sg-photo--alta{aspect-ratio:4/5;max-width:460px}
.sg-photo--ancha{aspect-ratio:4/3;max-width:560px}
.sg-photo--panel{aspect-ratio:4/3;max-width:none;border-radius:0}

.sg-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin:0;padding:0;list-style:none;counter-reset:sgpaso}
.sg-steps li{
  counter-increment:sgpaso;display:grid;grid-template-columns:44px 1fr;gap:4px 16px;align-content:start;padding:24px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface-raise);
}
.sg-steps li::before{
  content:counter(sgpaso);grid-row:span 2;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:var(--brand-yellow);color:var(--on-brand);font-size:20px;font-weight:800;
}
.sg-steps strong{align-self:end;font-size:14px;letter-spacing:.03em;line-height:1.25;text-transform:uppercase;color:var(--ink)}
.sg-steps span{grid-column:2;font-size:16px;color:var(--ink-soft)}

.sg-tec{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.sg-tec li{
  display:flex;align-items:center;gap:16px;padding:24px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface-raise);font-size:16px;font-weight:700;color:var(--ink);
}

.sg-registro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.sg-txt{display:grid;gap:16px}
.sg-kpis{display:grid;gap:8px;margin-top:8px}
.sg-kpis h3{font-size:14px;color:var(--ink-soft)}
.sg-log{margin:0;overflow:hidden;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface-raise)}
.sg-log-head{display:flex;justify-content:space-between;gap:12px;padding:16px 24px;border-bottom:1px solid var(--line);font-size:14px;font-weight:700;color:var(--ink)}
.sg-log-head span{font-weight:600;color:var(--ink-soft)}
.sg-log ol{position:relative;margin:0;padding:12px 24px 8px;list-style:none}
.sg-log ol::before{content:"";position:absolute;left:calc(24px + 54px + 5px);top:24px;bottom:24px;width:2px;background:var(--line-strong)}
.sg-log li{position:relative;display:grid;grid-template-columns:54px 12px 1fr;gap:12px;align-items:start;padding:12px 0;font-size:14px}
.sg-log li::before{
  content:"";grid-column:2;grid-row:1;z-index:1;width:12px;height:12px;margin-top:5px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 3px var(--surface-raise);
}
.sg-log li.nov::before{background:var(--coral-deep)}
.sg-log time{padding-top:1px;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.sg-log li b{display:block;font-size:14px;color:var(--ink)}
.sg-log li small{display:block;font-size:14px;line-height:1.4;color:var(--ink-soft)}
.sg-log figcaption{padding:12px 24px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-soft)}

.sg-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.sg-panel{display:grid;grid-template-rows:auto 1fr;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--surface-raise)}
.sg-panel-body{display:grid;gap:12px;align-content:start;padding:24px 24px 32px}
.sg-panel p{font-size:16px}
.sg-panel ul{display:grid;gap:8px;margin:0;padding:0;list-style:none;font-size:16px;color:var(--ink-soft)}
.sg-panel li{position:relative;padding-left:16px}
.sg-panel li::before{content:"";position:absolute;left:0;top:.75em;width:6px;height:2px;background:var(--brand-yellow)}
.sg-link{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;color:var(--ink);
}

.sg-why{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,5vw,64px);align-items:start}
.sg-why .sg-head{margin:0}
.sg-cierre-txt{max-width:none;margin-top:24px;padding-left:16px;border-left:4px solid var(--brand-yellow);font-size:20px;font-weight:700;color:var(--ink)}

@media (max-width:900px){
  .sg-split,.sg-split--rev,.sg-auth,.sg-registro,.sg-why{grid-template-columns:1fr}
  .sg-photo,.sg-split--rev .sg-photo{justify-self:start}
  .sg-cifras dl>div:nth-child(odd){border-left:0;padding-left:0}
  .sg-hero::after{background:linear-gradient(180deg,color-mix(in srgb,var(--surface-dark) 55%,transparent),color-mix(in srgb,var(--surface-dark) 82%,transparent))}
  .sg-log ol::before{left:calc(24px + 46px + 5px)}
  .sg-log li{grid-template-columns:46px 12px 1fr}
}
@media (max-width:860px){
  .sg .actions{flex-direction:column;align-items:stretch}
}

/* ---------- 6. Bloques de cierre y encabezado centrado (Robótica, Operativa) ---------- */
.media-section--short,.media-section--marca.media-section--short{min-height:min(62svh,560px)}
.media-inner--center{margin-inline:auto;text-align:center}
.media-inner--center .eyebrow{justify-content:center}
.media-inner--center p{margin-inline:auto}
.actions--center{justify-content:center}
.media-section .veil.veil--center{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-dark) 55%,transparent) 0%,color-mix(in srgb,var(--surface-dark) 42%,transparent) 50%,color-mix(in srgb,var(--surface-dark) 66%,transparent) 100%);
}
.media-section--marca .veil.veil--center{display:none}
@media (max-width:860px){.media-section--marca.media-section--short{min-height:auto}}

/* ---------- 7. Preguntas frecuentes ---------- */
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;padding:18px 0;
  font-size:16px;font-weight:700;color:var(--ink);cursor:pointer;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:0 0 18px;width:18px;height:18px;transition:transform var(--t-fast) var(--ease-out)}
.faq details[open] summary svg{transform:rotate(90deg)}
.faq details p{max-width:none;padding:0 0 20px;font-size:16px}