/* ---------- Base ---------- */
body { font-feature-settings: "ss01", "cv11"; text-rendering: optimizeLegibility; }
::selection { background: #7baaf7; color: #fff; }
:focus-visible { outline: 2px solid #4285F4; outline-offset: 3px; border-radius: 6px; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Glass (solo nav y tarjetas puntuales; aceleración 3D para iOS) */
.glass {
    background: rgba(246, 244, 239, 0.82);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* ---------- Header: transparente sobre el hero, sólido al hacer scroll ---------- */
#navbar { background: transparent; isolation: isolate; }
#navbar > div { transition: height .5s cubic-bezier(.22,1,.36,1); }
#navbar::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: rgba(246,244,239,.94);
    backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 10px 30px -20px rgba(17,17,19,.45);
    transform: translate3d(0,-100%,0); opacity: 0;
    transition: transform .55s cubic-bezier(.22,1,.36,1) .4s, opacity .35s ease .4s; /* al subir: el fondo se va después de la línea */
}
#navbar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none;
    background: linear-gradient(90deg, #4285F4, #93bbf9 60%, transparent);
    transform: scaleX(0); transform-origin: left; opacity: .9;
    transition: transform .4s cubic-bezier(.22,1,.36,1); /* al subir: la línea se recoge primero */
}
#navbar.is-solid::before { transform: none; opacity: 1; transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .35s ease; } /* 1º: baja el fondo */
#navbar.is-solid::after { transform: scaleX(1); transition: transform .7s cubic-bezier(.65,0,.35,1) .5s; } /* 2º: la línea azul de izquierda a derecha */
#navbar.is-solid > div { height: 4.25rem; }

#navbar .nav-home, #navbar .nav-logo, #navbar .nav-links a, #navbar .nav-lang a, #navbar .nav-lang span, #navbar .nav-cta, #navbar .nav-burger {
    transition: color .4s ease, background-color .4s ease, box-shadow .4s ease;
}
#navbar.is-solid .nav-home, #navbar.is-solid .nav-logo, #navbar.is-solid .nav-links a, #navbar.is-solid .nav-lang a, #navbar.is-solid .nav-lang span, #navbar.is-solid .nav-cta, #navbar.is-solid .nav-burger { transition-delay: .15s; }
#navbar.is-solid .nav-links a:hover, #navbar.is-solid .nav-cta:hover, #navbar.is-solid .nav-lang a:hover, #navbar.is-solid .nav-home:hover .nav-logo { transition-delay: 0s; }
#navbar:not(.is-solid) .nav-home, #navbar:not(.is-solid) .nav-logo, #navbar:not(.is-solid) .nav-links a, #navbar:not(.is-solid) .nav-lang a, #navbar:not(.is-solid) .nav-lang span, #navbar:not(.is-solid) .nav-cta, #navbar:not(.is-solid) .nav-burger { transition-delay: .45s; }
#navbar:not(.is-solid) .nav-links a:hover, #navbar:not(.is-solid) .nav-cta:hover, #navbar:not(.is-solid) .nav-lang a:hover, #navbar:not(.is-solid) .nav-home:hover .nav-logo { transition-delay: 0s; }
#navbar:not(.is-solid) .nav-home { color: #fff; }
#navbar:not(.is-solid) .nav-logo { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
#navbar:not(.is-solid) .nav-home:hover .nav-logo { background: #4285F4; box-shadow: none; }
#navbar:not(.is-solid) .nav-links a { color: rgba(255,255,255,.78); }
#navbar:not(.is-solid) .nav-links a:hover { color: #fff; }
#navbar:not(.is-solid) .nav-links a.text-brand-600 { color: #93bbf9; }
#navbar:not(.is-solid) .nav-links a.text-brand-600:hover { color: #fff; }
#navbar:not(.is-solid) .nav-lang a:first-child { color: #fff; }
#navbar:not(.is-solid) .nav-lang a:last-child { color: rgba(255,255,255,.55); }
#navbar:not(.is-solid) .nav-lang a:last-child:hover { color: #fff; }
#navbar:not(.is-solid) .nav-lang span { color: rgba(255,255,255,.3); }
#navbar:not(.is-solid) .nav-cta { background: #fff; color: #111113; }
#navbar:not(.is-solid) .nav-cta:hover { background: #4285F4; color: #fff; }
#navbar:not(.is-solid) .nav-burger { color: #fff; }

.glass-dark {
    background: rgba(20, 20, 23, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* Grano sutil (textura estática, se pinta una sola vez) */
.grain { position: relative; isolation: isolate; }
.grain::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    opacity: .07; mix-blend-mode: overlay;
}

/* Etiqueta de sección editorial: 01 — Título */
.eyebrow {
    display: inline-flex; align-items: center; gap: .75rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.eyebrow .num { font-variant-numeric: tabular-nums; opacity: .55; }
.eyebrow .bar { width: 28px; height: 1px; background: currentColor; opacity: .4; }

/* Enlaces con subrayado animado */
.link-u { background: linear-gradient(currentColor, currentColor) no-repeat left 100% / 0% 1.5px; transition: background-size .35s ease, color .2s; padding-bottom: 2px; }
.link-u:hover { background-size: 100% 1.5px; }

/* Inputs */
.field {
    width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
    color: #fff; padding: .9rem 1rem; border-radius: 14px; font-size: .9rem; transition: border-color .2s, background .2s, box-shadow .2s;
}
.field::placeholder { color: #8b8b94; }
.field:focus { outline: none; border-color: #7baaf7; background: rgba(255,255,255,.07); box-shadow: 0 0 0 4px rgba(123,170,247,.15); }

/* Botón principal */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    background: #4285F4; color: #fff; font-weight: 700; border-radius: 14px;
    transition: background .2s, transform .2s;
}
.btn-primary:hover { background: #2f6fe0; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary .arr { transition: transform .25s; }
.btn-primary:hover .arr { transform: translateX(3px); }

/* Tarjetas de proyecto */
.project-card img { transition: transform .9s cubic-bezier(.22,1,.36,1); }
.project-card .reveal { opacity: 1; transition: opacity .35s ease, transform .35s ease; }
@media (min-width: 768px) {
    .project-card .reveal { opacity: 0; transform: translate3d(0, 8px, 0); }
    .project-card:hover .reveal, .project-card:focus-within .reveal { opacity: 1; transform: translate3d(0,0,0); }
    .project-card:hover img { transform: scale(1.04); }
}
.chip {
    font-size: 10.5px; font-weight: 700; color: #fff; padding: .4rem .7rem; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); transition: background .2s, border-color .2s;
}
.chip:hover { background: #4285F4; border-color: #4285F4; }

/* Tarjetas de servicio */
.svc { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.svc:hover { transform: translate3d(0,-3px,0); box-shadow: 0 18px 40px -22px rgba(17,17,19,.35); border-color: #d9d3c6; }

/* Subrayado estilo rotulador (Natural, Suave y Seguro para Multilínea) */
.marker-highlight {
    display: inline;
    background-image: linear-gradient(to right, rgba(123, 170, 247, 0.45) 0%, rgba(123, 170, 247, 0.45) 100%);
    background-size: 0% 35%;
    background-repeat: no-repeat;
    background-position: left 85%;
    transition: background-size 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 4px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.marker-highlight.is-visible { background-size: 100% 35%; }

/* Marquee: texto con contorno alterno, todo en Montserrat Bold mayúscula, separadores con iconos de cocina */
.marquee-font, .marquee-font span { font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; }
.outline-text { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.85); }
.sep-ico { font-size: 14px; color: #fff; opacity: .8; flex: none; }

/* Animaciones sección Libre de Humo (solo transform, sin filtros) */
@keyframes animSun   { 0% { transform: translate3d(-30vw, 15vh, 0); } 100% { transform: translate3d(120vw, -10vh, 0); } }
@keyframes animCloud1 { 0% { transform: translate3d(-150%,0,0); } 100% { transform: translate3d(130vw,0,0); } }
@keyframes animCloud2 { 0% { transform: translate3d(-200%,0,0); } 100% { transform: translate3d(120vw,0,0); } }
@keyframes animCloud3 { 0% { transform: translate3d(-100%,0,0); } 100% { transform: translate3d(140vw,0,0); } }
.anim-sun { animation: animSun 45s linear infinite; will-change: transform; }
.anim-cloud-1 { animation: animCloud1 35s linear infinite; will-change: transform; }
.anim-cloud-2 { animation: animCloud2 50s linear infinite; will-change: transform; }
.anim-cloud-3 { animation: animCloud3 28s linear infinite; will-change: transform; }

/* Render diferido de secciones bajo el pliegue (mejora el tiempo de carga) */
.cv { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* Accesibilidad: respeta "reducir movimiento" */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .marker-highlight { background-size: 100% 35%; }
}
/* Evita que la página se desplace en horizontal en móvil (iOS ignora overflow-x:hidden en body) */
html, body { max-width: 100%; overflow-x: clip; }

/* Casos de éxito (9:16) en rejilla: títulos y servicios alineados en todas las fichas */
.cases-grid .case-title { min-height: 2.5em; display: flex; align-items: flex-end; }
/* Palabras destacadas y "No soy una agencia. Soy Jonatan": mayúsculas en Poppins Black */
.marker-highlight.font-bold, .poppins-up { font-family: 'Poppins', 'Plus Jakarta Sans', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; font-size: .9em; }
.stat-num { font-family: 'Poppins', 'Plus Jakarta Sans', sans-serif; font-weight: 900; letter-spacing: -.01em; }

/* Sol y nubes de "Libre de Humo": se mueven con el scroll (JS) */
.sky-el { will-change: transform; }

/* Contenedor "Libre de Humo": efecto liquid glass (cristal líquido) */
.liquid-glass {
    position: relative; isolation: isolate;
    background: linear-gradient(135deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.34) 48%, rgba(255,255,255,.50) 100%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(255,255,255,.7);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(255,255,255,.35),
        inset 0 0 36px rgba(255,255,255,.22),
        0 30px 80px -40px rgba(30,58,138,.45),
        0 2px 12px rgba(30,58,138,.06);
}
/* Brillo especular curvo en la parte superior */
.liquid-glass::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
    background:
        radial-gradient(120% 55% at 18% 0%, rgba(255,255,255,.55) 0%, transparent 60%),
        radial-gradient(90% 50% at 100% 100%, rgba(255,255,255,.28) 0%, transparent 60%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .liquid-glass { background: rgba(255,255,255,.82); }
}