/* 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;
    opacity: 0; transition: opacity 1.2s ease; will-change: opacity, transform;
    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; }
/* 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: 440px; }
    .rg-pieza__num { font-size: 92px; }
}
@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: 72px; }
    .rg-pieza__num--largo { font-size: 40px; }
    .rg-pieza__al { font-size: 20px; }
}
@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: 56px; }
    .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; }
}