/* ===========================
   Centro Rossi — estilos custom
   =========================== */

/* ────────────────────────────────────────────────────────────────────
   Fuentes self-hosted (variable fonts, latin subset)
   Servidas desde /assets/fonts/ con Cache-Control immutable en .htaccess.
   No usamos Google Fonts CDN para no bloquear el render.
   ──────────────────────────────────────────────────────────────────── */

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/source-sans-3-latin.woff2') format('woff2-variations'),
         url('../fonts/source-sans-3-latin.woff2') format('woff2');
    font-weight: 200 900;   /* variable: cualquier peso 200-900 */
    font-style: normal;
    font-display: swap;     /* usa sistema mientras baja la fuente */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-latin.woff2') format('woff2-variations'),
         url('../fonts/montserrat-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tipografía Gotham (comercial): cuando esté la licencia, dejar el archivo en
   assets/fonts/ y descomentar. El fallback ya es Montserrat, así que hasta que
   se agregue no rompe nada. */
/*
@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Book.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
*/

html { scroll-behavior: smooth; }

/* Body: Source Sans 3 (forzado a nivel CSS para no depender solo de Tailwind) */
body {
    font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Form elements heredan del body (los browsers por defecto NO heredan) */
button, input, select, textarea, optgroup {
    font-family: inherit;
}

/* Títulos: Gotham (fallback Montserrat) */
h1, h2, h3, h4, h5, h6,
.font-heading {
    font-family: 'Gotham', 'Montserrat', system-ui, sans-serif;
}

/* Padding inferior en mobile para no tapar contenido con sticky CTAs */
@media (max-width: 768px) {
    body { padding-bottom: 60px; }
}

/* Hero slider */
.hero-slide {
    opacity: 0;
    transition: opacity 800ms ease-in-out;
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hero-slide.active {
    opacity: 1;
    pointer-events: auto;
}

/* Tab activo en buscadores */
.search-tab.active {
    background-color: #ffffff;
    color: #005171;
    box-shadow: 0 4px 12px rgba(0, 81, 113, 0.15);
}

.search-panel { display: none; }
.search-panel.active { display: block; }

/* Filtro de sedes activo */
.sede-filter.active {
    background-color: #2178A2;
    color: #ffffff;
    border-color: #2178A2;
}

/* Card hover */
.card-hover {
    transition: transform 250ms ease, box-shadow 250ms ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 81, 113, 0.15);
}

/* Scrollbar suave para reels */
.scroll-reels::-webkit-scrollbar { height: 6px; }
.scroll-reels::-webkit-scrollbar-track { background: #E3E4E5; border-radius: 3px; }
.scroll-reels::-webkit-scrollbar-thumb { background: #2178A2; border-radius: 3px; }

/* Mapa placeholder */
.map-grid {
    background-image:
        linear-gradient(rgba(33, 120, 162, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(33, 120, 162, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* === TREATMENT UNIFICADO de fotos (servicios + sedes) ===
   Objetivo: que fotos con temperaturas de color muy distintas
   (azul MRI, beige consultorio, blanco lab clínico, etc.) se sientan
   parte de la misma identidad visual. Combinamos 3 capas:

   1) Filtro sobre la foto: desaturación + ajuste leve
      → empuja los blancos hacia un tono neutro común
   2) Capa multiply azul Rossi → unifica las temperaturas de color
      (oscurece sutilmente y tinta el conjunto hacia el azul de marca)
   3) Capa screen blanca muy sutil → levanta sombras profundas
      para que no haya fotos "negras" al lado de otras claras

   En hover: se libera el treatment y la foto recupera sus colores reales
   (la imagen "respira" cuando el usuario interactúa). */

.foto-unificada-wrap {
    position: relative;
    isolation: isolate; /* contiene los blend modes a este card */
}

.foto-unificada {
    filter: saturate(0.78) contrast(1.02) brightness(1.02);
    transition: filter 500ms ease, transform 500ms ease;
}

/* Capa azul Rossi en multiply → tinta + unifica */
.foto-unificada-multiply {
    position: absolute;
    inset: 0;
    background: #2178A2; /* rossi-primary */
    mix-blend-mode: multiply;
    opacity: 0.18;
    transition: opacity 500ms ease;
    pointer-events: none;
    z-index: 1;
}

/* Capa screen blanca → levanta sombras */
.foto-unificada-screen {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 1);
    mix-blend-mode: screen;
    opacity: 0.05;
    transition: opacity 500ms ease;
    pointer-events: none;
    z-index: 2;
}

/* HOVER: liberamos el treatment para que la foto se vea natural */
.group:hover .foto-unificada,
.foto-unificada-wrap:hover .foto-unificada {
    filter: saturate(1) contrast(1.02) brightness(1.04);
    transform: scale(1.05);
}
.group:hover .foto-unificada-multiply,
.foto-unificada-wrap:hover .foto-unificada-multiply {
    opacity: 0;
}
.group:hover .foto-unificada-screen,
.foto-unificada-wrap:hover .foto-unificada-screen {
    opacity: 0;
}