/* La Subtituleta · estilos. Reglas en ESTETICA-LS.md */
:root {
  --navy: #0C2B4A;
  --red: #B82121;
  --red-hover: #8F1A1A;
  --cream: #F8EBC9;
  --white: #FFFFFF;
  --radius: 14px;
  --gutter: clamp(20px, 5vw, 56px);
  --maxw: 1180px;
  --font-title: "termina", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-title); margin: 0; font-weight: 400; line-height: 1.12; }
p { margin: 0; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 0; background: var(--cream); color: var(--navy); padding: 10px 14px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

/* Foco visible */
a:focus-visible, button:focus-visible, summary:focus-visible, [role="tab"]:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--red);
}
.on-cream a:focus-visible, .on-cream button:focus-visible, .on-cream summary:focus-visible, .on-cream [role="tab"]:focus-visible {
  outline-color: var(--navy);
  box-shadow: 0 0 0 6px var(--cream);
}

/* Header */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter);
}
.site-header .logo img { height: 40px; width: auto; }
.lang {
  display: inline-flex; gap: 2px; padding: 4px;
  border: 1px solid rgba(248, 235, 201, .45); border-radius: var(--radius);
  font-size: .875rem; font-weight: 600; letter-spacing: .04em;
}
.lang a { text-decoration: none; padding: 4px 10px; border-radius: 10px; opacity: .8; }
.lang a[aria-current="true"] { background: var(--cream); color: var(--navy); opacity: 1; }
.lang a:hover { opacity: 1; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px;
  border-radius: var(--radius); border: 2px solid transparent;
  font: 700 .9375rem/1.1 var(--font-body); letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn-primary { background: var(--red); color: var(--cream); }
.btn-primary:hover { background: var(--red-hover); }
.btn-ghost { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn-ghost:hover { background: var(--cream); color: var(--navy); }
.on-cream .btn-ghost { color: var(--navy); border-color: var(--navy); }
.on-cream .btn-ghost:hover { background: var(--navy); color: var(--cream); }

/* Hero */
.hero { position: relative; background: var(--navy); padding-top: clamp(112px, 17vh, 180px); overflow: hidden; }
.hero-inner { text-align: center; position: relative; z-index: 2; }
.hero h1 { font-size: clamp(1.7rem, 4.6vw, 3.7rem); line-height: 1.14; letter-spacing: -.01em; text-wrap: balance; }
.hero h1 .h-reg { display: block; font-weight: 400; }
.hero h1 .h-bold { display: block; font-weight: 800; margin-top: .12em; }
.hero-sub { max-width: 46ch; margin: clamp(18px, 2.4vw, 28px) auto 0; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; opacity: .94; text-wrap: pretty; }
.hero-sub strong { font-weight: 700; color: var(--white); }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(24px, 3vw, 34px); }
.micro { margin-top: 16px; font-size: .875rem; letter-spacing: .02em; opacity: .75; }
.hero-art { position: relative; margin-top: clamp(24px, 4vw, 52px); }
.hero-art::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 55%; background: linear-gradient(var(--navy) 0%, rgba(12, 43, 74, 0) 100%); z-index: 1; }
.hero-art img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 62%; }
@media (max-width: 640px) {
  .hero-art img { aspect-ratio: 4 / 3; }
  .cta .btn { width: 100%; max-width: 340px; }
  .site-header .logo img { height: 36px; }
}

/* Secciones comunes */
.sec { padding: clamp(64px, 9vw, 120px) 0; }
.sec-cream { background: var(--cream); color: var(--navy); }
.sec-navy { background: var(--navy); color: var(--cream); }
.sec-red { background: var(--red); color: var(--cream); }
.sec-title { font-size: clamp(1.6rem, 3.6vw, 2.9rem); line-height: 1.14; letter-spacing: -.01em; text-wrap: balance; max-width: 22ch; }
.sec-title .h-reg { display: block; font-weight: 400; }
.sec-title .h-bold { display: block; font-weight: 800; margin-top: .1em; }

/* Qué hace */
.cards { list-style: none; margin: clamp(32px, 5vw, 56px) 0 0; padding: 0; display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: 1fr; }
@media (min-width: 820px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { position: relative; border: 2px solid var(--navy); border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 12px; }
.card-num { font-family: var(--font-title); font-weight: 800; font-size: 1rem; color: var(--red); letter-spacing: .04em; }
.card h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 800; line-height: 1.18; text-wrap: balance; }
.card p { font-size: 1.0625rem; line-height: 1.55; max-width: 52ch; }
.quote { margin: auto 0 0; padding-top: 14px; }
.quote blockquote { margin: 0; padding-left: 14px; border-left: 3px solid var(--red); font-size: .98rem; line-height: 1.5; }
.quote figcaption { margin-top: 8px; padding-left: 17px; font-size: .85rem; font-weight: 600; letter-spacing: .02em; opacity: .8; }
.quote .tr { font-weight: 400; opacity: .85; }

/* Elegí tu motor */
.sec-sub { margin-top: clamp(16px, 2vw, 24px); max-width: 60ch; font-size: clamp(1.0625rem, 1.4vw, 1.2rem); opacity: .92; text-wrap: pretty; }
.engines { list-style: none; margin: clamp(32px, 5vw, 56px) 0 0; padding: 0; display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: 1fr; }
@media (min-width: 760px) { .engines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1360px) { .engines { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.engine { background: var(--cream); color: var(--navy); border-radius: var(--radius); padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 14px; }
.engine h3 { font-size: clamp(1.3rem, 1.8vw, 1.55rem); font-weight: 800; line-height: 1.1; }
.engine h3 span { display: block; font-weight: 400; font-size: .75em; margin-top: 2px; }
.engine-does { font-size: 1rem; line-height: 1.5; }
.engine-credit { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy); margin-top: 4px; }
.credit-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.engine-credit strong { font-family: var(--font-title); font-weight: 800; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.15; }
.credit-sub { font-size: .92rem; opacity: .85; }
.engine-note { font-size: .875rem; line-height: 1.45; opacity: .85; margin-top: -4px; }
.engine .btn { width: 100%; padding-inline: 14px; margin-top: auto; }
.foot { margin-top: clamp(24px, 3vw, 36px); font-size: .875rem; line-height: 1.55; max-width: 70ch; opacity: .75; }

/* Instalación + parrilla */
.install { padding-bottom: clamp(56px, 8vw, 100px); }
.grille { position: relative; margin-top: clamp(28px, 4vw, 48px); aspect-ratio: 1600 / 320; overflow: hidden; }
.grille img { width: 100%; height: 100%; object-fit: cover; }
.hs { position: absolute; display: block; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.hs::before { content: ""; position: absolute; inset: -14px; }
.hs-win { left: 39.313%; top: 20.625%; width: 8.313%; height: 49.375%; }
.hs-mac { left: 50.125%; top: 18.750%; width: 7.938%; height: 52.188%; }
.hs svg { width: 100%; height: 100%; overflow: visible; }
.hs-shape { fill: #fff; opacity: 0; transition: opacity .18s ease; }
.hs:hover .hs-shape, .hs:focus-visible .hs-shape { opacity: .95; }
.hs-label {
  position: absolute; left: 50%; top: calc(100% + 16px); transform: translate(-50%, -4px);
  background: var(--cream); color: var(--navy); font: 700 .8rem/1 var(--font-body); letter-spacing: .05em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.hs:hover .hs-label, .hs:focus-visible .hs-label { opacity: 1; transform: translate(-50%, 0); }
.hs:focus-visible { outline: 3px solid var(--cream); outline-offset: 6px; }
@media (hover: none) {
  .hs-shape { opacity: .5; }
  .hs-label { opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 700px) {
  .hs-win .hs-label { left: auto; right: 40%; transform: none; }
  .hs-mac .hs-label { left: 40%; transform: none; }
  .hs:hover .hs-label, .hs:focus-visible .hs-label { transform: none; }
  .hs-label { top: calc(100% + 10px); padding: 7px 11px; font-size: .72rem; }
}

.steps-wrap { padding-top: clamp(32px, 5vw, 56px); }
.tabs { display: inline-flex; gap: 6px; padding: 5px; border: 1px solid rgba(248, 235, 201, .45); border-radius: var(--radius); }
.tabs button { background: transparent; color: var(--cream); border: 0; padding: 11px 24px; border-radius: 10px; font: 700 .95rem var(--font-body); letter-spacing: .02em; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--cream); color: var(--navy); }
.panel[hidden] { display: none; }
.notice { margin-top: 26px; max-width: 760px; padding: 14px 18px; border: 1px solid rgba(248, 235, 201, .5); border-radius: var(--radius); font-size: .98rem; }
.steps { list-style: none; counter-reset: step; margin: 28px 0; padding: 0; display: grid; gap: 22px; max-width: 760px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.4rem 1fr; column-gap: 14px; }
.steps li::before { content: counter(step); grid-row: 1 / 3; font-family: var(--font-title); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--cream); opacity: .5; }
.steps h3 { font-size: 1.2rem; font-weight: 800; line-height: 1.2; }
.steps p { margin-top: 4px; opacity: .92; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; background: rgba(248, 235, 201, .14); padding: 2px 7px; border-radius: 6px; font-size: .9em; word-break: break-word; }
.trouble { margin-top: 28px; max-width: 760px; border-top: 1px solid rgba(248, 235, 201, .3); padding-top: 16px; }
.trouble summary { cursor: pointer; font-weight: 700; }
.trouble dt { font-weight: 700; margin-top: 16px; }
.trouble dd { margin: 4px 0 0; opacity: .92; }
.trust { margin-top: 14px; max-width: 760px; font-size: .95rem; opacity: .88; }
.after { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 12px; max-width: 760px; font-size: .95rem; opacity: .92; }
.after a, .trust a { font-weight: 700; text-underline-offset: 3px; }
.panel .btn { margin-top: 4px; }

/* Testimonios */
.feature { background: var(--cream); color: var(--navy); border-radius: var(--radius); padding: clamp(26px, 4vw, 56px); margin-top: clamp(28px, 4vw, 48px); }
.feature-stat { font-family: var(--font-title); font-weight: 800; font-size: clamp(1.8rem, 4.2vw, 3.4rem); line-height: 1.08; color: var(--red); text-wrap: balance; }
.feature-ctx { margin-top: 10px; font-weight: 600; opacity: .85; }
.feature blockquote { margin: 22px 0 0; max-width: 62ch; padding-left: 18px; border-left: 3px solid var(--red); font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.5; }
.who { margin-top: 14px; padding-left: 21px; font-size: .95rem; }
.tcards { display: grid; gap: clamp(14px, 2vw, 22px); margin-top: clamp(14px, 2vw, 22px); grid-template-columns: 1fr; }
@media (min-width: 960px) { .tcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tcard { margin: 0; background: var(--cream); color: var(--navy); border-radius: var(--radius); padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 16px; }
.tcard blockquote { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.tcard figcaption { margin-top: auto; font-size: .9rem; font-weight: 700; line-height: 1.4; }
.tcard figcaption span { display: block; font-weight: 400; opacity: .85; }
.strip { list-style: none; padding: 0; margin: clamp(32px, 4vw, 52px) 0 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid rgba(248, 235, 201, .45); }
@media (min-width: 760px) { .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; } }
.strip li { padding: 18px 0; border-bottom: 1px solid rgba(248, 235, 201, .45); display: flex; flex-direction: column; gap: 6px; }
.strip p { font-family: var(--font-title); font-size: 1.12rem; line-height: 1.32; }
.strip span { font-size: .85rem; font-weight: 600; letter-spacing: .02em; opacity: .92; }
.t-note { margin-top: 18px; font-size: .82rem; opacity: .85; }

/* Preguntas frecuentes */
.faq { margin-top: clamp(28px, 4vw, 48px); max-width: 860px; border-top: 2px solid var(--navy); }
.qa { border-bottom: 2px solid var(--navy); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 4px; font-family: var(--font-title); font-weight: 800; font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.25; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; font-family: var(--font-body); font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--red); transition: transform .2s ease; }
.qa[open] summary::after { content: "\2212"; }
.qa summary:hover { color: var(--red); }
.qa-body { padding: 0 4px 24px; max-width: 70ch; }
.qa-body p { font-size: 1.0625rem; line-height: 1.65; }
.qa-body a { font-weight: 700; text-underline-offset: 3px; }

/* Cierre + pie */
.closing { position: relative; background: var(--navy); color: var(--cream); min-height: clamp(520px, 62vw, 780px); display: flex; align-items: flex-start; overflow: hidden; }
.closing-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.closing::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 43, 74, .94) 0%, rgba(12, 43, 74, .72) 32%, rgba(12, 43, 74, 0) 66%); }
.closing-inner { position: relative; z-index: 2; text-align: center; padding-top: clamp(56px, 9vw, 110px); }
.closing .sec-title { margin-inline: auto; max-width: 18ch; font-size: clamp(2rem, 5vw, 4rem); }
.closing .cta { margin-top: clamp(24px, 3vw, 36px); }

.site-footer { background: var(--navy); color: var(--cream); padding: clamp(40px, 6vw, 72px) 0 40px; border-top: 1px solid rgba(248, 235, 201, .2); }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.foot-logo img { height: 50px; width: auto; }
.foot-quote { font-family: var(--font-title); font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.3; max-width: 34ch; }
.foot-by { margin-top: clamp(28px, 4vw, 40px); }
.foot-by a, .foot-links a { text-underline-offset: 3px; }
.foot-by a { font-weight: 700; }
.foot-links { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font-weight: 600; }
.fine { list-style: none; padding: 0; margin: clamp(28px, 4vw, 44px) 0 0; display: grid; gap: 6px; font-size: .8rem; line-height: 1.5; opacity: .72; max-width: 80ch; }
@media (max-width: 640px) { .closing .cta .btn { width: 100%; max-width: 340px; } }

/* Hero dividido (escritorio): texto a la izquierda, bondi a la derecha */
@media (min-width: 960px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: stretch; padding-top: 0; min-height: min(100svh, 880px); }
  .hero-inner {
    max-width: none; margin: 0; width: 100%; align-self: center; text-align: left;
    padding: clamp(130px, 18vh, 190px) clamp(24px, 3.5vw, 56px) clamp(56px, 8vh, 96px) var(--gutter);
  }
  .hero h1 { font-size: clamp(2rem, 3.6vw, 3.4rem); }
  .hero-sub { margin-left: 0; margin-right: 0; max-width: 44ch; }
  .cta { justify-content: flex-start; }
  .hero-art { margin: 0; position: relative; min-height: 100%; }
  .hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 58%; }
  .hero-art::before { inset: 0 auto 0 0; width: 42%; height: auto; background: linear-gradient(90deg, var(--navy) 0%, rgba(12, 43, 74, 0) 100%); }
}

/* Elegí tu motor v2: logos de marca, sin cortes, botón en una línea */
.engine { padding: clamp(20px, 2vw, 26px); }
.engine .brand { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 66px; font-size: 1rem; }
.logo-mark { display: block; max-width: 100%; background-color: var(--navy); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left center; mask-position: left center; -webkit-mask-size: contain; mask-size: contain; }
.logo-elevenlabs { width: 156px; height: 20px; -webkit-mask-image: url(../logo/partners/elevenlabs.svg); mask-image: url(../logo/partners/elevenlabs.svg); }
.logo-speechmatics { width: 200px; height: 22px; -webkit-mask-image: url(../logo/partners/speechmatics.svg); mask-image: url(../logo/partners/speechmatics.svg); }
.logo-assemblyai { width: 158px; height: 27px; -webkit-mask-image: url(../logo/partners/assemblyai.svg); mask-image: url(../logo/partners/assemblyai.svg); }
.logo-deepgram { width: 132px; height: 29px; -webkit-mask-image: url(../logo/partners/deepgram-a.svg); mask-image: url(../logo/partners/deepgram-a.svg); }
.engine .model { font-family: var(--font-body); font-weight: 600; font-size: .85rem; letter-spacing: .02em; opacity: .75; }
.engine .btn { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 700; white-space: nowrap; min-height: 50px; padding: 12px 10px; }

/* Parrilla recortada para celular */
@media (max-width: 700px) {
  .grille { aspect-ratio: 880 / 320; }
  .hs-win { left: 29.432%; width: 15.114%; }
  .hs-mac { left: 49.091%; width: 14.432%; }
}

/* Afinado: etiquetas de la parrilla a la misma altura y bloques de crédito alineados */
.hs-win .hs-label { top: calc(100% + 20px); }
@media (min-width: 760px) { .engine-does { min-height: 4.5em; } }
@media (min-width: 1360px) { .engine-does { min-height: 6em; } }

/* Celular y tablet: el cartel "La Subtituleta SRT" tiene que verse (hero) y el frente del colectivo centrado (cierre) */
@media (max-width: 959px) {
  /* Hero apilado: fundido corto, para no apagar el cartel del techo */
  .hero-art::before { height: 14%; background: linear-gradient(var(--navy) 0%, rgba(12, 43, 74, 0) 100%); }
  .hero-art img { object-position: 50% 55%; }
}
@media (max-width: 959px) {
  /* Cierre: texto y botones abajo, sobre un degradé desde abajo; el colectivo arriba, con el cartel a la vista */
  .closing { min-height: 620px; align-items: flex-end; }
  .closing-bg { object-position: 92% 30%; }
  .closing::after { background: linear-gradient(0deg, rgba(12, 43, 74, .97) 0%, rgba(12, 43, 74, .9) 36%, rgba(12, 43, 74, .35) 58%, rgba(12, 43, 74, 0) 72%); }
  .closing-inner { padding-top: 0; padding-bottom: clamp(36px, 8vw, 56px); }
  .closing .sec-title { font-size: clamp(1.7rem, 7vw, 2.6rem); }
}

/* Producto: panel de la extensión con pines + cards */
.product { display: grid; gap: clamp(24px, 4vw, 48px); margin-top: clamp(28px, 4vw, 52px); align-items: start; }
.product .cards { margin-top: 0; grid-template-columns: 1fr; }
@media (min-width: 960px) { .product { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); align-items: center; } }
.panel-fig { margin: 0; max-width: 560px; }
.panel-stage { position: relative; border: 2px solid var(--navy); }
.panel-stage img { display: block; width: 100%; height: auto; }
.panel-fig figcaption { margin-top: 10px; font-size: .85rem; opacity: .8; }
.zone { position: absolute; border: 2px solid transparent; border-radius: 4px; transition: border-color .18s ease, background-color .18s ease; pointer-events: none; }
.pin { position: absolute; left: 8px; top: -13px; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: var(--cream); border: 2px solid var(--cream); font: 700 .78rem/1 var(--font-body); display: grid; place-items: center; }
.z1 { left: 1.585%; top: 4.987%; width: 97.2%; height: 7.48%; }
.z2a { left: 1.7%; top: 61.15%; width: 97.1%; height: 11.02%; }
.z2b { left: 50.86%; top: 84.38%; width: 47.95%; height: 4.86%; }
.z3 { left: 1.7%; top: 14.04%; width: 97.1%; height: 24.41%; }
.z4 { left: 1.72%; top: 84.38%; width: 47.95%; height: 4.86%; }
.panel-fig[data-active="1"] .z1, .panel-fig[data-active="2"] .z2a, .panel-fig[data-active="2"] .z2b, .panel-fig[data-active="3"] .z3, .panel-fig[data-active="4"] .z4 { border-color: var(--cream); background-color: rgba(248, 235, 201, .16); }
.textlink { font-weight: 700; color: var(--red); text-underline-offset: 3px; }

/* Aprendé a usarla */
.tuts { list-style: none; padding: 0; margin: clamp(28px, 4vw, 48px) 0 0; display: grid; gap: clamp(18px, 2.4vw, 28px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.tut a { display: flex; flex-direction: column; gap: 10px; height: 100%; text-decoration: none; color: var(--navy); }
.thumb { position: relative; display: block; overflow: hidden; border: 2px solid var(--navy); }
.thumb img { display: block; width: 100%; height: auto; transition: transform .3s ease; }
.tut a:hover .thumb img { transform: scale(1.03); }
.dur { position: absolute; right: 8px; bottom: 8px; background: var(--navy); color: var(--cream); font: 700 .78rem/1 var(--font-body); padding: 5px 7px; border-radius: 4px; }
.tut h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 800; line-height: 1.2; text-wrap: balance; }
.tut p { font-size: 1rem; line-height: 1.5; }
.watch { margin-top: auto; font-weight: 700; color: var(--red); }
.tut a:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.more { margin-top: clamp(20px, 3vw, 32px); }
.more a { font-weight: 700; text-underline-offset: 3px; }

/* Instalación: captura de Configuración junto a los pasos */
.setfig { margin: 28px 0 0; max-width: 520px; }
.setfig img { display: block; width: 100%; height: auto; border: 1px solid rgba(248, 235, 201, .4); }
.setfig figcaption { margin-top: 10px; font-size: .88rem; opacity: .85; }
@media (min-width: 1000px) {
  .steps-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: 56px; align-items: start; }
  .steps-wrap > * { grid-column: 1; }
  .steps-wrap > .setfig { grid-column: 2; grid-row: 1 / span 4; margin-top: 8px; }
}

/* Afinado del panel: pines en el borde izquierdo (no tapan los títulos) y panel fijo mientras se leen las tarjetas */
.pin { left: -15px; top: calc(50% - 13px); }
@media (min-width: 960px) { .product { align-items: start; } .panel-fig { position: sticky; top: 24px; } }
.pin { left: -27px; }

/* Cierre v3 (2026-10-02): texto y degradé abajo en todos los tamaños, botones centrados y el cartel del colectivo siempre a la vista */
.closing { align-items: flex-end; }
.closing-bg { object-position: center top; }
.closing::after { background: linear-gradient(0deg, rgba(12, 43, 74, .97) 0%, rgba(12, 43, 74, .9) 30%, rgba(12, 43, 74, .35) 52%, rgba(12, 43, 74, 0) 66%); }
.closing-inner { padding-top: 0; padding-bottom: clamp(40px, 6vw, 72px); }
.closing .cta { justify-content: center; }
@media (max-width: 959px) { .closing-bg { object-position: 92% 30%; } }

/* Títulos en un solo renglón (primera parte regular, remate en bold) */
.sec-title.one-line { max-width: none; }
.sec-title.one-line .h-reg, .sec-title.one-line .h-bold { display: inline; margin-top: 0; }

/* Celular v2 (2026-10-02) */
@media (max-width: 700px) {
  /* Parrilla limpia: sin etiquetas ni velo blanco (las zonas siguen siendo tocables) */
  .hs-label { display: none; }
  .hs-shape { opacity: 0 !important; }
  /* Cierre: la foto del frente (cartel) arriba, con su proporción original, y el texto debajo sobre azul */
  .closing { display: block; min-height: 0; overflow: visible; }
  .closing::after { display: none; }
  .closing-pic { display: block; position: relative; }
  .closing-bg { position: static; width: 100%; height: auto; aspect-ratio: 1668 / 943; object-fit: cover; object-position: center; }
  .closing-pic::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(0deg, var(--navy) 0%, rgba(12, 43, 74, 0) 100%); }
  .closing-inner { padding-top: 4px; padding-bottom: clamp(36px, 9vw, 56px); }
}

/* Menos aire entre "Elegí tu motor" e "Instalación" (ambas azules) */
section#motor, section#engine { padding-bottom: clamp(24px, 4vw, 48px); }
.sec-navy.install { padding-top: clamp(32px, 5vw, 64px); }