/*
 * bomberos.css
 * ------------------------------------------------------------
 * Página institucional /bomberos. Se carga DESPUÉS de rifa.css y
 * usa sus tokens: acá no hay un solo color ni radio escrito a mano
 * salvo los velos sobre foto, que son rgba de la tinta.
 * Va en su propio archivo para que la portada no cargue estilos
 * que no usa y para que las dos páginas evolucionen sin pisarse.
 *
 * Mobile-first: escrito para 390 px, crece con min-width.
 * ------------------------------------------------------------
 */

/* ==========================================================
   Hero — foto a sangre, como en la portada
   ========================================================== */
.b-hero {
    --r-hero-img: url("/assets/img/bomberos-hero.jpg");
    /* Centrado, no pegado abajo: antes el texto quedaba aplastado contra el
       borde inferior con un vacío enorme encima. El degradado superior es más
       marcado porque ahora la cabecera va sobre la foto y necesita contraste. */
    align-items: center;
    min-height: min(92svh, 860px);
    background:
        linear-gradient(100deg, rgba(20, 22, 26, .88) 0%, rgba(20, 22, 26, .58) 46%, rgba(20, 22, 26, .2) 78%),
        linear-gradient(180deg, rgba(20, 22, 26, .72) 0%, rgba(20, 22, 26, .22) 26%, rgba(20, 22, 26, .5) 68%, rgba(20, 22, 26, .95) 100%),
        var(--r-hero-img) 68% 42% / cover no-repeat,
        var(--r-tinta);
}
@media (max-width: 700px) {
    .b-hero {
        background-image:
            linear-gradient(180deg, rgba(20, 22, 26, .62) 0%, rgba(20, 22, 26, .35) 30%, rgba(20, 22, 26, .95) 100%),
            url("/assets/img/bomberos-hero-sm.jpg");
        background-position: 68% 40%;
    }
}
.b-hero__grid { display: grid; gap: var(--r-6); width: 100%; }
.b-hero__texto { max-width: 44ch; }
/* El crédito vuelve abajo a la izquierda: arriba a la derecha choca con la
   cabecera, que ahora va sobre la foto. */
.b-hero .r-hero__credito { top: auto; bottom: var(--r-7); right: auto; left: calc(var(--r-marco) + var(--r-4)); }
.b-hero__escudo { display: inline-grid; place-items: center; color: var(--r-rojo-claro); }
.b-hero__escudo svg { width: 18px; height: 18px; }
.b-hero__desde { display: none; color: rgba(255, 255, 255, .62); font-weight: 400; }
@media (min-width: 640px) { .b-hero__desde { display: inline; } }

.b-hero__titulo {
    display: grid;
    margin: 0 0 var(--r-5);
    color: #fff;
    font-family: var(--r-display);
    font-weight: 700;
    letter-spacing: var(--r-track-display);
    line-height: .98;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.b-hero__titulo-l1 { font-size: clamp(2.6rem, 11vw, 5.2rem); }
.b-hero__titulo-l2 {
    font-size: clamp(1.25rem, 5vw, 2.3rem);
    font-weight: 500;
    color: rgba(255, 255, 255, .82);
    letter-spacing: -.02em;
    margin-top: var(--r-2);
}
.b-hero__lema { max-width: 40ch; font-size: 1.08rem; margin-bottom: var(--r-6); }

.b-btn--claro { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.b-btn--claro:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.b-btn-wa svg, .b-btn--claro svg { width: 20px; height: 20px; margin-right: var(--r-2); flex: 0 0 auto; }

/* Emergencias: el dato que más importa si alguien llega acá apurado.
   Tarjeta de vidrio, como el panel de avance de la portada. */
.b-emergencia {
    display: flex;
    flex-direction: column;
    gap: var(--r-1);
    padding: var(--r-5);
    border-radius: var(--r-radio-lg);
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    backdrop-filter: blur(12px);
    color: #fff;
    text-decoration: none;
    transition: background var(--r-transicion), transform var(--r-transicion);
}
.b-emergencia:hover { background: rgba(255, 255, 255, .11); transform: translateY(-2px); }
.b-emergencia__label {
    display: inline-flex; align-items: center; gap: var(--r-2);
    font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--r-rojo-claro);
}
.b-emergencia__punto {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--r-rojo-claro);
    box-shadow: 0 0 0 0 var(--r-rojo-glow);
    animation: b-pulso 1.8s ease-out infinite;
}
@keyframes b-pulso {
    0%   { box-shadow: 0 0 0 0 var(--r-rojo-glow); }
    70%  { box-shadow: 0 0 0 9px rgba(217, 45, 32, 0); }
    100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0); }
}
.b-emergencia__n {
    font-size: clamp(3.4rem, 16vw, 5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
}
.b-emergencia__pie { font-size: .82rem; color: rgba(255, 255, 255, .62); line-height: 1.5; }

/* ==========================================================
   Cifras — la tira sube y pisa el borde del hero
   ========================================================== */
/* Las cifras ya no se montan sobre el hero. Cuando eran una tira sólida el
   solape funcionaba; ahora son tarjetas sueltas con separación, y el hero
   oscuro se asomaba por los huecos y por encima. */
.b-kpis {
    position: relative;
    z-index: 2;
    padding: var(--r-6) 0 var(--r-5);
}

/* ==========================================================
   Reseña — texto a la izquierda, ficha a la derecha
   ========================================================== */
.b-resena { display: grid; gap: var(--r-6); }
.b-resena__p {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--r-tinta-2);
    margin: 0 0 var(--r-4);
    max-width: var(--r-ancho-txt);
}
.b-resena__p--lead { font-size: 1.15rem; color: var(--r-tinta); }
.b-resena__p:last-child { margin-bottom: 0; }

.b-ficha {
    margin: 0;
    padding: var(--r-2) var(--r-5);
    background: var(--r-superficie);
    border-radius: var(--r-radio-lg);
    box-shadow: var(--r-sombra-sm);
    align-self: start;
}
.b-ficha__fila {
    display: grid;
    gap: var(--r-1);
    padding: var(--r-4) 0;
    box-shadow: inset 0 -1px 0 var(--r-borde);
}
.b-ficha__fila:last-child { box-shadow: none; }
.b-ficha__fila dt {
    font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--r-gris); margin: 0;
}
.b-ficha__fila dd { margin: 0; font-weight: 600; line-height: 1.4; }

/* ==========================================================
   Sección oscura — el contraste fuerte de la página
   ========================================================== */
.b-seccion--oscura {
    margin: 0 var(--r-marco);
    border-radius: var(--r-radio-lg);
    background:
        radial-gradient(60% 50% at 0% 0%, rgba(14, 122, 90, .25), transparent 70%),
        radial-gradient(50% 50% at 100% 100%, rgba(10, 107, 168, .22), transparent 70%),
        var(--r-noche);
    color: var(--r-noche-txt);
}
.b-seccion--oscura .r-wrap { padding-left: var(--r-4); padding-right: var(--r-4); }
.b-eyebrow--claro { color: var(--r-rojo-claro); }
.b-titulo--claro  { color: #fff; }
.b-bajada--clara  { color: var(--r-noche-txt-2); }

/* Especialidades: dos tarjetas altas. Con foto si la hay, con la marca del
   tipo en grande si no. */
.b-especialidades { display: grid; gap: var(--r-4); margin-bottom: var(--r-4); }
.b-esp {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 380px;
    border-radius: var(--r-radio-lg);
    overflow: hidden;
    background:
        radial-gradient(90% 80% at 100% 0%, var(--r-tipo) 0%, transparent 70%),
        var(--r-noche-2);
    isolation: isolate;
}
.b-esp__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -1;
    transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
}
.b-esp--foto:hover .b-esp__img { transform: scale(1.04); }
.b-esp--foto::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20, 22, 26, .1) 20%, rgba(20, 22, 26, .92) 100%);
}
.b-esp__marca {
    position: absolute;
    top: -8%; right: -6%;
    width: 60%;
    max-width: 260px;
    color: rgba(255, 255, 255, .08);
    z-index: -1;
}
.b-esp__marca svg { width: 100%; height: auto; }
.b-esp__cuerpo { position: relative; padding: var(--r-5); }
.b-esp__pill {
    display: inline-flex; align-items: center; gap: var(--r-2);
    padding: var(--r-1) var(--r-3);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: var(--r-3);
}
.b-esp__pill svg { width: 14px; height: 14px; }
.b-esp__t {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: var(--r-track-display);
    color: #fff;
    margin: 0 0 var(--r-2);
}
.b-esp__d { color: rgba(255, 255, 255, .8); line-height: 1.6; margin: 0; max-width: 42ch; }
.b-esp__credito {
    position: absolute;
    right: var(--r-4);
    top: var(--r-3);
    font-size: 10px;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .55);
    text-decoration: none;
}
.b-esp__credito:hover { color: #fff; }

/* Servicios restantes: tarjetas sobre el fondo oscuro. El icono va inline
   con el título, del color del tipo, sin cajita. */
.b-servicios {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--r-3);
}
.b-serv {
    padding: var(--r-5);
    border-radius: var(--r-radio-lg);
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 0 0 0 1px var(--r-noche-borde);
    transition: background var(--r-transicion);
}
.b-serv:hover { background: rgba(255, 255, 255, .08); }
.b-serv__ico { display: inline-grid; place-items: center; color: var(--r-tipo); margin-right: var(--r-3); vertical-align: -3px; }
.b-serv__ico svg { width: 22px; height: 22px; }
.b-serv__t {
    display: flex; align-items: center;
    font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em;
    margin: 0 0 var(--r-2); color: #fff;
}
.b-serv__d { font-size: .92rem; line-height: 1.6; color: var(--r-noche-txt-2); margin: 0; }

/* ==========================================================
   Historia — tarjetas en carrusel con snap, en fila en escritorio
   ========================================================== */
.b-linea {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: var(--r-4) 0 var(--r-2);
    -webkit-overflow-scrolling: touch;
}
.b-linea::-webkit-scrollbar { display: none; }
.b-linea:focus-visible { outline: 2px solid var(--r-tinta); outline-offset: -2px; }
.b-linea__pista {
    list-style: none;
    margin: 0;
    padding: 0 calc(var(--r-marco) + var(--r-4));
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 300px);
    gap: var(--r-3);
}
.b-hito {
    position: relative;
    scroll-snap-align: start;
    padding: var(--r-6) var(--r-5) var(--r-5);
    border-radius: var(--r-radio-lg);
    background: var(--r-superficie);
    box-shadow: var(--r-sombra-sm);
}
/* La línea que une los hitos corre por arriba de las tarjetas. */
.b-hito::before {
    content: "";
    position: absolute;
    left: 0; right: calc(-1 * var(--r-3));
    top: 0;
    height: 2px;
    background: var(--r-borde-fuerte);
}
.b-hito:last-child::before { right: 0; }
.b-hito__punto {
    position: absolute;
    top: -6px; left: var(--r-5);
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--r-superficie);
    box-shadow: inset 0 0 0 3px var(--r-ambar);
}
.b-hito--actual .b-hito__punto { background: var(--r-rojo); box-shadow: 0 0 0 4px var(--r-rojo-borde); }
.b-hito--actual::before { background: linear-gradient(90deg, var(--r-borde-fuerte), var(--r-rojo)); }
.b-hito__etiqueta {
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--r-ambar);
    line-height: 1;
    margin-bottom: var(--r-3);
}
.b-hito--actual .b-hito__etiqueta { color: var(--r-rojo); }
.b-hito__t { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 var(--r-2); }
.b-hito__d { font-size: .9rem; line-height: 1.6; color: var(--r-gris); margin: 0; }

/* ==========================================================
   El cuartel — antes y después
   ========================================================== */
.b-obra__cab { margin-bottom: var(--r-5); }
.b-cuarteles {
    display: grid;
    gap: var(--r-3);
    align-items: stretch;
}
.b-cuartel {
    display: flex;
    flex-direction: column;
    gap: var(--r-2);
    padding: var(--r-5);
    border-radius: var(--r-radio-lg);
}
.b-cuartel--viejo {
    background: var(--r-tinta);
    color: #fff;
}
.b-cuartel--nuevo {
    background: var(--r-superficie);
    box-shadow: var(--r-sombra);
}
.b-cuartel__tag {
    align-self: flex-start;
    padding: var(--r-1) var(--r-3);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .1);
    font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: var(--r-2);
}
.b-cuartel__tag--ambar { background: var(--r-ambar-suave); color: var(--r-ambar); box-shadow: inset 0 0 0 1px var(--r-ambar-borde); }
.b-cuartel__t {
    font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1;
    margin: 0;
}
.b-cuartel__lugar { margin: 0; font-weight: 500; }
.b-cuartel--viejo .b-cuartel__lugar { color: rgba(255, 255, 255, .7); }
.b-cuartel__d { margin: 0; font-size: .92rem; line-height: 1.6; color: rgba(255, 255, 255, .62); }
.b-cuartel--nuevo .r-btn { margin-top: auto; }
.b-cuarteles__flecha {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    margin: 0 auto;
    border-radius: var(--r-pill);
    background: var(--r-ambar);
    color: #fff;
    transform: rotate(90deg);
}
.b-cuarteles__flecha svg { width: 20px; height: 20px; }

/* Anillo de avance: conic-gradient con máscara para dejar el aro. */
.b-anillo {
    --p: 0;
    position: relative;
    display: grid;
    place-content: center;
    text-align: center;
    width: 160px; height: 160px;
    margin: var(--r-2) 0 var(--r-3);
}
.b-anillo::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--r-ambar) calc(var(--p) * 1%), var(--r-ambar-suave) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
}
.b-anillo__cifra {
    font-size: 2.6rem; font-weight: 700; line-height: 1;
    letter-spacing: var(--r-track-display);
    color: var(--r-ambar);
}
.b-anillo__pie { font-size: .8rem; color: var(--r-gris); }

/* ==========================================================
   Súmate — bloque oscuro con rojo como luz
   ========================================================== */
.b-voluntario {
    display: grid;
    gap: var(--r-6);
    margin: var(--r-marco);
    padding: var(--r-7) var(--r-5);
    border-radius: var(--r-radio-lg);
    color: #fff;
    background:
        radial-gradient(90% 90% at 100% 0%, rgba(240, 86, 63, .5), transparent 60%),
        linear-gradient(150deg, #1a1d24, #0d0f13);
}
.b-voluntario__t {
    font-size: clamp(1.9rem, 7vw, 3rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: var(--r-track-display);
    margin: 0 0 var(--r-3);
    color: #fff;
}
.b-voluntario__d { color: rgba(255, 255, 255, .76); line-height: 1.65; margin: 0 0 var(--r-5); max-width: 46ch; }
.b-voluntario__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--r-3);
    align-content: center;
}
.b-voluntario__lista li {
    display: flex;
    gap: var(--r-4);
    align-items: flex-start;
    padding: var(--r-4) var(--r-5);
    border-radius: var(--r-radio);
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
    font-size: .92rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
}
.b-voluntario__lista strong { color: #fff; font-weight: 600; }
.b-voluntario__n { font-weight: 700; color: var(--r-rojo-claro); flex: 0 0 auto; padding-top: 2px; }

/* ==========================================================
   Contacto — formulario + canales
   ========================================================== */
.b-contacto { display: grid; gap: var(--r-5); }
.b-contacto__form { padding: var(--r-5); }
.b-contacto__form .r-aviso { margin-bottom: var(--r-4); }
.b-campos-2 { display: grid; gap: 0; }
.b-opcional { font-weight: 400; color: var(--r-gris); font-size: .8rem; margin-left: var(--r-1); }
.b-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.b-contacto__legal { font-size: .8rem; color: var(--r-gris); margin: var(--r-4) 0 0; line-height: 1.6; }

.b-motivos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r-2);
    margin: 0 0 var(--r-5);
    padding: 0;
    border: 0;
}
.b-motivos__legend {
    display: block;
    width: 100%;
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: var(--r-2);
}
.b-motivo { position: relative; }
.b-motivo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.b-motivo span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--r-4);
    border-radius: var(--r-pill);
    background: var(--r-superficie-2);
    box-shadow: inset 0 0 0 1px var(--r-borde);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--r-transicion), color var(--r-transicion), box-shadow var(--r-transicion);
}
.b-motivo input:checked + span { background: var(--r-tinta); color: #fff; box-shadow: none; }
.b-motivo input:focus-visible + span { outline: 2px solid var(--r-tinta); outline-offset: 2px; }

.b-contacto__datos { display: grid; gap: var(--r-4); align-content: start; }

.b-canal {
    display: flex;
    align-items: center;
    gap: var(--r-4);
    padding: var(--r-4) var(--r-5);
    min-height: 64px;
    border-radius: var(--r-radio);
    background: var(--r-verde);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 14px 30px -16px rgba(14, 122, 90, .7);
    transition: background var(--r-transicion);
}
.b-canal:hover { background: #0b6a4e; }
.b-canal > svg { width: 28px; height: 28px; flex: 0 0 auto; }
.b-canal__t { display: block; font-weight: 600; }
.b-canal__d { display: block; font-size: .84rem; color: rgba(255, 255, 255, .78); }

.b-datos {
    margin: 0;
    padding: var(--r-2) var(--r-5);
    background: var(--r-superficie);
    border-radius: var(--r-radio);
    box-shadow: var(--r-sombra-sm);
}
.b-datos__fila {
    display: grid;
    gap: var(--r-1);
    padding: var(--r-3) 0;
    box-shadow: inset 0 -1px 0 var(--r-borde);
    font-size: .95rem;
}
.b-datos__fila:last-child { box-shadow: none; }
.b-datos__fila dt { font-size: .8rem; color: var(--r-gris); margin: 0; }
.b-datos__fila dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.b-datos__fila a { color: var(--r-tinta); text-decoration-color: var(--r-borde-fuerte); }
.b-datos__fila a:hover { color: var(--r-rojo); }

/* ==========================================================
   WhatsApp flotante — zona del pulgar
   ========================================================== */
.b-wa {
    position: fixed;
    right: var(--r-4);
    bottom: calc(var(--r-4) + env(safe-area-inset-bottom));
    z-index: 25;
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: var(--r-pill);
    background: var(--r-verde);
    color: #fff;
    box-shadow: var(--r-sombra-lg);
    transition: transform var(--r-transicion);
}
.b-wa:hover { transform: scale(1.06); }
.b-wa svg { width: 28px; height: 28px; }

/* ==========================================================
   Entrada al hacer scroll
   ========================================================== */
.b-revela { opacity: 0; transform: translateY(14px); transition: opacity 500ms ease, transform 500ms cubic-bezier(.2, .7, .2, 1); }
.b-revela--ok { opacity: 1; transform: none; }
.b-revela:nth-child(2) { transition-delay: 60ms; }
.b-revela:nth-child(3) { transition-delay: 120ms; }
.b-revela:nth-child(4) { transition-delay: 180ms; }
.b-revela:nth-child(5) { transition-delay: 240ms; }

/* ==========================================================
   Escritorio
   ========================================================== */
@media (min-width: 640px) {
    .b-campos-2 { grid-template-columns: 1fr 1fr; gap: var(--r-4); }
    .b-servicios { grid-template-columns: repeat(2, 1fr); gap: var(--r-4); }
    .b-especialidades { grid-template-columns: 1fr 1fr; }
    .b-cuarteles { grid-template-columns: 1fr auto 1fr; align-items: center; }
    .b-cuarteles__flecha { transform: none; }
    .b-seccion--oscura .r-wrap { padding-left: var(--r-6); padding-right: var(--r-6); }
    .b-voluntario { padding: var(--r-8) var(--r-7); }
    .b-linea__pista { padding: 0 calc(var(--r-marco) + var(--r-6)); }
}

@media (min-width: 860px) {
    .b-seccion--oscura, .b-voluntario { border-radius: var(--r-radio-xl); }
}

@media (min-width: 900px) {
    .b-hero__grid { grid-template-columns: 1.3fr .7fr; gap: var(--r-8); align-items: center; }
    .b-emergencia { padding: var(--r-6); }
    .b-resena { grid-template-columns: 1.4fr .8fr; gap: var(--r-7); }
    .b-esp { min-height: 440px; }
    .b-esp__cuerpo { padding: var(--r-6); }
    .b-linea { overflow: visible; }
    .b-linea__pista {
        grid-auto-flow: row;
        grid-template-columns: repeat(5, 1fr);
        max-width: calc(var(--r-ancho) + var(--r-marco) * 2);
        margin: 0 auto;
        padding: 0 calc(var(--r-marco) + var(--r-6));
    }
    .b-voluntario { grid-template-columns: 1.2fr .8fr; align-items: center; }
    .b-contacto { grid-template-columns: 1.25fr .85fr; gap: var(--r-6); }
    .b-contacto__form { padding: var(--r-6); }
}

@media (prefers-reduced-motion: reduce) {
    .b-esp__img, .b-serv, .b-emergencia, .b-canal, .b-wa, .b-revela { transition: none; }
    .b-emergencia__punto { animation: none; }
    .b-revela { opacity: 1; transform: none; }
}