/* ============================================================
   ESTILOSOBREMI-DEFERRED.CSS
   CSS NO-CRÍTICO — solo estilos VISUALES y animaciones.
   Las dimensiones y estructura están en el CSS crítico inline
   del HTML para evitar CLS (Cumulative Layout Shift).
   ============================================================ */

/* ============================================================
   VARIABLES — solo las que NO están en el crítico inline
   (--color-primary, --color-white, --color-text y
    --carousel-max-width ya están definidas inline)
   ============================================================ */
:root {
    --spacing-xs:       clamp(0.5rem, 2vw, 0.625rem);
    --spacing-sm:       clamp(0.625rem, 2vw, 1rem);
    --spacing-lg:       clamp(1.25rem, 4vw, 1.875rem);
    --font-size-small:  clamp(0.75rem, 2vw, 0.8rem);
    --transition-slow:  0.5s ease;
    --transition-image: 4s cubic-bezier(0.4, 0, 0.2, 1);
    --radius-md:        20px;
    --shadow-soft:      0 4px 8px rgb(0 0 0 / 10%);
}

/* ============================================================
   CARRUSEL — solo estilos VISUALES
   (width, max-width, aspect-ratio, margin, position, overflow,
    contain ya están fijados en el crítico inline)
   ============================================================ */
.image-wrapper {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    background-color: transparent;   /* sobreescribe el #f0f0f0 placeholder */
}

/* Transición de fade entre fotos — puramente visual */
.profile-photo {
    transition: opacity var(--transition-image);
    transform: translateZ(0);        /* GPU compositing */
}

/* object-position ya está en el crítico, pero se repite por si acaso */
.photo-img {
    object-position: center top;
}

/* ============================================================
   PUZZLE — solo estilos VISUALES
   (width, max-width, aspect-ratio, max-height, margin, contain
    ya están en el crítico inline)
   ============================================================ */
.flex-container {
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 20px;
    display: grid;
    place-items: center;
    gap: 15px;
}

#puzzle-container {
    /* FIX landscape gap: capa GPU compartida por todas las piezas */
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    /* Fondo transparente — se mimetiza con el fondo blanco de la página */
    background-color: transparent;
    overflow: hidden;
}

#puzzle-text {
    order: -1;
    font-size: 1rem;
    line-height: 1.4;
}

/* ============================================================
   PIEZAS DEL PUZZLE
   ============================================================ */
.piece {
    position: absolute;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity var(--transition-slow);
    will-change: opacity;
    backface-visibility: hidden;
    /* FIX gaps: 1px extra solapa piezas adyacentes — elimina líneas sub-píxel */
    width: calc(25% + 1px) !important;
    height: calc(25% + 1px) !important;
}

/* ============================================================
   MARCA DE AGUA
   ============================================================ */
.watermark-container {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.watermark {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100vw !important;
    height: 100vh !important;
    background-image: url('../img/LOGOFONDO.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 30% auto;
    opacity: 0.2;
    pointer-events: none;
    will-change: opacity;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding-block: 10px;
    width: 100%;
}

.copyright {
    text-align: center;
    font-size: var(--font-size-small);
    padding: 10px 20px;
    border-block-start: 1px solid rgb(255 255 255 / 20%);
}

/* ============================================================
   UTILIDADES
   ============================================================ */
/* NOTA: p{} eliminado — ya está en el CSS crítico inline
   para evitar que el artículo se desplace al cargar este CSS */

main, body > * {
    position: relative;
    z-index: 1;
}

.fade {
    transition: opacity var(--transition-slow);
}

img {
    height: auto;
    max-width: 100%;
    display: block;
    content-visibility: auto;
}

input, textarea, select {
    box-sizing: border-box;
}

.clearfix {
    display: flow-root;
}

/* ============================================================
   MEDIA QUERIES RESPONSIVE
   ============================================================ */

/* DESKTOP GRANDE (1441px+) */
@media (min-width: 1441px) {
    .flex-container { max-width: 500px; }
    .watermark      { background-size: 35% auto; }
}

/* DESKTOP/LAPTOP (max-width: 1024px) */
@media (max-width: 1024px) {
    .content        { padding-inline: 20px; }
    /* NOTA: .image-wrapper width ya lo gestiona el crítico inline */
    .flex-container { max-width: 380px; }
    .watermark      { background-size: 40% auto; }
}

/* TABLET/MÓVIL GRANDE (max-width: 770px) */
@media (max-width: 770px) {
    .content        { padding-inline: 15px; }
    /* NOTA: .image-wrapper width ya lo gestiona el crítico inline */
    .flex-container { max-width: 320px; margin-block: 20px; padding: 15px; }
    #puzzle-container { max-width: 220px; }
    .watermark      { background-size: 35% auto; }
}

/* MÓVIL PEQUEÑO (max-width: 480px) */
@media (max-width: 480px) {
    .content        { padding-inline: 10px; }
    /* NOTA: .image-wrapper width ya lo gestiona el crítico inline */
    .flex-container { max-width: 280px; padding: 10px; }
    #puzzle-container { max-width: 200px; }
    .watermark      { background-size: 32% auto; }
}

/* LANDSCAPE */
@media (orientation: landscape) {
    header { padding-block: 10px; padding-inline: 0; }
    .logo  { width: clamp(50px, 12vw, 80px); }
    nav ul { gap: 30px; }
    nav ul li a {
        padding-block: 10px;
        padding-inline: 15px;
        font-size: clamp(12px, 3vw, 14px);
    }
    main { padding-block: 8px; }
}

@media (max-height: 480px) and (orientation: landscape) {
    .header-container { padding-block: 5px; padding-inline: 0; }
    .image-wrapper    { max-width: 200px; }
    .flex-container   {
        max-width: 300px; padding: 10px;
        max-height: none; aspect-ratio: auto;
        min-height: 320px; gap: 10px;
    }
    #puzzle-container { max-width: 200px; flex-shrink: 0; }
    #puzzle-text      { font-size: 0.9rem; line-height: 1.3; margin-block-end: 8px; }
    .watermark        { background-size: 20% auto; }
}

@media (min-width: 768px) and (max-height: 1024px) and (orientation: landscape) {
    .flex-container {
        max-width: 400px; max-height: none;
        aspect-ratio: auto; min-height: 380px; padding: 15px;
    }
    #puzzle-container { max-width: 280px; }
    #puzzle-text      { font-size: 1rem; line-height: 1.4; }
    .watermark        { background-size: 25% auto; }
}

@media (max-height: 400px) and (orientation: landscape) {
    .flex-container {
        min-height: 280px; padding: 8px; gap: 10px;
    }
    #puzzle-container { max-width: 180px; }
    #puzzle-text      { font-size: 0.85rem; line-height: 1.2; margin-block-end: 5px; }
    .header-container { padding-block: 5px; padding-inline: 0; }
    nav ul li a {
        padding-block: 10px; padding-inline: 15px;
        font-size: clamp(12px, 3vw, 14px);
    }
}

@media (min-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
    .flex-container   { max-width: 450px; min-height: 400px; }
    #puzzle-container { max-width: 300px; }
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   IMPRESIÓN
   ============================================================ */
@media print {
    .watermark-container, nav { display: none; }
    .flex-container { box-shadow: none; page-break-inside: avoid; }
    body  { color: black; background: white; }
    *     { box-shadow: none !important; text-shadow: none !important; }
}

/* Footer legal → estilocomun.css */