:root {
    --bg-opacity: 0.70;
}

html {
    min-height: 100%;
    background-color: #F8F7F5;
}

body {
    min-height: 100vh;
    margin: 0;
    color: #121212;
    -webkit-font-smoothing: antialiased;
    background: transparent !important;
}

/* Solo la FOTO, con opacidad. El color de fondo lo da el html */
#fondo-foto {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background-image: url('../img/fondo-camara.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    opacity: var(--bg-opacity, 0.70);
}

body.area-privada #fondo-foto {
    display: none !important;
}

body.area-privada {
    background-color: #F8F7F5 !important;
}

.glass-header {
    background: rgba(248, 247, 245, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(18, 18, 18, 0.06);
}

.gallery-border {
    border: 1px solid rgba(18, 18, 18, 0.1);
}

.hover-lift {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.07);
}

/* ==========================================================================
   Carrusel de fotografías del portafolio ("Center Mode" / Coverflow)
   --------------------------------------------------------------------------
   Al abrir un apartado, las fotos se recorren con scroll-snap nativo
   (flechas, arrastre táctil/ratón y teclado, sin depender de ninguna
   librería). La tarjeta central queda en foco —tamaño completo, opacidad
   100%— y las tarjetas anterior/siguiente asoman parcialmente a los lados,
   reducidas de tamaño, algo desenfocadas y más tenues.

   Cada tarjeta ocupa un porcentaje del ancho de la pista (no el 100%), y
   al principio/final de la pista hay un espaciador invisible del mismo
   ancho sobrante, para que incluso la primera y la última foto puedan
   llegar a quedar centradas. La escala/opacidad/desenfoque de cada
   tarjeta NO son fijas: JavaScript (portafolio.js, updateCoverflow) las
   recalcula en cada frame de scroll según la distancia de esa tarjeta al
   centro de la pista, así el efecto es continuo mientras se arrastra o
   se desliza, no un simple salto entre dos estados. */
.portfolio-carousel-wrap {
    position: relative;
}

.portfolio-carousel {
    display: flex;
    align-items: center;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-block: 1.5rem;
}
.portfolio-carousel::-webkit-scrollbar {
    display: none;
}

/* Espaciadores invisibles al principio y al final de la pista: reservan
   (100% - ancho de tarjeta) / 2 cada uno, para que la primera y la ultima
   fotografia tambien puedan llegar a quedar centradas al hacer scroll.
   Van como hijos flex normales, NO como padding del contenedor: si fueran
   padding, la caja de contenido de la pista ya vendria recortada por ese
   mismo porcentaje, y el ancho de las tarjetas (definido tambien en % del
   mismo contenedor) se aplicaria dos veces en cascada, quedando mucho mas
   pequeno de lo previsto. */
.portfolio-carousel-spacer {
    flex: 0 0 auto;
    width: 11%;
    scroll-snap-align: none;
}
@media (min-width: 640px) {
    .portfolio-carousel-spacer { width: 21%; }
}
@media (min-width: 1024px) {
    .portfolio-carousel-spacer { width: 30%; }
}

.portfolio-carousel-slide {
    flex: 0 0 auto;
    width: 78%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    /* transform/opacity/filter los fija JS en cada tarjeta según su
       distancia al centro; sin JS (o mientras carga) se ven todas a
       tamaño y opacidad completos, así que el carrusel sigue siendo
       usable de todas formas. */
    will-change: transform, opacity, filter;
}
@media (min-width: 640px) {
    .portfolio-carousel-slide { width: 58%; }
}
@media (min-width: 1024px) {
    .portfolio-carousel-slide { width: 40%; }
}

.portfolio-carousel-card {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.18);
    transition: box-shadow 0.3s ease;
}
.portfolio-carousel-slide.is-active .portfolio-carousel-card {
    box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.32);
}

.portfolio-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: rgba(18, 18, 18, 0.18);
    transition: background-color 0.2s ease, transform 0.2s ease;
    flex: 0 0 auto;
}
.portfolio-carousel-dot:hover {
    background: rgba(18, 18, 18, 0.35);
}
.portfolio-carousel-dot.is-active {
    background: #121212;
    transform: scale(1.3);
}

/* Con `scroll-behavior: smooth` respetamos igualmente la preferencia de
   menos movimiento del sistema: los saltos entre fotos son instantáneos.
   El desenfoque/escala progresivos también se desactivan: con menos
   movimiento, todas las tarjetas se ven nítidas y a tamaño completo. */
@media (prefers-reduced-motion: reduce) {
    .portfolio-carousel {
        scroll-behavior: auto;
    }
    .portfolio-carousel-slide {
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }
}

.pulse-dot {
    animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* ==========================================================================
   Transición de navegación entre secciones: "diafragma de cámara"
   --------------------------------------------------------------------------
   Cada página del sitio es un documento independiente (arquitectura
   multipágina). El efecto se construye con un pequeño script
   (/js/diafragma-transicion.js) que, al hacer clic en un enlace interno:

     1. Dibuja por encima de todo un SVG con 6 palas oscuras (el iris real
        de un objetivo, con degradado de metal y aro exterior) ya cerradas,
        tapando toda la pantalla.
     2. Navega a la página siguiente.
     3. En la página siguiente, ese mismo iris cerrado aparece instantáneo
        (para que no se vea la página "en crudo" ni un solo frame) y
        entonces gira y se abre, revelando el contenido real que hay debajo.

   El "orificio" central NO es un agujero negro que luego se sustituye por
   la página: el propio `.diafragma-overlay` y su `<svg>` no llevan NINGÚN
   fondo pintado (ver `background` más abajo) — lo único opaco son las
   palas. Como el overlay se superpone directamente sobre el DOM real de
   la página (fixed, por encima de todo), cualquier zona que las palas no
   cubran dejar ver, sin más, la página de verdad que hay debajo. Es el
   equivalente web de un Track Matte de After Effects (la silueta opaca de
   las palas actúa como máscara alfa inversa): no hace falta capturar ni
   clonar la página en una capa aparte, la propia composición de capas del
   navegador ya resuelve el matte. Por eso la imagen de la página siguiente
   es visible dentro del hueco desde el primer fotograma en que ese hueco
   existe, y va creciendo en tiempo real exactamente al ritmo del `rotate`
   + `scale` de las palas (ver `diafragma-blade-abrir` más abajo) — sin
   fundido ni salto final: cuando termina la animación, las palas ya están
   fuera de la vista y lo único que se ve es la página, sin necesidad de
   ocultar ni desvanecer nada.

   Por qué no basta con CSS/View Transitions: la View Transitions API nativa
   solo permite recortar (clip-path) la captura de la página vieja y la
   nueva; no puede pintar una tercera capa independiente y opaca (el
   material de las palas) por encima de ambas. Para que se vean palas de
   verdad —como el objetivo de una cámara— hace falta un elemento propio,
   de ahí el SVG generado por JavaScript.

   Es una mejora progresiva: si JavaScript falla o está desactivado, los
   enlaces no se interceptan y la navegación funciona exactamente igual
   que en un sitio sin este efecto (cambio de página normal del navegador).
   Ver también @media (prefers-reduced-motion) más abajo.
   ========================================================================== */

/* Se deja declarada por si el navegador soporta View Transitions nativas,
   pero sin animación propia: el iris del punto anterior es opaco y cubre
   toda la pantalla durante el cambio de documento, así que cualquier
   cross-fade nativo por debajo no llega a verse. Evita así que compitan
   dos efectos distintos a la vez. */
@view-transition {
    navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    opacity: 1;
}

/* Contenedor del iris: cubre toda la ventana, por encima de cualquier
   otro contenido, y no intercepta clics ni mientras está visible (es
   puramente decorativo durante la transición).
   SIN fondo a propósito (nada de `background`): si aquí hubiera un color
   sólido, el hueco del diafragma mostraría ese color en vez de la página
   real. Al dejarlo transparente, la única opacidad la ponen las propias
   palas — el hueco es una ventana de verdad hacia el DOM que hay debajo,
   no un relleno que luego se cambia por la imagen final. */
.diafragma-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    pointer-events: none;
    background: none;
}
.diafragma-overlay svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Cada pala: degradado oscuro tipo metal cepillado + un trazo negro fino
   entre palas, para que se distingan como piezas separadas del mecanismo
   (igual que en un objetivo real). La forma (el polígono) es fija; lo
   único que anima la apertura es `transform` sobre cada pala, girando
   alrededor de su propio pivote (transform-origin), que es como gira de
   verdad cada pala de un diafragma mecánico. */
.diafragma-blade {
    fill: url(#diafragma-blade-grad);
    stroke: #000;
    stroke-width: 1;
    stroke-linejoin: round;
    transform-box: view-box;
}

/* Estado "abierto": todas las palas giran y además se alejan un poco más
   del centro (scale). El giro por sí solo ya retira las palas de la vista
   en pantallas normales; el `scale` final es solo un margen de seguridad
   para que, en monitores muy panorámicos o proporciones poco habituales,
   ninguna esquina se quede sin cubrir. Ese `scale` ocurre en el último
   tramo de la animación, cuando las palas ya están fuera de la zona
   visible, así que no se percibe como un "crecimiento": solo garantiza
   la cobertura total sin cambiar la sensación de la apertura. */
.diafragma-overlay.diafragma-abrir .diafragma-blade {
    animation: diafragma-blade-abrir 1.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes diafragma-blade-abrir {
    0% {
        transform: rotate(0deg) scale(1);
    }
    70% {
        transform: rotate(195deg) scale(1);
    }
    100% {
        transform: rotate(195deg) scale(3.5);
    }
}

/* En móvil, una apertura algo más corta y ágil para que no se sienta
   pesada en pantallas pequeñas o equipos menos potentes. */
@media (max-width: 640px) {
    .diafragma-overlay.diafragma-abrir .diafragma-blade {
        animation-duration: 1s;
    }
}

/* Accesibilidad: si el usuario prefiere menos movimiento, el propio script
   (diafragma-transicion.js) no intercepta la navegación y este overlay
   nunca llega a crearse. Esta regla es un cinturón de seguridad extra por
   si el overlay quedara en el DOM por cualquier motivo. */
@media (prefers-reduced-motion: reduce) {
    .diafragma-overlay {
        display: none !important;
    }
}