/* Micro-animaciones para los iconos de #Grid_icons (icons_template.php).
   Los SVG reemplazan los PNG anteriores; cada uno tiene sub-elementos con
   clases icon-* que se animan solo en :hover/:focus-within de la card. */

.card_iconos_img.icon-svg {
    overflow: visible;
}

/* El hover original de components.css atenua el icono (opacity:.8); estos SVG
   necesitan verse a pleno para que la animación se lea bien. */
.card_iconos:hover .card_iconos_img.icon-svg,
.card_iconos:focus-within .card_iconos_img.icon-svg {
    opacity: 1;
}

/* ---------- 26 paradas: pin que rebota + onda de ubicación ---------- */
.icon-map-ring {
    transform-box: view-box;
    transform-origin: 50px 92px;
    opacity: 0;
}

.card_iconos:hover .icon-map-body,
.card_iconos:focus-within .icon-map-body {
    animation: iconMapBounce 1s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: bottom center;
}

.card_iconos:hover .icon-map-ring,
.card_iconos:focus-within .icon-map-ring {
    animation: iconMapPing 1s ease-out infinite;
}

@keyframes iconMapBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes iconMapPing {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* ---------- Frecuencia: agujas del reloj girando ---------- */
.icon-clock-hour,
.icon-clock-minute {
    transform-box: view-box;
    transform-origin: 50px 50px;
}

.card_iconos:hover .icon-clock-minute,
.card_iconos:focus-within .icon-clock-minute {
    animation: iconClockSpin 1.8s linear infinite;
}

.card_iconos:hover .icon-clock-hour,
.card_iconos:focus-within .icon-clock-hour {
    animation: iconClockSpin 6s linear infinite;
}

@keyframes iconClockSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---------- Hop On Hop Off: flechas subiendo y bajando ---------- */
.card_iconos:hover .icon-hop-down,
.card_iconos:focus-within .icon-hop-down {
    animation: iconHopDown 1s ease-in-out infinite;
}

.card_iconos:hover .icon-hop-up,
.card_iconos:focus-within .icon-hop-up {
    animation: iconHopUp 1s ease-in-out infinite;
}

@keyframes iconHopDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

@keyframes iconHopUp {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ---------- Audioguía: almohadillas pulsando como si sonaran ---------- */
.icon-headset-pad {
    transform-box: fill-box;
    transform-origin: center;
}

.card_iconos:hover .icon-headset-pad,
.card_iconos:focus-within .icon-headset-pad {
    animation: iconHeadsetPulse 0.6s ease-in-out infinite;
}

@keyframes iconHeadsetPulse {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.35); }
}

/* ---------- Vistas Panorámicas: flash de cámara ---------- */
.icon-camera-lens,
.icon-camera-flash {
    transform-box: fill-box;
    transform-origin: center;
}

.card_iconos:hover .icon-camera-lens,
.card_iconos:focus-within .icon-camera-lens {
    animation: iconCameraBlink 1.6s ease-in-out infinite;
}

.card_iconos:hover .icon-camera-flash,
.card_iconos:focus-within .icon-camera-flash {
    animation: iconCameraFlash 1.6s ease-in-out infinite;
}

@keyframes iconCameraBlink {
    0%, 34%, 100% { opacity: 0; }
    40% { opacity: 1; }
    55% { opacity: 0; }
}

@keyframes iconCameraFlash {
    0%, 36% { opacity: 0; transform: scale(0.2); }
    45% { opacity: 0.9; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(3); }
}

/* ---------- Seguridad: brillo que recorre el escudo ---------- */
.icon-shield-shine {
    transform-box: fill-box;
    transform-origin: center;
}

.card_iconos:hover .icon-shield-shine,
.card_iconos:focus-within .icon-shield-shine {
    animation: iconShieldShine 1.2s ease-in-out infinite;
}

.card_iconos:hover .icon-shield,
.card_iconos:focus-within .icon-shield {
    animation: iconShieldGlow 1.2s ease-in-out infinite;
}

@keyframes iconShieldShine {
    /* El rect base (x=-70, width=26) arranca totalmente a la izquierda del
       escudo (mask); debe terminar totalmente a la derecha (mask x hasta 88)
       antes de reiniciar el loop, o el reinicio se ve como un salto. */
    0% { transform: translateX(0); }
    100% { transform: translateX(170px); }
}

@keyframes iconShieldGlow {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(217, 15, 22, 0)); }
    50% { filter: drop-shadow(0 0 6px rgba(217, 15, 22, 0.75)); }
}

/* ---------- Flexibilidad: 2 casilleros del calendario se marcan de rojo,
   uno primero y después el otro, sin superponerse ---------- */
.card_iconos:hover .icon-calendar-mark,
.card_iconos:focus-within .icon-calendar-mark {
    animation: iconCalendarMark 2.4s ease-in-out infinite;
}

.card_iconos:hover .icon-calendar-mark-2,
.card_iconos:focus-within .icon-calendar-mark-2 {
    /* Medio ciclo desfasado: cuando el primero vuelve a blanco, este se pinta de rojo. */
    animation-delay: 1.2s;
}

@keyframes iconCalendarMark {
    0%, 8% { fill: #fff; }
    20%, 35% { fill: #D90F16; }
    50%, 100% { fill: #fff; }
}

/* ---------- Wifi Gratuito: señal que sube y baja ---------- */
.icon-wifi-arc1,
.icon-wifi-arc2,
.icon-wifi-arc3 {
    transform-box: fill-box;
    transform-origin: center;
}

.card_iconos:hover .icon-wifi-arc1,
.card_iconos:hover .icon-wifi-arc2,
.card_iconos:hover .icon-wifi-arc3,
.card_iconos:focus-within .icon-wifi-arc1,
.card_iconos:focus-within .icon-wifi-arc2,
.card_iconos:focus-within .icon-wifi-arc3 {
    animation: iconWifiWave 1.2s ease-in-out infinite;
}

.card_iconos:hover .icon-wifi-arc2,
.card_iconos:focus-within .icon-wifi-arc2 {
    animation-delay: 0.15s;
}

.card_iconos:hover .icon-wifi-arc3,
.card_iconos:focus-within .icon-wifi-arc3 {
    animation-delay: 0.3s;
}

@keyframes iconWifiWave {
    0%, 100% { opacity: 0.35; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-3px); }
}

/* Respeta la preferencia de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
    .card_iconos * {
        animation: none !important;
    }
}