@import url("https://use.typekit.net/xml4yco.css");

/* =================================================================
   FUNDACIÓN OSAI — PRESENTACIÓN DE MARCA
   Lenguaje: inca-pop editorial. Gradientes de marca como material
   protagonista + tipografía Noka grande y kinética + motivos andinos
   sólidos (greca escalonada, escalonados) como acentos duros.
   Efectos mínimos y fluidos. Sin sombras duras, vidrio ni bordes gruesos.
   ================================================================= */

/* ===== VARIABLES ===== */
:root {
    --osai-principal: #fc1d67;
    --osai-secundario: #0443bf;
    --osai-acento: #b4ee32;
    --osai-apoyo: #ff7bdd;
    --osai-gris: #5b5b5b;
    --osai-blanco: #ffffff;
    --osai-negro: #000000;

    --osai-grad-principal: linear-gradient(135deg, #fc1d67 0%, #0443bf 100%);
    --osai-grad-secundario: linear-gradient(135deg, #fc1d67 0%, #b4ee32 100%);
    --osai-grad-iso: linear-gradient(165deg, #fc1d67 0%, #0443bf 50%, #b4ee32 100%);
    --osai-grad-completo: linear-gradient(115deg, #b4ee32 0%, #0443bf 50%, #fc1d67 100%);

    /* Greca escalonada andina (azulejo 4x4, 2 tonos) por color */
    --greca-azul: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Crect width='4' height='4' fill='%23ffffff'/%3E%3Cg fill='%230443bf'%3E%3Crect x='1' y='0' width='2' height='1'/%3E%3Crect x='2' y='1' width='2' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='3' y='2' width='1' height='1'/%3E%3Crect x='2' y='3' width='2' height='1'/%3E%3C/g%3E%3C/svg%3E");
    --greca-rosa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Crect width='4' height='4' fill='%23ffffff'/%3E%3Cg fill='%23fc1d67'%3E%3Crect x='1' y='0' width='2' height='1'/%3E%3Crect x='2' y='1' width='2' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='3' y='2' width='1' height='1'/%3E%3Crect x='2' y='3' width='2' height='1'/%3E%3C/g%3E%3C/svg%3E");
    --greca-lima: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Crect width='4' height='4' fill='%23ffffff'/%3E%3Cg fill='%23b4ee32'%3E%3Crect x='1' y='0' width='2' height='1'/%3E%3Crect x='2' y='1' width='2' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='3' y='2' width='1' height='1'/%3E%3Crect x='2' y='3' width='2' height='1'/%3E%3C/g%3E%3C/svg%3E");
    /* Greca en gradiente: silueta opaca para usar como máscara sobre un gradiente */
    --greca-mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cg fill='%23000'%3E%3Crect x='1' y='0' width='2' height='1'/%3E%3Crect x='2' y='1' width='2' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='3' y='2' width='1' height='1'/%3E%3Crect x='2' y='3' width='2' height='1'/%3E%3C/g%3E%3C/svg%3E");

    --greca-tam: 34px;
    --trama-tam: 56px;

    /* Muesca escalonada (corte andino) para botones/paneles */
    --muesca: 12px;

    --transicion-ease: cubic-bezier(0.65, 0, 0.2, 1);

    --fuente: "noka", "Outfit", sans-serif;
}

/* ===== RESET / BASE ===== */
/* Escala global: el 100% del navegador equivale a la composición aireada del 75%. */
html { font-size: 75%; }

body, html {
    margin: 0; padding: 0; width: 100%;
    height: 100dvh; height: 100vh;
    overflow: hidden;
    font-family: var(--fuente);
    font-weight: 500;
    background-color: var(--osai-blanco);
    color: var(--osai-negro);
    -webkit-font-smoothing: antialiased;
}
@supports (height: 100dvh) { body, html { height: 100dvh; } }

::-webkit-scrollbar { width: 0; background: transparent; }

#desplazador-principal { height: 100dvh; height: 100vh; width: 100%; overflow-y: hidden; }
@supports (height: 100dvh) { #desplazador-principal { height: 100dvh; } }

.seccion { height: 100dvh; height: 100vh; width: 100%; flex-shrink: 0; position: relative; }
@supports (height: 100dvh) { .seccion { height: 100dvh; } }

/* ===== TIPOGRAFÍA ===== */
.fuente--titulo { font-family: var(--fuente); font-weight: 600; }
.fuente--texto { font-family: var(--fuente); font-weight: 500; }

.titular {
    font-family: var(--fuente);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    line-height: 0.92;
}

/* Antes era relleno de gradiente; ahora sólido fucsia (menos ruido visual) */
.texto-gradiente {
    color: var(--osai-principal);
    -webkit-text-fill-color: var(--osai-principal);
    background: none;
}

.etiqueta {
    font-family: var(--fuente);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* ===== FONDOS PLANOS ===== */
.fondo--crema { background-color: var(--osai-blanco); }
.fondo--principal { background-color: var(--osai-principal); }
.fondo--secundario { background-color: var(--osai-secundario); }
.fondo--acento { background-color: var(--osai-acento); }
.fondo--apoyo { background-color: var(--osai-apoyo); }
.fondo--negro { background-color: var(--osai-negro); }

/* ===== GRADIENTES VIVOS (mesh con profundidad, solo los 3 colores principales) ===== */
.gradiente-iso {
    background: var(--osai-grad-iso);
}
.gradiente-completo {
    background:
        radial-gradient(78% 85% at 12% 16%, rgba(180,238,50,0.92), transparent 55%),
        radial-gradient(80% 85% at 90% 26%, rgba(252,29,103,0.92), transparent 52%),
        radial-gradient(105% 105% at 70% 96%, rgba(4,67,191,0.96), transparent 58%),
        linear-gradient(125deg, #b4ee32 0%, #0443bf 46%, #fc1d67 100%);
    background-size: 200% 200%, 210% 210%, 230% 230%, 260% 260%;
    animation: fluir 19s ease-in-out infinite;
}
.gradiente-principal {
    background:
        radial-gradient(82% 82% at 18% 20%, rgba(252,29,103,0.8), transparent 52%),
        radial-gradient(95% 95% at 88% 84%, rgba(4,67,191,0.95), transparent 56%),
        linear-gradient(130deg, #fc1d67 0%, #0443bf 100%);
    background-size: 200% 200%, 210% 210%, 240% 240%;
    animation: fluir 16s ease-in-out infinite;
}
.gradiente-hero {
    background:
        radial-gradient(72% 82% at 6% 8%, rgba(180,238,50,0.98), transparent 55%),
        radial-gradient(70% 90% at 96% 6%, rgba(4,67,191,0.92), transparent 52%),
        radial-gradient(92% 92% at 58% 106%, rgba(252,29,103,0.98), transparent 60%),
        linear-gradient(115deg, #b4ee32 0%, #fc1d67 55%, #0443bf 100%);
    background-size: 200% 200%, 210% 210%, 230% 230%, 260% 260%;
    animation: fluir 20s ease-in-out infinite;
}

/* ===== FONDO PROCEDIMENTAL DEL HERO (canvas de puntos de color) ===== */
.fondo-blobs {
    /* El canvas se dibuja a baja resolución y se escala: suavidad + bloom baratos */
    filter: blur(22px) saturate(1.16);
    transform: scale(1.18);
}
/* Hover en la diapo de gradientes: bloques sólidos entran y quiebran el
   gradiente en sus colores constitutivos (tamaños jerarquizados). */
.grad-col { position: relative; }
.grad-bloques { position: absolute; inset: 0; display: flex; flex-direction: column; z-index: 5; pointer-events: none; }
.grad-bloque { width: 100%; transform: translateX(-101%); transition: transform 0.55s var(--transicion-ease); }
.grad-col:hover .grad-bloque { transform: translateX(0); }
.grad-col:hover .grad-bloque:nth-child(2) { transition-delay: 0.09s; }
.grad-col:hover .grad-bloque:nth-child(3) { transition-delay: 0.18s; }
/* Hover en GRADIENTES: los OTROS gradientes se cubren de negro sólido para
   destacar (por contraste) el que se descompone en sus colores fundantes. */
.grad-negar { position: absolute; inset: -3px; background: #000; opacity: 0; z-index: 6; pointer-events: none; transition: opacity 0.4s var(--transicion-ease); }
#seccion-gradientes:hover .grad-negar { opacity: 1; }
#seccion-gradientes .grad-col:hover .grad-negar { opacity: 0; }
/* Tile claro (blanco): la etiqueta pasa a oscuro cuando entra la placa blanca */
.tile-clara .lbl { transition: color 0.4s var(--transicion-ease) 0.15s; }
.tile-clara:hover .lbl { color: #202020; }
/* Grano fílmico animado (flicker) */
@keyframes grano-flicker {
    0%   { background-position: 0 0; }
    20%  { background-position: -22px 12px; }
    40%  { background-position: 16px -20px; }
    60%  { background-position: -14px -10px; }
    80%  { background-position: 20px 14px; }
    100% { background-position: 0 0; }
}
.hero-grano, .grano {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: 0.32;
    mix-blend-mode: overlay;
    animation: grano-flicker 0.45s steps(1) infinite;
    pointer-events: none;
}
/* Filtro oscuro: sutil en general, más denso abajo-izquierda para el texto blanco */
.hero-filtro {
    background:
        radial-gradient(120% 110% at 18% 92%, rgba(0,0,0,0.6) 0%, transparent 55%),
        linear-gradient(0deg, rgba(0,0,0,0.4) 0%, transparent 42%),
        linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 30%);
}
@keyframes fluir {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== GRECA ESCALONADA (tramas animadas, ritmo armónico con los gradientes) ===== */
.greca { background-repeat: repeat; background-size: var(--greca-tam) var(--greca-tam); image-rendering: pixelated; }
.greca--azul { background-image: var(--greca-azul); }
.greca--rosa { background-image: var(--greca-rosa); }
.greca--lima { background-image: var(--greca-lima); }

/* Deslizamiento HORIZONTAL de un azulejo por ciclo */
@keyframes greca-fluye {
    from { background-position-x: 0; }
    to { background-position-x: calc(-1 * var(--greca-tam)); }
}
.greca-anim { animation: greca-fluye 9s linear infinite; }

.greca-banda {
    width: 100%; height: var(--greca-tam);
    background-repeat: repeat; background-size: var(--greca-tam) var(--greca-tam);
    image-rendering: pixelated;
    animation: greca-fluye 9s linear infinite;
}

/* ===== TRAMA A PANTALLA COMPLETA (barras horizontales que se deslizan) =====
   Cada barra es una fila de la greca (mask) sobre un fondo (foto duotono o
   gradiente); solo se anima la posición horizontal de la mask -> las barras
   de la trama corren de lado, cada una a su ritmo y sentido. */
.trama { position: absolute; inset: 0; overflow: hidden; }
.trama__barra {
    position: absolute; left: 0; width: 100%;
    background-repeat: no-repeat;
    -webkit-mask: var(--greca-mascara) repeat; mask: var(--greca-mascara) repeat;
    -webkit-mask-size: var(--trama-tam) var(--trama-tam); mask-size: var(--trama-tam) var(--trama-tam);
    image-rendering: pixelated;
    will-change: mask-position;
}
@keyframes desliza-der {
    from { -webkit-mask-position-x: 0; mask-position-x: 0; }
    to { -webkit-mask-position-x: var(--trama-tam); mask-position-x: var(--trama-tam); }
}
@keyframes desliza-izq {
    from { -webkit-mask-position-x: 0; mask-position-x: 0; }
    to { -webkit-mask-position-x: calc(-1 * var(--trama-tam)); mask-position-x: calc(-1 * var(--trama-tam)); }
}

/* Línea / bloque de color de acento (resalta texto o figura) */
.linea-color { display: inline-block; }

/* ===== BARRA DE DESCARGA (una barra horizontal de la trama, se corre a la derecha) ===== */
.barra-descarga {
    position: relative;
    display: flex; align-items: center; gap: 1.2rem;
    width: 100%;
    padding: 0 clamp(1.5rem, 3vw, 3rem);
    height: clamp(64px, 10vh, 104px);
    color: var(--osai-negro);
    background: var(--osai-blanco);
    font-family: var(--fuente); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em;
    overflow: hidden; cursor: pointer;
    clip-path: polygon(0 0, calc(100% - var(--greca-tam)) 0, 100% 50%, calc(100% - var(--greca-tam)) 100%, 0 100%);
    transition: transform 0.45s var(--transicion-ease);
}
.barra-descarga:hover { transform: translateX(4vw); }
.barra-descarga__greca {
    position: absolute; inset: 0; left: auto; width: 40%;
    background-repeat: repeat; background-size: var(--greca-tam) var(--greca-tam);
    image-rendering: pixelated;
    animation: greca-fluye 6s linear infinite;
    -webkit-mask: linear-gradient(90deg, transparent, #000 70%); mask: linear-gradient(90deg, transparent, #000 70%);
    opacity: 0.9;
}
.barra-descarga__flecha { transition: transform 0.45s var(--transicion-ease); }
.barra-descarga:hover .barra-descarga__flecha { transform: translateX(12px); }

/* ===== MUESCA ANDINA (corte escalonado en esquinas) ===== */
.muesca {
    clip-path: polygon(var(--muesca) 0, 100% 0, 100% calc(100% - var(--muesca)), calc(100% - var(--muesca)) 100%, 0 100%, 0 var(--muesca));
}

/* ===== FOTO / ISOTIPO ENMASCARADO ===== */
.iso-foto, .iso-gradiente, .iso-solido {
    -webkit-mask: url('../img/osai_isotipo_mask.png') no-repeat center / contain;
    mask: url('../img/osai_isotipo_mask.png') no-repeat center / contain;
}
.iso-foto {
    position: relative;
    /* Placas sutiles de fucsia (principal) para armonizar los colores de la foto:
       una en blend 'color' (tiñe el matiz) y otra normal, ambas bajas. */
    background-image:
        linear-gradient(rgba(252, 29, 103, 0.10), rgba(252, 29, 103, 0.10)),
        linear-gradient(rgba(252, 29, 103, 0.22), rgba(252, 29, 103, 0.22)),
        url('../img/foto-comunidad.jpg');
    background-blend-mode: normal, color, normal;
    background-size: cover;
    background-position: center 25%;
    /* Sombra interna: la foto parece recortada (cut-out) del fondo */
    box-shadow: inset 0 0 100px 24px rgba(0, 0, 0, 0.72), inset 0 0 40px 6px rgba(0, 0, 0, 0.58);
}
/* Grano dentro del recorte (se integra con el grano del fondo) */
.iso-foto::after {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 190px 190px;
    mix-blend-mode: overlay;
    opacity: 0.22;
    pointer-events: none;
}
.iso-gradiente { background: var(--osai-grad-iso); }
.iso-solido { background: var(--osai-negro); }

/* ===== PANEL LIMPIO ===== */
.panel { background: #ffffff; position: relative; }
.panel--linea { border: 1.5px solid rgba(0,0,0,0.14); }

/* ===== BOTÓN (muesca andina, sin sombra) ===== */
.boton {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.85rem 1.6rem;
    font-family: var(--fuente); font-weight: 700;
    font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
    white-space: nowrap; cursor: pointer; border: none;
    color: #fff;
    background: var(--osai-grad-principal);
    background-size: 180% 180%;
    transition: background-position 0.5s var(--transicion-ease), transform 0.25s var(--transicion-ease), filter 0.25s var(--transicion-ease);
}
.boton:hover { background-position: 100% 100%; transform: translateY(-2px); }
.boton--crema { background: var(--osai-blanco); color: var(--osai-negro); }
.boton--crema:hover { filter: brightness(0.97); }
.boton--negro { background: var(--osai-negro); color: var(--osai-blanco); }
.boton--lima { background: var(--osai-acento); color: var(--osai-negro); }

/* ===== PALETA DE COLORES ===== */
.paleta__columna { transition: flex 0.5s var(--transicion-ease); }
.paleta__columna--principal { flex: 2.2; }
.paleta__columna--principal:hover { flex: 2.9; }
.paleta__columna--secundaria { flex: 1; }
.paleta__columna--secundaria:hover { flex: 1.45; }

/* ===== TIPOGRAFÍA INTERACTIVA ===== */
.tipografia__transicion { transition: opacity 0.22s var(--transicion-ease), transform 0.22s var(--transicion-ease); }
.tipografia__transicion--salida { opacity: 0 !important; transform: translateY(-12px) !important; }

/* ===== MUESTRAS DE GRADIENTE ===== */
.muestra-gradiente {
    clip-path: polygon(var(--muesca) 0, 100% 0, 100% calc(100% - var(--muesca)), calc(100% - var(--muesca)) 100%, 0 100%, 0 var(--muesca));
}

/* ===== CARRUSEL (ventanas altas con parallax interno, tipo Leeroy) ===== */
.carrusel__pista--transicion { transition: transform 0.9s var(--transicion-ease); }
#pista-mockups { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.carrusel-item {
    flex-shrink: 0; height: 100%;
    display: flex; flex-direction: column; gap: 0.85rem;
}
.ventana {
    position: relative; overflow: hidden;
    height: 100%;
    width: clamp(210px, 23vw, 340px);
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 26px 50px -28px rgba(0, 0, 0, 0.5);
}
.ventana-interno {
    position: absolute; inset: 0;
    transition: transform 0.9s var(--transicion-ease);
    will-change: transform;
}
.mockup__fila { height: 5px; background: rgba(0,0,0,0.16); }

/* ===== PARALLAX CONTINUO (los elementos permanecen y entran/salen a distinta velocidad) ===== */
.parallax {
    transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px));
    will-change: transform;
}
/* Las clases .revelar quedan neutralizadas (sin fade a blanco): los elementos
   siempre visibles; el movimiento lo da el parallax durante el scroll. */
.revelar, .revelar--izq, .revelar--der, .revelar--arriba, .revelar--abajo { opacity: 1; transform: none; }

.elemento-celda { border: 1px solid rgba(0, 0, 0, 0.09); background: rgba(255,255,255,0.35); transition: background 0.3s var(--transicion-ease); }
.elemento-celda:hover { background: #ffffff; }

/* ===== INDICADOR DE SECCIÓN ===== */
#indicador-seccion { mix-blend-mode: difference; }
.punto-nav, .sub-punto {
    flex-shrink: 0; border-radius: 1px; cursor: pointer;
    background: rgba(255,255,255,0.55);
    transition: background 0.3s var(--transicion-ease), transform 0.3s var(--transicion-ease);
}
.punto-nav { width: 22px; height: 4px; }
.punto-nav.activa { background: #fff; transform: scaleX(1.0); }
.sub-punto { width: 12px; height: 3px; }
.sub-punto.activa { background: #fff; }

@media screen and (max-width: 768px) {
    :root { --greca-tam: 30px; --muesca: 10px; }
    #indicador-seccion { transform: scale(0.9); transform-origin: bottom right; }
    .paleta__columna--principal { flex: 1; }
}

/* ===== ACCESIBILIDAD ===== */
:focus-visible { outline: 3px solid var(--osai-secundario); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .revelar { opacity: 1 !important; transform: none !important; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }