/*!
 * tratamientos-r3.css · /tratamientos/ y sus 7 páginas, "La cabina por dentro" (agente D, R3 26-oct-2026)
 * Va después de carta.css (y de carta-sitio.css, que pone el header). Prefijo .tr-
 * Contrato: saracosme.com/tratamientos/r3/design/DESIGN.md (sobre el de la portada nueva).
 * Movimiento (4 familias): planos del héroe, corte de piel fijo, trazos/cortinas de entrada, escalera ligada al scroll.
 * Solo transform y opacity (más stroke-dashoffset en los trazos SVG). Sin listeners de scroll.
 */
.carta.tr {
  --cab: 64px;
  --tr-ancho: 1200px;
  --tr-lento: 600ms cubic-bezier(.2, .7, .2, 1);
  --tr-filete: rgba(46, 42, 36, .13);
  --tr-panel: rgba(255, 250, 243, .95);
  overflow-x: clip;
  padding-bottom: 0;
  font-size: 1.0625rem;
}
@media (min-width: 900px) { .carta.tr { --cab: 73px; font-size: 1.125rem; } }
.wp-block-post-content:has(> .carta.tr) { margin-block-start: 0 !important; }
.wp-block-post-content > .carta.tr { margin-block: 0 !important; }
.wp-block-post-content:has(> .carta.tr) + * { margin-block-start: 0 !important; }

.carta.tr p { max-width: 64ch; }
.carta .tr-contenedor { max-width: var(--tr-ancho); margin-inline: auto; padding-inline: 20px; position: relative; }
@media (min-width: 900px) { .carta .tr-contenedor { padding-inline: 48px; } }
.carta .tr-cifra { font-family: var(--f-display); font-weight: 500; font-variant-numeric: lining-nums; }
.carta .tr-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.carta .tr-ilustrativa { position: absolute; right: 10px; top: 10px; z-index: 6; font: 400 .8125rem/1 var(--f-texto); color: #fff; background: rgba(46, 42, 36, .78); padding: 6px 9px; border-radius: 2px; letter-spacing: .02em; }
.carta .tr-nota { font-size: 1.0625rem; color: var(--c-tinta-2); margin-top: 18px; }
.carta.tr h2 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem); line-height: 1.04; letter-spacing: -.012em; }
.carta.tr h2 em { color: var(--c-oliva-hondo); }
.carta.tr .c-enlace { font-size: 1.0625rem; }
.carta.tr .c-btn { font-size: 1rem; min-height: 54px; }

/* Migas */
.carta .tr-migas { position: relative; z-index: 7; max-width: var(--tr-ancho); margin-inline: auto; padding: 14px 20px 0; }
.carta .tr-migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .9375rem; color: var(--c-tinta-2); }
.carta .tr-migas li + li::before { content: "›"; margin-right: 10px; color: var(--c-oliva); }
.carta .tr-migas a { color: var(--c-tinta-2); }
@media (min-width: 900px) { .carta .tr-migas { padding-inline: 48px; position: absolute; left: 0; right: 0; } }

/* Fotos: fondo dibujado mientras carga o si falta (sin icono roto) */
.carta .tr-foto { position: relative; margin: 0; overflow: hidden; background-color: var(--c-lienzo); background-image: repeating-linear-gradient(135deg, rgba(134, 111, 59, .09) 0 1px, transparent 1px 14px); }
.carta .tr-foto img { width: 100%; height: 100%; object-fit: cover; }
.carta .tr-foto.is-sin-foto img { visibility: hidden; }

/* Guías verticales (retícula técnica) y el rayo que corre por ellas */
.carta .tr-guia { position: relative; overflow: clip; }
@media (min-width: 900px) {
  .carta .tr-guia { background-image: linear-gradient(var(--tr-filete), var(--tr-filete)), linear-gradient(var(--tr-filete), var(--tr-filete)); background-size: 1px 100%, 1px 100%; background-repeat: no-repeat; background-position: max(24px, calc(50% - 600px)) 0, min(calc(100% - 24px), calc(50% + 600px)) 0; }
  .carta .tr-guia > .tr-rayo { position: absolute; top: 0; bottom: 0; left: max(24px, calc(50% - 600px)); width: 1px; pointer-events: none; background: linear-gradient(to bottom, transparent calc(100% - 160px), var(--c-oliva) calc(100% - 30px), transparent 100%); transform: translateY(-100%); animation: tr-rayo 7s linear infinite; }
}
@keyframes tr-rayo { to { transform: translateY(100%); } }

/* ===================================================== HÉROE */
.carta .tr-hero { position: relative; background: var(--c-crema); view-timeline: --trhero block; }
.carta .tr-hero__escena { position: relative; height: clamp(260px, 44svh, 400px); overflow: hidden; }
.carta .tr-capa { position: absolute; margin: 0; translate: calc(var(--px, 0) * var(--d, 0px)) calc(var(--py, 0) * var(--d, 0px)); transition: translate 700ms cubic-bezier(.2, .7, .2, 1); }
.carta .tr-capa--foto { inset: 0; --d: 6px; }
.carta .tr-capa--foto .tr-mov { position: absolute; inset: -3%; }
.carta .tr-foto--hero { width: 100%; height: 100%; }
.carta .tr-capa--linea { --d: 24px; z-index: 4; left: -2%; bottom: -10%; width: 36%; max-width: 220px; pointer-events: none; }
.carta .tr-aparato { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 1px 0 rgba(255, 250, 243, .9)); }
.carta .tr-hero__texto { position: relative; z-index: 3; padding: 26px 20px 8px; }
.carta .tr-hero h1 { font-size: clamp(2.3rem, 1.15rem + 4.6vw, 4.6rem); line-height: 1.0; letter-spacing: -.018em; margin-top: 14px; overflow-wrap: anywhere; hyphens: manual; }
.carta .tr-hero h1 em { display: block; font-size: .56em; line-height: 1.15; margin-top: 8px; color: var(--c-oliva-hondo); }
.carta.tr .tr-hero__texto > p.tr-lead { font-size: 1.125rem; line-height: 1.6; color: var(--c-cafe); margin-top: 18px; max-width: 40ch; }
.carta .tr-acciones { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 24px; }
.carta .tr-acciones .c-btn { min-width: 260px; }
.carta .tr-ficha { position: relative; z-index: 5; margin: 26px 20px 48px; background: var(--c-crema); border: 1px solid var(--c-arena); padding: 20px 20px 8px; }
.carta .tr-ficha__titulo { font: italic 500 1.5rem/1.1 var(--f-display); color: var(--c-oliva-hondo); margin-bottom: 10px; }
.carta .tr-ficha dl { margin: 0; }
.carta .tr-ficha dl > div { display: grid; grid-template-columns: 8.2rem 1fr; gap: 10px; padding: 11px 0; border-top: 1px solid var(--c-arena); }
.carta .tr-ficha dt { font: 600 .8125rem/1.5 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--c-oliva-hondo); }
.carta .tr-ficha dd { margin: 0; font-size: 1.0625rem; color: var(--c-cafe); }
.carta .tr-ficha .tr-cifra { font-size: 1.35rem; }
@media (min-width: 600px) and (max-width: 899px) {
  .carta .tr-hero__texto { padding: 32px 40px 8px; }
  .carta .tr-ficha { margin-inline: 40px; }
  .carta .tr-capa--linea { width: 28%; }
}
@media (min-width: 900px) {
  .carta .tr-hero { min-height: clamp(660px, calc(100svh - var(--cab)), 940px); display: grid; align-items: center; }
  .carta .tr-hero__escena { position: absolute; inset: 0 0 0 46%; height: auto; }
  .carta .tr-capa--foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--c-crema) 0%, rgba(255, 250, 243, .55) 16%, rgba(255, 250, 243, 0) 40%); pointer-events: none; }
  .carta .tr-capa--linea { left: -7%; top: 5%; bottom: auto; width: clamp(200px, 19vw, 300px); max-width: none; }
  .carta .tr-hero__texto { width: 100%; max-width: var(--tr-ancho); margin-inline: auto; padding: 120px 48px 96px; }
  .carta .tr-hero__texto > * { max-width: 540px; }
  .carta.tr .tr-hero__texto > p.tr-lead { font-size: 1.25rem; max-width: 36ch; }
  .carta .tr-acciones { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 18px 28px; }
  .carta .tr-acciones .c-btn { min-width: 0; }
  .carta .tr-ficha { position: absolute; margin: 0; right: max(32px, calc((100vw - var(--tr-ancho)) / 2 + 32px)); bottom: 40px; width: 360px; background: var(--tr-panel); --d: 14px; translate: calc(var(--px, 0) * var(--d)) calc(var(--py, 0) * var(--d)); transition: translate 700ms cubic-bezier(.2, .7, .2, 1); }
  .carta .tr-ilustrativa { right: 16px; top: 16px; }
}

/* Entrada del héroe y trazo del aparato (una vez al cargar) */
@keyframes tr-entrada { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tr-dibuja { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tr-foto-entra { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.carta .tr-entra { animation: tr-entrada var(--tr-lento) both; animation-delay: calc(var(--i, 0) * 80ms + 80ms); }
.carta .tr-foto--hero img { animation: tr-foto-entra 1400ms cubic-bezier(.2, .7, .2, 1) both; }
.carta .tr-aparato .d-trazo { stroke-dasharray: 1; animation: tr-dibuja 1800ms 350ms cubic-bezier(.6, 0, .2, 1) both; }
.carta .tr-aparato .tr-dibujo > :not(.d-trazo) { animation: tr-entrada 700ms 1500ms both; }

/* Salida del héroe con el scroll (profundidad por planos) */
@keyframes tr-sale-foto { to { transform: translateY(8%) scale(1.04); } }
@keyframes tr-sale-linea { to { transform: translateY(-38%) rotate(-4deg); } }
@keyframes tr-sale-ficha { to { transform: translateY(-18%); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .carta .tr-capa--foto .tr-mov { animation: tr-sale-foto linear both; animation-timeline: --trhero; animation-range: exit 0% exit 100%; }
    .carta .tr-capa--linea .tr-mov { animation: tr-sale-linea linear both; animation-timeline: --trhero; animation-range: exit 0% exit 100%; }
  }
}
@media (min-width: 900px) {
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .carta .tr-ficha { animation: tr-entrada var(--tr-lento) both, tr-sale-ficha linear both; animation-delay: 400ms, 0s; animation-timeline: auto, --trhero; animation-range: normal, exit 0% exit 100%; }
    }
  }
}

/* ===================================================== PICO: el corte de piel fijo */
.carta .tr-como { position: relative; background: var(--c-crema); padding-top: clamp(56px, 8vw, 112px); border-top: 1px solid var(--tr-filete); }
.carta .tr-como__cabeza p { margin-top: 12px; font-size: 1.125rem; color: var(--c-tinta-2); }
.carta .tr-como__rejilla { position: relative; margin-top: 28px; }
.carta .tr-diag { position: sticky; top: var(--cab); z-index: 3; margin: 0; height: 48svh; min-height: 300px; background: var(--c-crema); border-block: 1px solid var(--c-arena); display: grid; grid-template-rows: 1fr auto; }
.carta .tr-diag__lienzo { position: relative; min-height: 0; padding: 8px 12px 0; }
.carta .tr-svg { width: 100%; height: 100%; display: block; }
.carta .tr-diag__pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 16px 10px; font-size: 1rem; color: var(--c-tinta-2); }
.carta .tr-diag__capa strong { font-weight: 500; color: var(--c-cafe); }
.carta .tr-diag__puntos { display: inline-flex; gap: 6px; }
.carta .tr-diag__puntos i { width: 8px; height: 8px; border: 1px solid var(--c-oliva); border-radius: 50%; transition: transform 300ms ease-out, background-color 300ms ease-out; }
.carta .tr-diag[data-paso="1"] .tr-diag__puntos i[data-i="1"], .carta .tr-diag[data-paso="2"] .tr-diag__puntos i[data-i="2"], .carta .tr-diag[data-paso="3"] .tr-diag__puntos i[data-i="3"], .carta .tr-diag[data-paso="4"] .tr-diag__puntos i[data-i="4"], .carta .tr-diag[data-paso="5"] .tr-diag__puntos i[data-i="5"] { background: var(--c-oliva-hondo); transform: scale(1.3); }
.carta .tr-pasos { list-style: none; margin: 0; padding: 0; position: relative; z-index: 2; }
.carta .tr-paso { min-height: 52svh; padding: 26px 20px 30px; border-bottom: 1px solid var(--tr-filete); }
.carta .tr-paso__n { font: 600 .875rem/1.2 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--c-oliva-hondo); }
.carta .tr-paso h3 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); margin-top: 8px; }
.carta .tr-paso p:not(.tr-paso__n) { margin-top: 10px; font-size: 1.125rem; color: var(--c-cafe); }
.tr-js .carta .tr-paso { transition: opacity 500ms ease-out; }
.tr-js .carta .tr-paso:not(.is-activo) { opacity: .42; }
.carta .tr-pasos::after { content: ""; display: block; height: 10svh; }
@media (min-width: 600px) and (max-width: 899px) { .carta .tr-paso { padding-inline: 40px; } }
@media (min-width: 900px) {
  .carta .tr-como__rejilla { max-width: var(--tr-ancho); margin: 40px auto 0; padding-inline: 48px; display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
  .carta .tr-diag { grid-column: 2; grid-row: 1; top: calc(var(--cab) + 7svh); height: auto; min-height: 0; border: 1px solid var(--c-arena); }
  .carta .tr-diag__lienzo { aspect-ratio: 600 / 590; max-height: calc(100svh - var(--cab) - 14svh - 52px); padding: 14px 18px 0; }
  .carta .tr-pasos { grid-column: 1; grid-row: 1; padding-top: 6svh; }
  .carta .tr-paso { min-height: 70svh; display: flex; flex-direction: column; justify-content: center; padding: 0; border-bottom: 0; }
  .carta .tr-paso + .tr-paso { border-top: 1px solid var(--tr-filete); }
  .carta .tr-pasos::after { height: 24svh; }
}

/* Estados del diagrama (los grupos se prenden por paso) */
.carta .tr-diag [class*="d-p-"], .carta .tr-diag [class*="d-desde-"], .carta .tr-diag [class*="d-hasta-"] { opacity: 0; transition: opacity 500ms ease-out; }
.carta .tr-diag[data-paso="1"] .d-p-1, .carta .tr-diag[data-paso="2"] .d-p-2, .carta .tr-diag[data-paso="3"] .d-p-3, .carta .tr-diag[data-paso="4"] .d-p-4, .carta .tr-diag[data-paso="5"] .d-p-5,
.carta .tr-diag[data-paso="2"] .d-desde-2, .carta .tr-diag[data-paso="3"] .d-desde-2, .carta .tr-diag[data-paso="4"] .d-desde-2, .carta .tr-diag[data-paso="5"] .d-desde-2,
.carta .tr-diag[data-paso="3"] .d-desde-3, .carta .tr-diag[data-paso="4"] .d-desde-3, .carta .tr-diag[data-paso="5"] .d-desde-3,
.carta .tr-diag[data-paso="1"] .d-hasta-1,
.carta .tr-diag[data-paso="1"] .d-hasta-2, .carta .tr-diag[data-paso="2"] .d-hasta-2 { opacity: 1; }
.carta .tr-diag .d-aparato { transform: var(--a1); transition: transform 1000ms cubic-bezier(.2, .7, .2, 1); }
.carta .tr-diag[data-paso="2"] .d-aparato { transform: var(--a2, var(--a1)); }
.carta .tr-diag[data-paso="3"] .d-aparato { transform: var(--a3, var(--a2, var(--a1))); }
.carta .tr-diag[data-paso="4"] .d-aparato { transform: var(--a4, var(--a3, var(--a1))); }
.carta .tr-diag[data-paso="5"] .d-aparato { transform: var(--a5, var(--a4, var(--a1))); }
.carta .tr-diag .d-capa:not([data-capa]) { opacity: 1; }
.carta .tr-diag[data-capa="corneo"] .d-capa:not([data-capa="corneo"]),
.carta .tr-diag[data-capa="superficie"] .d-capa:not([data-capa="corneo"]),
.carta .tr-diag[data-capa="epidermis"] .d-capa:not([data-capa="epidermis"]),
.carta .tr-diag[data-capa="dermis"] .d-capa:not([data-capa="dermis"]) { opacity: .55; }
.carta .tr-diag .d-contorno { animation: d-hormigas 1.6s linear infinite; animation-play-state: paused; }
.carta .tr-diag .d-anim { animation-play-state: paused !important; }
.carta .tr-diag.is-vivo .d-anim, .carta .tr-diag.is-vivo .d-contorno { animation-play-state: running !important; }
.carta .tr-diag .d-anim, .carta .tr-diag .d-fase, .carta .tr-diag .d-tibio { transform-box: fill-box; transform-origin: center; }
.carta .tr-diag .d-trazo { stroke-dasharray: 1; }
.tr-js .carta .tr-diag .d-trazo { stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms cubic-bezier(.6, 0, .2, 1); }
.tr-js .carta .tr-diag.is-dibujado .d-trazo { stroke-dashoffset: 0; }
.carta .tr-diag .d-marca-linea { opacity: .7; }

@keyframes d-hormigas { to { stroke-dashoffset: -24; } }
@keyframes d-cae { from { transform: translateY(0); opacity: 1; } to { transform: translateY(24px); opacity: 0; } }
@keyframes d-escama { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(-16px, -20px) rotate(-30deg); opacity: 0; } }
@keyframes d-sube { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-20px); opacity: 0; } }
@keyframes d-hidrata { from { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(48px) scale(.6); opacity: 0; } }
@keyframes d-extrae { 0%, 30% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-34px); opacity: 0; } }
@keyframes d-burbuja { from { transform: translateY(0); opacity: .9; } to { transform: translateY(-44px); opacity: 0; } }
@keyframes d-pulso { 0%, 100% { opacity: .3; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes d-extiende { 0% { transform: scaleX(.3); opacity: 0; } 40%, 100% { transform: scaleX(1); opacity: .65; } }
@keyframes d-baja { from { transform: translateY(0); opacity: 1; } to { transform: translateY(42px); opacity: 0; } }
@keyframes d-golpe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes d-rayo { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes d-agita { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes d-gira { to { transform: rotate(360deg); } }
@keyframes d-calor { 0%, 100% { opacity: .2; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
@keyframes d-tensa { 0%, 100% { transform: scaleX(.92); } 50% { transform: scaleX(1.05); } }
@keyframes d-desliza { 0%, 100% { transform: translateX(-30px); } 50% { transform: translateX(40px); } }
@keyframes d-brillo { 0%, 100% { opacity: 0; } 50% { opacity: .85; } }
@keyframes d-tibio { 0%, 100% { opacity: .12; } 50% { opacity: .38; } }
@keyframes d-onda { from { transform: scale(.5); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
@keyframes d-circulo { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(16px, -3px); } 50% { transform: translate(0, -7px); } 75% { transform: translate(-16px, -3px); } }
@keyframes d-termo { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes d-limpia { 0%, 100% { transform: translateX(-90px); } 50% { transform: translateX(90px); } }
@keyframes d-pincel { 0% { transform: translateX(-130px); } 100% { transform: translateX(130px); } }
@keyframes d-reloj { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes d-aguja { to { transform: rotate(360deg); } }
.carta .tr-diag [style*="d-aguja"] { transform-box: view-box; transform-origin: 0 0; }
.carta .tr-diag [style*="d-termo"] { transform-box: fill-box; transform-origin: 50% 100%; }
.carta .tr-diag [style*="d-agita"] { transform-box: fill-box; transform-origin: 50% 100%; }
.carta .tr-diag [style*="d-reloj"] { transform-box: fill-box; transform-origin: center; stroke-dasharray: 1; }

/* Índice: el mapa con los 7 marcadores */
.carta .tr-diag--mapa .d-m { opacity: .32; transition: opacity 400ms ease-out; }
.carta .tr-diag--mapa .d-m-halo { opacity: 0; transform-box: fill-box; transform-origin: center; }
.carta .tr-diag--mapa .tr-diag__capa > span { display: none; }
.carta .tr-diag--mapa[data-activo="hidrodermoabrasion"] [data-m="hidrodermoabrasion"],
.carta .tr-diag--mapa[data-activo="limpieza-facial-profunda"] [data-m="limpieza-facial-profunda"],
.carta .tr-diag--mapa[data-activo="dermapen"] [data-m="dermapen"],
.carta .tr-diag--mapa[data-activo="biorepeel"] [data-m="biorepeel"],
.carta .tr-diag--mapa[data-activo="dermaplaning"] [data-m="dermaplaning"],
.carta .tr-diag--mapa[data-activo="radiofrecuencia-facial"] [data-m="radiofrecuencia-facial"],
.carta .tr-diag--mapa[data-activo="peeling"] [data-m="peeling"] { opacity: 1; display: inline; }
.carta .tr-diag--mapa[data-activo="hidrodermoabrasion"] .d-m[data-m="hidrodermoabrasion"] .d-m-halo,
.carta .tr-diag--mapa[data-activo="limpieza-facial-profunda"] .d-m[data-m="limpieza-facial-profunda"] .d-m-halo,
.carta .tr-diag--mapa[data-activo="dermapen"] .d-m[data-m="dermapen"] .d-m-halo,
.carta .tr-diag--mapa[data-activo="biorepeel"] .d-m[data-m="biorepeel"] .d-m-halo,
.carta .tr-diag--mapa[data-activo="dermaplaning"] .d-m[data-m="dermaplaning"] .d-m-halo,
.carta .tr-diag--mapa[data-activo="radiofrecuencia-facial"] .d-m[data-m="radiofrecuencia-facial"] .d-m-halo,
.carta .tr-diag--mapa[data-activo="peeling"] .d-m[data-m="peeling"] .d-m-halo { animation: d-pulso 1600ms infinite; }

/* La carta (filas del índice dentro del pico) */
.carta .tr-carta__fila { min-height: 44svh; }
.carta .tr-carta__fila a { display: grid; grid-template-columns: 2.2rem 1fr; gap: 4px 12px; text-decoration: none; color: var(--c-cafe); }
.carta .tr-carta__n { grid-row: span 3; font: 500 1.6rem/1.2 var(--f-display); color: var(--c-oliva); }
.carta .tr-carta__nombre { font: 500 clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem)/1.05 var(--f-display); background-image: linear-gradient(var(--c-oliva), var(--c-oliva)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 96%; transition: background-size 300ms ease-out; justify-self: start; }
.carta .tr-carta__fila a:hover .tr-carta__nombre, .carta .tr-carta__fila a:focus-visible .tr-carta__nombre { background-size: 100% 1px; }
.carta .tr-carta__linea { font-size: 1.125rem; color: var(--c-cafe); }
.carta .tr-carta__datos { font: 600 .875rem/1.4 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--c-oliva-hondo); margin-top: 4px; }
@media (min-width: 900px) { .carta .tr-carta__fila { min-height: 52svh; } }

/* ===================================================== CÓMO SE SIENTE */
.carta .tr-siente { background: var(--c-lienzo); padding-block: clamp(64px, 9vw, 120px); }
.carta .tr-siente__rejilla { display: grid; gap: 40px; }
.carta .tr-siente__texto { display: grid; gap: 18px; align-content: start; }
.carta .tr-siente__texto > p { font-size: 1.125rem; color: var(--c-cafe); }
.carta .tr-escala { display: grid; gap: 8px; max-width: 420px; margin-block: 6px; }
.carta .tr-escala__barra { position: relative; height: 10px; border: 1px solid var(--c-oliva); border-radius: 6px; overflow: hidden; background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), rgba(107, 90, 46, .35) calc(20% - 1px) 20%); }
.carta .tr-escala__marca { position: absolute; inset: 0; background: var(--c-oliva-hondo); transform-origin: left; transform: scaleX(calc(var(--v) / 5)); }
.carta .tr-escala__fin { display: flex; justify-content: space-between; font-size: 1rem; color: var(--c-tinta-2); }
.tr-js .carta .tr-escala .tr-escala__marca { transform: scaleX(0); transition: transform 1200ms cubic-bezier(.2, .7, .2, 1) 200ms; }
.tr-js .carta .tr-escala.is-visible .tr-escala__marca { transform: scaleX(calc(var(--v) / 5)); }
.carta .tr-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.carta .tr-lista li { position: relative; padding-left: 28px; font-size: 1.0625rem; color: var(--c-cafe); line-height: 1.55; }
.carta .tr-lista li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 6px; border-left: 1.5px solid var(--c-oliva-hondo); border-bottom: 1.5px solid var(--c-oliva-hondo); transform: rotate(-45deg); }
.carta .tr-lista--no li::before { width: 12px; height: 0; top: .8em; border-left: 0; border-bottom: 1.5px solid var(--c-tinta-2); transform: none; }
.carta .tr-siente__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.carta .tr-foto--marco { aspect-ratio: 4 / 5; }
.carta .tr-foto--marco:nth-child(2) { margin-top: 36px; }
.carta .tr-foto--marco figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; font-size: .9375rem; line-height: 1.3; color: #fff; background: linear-gradient(transparent, rgba(46, 42, 36, .78)); }
.carta.tr .tr-siente__nota { grid-column: 1 / -1; font-size: .9375rem; color: var(--c-tinta-2); }
@media (min-width: 900px) {
  .carta .tr-siente__rejilla { grid-template-columns: 6fr 6fr; gap: 72px; align-items: center; }
  .carta .tr-siente__fotos { gap: 20px; }
  .carta .tr-foto--marco:nth-child(2) { margin-top: 72px; }
}
/* Cortina: la foto se abre de abajo hacia arriba */
.tr-js .carta .tr-cortina { clip-path: inset(100% 0 0 0); transition: clip-path 1100ms cubic-bezier(.65, 0, .2, 1); transition-delay: calc(var(--i, 0) * 140ms); }
.tr-js .carta .tr-cortina.is-visible { clip-path: inset(0 0 0 0); }
.tr-js .carta .tr-cortina img { transform: scale(1.12); transition: transform 1600ms cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 140ms); }
.tr-js .carta .tr-cortina.is-visible img { transform: none; }

/* ===================================================== CON QUÉ SE HACE */
.carta .tr-equipo { padding-block: clamp(64px, 9vw, 120px); background: var(--c-crema); }
.carta .tr-equipo__lista { list-style: none; margin: 28px 0 0; padding: 0; border-bottom: 1px solid var(--c-arena); }
.carta .tr-equipo__lista li { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--c-arena); }
.carta .tr-marca { font: italic 500 clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem)/1.1 var(--f-display); color: var(--c-cafe); }
.carta .tr-equipo__para { font-size: 1.0625rem; color: var(--c-tinta-2); }
@media (min-width: 900px) {
  .carta .tr-equipo__lista li { grid-template-columns: 1fr 1fr; align-items: baseline; gap: 32px; padding: 22px 0; }
  .carta .tr-equipo__lista li:hover .tr-marca { color: var(--c-oliva-hondo); }
}

/* ===================================================== EN QUÉ NIVEL VIENE (escalera) */
.carta .tr-niveles { padding-block: clamp(64px, 9vw, 120px); background: var(--c-lienzo); scroll-margin-top: var(--cab); }
.carta .tr-niveles__cabeza p { margin-top: 14px; font-size: 1.125rem; color: var(--c-cafe); max-width: 60ch; }
.carta .tr-escalera { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 12px; }
.carta .tr-esc { margin-left: calc((var(--n) - 1) * 10px); }
.carta .tr-esc__caja { height: 100%; display: grid; gap: 8px; align-content: start; padding: 20px 20px 22px; background: transparent; border: 1px dashed rgba(107, 90, 46, .45); color: var(--c-tinta-2); }
.carta .tr-esc.is-on .tr-esc__caja { background: var(--c-crema); border: 1px solid var(--c-arena); border-top: 3px solid var(--c-oliva-hondo); color: var(--c-cafe); }
.carta .tr-esc--sig.is-on .tr-esc__caja { background: var(--c-cafe); border-color: var(--c-cafe); border-top-color: var(--c-oro-claro); color: var(--c-crema); }
.carta .tr-esc--sig.is-on .tr-esc__nombre a, .carta .tr-esc--sig.is-on .tr-esc__precio { color: var(--c-crema); }
.carta .tr-esc--sig.is-on .tr-esc__texto, .carta .tr-esc--sig.is-on .tr-esc__nivel { color: #E7DFD0; }
.carta .tr-esc--sig.is-on .c-enlace { color: var(--c-oro-claro); }
.carta .tr-esc__nivel { font: 600 .8125rem/1.4 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--c-oliva-hondo); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.carta .tr-esc__aqui { padding: 3px 7px; background: var(--c-oliva-hondo); color: #fff; letter-spacing: .1em; }
.carta .tr-esc__sello { color: var(--c-oliva); letter-spacing: .06em; }
.carta .tr-esc__nombre { font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.4rem); }
.carta .tr-esc__nombre a { color: inherit; text-decoration: none; }
.carta .tr-esc__precio { font-size: 1rem; color: var(--c-tinta-2); }
.carta .tr-esc__precio .tr-cifra { font-size: 1.6rem; color: inherit; }
.carta .tr-esc__texto { font-size: 1.0625rem; line-height: 1.5; }
.carta .tr-esc:not(.is-on) .tr-esc__nombre, .carta .tr-esc:not(.is-on) .tr-esc__precio { opacity: .62; }
.carta .tr-niveles__previo, .carta .tr-niveles__pie { margin-top: 22px; font-size: 1.0625rem; color: var(--c-tinta-2); }
.carta .tr-niveles__pie { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline; }
@media (min-width: 900px) {
  .carta .tr-niveles__cabeza { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: end; }
  .carta .tr-niveles__cabeza p { margin-top: 0; }
  .carta .tr-escalera { margin-top: 44px; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 14px; }
  .carta .tr-esc { margin-left: 0; }
  .carta .tr-esc__caja { min-height: calc(220px + var(--n) * 46px); }
}
@keyframes tr-sube { from { transform: translateY(46px); opacity: 0; } to { transform: none; opacity: 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .carta .tr-esc__caja { animation: tr-sube linear both; animation-timeline: view(); animation-range: entry calc(var(--n) * 6%) entry calc(55% + var(--n) * 8%); }
  }
}

/* ===================================================== PARA QUIÉN · CUIDADOS · RIESGOS */
.carta .tr-quien, .carta .tr-cuidados, .carta .tr-riesgos { padding-block: clamp(64px, 9vw, 112px); background: var(--c-crema); border-top: 1px solid var(--tr-filete); }
.carta .tr-dos { display: grid; gap: 18px; margin-top: 28px; }
.carta .tr-col { padding: 22px 20px; border: 1px solid var(--c-arena); background: #fff; }
.carta .tr-col--no { background: var(--c-lienzo); }
.carta .tr-col h3, .carta .tr-linea h3, .carta .tr-riesgos h3 { font-size: 1.6rem; margin-bottom: 14px; }
@media (min-width: 760px) { .carta .tr-dos { grid-template-columns: 1fr 1fr; gap: 24px; } .carta .tr-col { padding: 30px 30px 32px; } }
.carta .tr-linea { position: relative; display: grid; gap: 28px; margin-top: 32px; }
.carta .tr-linea::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--c-oliva); opacity: .5; }
.carta .tr-linea__col { padding-left: 34px; position: relative; }
.carta .tr-linea__col::before { content: ""; position: absolute; left: 1px; top: 10px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--c-oliva-hondo); background: var(--c-crema); }
.carta .tr-linea__nodo { padding-left: 34px; position: relative; }
.carta .tr-linea__nodo span { display: inline-block; font: italic 500 1.5rem/1 var(--f-display); color: var(--c-crema); background: var(--c-oliva-hondo); padding: 10px 16px; }
.carta .tr-linea__nodo::before { content: ""; position: absolute; left: -2px; top: 12px; width: 17px; height: 17px; border-radius: 50%; background: var(--c-oliva-hondo); }
@media (min-width: 900px) {
  .carta .tr-linea { grid-template-columns: 1fr auto 1fr; gap: 48px; align-items: start; }
  .carta .tr-linea::before { left: 0; right: 0; top: 32px; bottom: auto; width: auto; height: 1px; }
  .carta .tr-linea__col, .carta .tr-linea__nodo { padding-left: 0; padding-top: 60px; }
  .carta .tr-linea__col::before { left: 0; top: 27px; }
  .carta .tr-linea__nodo { padding-top: 12px; }
  .carta .tr-linea__nodo::before { display: none; }
}
.carta .tr-riesgos__rejilla { display: grid; gap: 26px; }
.carta.tr .tr-riesgos__pie { font-size: 1.0625rem; color: var(--c-tinta-2); padding-top: 18px; border-top: 1px solid var(--c-arena); max-width: none; }
@media (min-width: 900px) { .carta .tr-riesgos__rejilla { grid-template-columns: 4fr 4fr 4fr; gap: 40px; } .carta .tr-riesgos__pie { grid-column: 1 / -1; } }

/* ===================================================== PREGUNTAS */
.carta .tr-faq { padding-block: clamp(64px, 9vw, 112px); background: var(--c-lienzo); }
.carta .tr-faq__rejilla { display: grid; gap: 26px; }
.carta .tr-faq__lista { border-top: 1px solid var(--c-arena); }
.carta .tr-faq details { border-bottom: 1px solid var(--c-arena); }
.carta .tr-faq summary { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative; font: 500 1.45rem/1.25 var(--f-display); color: var(--c-cafe); }
.carta .tr-faq summary::-webkit-details-marker { display: none; }
.carta .tr-faq summary::after { content: "+"; position: absolute; right: 6px; top: 18px; font: 400 1.6rem/1 var(--f-texto); color: var(--c-oliva); transition: transform 200ms ease-out; }
.carta .tr-faq details[open] summary::after { transform: rotate(45deg); }
.carta .tr-faq details p { padding: 0 0 22px; font-size: 1.0625rem; color: var(--c-cafe); }
@media (min-width: 900px) { .carta .tr-faq__rejilla { grid-template-columns: 4fr 8fr; gap: 56px; align-items: start; } .carta .tr-faq__rejilla > h2 { position: sticky; top: calc(var(--cab) + 40px); } }

/* ===================================================== OTROS TRATAMIENTOS */
.carta .tr-otros { padding-block: clamp(64px, 9vw, 112px); background: var(--c-crema); }
.carta .tr-riel { list-style: none; margin: 28px -20px 22px; padding: 0 20px 8px; display: grid; grid-auto-flow: column; grid-auto-columns: 76%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; }
.carta .tr-riel > li { scroll-snap-align: start; }
.carta .tr-otro { display: grid; gap: 8px; text-decoration: none; color: var(--c-cafe); }
.carta .tr-foto--otro { aspect-ratio: 4 / 5; }
.carta .tr-foto--otro img { transition: transform 700ms cubic-bezier(.2, .7, .2, 1); }
.carta .tr-otro:hover .tr-foto--otro img { transform: scale(1.05); }
.carta .tr-otro__nombre { font: 500 1.8rem/1.1 var(--f-display); margin-top: 6px; }
.carta .tr-otro__linea { font-size: 1.0625rem; color: var(--c-tinta-2); }
.carta .tr-otro__desde { font: 600 .8125rem/1.4 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--c-oliva-hondo); }
@media (min-width: 900px) { .carta .tr-riel { margin-inline: 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; gap: 28px; } }

/* ===================================================== PUERTA */
.carta .tr-puerta { background: var(--c-cafe); color: var(--c-crema); padding-block: clamp(64px, 9vw, 120px); }
.carta .tr-puerta h2 { color: var(--c-crema); }
.carta.tr .tr-puerta h2 em { color: var(--c-oro-claro); }
.carta .tr-puerta p { color: #EFE7D8; font-size: 1.1875rem; margin-top: 14px; }
.carta .tr-puerta__precio .tr-cifra { font-size: 1.9rem; color: var(--c-crema); margin-right: .2em; }
.carta .tr-puerta .c-acciones { margin-top: 26px; }
.carta .tr-enlace-claro { color: #F3EADB; text-decoration-color: rgba(201, 178, 122, .7); }
.carta .tr-enlace-claro:hover { color: #fff; }
.carta .tr-puerta__rejilla { display: grid; gap: 40px; }
.carta .tr-visita { border-top: 1px solid #5C5345; padding-top: 24px; }
.carta .tr-visita h3 { font-size: 1.9rem; color: var(--c-crema); }
.carta .tr-visita p { font-size: 1.0625rem; margin-top: 8px; }
@media (min-width: 900px) { .carta .tr-puerta__rejilla { grid-template-columns: 7fr 4fr; gap: 80px; align-items: end; } .carta .tr-visita { border-top: 0; border-left: 1px solid #5C5345; padding: 0 0 0 36px; } }

/* Barra fija en celular (carta.css la oculta desde 900 px) */
.carta .tr-barra { transition: transform 300ms ease-out, opacity 300ms ease-out; }
.carta .tr-barra .c-btn { white-space: nowrap; flex: 0 0 auto; }
.carta .tr-barra.is-oculta { transform: translateY(110%); opacity: 0; pointer-events: none; }
.carta .tr-barra__texto { margin: 0; font-size: 1rem; color: var(--c-cafe); }
.carta .tr-barra__texto span { font: italic 500 1.3rem/1 var(--f-display); margin-right: 4px; }
.carta .tr-barra__texto strong { font: 500 1.3rem/1 var(--f-display); }
@media (max-width: 899px) { .carta .tr-puerta { padding-bottom: 120px; } }

/* ===================================================== ÍNDICE */
.carta .tr-hero--indice .tr-hero__escena { height: clamp(300px, 48svh, 420px); }
.carta .tr-mosaico .tr-capa--a { inset: 0; }
.carta .tr-mosaico .tr-mov { position: absolute; inset: 0; }
.carta .tr-mosaico__f { position: absolute; aspect-ratio: 4 / 5; border: 6px solid var(--c-crema); box-shadow: 0 0 0 1px var(--c-arena); translate: calc(var(--px, 0) * var(--d)) calc(var(--py, 0) * var(--d)); transition: translate 800ms cubic-bezier(.2, .7, .2, 1); animation: tr-mosaico-entra 900ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 90ms + 150ms); }
.carta .tr-mosaico__f figcaption { position: absolute; left: 0; bottom: 0; max-width: 100%; padding: 4px 8px; background: var(--c-crema); font-size: .875rem; line-height: 1.25; color: var(--c-cafe); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes tr-mosaico-entra { from { opacity: 0; transform: translateY(24px) scale(.95); } to { opacity: 1; transform: none; } }
/* celular: siete placas en un collage horizontal */
.carta .tr-mosaico__f--1 { --d: 6px; left: 2%; top: 8%; width: 30%; }
.carta .tr-mosaico__f--2 { --d: 18px; left: 26%; top: 34%; width: 27%; z-index: 2; }
.carta .tr-mosaico__f--3 { --d: 10px; left: 50%; top: 4%; width: 26%; }
.carta .tr-mosaico__f--4 { --d: 24px; left: 68%; top: 36%; width: 28%; z-index: 2; }
.carta .tr-mosaico__f--5 { --d: 8px; left: -6%; top: 58%; width: 24%; }
.carta .tr-mosaico__f--6 { --d: 14px; left: 52%; top: 64%; width: 22%; }
.carta .tr-mosaico__f--7 { --d: 20px; left: 76%; top: 2%; width: 21%; }
@media (min-width: 900px) {
  .carta .tr-hero--indice .tr-hero__escena { position: absolute; inset: 0 0 0 46%; height: auto; overflow: visible; }
  .carta .tr-mosaico__f--1 { left: 4%; top: 14%; width: 25%; }
  .carta .tr-mosaico__f--2 { left: 30%; top: 6%; width: 22%; }
  .carta .tr-mosaico__f--3 { left: 56%; top: 16%; width: 27%; z-index: 3; }
  .carta .tr-mosaico__f--4 { left: 14%; top: 50%; width: 22%; z-index: 3; }
  .carta .tr-mosaico__f--5 { left: 40%; top: 42%; width: 26%; z-index: 2; }
  .carta .tr-mosaico__f--6 { left: 70%; top: 58%; width: 20%; }
  .carta .tr-mosaico__f--7 { left: 79%; top: 6%; width: 17%; }
  .carta .tr-hero--indice .tr-ilustrativa { top: auto; bottom: 16px; }
}
@keyframes tr-sale-cerca { to { transform: translateY(-40%); } }
@keyframes tr-sale-lejos { to { transform: translateY(-12%); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .carta .tr-mosaico__f--2, .carta .tr-mosaico__f--4, .carta .tr-mosaico__f--7 { animation: tr-mosaico-entra 900ms cubic-bezier(.2, .7, .2, 1) both, tr-sale-cerca linear both; animation-delay: calc(var(--i) * 90ms + 150ms), 0s; animation-timeline: auto, --trhero; animation-range: normal, exit 0% exit 100%; }
    .carta .tr-mosaico__f--1, .carta .tr-mosaico__f--3, .carta .tr-mosaico__f--5, .carta .tr-mosaico__f--6 { animation: tr-mosaico-entra 900ms cubic-bezier(.2, .7, .2, 1) both, tr-sale-lejos linear both; animation-delay: calc(var(--i) * 90ms + 150ms), 0s; animation-timeline: auto, --trhero; animation-range: normal, exit 0% exit 100%; }
  }
}

/* Matriz */
.carta .tr-matriz { padding-block: clamp(64px, 9vw, 120px); background: var(--c-lienzo); }
.carta .tr-matriz__lead { margin-top: 12px; font-size: 1.125rem; color: var(--c-cafe); }
.carta .tr-tabla { margin-top: 28px; }
.carta .tr-tabla table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.carta .tr-tabla th, .carta .tr-tabla td { padding: 14px 4px; border-bottom: 1px solid var(--c-arena); text-align: center; vertical-align: middle; }
.carta .tr-tabla thead th { font: 500 1.05rem/1.2 var(--f-display); vertical-align: bottom; }
.carta .tr-tabla thead th:first-child, .carta .tr-tabla tbody th { text-align: left; width: 42%; }
.carta .tr-tabla thead a { color: var(--c-cafe); text-decoration: none; }
.carta .tr-tabla thead small { display: block; font: 400 .8125rem/1.3 var(--f-texto); color: var(--c-tinta-2); margin-top: 4px; }
.carta .tr-tabla tbody th { font: 500 1.2rem/1.2 var(--f-display); }
.carta .tr-tabla tbody th a { color: var(--c-cafe); text-decoration: none; }
.carta .tr-punto { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--c-oliva-hondo); box-shadow: 0 0 0 4px rgba(134, 111, 59, .16); }
.carta .tr-raya { display: inline-block; width: 14px; height: 1px; background: var(--c-tinta-3); opacity: .6; }
@media (min-width: 900px) {
  .carta .tr-tabla th, .carta .tr-tabla td { padding: 18px 10px; }
  .carta .tr-tabla thead th { font-size: 1.5rem; }
  .carta .tr-tabla thead th:first-child, .carta .tr-tabla tbody th { width: 34%; }
  .carta .tr-tabla tbody th { font-size: 1.5rem; }
}
@keyframes tr-punto { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .carta .tr-punto { animation: tr-punto linear both; animation-timeline: view(); animation-range: entry calc(20% + var(--j) * 12%) entry calc(60% + var(--j) * 12%); }
  }
}

/* Marcas: la única marquesina del sitio de tratamientos */
.carta .tr-marcas { padding-block: clamp(64px, 9vw, 112px) clamp(56px, 8vw, 96px); background: var(--c-crema); overflow: hidden; }
.carta .tr-marcas .tr-contenedor > p { margin-top: 12px; font-size: 1.125rem; color: var(--c-tinta-2); }
.carta .tr-marquesina { margin-top: 32px; border-block: 1px solid var(--c-arena); padding-block: 18px; overflow: hidden; }
.carta .tr-marquesina__pista { display: flex; align-items: center; gap: 28px; width: max-content; animation: tr-marquesina 60s linear infinite; }
.carta .tr-marquesina:hover .tr-marquesina__pista { animation-play-state: paused; }
.carta .tr-marquesina .tr-marca { white-space: nowrap; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem); }
.carta .tr-marquesina__sep { color: var(--c-oliva); font-size: 1rem; }
@keyframes tr-marquesina { to { transform: translateX(-50%); } }

/* Siempre incluido */
.carta .tr-siempre { padding-block: clamp(64px, 9vw, 120px); background: var(--c-lienzo); }
.carta .tr-siempre__rejilla { display: grid; gap: 36px; align-items: center; }
.carta .tr-foto--siempre { aspect-ratio: 4 / 5; max-width: 460px; }
.carta .tr-siempre__lista { list-style: none; margin: 24px 0 0; padding: 0; }
.carta .tr-siempre__lista li { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--c-arena); }
.carta .tr-siempre__lista strong { font: italic 500 1.65rem/1.15 var(--f-display); color: var(--c-oliva-hondo); }
.carta .tr-siempre__lista span { font-size: 1.0625rem; color: var(--c-cafe); }
@media (min-width: 900px) { .carta .tr-siempre__rejilla { grid-template-columns: 5fr 7fr; gap: 72px; } }

/* ===================================================== Aparición única (solo con JS; sin JS todo se ve) */
.tr-js .carta .tr-reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--tr-lento), transform var(--tr-lento); }
.tr-js .carta .tr-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .carta .tr-entra, .carta .tr-foto--hero img, .carta .tr-aparato .d-trazo, .carta .tr-aparato .tr-dibujo > *, .carta .tr-mosaico__f, .carta .tr-esc__caja, .carta .tr-punto { animation: none !important; }
  .carta .tr-capa, .carta .tr-ficha, .carta .tr-mosaico__f { translate: none !important; transition: none !important; }
  .carta .tr-diag .d-anim, .carta .tr-diag .d-contorno { animation: none !important; }
  .carta .tr-diag .d-aparato, .carta .tr-diag [class*="d-p-"], .carta .tr-diag [class*="d-desde-"], .carta .tr-diag [class*="d-hasta-"] { transition: none !important; }
  .tr-js .carta .tr-diag .d-trazo { stroke-dashoffset: 0; transition: none; }
  .carta .tr-marquesina__pista { animation: none; flex-wrap: wrap; width: auto; padding-inline: 20px; }
  .carta .tr-guia > .tr-rayo { display: none; }
  .tr-js .carta .tr-reveal, .tr-js .carta .tr-cortina, .tr-js .carta .tr-cortina img { opacity: 1; transform: none; clip-path: none; transition: none; }
  .tr-js .carta .tr-escala .tr-escala__marca { transform: scaleX(calc(var(--v) / 5)); transition: none; }
  .tr-js .carta .tr-paso:not(.is-activo) { opacity: 1; }
}

/* Leyenda "Imagen ilustrativa" junto a cada imagen ia-* (COFEPRIS) */
.carta .tr-ilu { position: absolute; right: 6px; top: 6px; z-index: 2; font: 400 .75rem/1 var(--f-texto); letter-spacing: .02em; color: #fff; background: rgba(46, 42, 36, .74); padding: 5px 7px; border-radius: 2px; pointer-events: none; }
.carta .tr-mosaico__f .tr-ilu { font-size: .6875rem; padding: 4px 5px; right: 4px; top: 4px; }
/* Logos de la marquesina (PNG @2x a la mitad; los aparatos son wordmarks) */
.carta .tr-logo { height: 40px; width: auto; max-width: none; opacity: .9; }
.carta .tr-logo--palabra { height: 26px; }
@media (min-width: 900px) { .carta .tr-logo { height: 52px; } .carta .tr-logo--palabra { height: 32px; } }

/* Con qué se hace: lista + foto real */
.carta .tr-equipo__rejilla { display: grid; gap: 28px; }
.carta .tr-foto--equipo { aspect-ratio: 4 / 5; max-height: 520px; }
.carta .tr-foto--equipo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; font-size: .9375rem; color: #fff; background: linear-gradient(transparent, rgba(46, 42, 36, .78)); }
.carta .tr-marca--logo { display: flex; align-items: center; min-height: 48px; }
.carta .tr-equipo__lista .tr-logo { height: 40px; }
.carta .tr-equipo__lista .tr-logo--palabra { height: 24px; }
@media (min-width: 900px) { .carta .tr-equipo__rejilla { grid-template-columns: 8fr 4fr; gap: 48px; align-items: start; } .carta .tr-equipo__lista { margin-top: 0; } .carta .tr-equipo h2 { margin-bottom: 28px; } }
@media (min-width: 600px) and (max-width: 899px) { .carta .tr-mosaico__f { max-width: 170px; } .carta .tr-hero--indice .tr-hero__escena { height: 420px; } }