/* Carrusel de regiones de la portada (Claude Design «Carrusel de regiones» y
   «Publicidad en el carrusel», 26/10/2026). Markup: php/views/carrusel-regiones.php.
   Lógica: frontend/js/carrusel-regiones.js.
   Escritorio: 625 px de alto, el buscador pisa los últimos 80 px y el texto termina
   32 px arriba. Celular: 300 px, el texto va abajo y las flechas arriba. */

.rg-carrusel { position: relative; height: 625px; overflow: hidden; background: #1f1a17; font-family: Barlow, sans-serif; font-style: normal; color: #fff; }
.rg-carrusel__fotos, .rg-carrusel__velo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.rg-carrusel__foto {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;
    /* Sin will-change: con él, cada foto (hasta 2400 px) ocupaba memoria de la placa de video
       aunque no se viera; el navegador ya sube a la placa la que se está moviendo. */
    opacity: 0; transition: opacity 1.2s ease;
    transform-origin: 50% 50%; animation-timing-function: linear; animation-fill-mode: forwards;
}
.rg-carrusel__foto.is-activa { opacity: 1; }
/* Tres movimientos que se alternan por foto. El diseño pedía hasta 15 % de zoom;
   se veía rápido (26/10), así que van a la mitad: 7 % como máximo. La duración la pone el JS. */
.rg-carrusel__foto.kb-a { animation-name: rgKbA; }
.rg-carrusel__foto.kb-b { animation-name: rgKbB; }
.rg-carrusel__foto.kb-c { animation-name: rgKbC; }
@keyframes rgKbA { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1%, -.75%); } }
@keyframes rgKbB { from { transform: scale(1.07) translate(1%, .5%); } to { transform: scale(1.015) translate(0, 0); } }
@keyframes rgKbC { from { transform: scale(1.025) translate(-1.25%, 0); } to { transform: scale(1.075) translate(1.25%, -.5%); } }

/* Oscurecido solo del lado del texto: la derecha de la foto queda limpia. */
.rg-carrusel__velo { background: linear-gradient(90deg, rgba(20, 14, 10, .70) 0%, rgba(20, 14, 10, .48) 34%, rgba(20, 14, 10, 0) 64%); transition: opacity 1.2s ease; }

.rg-carrusel__texto { position: absolute; left: 50%; top: 120px; bottom: 112px; width: 1296px; max-width: calc(100% - 48px); transform: translateX(-50%); pointer-events: none; transition: opacity .6s ease; }
.rg-carrusel__zona { position: absolute; left: 24px; bottom: 0; width: 640px; max-width: calc(100% - 24px); display: flex; flex-direction: column; gap: 14px; }
.rg-carrusel__zona a, .rg-carrusel__ctl button { pointer-events: auto; }
.rg-carrusel__indice { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.rg-carrusel__barras { display: flex; gap: 6px; }
.rg-carrusel__barra { position: relative; width: 30px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.rg-carrusel__barra > span { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: #fff; animation-timing-function: linear; animation-fill-mode: forwards; }
.rg-carrusel__barra > span.is-llena { width: 100%; }
.rg-carrusel__barra > span.is-avanza { animation-name: rgAvance; }
@keyframes rgAvance { from { width: 0; } to { width: 100%; } }

.rg-carrusel__tit { display: flex; flex-direction: column; gap: 12px; }
.rg-carrusel__tit.is-entra { animation: rgTitulo .7s ease both; }
@keyframes rgTitulo { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rg-carrusel__nombre { margin: 0; padding: 0; font-size: 92px; line-height: .9; font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.rg-carrusel__nombre a { color: #fff; text-decoration: none; }
.rg-carrusel__nombre a:hover { color: #fff; }
.rg-carrusel__nombre a:focus-visible { outline: 3px solid var(--c-amarillo, #ffd100); outline-offset: 4px; }
.rg-carrusel__chev { display: none; }
.rg-carrusel__frase { margin: 0; font-size: 25px; line-height: 1.25; font-weight: 500; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); transition: opacity .5s ease; }
.rg-carrusel__btn { align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.rg-carrusel__btn:hover, .rg-carrusel__btn:focus { color: #fff; filter: brightness(1.1); }

/* Controles: pausa (se mueve solo más de 5 s), anterior y siguiente, de a región. */
.rg-carrusel__ctl { position: absolute; right: 24px; top: 24px; z-index: 3; display: flex; gap: 8px; }
.rg-carrusel__ctl button { width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .6); background: rgba(20, 14, 10, .35); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.rg-carrusel__ctl button:hover { background: rgba(20, 14, 10, .6); }
.rg-carrusel__ctl button:focus-visible { outline: 3px solid var(--c-amarillo, #ffd100); outline-offset: 2px; }
.rg-carrusel__ico-play, .rg-carrusel.is-pausado .rg-carrusel__ico-pausa { display: none; }
.rg-carrusel.is-pausado .rg-carrusel__ico-play { display: block; }
/* Pausado, con el mouse encima o con el foco adentro: todo quieto. */
.rg-carrusel.is-quieto .rg-carrusel__foto, .rg-carrusel.is-quieto .rg-carrusel__barra > span { animation-play-state: paused; }

/* ---------- Pieza encima: tarjeta casi opaca en la columna derecha, a la altura del
   título y sin tocarlo. Entra deslizándose 28 px; se lee igual sobre cualquier foto. ---------- */
.rg-pieza { font-family: Barlow, sans-serif; font-style: normal; position: absolute; right: max(24px, calc(50% - 648px)); top: 110px; z-index: 1; width: 500px; max-width: calc(50% - 48px); display: flex; align-items: flex-end; opacity: 0; transform: translateX(28px); transition: opacity .6s ease, transform .6s ease; pointer-events: none; }
.rg-pieza.is-on { opacity: 1; transform: none; pointer-events: auto; }
.rg-pieza__caja { position: relative; width: 100%; box-sizing: border-box; padding: 26px 28px; border-radius: 22px; border: 1px solid; box-shadow: 0 24px 60px rgba(20, 14, 10, .38); display: flex; flex-direction: column; gap: 10px; }
.rg-pieza--con-imagen .rg-pieza__caja { padding-left: 150px; }
.rg-pieza__img { position: absolute; left: -46px; bottom: 0; height: 330px; width: auto; max-width: 190px; object-fit: contain; object-position: bottom; }
.rg-pieza__titulo { align-self: flex-start; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; border: 2px solid; font-size: 17px; font-weight: 800; font-style: italic; }
.rg-pieza__dato { display: flex; align-items: center; gap: 12px; }
.rg-pieza__num { font-size: 112px; line-height: .85; font-weight: 900; letter-spacing: -.03em; }
.rg-pieza__num--largo { font-size: 56px; }
.rg-pieza__al { font-size: 24px; line-height: 1.05; font-weight: 800; }
.rg-pieza__linea { margin: 0; font-size: 16px; }
.rg-pieza__btn { align-self: flex-start; display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 999px; font-size: 16px; font-weight: 800; text-decoration: none; }
.rg-pieza__btn:hover, .rg-pieza__btn:focus { filter: brightness(1.08); }
.rg-pieza__barra { display: none; align-items: center; gap: 10px; min-height: 56px; box-sizing: border-box; padding: 6px 8px 6px 14px; border-radius: 14px; box-shadow: 0 10px 26px rgba(20, 14, 10, .35); text-decoration: none; }
.rg-pieza--con-imagen .rg-pieza__barra { padding-left: 6px; }
/* Tres tonos cerrados, todos con contraste AA. */
.rg-pieza--claro .rg-pieza__caja, .rg-pieza--claro .rg-pieza__barra { background: rgba(255, 250, 244, .97); color: #1f1a17; border-color: rgba(255, 255, 255, .7); }
.rg-pieza--claro .rg-pieza__titulo { border-color: #c4470c; color: #c4470c; }
.rg-pieza--claro .rg-pieza__linea, .rg-pieza--claro .rg-pieza__barra small { color: #4a3f37; }
.rg-pieza--claro .rg-pieza__btn, .rg-pieza--claro .rg-pieza__chev { background: #c94f10; color: #fff; }
.rg-pieza--oscuro .rg-pieza__caja, .rg-pieza--oscuro .rg-pieza__barra { background: rgba(26, 21, 18, .96); color: #fff; border-color: rgba(255, 255, 255, .18); }
.rg-pieza--oscuro .rg-pieza__titulo { border-color: #ffd100; color: #ffd100; }
.rg-pieza--oscuro .rg-pieza__linea, .rg-pieza--oscuro .rg-pieza__barra small { color: #d9cfc6; }
.rg-pieza--oscuro .rg-pieza__btn, .rg-pieza--oscuro .rg-pieza__chev { background: #ffd100; color: #1f1a17; }
.rg-pieza--naranja .rg-pieza__caja, .rg-pieza--naranja .rg-pieza__barra { background: rgba(201, 79, 16, .98); color: #fff; border-color: rgba(255, 255, 255, .3); }
.rg-pieza--naranja .rg-pieza__titulo { border-color: #fff; color: #fff; }
.rg-pieza--naranja .rg-pieza__linea, .rg-pieza--naranja .rg-pieza__barra small { color: #fff; }
.rg-pieza--naranja .rg-pieza__btn, .rg-pieza--naranja .rg-pieza__chev { background: #fff; color: #9a3a0a; }
/* Más tonos (30/10), los mismos de la franja (franja.css), todos AA. */
.rg-pieza--blanco .rg-pieza__caja, .rg-pieza--blanco .rg-pieza__barra { background: rgba(255, 255, 255, .98); color: #1f1a17; border-color: #eadfd5; }
.rg-pieza--blanco .rg-pieza__titulo { border-color: #c4470c; color: #c4470c; }
.rg-pieza--blanco .rg-pieza__linea, .rg-pieza--blanco .rg-pieza__barra small { color: #4a3f37; }
.rg-pieza--blanco .rg-pieza__btn, .rg-pieza--blanco .rg-pieza__chev { background: #c94f10; color: #fff; }
.rg-pieza--amarillo .rg-pieza__caja, .rg-pieza--amarillo .rg-pieza__barra { background: rgba(255, 209, 0, .98); color: #1f1a17; border-color: rgba(255, 255, 255, .5); }
.rg-pieza--amarillo .rg-pieza__titulo { border-color: #1f1a17; color: #1f1a17; }
.rg-pieza--amarillo .rg-pieza__linea, .rg-pieza--amarillo .rg-pieza__barra small { color: #3a312b; }
.rg-pieza--amarillo .rg-pieza__btn, .rg-pieza--amarillo .rg-pieza__chev { background: #1f1a17; color: #ffd100; }
.rg-pieza--rojo .rg-pieza__caja, .rg-pieza--rojo .rg-pieza__barra { background: rgba(200, 22, 29, .98); color: #fff; border-color: rgba(255, 255, 255, .3); }
.rg-pieza--verde .rg-pieza__caja, .rg-pieza--verde .rg-pieza__barra { background: rgba(31, 111, 74, .98); color: #fff; border-color: rgba(255, 255, 255, .3); }
.rg-pieza--azul .rg-pieza__caja, .rg-pieza--azul .rg-pieza__barra { background: rgba(21, 73, 106, .98); color: #fff; border-color: rgba(255, 255, 255, .3); }
.rg-pieza--rojo .rg-pieza__titulo, .rg-pieza--verde .rg-pieza__titulo { border-color: #fff; color: #fff; }
.rg-pieza--azul .rg-pieza__titulo { border-color: #ffd100; color: #ffd100; }
.rg-pieza--rojo .rg-pieza__linea, .rg-pieza--rojo .rg-pieza__barra small,
.rg-pieza--verde .rg-pieza__linea, .rg-pieza--verde .rg-pieza__barra small,
.rg-pieza--azul .rg-pieza__linea, .rg-pieza--azul .rg-pieza__barra small { color: #fff; }
.rg-pieza--rojo .rg-pieza__btn, .rg-pieza--rojo .rg-pieza__chev { background: #fff; color: #a8121a; }
.rg-pieza--verde .rg-pieza__btn, .rg-pieza--verde .rg-pieza__chev { background: #fff; color: #1f6f4a; }
.rg-pieza--azul .rg-pieza__btn, .rg-pieza--azul .rg-pieza__chev { background: #ffd100; color: #15496a; }
/* El logo del banco (pieza de una promoción bancaria), sobre blanco para que se lea en cualquier tono. */
.rg-pieza__marca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Las tarjetas de la promo bancaria, chicas y en abanico (publicidad_tarjetas_html). */
.rg-pieza__tarjetas { display: inline-flex; align-items: flex-end; margin: 0 14px 0 2px; vertical-align: middle; }
.rg-pieza__tarjetas[hidden] { display: none; }
.rg-pieza__tarjetas img { width: 46px; height: 30px; box-sizing: border-box; padding: 2px 4px; border-radius: 5px; border: 1px solid rgba(31, 26, 23, .12); background: #fff; box-shadow: 0 3px 8px rgba(20, 14, 10, .28); transform-origin: 50% 150%; }
.rg-pieza__tarjetas img + img { margin-left: -6px; }
.rg-pieza__logo { display: block; height: 40px; width: auto; max-width: 160px; object-fit: contain; padding: 4px 8px; border-radius: 8px; background: #fff; }
/* ---------- Diseño «Opción 1» (Diego, 30/10, referencia de GPT): número enorme, «CUOTAS» en
   mayúscula con «con Visa y Mastercard» y una línea fina debajo, la fecha con calendario, botón
   con flecha y trazos de brillo. En naranja, degradé con una onda más clara abajo a la derecha. ---------- */
.rg-pieza { width: 560px; }
.rg-pieza__caja { border-radius: 26px; padding: 28px 32px; gap: 14px; }
.rg-pieza--con-imagen .rg-pieza__caja { padding-left: 160px; }
.rg-pieza__dato { align-items: flex-start; gap: 16px; }
.rg-pieza__num { font-size: 128px; line-height: .8; white-space: nowrap; }
.rg-pieza__num--medio { font-size: 92px; }
.rg-pieza__num--largo { font-size: 60px; line-height: .95; }
.rg-pieza__al { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 6px; }
.rg-pieza__al b { position: relative; align-self: flex-start; font-size: 52px; line-height: .92; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.rg-pieza__al--largo b { font-size: 34px; }
.rg-pieza__al--frase b { font-size: 26px; line-height: 1.05; text-transform: none; }
.rg-pieza__al--con::after { content: ''; display: block; width: 170px; max-width: 100%; height: 2px; margin-top: 8px; background: currentColor; opacity: .5; }
.rg-pieza__con { font-size: 21px; font-weight: 500; line-height: 1.15; }
.rg-pieza__con[hidden] { display: none; }
.rg-pieza__al--frase .rg-pieza__chispa { display: none; }
.rg-pieza__chispa { position: absolute; left: 100%; top: -24px; width: 38px; height: 38px; margin-left: 6px; color: var(--rg-chispa, #ffcf3a); }
.rg-pieza__linea { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 18px; }
.rg-pieza__linea .rg-pieza__tarjetas { margin-left: 8px; }
.rg-pieza__cal { display: inline-flex; }
.rg-pieza__cal[hidden] { display: none; }
.rg-pieza__ico { flex: none; }
.rg-pieza__btn { gap: 14px; height: 54px; padding: 0 22px 0 28px; font-size: 20px; box-shadow: 0 8px 18px rgba(20, 14, 10, .2); }
.rg-pieza--naranja .rg-pieza__caja { background: radial-gradient(70% 80% at 105% 108%, #f6893a 0 46%, rgba(246, 137, 58, 0) 46.5%), linear-gradient(135deg, #ec6517 0%, #d7500d 100%); }
.rg-pieza--claro, .rg-pieza--blanco { --rg-chispa: #e5621b; }
.rg-pieza--amarillo { --rg-chispa: #c4470c; }
/* Plantilla «Limpio» (la segunda referencia de GPT): sin brillo, sin línea fina, sin abanico ni
   flecha; «CUOTAS» al pie del número, la fecha más grande y el naranja más parejo. */
.rg-pieza--limpio .rg-pieza__chispa, .rg-pieza--limpio .rg-pieza__tarjetas, .rg-pieza--limpio .rg-pieza__btn .rg-pieza__ico { display: none; }
.rg-pieza--limpio .rg-pieza__al--con::after { display: none; }
.rg-pieza--limpio .rg-pieza__dato { align-items: flex-end; }
.rg-pieza--limpio .rg-pieza__al { padding: 0 0 4px; }
.rg-pieza--limpio .rg-pieza__num { font-size: 140px; }
.rg-pieza--limpio .rg-pieza__num--medio { font-size: 100px; }
.rg-pieza--limpio .rg-pieza__num--largo { font-size: 60px; }
.rg-pieza--limpio .rg-pieza__linea { font-size: 22px; }
.rg-pieza--limpio .rg-pieza__btn { padding: 0 40px; }
.rg-pieza--limpio.rg-pieza--naranja .rg-pieza__caja { background: radial-gradient(60% 70% at 108% 112%, rgba(255, 255, 255, .07) 0 46%, rgba(255, 255, 255, 0) 46.5%), #e2650f; }
/* Escritorio grande: tarjeta más compacta para dejar protagonismo al destino (4/11).
   La mascota conserva su tamaño; la caja baja para mantenerla a la misma altura. */
@media (min-width: 1400px) {
    .rg-pieza { width: 540px; }
    .page--hero .rg-pieza { top: 238px; }
    .rg-pieza__caja { padding: 24px 28px; gap: 12px; }
    .rg-pieza--con-imagen .rg-pieza__caja { padding-left: 170px; }
    .rg-pieza__img { left: -52px; height: 370px; max-width: 214px; }
    .rg-pieza__titulo { height: 30px; padding: 0 12px; font-size: 16px; }
    .rg-pieza__num { font-size: 112px; }
    .rg-pieza__num--medio { font-size: 82px; }
    .rg-pieza__num--largo { font-size: 54px; }
    .rg-pieza__al b { font-size: 44px; }
    .rg-pieza__al--largo b { font-size: 32px; }
    .rg-pieza__al--frase b { font-size: 25px; }
    .rg-pieza__con { font-size: 18px; }
    .rg-pieza__linea { font-size: 16px; }
    .rg-pieza__logo { height: 36px; max-width: 160px; }
    .rg-pieza__btn { height: 48px; padding: 0 20px; font-size: 18px; }
    .rg-pieza--limpio .rg-pieza__num { font-size: 122px; }
    .rg-pieza--limpio .rg-pieza__num--medio { font-size: 88px; }
    .rg-pieza--limpio .rg-pieza__linea { font-size: 18px; }
}

/* En el celular, la pastilla arriba («Opción mobile 2»). */
.rg-pieza__barra-tit { align-self: flex-start; margin-bottom: 3px; padding: 1px 8px; border: 1.5px solid; border-radius: 999px; font-size: 11px; font-style: italic; font-weight: 800; line-height: 1.3; }
.rg-pieza__barra-tit[hidden] { display: none; }

/* Vista previa del panel: quieta y a la vista. --previa-cel muestra la barra del celular. */
.rg-pieza--previa { position: static; width: 100%; max-width: none; opacity: 1; transform: none; pointer-events: auto; }
.rg-pieza--previa-cel .rg-pieza__caja { display: none; }
.rg-pieza--previa-cel .rg-pieza__barra { display: flex; }

/* ---------- Placa: imagen terminada, diapositiva propia, sin zoom ni título de región.
   La pastilla dice qué es y que se puede tocar. ---------- */
.rg-placa { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; display: block; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.rg-placa.is-on { opacity: 1; pointer-events: auto; }
.rg-placa__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.rg-placa__pastilla { position: absolute; left: 24px; top: 24px; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 2px 10px rgba(20, 14, 10, .25); font-size: 13px; font-weight: 800; letter-spacing: .06em; color: #1f1a17; }
.rg-placa__pastilla span { font-weight: 600; letter-spacing: 0; color: #c4470c; }
.rg-carrusel.is-placa .rg-carrusel__velo, .rg-carrusel.is-placa .rg-carrusel__texto { opacity: 0; }

@media (max-width: 1199px) {
    .rg-carrusel__nombre { font-size: 72px; }
    .rg-carrusel__zona { width: 560px; }
    .rg-pieza { width: 470px; }
    .rg-pieza__num { font-size: 100px; }
    .rg-pieza__num--medio { font-size: 74px; }
    .rg-pieza__al b { font-size: 42px; }
    .rg-pieza__al--largo b { font-size: 28px; }
    .rg-pieza__con { font-size: 18px; }
}
/* Notebooks: la promo acompaña al destino sin ocupar media portada. */
@media (min-width: 992px) and (max-width: 1399px) {
    .rg-pieza { width: 470px; }
    .page--hero .rg-pieza { top: 220px; }
    .rg-pieza__caja { padding: 20px 24px; gap: 10px; border-radius: 22px; }
    .rg-pieza--con-imagen .rg-pieza__caja { padding-left: 150px; }
    .rg-pieza__titulo { height: 28px; padding: 0 10px; font-size: 15px; }
    .rg-pieza__dato { gap: 12px; }
    .rg-pieza__num { font-size: 92px; }
    .rg-pieza__num--medio { font-size: 68px; }
    .rg-pieza__num--largo { font-size: 46px; }
    .rg-pieza__al b { font-size: 36px; }
    .rg-pieza__al--largo b { font-size: 28px; }
    .rg-pieza__al--frase b { font-size: 22px; }
    .rg-pieza__con { font-size: 16px; }
    .rg-pieza__linea { font-size: 15px; gap: 6px; }
    .rg-pieza__logo { height: 32px; max-width: 140px; }
    .rg-pieza__chispa { width: 28px; height: 28px; top: -18px; }
    .rg-pieza__btn { height: 44px; padding: 0 18px; gap: 10px; font-size: 16px; }
    .rg-pieza--limpio .rg-pieza__num { font-size: 102px; }
    .rg-pieza--limpio .rg-pieza__num--medio { font-size: 74px; }
    .rg-pieza--limpio .rg-pieza__num--largo { font-size: 46px; }
    .rg-pieza--limpio .rg-pieza__linea { font-size: 16px; }
}
@media (max-width: 991px) {
    .rg-carrusel__nombre { font-size: 56px; }
    .rg-carrusel__zona { width: 460px; }
    .rg-pieza { width: 380px; top: 80px; }
    .rg-pieza__caja { padding: 20px 22px; }
    .rg-pieza--con-imagen .rg-pieza__caja { padding-left: 120px; }
    .rg-pieza__img { left: -30px; height: 240px; max-width: 140px; }
    .rg-pieza__num { font-size: 76px; }
    .rg-pieza__num--medio { font-size: 58px; }
    .rg-pieza__num--largo { font-size: 40px; }
    .rg-pieza__al b { font-size: 30px; }
    .rg-pieza__al--largo b, .rg-pieza__al--frase b { font-size: 22px; }
    .rg-pieza__con, .rg-pieza__linea { font-size: 15px; }
    .rg-pieza__chispa { width: 28px; height: 28px; top: -18px; }
    .rg-pieza__btn { height: 46px; font-size: 16px; }
}
@media (max-width: 767px) {
    .rg-carrusel { height: 300px; }
    .rg-carrusel__velo { background: linear-gradient(0deg, rgba(20, 14, 10, .80) 0%, rgba(20, 14, 10, .55) 32%, rgba(20, 14, 10, 0) 62%); }
    .rg-carrusel__texto { left: 16px; right: 16px; top: auto; bottom: 34px; width: auto; max-width: none; transform: none; }
    .rg-carrusel__zona { position: static; width: auto; max-width: none; gap: 6px; }
    .rg-carrusel__indice { gap: 8px; font-size: 12px; }
    .rg-carrusel__barras { gap: 4px; }
    .rg-carrusel__barra { width: 18px; height: 3px; }
    .rg-carrusel__tit { gap: 4px; }
    .rg-carrusel__nombre { font-size: 40px; line-height: .92; text-shadow: 0 2px 14px rgba(0, 0, 0, .4); }
    .rg-carrusel__nombre a { display: inline-flex; align-items: flex-end; gap: 8px; }
    .rg-carrusel__chev { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-bottom: 3px; border-radius: 999px; font-size: 17px; font-style: normal; line-height: 1; }
    .rg-carrusel__frase { font-size: 16px; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
    .rg-carrusel__btn { display: none; }
    .rg-carrusel__ctl { right: 10px; top: 10px; gap: 6px; }
    .rg-carrusel__ctl button { width: 44px; height: 44px; background: rgba(20, 14, 10, .4); }
    /* La pieza pasa a ser una barra en el lugar de la frase. */
    .rg-carrusel.has-pieza .rg-carrusel__frase { opacity: 0; min-height: var(--rg-barra-alto, 80px); }
    .rg-pieza { left: 16px; right: 16px; top: auto; bottom: 34px; width: auto; max-width: none; transform: translateY(10px); }
    .rg-pieza__caja { display: none; }
    .rg-pieza__barra { display: flex; }
    .rg-placa__img { object-position: center top; }
    .rg-placa__pastilla { left: 12px; top: 14px; height: 30px; padding: 0 12px; font-size: 12px; }
}
.rg-pieza__mini { flex: none; width: 44px; height: 44px; border-radius: 999px; background: #fde6d6; overflow: hidden; }
.rg-pieza__mini img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.rg-pieza__barra-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rg-pieza__barra-txt strong { font-size: 17px; font-weight: 800; line-height: 1.15; }
.rg-pieza__barra-txt small { font-size: 13px; }
.rg-pieza__chev { flex: none; width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
@media (prefers-reduced-motion: reduce) {
    .rg-carrusel__foto { animation: none !important; }
    .rg-carrusel__tit.is-entra { animation: none; }
    .rg-pieza { transform: none; transition: opacity .6s ease; }
}