/* ============ R&A · plantilla de Servicio (se apoya en home.css: tokens, menú, botones, trazo, pie) ============ */
html { interpolate-size: allow-keywords; }

/* ---------- 1. portada del área ---------- */
.s-hero {
  position: relative;
  min-height: 92svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--nav-h) + clamp(28px, 6vh, 72px)) var(--gut) clamp(40px, 8vh, 88px);
}
.crumbs ol { list-style: none; margin: 0 0 clamp(28px, 6vh, 64px); padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 0.875rem; color: var(--gray); }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--rule); color: rgba(18,18,18,.3); }
.crumbs a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; transition: background-size 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { background-size: 100% 1px; background-position: 0 100%; transition: background-size 260ms var(--ease-out); } }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.s-hero .tag { margin-bottom: 22px; }
.s-hero__title {
  position: relative; z-index: 4;
  font-size: clamp(2.75rem, 8vw, 9.25rem);
  line-height: 0.92; letter-spacing: -0.047em;
  max-width: 8.68em; /* 15.5ch de Hanken */
  font-weight: 700; font-variation-settings: "wght" 700;
  animation: hero-weight 1600ms var(--ease-out) both;
}
/* renglones fijos (ra_renglones, inc/helpers.php): los cortes del peso final, así la entrada 200 → 700 no los vuelve a partir */
.s-hero__title.is-lineado { white-space: nowrap; }
/* sin JS, el subrayado es un fondo; con JS lo dibuja el trazo */
.s-hero__title [data-anchor] { background: linear-gradient(var(--orange), var(--orange)) 0 96% / 100% 0.05em no-repeat; }
.js .s-hero__title [data-anchor] { background: none; }
.s-hero__foot {
  position: relative; z-index: 4;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px clamp(24px, 5vw, 96px); align-items: end;
  margin-top: clamp(40px, 8vh, 88px);
  padding-top: 24px; border-top: 1px solid var(--rule);
}
.s-hero__actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: flex-end; }
.link-go {
  font-weight: 650; text-decoration: none; padding: 8px 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
  transition: background-size 320ms var(--ease-out), color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .link-go:hover { color: var(--orange-ink); background-size: 0 1.5px; background-position: 100% 100%; } }

/* ---------- 2. nueve frentes ---------- */
.frentes { position: relative; padding: 18vh 0 16vh; }
.frentes__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.frentes__head { position: sticky; top: calc(var(--nav-h) + 6vh); display: grid; gap: 22px; }
.frentes__head h2 { font-size: clamp(2.375rem, 4.6vw, 4.75rem); line-height: 0.96; letter-spacing: -0.035em; }
.frentes__list { list-style: none; margin: 0; padding: 0 0 0 clamp(36px, 3.4vw, 56px); }
.frentes__list li { position: relative; padding: clamp(26px, 4vh, 40px) 0; border-top: 1px solid var(--rule); }
.frentes__list li:last-child { border-bottom: 1px solid var(--rule); }
.frentes__list h3 { font-size: clamp(1.5rem, 2.3vw, 2.25rem); line-height: 1.05; letter-spacing: -0.025em; }
.frentes__list p { margin-top: 10px; color: var(--gray); max-width: 36em; transition: color 300ms ease; }
.frentes__list li.is-on p { color: var(--ink); }
/* el cuadrado del logo: se llena cuando pasa el trazo */
.frentes__list li::before {
  content: ""; position: absolute; top: calc(clamp(26px, 4vh, 40px) + 0.55em); width: 13px; height: 13px;
  left: calc(-1 * clamp(36px, 3.4vw, 56px) - 4.5px);
  background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink);
  transition: background-color 300ms ease, box-shadow 300ms ease, transform 420ms var(--ease-out);
  z-index: 4;
}
.frentes__list li.is-passed::before { background: var(--orange); box-shadow: inset 0 0 0 1.5px var(--orange); transform: scale(1.25); }

/* ---------- hojas (firma naranja, cierre oscuro) ----------
   Rectángulos de color plano; la costura curva es la tapa de cada hoja (.hoja-tapa, home.css): una curva fija en el HTML,
   elegida por servicio.js según el lado por donde llega el trazo, que solo cambia de escala. Sin JS o con movimiento
   reducido, bordes rectos. */
.sheet { position: relative; margin-top: -1px; }
.sheet::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.sheet--orange::before { background: var(--orange); }
.sheet--ink::before { background: var(--ink); }
.sheet--orange > .hoja-tapa { fill: var(--orange); }
.sheet--light::before { display: none; }
.sheet.sheet--light { overflow: visible; overflow-x: clip; }   /* la tapa asoma por arriba de la sección (.proyectos recortaba con overflow: hidden) */
.sheet--light > .hoja-tapa { fill: var(--white); bottom: calc(100% - 3px); }   /* la página blanca vuelve con curva sobre la hoja naranja */
.cierre > .hoja-tapa { --amp: 0.85; }   /* el cierre, más calmo (como Contacto en la home) */
/* la hoja naranja nace de la línea: servicio.js recorta (clip-path) lo que la franja todavía no cubrió, contenido y trazo
   de la hoja incluidos; la línea que llega es de la sección anterior y no se recorta */
/* pruebas (?hojas=domo, solo en las copias locales): el domo que se redibujaba en cada cuadro, para comparar */
.sheet__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; }
.sheet--orange .sheet__bg path { fill: var(--orange); }
.sheet--ink .sheet__bg path { fill: var(--ink); }
.ab-domo .sheet::before, .ab-domo .sheet > .hoja-tapa { display: none; }

/* ---------- 3. la firma del área ---------- */
.firma { padding: 26vh 0 22vh; color: var(--ink); --flash: var(--white); }
.firma__inner { position: relative; z-index: 2; margin: 0; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.75fr); gap: clamp(32px, 5vw, 96px); align-items: end; }
.firma .tag { color: var(--ink); }
.firma blockquote { margin: 26px 0 0; }
.firma blockquote p {
  font-size: clamp(2rem, 4.2vw, 4.5rem); line-height: 1.02; letter-spacing: -0.035em;
  font-weight: 650; font-variation-settings: "wght" 650; color: var(--white); max-width: 11.76em; /* 21ch de Hanken */ text-wrap: balance;
}
.firma figcaption { margin-top: clamp(32px, 6vh, 64px); display: flex; gap: 14px; align-items: baseline; font-weight: 600; }
.firma figcaption b { font-size: 1.25rem; font-weight: 750; }
/* ---------- retrato: blanco y negro natural; el trazo lo enmarca y cierra en el cuadrado ---------- */
.firma__retrato { position: relative; }
.firma__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #F6F4F0; }
.firma__foto img { width: 100%; height: 112%; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.05); transform: translate3d(0, var(--py, -6%), 0); }
.firma__marco { position: absolute; inset: -16px; width: calc(100% + 32px); height: calc(100% + 32px); overflow: visible; pointer-events: none; }
.firma__marco path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.firma__marco rect { fill: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .js .firma__foto { clip-path: inset(100% 0 0 0); transition: clip-path 1300ms var(--ease-out); }
  .js .firma__retrato.is-in .firma__foto { clip-path: inset(0 0 0 0); }
  .js .firma__marco path { stroke-dashoffset: 1; }
  .js .firma__retrato.is-in .firma__marco path { stroke-dashoffset: 0; transition: stroke-dashoffset 1500ms var(--ease-in-out) 250ms; }
  .js .firma__marco rect { opacity: 0; transition: opacity 200ms ease; }
  .js .firma__retrato.is-in .firma__marco rect { opacity: 1; transition-delay: 1650ms; }
}

/* ---------- 4. en detalle ---------- */
.detalle { position: relative; padding: 18vh 0 14vh; }
.detalle__head { margin-bottom: clamp(48px, 9vh, 104px); }
.detalle__grid { display: grid; grid-template-columns: minmax(200px, 0.62fr) minmax(0, 1.38fr); gap: clamp(32px, 6vw, 112px); align-items: start; padding-left: calc(min(13%, 200px) + 20px); }
.indice { position: sticky; top: calc(var(--nav-h) + 5vh); }
.indice ol { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.indice a {
  display: grid; padding: 10px 0 10px 18px; border-left: 1.5px solid var(--rule); text-decoration: none; color: var(--gray);
  font-size: 0.9375rem; line-height: 1.3;
  font-weight: 500; font-variation-settings: "wght" 500;
  transition: color 220ms ease, font-variation-settings 300ms var(--ease-out), border-color 220ms ease;
}
/* activo: el texto engorda y entra 6 px (con transform: no cambia dónde corta ni empuja nada). Una copia invisible al peso
   final, en la misma celda, reserva el alto: si en negrita corta en un renglón más, la caja ya lo tenía y los links de abajo
   no bajan (corría el índice al scrollear: CLS en 18 de 27 páginas, según el ancho) */
.indice a > span, .indice a::after { grid-area: 1 / 1; }
.indice a > span { transition: transform 320ms var(--ease-out); }
.indice a::after { content: attr(data-t); font-variation-settings: "wght" 720; visibility: hidden; pointer-events: none; }
.indice a[aria-current="true"] { color: var(--ink); font-variation-settings: "wght" 720; border-left-color: var(--orange); }
.indice a[aria-current="true"] > span { transform: translateX(6px); }
@media (hover: hover) and (pointer: fine) { .indice a:hover { color: var(--ink); } }
.prosa { max-width: 44rem; }
.prosa h2 {
  font-size: clamp(1.625rem, 2.5vw, 2.375rem); line-height: 1.08; letter-spacing: -0.025em;
  margin: clamp(56px, 9vh, 96px) 0 20px; scroll-margin-top: calc(var(--nav-h) + 32px);
}
.prosa h2:first-child { margin-top: 0; }
.prosa p, .prosa li { font-size: 1.125rem; line-height: 1.6; text-wrap: pretty; }
.prosa p { margin: 0 0 16px; }
.prosa ul { list-style: none; margin: 8px 0 24px; padding: 0; }
.prosa li { position: relative; padding: 11px 0 11px 24px; border-top: 1px solid var(--rule); }
.prosa li:last-child { border-bottom: 1px solid var(--rule); }
.prosa li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 8px; height: 8px; background: var(--orange); }
.bloques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px clamp(20px, 3vw, 44px); margin-top: 24px; }
.bloques p { margin-bottom: 4px; }

/* ---------- 5. novedades del área ---------- */
.pg-servicio .novedades { padding: 16vh 0 14vh; }

/* ---------- 6. preguntas frecuentes ---------- */
.faq { position: relative; padding: 14vh 0 16vh; }
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.faq__head { position: sticky; top: calc(var(--nav-h) + 6vh); display: grid; gap: 22px; }
.faq__head h2 { font-size: clamp(2.375rem, 4.6vw, 4.75rem); line-height: 0.96; letter-spacing: -0.035em; }
.faq__list details { border-top: 1px solid var(--rule); }
.faq__list details:last-child { border-bottom: 1px solid var(--rule); }
.faq__list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: 24px 0; font-size: clamp(1.1875rem, 1.6vw, 1.5rem); line-height: 1.25; letter-spacing: -0.015em;
  font-weight: 560; font-variation-settings: "wght" 560;
  transition: font-variation-settings 300ms var(--ease-out), color 200ms ease;
}
.faq__list summary::-webkit-details-marker { display: none; }
/* más / menos dentro del cuadrado */
.faq__list summary::after {
  content: ""; flex: none; width: 30px; height: 30px; margin-top: -2px;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
  box-shadow: inset 0 0 0 1.5px currentColor;
  transition: transform 420ms var(--ease-out), background-color 240ms ease, color 240ms ease;
}
.faq__list details[open] summary { font-variation-settings: "wght" 740; }
.faq__list details[open] summary::after {
  transform: rotate(45deg); color: var(--orange);
}
@media (hover: hover) and (pointer: fine) { .faq__list summary:hover { color: var(--orange-ink); } }
.faq__a p { padding: 0 64px 28px 0; color: var(--gray); font-size: 1.0625rem; line-height: 1.6; max-width: 40em; }
.faq__list details::details-content { block-size: 0; overflow: hidden; transition: block-size 480ms var(--ease-out), content-visibility 480ms allow-discrete; }
.faq__list details[open]::details-content { block-size: auto; }

/* ---------- 7. otras áreas ---------- */
.otras { position: relative; padding: 14vh 0 20vh; }
.otras__list { list-style: none; margin: clamp(48px, 8vh, 88px) 0 0; padding: 0 0 0 calc(min(13%, 200px) + 20px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 72px); }
.otras__list a {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; border-top: 1px solid var(--rule); text-decoration: none;
  font-size: clamp(1.25rem, 1.9vw, 1.875rem); letter-spacing: -0.02em; line-height: 1.1;
  font-weight: 500; font-variation-settings: "wght" 500;
  transition: font-variation-settings 260ms var(--ease-out), padding-left 320ms var(--ease-out), color 200ms ease;
}
.otras__list a::after {
  content: ""; flex: none; width: 11px; height: 11px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: translateX(-6px) rotate(45deg); opacity: 0.35; transition: opacity 200ms ease, transform 320ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .otras__list a:hover { font-variation-settings: "wght" 760; padding-left: 14px; color: var(--orange); }
  .otras__list a:hover::after { opacity: 1; transform: translateX(0) rotate(45deg); }
}
.otras__list a:active { transform: scale(0.985); }

/* ---------- 8. cierre ---------- */
.cierre { color: var(--white); padding: 30vh 0 24vh; }
.cierre__inner { position: relative; z-index: 2; }
.cierre .tag { color: var(--orange); }
.cierre h2 { font-size: clamp(2.75rem, 7vw, 7.25rem) !important; line-height: 0.94; max-width: 7.28em; /* 13ch de Hanken */ }
.cierre__actions { margin: clamp(40px, 7vh, 80px) 0 0 calc(min(13%, 200px) + 20px); }
.js .cierre { background: transparent; }

/* ---------- celular ---------- */
@media (max-width: 820px) {
  .s-hero { min-height: 0; padding-bottom: 48px; }
  .s-hero__foot { grid-template-columns: 1fr; }
  .s-hero__actions { justify-content: stretch; }
  .s-hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .frentes__grid, .faq__grid { grid-template-columns: 1fr; }
  .frentes__head, .faq__head { position: static; }
  .frentes__list { padding-left: 30px; }
  /* el cuadrado queda sobre el trazo, que en celular corre a 8 px del borde */
  .frentes__list li::before { left: calc(8px - 6.5px - var(--gut) - 30px); }
  .detalle__grid { grid-template-columns: 1fr; padding-left: 0; }
  .indice { display: none; }
  .bloques { grid-template-columns: 1fr; }
  .faq__a p { padding-right: 0; }
  .otras__list { grid-template-columns: 1fr; padding-left: 0; }
  .cierre__actions { margin-left: 0; }
  .firma, .cierre { padding-top: 18vh; }
  .firma__inner { grid-template-columns: 1fr; }
  .firma__retrato { width: min(78%, 360px); margin-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .s-hero__title { animation: none; }
  .faq__list details::details-content { transition: none; }
  .indice a > span { transition: none; }
}

/* ---------- variantes de la plantilla (según lo que tenga cada área) ---------- */
/* cuando el sitio usa el rótulo como H1 y el título grande como H2, se ven igual */
.s-hero__eyebrow { margin: 0 0 22px; }

/* la mirada del equipo: cita sin retrato, a todo el ancho */
.firma--equipo .firma__inner { grid-template-columns: minmax(0, 1fr); }
.firma--equipo blockquote { margin: 0; }
.firma--equipo blockquote p { max-width: 14.56em; /* 26ch de Hanken */ font-size: clamp(2.125rem, 4.8vw, 5.25rem); }
.firma--equipo figcaption { font-weight: 650; }

/* proyectos: una tira que se desliza de costado */
.proyectos { position: relative; padding: 16vh 0 14vh; overflow: hidden; }
.proyectos .head-row { margin-bottom: 28px; }
.proyectos__hint { font-size: 0.875rem; font-weight: 600; color: var(--gray); margin-bottom: clamp(40px, 7vh, 72px); padding-left: calc(min(13%, 200px) + 20px); }
.proyectos__list {
  list-style: none; margin: 0; padding: 0 var(--gut) 12px calc(var(--gut) + min(13%, 200px) + 20px);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 24vw); gap: 0;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: calc(var(--gut) + min(13%, 200px) + 20px); scrollbar-width: none; cursor: grab; outline-offset: 6px;
}
.proyectos__list::-webkit-scrollbar { display: none; }
.proyectos__list.is-drag { cursor: grabbing; scroll-snap-type: none; }
.proyectos__list li { scroll-snap-align: start; padding: 26px 28px 26px 0; margin-right: 28px; border-top: 1.5px solid var(--ink); }
.proyectos__list b {
  display: block; font-size: clamp(1.5rem, 2.2vw, 2.25rem); line-height: 1.02; letter-spacing: -0.03em;
  font-weight: 700; font-variation-settings: "wght" 700; text-wrap: balance;
}
.proyectos__list span { display: block; margin-top: 12px; color: var(--gray); font-size: 0.9375rem; }

/* guía para emprendedores: formulario sobre fondo oscuro */
.guia { position: relative; background: var(--ink); color: var(--white); padding: 16vh 0; }
.guia .tag { color: var(--orange); }
.guia h2 { font-size: clamp(2.375rem, 4.6vw, 4.75rem); line-height: 0.96; letter-spacing: -0.035em; margin: 18px 0 22px; }
.guia .lead { color: var(--gray-d); }
.guia__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 112px); align-items: end; }
.guia__form { display: grid; gap: 18px; }
.guia__form label { display: grid; gap: 8px; font-size: 0.875rem; font-weight: 600; color: var(--gray-d); }
.guia__form input {
  font: inherit; font-size: 1.0625rem; color: var(--white); background: transparent; border: 0; border-bottom: 1.5px solid var(--rule-d);
  padding: 10px 0; border-radius: 0; transition: border-color 200ms ease;
}
.guia__form input::placeholder { color: rgba(255,255,255,.32); }
.guia__form input:focus { outline: none; border-bottom-color: var(--orange); }
.guia__form .btn { justify-self: start; margin-top: 10px; }
.guia__ok { color: var(--white); font-weight: 600; }
.guia__ok a { color: var(--orange); }

@media (max-width: 820px) {
  .proyectos__hint { padding-left: 0; }
  .proyectos__list { padding-left: var(--gut); scroll-padding-left: var(--gut); grid-auto-columns: 72vw; }
  .guia__grid { grid-template-columns: 1fr; }
}

/* ---------- socios recortados (sin fondo): emergen desde la línea de base ---------- */
.recorte { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.recorte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: grayscale(1) contrast(1.06); transform-origin: 50% 100%; }
.recorte::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; }
.recorte::before { content: ""; position: absolute; left: 0; bottom: 0; width: 16px; height: 16px; background: var(--orange); z-index: 2; }
.firma .recorte { color: var(--ink); }
.firma .recorte::before { background: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .js .recorte::after { transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-in-out); }
  .js .recorte::before { transform: scale(0); transition: transform 500ms var(--ease-out) 1500ms; }
  .js .recorte img { clip-path: inset(100% 0 0 0); transform: translateY(14%) scale(1.04); transition: clip-path 1500ms var(--ease-out) 450ms, transform 1800ms var(--ease-out) 450ms, filter 600ms ease; }
  .js .recorte.is-in::after { transform: none; }
  .js .recorte.is-in::before { transform: none; }
  .js .recorte.is-in img { clip-path: inset(0 0 0 0); transform: none; }
}
@media (hover: hover) and (pointer: fine) { .recorte:hover img { filter: grayscale(0) contrast(1); } }

/* ---------- cartelera de flyers (Derecho del Entretenimiento; pedido de Juan, 1/10: que el módulo genere impacto) ----------
   Afiches grandes en una tira que se arrastra. El trazo cruza por dentro de la tira y es su línea de tiempo (un cuadrado y el
   año en cada temporada); a medida que su punta pasa, cada afiche se enciende: toma color y sube (servicio.js, .is-lit).
   Con el mouse, el afiche se inclina siguiendo el cursor. Sin JS o con movimiento reducido: todos encendidos y quietos. */
.proyectos__list.con-flyers {
  grid-auto-columns: clamp(250px, 24vw, 420px); gap: clamp(20px, 2.4vw, 40px);
  padding-top: 100px; padding-bottom: 32px; align-items: start;
}
.con-flyers li { position: relative; padding: 0; margin: 0; border-top: 0; }
/* el cuadrado de cada afiche, sobre la línea (cruza 30 px debajo del borde de la tira, 70 px arriba de cada afiche); el año, encima */
.con-flyers li::before {
  content: ""; position: absolute; left: 0; top: -76.5px; width: 13px; height: 13px;
  background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink);
  transition: background-color 300ms ease, box-shadow 300ms ease, transform 420ms var(--ease-out);
}
.con-flyers li.is-lit::before { background: var(--orange); box-shadow: inset 0 0 0 1.5px var(--orange); transform: scale(1.25); }
.proyectos__anio { position: absolute; left: 0; top: -98px; line-height: 1; font-style: normal; font-size: 0.875rem; font-weight: 650; color: var(--gray); transition: color 300ms ease; }
.con-flyers li.is-lit .proyectos__anio { color: var(--ink); }
.proyectos__flyer {
  margin: 0 0 18px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--rule);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 500ms var(--ease-out), filter 800ms ease, opacity 600ms ease, translate 800ms var(--ease-out), scale 800ms var(--ease-out);
}
.proyectos__flyer img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.con-flyers b { font-size: clamp(1.25rem, 1.6vw, 1.75rem); }
@media (prefers-reduced-motion: no-preference) {
  .js .con-flyers li:not(.is-lit) .proyectos__flyer { filter: grayscale(1) contrast(1.05); opacity: 0.45; translate: 0 24px; scale: 0.96; }
  .js .con-flyers li:not(.is-lit) :is(b, span) { opacity: 0.4; }
  .con-flyers li :is(b, span) { transition: opacity 600ms ease; }
}
@media (hover: hover) and (pointer: fine) {
  .con-flyers li.is-lit:hover .proyectos__flyer { scale: 1.03; transition: transform 160ms linear, scale 420ms var(--ease-out), filter 800ms ease, opacity 600ms ease, translate 800ms var(--ease-out); }
  .con-flyers li:hover::before { transform: scale(1.5); }
}
@media (max-width: 820px) { .proyectos__list.con-flyers { grid-auto-columns: 68vw; } }

/* la barra de la cartelera: invita a recorrerla (pedido de Juan, 1/10: "algo más visual para invitar a deslizar").
   Flechas con el gesto de los botones, cuántos afiches se ven de cuántos, y el aviso. En escritorio, sobre la tira, el cursor
   pasa a ser un cuadrado naranja que dice "Arrastrá"; al entrar a la pantalla la tira amaga correrse (servicio.js) */
.cartel-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-left: calc(min(13%, 200px) + 20px); margin-bottom: clamp(8px, 2vh, 24px); }
.cartel-nav__btn { width: 56px; min-height: 56px; padding: 0; justify-content: center; font-size: 1.375rem; color: var(--ink); background: transparent; border: 0; cursor: pointer; }
.cartel-nav__btn:disabled { opacity: 0.28; cursor: default; pointer-events: none; }
.cartel-nav__cuenta { margin: 0 0 0 14px; font-size: clamp(1.375rem, 1.8vw, 2rem); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.cartel-nav__cuenta span { color: var(--gray); font-weight: 500; }
.cartel-nav__hint { margin: 0 0 0 auto; font-size: 1rem; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 14px; }
.cartel-nav__hint::before { content: ""; flex: none; width: 56px; height: 3px; background: var(--orange); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .cartel-nav__hint::before { animation: cartel-tira 2.4s var(--ease-in-out) infinite; }
  @keyframes cartel-tira { 0% { transform: scaleX(0); transform-origin: left; } 45% { transform: scaleX(1); transform-origin: left; } 55% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
}
@media (max-width: 820px) {
  .cartel-nav { padding-left: 0; gap: 10px; }
  .cartel-nav__btn { width: 52px; min-height: 52px; }
  .cartel-nav__hint { order: -1; flex-basis: 100%; margin: 0 0 14px; font-size: 0.9375rem; gap: 12px; }
  .cartel-nav__hint::before { width: 28px; }
}
/* el cursor "Arrastrá" (solo con mouse) */
.cartel-cursor {
  position: fixed; left: 0; top: 0; z-index: 30; width: 112px; height: 112px; margin: -56px 0 0 -56px; pointer-events: none;
  display: grid; place-items: center; background: var(--orange); color: var(--white); font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.01em;
  opacity: 0; scale: 0.5; transition: opacity 200ms ease, scale 260ms var(--ease-out);
}
.cartel-cursor::before, .cartel-cursor::after { position: absolute; top: 50%; translate: 0 -50%; font-size: 1rem; transition: translate 260ms var(--ease-out); }
.cartel-cursor::before { content: "\2190"; left: 12px; }
.cartel-cursor::after { content: "\2192"; right: 12px; }
.cartel-cursor.is-on { opacity: 1; scale: 1; }
.cartel-cursor.is-drag { scale: 0.82; }
.cartel-cursor.is-drag::before { translate: -5px -50%; }
.cartel-cursor.is-drag::after { translate: 5px -50%; }
@media (hover: hover) and (pointer: fine) { .proyectos__list.con-flyers.con-cursor, .proyectos__list.con-flyers.con-cursor * { cursor: none; } }
.vista-alta .s-hero { min-height: 760px; }   /* render de Google: ver home.css */