/* ==========================================================================
   PREMIUM.CSS — Capa de refinamiento UX/UI
   Funeraria Carrasco Chavarría
   Se carga DESPUÉS de style.css. No modifica la lógica; sólo la presentación.
   Para revertir: quitar el <link> de premium.css en head.php.
   ========================================================================== */

:root {
    /* Paleta tomada del logo: azul marino + carmesí, sobre fondos marfil */
    --fc-navy: #1f2f5c;
    --fc-navy-deep: #15233c;
    --fc-crimson: #b3202f;
    --fc-crimson-dark: #8f1824;
    --fc-ivory: #faf8f5;
    --fc-stone: #eceae6;
    --fc-ink: #2b2f3a;
    --fc-muted: #5d6270;
    --fc-gold: #b79a62;

    --fc-radius: 14px;
    --fc-radius-sm: 8px;
    --fc-shadow-sm: 0 2px 10px rgba(21, 35, 60, .07);
    --fc-shadow-md: 0 10px 30px rgba(21, 35, 60, .12);
    --fc-shadow-lg: 0 20px 50px rgba(21, 35, 60, .18);
    --fc-ease: cubic-bezier(.22, .61, .36, 1);

    --fc-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --fc-font-sans: "Open Sans", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Base tipográfica ---------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--fc-font-sans);
    color: var(--fc-ink);
    background: var(--fc-ivory);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--fc-font-serif);
    color: var(--fc-navy);
    letter-spacing: .01em;
}

p { color: var(--fc-muted); line-height: 1.7; }

a { transition: color .25s var(--fc-ease); }

/* Foco visible para teclado (accesibilidad) */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid var(--fc-gold);
    outline-offset: 2px;
    box-shadow: none;
}

/* Enlace "saltar al contenido" */
.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100000;
    background: var(--fc-navy);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 var(--fc-radius-sm) var(--fc-radius-sm);
    text-decoration: none;
    font-weight: 600;
    transition: top .2s var(--fc-ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* Texto sólo para lectores de pantalla */
.sr-only-fc {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ---------- Spinner ---------- */
#spinner .spinner-grow { color: var(--fc-crimson) !important; }

/* ---------- Top bar ---------- */
.topbar-fc {
    background: var(--fc-navy-deep) !important;
    font-size: .85rem;
    letter-spacing: .02em;
}
.topbar-fc a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.topbar-fc a:hover { color: #fff; }
.topbar-fc .fa-phone-alt, .topbar-fc .fa-clock { color: var(--fc-gold); }
.topbar-fc .topbar-social a { transition: transform .25s var(--fc-ease), color .25s; display: inline-block; }
.topbar-fc .topbar-social a:hover { transform: translateY(-2px); color: #fff; }

/* ---------- Navbar ---------- */
/* .bg-cacha no estaba definida: la barra quedaba transparente al hacer scroll */
.bg-cacha,
.navbar.bg-cacha {
    background-color: rgba(255, 255, 255, .96) !important;
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid rgba(21, 35, 60, .07);
}

/* La barra queda SIEMPRE visible al hacer scroll (antes se escondía a -80px) */
.navbar.sticky-top { top: 0 !important; z-index: 1030; }

.navbar .navbar-brand img { max-height: 56px; transition: transform .3s var(--fc-ease); }
.navbar .navbar-brand:hover img { transform: scale(1.04); }

.navbar .navbar-nav .nav-link {
    position: relative;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .09em;
    color: var(--fc-navy);
    padding: 10px 0;
    margin-left: 22px;
}
.navbar .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0; bottom: 2px;
    width: 0; height: 2px;
    background: var(--fc-crimson);
    transition: width .3s var(--fc-ease);
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active { color: var(--fc-crimson); }
.navbar .navbar-nav .nav-link:hover::after,
.navbar .navbar-nav .nav-link.active::after { width: 100%; }
.navbar .dropdown-toggle::after { position: static; width: auto; height: auto; background: none; }

.navbar .dropdown-menu {
    border: 0;
    border-top: 3px solid var(--fc-crimson);
    border-radius: 0 0 var(--fc-radius-sm) var(--fc-radius-sm);
    box-shadow: var(--fc-shadow-md);
    padding: 8px 0;
    min-width: 220px;
    background: #fff !important;
}
.navbar .dropdown-item {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--fc-navy);
    padding: 10px 20px;
    transition: background .2s, padding-left .25s var(--fc-ease), color .2s;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background: var(--fc-ivory);
    color: var(--fc-crimson);
    padding-left: 26px;
}

/* Botón llamada a la acción del menú */
.nav-cta {
    background: var(--fc-crimson);
    color: #fff !important;
    border-radius: 50px;
    padding: 9px 22px !important;
    margin-left: 26px;
    font-weight: 700;
    letter-spacing: .06em;
    box-shadow: 0 6px 16px rgba(179, 32, 47, .28);
    transition: transform .25s var(--fc-ease), background .25s, box-shadow .25s;
    white-space: nowrap;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
    background: var(--fc-crimson-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(179, 32, 47, .35);
}

@media (max-width: 991.98px) {
    .navbar { padding-left: 1rem !important; padding-right: 1rem !important; }
    .navbar .navbar-nav { margin: 14px 0 10px 0; align-items: stretch !important; }
    .navbar .navbar-nav .nav-link { margin-left: 0; padding: 14px 4px; border-bottom: 1px solid rgba(21, 35, 60, .07); }
    .navbar .navbar-nav .nav-link::after { display: none; }
    .navbar .dropdown-menu { box-shadow: none; border-top: 0; padding-left: 12px; background: var(--fc-ivory) !important; }
    .nav-cta { margin: 14px 0 6px 0; text-align: center; display: block; padding: 13px 22px !important; }
    .navbar-toggler { border: 1px solid rgba(21, 35, 60, .2); padding: 8px 12px; }
}

/* ---------- Hero / cabecera ---------- */
.page-header {
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 0 !important;
    aspect-ratio: 2659 / 984; /* proporción real de webcarosel.png */
    min-height: 200px;
    max-height: 470px;
}
.page-header { margin-bottom: 0 !important; }
.page-header > .container { padding-top: 0 !important; padding-bottom: 0 !important; }
@media (max-width: 575.98px) {
    .page-header { min-height: 190px; background-position: 42% center; }
}
.hero-cta-band {
    background: linear-gradient(135deg, var(--fc-navy-deep), var(--fc-navy));
    color: #fff;
    padding: 22px 0;
    margin-top: 0;
    margin-bottom: 3.5rem;
    box-shadow: var(--fc-shadow-md);
    position: relative;
    z-index: 2;
}
.hero-cta-band .hero-cta-text {
    font-family: var(--fc-font-serif);
    font-size: 1.25rem;
    color: #fff;
    margin: 0;
    line-height: 1.4;
}
.hero-cta-band .hero-cta-text small {
    display: block;
    font-family: var(--fc-font-sans);
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fc-gold);
    margin-bottom: 2px;
}
.btn-fc {
    border-radius: 50px;
    padding: 12px 28px;
    font-weight: 700;
    letter-spacing: .05em;
    font-size: .88rem;
    border-width: 2px;
    transition: transform .25s var(--fc-ease), box-shadow .25s, background .25s, color .25s;
}
.btn-fc:hover { transform: translateY(-2px); }
.btn-fc-crimson { background: var(--fc-crimson); border-color: var(--fc-crimson); color: #fff; box-shadow: 0 6px 16px rgba(179, 32, 47, .35); }
.btn-fc-crimson:hover { background: var(--fc-crimson-dark); border-color: var(--fc-crimson-dark); color: #fff; }
.btn-fc-ghost { background: transparent; border-color: rgba(255, 255, 255, .85); color: #fff; }
.btn-fc-ghost:hover { background: #fff; color: var(--fc-navy); }
.btn-fc-wsp { background: #1fa855; border-color: #1fa855; color: #fff; }
.btn-fc-wsp:hover { background: #178a45; border-color: #178a45; color: #fff; }

@media (max-width: 767.98px) {
    .hero-cta-band { padding: 18px 0; text-align: center; margin-bottom: 2.5rem; }
    .hero-cta-band .btn-fc { width: 100%; }
}

/* ---------- Encabezados de sección ---------- */
.section-title {
    text-align: center;
    margin: 0 auto 2.5rem;
    max-width: 760px;
}
.section-title h4, .section-title h2 {
    font-family: var(--fc-font-serif);
    font-weight: 700;
    color: var(--fc-navy);
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    letter-spacing: .02em;
    margin-bottom: .75rem;
}
.section-title::after {
    content: "";
    display: block;
    width: 64px; height: 3px;
    margin: 0 auto;
    background: linear-gradient(90deg, var(--fc-crimson), var(--fc-gold));
    border-radius: 3px;
}
.container-xxl > h4.text-center {
    font-family: var(--fc-font-serif);
    color: var(--fc-navy);
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    letter-spacing: .02em;
    padding-bottom: 1rem;
    margin-bottom: 2rem !important;
    position: relative;
}
.container-xxl > h4.text-center::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    width: 64px; height: 3px;
    background: linear-gradient(90deg, var(--fc-crimson), var(--fc-gold));
    border-radius: 3px;
}

/* ---------- Tarjetas de servicios ---------- */
.portfolio-container {
    position: relative;
    width: 100%;
    overflow: visible !important;
}

.portfolio-item > div {
    border: 1px solid rgba(21, 35, 60, .06) !important;
    border-radius: var(--fc-radius) !important;
    box-shadow: var(--fc-shadow-sm) !important;
    padding: 0 !important;
    background: #fff;
    transition: transform .35s var(--fc-ease), box-shadow .35s var(--fc-ease);
}
.portfolio-item:hover > div {
    transform: translateY(-6px);
    box-shadow: var(--fc-shadow-md) !important;
}
.portfolio-item .position-relative {
    background: linear-gradient(160deg, #fff 0%, var(--fc-ivory) 100%) !important;
    border-radius: var(--fc-radius) var(--fc-radius) 0 0 !important;
}
.portfolio-item img {
    padding: 28px !important;
    max-height: 190px;
    object-fit: contain !important;
    transition: transform .5s var(--fc-ease);
}
.portfolio-item:hover img { transform: scale(1.06); }
/* Íconos SVG (originalmente rosa) recoloreados al azul marino de la marca */
.portfolio-item img[src$=".svg"] {
    filter: brightness(0) saturate(100%) invert(16%) sepia(35%) saturate(2200%) hue-rotate(200deg) brightness(92%) contrast(95%);
    opacity: .92;
}

/* Íconos de servicio: set coherente (Font Awesome) dentro de una insignia circular */
.svc-icon {
    display: grid;
    place-items: center;
    width: 96px; height: 96px;
    margin: 34px auto 30px;
    border-radius: 50%;
    color: var(--fc-navy);
    background: radial-gradient(circle at 30% 25%, #fff 0%, rgba(31, 47, 92, .07) 100%);
    box-shadow: 0 0 0 9px rgba(31, 47, 92, .045), inset 0 0 0 1.5px rgba(31, 47, 92, .14);
    font-size: 2.35rem;
    transition: background .35s var(--fc-ease), color .35s var(--fc-ease), transform .45s var(--fc-ease), box-shadow .35s var(--fc-ease);
}
.svc-icon i { line-height: 1; }
.svc-icon svg { width: 2.5rem; height: 2.5rem; fill: currentColor; }
.portfolio-item:hover .svc-icon {
    background: linear-gradient(145deg, var(--fc-crimson), var(--fc-crimson-dark));
    color: #fff;
    transform: scale(1.06);
    box-shadow: 0 0 0 9px rgba(179, 32, 47, .12), 0 12px 24px rgba(179, 32, 47, .3);
}

/* Capa con botón: cubre toda la tarjeta y aparece con fundido (antes crecía desde 0 y quedaba a medias) */
.portfolio-item .portfolio-overlay {
    left: 0; bottom: 0;
    width: 100%; height: 100%;
    transform: none;
    opacity: 0;
    background: linear-gradient(180deg, rgba(31, 47, 92, .82), rgba(21, 35, 60, .94));
    transition: opacity .35s var(--fc-ease);
}
.portfolio-item:hover .portfolio-overlay,
.portfolio-item:focus-within .portfolio-overlay { width: 100%; height: 100%; left: 0; transform: none; opacity: 1; }
.portfolio-item .portfolio-overlay .btn {
    border-radius: 50px;
    width: auto;
    height: auto;
    padding: 10px 22px;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .04em;
    background: var(--fc-crimson);
    border-color: var(--fc-crimson);
    color: #fff;
}
.portfolio-item .portfolio-overlay .btn:hover { background: #fff; color: var(--fc-crimson); border-color: #fff; }

.portfolio-item .p-3.text-center { padding: 16px 12px 20px !important; }
.portfolio-item .p-3 .text-primary {
    font-family: var(--fc-font-sans);
    font-size: .88rem;
    letter-spacing: .08em;
    color: var(--fc-navy) !important;
}

@media (max-width: 575.98px) {
    .svc-icon { width: 72px; height: 72px; margin: 24px auto 20px; font-size: 1.75rem; box-shadow: 0 0 0 6px rgba(31, 47, 92, .045), inset 0 0 0 1.5px rgba(31, 47, 92, .14); }
    .svc-icon svg { width: 1.85rem; height: 1.85rem; }
    .portfolio-item img { padding: 14px !important; max-height: 110px; }
    .portfolio-item .p-3 .text-primary { font-size: .7rem; letter-spacing: .04em; }
    .portfolio-item .p-3.text-center { padding: 12px 6px 14px !important; min-height: 64px; display: flex; align-items: center; justify-content: center; }
    .portfolio-item .p-3 p { margin: 0; }
    .portfolio-container.row { --bs-gutter-x: .9rem; --bs-gutter-y: .9rem; }
}

/* En pantallas táctiles no existe "hover": el botón se muestra siempre */
@media (hover: none) {
    .portfolio-item .portfolio-overlay {
        width: 100%; height: auto;
        left: 0; bottom: 0;
        transform: none;
        opacity: 1;
        background: transparent;
        padding: 0 0 10px;
    }
    .portfolio-item .svc-icon { margin-bottom: 52px; }
    .portfolio-item .portfolio-overlay .btn {
        opacity: 1;
        padding: 7px 16px;
        font-size: .78rem;
    }
}

/* ---------- Bloque "Acerca de nosotros" ---------- */
.video {
    /* Antes: degradado rosa claro + texto blanco = bajo contraste */
    background:
        linear-gradient(105deg, rgba(21, 35, 60, .94) 0%, rgba(31, 47, 92, .88) 55%, rgba(31, 47, 92, .72) 100%),
        url(../img/bg-img/fondo1.jpeg) center center no-repeat !important;
    background-size: cover !important;
    border-radius: var(--fc-radius);
    overflow: hidden;
    box-shadow: var(--fc-shadow-lg);
}
.video h1 { color: #fff !important; font-family: var(--fc-font-serif); }
.video p {
    color: rgba(255, 255, 255, .9) !important;
    font-style: normal !important;
    line-height: 1.8 !important;
    font-size: 1rem;
    max-width: 62ch;
}
@media (min-width: 992px) { .video .container { max-width: 1140px; } }
.btn-play { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.btn-play span { border-left-color: var(--fc-crimson); }
.modal-video .modal-content { border-radius: var(--fc-radius); overflow: hidden; border: 0; }

/* Misión / Visión */
.border-start.border-4.border-primary.bg-light,
.h-100.p-3.border-start {
    background: #fff !important;
    border-radius: 0 var(--fc-radius) var(--fc-radius) 0;
    border-left-color: var(--fc-crimson) !important;
    box-shadow: var(--fc-shadow-sm);
    padding: 1.5rem !important;
    transition: box-shadow .3s var(--fc-ease), transform .3s var(--fc-ease);
}
.h-100.p-3.border-start:hover { box-shadow: var(--fc-shadow-md); transform: translateY(-3px); }
.h-100.p-3.border-start h6 { color: var(--fc-navy) !important; letter-spacing: .1em; }
.h-100.p-3.border-start h6 i { color: var(--fc-crimson); }
.h-100.p-3.border-start p.small { font-size: .95rem !important; text-align: left; }

/* ---------- Formulario "Prevención funeraria" ---------- */
.appointment {
    background:
        radial-gradient(ellipse at 15% 20%, rgba(179, 32, 47, .16), transparent 55%),
        linear-gradient(135deg, var(--fc-navy-deep), var(--fc-navy)) !important;
}
.appointment .display-3 {
    color: #fff;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    line-height: 1.15;
}
.appointment .display-3::after {
    content: "";
    display: block;
    width: 70px; height: 3px;
    margin-top: 18px;
    background: var(--fc-gold);
    border-radius: 3px;
}
.appointment p.text-white {
    text-align: left !important;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .88) !important;
}
.appointment .bg-white.rounded {
    border-radius: var(--fc-radius) !important;
    box-shadow: var(--fc-shadow-lg) !important;
    border-top: 4px solid var(--fc-crimson);
}
@media (max-width: 575.98px) { .appointment .bg-white.rounded { padding: 1.5rem !important; } }

.form-label { font-size: .85rem; letter-spacing: .03em; }
.form-control {
    border: 1.5px solid #d9dce4;
    border-radius: var(--fc-radius-sm);
    padding: 12px 14px;
    font-size: 1rem; /* 16px evita zoom automático en iOS */
    color: var(--fc-ink);
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.form-control:hover { border-color: #b8bdcb; }
.form-control:focus {
    border-color: var(--fc-navy);
    box-shadow: 0 0 0 4px rgba(31, 47, 92, .12);
}
.form-control:user-invalid { border-color: var(--fc-crimson); }

#button {
    background: var(--fc-crimson);
    border-color: var(--fc-crimson);
    border-radius: 50px;
    letter-spacing: .08em;
}
#button { padding: 14px 24px !important; box-shadow: 0 8px 20px rgba(179, 32, 47, .3); }
#button:hover { background: var(--fc-crimson-dark); border-color: var(--fc-crimson-dark); }
#button:disabled { opacity: .7; cursor: wait; }

/* ---------- Tarjetas informativas genéricas (servicio básico/completo, etc.) ---------- */
.border-ligth.bg-light, .border-light.bg-light {
    border-color: var(--fc-crimson) !important;
}

/* ---------- Botones globales ---------- */
.btn { border-radius: var(--fc-radius-sm); font-weight: 600; }
.btn.btn-primary { background: var(--fc-navy); border-color: var(--fc-navy); }
.btn.btn-primary:hover { background: var(--fc-crimson); border-color: var(--fc-crimson); }
.btn-outline-primary { color: var(--fc-navy); border-color: var(--fc-navy); }
.btn-outline-primary:hover { background: var(--fc-navy); border-color: var(--fc-navy); }

/* Tablas e imágenes de catálogo (otras páginas) */
img { max-width: 100%; }
.card, .modal-content { border-radius: var(--fc-radius); }

/* ---------- Footer ---------- */
.footer {
    background: linear-gradient(180deg, var(--fc-navy-deep) 0%, #0f1a2e 100%) !important;
    color: rgba(255, 255, 255, .72);
    position: relative;
    margin-top: 0;
}
.footer::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--fc-crimson), var(--fc-gold), var(--fc-navy));
}
.footer h5 {
    font-family: var(--fc-font-serif);
    font-size: 1.05rem;
    letter-spacing: .12em !important;
    color: #fff !important;
    position: relative;
    padding-bottom: 12px;
}
.footer h5::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    width: 38px; height: 2px;
    background: var(--fc-gold);
}
.footer .btn.btn-link {
    color: rgba(255, 255, 255, .72);
    text-transform: none;
    line-height: 1.55;
    white-space: normal;
    padding-left: 0;
    border-radius: 0;
}
.footer .btn.btn-link:hover { color: #fff; letter-spacing: normal; padding-left: 4px; }
.footer .btn.btn-link::before { color: var(--fc-gold); }
.footer .btn.btn-link .fa, .footer .btn.btn-link .fas { color: var(--fc-gold) !important; }
.footer .btn.btn-link:has(.fa)::before { content: none; } /* evita doble icono en contacto */
.footer .btn-square {
    width: 42px; height: 42px;
    border-radius: 50% !important;
    border-color: rgba(255, 255, 255, .35) !important;
    color: #fff !important;
    transition: transform .25s var(--fc-ease), background .25s, border-color .25s;
}
.footer .btn-square:hover { background: var(--fc-crimson); border-color: var(--fc-crimson) !important; transform: translateY(-3px); }

/* ---------- Botones flotantes: pila compacta, esquina inferior derecha ---------- */
.btn-float {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform .3s var(--fc-ease), background .3s, color .3s;
    width: 52px !important; height: 52px !important;
    border-radius: 50% !important;
    font-size: 22px !important;
    right: 18px !important;
    color: #fff !important;
    background: var(--fc-navy) !important;
    box-shadow: 0 8px 22px rgba(21, 35, 60, .3) !important;
    z-index: 1040 !important;
}
.btn-float.wsp   { background: #1fa855 !important; bottom: 18px !important; }
.btn-float.phone { background: var(--fc-crimson) !important; bottom: 82px !important; }
.btn-float.mapa  { background: var(--fc-navy) !important; bottom: 146px !important; }
.btn-float:hover { transform: scale(1.1) !important; background: #fff !important; }
.btn-float.wsp:hover   { color: #1fa855 !important; }
.btn-float.phone:hover { color: var(--fc-crimson) !important; }
.btn-float.mapa:hover  { color: var(--fc-navy) !important; }

@media (max-width: 768px) {
    .btn-float { width: 46px !important; height: 46px !important; font-size: 19px !important; right: 12px !important; }
    .btn-float.wsp   { bottom: 14px !important; }
    .btn-float.phone { bottom: 69px !important; }
    .btn-float.mapa  { bottom: 124px !important; }
}

/* Pulso suave para llamar la atención sobre WhatsApp */
@media (prefers-reduced-motion: no-preference) {
    .btn-float.wsp::after {
        content: "";
        position: absolute; inset: 0;
        border-radius: 50%;
        border: 2px solid #1fa855;
        animation: fcPulse 2.4s ease-out infinite;
    }
    @keyframes fcPulse {
        0%   { transform: scale(1);   opacity: .7; }
        100% { transform: scale(1.6); opacity: 0; }
    }
}

/* Botón volver arriba (no choca con los flotantes) */
.back-to-top { right: 18px; bottom: 210px; border-radius: 50%; }

/* ---------- Respeto a quien prefiere menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .wow { visibility: visible !important; }
}

/* ---------- Impresión ---------- */
@media print {
    .topbar-fc, .navbar, .btn-float, #spinner, .hero-cta-band { display: none !important; }
}


/* ==========================================================================
   FUNERAL PET (vistas/modulos/funeral-pet.php)
   ========================================================================== */
.btn-fc-outline { background: transparent; border-color: var(--fc-navy); color: var(--fc-navy); }
.btn-fc-outline:hover { background: var(--fc-navy); color: #fff; }

.pet-hero {
    position: relative;
    padding: 64px 0 56px;
    background:
        radial-gradient(ellipse at 90% 0%, rgba(179, 32, 47, .07), transparent 55%),
        linear-gradient(180deg, #f4f1ec 0%, var(--fc-ivory) 100%);
    margin-bottom: 40px;
    overflow: hidden;
}
.pet-hero::after { /* huella decorativa */
    content: "\f1b0";
    font-family: "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; left: 3%; bottom: 10px;
    font-size: 150px; line-height: 1;
    color: var(--fc-navy); opacity: .04;
    transform: rotate(-18deg);
    pointer-events: none;
}
.pet-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px;
    border-radius: 50px;
    background: rgba(179, 32, 47, .08);
    color: var(--fc-crimson);
    font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: 18px;
}
.pet-title {
    font-size: clamp(1.9rem, 3.8vw, 2.9rem);
    line-height: 1.18;
    margin-bottom: 18px;
}
.pet-lead { font-size: 1.05rem; color: var(--fc-muted); margin-bottom: 22px; }
.pet-lead strong { color: var(--fc-navy); }
.pet-checks { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
.pet-checks li { display: flex; align-items: flex-start; gap: 12px; color: var(--fc-ink); }
.pet-checks i {
    flex: 0 0 26px; height: 26px; display: grid; place-items: center;
    border-radius: 50%; background: var(--fc-navy); color: #fff; font-size: .7rem; margin-top: 1px;
}
.pet-logo-card {
    background: #fff;
    border-radius: 22px;
    padding: clamp(18px, 3vw, 34px);
    box-shadow: var(--fc-shadow-lg);
    border: 1px solid rgba(21, 35, 60, .06);
    transform: rotate(-1.2deg);
    transition: transform .5s var(--fc-ease);
}
.pet-logo-card:hover { transform: rotate(0) scale(1.01); }
.pet-logo-card img { display: block; width: 100%; height: auto; }

/* Plan */
.pet-plan-wrap { margin-top: 0; margin-bottom: 64px; }
.pet-plan {
    border-radius: 20px; overflow: hidden;
    background: #fff;
    box-shadow: var(--fc-shadow-md);
    border: 1px solid rgba(21, 35, 60, .06);
}
.pet-price {
    height: 100%; min-height: 220px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 28px 20px;
    background: linear-gradient(145deg, var(--fc-navy-deep), var(--fc-navy));
    color: rgba(255, 255, 255, .8);
    position: relative;
}
.pet-price::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: linear-gradient(90deg, var(--fc-crimson), var(--fc-gold));
}
.pet-price small { letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; }
.pet-price-num {
    font-family: var(--fc-font-serif); font-weight: 700; color: #fff;
    font-size: clamp(3.6rem, 7vw, 4.8rem); line-height: 1.05; margin: 6px 0;
}
.pet-price-num sup { font-size: .42em; top: -.95em; margin-right: 2px; color: var(--fc-gold); }
.pet-price-num span { font-size: .42em; margin-left: 1px; }
.pet-plan-body { padding: clamp(24px, 4vw, 40px); }
.pet-plan-body h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); margin-bottom: 12px; }
.pet-plan-body strong { color: var(--fc-crimson); }
.pet-plan-note { color: var(--fc-muted); font-size: .95rem; border-left: 3px solid var(--fc-gold); padding-left: 14px; }
@media (max-width: 767.98px) { .pet-price { min-height: 0; padding: 24px 16px; } }

/* Galería */
.pet-gallery-wrap { margin-bottom: 64px; }
.pet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
@media (max-width: 991.98px) { .pet-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (max-width: 767.98px) { .pet-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.pet-card {
    display: flex; flex-direction: column;
    background: #fff;
    border-radius: var(--fc-radius);
    border: 1px solid rgba(21, 35, 60, .06);
    box-shadow: var(--fc-shadow-sm);
    overflow: hidden;
    text-decoration: none;
    transition: transform .35s var(--fc-ease), box-shadow .35s var(--fc-ease);
}
.pet-card:hover, .pet-card:focus-visible { transform: translateY(-6px); box-shadow: var(--fc-shadow-md); }
.pet-card-img {
    position: relative; display: block; aspect-ratio: 1 / 1;
    background: #fff; overflow: hidden;
}
.pet-card-img img {
    width: 100%; height: 100%; object-fit: contain; padding: 14px;
    transition: transform .6s var(--fc-ease);
}
.pet-card:hover .pet-card-img img { transform: scale(1.07); }
.pet-card-zoom {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: linear-gradient(180deg, rgba(31, 47, 92, .55), rgba(21, 35, 60, .78));
    color: #fff; font-size: 1.6rem; opacity: 0;
    transition: opacity .3s var(--fc-ease);
}
.pet-card:hover .pet-card-zoom, .pet-card:focus-visible .pet-card-zoom { opacity: 1; }
.pet-card-cap {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 12px 8px 16px;
    border-top: 1px solid rgba(21, 35, 60, .06);
}
.pet-card-cap strong { color: var(--fc-navy); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.pet-card-cap small { color: var(--fc-muted); font-size: .75rem; margin-top: 2px; }
@media (hover: none) { .pet-card-zoom { display: none; } }

/* Llamado final */
.pet-cta {
    position: relative; overflow: hidden;
    padding: clamp(32px, 5vw, 56px) 24px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--fc-navy-deep), var(--fc-navy));
    box-shadow: var(--fc-shadow-lg);
}
.pet-cta h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 2.1rem); margin-bottom: 10px; position: relative; }
.pet-cta p { color: rgba(255, 255, 255, .85); margin-bottom: 22px; position: relative; }
.pet-cta .btn { position: relative; }
.pet-cta-paw {
    position: absolute; right: 4%; top: -10px; font-size: 150px; color: #fff; opacity: .05; transform: rotate(18deg);
}
@media (max-width: 575.98px) { .pet-cta .btn-fc { width: 100%; } .pet-hero { padding: 40px 0 36px; } }


/* Descripción breve bajo el título de cada servicio */
.portfolio-item .svc-desc {
    margin: 8px 0 0;
    min-height: 3em;               /* reserva 2 líneas: tarjetas parejas en la misma fila */
    font-size: .84rem;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
    color: var(--fc-muted);
}
@media (max-width: 575.98px) { .portfolio-item .svc-desc { display: none; } } /* en celular: grilla compacta */


/* ==========================================================================
   MODAL "ATENCIÓN INMEDIATA" (#exampleModal, definido en footer.php)
   ========================================================================== */
.modal-aten .modal-dialog { max-width: 460px; }
.modal-aten .modal-content {
    border-radius: 22px; overflow: hidden;
    box-shadow: 0 30px 70px rgba(10, 18, 36, .45);
}
.modal-aten .aten-head {
    position: relative; text-align: center; color: #fff;
    padding: 34px 28px 54px;
    background:
        radial-gradient(ellipse at 85% 0%, rgba(179, 32, 47, .35), transparent 60%),
        linear-gradient(145deg, var(--fc-navy-deep), var(--fc-navy));
}
.modal-aten .aten-head::after { /* curva suave hacia el cuerpo */
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px;
    background: #fff; border-radius: 26px 26px 0 0;
}
.modal-aten .aten-close { position: absolute; top: 16px; right: 16px; opacity: .8; z-index: 2; }
.modal-aten .aten-close:hover { opacity: 1; }
.modal-aten .aten-icon {
    display: inline-grid; place-items: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(145deg, var(--fc-crimson), var(--fc-crimson-dark));
    color: #fff; font-size: 1.5rem;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .08), 0 10px 24px rgba(179, 32, 47, .45);
    margin-bottom: 14px;
}
.modal-aten .aten-live {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--fc-gold); margin-bottom: 6px;
}
.modal-aten .aten-live i {
    width: 8px; height: 8px; border-radius: 50%; background: #2fd16b;
    box-shadow: 0 0 0 0 rgba(47, 209, 107, .6);
}
@media (prefers-reduced-motion: no-preference) {
    .modal-aten .aten-live i { animation: fcLive 1.8s infinite; }
    @keyframes fcLive { 70% { box-shadow: 0 0 0 8px rgba(47, 209, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 209, 107, 0); } }
}
.modal-aten .modal-title { color: #fff; font-size: 1.7rem; margin: 0 0 8px; }
.modal-aten .aten-head p { color: rgba(255, 255, 255, .82); font-size: .92rem; margin: 0 auto; max-width: 340px; line-height: 1.55; }

.modal-aten .aten-body { background: #fff; padding: 4px 26px 28px; }
.modal-aten .aten-phone {
    display: block; text-align: center; text-decoration: none;
    margin-bottom: 18px; padding: 14px 10px;
    border-radius: var(--fc-radius);
    background: var(--fc-ivory);
    border: 1px dashed rgba(31, 47, 92, .25);
    transition: background .25s, border-color .25s;
}
.modal-aten .aten-phone:hover { background: #fff; border-color: var(--fc-crimson); }
.modal-aten .aten-phone small { display: block; color: var(--fc-muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.modal-aten .aten-phone span { font-family: var(--fc-font-serif); font-weight: 700; font-size: 2.1rem; color: var(--fc-navy); line-height: 1.2; letter-spacing: .02em; }

.modal-aten .aten-address {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 20px; padding-top: 18px;
    border-top: 1px solid rgba(21, 35, 60, .08);
    font-size: .88rem; color: var(--fc-muted); line-height: 1.45;
}
.modal-aten .aten-address > div { flex: 1 1 160px; min-width: 0; }
.modal-aten .aten-address strong { display: block; color: var(--fc-navy); font-size: .85rem; }
.modal-aten .aten-pin {
    flex: 0 0 40px; height: 40px; display: grid; place-items: center;
    border-radius: 50%; background: rgba(179, 32, 47, .08); color: var(--fc-crimson);
}
.modal-aten .aten-route { font-weight: 700; font-size: .82rem; color: var(--fc-crimson); text-decoration: none; white-space: nowrap; margin-left: auto; }
.modal-aten .aten-route:hover { color: var(--fc-crimson-dark); text-decoration: underline; }
@media (max-width: 575.98px) {
    .modal-aten .aten-body { padding: 4px 18px 22px; }
    .modal-aten .aten-route { margin-left: 52px; }
}

/* Menú en pantallas medianas (992–1279px): evitar que los ítems se partan en dos líneas */
.navbar .navbar-nav .nav-link { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1279.98px) {
    .navbar .navbar-nav { padding-right: 0 !important; }
    .navbar .navbar-nav .nav-link { margin-left: 13px; font-size: .72rem; letter-spacing: .04em; }
    .navbar .navbar-brand img { max-height: 46px; }
    .nav-cta { margin-left: 14px; padding: 8px 14px !important; }
    .nav-cta i { display: none; }
}


/* ==========================================================================
   MARCAS / EMPRESAS ATENDIDAS (vistas/modulos/testimonial.php)
   ========================================================================== */
.brands { padding: 24px 0 56px; }
.brands-grid, .brands-track { list-style: none; margin: 0; padding: 0; }

.brand-item {
    display: grid; place-items: center;
    background: #fff;
    border: 1px solid rgba(21, 35, 60, .06);
    border-radius: var(--fc-radius);
    box-shadow: var(--fc-shadow-sm);
    padding: 14px 18px;
    transition: transform .3s var(--fc-ease), box-shadow .3s var(--fc-ease);
}
.brand-item img {
    display: block;
    max-width: 100%; max-height: 112px; width: auto; height: auto;
    object-fit: contain;
    transition: transform .3s var(--fc-ease);
}
.brand-item:hover { transform: translateY(-4px); box-shadow: var(--fc-shadow-md); }
.brand-item:hover img { transform: scale(1.05); }

/* Pocas marcas: cuadrícula centrada */
.brands-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.brands-grid .brand-item { width: 240px; height: 150px; }

/* Muchas marcas: cinta que se desplaza sola (pausa al pasar el mouse) */
.brands-marquee {
    overflow: hidden;
    padding: 10px 0 18px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.brands-track { display: flex; width: max-content; animation: fcBrands 40s linear infinite; }
.brands-track .brand-item { flex: 0 0 auto; width: 240px; height: 150px; margin-right: 20px; }
.brands-marquee:hover .brands-track,
.brands-marquee:focus-within .brands-track { animation-play-state: paused; }
@keyframes fcBrands { to { transform: translateX(-50%); } }

@media (max-width: 575.98px) {
    .brands { padding-bottom: 40px; }
    .brands-grid { gap: 12px; }
    .brands-grid .brand-item { width: calc(50% - 6px); height: 120px; padding: 10px 12px; }
    .brands-track .brand-item { width: 170px; height: 120px; padding: 10px 12px; margin-right: 12px; }
    .brand-item img { max-height: 90px; }
}
/* Sin animación: se muestran todas en cuadrícula, sin duplicados */
@media (prefers-reduced-motion: reduce) {
    .brands-marquee { -webkit-mask-image: none; mask-image: none; }
    .brands-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 12px; }
    .brands-track .brand-item { margin-right: 0; }
    .brands-track .brand-item[aria-hidden="true"] { display: none; }
}


/* ==========================================================================
   MODAL ATENCIÓN INMEDIATA · bloque "Servicio de su interés"
   ========================================================================== */
.modal-aten .modal-content { max-height: calc(100vh - 2rem); display: flex; flex-direction: column; }
.modal-aten .aten-head { flex: 0 0 auto; }
.modal-aten .aten-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.modal-aten [hidden] { display: none !important; }

.aten-servicio {
    margin: 4px 0 20px;
    padding: 16px 18px 18px;
    background: var(--fc-ivory);
    border: 1px solid rgba(21, 35, 60, .08);
    border-left: 4px solid var(--fc-crimson);
    border-radius: 0 var(--fc-radius) var(--fc-radius) 0;
    animation: fcServicioIn .4s var(--fc-ease) both;
}
@keyframes fcServicioIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aten-servicio { animation: none; } }

.aten-servicio-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.aten-servicio-icon {
    flex: 0 0 46px; height: 46px; display: grid; place-items: center;
    border-radius: 50%; background: var(--fc-navy); color: #fff; font-size: 1.15rem;
}
.aten-servicio-icon svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
.aten-servicio-top small {
    display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--fc-crimson);
}
.aten-servicio-top h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; color: var(--fc-navy); }
.aten-servicio p { margin: 0; font-size: .92rem; color: var(--fc-ink); line-height: 1.6; }

.aten-servicio-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.aten-servicio-lista li { position: relative; padding-left: 22px; font-size: .86rem; color: var(--fc-muted); line-height: 1.45; }
.aten-servicio-lista li::before {
    content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; left: 0; top: 1px; font-size: .7rem; color: var(--fc-crimson);
}
.aten-chip {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 12px; padding: 6px 12px;
    border-radius: 50px; background: rgba(31, 47, 92, .08);
    color: var(--fc-navy); font-size: .76rem; font-weight: 700;
}
.aten-chip i { color: #1fa855; }
.aten-servicio-link {
    display: inline-block; margin: 12px 0 0 12px;
    font-size: .82rem; font-weight: 700; color: var(--fc-crimson); text-decoration: none;
}
.aten-servicio-link:hover { color: var(--fc-crimson-dark); text-decoration: underline; }
.aten-chip[hidden] + .aten-servicio-link { margin-left: 0; }

/* Con un servicio elegido, el encabezado se compacta para que el detalle quede a la vista */
.modal-aten.has-servicio .aten-head { padding: 22px 24px 40px; }
.modal-aten.has-servicio .aten-head p { display: none; }
.modal-aten.has-servicio .aten-icon { width: 50px; height: 50px; font-size: 1.15rem; margin-bottom: 8px; }
.modal-aten.has-servicio .modal-title { font-size: 1.45rem; margin-bottom: 0; }
.modal-aten.has-servicio .aten-live { margin-bottom: 2px; }

.aten-servicio p strong { color: var(--fc-navy); font-weight: 700; }


/* ==========================================================================
   BOTONES "Ver información", ojo, enlace y descarga (móvil Y escritorio)
   Antes eran rojo sólido / azul con borde rojo; ahora son azul suave con
   texto/ícono azul marino en todos los tamaños. El rojo queda para las
   llamadas a la acción principales (Llamar ahora, Atención 24/7).
   ========================================================================== */
.portfolio-item .portfolio-overlay .btn,
.portfolio-item .portfolio-overlay .btn.btn-outline-light,
.portfolio-item .portfolio-overlay .btn.btn-outline-primary,
.portfolio-item .portfolio-overlay .btn.btn-square {
    background: #eaeef8;
    border: 1px solid #cfd7ec;
    color: var(--fc-navy);
    box-shadow: none;
}
.portfolio-item .portfolio-overlay .btn i,
.portfolio-item .portfolio-overlay .btn svg { color: var(--fc-navy); }

/* Escritorio: la capa de hover es azul oscuro, así que el botón resalta en blanco */
.portfolio-item .portfolio-overlay .btn:hover,
.portfolio-item .portfolio-overlay .btn:focus,
.portfolio-item .portfolio-overlay .btn:active {
    background: #fff;
    border-color: #fff;
    color: var(--fc-navy);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
/* Móvil / táctil: no hay capa oscura, así que al tocar se vuelve azul marino */
@media (hover: none), (max-width: 991.98px) {
    .portfolio-item .portfolio-overlay .btn:hover,
    .portfolio-item .portfolio-overlay .btn:focus,
    .portfolio-item .portfolio-overlay .btn:active {
        background: var(--fc-navy);
        border-color: var(--fc-navy);
        color: #fff;
        box-shadow: none;
    }
    .portfolio-item .portfolio-overlay .btn:hover i,
    .portfolio-item .portfolio-overlay .btn:focus i { color: #fff; }
}


/* ==========================================================================
   GALERÍA DE FOTOS Y VIDEOS  (modulos/galeria-fotos.php, galeria-videos.php)
   ========================================================================== */
[hidden] { display: none !important; }
.gal { padding: 56px 0 72px; background: var(--fc-ivory); }
.gal-vacio {
    text-align: center; color: #6b7390; max-width: 520px; margin: 24px auto;
    padding: 36px 24px; background: #fff; border-radius: var(--fc-radius);
    border: 1px dashed rgba(31, 47, 92, .22);
}

/* Filtros */
.gal-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 26px; }
.gal-chip {
    border: 1px solid rgba(31, 47, 92, .18); background: #fff; color: var(--fc-navy);
    padding: 8px 18px; border-radius: 50px; font-size: .85rem; font-weight: 600; cursor: pointer;
    transition: background .25s var(--fc-ease), color .25s var(--fc-ease), border-color .25s var(--fc-ease);
}
.gal-chip:hover { border-color: var(--fc-navy); }
.gal-chip.is-active { background: var(--fc-navy); border-color: var(--fc-navy); color: #fff; }
.gal-chip:focus-visible, .gal-thumb:focus-visible, .vid-card:focus-visible { outline: 3px solid var(--fc-gold); outline-offset: 2px; }

/* Fotos */
.gal-grid, .vid-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.gal-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.gal-thumb {
    position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0;
    border-radius: var(--fc-radius); overflow: hidden; cursor: zoom-in; background: #e9ecf3;
    box-shadow: var(--fc-shadow-sm); transition: transform .3s var(--fc-ease), box-shadow .3s var(--fc-ease);
}
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--fc-ease); }
.gal-thumb:hover { transform: translateY(-4px); box-shadow: var(--fc-shadow-md); }
.gal-thumb:hover img { transform: scale(1.06); }
.gal-cap {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; text-align: left;
    color: #fff; font-size: .85rem; font-weight: 600;
    background: linear-gradient(180deg, transparent, rgba(21, 35, 60, .85));
    opacity: 0; transform: translateY(6px); transition: opacity .3s var(--fc-ease), transform .3s var(--fc-ease);
}
.gal-thumb:hover .gal-cap, .gal-thumb:focus-visible .gal-cap { opacity: 1; transform: none; }
@media (hover: none) { .gal-cap { opacity: 1; transform: none; font-size: .78rem; } }
.btn-fc-soft {
    margin-top: 26px; padding: 11px 28px; border-radius: 50px; font-weight: 700; font-size: .9rem; cursor: pointer;
    background: #eaeef8; color: var(--fc-navy); border: 1px solid #cfd7ec;
    transition: background .25s var(--fc-ease), color .25s var(--fc-ease);
}
.btn-fc-soft:hover { background: var(--fc-navy); color: #fff; border-color: var(--fc-navy); }

/* Videos */
.vid-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.vid-card {
    display: block; width: 100%; padding: 0; border: 0; text-align: left; cursor: pointer; background: #fff;
    border-radius: var(--fc-radius); overflow: hidden; box-shadow: var(--fc-shadow-sm);
    transition: transform .3s var(--fc-ease), box-shadow .3s var(--fc-ease);
}
.vid-card:hover { transform: translateY(-4px); box-shadow: var(--fc-shadow-md); }
.vid-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #1f2f5c; overflow: hidden; }
/* Portada por defecto (sin miniatura): degradado azul, marca de agua del logo y marco dorado */
.vid-thumb--vacio {
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .16), transparent 58%),
        linear-gradient(135deg, #2a3f7a 0%, var(--fc-navy) 45%, var(--fc-navy-deep) 100%);
}
.vid-thumb--vacio::before {
    content: ""; position: absolute; inset: 10px; z-index: 1; pointer-events: none;
    border: 1px solid rgba(183, 154, 98, .55); border-radius: calc(var(--fc-radius) - 6px);
}
.vid-thumb--vacio::after {
    content: ""; position: absolute; left: 50%; bottom: 22px; width: 46px; height: 2px; z-index: 1;
    transform: translateX(-50%); background: linear-gradient(90deg, var(--fc-crimson), var(--fc-gold));
}
.vid-thumb .vid-wm {
    position: absolute; inset: 0; margin: auto; width: auto; height: 58%; max-width: 70%;
    object-fit: contain; opacity: .14; filter: brightness(0) invert(1); transform: none;
}
.vid-card:hover .vid-thumb .vid-wm { transform: none; }
.vid-thumb .vid-frame { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; background: #1f2f5c; }
.vid-thumb:has(.vid-frame)::after {
    content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,35,60,.05), rgba(21,35,60,.45));
}
.vid-thumb .vid-play, .vid-thumb .vid-tag { z-index: 2; }
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--fc-ease); }
.vid-card:hover .vid-thumb img { transform: scale(1.05); }
.vid-play {
    position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%;
    display: grid; place-items: center; color: var(--fc-navy); background: rgba(255, 255, 255, .94);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3); transition: transform .3s var(--fc-ease);
}
.vid-play svg { margin-left: 3px; }
.vid-card:hover .vid-play { transform: scale(1.1); }
.vid-tag {
    position: absolute; top: 12px; left: 12px; padding: 4px 12px; border-radius: 50px; font-size: .7rem;
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(21, 35, 60, .78);
}
.vid-title { display: block; padding: 14px 16px 16px; font-weight: 600; color: var(--fc-navy); line-height: 1.35; }

/* Visor (fotos y video) */
body.fc-visor-abierto { overflow: hidden; }
.fc-visor {
    position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
    background: rgba(10, 16, 32, .94); padding: 56px 12px 24px;
}
.fc-visor-fig { margin: 0; max-width: min(1100px, 100%); text-align: center; }
.fc-visor-fig img { max-width: 100%; max-height: calc(100vh - 150px); border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.fc-visor-fig figcaption { color: #e8ecf7; margin-top: 12px; font-size: .95rem; }
.fc-visor-fig small { opacity: .6; margin-left: 6px; }
.fc-visor-x, .fc-visor-nav {
    position: absolute; border: 0; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .12);
    width: 46px; height: 46px; border-radius: 50%; font-size: 1.5rem; line-height: 1;
    display: grid; place-items: center; transition: background .25s var(--fc-ease);
}
.fc-visor-x:hover, .fc-visor-nav:hover { background: rgba(255, 255, 255, .26); }
.fc-visor-x { top: 12px; right: 12px; font-size: 1.9rem; z-index: 2; }
.fc-visor-nav { top: 50%; transform: translateY(-50%); font-size: 1.1rem; }
.fc-prev { left: 12px; } .fc-next { right: 12px; }
.fc-video-box { width: min(980px, 100%); }
.fc-video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.fc-video-frame iframe, .fc-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fc-video-title { color: #e8ecf7; margin: 14px 4px 0; text-align: center; font-weight: 600; }

@media (max-width: 575.98px) {
    .gal { padding: 36px 0 52px; }
    .gal-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .vid-grid { grid-template-columns: 1fr; }
    .fc-visor-nav { top: auto; bottom: 14px; transform: none; }
}


/* ==========================================================================
   UBICACIÓN / SUCURSAL  (modulos/sucursales.php)
   ========================================================================== */
.suc { padding: 48px 0 64px; background: var(--fc-ivory); }
.suc-map {
    position: relative; height: 100%; min-height: 380px; border-radius: var(--fc-radius-lg, 18px); overflow: hidden;
    box-shadow: var(--fc-shadow-md); background: #e9ecf3;
}
.suc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.suc-map-tag {
    position: absolute; left: 14px; top: 14px; padding: 8px 16px; border-radius: 50px; font-size: .8rem; font-weight: 700;
    color: #fff; background: rgba(21, 35, 60, .88); backdrop-filter: blur(4px); pointer-events: none;
}
.suc-map-tag i { color: var(--fc-gold); margin-right: 4px; }

.suc-card {
    height: 100%; padding: 30px 28px; background: #fff; border-radius: var(--fc-radius-lg, 18px);
    box-shadow: var(--fc-shadow-md); border: 1px solid rgba(21, 35, 60, .06); border-top: 4px solid var(--fc-navy);
}
.suc-eyebrow { margin: 0 0 4px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--fc-gold); text-transform: uppercase; }
.suc-heading { margin: 0 0 20px; font-family: var(--fc-serif, 'Playfair Display', serif); font-size: 1.55rem; color: var(--fc-navy); }
.suc-list { list-style: none; margin: 0 0 24px; padding: 0; }
.suc-list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid rgba(21, 35, 60, .08); }
.suc-list li:last-child { border-bottom: 0; }
.suc-ico {
    flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: #eaeef8; color: var(--fc-navy); font-size: 1rem;
}
.suc-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7a829c; margin-bottom: 2px; }
.suc-value { display: block; color: #2a3350; font-size: .98rem; line-height: 1.45; }
.suc-list li > div { min-width: 0; }
.suc-value a { color: var(--fc-navy); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.suc-value a:hover { color: var(--fc-crimson); text-decoration: underline; }
.suc-sep { margin: 0 8px; color: #b6bdd2; }

.suc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.suc-btn {
    flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 18px; border-radius: 50px; font-weight: 700; font-size: .9rem; text-decoration: none;
    transition: transform .25s var(--fc-ease), box-shadow .25s var(--fc-ease), background .25s var(--fc-ease), color .25s var(--fc-ease);
}
.suc-btn:hover { transform: translateY(-2px); }
.suc-btn--main { flex-basis: 100%; background: var(--fc-navy); color: #fff; box-shadow: 0 6px 18px rgba(31, 47, 92, .28); }
.suc-btn--main:hover { background: var(--fc-navy-deep); color: #fff; }
.suc-btn--soft { background: #eaeef8; color: var(--fc-navy); border: 1px solid #cfd7ec; }
.suc-btn--soft:hover { background: var(--fc-navy); color: #fff; border-color: var(--fc-navy); }
.suc-btn--wa { background: #e7f6ec; color: #17803d; border: 1px solid #bfe5cc; }
.suc-btn--wa:hover { background: #1fa855; color: #fff; border-color: #1fa855; }
.suc-btn:focus-visible { outline: 3px solid var(--fc-gold); outline-offset: 2px; }

@media (max-width: 991.98px) { .suc-map { min-height: 320px; } }
@media (max-width: 575.98px) {
    .suc { padding: 32px 0 48px; }
    .suc-card { padding: 24px 20px; }
    .suc-map { min-height: 280px; }
}


/* ==========================================================================
   ATENCIÓN INMEDIATA  (modulos/atencioninmediata.php)
   ========================================================================== */
.ia { padding: 40px 0 72px; }
.ia-hero {
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center;
    padding: 40px; margin-bottom: 56px; color: #fff; border-radius: var(--fc-radius-lg, 18px);
    background:
        radial-gradient(circle at 90% 10%, rgba(183, 154, 98, .22), transparent 45%),
        linear-gradient(135deg, var(--fc-navy) 0%, var(--fc-navy-deep) 100%);
    box-shadow: var(--fc-shadow-lg);
}
.ia-badge {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 50px;
    font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    background: rgba(255, 255, 255, .12); color: #f3e7cf;
}
.ia-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: iaPulse 2s infinite; }
@keyframes iaPulse { 70% { box-shadow: 0 0 0 9px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
.ia-hero h2 { margin: 16px 0 12px; color: #fff; font-family: var(--fc-serif, 'Playfair Display', serif); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; }
.ia-hero p { margin: 0; color: #d6dcee; max-width: 52ch; line-height: 1.6; }
.ia-hero-actions { display: grid; gap: 14px; }
.ia-contact {
    display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 16px; text-decoration: none;
    background: #fff; color: var(--fc-navy); box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    transition: transform .25s var(--fc-ease), box-shadow .25s var(--fc-ease);
}
.ia-contact:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .3); color: var(--fc-navy); }
.ia-contact small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7a829c; }
.ia-contact strong { display: block; font-size: 1.25rem; letter-spacing: .01em; }
.ia-contact-ico {
    flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 1.15rem; color: #fff;
}
.ia-contact--tel .ia-contact-ico { background: var(--fc-navy); }
.ia-contact--wa .ia-contact-ico { background: #1fa855; }
.ia-contact:focus-visible { outline: 3px solid var(--fc-gold); outline-offset: 3px; }

.ia-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ia-card {
    display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: #fff;
    border: 1px solid rgba(21, 35, 60, .07); border-radius: var(--fc-radius); box-shadow: var(--fc-shadow-sm);
    transition: transform .3s var(--fc-ease), box-shadow .3s var(--fc-ease), border-color .3s var(--fc-ease);
}
.ia-card:hover { transform: translateY(-3px); box-shadow: var(--fc-shadow-md); border-color: rgba(31, 47, 92, .18); }
.ia-card-ico {
    flex: 0 0 46px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
    background: #eaeef8; color: var(--fc-navy); font-size: 1.05rem;
}
.ia-card-txt { font-weight: 600; color: #2a3350; font-size: .95rem; line-height: 1.35; }

.ia-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    margin-top: 48px; padding: 28px 32px; background: #fff; border-radius: var(--fc-radius-lg, 18px);
    border: 1px solid rgba(21, 35, 60, .07); border-left: 5px solid var(--fc-gold); box-shadow: var(--fc-shadow-sm);
}
.ia-cta h3 { margin: 0 0 4px; font-family: var(--fc-serif, 'Playfair Display', serif); font-size: 1.35rem; color: var(--fc-navy); }
.ia-cta p { margin: 0; color: #5d6683; }
.ia-cta-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border-radius: 50px; font-weight: 700; text-decoration: none;
    background: #eaeef8; color: var(--fc-navy); border: 1px solid #cfd7ec; transition: background .25s var(--fc-ease), color .25s var(--fc-ease), transform .25s var(--fc-ease);
}
.ia-cta-btn:hover { background: var(--fc-navy); color: #fff; border-color: var(--fc-navy); transform: translateY(-2px); }
.ia-cta-btn:focus-visible { outline: 3px solid var(--fc-gold); outline-offset: 3px; }

@media (max-width: 991.98px) {
    .ia-hero { grid-template-columns: 1fr; padding: 32px 26px; }
    .ia-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .ia { padding: 24px 0 48px; }
    .ia-hero { padding: 26px 20px; margin-bottom: 40px; }
    .ia-grid { grid-template-columns: 1fr; gap: 10px; }
    .ia-card { padding: 14px 16px; }
    .ia-cta { padding: 22px 20px; }
    .ia-cta-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ia-dot { animation: none; } }