/* assets/css/hero-carrusel.css
   Estilos del carrusel de destacados/anuncios del hero (template-parts/
   hero-carrusel-anuncios.php), para Provincias y Noticias. Son una copia
   de las reglas .hero-* que ya existen en inicio.css para el Inicio —
   duplicadas a propósito en vez de compartir el mismo archivo, para no
   tocar nada de lo que ya funciona en producción en el Inicio.
   Encolar solo en las páginas que usan el template-part (ver functions.php). */

.hero-row-carrusel{position:relative;display:flex;gap:48px;align-items:center;justify-content:space-between;margin-top:32px;max-width:1280px;margin-left:auto;margin-right:auto}
@media (max-width:1024px){.hero-row-carrusel{flex-direction:column;align-items:stretch}}

.hero-visual{flex:none;width:430px}
@media (max-width:1024px){.hero-visual{width:100%;max-width:430px;margin:0 auto}}
.hero-visual-inner{position:relative;height:500px}
@media (max-width:600px){
  /* Mismo fix que inicio.css: los hijos absolutos (.hero-photo, etc.)
     usan píxeles fijos pensados para 430px de ancho. Sin fijar ese
     ancho aquí también, quedaban descentrados/recortados en un
     teléfono real, que es más angosto que eso.

     margin:0 auto NO centra un bloque más ancho que su contenedor
     (la spec CSS trata los márgenes auto como 0 en ese caso, no como
     negativos), así que quedaba pegado a la izquierda y desbordado
     hacia la derecha. margin-left calculado a mano sí centra el
     sobrante en partes iguales. */
  .hero-visual-inner{width:430px;margin-left:calc(50% - 215px);transform:scale(.8);transform-origin:top center;margin-bottom:-100px}
}

.hero-blobs{position:absolute;inset:0;width:100%;height:100%;opacity:.95}
.hero-blobs path:first-child{animation:heroFloaty 11s ease-in-out infinite;transform-origin:215px 252px}
.hero-blobs path:last-child{animation:heroFloaty2 13s ease-in-out infinite;transform-origin:315px 232px}
@keyframes heroFloaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes heroFloaty2{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(8px) rotate(-2deg)}}
@media (prefers-reduced-motion:reduce){.hero-blobs path{animation:none!important}}

.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease}
.hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.hero-photo{position:absolute;top:16px;left:64px;width:302px;height:392px;border-radius:22px;overflow:hidden;box-shadow:0 24px 50px rgba(90,60,40,.22);display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#F4E3DA,#E4ECE3);color:#C79B86}
.hero-photo.alt{background:linear-gradient(150deg,#EFE7DD,#E4ECE3);color:#B4A695}
.hero-badge{position:absolute;top:0;left:44px;display:inline-flex;align-items:center;gap:7px;color:#fff;font-size:12px;font-weight:800;padding:8px 14px;border-radius:999px}
.hero-panel{position:absolute;left:16px;bottom:12px;width:412px;background:rgba(255,255,255,.70);backdrop-filter:blur(22px) saturate(1.6);border:1px solid rgba(255,255,255,.75);border-radius:14px;padding:14px 20px;box-shadow:0 16px 38px rgba(90,60,40,.20)}
@media (max-width:600px){.hero-panel{width:calc(100% - 32px)}}
.hero-cta{display:block;text-align:center;background:#C15F3C;color:#fff;font-weight:700;font-size:14.5px;padding:12px;border-radius:8px;margin-top:14px;border:none;width:100%;cursor:pointer;font-family:inherit}
.hero-cta:hover{background:#A34A2C}

.hero-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:10px}
.hero-arrow{cursor:pointer;width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid #E7DDD1;color:#4A453F;display:flex;align-items:center;justify-content:center}
.hero-arrow:hover{border-color:#C15F3C;color:#C15F3C}
.hero-dots{display:flex;align-items:center;gap:7px}
.hero-dot{height:8px;border-radius:999px;cursor:pointer;transition:width .2s,background .2s;width:8px;background:#D8C9BC}
.hero-dot.is-active{width:22px;background:#C15F3C}