/* =========================================================================
   ANDEZ THEME — skin.css
   Fidelidad al diseño real del sitio (pantallazos): secciones claras
   alternadas, hero centrado con recuadro "selección", carruseles
   horizontales, Let's collab gigante, footer claro, nav hamburguesa.
   Se carga después de main.css y sobreescribe lo necesario.
   ========================================================================= */

:root {
	--light-bg: #FFFFFF;
	--light-bg-2: #F2F4F3;
	--light-ink: #0A0D0B;
	--light-muted: #5B635E;
	--light-line: #E3E7E4;
}

/* --- Header: hamburguesa siempre + idioma, transparente sobre el hero --- */
.site-header { background: transparent; border-bottom: 0; backdrop-filter: none; position: absolute; width: 100%; }
.menu--primary { display: none; }
.nav-toggle { display: flex; order: 3; }
.site-nav__cta { display: none; }
.site-nav { gap: var(--sp-2); }
.lang-switch { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--muted); }
.lang-switch strong { color: var(--ink); font-weight: 600; }
.site-nav.is-open .menu--primary {
	display: flex; position: fixed; inset: 0; z-index: 90;
	flex-direction: column; justify-content: center; align-items: flex-start;
	background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(18px);
	padding: var(--sp-6) var(--gutter); gap: 0; transform: none; max-height: none;
}
.site-nav.is-open .menu--primary li { width: 100%; border-bottom: 1px solid var(--line); }
.site-nav.is-open .menu--primary a { display: block; padding: var(--sp-2) 0; font-size: var(--fs-2xl); font-weight: 600; color: var(--ink); }
.site-nav.is-open .nav-toggle { position: relative; z-index: 95; }
.site-nav.is-open .nav-toggle__bar:first-child { transform: translateY(3.5px) rotate(45deg); }
.site-nav.is-open .nav-toggle__bar:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* --- Recuadro estilo "selección de diseño" en titulares --- */
.frame-box {
	position: relative; display: inline-block; padding: 0.02em 0.35em;
	border: 1px solid rgba(20, 241, 149, 0.5);
}
.frame-box::before, .frame-box::after,
.frame-box .tick::before, .frame-box .tick::after {
	content: ""; position: absolute; width: 7px; height: 7px;
	background: var(--accent);
}
.frame-box::before { top: -4px; left: -4px; }
.frame-box::after { bottom: -4px; right: -4px; }
.frame-box .tick::before { top: -4px; right: -4px; }
.frame-box .tick::after { bottom: -4px; left: -4px; }
.frame-box .tick { position: absolute; inset: 0; }

/* --- Hero centrado --- */
.hero { padding-top: clamp(7rem, 16vw, 11rem); text-align: center; }
.hero::before { background: radial-gradient(70% 60% at 50% 0%, rgba(20, 241, 149, 0.16), transparent 70%); }
.hero__inner { max-width: 64rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: var(--sp-3); }
.hero__badge {
	display: inline-flex; align-items: center; gap: 0.5em;
	font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em;
	color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-pill);
	padding: 0.45rem 0.95rem; background: rgba(17, 21, 18, 0.6);
}
.hero__badge--dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); }
.hero__title { font-size: clamp(2rem, 5.4vw, 3.6rem); justify-items: center; gap: 0.3em; }
.hero__title-accent { color: var(--ink); }
.hero__lead { font-size: var(--fs-base); max-width: 56ch; margin-inline: auto; }
.hero__actions { justify-content: center; }
.hero__link { color: var(--ink); font-weight: 500; padding: 0.9rem 1rem; }
.hero__link:hover { color: var(--accent); }

/* --- Carrusel horizontal genérico --- */
.hscroll {
	display: flex; gap: var(--sp-2); overflow-x: auto;
	scroll-snap-type: x mandatory; padding-bottom: var(--sp-2);
	scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.hscroll > * { scroll-snap-align: start; flex-shrink: 0; }
.hscroll--bleed { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }

/* --- Proyectos: carrusel, título debajo de la imagen --- */
.work--carousel { padding-top: var(--sp-4); }
.work--carousel .project-card { background: transparent; border: 0; border-radius: 0; width: clamp(280px, 44vw, 600px); }
.work--carousel .project-card__media { aspect-ratio: 16 / 11; border-radius: 0; }
.work--carousel .project-card__services-top {
	position: absolute; top: var(--sp-2); left: var(--sp-2); right: var(--sp-2); z-index: 2;
	font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.5;
	color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.work--carousel .project-card__body { padding: var(--sp-2) 0 0; }
.work--carousel .project-card__title { font-size: var(--fs-lg); font-weight: 600; }
.work--carousel .project-card__tagline { font-size: 0.8rem; }

/* --- Audiencia: intro fija izquierda + tarjetas apiladas derecha --- */
.audience { background: transparent; border-block: 0; }
.audience__layout { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 900px) {
	.audience__layout { grid-template-columns: 1fr 1.05fr; align-items: start; }
	.audience__intro { position: sticky; top: 110px; }
}
.audience__cards { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
.audience-card { background: #0D110E; border: 1px solid var(--line); border-radius: 10px; padding: var(--sp-3) var(--sp-3) var(--sp-2); min-height: 210px; display: flex; flex-direction: column; }
.audience-card__num { font-size: 0.7rem; }
.audience-card__pain { margin-top: auto; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.78rem; padding-top: var(--sp-2); font-style: normal; }
.eyebrow-pill {
	display: inline-flex; align-items: center; gap: 0.4em;
	font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
	color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-pill);
	padding: 0.4rem 0.9rem; margin-bottom: var(--sp-3); background: rgba(17, 21, 18, 0.6);
}
.eyebrow-pill::before { content: "+"; color: var(--accent); font-weight: 700; }

/* --- Secciones claras --- */
.section--light { background: var(--light-bg); color: var(--light-ink); }
.section--light .section__title, .section--light h2, .section--light h3, .section--light h4 { color: var(--light-ink); }
.section--light .section__lead, .section--light p { color: var(--light-muted); }
.section--light a { color: var(--light-ink); }
.section--light a:hover { color: var(--light-muted); }
.section--light .link-arrow { color: var(--light-ink); font-weight: 500; }

/* --- Servicios claros: carrusel tarjeta-texto + tarjeta-imagen --- */
.services--light .services__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.services--light .section__title { max-width: 26ch; }
.svc-card {
	width: clamp(260px, 30vw, 420px); background: var(--light-bg-2);
	border-radius: 14px; padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2);
	color: var(--light-ink);
}
.svc-card__title { font-size: var(--fs-xl); font-weight: 700; color: var(--light-ink); }
.svc-card__promise { font-size: 0.85rem; color: var(--light-muted); }
.svc-card__cta { font-weight: 600; font-size: 0.9rem; color: var(--light-ink); }
.svc-card__cta:hover { color: var(--light-muted); }
.svc-card__list { margin-top: auto; display: grid; }
.svc-card__list li {
	font-size: 0.8rem; color: var(--light-ink); padding: 0.55rem 0 0.55rem 1.1rem;
	border-top: 1px solid var(--light-line); position: relative;
}
.svc-card__list li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.svc-media { width: clamp(260px, 30vw, 420px); border-radius: 14px; overflow: hidden; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.2; }

/* --- Testimonios claros --- */
.testimonials--light .testimonials__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.testimonials--light .testimonials__label { font-size: 0.85rem; color: var(--light-muted); }
.testimonials--light .testimonials__label .rating { color: var(--light-ink); }
.testimonials--light .testimonials__title { font-size: var(--fs-lg); font-weight: 600; }
.testimonials--light .testimonial { background: transparent; border: 0; padding: 0; gap: 0; }
.testimonials--light .testimonial__quotemark { width: 34px; height: auto; margin-bottom: var(--sp-2); }
.testimonials--light .testimonial__author { flex-direction: row; gap: 0.4em; margin: 0 0 var(--sp-2); font-size: 0.8rem; color: var(--light-muted); }
.testimonials--light .testimonial__author::before { content: "\2014"; }
.testimonials--light .testimonial__name { font-weight: 600; color: var(--light-ink); }
.testimonials--light .testimonial__role { font-size: inherit; }
.testimonials--light .testimonial__quote { font-size: 0.86rem; line-height: 1.65; color: var(--light-muted); }
.testimonials--light .testimonial__quote::before { content: none; }

/* --- Collage de fotos --- */
.collage { display: flex; gap: var(--sp-2); justify-content: center; align-items: center; flex-wrap: wrap; margin-top: var(--sp-5); }
.collage img { border-radius: 6px; object-fit: cover; height: clamp(110px, 16vw, 220px); width: auto; }
.collage img:nth-child(odd) { height: clamp(90px, 13vw, 180px); }

/* --- Let's collab gigante --- */
.collab { background: var(--light-bg); padding-block: clamp(4rem, 12vw, 9rem); text-align: center; }
.collab__link {
	font-size: clamp(3rem, 11vw, 8.5rem); font-weight: 600; letter-spacing: -0.04em;
	color: var(--light-ink); display: inline-flex; align-items: center; gap: 0.25em; line-height: 1;
	transition: opacity 0.25s var(--ease);
}
.collab__link:hover { opacity: 0.55; color: var(--light-ink); }
.collab__arrow { font-weight: 400; }

/* --- Footer claro --- */
.site-footer { background: var(--light-bg); border-top: 1px solid var(--light-line); color: var(--light-ink); margin-top: 0; }
.site-footer__title { color: var(--light-ink); font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 700; }
.site-footer__col a { color: var(--light-muted); font-size: 0.9rem; }
.site-footer__col a:hover { color: var(--light-ink); }
.site-footer__tagline { color: var(--light-muted); }
.site-footer__brand .site-brand__name, .site-footer .site-brand__link { color: var(--light-ink); }
.site-footer .btn--outline { border-color: var(--light-line); color: var(--light-ink); }
.site-footer .btn--outline:hover { border-color: var(--light-ink); color: var(--light-ink); }
.site-footer__newsletter p { color: var(--light-ink); font-weight: 600; font-size: 0.95rem; }
.newsletter-form input[type="email"] {
	background: transparent; border: 0; border-bottom: 1px solid var(--light-line);
	border-radius: 0; color: var(--light-ink); padding: 0.7rem 0.2rem; width: 100%;
}
.newsletter-form input[type="email"]::placeholder { color: var(--light-muted); }
.newsletter-form__row { display: block; }
.newsletter-form__row .btn {
	width: 100%; margin-top: var(--sp-2); background: var(--light-ink); color: #fff;
	border-radius: 6px; font-size: 0.9rem;
}
.newsletter-form__row .btn:hover { background: #222226; color: #fff; box-shadow: none; }
.newsletter-form__legal { color: var(--light-muted); }
.newsletter-form__legal a { color: var(--light-muted); text-decoration: underline; }
.site-footer__social a { color: var(--light-ink); font-size: 0.85rem; }
.site-footer__bottom { border-top: 1px solid var(--light-line); }
.site-footer__contact a, .site-footer__legal, .site-footer__legal a { color: var(--light-muted); font-size: 0.72rem; letter-spacing: 0.02em; }
.site-footer__legal { text-transform: uppercase; }

/* --- Página interior: compensar header absoluto --- */
.page-header, .project-hero, .service-hero, .contact-page, .about-hero { padding-top: clamp(6rem, 12vw, 8.5rem); }

/* --- Nosotros (fidelidad pantallazo) --- */
.about-hero { text-align: center; position: relative; padding-bottom: clamp(3rem, 8vw, 6rem); overflow: hidden; }
.about-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(60% 55% at 50% 0%, rgba(20, 241, 149, 0.12), transparent 70%),
		linear-gradient(180deg, #101411, var(--bg));
}
.about-hero__crumb { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); margin-bottom: var(--sp-3); }
.about-hero__crumb .dot { color: var(--accent); }
.about-hero__title { font-size: clamp(2rem, 5vw, 3.4rem); display: grid; gap: 0.3em; justify-items: center; }
.about-hero__lead { color: var(--muted); max-width: 60ch; margin: var(--sp-3) auto 0; font-size: var(--fs-base); }

.about-story { background: #050706; }
.about-story__grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .about-story__grid { grid-template-columns: 1fr 1.1fr; } }
.about-story__media img { border-radius: 8px; filter: grayscale(1) contrast(1.05); }
.about-story h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.about-story p { color: var(--muted); font-size: 0.92rem; }
.about-story p + p { margin-top: var(--sp-2); }

.team--light { background: var(--light-bg); }
.team--light .team__grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 860px) { .team--light .team__grid { grid-template-columns: 1fr 1fr; } .team--light .team-member:nth-child(2) { margin-top: var(--sp-6); } }
.team-member__media img { border-radius: 8px; filter: grayscale(1); width: 100%; object-fit: cover; aspect-ratio: 4 / 3.4; }
.team-member__name { font-size: var(--fs-lg); font-weight: 700; margin-top: var(--sp-3); color: var(--light-ink); }
.team-member__role { font-style: italic; color: var(--light-muted); font-size: 0.9rem; margin-bottom: var(--sp-2); }
.team-member__bio { color: var(--light-muted); font-size: 0.85rem; }
.team-member__bio + .team-member__bio { margin-top: var(--sp-2); }

.principles--dark { background: #050706; }
.principles--dark .section__title { display: flex; flex-wrap: wrap; gap: 0.35em; align-items: center; }
.principles__grid2 { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; align-items: start; margin-top: var(--sp-4); }
@media (min-width: 900px) { .principles__grid2 { grid-template-columns: 1.3fr 1fr; } }
.principles__list { display: grid; gap: var(--sp-3); }
.principle-row { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--sp-2); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.principle-row__num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.principle-row__title { font-size: var(--fs-base); font-weight: 700; margin-bottom: 0.4rem; }
.principle-row__desc { color: var(--muted); font-size: 0.85rem; }
.principles__media img { border-radius: 8px; }

/* Ajustes responsive */
@media (max-width: 640px) {
	.collage img { height: 90px; }
	.collage img:nth-child(odd) { height: 74px; }
}

/* =========================================================================
   INTERNA DE PROYECTO (fidelidad pantallazo)
   Hero full-bleed con marquee, ficha clara, galeria full-width,
   Solucion/Resultados en oscuro, relacionados en carrusel, footer oscuro.
   ========================================================================= */

/* --- Hero --- */
.pj-hero { position: relative; min-height: 88vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 0; }
.pj-hero__bg { position: absolute; inset: 0; z-index: -2; }
.pj-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.pj-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,7,6,0.55), rgba(5,7,6,0.25) 45%, rgba(5,7,6,0.65)); }
.pj-hero__marquee { overflow: hidden; white-space: nowrap; width: 100%; }
.pj-hero__marquee-track { display: inline-block; animation: pj-marquee 28s linear infinite; }
.pj-hero__marquee-track span {
	font-size: clamp(3rem, 9vw, 7.5rem); font-weight: 700; letter-spacing: -0.02em;
	color: #fff; text-transform: uppercase; padding-right: 0.35em;
}
@keyframes pj-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pj-hero__marquee-track { animation: none; } }
.pj-hero__tagline { max-width: 34ch; color: #fff; font-size: var(--fs-xl); font-weight: 600; line-height: 1.25; margin-top: var(--sp-3); }
.pj-hero__bottom {
	position: absolute; left: 0; right: 0; bottom: var(--sp-3); display: flex;
	justify-content: space-between; align-items: center;
	font-family: var(--font-mono); font-size: 0.75rem; color: rgba(255,255,255,0.85);
}
.pj-hero__bottom a { color: #fff; font-weight: 600; }
.pj-hero__bottom a:hover { color: var(--accent); }

/* --- Ficha clara --- */
.pj-ficha { background: var(--light-bg); color: var(--light-ink); }
.pj-ficha__grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 860px) { .pj-ficha__grid { grid-template-columns: 180px 1fr; } }
.pj-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--light-muted); }
.pj-label small { display: block; }
.pj-ficha__title { font-size: var(--fs-2xl); font-weight: 700; margin-bottom: var(--sp-2); color: var(--light-ink); }
.pj-ficha__intro { color: var(--light-muted); font-size: 0.88rem; max-width: 68ch; }
.pj-detalles { margin-top: var(--sp-4); }
.pj-detalles__label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--light-muted); margin-bottom: var(--sp-2); }
.pj-detalles__row {
	display: grid; grid-template-columns: 1fr; gap: 0.4rem;
	padding: var(--sp-2) 0; border-top: 1px solid var(--light-line);
}
@media (min-width: 640px) { .pj-detalles__row { grid-template-columns: 200px 1fr; } .pj-detalles__row dd { text-align: right; } }
.pj-detalles__row dt { font-size: 0.8rem; color: var(--light-muted); }
.pj-detalles__row dd { margin: 0; font-size: 0.8rem; color: var(--light-ink); }

/* --- Bloques Contexto/Desafio en claro --- */
.pj-blocks { background: var(--light-bg); color: var(--light-ink); }
.pj-blocks__grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 860px) { .pj-blocks__grid { grid-template-columns: 180px 1fr; } }
.pj-block { border-top: 1px solid var(--light-line); padding-top: var(--sp-2); margin-bottom: var(--sp-4); max-width: 62ch; }
.pj-block h2 { font-size: 0.85rem; font-weight: 700; color: var(--light-ink); margin-bottom: var(--sp-2); }
.pj-block p { font-size: 0.85rem; color: var(--light-muted); line-height: 1.7; white-space: pre-line; }

/* --- Galeria full-bleed --- */
.pj-gallery { background: var(--light-bg); padding-block: 0 var(--sp-4); }
.pj-gallery figure { margin: 0; }
.pj-gallery__main img { width: 100%; height: auto; }
.pj-gallery__grid { display: grid; gap: 4px; grid-template-columns: 1fr; margin-top: 4px; }
@media (min-width: 700px) { .pj-gallery__grid { grid-template-columns: repeat(2, 1fr); } .pj-gallery__grid--3 { grid-template-columns: repeat(3, 1fr); } }
.pj-gallery__grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* --- Solucion / Resultados en oscuro --- */
.pj-dark { background: var(--bg); }
.pj-dark__grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .pj-dark__grid { grid-template-columns: 1fr 1fr; } }
.pj-dark__media img { width: 100%; border-radius: 4px; }
.pj-dark .pj-block { border-top: 1px solid var(--line); max-width: 56ch; }
.pj-dark .pj-block h2 { color: var(--ink); }
.pj-dark .pj-block p { color: var(--muted); }
.pj-dark__cta { display: inline-flex; align-items: center; gap: 0.4em; color: var(--ink); font-weight: 600; margin-top: var(--sp-2); }
.pj-dark__cta:hover { color: var(--accent); }

/* --- Relacionados --- */
.pj-related { background: var(--bg); }
.pj-related h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }

/* --- Variantes oscuras de collab y footer --- */
.collab--dark { background: var(--bg); }
.collab--dark .collab__link { color: var(--ink); }
.collab--dark .collab__link:hover { color: var(--ink); opacity: 0.6; }

.site-footer--dark { background: var(--bg); border-top: 1px solid var(--line); }
.site-footer--dark .site-footer__title { color: var(--ink); }
.site-footer--dark .site-footer__col a { color: var(--muted); }
.site-footer--dark .site-footer__col a:hover { color: var(--ink); }
.site-footer--dark .site-footer__newsletter p { color: var(--ink); }
.site-footer--dark .newsletter-form input[type="email"] { border-bottom-color: var(--line); color: var(--ink); }
.site-footer--dark .newsletter-form input[type="email"]::placeholder { color: var(--muted); }
.site-footer--dark .newsletter-form__row .btn { background: var(--accent); color: var(--accent-ink); }
.site-footer--dark .newsletter-form__row .btn:hover { background: #3ff7ac; color: var(--accent-ink); }
.site-footer--dark .newsletter-form__legal, .site-footer--dark .newsletter-form__legal a { color: var(--muted); }
.site-footer--dark .site-footer__social a { color: var(--ink); }
.site-footer--dark .site-footer__bottom { border-top-color: var(--line); }
.site-footer--dark .site-footer__contact a, .site-footer--dark .site-footer__legal, .site-footer--dark .site-footer__legal a { color: var(--muted); }

/* =========================================================================
   SISTEMA DE INTERACCION (motion.js)
   Loader de carga, cursor personalizado, footer reveal, header inteligente
   y reveals tipograficos. Todo respeta prefers-reduced-motion.
   ========================================================================= */

/* --- Loader / cortina de carga --- */
.pl-loader {
	position: fixed; inset: 0; z-index: 999;
	background: var(--bg);
	display: flex; align-items: center; justify-content: center;
	transition: transform 0.9s cubic-bezier(0.77, 0, 0.18, 1);
}
.pl-loader__brand {
	font-size: clamp(2rem, 6vw, 4rem); font-weight: 700; letter-spacing: -0.04em;
	color: var(--ink); opacity: 0; animation: pl-fade 0.7s ease 0.15s forwards;
}
.pl-loader__brand .dot { color: var(--accent); }
.pl-loader.is-done { transform: translateY(-100%); }
.pl-loader.is-done .pl-loader__brand { animation: pl-out 0.4s ease forwards; }
@keyframes pl-fade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pl-out { to { opacity: 0; transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .pl-loader { display: none; } }

/* Entrada del hero tras el loader */
.has-motion .hero__badges, .has-motion .hero__title, .has-motion .hero__lead, .has-motion .hero__actions {
	opacity: 0; transform: translateY(26px);
	transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
body.is-loaded .hero__badges { opacity: 1; transform: none; transition-delay: 0.05s; }
body.is-loaded .hero__title { opacity: 1; transform: none; transition-delay: 0.15s; }
body.is-loaded .hero__lead { opacity: 1; transform: none; transition-delay: 0.28s; }
body.is-loaded .hero__actions { opacity: 1; transform: none; transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
	.has-motion .hero__badges, .has-motion .hero__title, .has-motion .hero__lead, .has-motion .hero__actions { opacity: 1; transform: none; }
}

/* --- Cursor personalizado --- */
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
.cursor-dot, .cursor-ring {
	position: fixed; top: 0; left: 0; z-index: 1000; pointer-events: none;
	border-radius: 50%; opacity: 0; will-change: transform;
}
.cursor-dot {
	width: 8px; height: 8px; background: var(--accent);
	transition: opacity 0.25s ease;
}
.cursor-ring {
	width: 36px; height: 36px; border: 1.5px solid rgba(20, 241, 149, 0.65);
	transition: opacity 0.25s ease, width 0.3s var(--ease), height 0.3s var(--ease), border-color 0.3s ease;
	mix-blend-mode: difference;
}
.cursor-dot.is-visible, .cursor-ring.is-visible { opacity: 1; }
.cursor-ring.is-hover { width: 62px; height: 62px; border-color: var(--accent); margin: -13px 0 0 -13px; }
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* --- Footer reveal: el contenido se levanta y descubre el footer --- */
body.has-footer-reveal .site-main {
	position: relative; z-index: 2;
	margin-bottom: var(--footer-h, 0px);
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35);
}
body.has-footer-reveal .site-footer {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 1;
}
/* Las secciones del main deben tener fondo propio para tapar el footer */
body.has-footer-reveal .site-main > * { background-color: var(--bg); }
body.has-footer-reveal .site-main > .section--light,
body.has-footer-reveal .site-main > .collab:not(.collab--dark),
body.has-footer-reveal .site-main > .pj-ficha,
body.has-footer-reveal .site-main > .pj-blocks,
body.has-footer-reveal .site-main > .pj-gallery { background-color: var(--light-bg); }

/* --- Header fijo que se oculta al bajar --- */
.site-header {
	position: fixed; top: 0; left: 0; right: 0;
	transition: transform 0.45s var(--ease), background 0.3s ease;
}
.site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); }
.site-header.is-hidden { transform: translateY(-100%); }

/* --- Reveal tipografico de titulos --- */
.has-motion .t-reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }
.has-motion .t-reveal.is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .has-motion .t-reveal { opacity: 1; transform: none; } }

/* --- Footer: diagramacion editorial con marca gigante --- */
.site-footer { overflow: hidden; }
.site-footer__mark {
	display: block; text-align: center; line-height: 0.85;
	font-size: clamp(5rem, 21vw, 19rem); font-weight: 700; letter-spacing: -0.05em;
	color: var(--light-ink); user-select: none; pointer-events: none;
	margin-top: var(--sp-4); margin-bottom: -0.12em;
	opacity: 0.96;
}
.site-footer__mark .dot { color: var(--accent); }
.site-footer--dark .site-footer__mark { color: var(--ink); }
.site-footer__cta-line {
	font-size: clamp(1.4rem, 3.2vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em;
	color: var(--light-ink); margin-bottom: var(--sp-4); max-width: 22ch;
}
.site-footer--dark .site-footer__cta-line { color: var(--ink); }
.site-footer__cta-line a { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.site-footer__cta-line a:hover { color: var(--accent); }

/* --- Fixes de robustez del sistema de interaccion --- */
/* El smooth scroll JS necesita scroll instantaneo nativo */
html.has-motion { scroll-behavior: auto !important; }
/* La cortina de carga jamas debe bloquear clics una vez terminada */
.pl-loader.is-done, body.is-loaded .pl-loader { pointer-events: none; }

/* =========================================================================
   HOME V3 — ANDEZ Digital Growth Studio
   Editorial oscuro premium: labels tecnicos, coordenadas, lineas finas,
   cards con intencion, microinteracciones.
   ========================================================================= */

/* --- Hero con imagen de fondo --- */
.hero--home { position: relative; overflow: hidden; }
.hero--home .hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero--home .hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero--home::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(70% 55% at 50% 0%, rgba(20, 241, 149, 0.10), transparent 65%),
		linear-gradient(180deg, rgba(10, 13, 11, 0.72), rgba(10, 13, 11, 0.45) 55%, var(--bg) 96%);
}

/* --- Badge unificado: studio + coordenadas --- */
.hero__badge--studio { gap: 0.9em; }
.hero__badge--studio .sep { width: 1px; height: 12px; background: var(--line); display: inline-block; }
.hero__badge--studio .coords { color: var(--accent); letter-spacing: 0.06em; }
.hero__badge--studio .peak { color: var(--accent); font-size: 0.85em; }

/* --- Frame-box v2: cristal con blur y esquinas "+" --- */
.frame-box {
	border: 1px solid rgba(20, 241, 149, 0.35);
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	transform: rotate(-1.6deg);
	padding: 0.06em 0.45em;
}
.frame-box::before, .frame-box::after,
.frame-box .tick::before, .frame-box .tick::after {
	content: "+"; width: auto; height: auto; background: none;
	color: var(--accent); font-weight: 400; line-height: 1;
	font-size: clamp(0.9rem, 1.6vw, 1.3rem); font-family: var(--font-mono);
}
.frame-box::before { top: -0.55em; left: -0.4em; }
.frame-box::after { bottom: -0.55em; right: -0.4em; }
.frame-box .tick::before { top: -0.55em; right: -0.4em; }
.frame-box .tick::after { bottom: -0.55em; left: -0.4em; }

/* --- Selector visual del hero --- */
.hero__selector { margin-top: var(--sp-4); display: grid; gap: 0.8rem; justify-items: center; }
.hero__selector-label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hero__selector-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.sel-chip {
	display: inline-flex; align-items: center; gap: 0.45em;
	padding: 0.55rem 1.05rem; border: 1px solid var(--line); border-radius: var(--radius-pill);
	background: rgba(17, 21, 18, 0.55); backdrop-filter: blur(6px);
	color: var(--ink); font-size: 0.85rem; font-weight: 500;
	transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), background 0.25s var(--ease);
}
.sel-chip::before { content: "+"; color: var(--accent); font-family: var(--font-mono); font-weight: 400; }
.sel-chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); background: rgba(17, 21, 18, 0.8); }

/* --- Labels tecnicos de seccion --- */
.sec-label {
	display: flex; align-items: center; gap: 1rem;
	font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-4);
}
.sec-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sec-label .num { color: var(--accent); }
.section--light .sec-label { color: var(--light-muted); }
.section--light .sec-label::after { background: var(--light-line); }

/* --- Carrusel: flechas modernas + drag --- */
.carousel-wrap { position: relative; }
.carousel-arrow {
	position: absolute; top: 38%; z-index: 10; transform: translateY(-50%);
	width: 54px; height: 54px; border-radius: 50%;
	background: rgba(10, 13, 11, 0.75); backdrop-filter: blur(8px);
	border: 1px solid var(--line); color: var(--ink);
	display: grid; place-items: center; font-size: 1.15rem;
	opacity: 0; pointer-events: none;
	transition: opacity 0.3s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.carousel-wrap:hover .carousel-arrow, .carousel-arrow:focus-visible { opacity: 1; pointer-events: auto; }
.carousel-arrow:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-50%) scale(1.07); }
.carousel-arrow--prev { left: var(--sp-2); }
.carousel-arrow--next { right: var(--sp-2); }
.carousel-arrow[disabled] { opacity: 0 !important; pointer-events: none; }
@media (pointer: coarse) { .carousel-arrow { display: none; } }
.hscroll.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.hscroll.is-dragging * { pointer-events: none; }

/* --- Manifiesto editorial --- */
.manifesto { background: var(--bg); }
.manifesto__text {
	font-size: clamp(1.5rem, 3.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.02em;
	line-height: 1.35; max-width: 30ch; color: var(--muted);
}
.manifesto__text strong, .manifesto__text em { color: var(--ink); font-style: normal; font-weight: 600; }
.manifesto__text .accent { color: var(--accent); }
.manifesto__text + .manifesto__text { margin-top: var(--sp-4); }

/* --- Servicios: grid de cards claras --- */
.systems { background: var(--light-bg); }
.systems__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.systems__title { font-size: var(--fs-3xl); max-width: 18ch; color: var(--light-ink); }
.systems__grid { display: grid; gap: 1px; background: var(--light-line); border: 1px solid var(--light-line); }
@media (min-width: 640px) { .systems__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .systems__grid { grid-template-columns: repeat(3, 1fr); } }
.sys-card {
	background: var(--light-bg); padding: var(--sp-4) var(--sp-3);
	display: flex; flex-direction: column; gap: var(--sp-2); min-height: 240px;
	position: relative; transition: background 0.3s var(--ease);
}
.sys-card:hover { background: var(--light-bg-2); }
.sys-card__meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.7rem; color: var(--light-muted); letter-spacing: 0.06em; }
.sys-card__name { font-size: var(--fs-xl); font-weight: 700; color: var(--light-ink); }
.sys-card__desc { font-size: 0.9rem; color: var(--light-muted); }
.sys-card__go {
	margin-top: auto; font-weight: 600; font-size: 0.9rem; color: var(--light-ink);
	display: inline-flex; gap: 0.4em; align-items: center;
}
.sys-card__go span { transition: transform 0.25s var(--ease); }
.sys-card:hover .sys-card__go span { transform: translateX(5px); }
.systems__cta { margin-top: var(--sp-4); text-align: center; }
.btn--ink { background: var(--light-ink); color: #fff; border-radius: var(--radius-pill); }
.btn--ink:hover { background: #202523; color: #fff; }

/* --- Metodo --- */
.method { background: var(--bg); border-top: 1px solid var(--line); }
.method__title { font-size: var(--fs-3xl); max-width: 22ch; }
.method__grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: var(--sp-4); }
@media (min-width: 640px) { .method__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .method__grid { grid-template-columns: repeat(3, 1fr); } }
.method-step { background: var(--bg); padding: var(--sp-3); min-height: 150px; display: flex; flex-direction: column; gap: 0.6rem; transition: background 0.3s var(--ease); }
.method-step:hover { background: var(--surface); }
.method-step__num { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); }
.method-step__name { font-size: var(--fs-lg); font-weight: 700; }
.method__note { margin-top: var(--sp-3); color: var(--muted); max-width: 52ch; font-size: 0.9rem; }

/* --- CTA final --- */
.final-cta { background: var(--bg); text-align: center; border-top: 1px solid var(--line); }
.final-cta__title { font-size: clamp(1.8rem, 4.6vw, 3.2rem); max-width: 24ch; margin-inline: auto; }
.final-cta__text { color: var(--muted); max-width: 52ch; margin: var(--sp-3) auto 0; }
.final-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-4); }

/* =========================================================================
   V4 — Ajustes de direccion: hero con fondo visible, proyectos full-bleed,
   cards de servicio con imagen y bullets, metodo con esfera sticky,
   footer oscuro editorial con marca gigante.
   ========================================================================= */

/* --- Sin cursor personalizado ni preloader (retirados) --- */
.pl-loader, .cursor-dot, .cursor-ring { display: none !important; }
.has-cursor, .has-cursor a, .has-cursor button { cursor: auto; }
.has-cursor a, .has-cursor button { cursor: pointer; }

/* --- FIX: la imagen de fondo del hero era tapada por el fondo opaco
       que el footer-reveal pinta en cada seccion. Reordenamos capas. --- */
.hero--home { isolation: isolate; }
.hero--home .hero__bg { z-index: 0; }
.hero--home::before { z-index: 1; }
.hero--home .hero__inner { position: relative; z-index: 2; }

/* --- Proyectos: full-bleed de borde a borde, sin animacion vertical --- */
.work--carousel .container.carousel-wrap { max-width: none; padding-inline: 0; }
.work--carousel .hscroll--bleed {
	margin-inline: 0;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	width: 100vw;
}
.work--carousel .carousel-arrow--prev { left: clamp(1rem, 3vw, 2rem); }
.work--carousel .carousel-arrow--next { right: clamp(1rem, 3vw, 2rem); }

/* --- Frame-box sobre fondo claro --- */
.section--light .frame-box {
	background: rgba(10, 13, 11, 0.04);
	border-color: rgba(10, 141, 87, 0.45);
}

/* --- Cards de servicio: imagen arriba + bullets --- */
.sys-card { padding: 0; min-height: 0; overflow: hidden; border-radius: 2px; }
.sys-card__img { aspect-ratio: 16 / 9.5; overflow: hidden; }
.sys-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.sys-card:hover .sys-card__img img { transform: scale(1.04); }
.sys-card__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.sys-card__list { display: grid; margin: 0; }
.sys-card__list li {
	position: relative; font-size: 0.82rem; color: var(--light-muted);
	padding: 0.5rem 0 0.5rem 1.2rem; border-top: 1px solid var(--light-line);
}
.sys-card__list li::before {
	content: "+"; position: absolute; left: 0; top: 0.45rem;
	color: #0aa06b; font-family: var(--font-mono);
}

/* --- METODO: esfera sticky que cambia de color con cada paso --- */
.method--orbit { background: var(--light-bg-2); }
.method--orbit .sec-label { color: var(--light-muted); }
.method--orbit .sec-label::after { background: var(--light-line); }
.method--orbit .method__title { color: var(--light-ink); }
.orbit-layout { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-top: var(--sp-5); }
@media (min-width: 900px) { .orbit-layout { grid-template-columns: 1fr 1.1fr; } }

.orbit-steps { display: grid; }
.orbit-step { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; gap: 0.7rem; opacity: 0.28; transition: opacity 0.5s var(--ease); }
.orbit-step.is-active { opacity: 1; }
.orbit-step__num { font-family: var(--font-mono); font-size: 0.75rem; color: #0aa06b; }
.orbit-step__name { font-size: var(--fs-2xl); font-weight: 700; color: var(--light-ink); }
.orbit-step__desc { color: var(--light-muted); font-size: 0.92rem; max-width: 38ch; }

.orbit-visual { display: none; }
@media (min-width: 900px) {
	.orbit-visual { display: block; position: sticky; top: 0; height: 100vh; }
	.orbit-visual__inner { position: absolute; inset: 0; display: grid; place-items: center; }
}
.orbit-ring {
	position: relative; width: min(34vw, 520px); aspect-ratio: 1;
	border: 1px dashed rgba(10, 13, 11, 0.25); border-radius: 50%;
}
.orbit-node {
	position: absolute; width: 18px; height: 18px; border-radius: 50%;
	background: var(--light-bg); border: 1px solid rgba(10, 13, 11, 0.2);
	transform: translate(-50%, -50%);
	transition: background 0.4s var(--ease), transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.orbit-node.is-on { background: var(--accent); border-color: var(--accent); transform: translate(-50%, -50%) scale(1.45); }
.orbit-core {
	position: absolute; inset: 17%; border-radius: 50%;
	display: grid; place-items: center; text-align: center; padding: 8%;
	background: var(--orb, #0A0D0B); color: var(--orb-ink, #FFFFFF);
	transition: background 0.6s var(--ease), color 0.6s var(--ease);
	box-shadow: 0 30px 80px -30px rgba(10, 13, 11, 0.35);
}
.orbit-core__num { font-family: var(--font-mono); font-size: 0.8rem; opacity: 0.7; display: block; margin-bottom: 0.4rem; }
.orbit-core__name { font-size: clamp(1.4rem, 2.4vw, 2.1rem); font-weight: 700; line-height: 1.1; }

/* Rampa de color: de la roca a la cima (crecimiento) */
[data-orbit][data-active="0"] { --orb: #0A0D0B; --orb-ink: #F5F7FA; }
[data-orbit][data-active="1"] { --orb: #14361F; --orb-ink: #E9FBF2; }
[data-orbit][data-active="2"] { --orb: #14502D; --orb-ink: #E9FBF2; }
[data-orbit][data-active="3"] { --orb: #0F7A48; --orb-ink: #F2FFF9; }
[data-orbit][data-active="4"] { --orb: #10B56B; --orb-ink: #04120B; }
[data-orbit][data-active="5"] { --orb: #14F195; --orb-ink: #04120B; }

/* --- FOOTER editorial oscuro con marca gigante (patron estudio premium) --- */
.site-footer, .site-footer--dark { background: #0A0D0B; border-top: 0; color: var(--ink); }
.site-footer .site-footer__mark, .site-footer__mark {
	text-align: right; color: var(--ink); margin: 0 0 var(--sp-5);
	font-size: clamp(4.5rem, 17vw, 15rem); line-height: 0.9;
}
.site-footer__mark .dot { color: var(--accent); }
.site-footer__topline { border-top: 1px solid var(--line); margin-bottom: var(--sp-5); }
.site-footer__cta-line { display: none; }
.site-footer .site-footer__title { color: var(--ink); font-weight: 700; font-size: 0.95rem; }
.site-footer .site-footer__col a { color: var(--muted); font-size: 0.92rem; }
.site-footer .site-footer__col a:hover { color: var(--ink); }
.site-footer .site-footer__newsletter p { color: var(--ink); font-weight: 600; }
.site-footer .newsletter-form input[type="email"] {
	background: transparent; border: 0; border-bottom: 1px solid var(--line);
	border-radius: 0; color: var(--ink);
	font-size: clamp(1.2rem, 2.4vw, 1.8rem); padding: 0.8rem 3rem 0.8rem 0; width: 100%;
}
.site-footer .newsletter-form input[type="email"]::placeholder { color: var(--muted); opacity: 0.7; }
.newsletter-form__row { position: relative; display: block; }
.site-footer .newsletter-form__row .btn {
	position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	width: auto; margin: 0; padding: 0.4rem 0.6rem;
	background: transparent; color: var(--ink); font-size: 1.5rem; border-radius: 0;
}
.site-footer .newsletter-form__row .btn:hover { background: transparent; color: var(--accent); }
.site-footer .newsletter-form__legal, .site-footer .newsletter-form__legal a { color: var(--muted); }
.site-footer .site-footer__social a { color: var(--ink); }
.site-footer .site-footer__bottom { border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.site-footer .site-footer__contact a, .site-footer .site-footer__legal, .site-footer .site-footer__legal a { color: var(--muted); font-size: 0.8rem; text-transform: none; letter-spacing: 0; }
.back-top { color: var(--ink) !important; font-size: 0.85rem !important; font-weight: 600; }
.back-top:hover { color: var(--accent) !important; }

/* =========================================================================
   V5 — Fixes: carrusel de proyectos, gap en cards de servicios,
   metodo uniforme + orbita animada Spark Central (6 pasos girando).
   ========================================================================= */

/* --- Proyectos: blindaje del carrusel en la home (media posicionada) --- */
.work--carousel .project-card__media {
	position: relative; overflow: hidden;
	aspect-ratio: 16 / 11; background: var(--surface-2);
}
.work--carousel .project-card__media img { width: 100%; height: 100%; object-fit: cover; }
.work--carousel .project-card__services-top {
	position: absolute; top: var(--sp-2); left: var(--sp-2); right: var(--sp-2);
	white-space: normal;
}

/* --- Servicios: aire entre cards --- */
.systems__grid { gap: var(--sp-3); background: transparent; border: 0; }
.sys-card { border: 1px solid var(--light-line); border-radius: 10px; }

/* --- Metodo: mismo fondo que la seccion anterior (uniformidad) --- */
.method--orbit { background: var(--light-bg); border-top: 0; }

/* --- Orbita Spark Central: items girando alrededor del nucleo --- */
.sc-wrap {
	--sc-size: min(38vw, 560px);
	--sc-center: calc(var(--sc-size) * 0.52);
	--sc-radius: calc(var(--sc-size) * 0.5);
	--sc-item: calc(var(--sc-size) * 0.165);
	position: relative; width: var(--sc-size); aspect-ratio: 1 / 1;
}

.sc-glow {
	position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
	width: calc(var(--sc-center) + 30px); height: calc(var(--sc-center) + 30px);
	background: radial-gradient(circle, rgba(20, 241, 149, 0.18) 0%, transparent 70%);
	border-radius: 50%; animation: sc-pulse 4s ease-in-out infinite;
}
@keyframes sc-pulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.35; }
	50% { transform: translate(-50%, -50%) scale(1.12); opacity: 0.12; }
}

.sc-ring {
	position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
	width: calc(var(--sc-radius) * 2); height: calc(var(--sc-radius) * 2);
	border: 2px dashed rgba(10, 13, 11, 0.18); border-radius: 50%;
}

.sc-center {
	position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
	width: var(--sc-center); height: var(--sc-center); border-radius: 50%;
	display: grid; place-items: center; text-align: center; padding: 10%;
	background: var(--orb, #0A0D0B); color: var(--orb-ink, #F5F7FA);
	box-shadow: 0 24px 60px -20px rgba(10, 13, 11, 0.4);
	transition: background 0.6s var(--ease), color 0.6s var(--ease), transform 0.3s ease;
	z-index: 10;
}
.sc-wrap:hover .sc-center { transform: translate(-50%, -50%) scale(1.04); }

/* Items orbitando: rotacion continua de 36s con delays escalonados */
.sc-item {
	position: absolute; top: 50%; left: 50%;
	width: var(--sc-item); height: var(--sc-item);
	margin: calc(var(--sc-item) / -2) 0 0 calc(var(--sc-item) / -2);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center; text-align: center;
	font-size: clamp(0.6rem, 0.85vw, 0.78rem); font-weight: 500; line-height: 1.15;
	background: #FFFFFF; color: var(--light-ink);
	box-shadow: 0 10px 30px rgba(10, 13, 11, 0.18);
	animation: sc-orbit 36s linear infinite;
	transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
	padding: 0.35em; z-index: 5;
}
.sc-item:nth-child(1) { animation-delay: 0s; }
.sc-item:nth-child(2) { animation-delay: -6s; }
.sc-item:nth-child(3) { animation-delay: -12s; }
.sc-item:nth-child(4) { animation-delay: -18s; }
.sc-item:nth-child(5) { animation-delay: -24s; }
.sc-item:nth-child(6) { animation-delay: -30s; }
.sc-item.is-on { background: var(--accent); color: var(--accent-ink); box-shadow: 0 14px 36px rgba(20, 241, 149, 0.4); }

@keyframes sc-orbit {
	0%   { transform: rotate(0deg) translateX(var(--sc-radius)) rotate(0deg); }
	100% { transform: rotate(360deg) translateX(var(--sc-radius)) rotate(-360deg); }
}

/* Particulas flotantes sutiles */
.sc-particle {
	position: absolute; width: 4px; height: 4px; border-radius: 50%;
	background: rgba(20, 241, 149, 0.5); bottom: -6px;
	animation: sc-float 7s ease-in-out infinite; pointer-events: none;
}
@keyframes sc-float {
	0% { transform: translateY(0); opacity: 0; }
	40% { opacity: 1; }
	100% { transform: translateY(calc(-1 * var(--sc-size))); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.sc-item, .sc-glow, .sc-particle { animation: none !important; }
	.sc-particle { display: none; }
	/* Sin rotacion: distribuir estaticos con los delays no aplica; ocultamos anillo movil */
}

/* =========================================================================
   V6 — Orbita refinada: geometria fija e intencional.
   Nodos quietos con etiqueta, punto activo encendido en lima,
   nucleo con rampa de color. Minimal, editorial, sin caos.
   ========================================================================= */

/* Retirar la version anterior (items girando, glow, particulas) */
.sc-item, .sc-glow, .sc-particle { display: none !important; }

.sc-wrap { --sc-center: calc(var(--sc-size) * 0.46); }

.sc-ring { border: 1px dashed rgba(10, 13, 11, 0.22); }

/* Nucleo mas sobrio */
.sc-center { box-shadow: none; }
.orbit-core__num { letter-spacing: 0.08em; }
.orbit-core__name { letter-spacing: -0.02em; }

/* --- Nodos fijos con etiqueta --- */
.orb-n {
	position: absolute; transform: translate(-50%, -50%);
	display: flex; align-items: center; gap: 12px; z-index: 6;
}
.orb-n__dot {
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--light-bg); border: 1px solid rgba(10, 13, 11, 0.3);
	transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
		transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
	flex-shrink: 0;
}
.orb-n__label {
	font-size: 0.85rem; color: var(--light-muted); white-space: nowrap;
	transition: color 0.35s var(--ease), font-weight 0.1s linear;
}
.orb-n.is-on .orb-n__dot {
	background: var(--accent); border-color: var(--accent);
	transform: scale(1.6);
	box-shadow: 0 0 0 8px rgba(20, 241, 149, 0.18);
}
.orb-n.is-on .orb-n__label { color: var(--light-ink); font-weight: 600; }

/* Orientacion de la etiqueta: siempre hacia afuera del anillo */
.orb-n--top { flex-direction: column-reverse; gap: 10px; }
.orb-n--bottom { flex-direction: column; gap: 10px; }
.orb-n--right { flex-direction: row; }
.orb-n--left { flex-direction: row-reverse; }

/* =========================================================================
   V7 — CTA de contacto pre-footer: titulo editorial + formulario con chips
   ========================================================================= */

.contact-cta { padding-block: clamp(4rem, 10vw, 8rem); }
.contact-cta__grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .contact-cta__grid { grid-template-columns: 1fr 1.15fr; } }

.contact-cta__title {
	font-size: clamp(3rem, 7.5vw, 6.5rem); font-weight: 700;
	letter-spacing: -0.04em; line-height: 0.98; color: var(--light-ink);
}

.contact-cta__form { display: grid; gap: var(--sp-4); }

.cc-group { border: 0; padding: 0; margin: 0; }
.cc-label { font-size: 1rem; font-weight: 600; color: var(--light-ink); margin-bottom: var(--sp-2); display: block; }
.cc-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.cc-pill { position: relative; cursor: pointer; }
.cc-pill input { position: absolute; opacity: 0; pointer-events: none; }
.cc-pill span {
	display: inline-flex; align-items: center;
	padding: 0.65rem 1.25rem; border-radius: var(--radius-pill);
	background: var(--light-bg-2); color: var(--light-ink);
	font-size: 0.9rem; font-weight: 500;
	transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.2s var(--ease);
}
.cc-pill:hover span { transform: translateY(-1px); }
.cc-pill input:checked + span { background: var(--accent); color: var(--accent-ink); }
.cc-pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.cc-row { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .cc-row { grid-template-columns: 1fr 1fr; } }

.cc-field { display: grid; gap: 0.3rem; margin: 0; }
.cc-field label { font-size: 1rem; font-weight: 600; color: var(--light-ink); }
.cc-field input {
	background: transparent; border: 0; border-bottom: 1px solid rgba(10, 13, 11, 0.35);
	border-radius: 0; padding: 0.6rem 0; color: var(--light-ink); font-size: 1rem;
	transition: border-color 0.25s var(--ease);
}
.cc-field input:focus { outline: none; border-bottom-color: var(--light-ink); }

.cc-submit-row { text-align: right; margin: 0; }
.cc-submit {
	background: none; border: 0; padding: 0; cursor: pointer;
	font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -0.02em;
	color: #0aa06b;
	display: inline-flex; align-items: center; gap: 0.3em;
	transition: color 0.25s var(--ease), gap 0.25s var(--ease);
}
.cc-submit:hover { color: var(--light-ink); gap: 0.5em; }

/* =========================================================================
   V8 — Reseñas carrusel Google + fixes de detalle:
   titulo compacto, badge solido, chips sin +, scrollbar minimal,
   manifiesto mas compacto, sin textos sobre las imagenes del carrusel.
   ========================================================================= */

/* --- Hero: lineas del titulo mas juntas + badge con fondo solido --- */
.hero__title { gap: 0.1em; line-height: 1.02; }
.hero__badge, .hero__badge--studio { background: #0A0D0B; }
.sel-chip { background: #0E120F; }
.sel-chip::before { content: none; }

/* --- Manifiesto: menos separacion, mejor medida --- */
.manifesto__text { max-width: 44ch; line-height: 1.3; }
.manifesto__text + .manifesto__text { margin-top: var(--sp-3); }

/* --- Carrusel: sin texto sobre la imagen + scrollbar minimal --- */
.project-card__services-top { display: none !important; }

.hscroll { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.55) transparent; }
.hscroll::-webkit-scrollbar { height: 2px; }
.hscroll::-webkit-scrollbar-track { background: transparent; }
.hscroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.55); border-radius: 2px; }
.section--light .hscroll { scrollbar-color: rgba(10, 13, 11, 0.35) transparent; }
.section--light .hscroll::-webkit-scrollbar-thumb { background: rgba(10, 13, 11, 0.35); }

/* --- Reseñas: tarjeta Google + tarjetas de testimonio --- */
.reviews .hscroll { padding-block: var(--sp-2); align-items: stretch; }

.rev-google {
	width: clamp(280px, 30vw, 440px); min-height: 480px; flex-shrink: 0;
	border-radius: 22px; padding: var(--sp-4);
	display: flex; flex-direction: column; justify-content: space-between; align-items: center;
	text-align: center;
	background:
		radial-gradient(120% 90% at 85% 100%, rgba(37, 99, 235, 0.35), transparent 55%),
		radial-gradient(120% 90% at 10% 90%, rgba(20, 241, 149, 0.16), transparent 50%),
		#070908;
	color: #fff;
}
.rev-google__top { display: grid; gap: var(--sp-2); justify-items: center; margin-top: var(--sp-4); }
.rev-google__brand { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 700; letter-spacing: -0.03em; color: #fff; }
.rev-google__stars { color: #FBBC05; font-size: 1.5rem; letter-spacing: 0.15em; }
.rev-google__btn {
	display: inline-flex; padding: 0.7rem 1.4rem; border-radius: var(--radius-pill);
	background: #fff; color: #0A0D0B; font-weight: 600; font-size: 0.9rem;
	transition: transform 0.25s var(--ease), background 0.25s var(--ease);
	margin-top: var(--sp-2);
}
.rev-google__btn:hover { transform: translateY(-2px); background: var(--accent); color: var(--accent-ink); }
.rev-google__meta { font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); display: flex; align-items: center; gap: 0.5em; }
.rev-google__g {
	width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #0A0D0B;
	display: inline-grid; place-items: center; font-weight: 700; font-size: 0.9rem;
}

.rev-card {
	width: clamp(280px, 30vw, 440px); min-height: 480px; flex-shrink: 0;
	border-radius: 22px; padding: var(--sp-4);
	background: #E9EDEB; margin: 0;
	display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-3);
}
.rev-card__quote { font-size: clamp(1.1rem, 1.6vw, 1.45rem); font-weight: 500; line-height: 1.45; color: var(--light-ink); letter-spacing: -0.01em; }
.rev-card__author { display: grid; gap: 0.15rem; }
.rev-card__name { font-weight: 700; color: var(--light-ink); font-size: 0.95rem; }
.rev-card__role { color: var(--light-muted); font-size: 0.85rem; }

/* Flechas del carrusel en seccion clara */
.reviews .carousel-arrow { background: rgba(255, 255, 255, 0.85); border-color: var(--light-line); color: var(--light-ink); }
.reviews .carousel-arrow:hover { border-color: var(--light-ink); color: var(--light-ink); }

/* Sin collage (retirado) */
.collage { display: none !important; }

/* =========================================================================
   V9 — REGLA DE DISEÑO: cards con esquinas RECTAS (sin border-radius).
   Los pills/chips/botones sí conservan su forma. + Orbita corregida.
   ========================================================================= */

.service-card, .audience-card, .principle-card, .team-card, .testimonial, .post-card,
.sys-card, .rev-card, .rev-google, .svc-card, .svc-media,
.cta-band__inner, .contact-page__form-wrap, .project-meta, .process-step, .method-step,
.prose img, .project-gallery img, .project-hero__media img,
.about-story__media img, .team-member__media img, .principles__media img,
.pj-dark__media img, .sys-card__img img {
	border-radius: 0 !important;
}

/* =========================================================================
   ORBITA v3:
   - Nucleo SIEMPRE oscuro (sin rampa verde, sin hover) — solo los puntos
     laterales se encienden en lima.
   - Todo centrado en su columna.
   - Sticky centrado en viewport: no se corta ni deja bloque blanco al final.
   ========================================================================= */

/* Nucleo fijo oscuro, sin efectos */
.sc-center {
	background: #0A0D0B !important;
	color: #F5F7FA !important;
	transition: none;
}
.sc-wrap:hover .sc-center { transform: translate(-50%, -50%); }

/* Centrado del conjunto */
.sc-wrap { margin-inline: auto; }

/* Sticky que sigue centrado verticalmente y termina limpio */
@media (min-width: 900px) {
	.orbit-visual { position: static; height: auto; display: block; }
	.orbit-visual__inner {
		position: sticky; top: 50vh; transform: translateY(-50%);
		inset: auto; display: grid; place-items: center;
	}
	.orbit-step { min-height: 58vh; }
	.orbit-step:first-child { min-height: 42vh; }
	.orbit-step:last-child { min-height: 42vh; }
}

/* =========================================================================
   V10 — Copy optimizado: micro-nota del hero, intro y CTAs del metodo.
   Sin WhatsApp flotante (retirado).
   ========================================================================= */
.hero__note {
	margin-top: var(--sp-2);
	font-size: 0.8rem; color: var(--muted);
	font-family: var(--font-mono); letter-spacing: 0.02em;
}
.method__intro {
	color: var(--light-muted); max-width: 56ch;
	font-size: var(--fs-lg); margin-top: var(--sp-2);
}
.method__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.wa-float { display: none !important; }

/* =========================================================================
   V11 — FIX metodo: sticky estable de la esfera.
   La esfera queda centrada en pantalla durante TODOS los pasos (incluido
   Mejora) y la seccion cierra sin hueco blanco.
   ========================================================================= */
@media (min-width: 900px) {
	.orbit-visual { position: relative; height: auto; display: block; }
	.orbit-visual__inner {
		position: sticky; top: 0; transform: none; inset: auto;
		height: 100vh; display: grid; place-items: center;
	}
	.orbit-step { min-height: 58vh; }
	.orbit-step:first-child { min-height: 48vh; }
	.orbit-step:last-child { min-height: 34vh; }
	/* Cola: mantiene la esfera pegada mientras "Mejora" esta activo */
	.orbit-steps { padding-bottom: 24vh; }
}
@media (max-width: 899px) {
	.orbit-visual { display: none; }
}

/* =========================================================================
   V12 — Carruseles: sin barra de scroll visible y sin snap rigido.
   El movimiento lo dan el drag con lerp, las flechas y la rueda.
   ========================================================================= */
.hscroll {
	scroll-snap-type: none;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 0;
}
.hscroll::-webkit-scrollbar { display: none; height: 0; }
.hscroll > * { scroll-snap-align: none; }

/* =========================================================================
   V13 — Formulario pre-footer compacto + parallax del footer.
   ========================================================================= */
.contact-cta { padding-block: clamp(3rem, 7vw, 5.5rem); }
.contact-cta__title { font-size: clamp(2.4rem, 5.5vw, 4.6rem); }
.contact-cta__form { gap: var(--sp-3); }
.cc-label { font-size: 0.9rem; margin-bottom: 0.6rem; }
.cc-pill span { padding: 0.5rem 1rem; font-size: 0.85rem; }
.cc-row { gap: var(--sp-3); }
.cc-field label { font-size: 0.9rem; }
.cc-field input { padding: 0.45rem 0; font-size: 0.95rem; }
.cc-submit-row { margin-top: 0.5rem; }

/* Parallax del footer: el JS anima translateY; will-change para fluidez */
body.has-footer-reveal .site-footer { will-change: transform; }

/* =========================================================================
   V14 — Tarjeta de reseñas optimizada: 5.0 protagonista, estrellas doradas
   brillantes, textos en blanco puro.
   ========================================================================= */
.rev-google { justify-content: center; }
.rev-google__top { margin-top: 0; gap: 0.9rem; }
.rev-google__brand {
	display: inline-flex; align-items: center; gap: 0.55em;
	font-size: 1.35rem; font-weight: 700; color: #FFFFFF; opacity: 1;
}
.rev-google__g {
	width: 30px; height: 30px; font-size: 1rem;
	background: #FFFFFF; color: #0A0D0B;
}
.rev-google__score {
	font-size: clamp(3.4rem, 6vw, 5rem); font-weight: 700; line-height: 1;
	color: #FFFFFF; letter-spacing: -0.03em;
}
.rev-google__stars { display: flex; gap: 0.35rem; font-size: 1.6rem; }
.rev-google__stars span {
	color: #FFC400;
	text-shadow: 0 0 18px rgba(255, 196, 0, 0.45);
}
.rev-google__label { color: #FFFFFF; font-size: 0.95rem; font-weight: 500; }
.rev-google__btn { margin-top: var(--sp-2); }
.rev-google__meta { display: none; }

/* =========================================================================
   V15 — FIX DEFINITIVO del sticky de la esfera del metodo.
   Bug: "inset: auto" iba DESPUES de "top: 0" y lo reseteaba -> el sticky
   quedaba con top:auto y nunca se pegaba. Orden corregido.
   ========================================================================= */
@media (min-width: 900px) {
	.orbit-visual { position: relative; height: auto; display: block; }
	.orbit-visual__inner {
		position: sticky;
		inset: auto;      /* primero el reset... */
		top: 0;           /* ...y despues el top que manda */
		transform: none;
		height: 100vh;
		display: grid; place-items: center;
	}
}

/* =========================================================================
   V16 — Tipografia UNICA en toda la web: todo Geist.
   Los labels/badges/coordenadas usaban Geist Mono y se sentian de otra
   familia. Redefinimos el token mono -> Geist para unificar sin excepciones.
   + Respiro inferior en la seccion de Proyectos.
   ========================================================================= */
:root {
	--font-mono: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Con Geist normal, los labels tecnicos respiran mejor con menos tracking */
.sec-label { letter-spacing: 0.06em; font-weight: 500; }
.hero__badge, .hero__note, .hero__selector-label { letter-spacing: 0.02em; }

/* Proyectos: padding inferior para respirar */
.work--carousel { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }

/* =========================================================================
   V17 — Metodo proporcionado:
   1. Columnas cercanas (no cada una en su extremo).
   2. Texto de la esfera contenido (no se desborda).
   3. La esfera acompaña hasta la nota y los botones finales.
   ========================================================================= */
@media (min-width: 900px) {
	.orbit-layout {
		max-width: 1180px; margin-inline: auto;
		grid-template-columns: minmax(0, 460px) 1fr;
		gap: clamp(2rem, 4vw, 4.5rem);
	}
	.orbit-step { min-height: 52vh; }
	.orbit-step:first-child { min-height: 44vh; }
	.orbit-step:last-child { min-height: 40vh; }
	/* La cola ahora la aporta el bloque final dentro de la columna */
	.orbit-steps { padding-bottom: 0; }
	.orbit-outro { min-height: 52vh; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); }
}
.orbit-outro .method__actions { margin-top: 0; }
.orbit-outro .method__note { margin-top: 0; max-width: 44ch; }

/* Texto del nucleo: contenido y proporcionado (Implementacion cabe) */
.sc-center { padding: 8%; }
.orbit-core__name {
	font-size: clamp(0.95rem, 1.55vw, 1.45rem);
	line-height: 1.15; letter-spacing: -0.01em;
	overflow-wrap: normal; display: block; max-width: 100%;
}
.orbit-core__num { font-size: 0.72rem; }

/* =========================================================================
   V18 — Footer en dos columnas: enlaces (izquierda, alineados) + form.
   Input de correo compacto, legal pequeño con opacidad.
   ========================================================================= */
.site-footer__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 900px) {
	.site-footer__grid { grid-template-columns: 1.35fr 1fr; align-items: start; }
}
.site-footer__links {
	display: grid; grid-template-columns: 1fr;
	gap: var(--sp-4); justify-content: start; text-align: left;
}
@media (min-width: 640px) {
	.site-footer__links { grid-template-columns: repeat(3, minmax(0, 200px)); gap: var(--sp-3); }
}

/* Input compacto */
.site-footer .newsletter-form input[type="email"] {
	font-size: 1rem;
	padding: 0.55rem 2.4rem 0.55rem 0;
}
.site-footer .newsletter-form__row .btn { font-size: 1.1rem; padding: 0.3rem 0.4rem; }

/* Legal pequeño y con opacidad */
.site-footer .newsletter-form__legal,
.site-footer .newsletter-form__legal a {
	font-size: 0.72rem; line-height: 1.55;
	color: var(--muted); opacity: 0.65; font-weight: 400;
}

/* =========================================================================
   V19 — Marca: Andez™ / Andez Consultores™ (™ pequeño en lima).
   ========================================================================= */
.site-footer__mark .tm {
	font-size: 0.22em; vertical-align: super; color: var(--accent);
	letter-spacing: 0; font-weight: 600; margin-left: 0.06em;
}
.site-brand__dot { font-size: 0.55em; vertical-align: super; font-weight: 600; }

/* =========================================================================
   V20 — Botones lineales (sin fondo, subrayado editorial) + CTAs por paso.
   Sin triangulo en el badge del hero.
   ========================================================================= */
.btn--line {
	display: inline-flex; align-items: center; gap: 0.4em;
	background: none; border: 0; border-radius: 0; padding: 0.15rem 0;
	font-weight: 600; font-size: 0.92rem; color: inherit;
	border-bottom: 1.5px solid currentColor;
	transition: color 0.25s var(--ease), gap 0.25s var(--ease);
}
.btn--line:hover { color: #0aa06b; gap: 0.65em; transform: none; }
.section--light .btn--line, .method--orbit .btn--line { color: var(--light-ink); }
.section--light .btn--line:hover, .method--orbit .btn--line:hover { color: #0aa06b; }

.orbit-step__ctas { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: var(--sp-2); }
.orbit-step__ctas .btn--line { font-size: 0.88rem; }
.orbit-step__desc { max-width: 42ch; }
.orbit-outro .method__actions .btn--line { align-self: center; }

/* =========================================================================
   V21 — Servicios: lista editorial + panel grafico (sin ruido).
   6 filas grandes a la izquierda; el panel derecho muestra imagen, promesa
   y bullets del sistema activo. Hover/click cambia el panel.
   + Footer compacto para que el reveal parallax SIEMPRE se active.
   ========================================================================= */

.sys2 { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .sys2 { grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 5rem); } }

/* --- Filas editoriales --- */
.sys2-rows { display: grid; }
.sys2-row {
	display: flex; align-items: center; gap: var(--sp-2);
	width: 100%; text-align: left; background: none; border: 0;
	border-top: 1px solid var(--light-line);
	padding: clamp(1rem, 2vw, 1.5rem) 0.25rem;
	cursor: pointer;
	transition: background 0.25s var(--ease), padding-left 0.3s var(--ease);
}
.sys2-row:last-child { border-bottom: 1px solid var(--light-line); }
.sys2-row__num { font-size: 0.72rem; color: var(--light-muted); letter-spacing: 0.06em; min-width: 3.6rem; transition: color 0.25s var(--ease); }
.sys2-row__name {
	font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em;
	color: var(--light-muted); transition: color 0.25s var(--ease);
	flex: 1;
}
.sys2-row__arrow {
	font-size: 1.3rem; color: var(--light-ink);
	opacity: 0; transform: translateX(-8px);
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.sys2-row:hover { padding-left: 0.6rem; }
.sys2-row:hover .sys2-row__name { color: var(--light-ink); }
.sys2-row.is-active .sys2-row__name { color: var(--light-ink); }
.sys2-row.is-active .sys2-row__num { color: #0aa06b; }
.sys2-row.is-active .sys2-row__arrow { opacity: 1; transform: none; }
.sys2-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* --- Panel grafico --- */
.sys2-panels { position: relative; }
.sys2-panel { display: none; }
.sys2-panel.is-active { display: grid; gap: var(--sp-3); animation: sys2-in 0.45s var(--ease); }
@keyframes sys2-in {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}
.sys2-panel__img { aspect-ratio: 16 / 10; overflow: hidden; }
.sys2-panel__img img { width: 100%; height: 100%; object-fit: cover; }
.sys2-panel__desc { color: var(--light-muted); font-size: 0.95rem; max-width: 52ch; }
.sys2-panel__list { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .sys2-panel__list { grid-template-columns: 1fr 1fr; column-gap: var(--sp-3); } }
.sys2-panel__list li {
	position: relative; font-size: 0.85rem; color: var(--light-ink);
	padding: 0.5rem 0 0.5rem 1.2rem; border-top: 1px solid var(--light-line);
}
.sys2-panel__list li::before {
	content: "+"; position: absolute; left: 0; top: 0.45rem;
	color: #0aa06b;
}

/* --- Footer compacto: el reveal parallax necesita caber en el viewport --- */
.site-footer { padding-block: clamp(2rem, 5vw, 3.5rem) var(--sp-3); }
.site-footer__mark { font-size: clamp(3.5rem, 12.5vw, 10.5rem); margin-bottom: var(--sp-4); }
.site-footer__topline { margin-bottom: var(--sp-4); }
.site-footer__grid { gap: var(--sp-3); }
.site-footer__bottom { margin-top: var(--sp-4); padding-top: var(--sp-2); }

/* =========================================================================
   V22 — FIX: el footer-reveal pintaba de oscuro la seccion Metodo
   (no llevaba .section--light). La declaramos clara explicitamente.
   ========================================================================= */
body.has-footer-reveal .site-main > .method--orbit { background-color: var(--light-bg); }
.method--orbit { background: var(--light-bg); }

/* =========================================================================
   V23 — Servicios como tarjetas apiladas (sticky stack):
   cada sistema es un panel grande que se queda fijo mientras el siguiente
   se desliza encima. Alternancia blanco/gris, esquinas rectas.
   ========================================================================= */
.syst { display: block; }
.syst-card {
	position: sticky;
	top: calc(76px + var(--i, 0) * 14px);
	min-height: 70vh;
	background: var(--light-bg);
	border: 1px solid var(--light-line);
	padding: clamp(1.5rem, 4vw, 3.5rem);
	margin-bottom: var(--sp-3);
	display: grid; gap: clamp(1.5rem, 4vw, 4rem);
	grid-template-columns: 1fr;
	align-content: start;
	box-shadow: 0 -18px 40px -28px rgba(10, 13, 11, 0.25);
}
.syst-card:nth-child(even) { background: var(--light-bg-2); }
.syst-card:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
	.syst-card { grid-template-columns: 1fr 1.05fr; align-items: start; }
}

.syst-card__num { font-size: 0.75rem; color: #0aa06b; letter-spacing: 0.08em; margin-bottom: var(--sp-2); }
.syst-card__name {
	font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 700;
	letter-spacing: -0.03em; color: var(--light-ink); margin-bottom: var(--sp-2);
}
.syst-card__desc { color: var(--light-muted); font-size: 1rem; max-width: 44ch; margin-bottom: var(--sp-3); }

.syst-card__img { aspect-ratio: 16 / 9; overflow: hidden; }
.syst-card__img img { width: 100%; height: 100%; object-fit: cover; }
.syst-card__list { display: grid; grid-template-columns: 1fr; margin-top: var(--sp-2); }
@media (min-width: 640px) { .syst-card__list { grid-template-columns: 1fr 1fr; column-gap: var(--sp-3); } }
.syst-card__list li {
	position: relative; font-size: 0.85rem; color: var(--light-ink);
	padding: 0.5rem 0 0.5rem 1.2rem; border-top: 1px solid rgba(10, 13, 11, 0.14);
}
.syst-card__list li::before { content: "+"; position: absolute; left: 0; top: 0.45rem; color: #0aa06b; }

/* En movil: sin stacking (scroll natural, sin sticky) */
@media (max-width: 640px) {
	.syst-card { position: static; min-height: 0; }
}

/* =========================================================================
   V24 — Stack refinado: paneles blancos sin bordes ni separacion,
   la tarjeta que queda atras se OSCURECE y encoge sutilmente
   mientras la siguiente la cubre (via --dim/transform desde JS).
   ========================================================================= */
.syst-card {
	border: 0 !important;
	margin-bottom: 0 !important;
	box-shadow: none !important;
	top: 76px;
	min-height: 82vh;
	background: var(--light-bg) !important;
	overflow: hidden;
	transform-origin: top center;
	will-change: transform;
}
.syst-card::after {
	content: ""; position: absolute; inset: 0;
	background: #0A0D0B; opacity: var(--dim, 0);
	pointer-events: none;
}
@media (max-width: 640px) {
	.syst-card { position: static; min-height: 0; }
	.syst-card::after { content: none; }
}

/* =========================================================================
   V25 — Botones lineales con subrayado animado direccional:
   al hacer hover, la linea SALE por la derecha y VUELVE a entrar por la
   izquierda (wipe editorial). Sin flechas: menos ruido.
   ========================================================================= */
.btn--line {
	border-bottom: 0;
	position: relative;
	padding-bottom: 0.4rem;
	gap: 0;
}
.btn--line::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0;
	height: 1.5px; background: currentColor;
	transform: scaleX(1); transform-origin: left;
}
.btn--line:hover { gap: 0; color: inherit; }
.btn--line:hover::after {
	animation: line-wipe 0.65s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes line-wipe {
	0%   { transform: scaleX(1); transform-origin: right; }
	49%  { transform: scaleX(0); transform-origin: right; }
	51%  { transform: scaleX(0); transform-origin: left; }
	100% { transform: scaleX(1); transform-origin: left; }
}
@media (prefers-reduced-motion: reduce) {
	.btn--line:hover::after { animation: none; }
}

/* =========================================================================
   V26 — Stack FULL-BLEED: los paneles van de borde a borde de la pantalla
   (sin padding lateral visible), con el contenido alineado a la grilla.
   ========================================================================= */
.syst {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}
.syst-card {
	/* El fondo llega a los bordes; el contenido respeta la grilla del sitio */
	padding-block: clamp(2.5rem, 6vw, 5rem);
	padding-inline: max(var(--gutter), calc((100vw - 1460px) / 2));
	min-height: 86vh;
}
/* La seccion pierde su padding inferior para que el stack cierre a ras */
.systems.section { padding-bottom: 0; }
.systems .sec-label, .systems .systems__head { /* el encabezado si respeta la grilla */ }

/* V27 — sin scale en el stack: el panel cubierto solo se oscurece, flush total */
.syst-card { transform: none !important; will-change: auto; }

/* =========================================================================
   V28 — Diagramacion del panel de servicio:
   nombre GIGANTE + numero grande a la derecha, linea divisoria,
   abajo descripcion grande + entregables en columnas + link,
   imagen compacta a la derecha.
   ========================================================================= */
.syst-card { display: flex; flex-direction: column; justify-content: flex-start; gap: 0; }

.syst-card__head {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: var(--sp-3);
}
.syst-card__name {
	font-size: clamp(2.6rem, 6.5vw, 5.5rem); font-weight: 700;
	letter-spacing: -0.035em; line-height: 0.95; color: var(--light-ink);
	margin: 0;
}
.syst-card__idx {
	font-size: clamp(2.6rem, 6.5vw, 5.5rem); font-weight: 400;
	letter-spacing: -0.03em; line-height: 0.95; color: var(--light-ink);
}

.syst-card__divider {
	border-top: 1px solid rgba(10, 13, 11, 0.16);
	margin-block: clamp(1.5rem, 4vh, 3.5rem);
}

.syst-card__body {
	display: grid; gap: var(--sp-4); grid-template-columns: 1fr;
	align-items: start; flex: 1;
}
@media (min-width: 900px) {
	.syst-card__body { grid-template-columns: 1.5fr 0.8fr; }
}

.syst-card__desc {
	font-size: clamp(1.25rem, 2.1vw, 1.8rem); font-weight: 500;
	letter-spacing: -0.015em; line-height: 1.35;
	color: var(--light-ink); max-width: 26ch; margin: 0 0 var(--sp-4);
}

.syst-card__foot {
	display: flex; flex-wrap: wrap; align-items: flex-end;
	gap: var(--sp-4); justify-content: space-between;
}
.syst-card__list {
	display: grid; grid-template-columns: repeat(2, minmax(0, 220px));
	gap: 0.45rem var(--sp-3); margin: 0;
}
.syst-card__list li {
	font-size: 0.85rem; color: var(--light-ink);
	padding: 0; border: 0;
}
.syst-card__list li::before { content: none; }

.syst-card__img {
	max-width: 360px; width: 100%; justify-self: end;
	aspect-ratio: 4 / 3.4; overflow: hidden;
}
.syst-card__img img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 640px) {
	.syst-card__list { grid-template-columns: 1fr; }
	.syst-card__img { justify-self: start; max-width: 100%; }
}

/* =========================================================================
   V29 — SISTEMA DE ESPACIADO (ritmo editorial generoso, aire tipo estudio
   premium) + fix: numero del panel al extremo derecho.
   Tokens unicos aplicados a TODAS las paginas via clases compartidas.
   ========================================================================= */
:root {
	--space-2xs: 0.5rem;
	--space-xs:  1rem;
	--space-s:   1.5rem;
	--space-m:   clamp(2rem, 3vw, 3rem);
	--space-l:   clamp(3rem, 5vw, 4.5rem);
	--space-xl:  clamp(4.5rem, 8vw, 8rem);
	--space-2xl: clamp(6rem, 11vw, 11rem);
}

/* FIX: el align-items:start heredado encogia el header del panel;
   el numero quedaba pegado al nombre en vez del extremo derecho */
.syst-card { align-items: stretch !important; }
.syst-card__head { width: 100%; }

/* --- Ritmo vertical global (todas las paginas) --- */
.section { padding-block: var(--space-xl); }
.sec-label { margin-bottom: var(--space-l); }
.section__head { margin-bottom: var(--space-l); }
.systems__head { margin-bottom: var(--space-l); }
.page-header { padding-block: var(--space-xl) var(--space-m); }
.method__intro { margin-top: var(--space-s); }
.orbit-layout { margin-top: var(--space-l); }
.contact-cta { padding-block: var(--space-xl); }
.testimonials--light .testimonials__head, .reviews .sec-label { margin-bottom: var(--space-l); }
.site-footer { padding-block: var(--space-l) var(--space-s); }
.site-footer__mark { margin-bottom: var(--space-l); }
.site-footer__topline { margin-bottom: var(--space-l); }
.site-footer__bottom { margin-top: var(--space-l); }
.work--carousel { padding-block: var(--space-m) var(--space-xl); }

/* --- Respiracion interna de los paneles del stack --- */
.syst-card { padding-block: var(--space-l) var(--space-xl); }
.syst-card__divider { margin-block: var(--space-m) var(--space-l); }
.syst-card__desc { margin-bottom: var(--space-l); }
.syst-card__foot { margin-top: var(--space-m); }

/* --- Paginas internas: mismo ritmo --- */
.service-hero { padding-block: var(--space-2xl) var(--space-l); }
.pj-ficha.section, .pj-blocks.section, .pj-dark.section, .pj-related.section { padding-block: var(--space-xl); }
.about-hero { padding-bottom: var(--space-xl); }
.about-story.section, .team--light.section, .principles--dark.section { padding-block: var(--space-xl); }
.contact-page.section { padding-block: var(--space-2xl) var(--space-xl); }

/* =========================================================================
   V30 — Nosotros con imagen real en el hero + mas aire lateral GLOBAL.
   ========================================================================= */

/* Mas padding izquierda/derecha en TODAS las paginas */
:root { --gutter: clamp(1.5rem, 4vw, 3rem); }

/* Hero de Nosotros con la foto real de fondo */
.about-hero--img { isolation: isolate; overflow: hidden; }
.about-hero__bg { position: absolute; inset: 0; z-index: 0; }
.about-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.about-hero--img::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background:
		radial-gradient(60% 55% at 50% 0%, rgba(20, 241, 149, 0.10), transparent 65%),
		linear-gradient(180deg, rgba(10, 13, 11, 0.7), rgba(10, 13, 11, 0.45) 55%, var(--bg) 97%);
}
.about-hero--img .container { position: relative; z-index: 2; }
.about-hero--img { padding-top: clamp(7rem, 15vw, 11rem); padding-bottom: var(--space-xl); }

/* La foto de la historia sin filtro (es la foto real del equipo) */
.about-story__media img { filter: none; }
/* Fotos del equipo a color */
.team-member__media img { filter: none; aspect-ratio: 4 / 4.2; }

/* =========================================================================
   V31 — /work/ en claro: grid editorial 2 columnas + pastilla "Ver"
   que sigue al cursor sobre las tarjetas + zoom suave de imagen.
   ========================================================================= */

.work-page { background: var(--light-bg); color: var(--light-ink); }
.work-page__head { padding-block: clamp(7rem, 15vw, 11rem) var(--space-l); }
.work-page__title {
	font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700;
	letter-spacing: -0.03em; line-height: 1.05; color: var(--light-ink);
}
.work-page__lead { color: var(--light-muted); max-width: 56ch; margin-top: var(--space-s); font-size: var(--fs-lg); }
.work-page__body { padding-bottom: var(--space-xl); }

/* Filtros en claro */
.work-page .work-filters { margin-top: var(--space-l); margin-bottom: 0; }
.work-page .chip { border-color: var(--light-line); color: var(--light-muted); background: transparent; }
.work-page .chip:hover { border-color: var(--light-ink); color: var(--light-ink); }
.work-page .chip.is-active { background: var(--light-ink); color: #fff; border-color: var(--light-ink); }

/* Grid editorial */
.wk-grid { display: grid; gap: var(--space-l) var(--space-m); grid-template-columns: 1fr; }
@media (min-width: 760px) { .wk-grid { grid-template-columns: repeat(2, 1fr); } }

.wk-card { border: 0; background: transparent; }
.wk-card__link { display: block; color: inherit; }
.wk-card__media { aspect-ratio: 16 / 11; overflow: hidden; background: var(--light-bg-2); }
.wk-card__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.7s var(--ease);
}
.wk-card:hover .wk-card__media img { transform: scale(1.05); }
.wk-card__body { padding-top: var(--space-s); }
.wk-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s); }
.wk-card__title { font-size: var(--fs-xl); font-weight: 700; color: var(--light-ink); letter-spacing: -0.02em; }
.wk-card__cat { font-size: 0.75rem; color: var(--light-muted); letter-spacing: 0.05em; white-space: nowrap; }
.wk-card__tagline { color: var(--light-muted); font-size: 0.9rem; margin-top: 0.35rem; }

/* Paginacion en claro */
.work-page .pagination .page-numbers { border-color: var(--light-line); color: var(--light-ink); }
.work-page .pagination .current { background: var(--light-ink); color: #fff; border-color: var(--light-ink); }

/* --- Pastilla "Ver" que sigue al cursor --- */
.wk-cursor {
	position: fixed; top: 0; left: 0; z-index: 90;
	width: 92px; height: 92px; border-radius: 50%;
	background: var(--accent); color: var(--accent-ink);
	display: grid; place-items: center;
	font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em;
	pointer-events: none;
	opacity: 0; transform: translate(-50%, -50%) scale(0.4);
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
	will-change: left, top;
}
.wk-cursor.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (pointer: coarse) { .wk-cursor { display: none; } }

/* El footer-reveal debe pintar esta pagina de claro */
body.has-footer-reveal .site-main > .work-page { background-color: var(--light-bg); }

/* =========================================================================
   V32 — /work/ pulida: statement editorial (sin recuadro), filtros como
   links subrayados, barra inferior con (SCROLL), header a proporcion.
   ========================================================================= */
.work-page__head { padding: 0; }
.work-page__head-inner {
	min-height: 78vh;
	display: flex; flex-direction: column; justify-content: space-between;
	padding-top: clamp(7rem, 14vw, 10rem);
	padding-bottom: var(--space-m);
}
.work-page__statement {
	font-size: clamp(1.6rem, 3.4vw, 2.7rem); font-weight: 600;
	letter-spacing: -0.02em; line-height: 1.3;
	color: var(--light-ink); max-width: 34ch; margin: 0;
}

.work-page__bar {
	display: flex; flex-wrap: wrap; align-items: baseline;
	justify-content: space-between; gap: var(--space-s);
	border-top: 1px solid var(--light-line);
	padding-top: var(--space-s);
}
.wk-filters { display: flex; flex-wrap: wrap; gap: clamp(1rem, 2.5vw, 2.2rem); }
.wk-filter {
	font-size: 0.95rem; font-weight: 600; color: var(--light-muted);
	padding-bottom: 0.3rem; border-bottom: 1.5px solid transparent;
	transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.wk-filter:hover { color: var(--light-ink); }
.wk-filter.is-active { color: var(--light-ink); border-bottom-color: var(--light-ink); }
.work-page__scroll { font-size: 0.8rem; color: var(--light-muted); letter-spacing: 0.04em; }

/* Grid con mas ritmo vertical */
.wk-grid { row-gap: var(--space-xl); }
.work-page__body { padding-top: var(--space-l); }

/* =========================================================================
   V33 — /work/ estructura definitiva:
   marquee gigante PROYECTOS + filtros como filas de ancho completo +
   grid 2 col con imagenes CUADRADAS y meta nombre/categoria.
   ========================================================================= */

/* Marquee gigante en claro */
.wkm {
	overflow: hidden; white-space: nowrap;
	padding-top: clamp(6.5rem, 12vw, 9rem);
}
.wkm__track { display: inline-block; animation: pj-marquee 40s linear infinite; }
.wkm__track span {
	font-size: clamp(4.5rem, 14vw, 12rem); font-weight: 700;
	letter-spacing: -0.03em; line-height: 1;
	color: var(--light-ink); text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) { .wkm__track { animation: none; } }

/* Filtros: filas apiladas de ancho completo */
.wk-rows { display: block; margin-top: var(--space-l); }
.wk-row {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-s);
	padding: 1.35rem 0.25rem;
	border-top: 1px solid var(--light-line);
	color: var(--light-muted); font-weight: 600; font-size: 1.05rem;
	transition: color 0.25s var(--ease), padding-left 0.3s var(--ease);
}
.wk-rows .wk-row:last-child { border-bottom: 1px solid var(--light-line); }
.wk-row:hover { color: var(--light-ink); padding-left: 0.6rem; }
.wk-row.is-active { color: var(--light-ink); }
.wk-row.is-active .wk-row__name::before {
	content: ""; display: inline-block; width: 8px; height: 8px;
	border-radius: 50%; background: var(--accent);
	margin-right: 0.7rem; vertical-align: middle;
}
.wk-row__hint { font-size: 0.8rem; color: var(--light-muted); font-weight: 400; }

/* Grid: imagenes cuadradas, gaps Motto-like (x corto, y largo) */
.work-page__body { padding-top: var(--space-xl); }
.wk-grid { column-gap: var(--space-s); row-gap: var(--space-xl); }
.wk-card__media { aspect-ratio: 1 / 1; }
.wk-card__stack { display: grid; gap: 0.2rem; }
.wk-card__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-s); }
.wk-card__cat { text-transform: uppercase; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.05em; color: var(--light-ink); }
.wk-card__title { font-size: var(--fs-lg); }
.wk-card__tagline { margin-top: 0; }

/* =========================================================================
   V34 — /work/ hero editorial a la izquierda + dropdown flotante de filtro.
   ========================================================================= */

/* Hero claro alineado a la izquierda con (SCROLL) a la derecha */
.work-hero {
	min-height: 74vh;
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: var(--space-l);
	padding-top: clamp(7rem, 14vw, 10rem);
	padding-bottom: var(--space-l);
}
.work-hero__content { max-width: 62rem; }
.hero__badge--light { background: var(--light-bg-2); border-color: var(--light-line); color: var(--light-muted); }
.hero__badge--light .coords { color: #0aa06b; }
.hero__badge--light .sep { background: var(--light-line); }
.work-hero__title {
	font-size: clamp(2.4rem, 5.6vw, 4.6rem); font-weight: 700;
	letter-spacing: -0.03em; line-height: 1.05; color: var(--light-ink);
	margin-top: var(--space-m);
}
.work-hero__lead {
	color: var(--light-muted); font-size: var(--fs-lg);
	max-width: 54ch; margin-top: var(--space-s); margin-bottom: var(--space-m);
}
.work-hero .work-page__scroll { align-self: flex-end; padding-bottom: 0.5rem; }

/* Marquee y filas anteriores fuera */
.wkm, .wk-rows { display: none !important; }

/* --- Dropdown flotante abajo-izquierda --- */
.wk-dd { position: fixed; left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 85; }
.wk-dd__btn {
	display: flex; align-items: center; gap: 0.8rem;
	background: #FFFFFF; color: var(--light-ink);
	border: 1px solid var(--light-line);
	padding: 0.95rem 1.4rem; font-weight: 600; font-size: 0.95rem;
	box-shadow: 0 16px 40px -18px rgba(10, 13, 11, 0.35);
	cursor: pointer; min-width: 230px; justify-content: space-between;
}
.wk-dd__caret { transition: transform 0.3s var(--ease); font-size: 0.8rem; }
.wk-dd.is-open .wk-dd__caret { transform: rotate(180deg); }
.wk-dd__panel {
	position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 260px;
	background: #FFFFFF; border: 1px solid var(--light-line);
	box-shadow: 0 24px 60px -24px rgba(10, 13, 11, 0.4);
	opacity: 0; transform: translateY(8px); pointer-events: none;
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
	max-height: 60vh; overflow-y: auto;
}
.wk-dd.is-open .wk-dd__panel { opacity: 1; transform: none; pointer-events: auto; }
.wk-dd__item {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
	padding: 0.9rem 1.4rem; color: var(--light-muted); font-weight: 500; font-size: 0.92rem;
	border-bottom: 1px solid var(--light-line);
	transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.wk-dd__item:last-child { border-bottom: 0; }
.wk-dd__item:hover { background: var(--light-bg-2); color: var(--light-ink); }
.wk-dd__item.is-active { color: var(--light-ink); font-weight: 700; }
.wk-dd__item.is-active::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.wk-dd__item span { font-size: 0.78rem; color: var(--light-muted); }
@media (max-width: 640px) { .wk-dd__btn { min-width: 0; } }

/* V35 — dropdown de filtro redondeado (es un boton, no una card) */
.wk-dd__btn { border-radius: var(--radius-pill); }
.wk-dd__panel { border-radius: 18px; overflow: hidden; }

/* =========================================================================
   V36 — Nosotros: hero en B/N con fundido invisible hacia la seccion
   oscura + fotos de historia y equipo tambien en blanco y negro.
   ========================================================================= */
.about-hero__bg img { filter: grayscale(1) contrast(1.05); }
.about-hero--img::before {
	background:
		radial-gradient(60% 50% at 50% 10%, rgba(20, 241, 149, 0.08), transparent 60%),
		linear-gradient(
			180deg,
			rgba(10, 13, 11, 0.78) 0%,
			rgba(10, 13, 11, 0.45) 35%,
			rgba(10, 13, 11, 0.62) 62%,
			rgba(10, 13, 11, 0.92) 85%,
			#0A0D0B 100%
		);
}
.about-hero--img { padding-bottom: clamp(6rem, 12vw, 10rem); }

/* Historia y equipo en B/N */
.about-story__media img { filter: grayscale(1) contrast(1.05); }
.team-member__media img { filter: grayscale(1) contrast(1.05); }

/* =========================================================================
   V37 — Interna de proyecto alineada al sistema nuevo:
   labels con numero lima, boton lineal en la seccion oscura,
   ritmo por tokens (ya heredado) y detalles de consistencia.
   ========================================================================= */
.pj-label { color: var(--light-muted); }
.pj-label, .pj-detalles__label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.pj-label small { text-transform: none; letter-spacing: 0.02em; margin-top: 0.2rem; }
.pj-ficha .pj-label::first-line { color: #0aa06b; }

.pj-dark__line { color: var(--ink); font-size: 1rem; margin-top: var(--space-m); display: inline-flex; }
.pj-dark__line:hover { color: var(--ink); }
.pj-dark .pj-block h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }
.pj-blocks .pj-block h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }

.pj-related .sec-label::after { background: var(--line); }
.pj-related h2 { font-size: var(--fs-2xl); letter-spacing: -0.02em; margin-bottom: var(--space-l); }

/* Hero del proyecto: tagline y bottom con el ritmo del sistema */
.pj-hero__tagline { font-weight: 600; }
.pj-hero__bottom { font-size: 0.8rem; letter-spacing: 0.04em; }

/* =========================================================================
   V38 — REVERT de la pasada anterior en internas de proyecto:
   volvemos al look del clon fiel (labels y encabezados como estaban).
   ========================================================================= */
.pj-label, .pj-detalles__label {
	font-size: 0.72rem; letter-spacing: normal; text-transform: none;
	font-weight: 400; color: var(--light-muted);
}
.pj-ficha .pj-label::first-line { color: var(--light-muted); }
.pj-blocks .pj-block h2, .pj-dark .pj-block h2 {
	font-size: 0.85rem; text-transform: none; letter-spacing: normal; font-weight: 700;
}
.pj-hero__tagline { font-weight: 600; }

/* =========================================================================
   V39 — Interna de proyecto: galeria en par (dos imagenes lado a lado,
   dentro de la grilla) tras la ficha; luego full-bleed antes del oscuro.
   ========================================================================= */
.pj-gallery--pair { padding-block: var(--space-m) 0; }
.pj-gallery__pair { display: grid; gap: var(--space-s); grid-template-columns: 1fr; margin-top: 0; }
@media (min-width: 700px) { .pj-gallery__pair { grid-template-columns: 1fr 1fr; } }
.pj-gallery__pair img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1.05; }
.pj-gallery__main + .pj-gallery__main { margin-top: var(--space-s); }

/* =========================================================================
   V40 — Hero de proyecto sin marquee: imagen de fondo + titulo estatico
   y subtitulo, alineados a la izquierda.
   ========================================================================= */
.pj-hero { justify-content: flex-end; }
.pj-hero__content { padding-bottom: clamp(5rem, 12vh, 8rem); }
.pj-hero__title {
	font-size: clamp(2.6rem, 6.5vw, 5.5rem); font-weight: 700;
	letter-spacing: -0.03em; line-height: 1; color: #fff;
	text-transform: none; margin: 0 0 var(--space-s);
}
.pj-hero__tagline { margin-top: 0; }
.pj-hero__marquee, .pj-hero__marquee-track { display: none !important; }

/* =========================================================================
   V41 — Interna de proyecto con el sistema Andez:
   labels con numero lima, encabezados de bloque con "+", imagenes con
   aire lateral alineado a la grilla, oscuro diagramado, relacionados
   cuadrados y con flechas (unificado con el resto).
   ========================================================================= */

/* (01)/(02): numero lima + texto label del sistema */
.pj-label { font-size: 0.8rem; font-weight: 600; color: #0aa06b; }
.pj-label small {
	display: block; margin-top: 0.35rem;
	font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--light-muted);
}

/* Ficha: titulo editorial + detalles con jerarquia */
.pj-ficha__title { font-size: clamp(1.8rem, 3.2vw, 2.7rem); letter-spacing: -0.02em; }
.pj-ficha__intro { font-size: 0.95rem; line-height: 1.7; }
.pj-detalles__label { color: var(--light-muted); }
.pj-detalles__row dt { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; font-weight: 600; }
.pj-detalles__row dd { font-size: 0.85rem; }

/* Bloques Contexto/Desafio/Solucion/Resultados: encabezado con "+" lima */
.pj-block h2 { font-size: 0.95rem; font-weight: 700; }
.pj-block h2::before { content: "+"; color: #0aa06b; margin-right: 0.5rem; font-weight: 400; }
.pj-dark .pj-block h2::before { color: var(--accent); }

/* Resultados: cada linea respirada */
.pj-dark .pj-block p { line-height: 2; }

/* Imagenes full-bleed CON aire lateral alineado a la grilla */
.pj-gallery__main {
	padding-inline: max(var(--gutter), calc((100vw - 1460px) / 2));
}

/* Relacionados: cuadrados + mismo look que el resto de carruseles */
.pj-related .project-card { width: clamp(260px, 30vw, 430px); }
.pj-related .project-card__media { aspect-ratio: 1 / 1; }
.pj-related .carousel-arrow { top: 42%; }

/* =========================================================================
   V42 — Resultados como bullets del sistema: "+" lima, lineas finas.
   ========================================================================= */
.pj-results { display: grid; margin: 0; }
.pj-results li {
	position: relative;
	padding: 0.75rem 0 0.75rem 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--ink); font-size: 0.9rem; line-height: 1.5;
}
.pj-results li:first-child { border-top: 0; padding-top: 0.2rem; }
.pj-results li::before {
	content: "+"; position: absolute; left: 0; top: 0.7rem;
	color: var(--accent); font-weight: 400;
}
.pj-results li:first-child::before { top: 0.15rem; }

/* =========================================================================
   V43 — /servicios/: imagen de corte full-bleed con aire lateral.
   ========================================================================= */
.svc-break { background: var(--bg); padding-block: var(--space-l); }
.svc-break__media {
	margin: 0;
	padding-inline: max(var(--gutter), calc((100vw - 1460px) / 2));
}
.svc-break__media img { width: 100%; height: auto; }

/* V44 — /servicios/: imagen de corte full-bleed sin padding, alto 100svh */
.svc-break { padding-block: 0; }
.svc-break__media { padding-inline: 0; }
.svc-break__media img {
	width: 100vw; height: 100svh; object-fit: cover; display: block;
}

/* =========================================================================
   V45 — FIX: la imagen del hero de proyecto quedaba tapada por el fondo
   opaco que pinta el footer-reveal (mismo bug del hero del home).
   Reordenamos las capas con z-index positivos e isolation.
   ========================================================================= */
.pj-hero { isolation: isolate; }
.pj-hero__bg { z-index: 0; }
.pj-hero::after { z-index: 1; }
.pj-hero__content { position: relative; z-index: 2; }
.pj-hero__bottom { z-index: 2; }

/* =========================================================================
   V46 — NAVBAR definitiva:
   - Siempre visible (sin ocultarse al bajar).
   - mix-blend-mode: difference -> el logo/controles se auto-invierten
     segun el fondo (blanco sobre oscuro, negro sobre claro).
   - Wordmark al inicio -> simbolo al scrollear (crossfade).
   - Menu tipo panel flotante (tarjeta blanca arriba-derecha) con hora
     local, enlaces grandes, contador de proyectos, sociales y correo.
   ========================================================================= */

/* --- Header fijo, siempre presente, con blend en los controles --- */
.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 96;
	background: transparent !important;
	border: 0 !important;
	backdrop-filter: none !important;
}
.site-header.is-hidden { transform: none !important; }
.site-header.is-scrolled { background: transparent !important; backdrop-filter: none !important; }
.site-header__inner {
	mix-blend-mode: difference;
	min-height: 74px;
}

/* --- Logos: blanco forzado (el blend hace el resto) + swap al scroll --- */
.site-brand__link { position: relative; display: inline-flex; align-items: center; }
.brand-word, .brand-icon {
	filter: brightness(0) invert(1);
	transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
	display: block; width: auto;
}
.brand-word { height: 26px; }
.brand-icon { height: 34px; position: absolute; left: 0; opacity: 0; transform: scale(0.7) rotate(-8deg); }
.site-header.is-scrolled .brand-word { opacity: 0; transform: scale(0.94); }
.site-header.is-scrolled .brand-icon { opacity: 1; transform: none; }

/* --- Controles en blanco puro (el blend los invierte donde toque) --- */
.lang-switch { color: rgba(255, 255, 255, 0.55); }
.lang-switch strong { color: #FFFFFF; }
.nav-toggle__bar { background: #FFFFFF; }

/* --- Scrim --- */
.nav-scrim {
	position: fixed; inset: 0; z-index: 97;
	background: rgba(10, 13, 11, 0.45);
	opacity: 0; pointer-events: none;
	transition: opacity 0.35s var(--ease);
}

/* --- Panel flotante --- */
.nav-panel {
	position: fixed; top: 14px; right: 14px; z-index: 98;
	width: min(560px, calc(100vw - 28px));
	background: #FFFFFF; color: var(--light-ink);
	border-radius: 22px;
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55);
	padding: clamp(1.4rem, 3vw, 2.2rem);
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "top top" "links side" "mail side";
	gap: var(--space-m) var(--space-l);
	opacity: 0; transform: translateY(-14px) scale(0.97);
	transform-origin: top right;
	pointer-events: none;
	transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
	max-height: calc(100vh - 28px); overflow-y: auto;
}
.site-header:has(.site-nav.is-open) .nav-panel { opacity: 1; transform: none; pointer-events: auto; }
.site-header:has(.site-nav.is-open) .nav-scrim { opacity: 1; pointer-events: auto; }

.nav-panel__top {
	grid-area: top;
	display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s);
	font-size: 0.85rem; color: var(--light-muted);
}
.nav-panel__loc strong { color: var(--light-ink); font-weight: 600; margin-left: 0.3em; }
.nav-panel__close {
	background: none; border: 0; cursor: pointer;
	font-size: 0.85rem; font-weight: 600; color: var(--light-ink);
	display: inline-flex; align-items: center; gap: 0.5em;
}
.nav-panel__close span {
	width: 30px; height: 30px; border: 1px solid var(--light-line); border-radius: 50%;
	display: inline-grid; place-items: center; font-size: 0.75rem;
	transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.nav-panel__close:hover span { background: var(--light-ink); color: #fff; }

.nav-panel__links { grid-area: links; display: grid; gap: 0.2rem; }
.nav-panel__links a {
	font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 600; letter-spacing: -0.02em;
	color: var(--light-ink); line-height: 1.3; display: inline-flex; align-items: flex-start;
	transition: opacity 0.2s var(--ease);
}
.nav-panel__links a:hover { opacity: 0.45; }
.nav-count {
	font-size: 0.7rem; font-weight: 500; color: var(--light-muted);
	border: 1px solid var(--light-line); border-radius: 999px;
	padding: 0.12rem 0.5rem; margin-left: 0.45rem; margin-top: 0.5rem;
}

.nav-panel__side {
	grid-area: side; align-self: end;
	display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-end;
}
.nav-panel__side a { font-size: 0.85rem; font-weight: 500; color: var(--light-ink); }
.nav-panel__side a:hover { color: var(--light-muted); }
.nav-panel__side span, .nav-panel__mail span { color: var(--light-muted); font-size: 0.8em; }

.nav-panel__mail { grid-area: mail; align-self: end; font-size: 0.9rem; font-weight: 500; color: var(--light-ink); }
.nav-panel__mail:hover { color: var(--light-muted); }

@media (max-width: 560px) {
	.nav-panel { grid-template-columns: 1fr; grid-template-areas: "top" "links" "side" "mail"; }
	.nav-panel__side { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 1rem; }
}

/* Compensacion: el header ya no reserva alto (fixed + blend) — igual que antes (absolute), sin cambios de layout necesarios. */

/* =========================================================================
   V47 — Sistema unificado de formularios:
   mensajes personalizados, textarea del sistema, pagina de contacto
   con el mismo lenguaje (chips + subrayados) en claro.
   ========================================================================= */

/* Mensajes de feedback */
.form-msg {
	padding: 0.9rem 1.2rem; margin-bottom: var(--space-s);
	font-size: 0.92rem; font-weight: 500; border-left: 3px solid;
}
.form-msg--ok { background: rgba(20, 241, 149, 0.1); border-color: #0aa06b; color: #0a6b4a; }
.form-msg--error { background: rgba(220, 60, 60, 0.08); border-color: #c0392b; color: #8e2b20; }
.site-footer .form-msg--ok { color: var(--accent); background: rgba(20, 241, 149, 0.08); }
.site-footer .form-msg--error { color: #ff9b8f; }

/* Textarea del sistema (subrayado como los inputs) */
.cc-field textarea {
	background: transparent; border: 0; border-bottom: 1px solid rgba(10, 13, 11, 0.35);
	border-radius: 0; padding: 0.6rem 0; color: var(--light-ink); font-size: 1rem;
	resize: vertical; min-height: 90px;
	transition: border-color 0.25s var(--ease);
}
.cc-field textarea:focus { outline: none; border-bottom-color: var(--light-ink); }

/* Campos invalidos */
[aria-invalid="true"] { border-bottom-color: #c0392b !important; }

/* Boton bloqueado durante envio */
button[disabled].btn { opacity: 0.65; cursor: wait; transform: none !important; }

/* Pagina de contacto en claro con el sistema */
.contact-page2 { background: var(--light-bg); color: var(--light-ink); }
.contact-page2__grid {
	display: grid; gap: var(--space-xl); grid-template-columns: 1fr;
	padding-top: clamp(7rem, 14vw, 10rem); padding-bottom: var(--space-xl);
	align-items: start;
}
@media (min-width: 960px) { .contact-page2__grid { grid-template-columns: 1fr 1.15fr; } }
.contact-page2__title {
	font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700;
	letter-spacing: -0.03em; line-height: 1.05; color: var(--light-ink);
}
.contact-page2__lead { color: var(--light-muted); font-size: var(--fs-lg); max-width: 46ch; margin-top: var(--space-s); }
.contact-page2__channels { display: grid; gap: 0; margin-top: var(--space-l); max-width: 420px; }
.contact-page2__channels li {
	display: flex; justify-content: space-between; gap: var(--space-s);
	padding-block: 0.9rem; border-bottom: 1px solid var(--light-line);
}
.contact-page2__channels span { color: var(--light-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.contact-page2__channels a { color: var(--light-ink); font-weight: 500; }
.contact-page2__channels a:hover { color: var(--light-muted); }
body.has-footer-reveal .site-main > .contact-page2 { background-color: var(--light-bg); }

/* =========================================================================
   V48 — Blog editorial + marca del footer con el logo SVG.
   ========================================================================= */

/* Footer: logo tipografico gigante alineado a la derecha, en blanco */
.site-footer__marklogo {
	display: block; margin-left: auto;
	width: min(70vw, 760px); height: auto;
	filter: brightness(0) invert(1);
	margin-bottom: var(--space-l);
}

/* --- Blog archivo --- */
.blog-page { background: var(--light-bg); color: var(--light-ink); }
.blog-page__head { padding-top: clamp(7rem, 14vw, 10rem); padding-bottom: var(--space-l); }
.blog-page__title {
	font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700;
	letter-spacing: -0.03em; line-height: 1.05; color: var(--light-ink);
}
.blog-page__lead { color: var(--light-muted); font-size: var(--fs-lg); max-width: 52ch; margin-top: var(--space-s); }
.blog-page .container { padding-bottom: var(--space-xl); }

.bl-list { display: grid; gap: var(--space-xl) var(--space-m); grid-template-columns: 1fr; }
@media (min-width: 760px) { .bl-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .bl-list { grid-template-columns: repeat(3, 1fr); } }

.bl-card { border: 0; background: transparent; }
.bl-card__link { display: block; color: inherit; }
.bl-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--light-bg-2); }
.bl-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.bl-card:hover .bl-card__media img { transform: scale(1.04); }
.bl-card__body { padding-top: var(--space-s); display: grid; gap: 0.6rem; justify-items: start; }
.bl-card__meta { display: flex; align-items: center; gap: 0.9rem; font-size: 0.78rem; color: var(--light-muted); }
.bl-card__cat {
	font-weight: 600; color: var(--light-ink);
	border: 1px solid var(--light-line); border-radius: 999px;
	padding: 0.2rem 0.7rem;
}
.bl-card__title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; color: var(--light-ink); line-height: 1.2; }
.bl-card__excerpt { color: var(--light-muted); font-size: 0.9rem; }
.bl-card .btn--line { font-size: 0.85rem; }

/* Destacado: ancho completo en dos columnas */
.bl-card--featured { grid-column: 1 / -1; }
.bl-card--featured .bl-card__link { display: grid; gap: var(--space-m); }
@media (min-width: 900px) {
	.bl-card--featured .bl-card__link { grid-template-columns: 1.25fr 1fr; align-items: center; }
}
.bl-card--featured .bl-card__media { aspect-ratio: 16 / 9; }
.bl-card--featured .bl-card__title { font-size: clamp(1.6rem, 3.2vw, 2.6rem); }
.bl-card--featured .bl-card__excerpt { font-size: 1rem; }

.blog-page .pagination .page-numbers { border-color: var(--light-line); color: var(--light-ink); }
.blog-page .pagination .current { background: var(--light-ink); color: #fff; border-color: var(--light-ink); }

/* --- Entrada individual --- */
.post-light { background: var(--light-bg); color: var(--light-ink); }
.post-light .container--narrow { max-width: 880px; padding-top: clamp(7rem, 14vw, 10rem); padding-bottom: var(--space-xl); }
.post-light__title {
	font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 700;
	letter-spacing: -0.03em; line-height: 1.08; color: var(--light-ink);
	margin-top: var(--space-s);
}
.post-light__lead { color: var(--light-muted); font-size: var(--fs-lg); margin-top: var(--space-s); max-width: 60ch; }
.post-light__hero { margin: var(--space-l) 0; }
.post-light__hero img { width: 100%; height: auto; }
.post-light__foot { margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--light-line); }

.prose--light { color: var(--light-ink); max-width: none; }
.prose--light h2 { color: var(--light-ink); font-size: var(--fs-xl); margin-top: var(--space-l); letter-spacing: -0.02em; }
.prose--light h3 { color: var(--light-ink); }
.prose--light p, .prose--light li { color: var(--light-muted); font-size: 1.02rem; line-height: 1.8; }
.prose--light li strong, .prose--light p strong { color: var(--light-ink); }
.prose--light a { color: var(--light-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose--light a:hover { color: #0aa06b; }
.prose--light ul { list-style: none; padding-left: 0; }
.prose--light ul li { position: relative; padding-left: 1.4rem; }
.prose--light ul li::before { content: "+"; position: absolute; left: 0; color: #0aa06b; }
body.has-footer-reveal .site-main > .blog-page,
body.has-footer-reveal .site-main > .post-light { background-color: var(--light-bg); }

/* =========================================================================
   V49 — Identity® premium + Checklist Identity® (herramienta de diagnostico)
   ========================================================================= */

/* --- Identity: bloques "que hace" --- */
.idwhat__step { min-height: 190px; }
.idwhat .method__grid, .idpage .method__grid { background: var(--light-line); border-color: var(--light-line); }
.idpage .method-step { background: var(--light-bg); }
.idpage .method-step:hover { background: var(--light-bg-2); }
.idpage .method-step__name { color: var(--light-ink); }

/* Chips del hero como etiquetas (no clicables) */
.idpage .sel-chip { cursor: default; }
.idpage .sel-chip:hover { transform: none; color: var(--ink); border-color: var(--line); }

/* --- Comparativa: 3 cards premium en oscuro --- */
.idcompare { background: var(--bg); }
.idcompare__grid { display: grid; gap: var(--space-s); grid-template-columns: 1fr; margin-top: var(--space-l); }
@media (min-width: 800px) { .idcompare__grid { grid-template-columns: repeat(3, 1fr); } }
.idcompare__card {
	background: #0D110E; border: 1px solid var(--line);
	padding: var(--space-l) var(--space-m);
	display: grid; gap: 0.6rem; color: var(--ink);
	transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.idcompare__card:hover { border-color: rgba(20, 241, 149, 0.5); transform: translateY(-4px); color: var(--ink); }
.idcompare__num { font-size: 0.75rem; color: var(--accent); }
.idcompare__card h3 { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
.idcompare__card p { color: var(--muted); font-size: 0.9rem; }

/* Camino en las cards de proyectos Identity */
.idproj__camino { color: #0aa06b; border: 1px solid var(--light-line); border-radius: 999px; padding: 0.2rem 0.7rem; text-transform: none; }

/* --- Banner checklist --- */
.idcheck { background: var(--bg); border-top: 1px solid var(--line); }
.idcheck .section__lead { max-width: 56ch; }

/* =========================================================================
   CHECKLIST IDENTITY® — experiencia por pasos
   ========================================================================= */
.ck { background: var(--bg); min-height: 100vh; }
.ck__wrap { padding-top: clamp(7rem, 13vw, 9rem); padding-bottom: var(--space-xl); max-width: 900px; }

.ck__progress { height: 2px; background: var(--line); margin-bottom: var(--space-l); }
.ck__bar { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.4s var(--ease); }

.ck-screen { display: none; }
.ck-screen.is-active { display: block; animation: ck-in 0.4s var(--ease); }
@keyframes ck-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.ck__title { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.ck__lead { color: var(--muted); font-size: var(--fs-lg); max-width: 56ch; margin-top: var(--space-s); }
.ck__meta { font-size: 0.8rem; color: var(--muted); margin: var(--space-m) 0; letter-spacing: 0.03em; }

.ck__step-label { font-size: 0.78rem; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; margin-bottom: var(--space-s); }
.ck__question { font-size: clamp(1.5rem, 3.2vw, 2.3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; max-width: 26ch; }

/* Campos de contacto (sistema cc- sobre oscuro) */
.ck__fields { display: grid; gap: var(--space-m) var(--space-l); grid-template-columns: 1fr; margin-top: var(--space-l); }
@media (min-width: 640px) { .ck__fields { grid-template-columns: 1fr 1fr; } }
.ck .cc-field label { color: var(--ink); }
.ck .cc-field input {
	border-bottom-color: rgba(255, 255, 255, 0.3); color: var(--ink);
}
.ck .cc-field input:focus { border-bottom-color: var(--accent); }

/* Opciones de respuesta */
.ck__options { display: grid; gap: 0.8rem; margin-top: var(--space-l); max-width: 560px; }
.ck-opt {
	text-align: left; background: #0D110E; border: 1px solid var(--line);
	color: var(--ink); font-size: 1.05rem; font-weight: 500;
	padding: 1.1rem 1.4rem; cursor: pointer;
	transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.15s var(--ease);
}
.ck-opt:hover { border-color: var(--accent); transform: translateX(4px); }
.ck-opt.is-picked { border-color: var(--accent); background: rgba(20, 241, 149, 0.08); }
.ck-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ck__nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-l); }
.ck__back { color: var(--muted); font-size: 0.85rem; }
.ck__back:hover { color: var(--ink); }

/* --- Resultado tipo mini dashboard --- */
.ck-result { display: grid; gap: var(--space-l); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .ck-result { grid-template-columns: 260px 1fr; } }

.ck-result__score { position: relative; width: 220px; margin-inline: auto; }
.ck-ring { width: 100%; transform: rotate(-90deg); }
.ck-ring circle { fill: none; stroke-width: 7; }
.ck-ring__track { stroke: var(--line); }
.ck-ring__fill { stroke: var(--accent); stroke-linecap: round; }
.ck-result__num {
	position: absolute; inset: 0; display: grid; place-items: center;
	font-size: 3.2rem; font-weight: 700; letter-spacing: -0.03em;
}
.ck-result__num small { font-size: 0.85rem; color: var(--muted); font-weight: 500; margin-top: 2.6rem; position: absolute; }

.ck-result__level { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; }
.ck-result__reading { color: var(--muted); font-size: 1rem; margin-top: var(--space-s); max-width: 56ch; }

.ck-result__cols { display: grid; gap: var(--space-l); grid-template-columns: 1fr; margin-top: var(--space-l); }
@media (min-width: 700px) { .ck-result__cols { grid-template-columns: 1fr 1fr; } }
.ck-result .cc-label { color: var(--accent); }

.ck-result__path {
	margin-top: var(--space-l); padding: var(--space-m);
	background: #0D110E; border: 1px solid rgba(20, 241, 149, 0.35);
}
.ck-result__pathname { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: -0.02em; color: var(--accent); }
.ck-result__pathdesc { color: var(--ink); margin-top: 0.5rem; max-width: 56ch; }
.ck-result__extra { color: var(--muted); font-size: 0.85rem; margin-top: var(--space-s); }

.ck-result__ctas { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-l); }
.ck__legal { font-size: 0.75rem; color: var(--muted); opacity: 0.7; margin-top: var(--space-m); max-width: 60ch; }

/* =========================================================================
   V50 — FIX navbar sobre fondo blanco:
   El blend estaba en .site-header__inner, aislado dentro del contexto del
   header -> nunca veia la pagina y el blanco quedaba invisible en claro.
   Ahora el blend va en el HEADER (nivel raiz, si ve la pagina) y el panel
   y el scrim viven fuera del header (no se ven afectados por el blend).
   ========================================================================= */
.site-header { mix-blend-mode: difference; }
.site-header__inner { mix-blend-mode: normal; }

/* El panel y el scrim ahora son hermanos del header */
body:has(.site-nav.is-open) .nav-panel { opacity: 1; transform: none; pointer-events: auto; }
body:has(.site-nav.is-open) .nav-scrim { opacity: 1; pointer-events: auto; }

/* =========================================================================
   V51 — Identity® rediagramada:
   manifiesto en dos columnas (label | contenido), caminos sin sticky
   (no se cortan) con CTA visible y 3 columnas claras, banner checklist
   tipo panel con anillo de muestra.
   ========================================================================= */

/* --- Manifiesto / Problema: label izquierda + contenido derecha --- */
.idmani__grid { display: grid; gap: var(--space-l); grid-template-columns: 1fr; }
@media (min-width: 860px) { .idmani__grid { grid-template-columns: 200px 1fr; } }
.idmani .pj-label small { margin-top: 0.4rem; }
.idmani__text { margin-top: var(--space-l); max-width: 62ch; display: grid; gap: var(--space-s); }
.idmani__text p { color: var(--muted); font-size: 1.02rem; line-height: 1.75; }
.idmani__text p strong { color: var(--ink); }
.idmani__text--light p { color: var(--light-muted); }
.idmani__text--light p strong { color: var(--light-ink); }

/* --- Caminos: paneles full-bleed SIN sticky (contenido nunca se corta) --- */
.idcam-list { margin-top: var(--space-l); }
.idcam { width: 100vw; margin-left: calc(50% - 50vw); background: var(--light-bg); }
.idcam:nth-child(even) { background: var(--light-bg-2); }
.idcam__inner {
	padding-block: clamp(2.5rem, 6vw, 5rem);
	padding-inline: max(var(--gutter), calc((100vw - 1460px) / 2));
}
.idcam__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-s); }
.idcam__name {
	font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 700;
	letter-spacing: -0.035em; line-height: 0.95; color: var(--light-ink); margin: 0;
}
.idcam__idx { font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 400; line-height: 0.95; color: var(--light-ink); }
.idcam__divider { border-top: 1px solid rgba(10, 13, 11, 0.16); margin-block: clamp(1.4rem, 3.5vw, 2.8rem); }

.idcam__grid { display: grid; gap: var(--space-l); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .idcam__grid { grid-template-columns: 1.3fr 0.85fr 0.85fr; } }

.idcam__frase {
	font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 600;
	letter-spacing: -0.015em; line-height: 1.35; color: var(--light-ink);
	max-width: 26ch; margin: 0 0 var(--space-s);
}
.idcam__desc { color: var(--light-muted); font-size: 0.95rem; line-height: 1.7; max-width: 46ch; margin: 0 0 var(--space-m); }
.idcam__cta { margin-top: var(--space-s); }

.idcam__list { display: grid; margin: 0; }
.idcam__list li {
	font-size: 0.85rem; color: var(--light-ink);
	padding: 0.5rem 0; border-top: 1px solid rgba(10, 13, 11, 0.12);
}
.idcam__list li:first-child { border-top: 0; padding-top: 0; }

/* Comparativa sobre claro */
.idcompare__grid { margin-top: var(--space-xl); }
.idcompare__card--light { background: var(--light-bg); border-color: var(--light-line); color: var(--light-ink); }
.idcompare__card--light:hover { border-color: #0aa06b; color: var(--light-ink); }
.idcompare__card--light p { color: var(--light-muted); }
.idcompare__card--light .idcompare__num { color: #0aa06b; }

/* Tag de camino en el carrusel de proyectos */
.idcam__tag {
	font-size: 0.65rem; font-weight: 600; color: var(--accent);
	border: 1px solid rgba(20, 241, 149, 0.4); border-radius: 999px;
	padding: 0.15rem 0.55rem; margin-left: 0.5rem; vertical-align: middle;
	letter-spacing: 0.02em;
}

/* --- Banner checklist: panel con anillo de muestra --- */
.idcheck2 { background: var(--bg); }
.idcheck2__panel {
	display: grid; gap: var(--space-l); grid-template-columns: 1fr;
	background: #0D110E; border: 1px solid var(--line);
	padding: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
@media (min-width: 900px) { .idcheck2__panel { grid-template-columns: 1.4fr 0.8fr; } }
.idcheck2__title { font-size: clamp(1.8rem, 3.8vw, 2.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }
.idcheck2__lead { color: var(--muted); margin-top: var(--space-s); max-width: 52ch; }
.idcheck2__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); margin-top: var(--space-m); }
.idcheck2__ctas .btn--line { color: var(--ink); }

.idcheck2__visual { display: grid; justify-items: center; gap: var(--space-s); }
.idcheck2__ring { position: relative; width: min(240px, 60vw); }
.idcheck2__ring svg { width: 100%; transform: rotate(-90deg); }
.idcheck2__ring circle { fill: none; stroke-width: 7; }
.idcheck2__fill {
	stroke: var(--accent); stroke-linecap: round;
	stroke-dasharray: 326.7; stroke-dashoffset: 45.7; /* 86% */
}
.idcheck2__score {
	position: absolute; inset: 0; display: grid; place-items: center;
	font-size: 3rem; font-weight: 700; letter-spacing: -0.03em;
}
.idcheck2__score small { font-size: 0.8rem; color: var(--muted); font-weight: 500; position: absolute; margin-top: 3.4rem; }
.idcheck2__caption { font-size: 0.8rem; color: var(--muted); }

/* =========================================================================
   V52 — Servicios® con la estructura Identity: contenido real dentro
   del layout editorial de dos columnas.
   ========================================================================= */
.svcpage__prose { margin-top: 0; }
.svcpage__prose h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -0.02em; margin-top: var(--space-l); }
.svcpage__prose h2:first-child { margin-top: 0; }
.svcpage__prose h3 { font-size: var(--fs-lg); margin-top: var(--space-m); }
.svcpage__prose h3 .num { color: #0aa06b; margin-right: 0.4rem; }
.svcpage__prose .btn { margin-top: var(--space-s); }
.svcpage__prose p a.btn.btn--accent { color: var(--accent-ink); text-decoration: none; }
.idwhat .method-step__name { text-transform: none; }

/* =========================================================================
   V53 — Servicios® premium: capítulos editoriales auto-diagramados
   (h2 → capítulo dos columnas, pasos 01-05 → grid de bloques, CTAs vivos),
   hero con imagen propia + imagen de corte full-bleed.
   ========================================================================= */

/* Capítulos alternados */
.svcchap { }
.svcchap--alt { background: var(--light-bg-2); }
.svcchap__title { margin-bottom: var(--space-m); max-width: 24ch; }
.svcchap__body > * + * { margin-top: var(--space-m); }

/* Texto editorial dentro del capítulo */
.svcchap__text { margin-top: var(--space-m); }
.svcchap__text p { max-width: 62ch; }

/* Subtítulos intermedios (h3 sin número) */
.svcchap__sub {
	font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.015em;
	color: var(--light-ink); margin-top: var(--space-l); max-width: 30ch;
}

/* Pasos del sistema como grid de bloques */
.svcchap__steps { margin-top: var(--space-m); }
.svcchap__stepname { text-transform: none; font-size: 1.05rem; }
.svcchap__stepdesc { color: var(--light-muted); font-size: 0.88rem; line-height: 1.65; margin: 0; }
.svcchap .method-step { min-height: 190px; }

/* CTA dentro del capítulo */
.svcchap__cta { margin-top: var(--space-m); }
.svcchap__cta .btn { text-decoration: none; }
.svcchap__cta p { margin: 0; }

/* El hero del servicio usa su imagen propia — un poco más de velo para leer */
.svcpage .hero--home::before { background:
	radial-gradient(70% 55% at 50% 0%, rgba(20, 241, 149, 0.08), transparent 65%),
	linear-gradient(180deg, rgba(10, 13, 11, 0.8), rgba(10, 13, 11, 0.55) 55%, var(--bg) 96%); }

/* =========================================================================
   V54 — Identity® afinada: manifiesto alineado a las esquinas,
   "Por qué elegir" en dos columnas con imagen B/N, caminos como
   comparativa de 3 columnas tipo planes.
   ========================================================================= */

/* --- (01) Manifiesto: label en la esquina izquierda, contenido en la derecha --- */
.idmani--corners .idmani__grid { grid-template-columns: 200px 1fr; }
.idmani--corners .idmani__content { justify-self: end; max-width: 680px; }
@media (max-width: 859px) {
	.idmani--corners .idmani__grid { grid-template-columns: 1fr; }
	.idmani--corners .idmani__content { justify-self: start; }
}

/* --- (02) Por qué elegir Identity®: texto | imagen B/N --- */
.idwhy__grid { display: grid; gap: var(--space-l); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 960px) { .idwhy__grid { grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 5vw, 5rem); } }
.idwhy__intro { color: var(--light-muted); margin-top: var(--space-s); max-width: 46ch; }
.idwhy__steps { margin-top: var(--space-l); display: grid; }
.idwhy__step {
	display: grid; grid-template-columns: 64px 1fr; gap: var(--space-s);
	padding-block: var(--space-m); border-top: 1px solid rgba(10, 13, 11, 0.14);
}
.idwhy__step:first-child { border-top: 0; padding-top: 0; }
.idwhy__num { font-size: 0.78rem; color: #0aa06b; padding-top: 0.25rem; }
.idwhy__name { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.015em; color: var(--light-ink); margin-bottom: 0.5rem; }
.idwhy__desc { color: var(--light-muted); font-size: 0.94rem; line-height: 1.7; max-width: 52ch; margin: 0; }
.idwhy__cta { margin-top: var(--space-m); color: var(--light-ink); }

.idwhy__media { position: relative; min-height: 420px; }
.idwhy__media img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; filter: grayscale(1) contrast(1.04);
}
@media (max-width: 959px) { .idwhy__media { min-height: 340px; } }

/* --- (03) Caminos: comparativa 3 columnas tipo planes --- */
.idplan__row {
	display: grid; gap: 1px; background: rgba(10, 13, 11, 0.14);
	border: 1px solid rgba(10, 13, 11, 0.14);
	grid-template-columns: 1fr; margin-top: var(--space-l);
}
@media (min-width: 900px) { .idplan__row { grid-template-columns: repeat(3, 1fr); } }
.idplan {
	background: var(--light-bg); padding: clamp(1.6rem, 3vw, 2.4rem);
	display: flex; flex-direction: column;
	transition: background 0.3s var(--ease);
}
.idplan:hover { background: var(--light-bg-2); }
.idplan__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2xs); }
.idplan__idx { font-size: 0.78rem; color: #0aa06b; order: 2; }
.idplan__name { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 700; letter-spacing: -0.025em; color: var(--light-ink); }
.idplan__frase { color: var(--light-ink); font-weight: 600; font-size: 0.98rem; line-height: 1.45; margin-top: var(--space-s); min-height: 3.2em; }
.idplan__desc { color: var(--light-muted); font-size: 0.9rem; line-height: 1.65; margin-top: var(--space-2xs); }
.idplan__label { margin-top: var(--space-m); margin-bottom: var(--space-2xs); }
.idplan__inc { flex: 1; }
.idplan__cta { margin-top: var(--space-m); align-self: flex-start; }

/* --- Checklist: la intro es un hero como el home (patrón para todos los checklists) --- */
.ck-hero.is-active { display: block; }
.ck-hero .ck__meta { margin-top: var(--space-s); }
.ck:has(.ck-hero.is-active) .ck__wrap { display: none; } /* sin línea de progreso fantasma bajo el hero */

/* --- V54.1: caminos afinados — incluye con checks, sin "ideal para",
       CTA de sistema personalizado bajo la comparativa --- */
.idplan__inc { display: grid; gap: 0.15rem; margin: 0; flex: 1; }
.idplan__inc li {
	position: relative; padding: 0.32rem 0 0.32rem 1.6rem;
	font-size: 0.88rem; color: var(--light-ink); border: 0;
}
.idplan__inc li::before {
	content: "✓"; position: absolute; left: 0; top: 0.28rem;
	color: #0aa06b; font-weight: 700; font-size: 0.9rem;
}

.idplan__custom {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: var(--space-s) var(--space-m);
	margin-top: var(--space-l); padding: var(--space-m);
	border: 1px solid rgba(10, 13, 11, 0.14);
}
.idplan__custom-text { color: var(--light-muted); font-size: 0.95rem; margin: 0; }
.idplan__custom-cta { color: var(--light-ink); font-weight: 600; }

/* --- V55: Care® — pill de membresía en la comparativa --- */
.idplan__pill {
	align-self: flex-start;
	font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
	color: #0aa06b; border: 1px solid rgba(10, 160, 107, 0.35); border-radius: 999px;
	padding: 0.28rem 0.75rem; margin-bottom: var(--space-s);
}

/* --- V56: Engage® — sección IA + automatización (oscura) con chips de socios --- */
.aihub { background: var(--bg); }
.aihub__intro { color: var(--muted); margin-top: var(--space-s); max-width: 58ch; line-height: 1.7; }
.aihub__intro strong { color: var(--ink); }
.aihub__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--space-m); }
.aihub__chips span {
	font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
	color: var(--accent); border: 1px solid rgba(20, 241, 149, 0.35);
	border-radius: 999px; padding: 0.35rem 0.9rem;
}
.aihub__grid { margin-top: var(--space-l); }
.idpage .aihub__step { background: #0D110E; }
.idpage .aihub__step:hover { background: #10150F; }
.idpage .aihub .method-step__name { color: var(--ink); text-transform: none; font-size: 1.05rem; }
.aihub__desc { color: var(--muted); font-size: 0.88rem; line-height: 1.65; margin: 0; }
.aihub__cta { margin-top: var(--space-l); }

/* --- V56.1: comparativa de pauta en 2 columnas (Engage®) --- */
@media (min-width: 900px) { .idplan__row--2 { grid-template-columns: repeat(2, 1fr); } }

/* --- V57: Intelligence® — automatizaciones como filas editoriales (Motto
       /programs): logo de la herramienta en opacidad | nombre | desc | CTA --- */
.aiflow-list { margin-top: var(--space-l); border-top: 1px solid var(--line); }
.aiflow {
	display: grid; gap: var(--space-s) var(--space-m);
	grid-template-columns: 1fr; align-items: center;
	padding-block: clamp(1.8rem, 4vw, 3rem);
	border-bottom: 1px solid var(--line);
}
@media (min-width: 960px) {
	.aiflow { grid-template-columns: 120px 1.1fr 1.6fr auto; gap: var(--space-l); }
}

.aiflow__logo { display: grid; gap: 0.6rem; justify-items: start; }
.aiflow__logo img {
	width: 52px; height: 52px; object-fit: contain;
	opacity: 0.4; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.aiflow:hover .aiflow__logo img { opacity: 1; transform: scale(1.06); }
.aiflow__tool { font-size: 0.68rem; letter-spacing: 0.05em; color: var(--muted); opacity: 0.7; }

.aiflow__head { display: grid; gap: 0.5rem; align-content: start; }
.aiflow__num { font-size: 0.75rem; color: var(--accent); }
.aiflow__name { font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }

.aiflow__desc { color: var(--muted); font-size: 0.93rem; line-height: 1.7; max-width: 52ch; margin: 0; }
.aiflow__link { color: var(--ink); font-weight: 600; white-space: nowrap; justify-self: start; }
@media (min-width: 960px) { .aiflow__link { justify-self: end; } }

/* --- FIX: en el panel del menú (fondo blanco) el hover heredaba
       color:var(--ink) blanco desde .menu--primary → links invisibles.
       El hover del panel solo baja opacidad, siempre en tinta oscura. --- */
.nav-panel .menu--primary a,
.nav-panel .menu--primary a:hover,
.nav-panel .menu--primary .current-menu-item > a {
	color: var(--light-ink);
}

/* =========================================================================
   V58 — Blog interno estilo Motto: banner con la imagen destacada y el
   título dentro + lectura con aside sticky (autor, categoría, compartir).
   ========================================================================= */
.bl-hero {
	position: relative; overflow: hidden; background: var(--bg);
	min-height: min(78svh, 720px);
	display: flex; align-items: flex-end;
}
.bl-hero__bg { position: absolute; inset: 0; }
.bl-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.bl-hero::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(10, 13, 11, 0.35) 0%, rgba(10, 13, 11, 0.15) 40%, rgba(10, 13, 11, 0.82) 100%);
}
.bl-hero__inner { position: relative; z-index: 2; padding-block: clamp(6rem, 10vw, 8rem) clamp(2.5rem, 5vw, 4rem); }
.bl-hero__meta { margin-bottom: var(--space-s); }
.bl-hero .bl-card__cat { color: #fff; border-color: rgba(255, 255, 255, 0.45); background: rgba(10, 13, 11, 0.35); }
.bl-hero__meta time { color: rgba(255, 255, 255, 0.75); }
.bl-hero__title {
	color: #fff; font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 700;
	letter-spacing: -0.025em; line-height: 1.08; max-width: 22ch;
}
.bl-hero__lead { color: rgba(255, 255, 255, 0.82); margin-top: var(--space-s); max-width: 58ch; font-size: 1.02rem; line-height: 1.65; }

/* Lectura: aside sticky + contenido */
.bl-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-l); padding-block: clamp(3rem, 6vw, 5rem); align-items: start; }
@media (min-width: 960px) { .bl-layout { grid-template-columns: 240px minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); } }

.bl-aside { display: grid; gap: var(--space-m); align-content: start; }
@media (min-width: 960px) { .bl-aside { position: sticky; top: 8rem; } }
.bl-aside__label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--light-muted); margin-bottom: 0.35rem; }
.bl-aside__val { color: var(--light-ink); font-weight: 600; font-size: 0.95rem; }
.bl-aside__cat { display: inline-block; margin-top: 0.3rem; color: var(--light-muted); font-size: 0.85rem; }
.bl-aside__cat:hover { color: var(--light-ink); }
.bl-aside__share { display: grid; gap: 0.3rem; }
.bl-aside__share a { color: var(--light-ink); font-size: 0.9rem; font-weight: 500; }
.bl-aside__share a:hover { opacity: 0.55; }
.bl-aside__share a span { color: var(--light-muted); font-size: 0.8em; }
.bl-aside__all { color: var(--light-ink); font-weight: 600; }

.bl-content { max-width: 74ch; }
.bl-single .post-light__head, .bl-single .post-light__hero { display: none; } /* respaldo si quedara markup viejo en caché */

/* =========================================================================
   V59 — FAQ estilo Motto: título grande, intro dos columnas, acordeones
   <details> con "+" y líneas divisorias.
   ========================================================================= */
.faq-page { background: var(--light-bg); }
.faq-head { padding-top: clamp(8rem, 14vw, 11rem); }
.faq-title {
	font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 700;
	letter-spacing: -0.03em; line-height: 1.05; color: var(--light-ink);
}

.faq-intro {
	display: grid; gap: var(--space-m); grid-template-columns: 1fr;
	padding-block: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 860px) { .faq-intro { grid-template-columns: 240px 1fr; gap: var(--space-l); } }
.faq-intro__title {
	font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700;
	letter-spacing: -0.02em; line-height: 1.25; color: var(--light-ink); max-width: 28ch;
}
.faq-intro__text { color: var(--light-muted); margin-top: var(--space-s); max-width: 58ch; line-height: 1.75; }

.faq-list-wrap {
	display: grid; gap: var(--space-m); grid-template-columns: 1fr;
	border-top: 1px solid rgba(10, 13, 11, 0.14);
	padding-top: var(--space-m); padding-bottom: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 860px) { .faq-list-wrap { grid-template-columns: 240px 1fr; gap: var(--space-l); } }

.faq-item { border-bottom: 1px solid rgba(10, 13, 11, 0.14); }
.faq-item__q {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
	padding-block: clamp(1.2rem, 2.5vw, 1.8rem);
	font-weight: 600; font-size: clamp(1rem, 1.6vw, 1.15rem);
	color: var(--light-ink); cursor: pointer; list-style: none;
	transition: opacity 0.2s var(--ease);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { opacity: 0.6; }
.faq-item__plus { position: relative; width: 14px; height: 14px; flex: none; }
.faq-item__plus::before, .faq-item__plus::after {
	content: ""; position: absolute; background: var(--light-ink);
	transition: transform 0.3s var(--ease);
}
.faq-item__plus::before { left: 0; top: 6px; width: 14px; height: 2px; }
.faq-item__plus::after { left: 6px; top: 0; width: 2px; height: 14px; }
.faq-item[open] .faq-item__plus::after { transform: scaleY(0); }
.faq-item__a { padding-bottom: clamp(1.4rem, 3vw, 2.2rem); max-width: 62ch; }
.faq-item__a p { color: var(--light-muted); line-height: 1.75; font-size: 0.96rem; }
.faq-item__a p + p, .faq-item__a ul + p, .faq-item__a p + ul { margin-top: var(--space-s); }
.faq-item__a ul { display: grid; gap: 0.3rem; padding-left: 1.1rem; list-style: disc; }
.faq-item__a li { color: var(--light-muted); font-size: 0.94rem; line-height: 1.6; }
.faq-item__a li::marker { color: #0aa06b; }
.faq-item__a strong { color: var(--light-ink); }

.faq-more { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* --- V60: CTA "Trabajemos juntos" en el navbar al scrollear (como el
       "Work with us" de Motto). Aparece junto al toggle con subrayado. --- */
.nav-cta {
	color: #FFFFFF; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.01em;
	white-space: nowrap; padding-bottom: 3px; border-bottom: 1.5px solid currentColor;
	opacity: 0; transform: translateY(-8px); pointer-events: none;
	transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.site-header.is-scrolled .nav-cta { opacity: 1; transform: none; pointer-events: auto; }
.site-header.is-scrolled .nav-cta:hover { opacity: 0.6; }
@media (max-width: 640px) { .nav-cta { display: none; } } /* en móvil el toggle manda */

/* --- V61: resultado del Test Impulse® --- */
.imp-result { display: grid; gap: var(--space-s); }
.imp-result__pill { margin-bottom: 0; }
.imp-result__sol {
	font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 700;
	letter-spacing: -0.03em; line-height: 1; color: var(--accent);
}
.imp-result__full { color: var(--ink); font-weight: 600; font-size: 1.05rem; }
.imp-result__urgent {
	color: var(--accent); font-weight: 600; font-size: 0.95rem;
	border: 1px solid rgba(20, 241, 149, 0.4); padding: 0.8rem 1rem;
}
.imp-result__why { margin-top: var(--space-s); }

/* --- V62: página legal con diagramación Andez --- */
.legal-page__updated { color: var(--light-muted); font-size: 0.85rem; margin-top: var(--space-s); }
.legal-page__body { margin-top: var(--space-l); }
.legal-page__aside { display: grid; gap: var(--space-s); align-content: start; }
@media (min-width: 860px) { .legal-page__aside { position: sticky; top: 8rem; } }
.legal-page__note { color: var(--light-muted); font-size: 0.9rem; line-height: 1.65; max-width: 24ch; }
.legal-page__mail { color: var(--light-ink); font-weight: 600; font-size: 0.9rem; word-break: break-all; }
.legal-page__prose { max-width: 72ch; }
.legal-page__prose h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-top: var(--space-l); letter-spacing: -0.02em; }
.legal-page__prose h2:first-child { margin-top: 0; }
.legal-page__prose h3 { font-size: 1.05rem; margin-top: var(--space-m); }
.legal-page__prose p, .legal-page__prose li { color: var(--light-muted); font-size: 0.95rem; line-height: 1.75; }
.legal-page__prose strong { color: var(--light-ink); }
.legal-page__prose ul { padding-left: 1.1rem; list-style: disc; display: grid; gap: 0.3rem; }
.legal-page__prose li::marker { color: #0aa06b; }

/* =========================================================================
   V63 — Auditoría: 404 Andez + pase responsive/uniformidad global.
   ========================================================================= */

/* --- 404 --- */
.e404 { min-height: 78svh; display: grid; align-items: center; }
.e404__inner { padding-top: clamp(6rem, 12vw, 8rem); }
.e404__title {
	font-size: clamp(2.2rem, 6vw, 4.2rem); font-weight: 700;
	letter-spacing: -0.03em; line-height: 1.05; max-width: 18ch;
}
.e404__lead { color: var(--muted); margin-top: var(--space-s); max-width: 46ch; }
.e404 .hero__actions { margin-top: var(--space-m); }
.e404__link { color: var(--ink); }

/* --- Prosa a prueba de móvil: nada rompe el ancho --- */
.prose img, .prose iframe, .prose video { max-width: 100%; height: auto; }
.prose table { display: block; width: 100%; overflow-x: auto; }
.prose pre { overflow-x: auto; max-width: 100%; }

/* --- Botones: que los CTAs largos no desborden pantallas chicas --- */
@media (max-width: 480px) {
	.btn { white-space: normal; text-align: center; }
	.hero__actions { width: 100%; }
	.hero__actions .btn { width: 100%; justify-content: center; }
	.idplan__cta { align-self: stretch; text-align: center; }
	.ck-result__ctas { flex-direction: column; align-items: stretch; }
	.ck-result__ctas .btn { text-align: center; }
}

/* --- Panel del menú: siempre navegable en pantallas bajas --- */
.nav-panel { max-height: calc(100dvh - 28px); overflow-y: auto; }

/* --- Banner del blog más compacto en móvil --- */
@media (max-width: 640px) {
	.bl-hero { min-height: 62svh; }
	.bl-hero__title { font-size: clamp(1.6rem, 7.5vw, 2.2rem); }
}

/* --- Filas de automatizaciones: tap targets y respiro en móvil --- */
@media (max-width: 959px) {
	.aiflow { padding-block: 1.6rem; }
	.aiflow__link { padding-block: 0.4rem; }
	.aiflow__logo { grid-auto-flow: column; align-items: center; justify-content: start; gap: 0.8rem; }
	.aiflow__logo img { width: 40px; height: 40px; }
}

/* --- Comparativas: la banda de plan personalizado apila y centra --- */
@media (max-width: 640px) {
	.idplan__custom { flex-direction: column; text-align: center; }
	.idwhy__media { min-height: 280px; }
	.idcheck2__score { font-size: 2.4rem; }
}

/* --- Checklist/Test: opciones cómodas para el pulgar --- */
@media (max-width: 640px) {
	.ck-opt { padding: 1rem 1.1rem; }
	.ck__fields { grid-template-columns: 1fr; }
}

/* --- Footer: legibilidad en pantallas chicas --- */
@media (max-width: 640px) {
	.site-footer__marklogo img { width: 100%; height: auto; }
}

/* --- V64: footer móvil compacto — columnas como acordeones cerrados --- */
@media (max-width: 719px) {
	nav.site-footer__col { margin: 0 !important; border-bottom: 1px solid var(--line); }
	nav.site-footer__col .site-footer__title {
		display: flex; align-items: center; justify-content: space-between;
		margin: 0; padding-block: 1rem; cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	nav.site-footer__col .site-footer__title::after {
		content: "+"; font-weight: 400; font-size: 1.1rem; color: var(--muted);
		transition: transform 0.3s var(--ease);
	}
	nav.site-footer__col.is-open .site-footer__title::after { content: "−"; }
	nav.site-footer__col ul { display: none; padding-bottom: 1rem; }
	nav.site-footer__col.is-open ul { display: grid; }
}

/* =========================================================================
   V65 — Móvil: menú con links de nuevo (el CSS legado los sacaba de
   pantalla) + tamaños de imágenes de proyectos bajo control.
   ========================================================================= */

/* --- FIX menú: el .menu--primary legado (fixed + translateY(-120%))
       secuestraba los links del panel en <900px. En el panel, los links
       son estáticos siempre. --- */
@media (max-width: 900px) {
	.nav-panel .menu--primary {
		position: static; inset: auto; transform: none;
		background: transparent; border: 0; padding: 0;
		max-height: none; overflow: visible;
		display: grid; gap: 0.2rem;
	}
	.nav-panel .menu--primary li { width: auto; border: 0; }
	.nav-panel .menu--primary a {
		display: inline-flex; padding: 0.15rem 0;
		font-size: clamp(1.7rem, 7.5vw, 2.4rem);
	}
}

/* --- Imágenes de proyectos en móvil: presencia sin devorar la pantalla --- */
@media (max-width: 640px) {
	/* Héroe del proyecto interno: banner contenido, título siempre legible */
	.pj-hero { min-height: 62svh; }
	.pj-hero__content { padding-bottom: 2.5rem; }
	.pj-hero__title { font-size: clamp(2rem, 9vw, 2.8rem); }

	/* Archivo /work/: cards más panorámicas = más proyectos por scroll */
	.wk-card__media { aspect-ratio: 16 / 10; }
	.wk-grid { row-gap: var(--space-l); }

	/* Carruseles: tarjeta que deja ver la siguiente (invita al swipe) */
	.work--carousel .project-card { width: min(80vw, 340px); }

	/* Galerías internas del proyecto: ritmo compacto */
	.pj-gallery__grid img { aspect-ratio: 4 / 3; }
	.pj-gallery__main img { max-height: 64svh; object-fit: cover; }
}

/* =========================================================================
   V66 — Tamaños bajo control: cards de carrusel más contenidas en
   escritorio y títulos de sección legibles en móvil.
   ========================================================================= */

/* Carruseles: la card no devora la pantalla en monitores grandes */
.work--carousel .project-card { width: clamp(260px, 34vw, 460px); }

/* Títulos de sección en móvil: presencia sin desbordes */
@media (max-width: 640px) {
	.section__title { font-size: clamp(1.6rem, 7.5vw, 2.2rem); }
	.systems__title { font-size: clamp(1.55rem, 7vw, 2.1rem); }
	.idcheck2__title { font-size: clamp(1.4rem, 6.5vw, 1.9rem); }
	.method__title { font-size: clamp(1.6rem, 7.5vw, 2.2rem); }
	.faq-intro__title { font-size: clamp(1.25rem, 5.5vw, 1.6rem); }
	.idplan__name { font-size: clamp(1.4rem, 6vw, 1.8rem); }
	.aiflow__name { font-size: clamp(1.15rem, 5vw, 1.4rem); }
	/* El recuadro respira menos para que la frase quepa en menos líneas */
	.section__title .frame-box, .systems__title .frame-box, .idcheck2__title .frame-box { padding: 0.06em 0.28em; }
}

/* =========================================================================
   V67 — Pase de taste (interacción y micro-detalle):
   presión física en botones, stagger de grids al entrar, fade-in de
   imágenes lazy, panel del menú con cascada, selección y detalles
   del sistema. Todo transform/opacity (compositor), todo < 400ms
   para UI y ease-out para entradas. Respeta reduced-motion.
   ========================================================================= */

/* --- Detalles del sistema --- */
::selection { background: var(--accent); color: #0A0D0B; }
.section--light ::selection, .faq-page ::selection { background: #0aa06b; color: #fff; }
html { scroll-padding-top: 96px; } /* anclas nunca quedan bajo el navbar fijo */
* { -webkit-tap-highlight-color: transparent; }

/* Scrollbar de página: presente pero discreto */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(120, 130, 125, 0.35); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(120, 130, 125, 0.6); }

/* --- Botones con física: presión real al click --- */
.btn:active { transform: scale(0.97); }
.btn--accent:hover { box-shadow: 0 10px 30px -12px rgba(20, 241, 149, 0.5); }
.carousel-arrow:active { transform: translateY(-50%) scale(0.92); }
.nav-toggle:active .nav-toggle__bar { background: var(--accent); }

/* Opciones del quiz: feedback táctil */
.ck-opt { transition: transform 0.15s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease); }
.ck-opt:active { transform: scale(0.98); }

/* --- Cards de proyecto: zoom más fino + título que responde --- */
.project-card__media img, .wk-card__media img { transition: transform 0.7s var(--ease), opacity 0.7s ease-out; }
.project-card:hover .project-card__media img, .wk-card:hover .wk-card__media img { transform: scale(1.035); }
.project-card__title, .wk-card__title { transition: color 0.25s var(--ease); }
.project-card:hover .project-card__title { color: var(--accent); }

/* --- Stagger: los hijos de grids entran en cascada (JS marca .stag) --- */
.stag { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease-out, transform 0.55s var(--ease); }
.stag.stag-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .stag { opacity: 1; transform: none; } }

/* --- Imágenes lazy: llegan con fade + micro-zoom de asentamiento --- */
.img-fade { opacity: 0; transform: scale(1.02); transition: opacity 0.6s ease-out, transform 1.1s var(--ease); }
.img-fade.img-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .img-fade { opacity: 1; transform: none; } }

/* --- Panel del menú: los links entran en cascada al abrir --- */
.nav-panel__links li { opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease-out, transform 0.45s var(--ease); }
body:has(.site-nav.is-open) .nav-panel__links li { opacity: 1; transform: none; }
.nav-panel__links li:nth-child(1) { transition-delay: 0.05s; }
.nav-panel__links li:nth-child(2) { transition-delay: 0.10s; }
.nav-panel__links li:nth-child(3) { transition-delay: 0.15s; }
.nav-panel__links li:nth-child(4) { transition-delay: 0.20s; }
.nav-panel__links li:nth-child(5) { transition-delay: 0.25s; }
.nav-panel__links a { transition: opacity 0.2s var(--ease), transform 0.3s var(--ease); }
.nav-panel__links a:hover { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) { .nav-panel__links li { opacity: 1; transform: none; transition: none; } }

/* --- Enlaces del aside del blog y footer: nudge sutil --- */
.bl-aside__share a, .site-footer__col a { display: inline-block; transition: transform 0.25s var(--ease), color 0.2s var(--ease), opacity 0.2s var(--ease); }
.bl-aside__share a:hover, .site-footer__col a:hover { transform: translateX(4px); }

/* --- FAQ: la respuesta entra suave --- */
.faq-item[open] .faq-item__a { animation: faq-in 0.45s var(--ease) both; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .faq-item[open] .faq-item__a { animation: none; } }

/* --- V68: toggle con palabra "Menú" + selector de idioma real --- */
.nav-toggle { flex-direction: row !important; align-items: center; gap: 10px; }
.nav-toggle__label { font-size: 0.85rem; font-weight: 600; color: #FFFFFF; letter-spacing: 0.01em; }
.nav-toggle__bars { display: flex; flex-direction: column; gap: 5px; }

.lang-switch a { color: rgba(255, 255, 255, 0.5); font-weight: 500; transition: color 0.2s var(--ease); }
.lang-switch a:hover { color: #FFFFFF; }
.lang-switch a.is-lang-active { color: #FFFFFF; font-weight: 600; }

/* =========================================================================
   V69 — /servicios/ tres frentes + engranaje:
   filas editoriales (frente | profesionales | sistemas) y el método como
   cadena de fases conectadas.
   ========================================================================= */

/* --- Filas de frentes --- */
.frente-list { margin-top: var(--space-l); border-top: 1px solid rgba(10, 13, 11, 0.14); }
.frente {
	display: grid; gap: var(--space-m); grid-template-columns: 1fr;
	padding-block: clamp(2rem, 4.5vw, 3.5rem);
	border-bottom: 1px solid rgba(10, 13, 11, 0.14);
}
@media (min-width: 960px) { .frente { grid-template-columns: 110px 1.5fr 1fr; gap: var(--space-l); } }

.frente__num {
	font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700;
	letter-spacing: -0.02em; color: #0aa06b; line-height: 1;
}
.frente__name {
	font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 700;
	letter-spacing: -0.025em; line-height: 1.05; color: var(--light-ink);
}
.frente__tag { color: var(--light-ink); font-weight: 600; margin-top: 0.5rem; font-size: 1rem; }
.frente__desc { color: var(--light-muted); font-size: 0.95rem; line-height: 1.7; max-width: 52ch; margin-top: var(--space-2xs); }
.frente__label { margin-top: var(--space-m); margin-bottom: 0.5rem; }

.frente__pros { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.frente__pros span {
	font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
	color: #0aa06b; border: 1px solid rgba(10, 160, 107, 0.35);
	border-radius: 999px; padding: 0.3rem 0.75rem;
}

.frente__systems { display: grid; gap: 0.6rem; align-content: start; }
.frente__systems .frente__label { margin-top: 0; }
.frente-sys {
	display: grid; gap: 0.2rem; padding: 0.9rem 1rem;
	border: 1px solid rgba(10, 13, 11, 0.14);
	transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.frente-sys strong { color: var(--light-ink); font-size: 1rem; letter-spacing: -0.01em; }
.frente-sys span { color: var(--light-muted); font-size: 0.82rem; line-height: 1.5; }
.frente-sys:hover { border-color: #0aa06b; background: var(--light-bg-2); transform: translateX(4px); }

/* --- El engranaje: cadena de fases --- */
.gearsec { background: var(--bg); }
.gearsec__lead { color: var(--muted); margin-top: var(--space-s); max-width: 60ch; line-height: 1.7; }
.gearsec__lead strong { color: var(--ink); }

.gear-flow {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0;
	margin-top: var(--space-l); padding: 0; list-style: none;
}
.gear-flow__step { display: flex; align-items: center; }
.gear-flow__dot { font-size: 0.72rem; color: var(--accent); margin-right: 0.5rem; }
.gear-flow__name { font-weight: 600; color: var(--ink); font-size: clamp(0.95rem, 1.4vw, 1.1rem); letter-spacing: -0.01em; }
.gear-flow__step:not(:last-child)::after {
	content: ""; width: clamp(1.5rem, 4vw, 4rem); height: 1px;
	background: linear-gradient(90deg, var(--line), rgba(20, 241, 149, 0.5));
	margin-inline: clamp(0.7rem, 1.5vw, 1.2rem);
}
.gearsec__note { color: var(--muted); font-size: 0.92rem; margin-top: var(--space-m); max-width: 52ch; }
.gearsec__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); margin-top: var(--space-m); }

@media (max-width: 640px) {
	.gear-flow { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
	.gear-flow__step:not(:last-child)::after { display: none; }
	.frente__name { font-size: clamp(1.5rem, 7vw, 1.9rem); }
}

/* =========================================================================
   V70 — Agencia top global: animación de entrada al cargar (navbar + hero
   en cascada), parallax sutil en fondos de hero, gracias premium, 404 con
   numeral fantasma, iconos de compartir horizontales y menos aire arriba
   en páginas claras.
   ========================================================================= */

/* --- Entrada al cargar: el navbar baja, el hero sube en cascada --- */
@media (prefers-reduced-motion: no-preference) {
	.site-header { animation: andez-nav-in 0.7s var(--ease) 0.1s both; }
	@keyframes andez-nav-in {
		from { opacity: 0; transform: translateY(-14px); }
		to { opacity: 1; transform: none; }
	}
	.hero__inner > *, .pj-hero__content > *, .bl-hero__inner > *,
	.faq-head > *, .e404__inner > *, .gracias__inner > *,
	.work-hero__content > *, .blog-page__head > * {
		animation: andez-rise 0.75s var(--ease) both;
	}
	.hero__inner > :nth-child(1), .pj-hero__content > :nth-child(1), .bl-hero__inner > :nth-child(1), .faq-head > :nth-child(1), .e404__inner > :nth-child(1), .gracias__inner > :nth-child(1), .work-hero__content > :nth-child(1), .blog-page__head > :nth-child(1) { animation-delay: 0.12s; }
	.hero__inner > :nth-child(2), .pj-hero__content > :nth-child(2), .bl-hero__inner > :nth-child(2), .faq-head > :nth-child(2), .e404__inner > :nth-child(2), .gracias__inner > :nth-child(2), .work-hero__content > :nth-child(2), .blog-page__head > :nth-child(2) { animation-delay: 0.2s; }
	.hero__inner > :nth-child(3), .pj-hero__content > :nth-child(3), .bl-hero__inner > :nth-child(3), .faq-head > :nth-child(3), .e404__inner > :nth-child(3), .gracias__inner > :nth-child(3), .work-hero__content > :nth-child(3), .blog-page__head > :nth-child(3) { animation-delay: 0.28s; }
	.hero__inner > :nth-child(4), .pj-hero__content > :nth-child(4), .e404__inner > :nth-child(4), .gracias__inner > :nth-child(4), .work-hero__content > :nth-child(4) { animation-delay: 0.36s; }
	.hero__inner > :nth-child(5), .e404__inner > :nth-child(5), .gracias__inner > :nth-child(5) { animation-delay: 0.44s; }
	@keyframes andez-rise {
		from { opacity: 0; transform: translateY(22px); }
		to { opacity: 1; transform: none; }
	}
	/* El fondo del hero llega con un zoom-out elegante */
	.hero--home .hero__bg img, .pj-hero__bg img { animation: andez-bg-in 1.4s ease-out both; }
	@keyframes andez-bg-in {
		from { opacity: 0; }
		to { opacity: 1; }
	}
}

/* --- Parallax: el JS mueve el fondo; aquí solo preparamos la capa --- */
.hero--home .hero__bg img, .pj-hero__bg img, .bl-hero__bg img {
	will-change: transform;
	transform: scale(1.12);
}

/* --- Compartir del blog: iconos horizontales --- */
.bl-aside__share--icons { display: flex; gap: 0.9rem; }
.bl-aside__share--icons a { display: inline-grid; place-items: center; padding: 0.3rem; transform: none !important; }
.bl-aside__share--icons img {
	width: 18px; height: 18px;
	filter: brightness(0); opacity: 0.6;
	transition: opacity 0.2s var(--ease), transform 0.25s var(--ease);
}
.bl-aside__share--icons a:hover img { opacity: 1; transform: translateY(-2px); }

/* --- Gracias premium --- */
.gracias { min-height: 86svh; display: grid; align-items: center; background: var(--bg); }
.gracias__inner { padding-top: clamp(6rem, 10vw, 7.5rem); max-width: 880px; }
.gracias__title {
	font-size: clamp(2.1rem, 5.4vw, 3.6rem); font-weight: 700;
	letter-spacing: -0.03em; line-height: 1.06; max-width: 20ch;
}
.gracias__lead { color: var(--muted); margin-top: var(--space-s); max-width: 50ch; }
.gracias__steps { display: grid; gap: 0; margin-top: var(--space-l); border-top: 1px solid var(--line); }
.gracias__step {
	display: grid; grid-template-columns: 64px 1fr; gap: var(--space-s);
	padding-block: var(--space-m); border-bottom: 1px solid var(--line);
}
.gracias__num { font-size: 0.75rem; color: var(--accent); padding-top: 0.3rem; }
.gracias__name { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.015em; margin-bottom: 0.4rem; }
.gracias__step p { color: var(--muted); font-size: 0.94rem; line-height: 1.65; max-width: 52ch; }
.gracias__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); margin-top: var(--space-l); }
.gracias__wa { color: var(--ink); }

/* --- 404 profesional: numeral fantasma + mapa de rutas --- */
.e404 { position: relative; overflow: hidden; }
.e404__ghost {
	position: absolute; right: -0.08em; bottom: -0.22em; z-index: 0;
	font-size: clamp(14rem, 34vw, 30rem); font-weight: 700; line-height: 1;
	letter-spacing: -0.05em; color: transparent;
	-webkit-text-stroke: 1px rgba(20, 241, 149, 0.14);
	user-select: none; pointer-events: none;
}
.e404__inner { position: relative; z-index: 1; }
.e404__map { margin-top: var(--space-l); }
.e404__links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem; }
.e404__links a {
	font-size: 0.85rem; font-weight: 600; color: var(--ink);
	border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 1rem;
	transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.e404__links a:hover { border-color: var(--accent); color: var(--accent); }

/* --- Páginas claras: menos aire arriba, más contenido a la vista --- */
.faq-head { padding-top: clamp(6.5rem, 10vw, 8rem); }
.work-hero { min-height: 56vh; }
.page-header, .project-hero, .service-hero, .contact-page, .about-hero { padding-top: clamp(5.5rem, 9vw, 7rem); }
.blog-page__head { padding-top: clamp(6.5rem, 10vw, 8rem) !important; }

/* =========================================================================
   V71 — Asistente Andez™ (chatbot flotante) + banda de pluses.
   ========================================================================= */

/* --- Banda de diferenciales --- */
.pluses { background: var(--bg); padding-block: var(--space-l); border-top: 1px solid var(--line); }
.pluses__label { color: var(--muted); margin-bottom: var(--space-s); }
.pluses__row { display: flex; flex-wrap: wrap; gap: 0.6rem 2.2rem; }
.pluses__row li { display: flex; align-items: center; gap: 0.5rem; color: var(--ink); font-size: 0.9rem; font-weight: 500; }
.pluses__check { color: var(--accent); font-weight: 700; }

/* --- Asistente flotante --- */
.aa { position: fixed; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px); z-index: 97; }
.aa__fab {
	position: relative; width: 56px; height: 56px; border-radius: 50%;
	background: var(--accent); color: #0A0D0B; border: 0; cursor: pointer;
	display: grid; place-items: center;
	box-shadow: 0 14px 40px -12px rgba(20, 241, 149, 0.55);
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.aa__fab:hover { transform: scale(1.06); }
.aa__fab:active { transform: scale(0.94); }
.aa__fab-dot {
	position: absolute; top: 4px; right: 4px; width: 10px; height: 10px;
	border-radius: 50%; background: #fff; border: 2px solid var(--accent);
	animation: aa-pulse 2.4s ease-out infinite;
}
@keyframes aa-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.aa--open .aa__fab-dot { display: none; }

.aa__panel {
	position: absolute; right: 0; bottom: 72px;
	width: min(360px, calc(100vw - 28px));
	background: #0D110E; color: var(--ink);
	border: 1px solid var(--line); border-radius: 18px;
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
	overflow: hidden;
	animation: aa-in 0.35s var(--ease) both;
	transform-origin: bottom right;
}
@keyframes aa-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }

.aa__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line); background: #10150F;
}
.aa__brand { font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; gap: 0.7rem; }
.aa__status { font-size: 0.7rem; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; gap: 0.35rem; }
.aa__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }
.aa__close { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 0.2rem 0.4rem; }
.aa__close:hover { color: var(--ink); }

.aa__body { padding: 1rem 1.1rem; max-height: min(54vh, 460px); overflow-y: auto; }
.aa__msg { font-size: 0.92rem; line-height: 1.55; color: var(--muted); margin-bottom: 0.9rem; }
.aa__msg strong { color: var(--ink); }

.aa__topics { display: grid; gap: 0.45rem; }
.aa__topic {
	text-align: left; background: transparent; border: 1px solid var(--line);
	border-radius: 12px; padding: 0.7rem 0.9rem; cursor: pointer; color: var(--ink);
	display: grid; gap: 0.15rem;
	transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.15s var(--ease);
}
.aa__topic:hover { border-color: rgba(20, 241, 149, 0.5); background: rgba(20, 241, 149, 0.05); }
.aa__topic:active { transform: scale(0.98); }
.aa__topic strong { font-size: 0.9rem; }
.aa__topic span { font-size: 0.76rem; color: var(--muted); }

.aa__result { display: grid; gap: 0.7rem; }
.aa__back { background: none; border: 0; color: var(--muted); cursor: pointer; text-align: left; font-size: 0.8rem; padding: 0; }
.aa__back:hover { color: var(--ink); }
.aa__wa {
	display: block; text-align: center; background: var(--accent); color: #0A0D0B;
	font-weight: 700; font-size: 0.92rem; border-radius: 999px; padding: 0.85rem 1rem;
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.aa__wa:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -10px rgba(20, 241, 149, 0.5); }
.aa__link { font-size: 0.85rem; font-weight: 600; color: var(--ink); justify-self: center; }
.aa__link:hover { color: var(--accent); }
.aa__foot { font-size: 0.68rem; color: var(--muted); padding: 0.7rem 1.1rem; border-top: 1px solid var(--line); }

@media (max-width: 480px) { .aa__panel { bottom: 68px; } .aa__fab { width: 52px; height: 52px; } }
@media (prefers-reduced-motion: reduce) { .aa__fab-dot { animation: none; } .aa__panel { animation: none; } }

/* --- V71.1: el asistente ahora es un CHAT real — burbujas, avatar,
       indicador de escritura y quick-replies. --- */
.aa__head { gap: 0.7rem; justify-content: flex-start; }
.aa__head .aa__close { margin-left: auto; }
.aa__avatar, .aa-m__ava {
	width: 30px; height: 30px; border-radius: 50%; flex: none;
	background: var(--accent); color: #0A0D0B;
	display: grid; place-items: center;
	font-weight: 700; font-size: 0.85rem;
}
.aa-m__ava { width: 24px; height: 24px; font-size: 0.7rem; align-self: flex-end; }
.aa__brand { display: grid; gap: 0.1rem; }
.aa__status { display: flex; }

.aa__chat {
	padding: 1rem 1rem 0.6rem; display: grid; gap: 0.55rem; align-content: start;
	height: min(46vh, 400px); overflow-y: auto; scroll-behavior: smooth;
}
.aa-m { display: flex; gap: 0.45rem; animation: aa-msg 0.3s var(--ease) both; }
@keyframes aa-msg { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.aa-m__bubble {
	max-width: 84%; padding: 0.62rem 0.85rem;
	font-size: 0.87rem; line-height: 1.5; color: var(--ink);
	background: #161C17; border: 1px solid var(--line);
	border-radius: 14px 14px 14px 4px;
	display: grid; gap: 0.55rem;
}
.aa-m__bubble strong { color: var(--accent); font-weight: 600; }
.aa-m--user { justify-content: flex-end; }
.aa-m--user .aa-m__bubble {
	background: var(--accent); color: #0A0D0B; border: 0;
	border-radius: 14px 14px 4px 14px; font-weight: 600;
}
.aa-m--user .aa-m__bubble strong { color: #0A0D0B; }

/* Indicador de escritura */
.aa-m--typing .aa-m__bubble { display: flex; gap: 4px; padding: 0.75rem 0.9rem; }
.aa-m--typing i {
	width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
	animation: aa-dot 1.1s ease-in-out infinite;
}
.aa-m--typing i:nth-child(2) { animation-delay: 0.15s; }
.aa-m--typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes aa-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Quick replies */
.aa__quick {
	display: flex; flex-wrap: wrap; gap: 0.4rem;
	padding: 0.6rem 1rem 0.9rem; border-top: 1px solid var(--line);
}
.aa__chip {
	background: transparent; border: 1px solid rgba(20, 241, 149, 0.45);
	color: var(--accent); border-radius: 999px; cursor: pointer;
	font-size: 0.78rem; font-weight: 600; padding: 0.45rem 0.85rem;
	transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.15s var(--ease);
}
.aa__chip:hover { background: var(--accent); color: #0A0D0B; }
.aa__chip:active { transform: scale(0.96); }
.aa__chip--ghost { border-color: var(--line); color: var(--muted); }
.aa__chip--ghost:hover { background: transparent; color: var(--ink); border-color: var(--muted); }

/* CTA dentro de burbuja */
.aa-m__bubble .aa__wa { margin-top: 0.1rem; }
.aa-m__bubble .aa__link { justify-self: start; font-size: 0.82rem; }

/* --- V72: hero en móvil sin cortes — badge que apila limpio, título con
       aire, y espacio para que el chat no tape los CTAs. --- */
@media (max-width: 640px) {
	/* Badge: las coordenadas pasan a su propia línea, centradas, sin cortarse */
	.hero__badge--studio {
		flex-wrap: wrap; justify-content: center; text-align: center;
		white-space: normal; line-height: 1.5; row-gap: 0.1rem;
		max-width: min(92vw, 340px); padding: 0.5rem 1rem;
	}
	.hero__badge--studio .sep { display: none; }
	.hero__badge--studio .coords { flex-basis: 100%; }

	/* Título del hero: tamaño que respira, sin tocar los bordes */
	.hero--home .hero__title { font-size: clamp(1.85rem, 8.6vw, 2.5rem); letter-spacing: -0.025em; }
	.hero--home .hero__inner { padding-inline: max(var(--gutter), 1.25rem); }

	/* El recuadro compacto para que la frase quepa sin partirse raro */
	.hero__title .frame-box { padding: 0.05em 0.26em; }

	/* Aire abajo: el botón del chat no tapa el último CTA */
	.hero--home .hero__inner { padding-bottom: 6rem; }

	/* Lead con medida cómoda */
	.hero__lead { max-width: 34ch; margin-inline: auto; }
}

/* El chat cede protagonismo mientras no se usa en pantallas chicas */
@media (max-width: 480px) {
	.aa__fab { width: 48px; height: 48px; box-shadow: 0 10px 26px -10px rgba(20, 241, 149, 0.45); }
	.aa { right: 12px; bottom: 12px; }
}

/* --- V72.1: /work/ en móvil — el filtro deja de flotar (tapaba el texto
       y chocaba con el chat) y el título del hero respira. --- */
@media (max-width: 640px) {
	.wk-dd { position: sticky; top: 76px; left: auto; bottom: auto; z-index: 60; padding-inline: var(--gutter); }
	.wk-dd__btn { width: 100%; min-width: 0; border-radius: 999px; }
	.wk-dd__panel { left: var(--gutter); right: var(--gutter); width: auto; }

	.work-hero { min-height: 0; padding-bottom: var(--space-m); }
	.work-hero__title { font-size: clamp(1.9rem, 9vw, 2.4rem); }
	.work-hero__title .frame-box { padding: 0.05em 0.26em; }

	/* Breadcrumb/badge de páginas internas: que no se apriete */
	.about-hero .hero__badge, .work-hero .hero__badge { max-width: 92vw; white-space: normal; text-align: center; line-height: 1.5; }
}

/* En móvil el filtro está arriba (sticky): el panel abre hacia ABAJO */
@media (max-width: 640px) {
	.wk-dd__panel { bottom: auto; top: calc(100% + 8px); transform: translateY(-8px); max-height: 52vh; }
	.wk-dd.is-open .wk-dd__panel { transform: none; }
}

/* =========================================================================
   V73 — /work/ móvil de verdad: hero compacto, título sin huérfanos y
   los proyectos visibles en el primer scroll. Es la página con más
   tráfico móvil: cero desperdicio vertical.
   ========================================================================= */
.work-hero__nb { white-space: nowrap; } /* "en «se ve bonito»" jamás se separa */

@media (max-width: 640px) {
	/* Hero compacto: de pantalla completa a tarjeta de presentación */
	.work-hero {
		min-height: 0;
		padding-top: 5.5rem;
		padding-bottom: 0.5rem;
		display: block;
	}
	.work-hero .hero__badges { margin-bottom: 0.9rem; }
	.work-hero .hero__badge {
		font-size: 0.68rem; padding: 0.4rem 0.8rem; line-height: 1.45;
	}
	.work-hero__title {
		font-size: clamp(1.7rem, 8vw, 2.1rem);
		line-height: 1.08; letter-spacing: -0.03em;
	}
	.work-hero__title .frame-box { padding: 0.04em 0.22em; }
	.work-hero__lead {
		font-size: 0.92rem; line-height: 1.6; max-width: 40ch;
		margin-top: 0.7rem;
	}
	.work-hero__content .hero__actions { margin-top: 1rem; gap: 0.6rem; }
	.work-page__scroll { display: none; } /* en móvil el scroll es obvio */

	/* Grid de proyectos pegado al hero: cards a la vista de inmediato */
	.wk-grid { row-gap: var(--space-m); margin-top: var(--space-s); }
	.wk-card__title { font-size: 1.05rem; }
	.wk-card__body { padding-top: 0.5rem; }
}

/* Móvil pequeño: un pelín más compacto todavía */
@media (max-width: 380px) {
	.work-hero__title { font-size: 1.55rem; }
}

/* --- V73.1: hero del proyecto en móvil — sin "(SCROLL)" pegado al tagline;
       si hay enlace del proyecto, queda solo y con aire. --- */
@media (max-width: 640px) {
	.pj-hero__bottom { padding-top: 0.9rem; padding-bottom: 1.1rem; }
	.pj-hero__bottom > span:first-child { display: none; } /* (SCROLL) fuera */
	.pj-hero__tagline { margin-bottom: 0; }
}

/* --- V74: auditoria implementada — hero__sub y evidencia en cards --- */
.hero__sub { color: var(--muted); font-size: 0.9rem; margin-top: 0.7rem; max-width: 52ch; margin-inline: auto; opacity: 0.85; }
.wk-card__evidence { font-size: 0.75rem; color: #0aa06b; font-weight: 600; letter-spacing: 0.02em; margin-top: 0.35rem; }

/* --- V75: casos consultivos --- */
.pj-hero__sys { font-size: 0.8rem; color: rgba(255,255,255,0.75); margin-top: 0.6rem; }
.pj-hero__sys a { color: var(--accent); font-weight: 600; }
.pj-similar .idcheck2__panel { grid-template-columns: 1fr; }

/* --- V76: formulario progresivo + Turnstile discreto --- */
.cc-follow { display: none; }
.cc-follow.is-on { display: block; animation: cc-follow-in 0.45s var(--ease) both; }
@keyframes cc-follow-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cc-follow.is-on { animation: none; } }
.cf-turnstile { margin-top: 0.4rem; }
.cf-turnstile:empty { margin: 0; }

/* --- V77: hero de Nosotros más alto y con fundido perfecto al fondo
       (el borde de la imagen jamás se nota) --- */
.about-hero--img { min-height: 92svh; display: flex; flex-direction: column; justify-content: center; padding-bottom: clamp(6rem, 12vw, 9rem); }
.about-hero--img::before {
	background:
		radial-gradient(60% 55% at 50% 0%, rgba(20, 241, 149, 0.08), transparent 65%),
		linear-gradient(180deg,
			rgba(10, 13, 11, 0.62) 0%,
			rgba(10, 13, 11, 0.38) 38%,
			rgba(10, 13, 11, 0.72) 68%,
			rgba(10, 13, 11, 0.96) 88%,
			var(--bg) 100%) !important;
}
@media (max-width: 640px) { .about-hero--img { min-height: 74svh; } }