/* Andez — paquete «home» generado por tools/css-bundles.js desde skin.css + ds2.css + v4.css. No editar: editar las fuentes y regenerar. */
/* skin.css */
/* =========================================================================
   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: #F2F2F2;
	--light-bg-2: #DDDDD6;
	--light-ink: #080807;
	--light-muted: #5E5E5E;
	--light-line: #DCDCDC;
}

/* --- 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 { 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__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__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 --- */

/* --- 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 p { color: var(--light-muted); }
.section--light a { color: var(--light-ink); }
.section--light a:hover { color: var(--light-muted); }

/* --- Let's collab gigante --- */

/* --- 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 .site-brand__link { 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: var(--ink);
	border-radius: 6px; font-size: 0.9rem;
}
.newsletter-form__row .btn:hover { background: #222226; color: var(--ink); 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__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 { padding-top: clamp(6rem, 12vw, 8.5rem); }

/* --- Nosotros (fidelidad pantallazo) --- */
.about-hero__title { font-size: clamp(2rem, 5vw, 3.4rem); display: grid; gap: 0.3em; justify-items: center; }
.about-story__media img { border-radius: 8px; filter: grayscale(1) contrast(1.05); }
.team-member__media img { border-radius: 8px; filter: grayscale(1); width: 100%; object-fit: cover; aspect-ratio: 4 / 3.4; }
.principles__media img { border-radius: 8px; }
@keyframes pj-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Variantes oscuras de collab y footer --- */

/* =========================================================================
   SISTEMA DE INTERACCION (motion.js)
   Loader de carga, cursor personalizado, footer reveal, header inteligente
   y reveals tipograficos. Todo respeta prefers-reduced-motion.
   ========================================================================= */
@keyframes pl-fade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pl-out { to { opacity: 0; transform: translateY(-14px); } }

/* Entrada del hero tras el loader */
.has-motion .hero__title, .has-motion .hero__lead, .has-motion .hero__actions {
	opacity: 0; transform: translateY(26px);
	transition: opacity var(--motion-slow) var(--ease), transform var(--motion-slow) var(--ease);
}
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__title, .has-motion .hero__lead, .has-motion .hero__actions { opacity: 1; transform: 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 { background-color: var(--light-bg); }

/* --- Header fijo que se oculta al bajar --- */
.site-header {
	position: fixed; top: 0; left: 0; right: 0;
	transition: transform var(--motion-slow) var(--ease), background var(--motion-normal) 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 --- */

/* --- Footer: diagramacion editorial con marca gigante --- */
.site-footer { overflow: hidden; }

/* --- Fixes de robustez del sistema de interaccion --- */
/* El smooth scroll JS necesita scroll instantaneo nativo */
html.has-motion { scroll-behavior: auto !important; }

/* =========================================================================
   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(8, 8, 7, 0.72), rgba(8, 8, 7, 0.45) 55%, var(--bg) 96%);
}

/* --- Badge unificado: studio + coordenadas --- */

/* --- Frame-box v2: cristal con blur y esquinas "+" --- */
.frame-box {
	border: 1px solid rgba(20, 241, 149, 0.35);
	background: rgba(242, 242, 242, 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 --- */

/* --- 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(8, 8, 7, 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 var(--motion-normal) var(--ease), border-color var(--motion-normal) var(--ease), color var(--motion-normal) var(--ease), transform var(--motion-normal) 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; }

/* --- 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); }

/* --- Metodo --- */
.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); } }

/* =========================================================================
   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.
   ========================================================================= */

/* --- 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(8, 8, 7, 0.04);
	border-color: rgba(10, 141, 87, 0.45);
}

/* --- Cards de servicio: imagen arriba + bullets --- */

/* Rampa de color: de la roca a la cima (crecimiento) */
[data-orbit][data-active="0"] { --orb: #080807; --orb-ink: #F2F2F2; }
[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 { background: #080807; border-top: 0; color: var(--ink); }
.site-footer__topline { border-top: 1px solid var(--line); margin-bottom: var(--sp-5); }
.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__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; }
@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; }
}

@keyframes sc-orbit {
	0%   { transform: rotate(0deg) translateX(var(--sc-radius)) rotate(0deg); }
	100% { transform: rotate(360deg) translateX(var(--sc-radius)) rotate(-360deg); }
}
@keyframes sc-float {
	0% { transform: translateY(0); opacity: 0; }
	40% { opacity: 1; }
	100% { transform: translateY(calc(-1 * var(--sc-size))); opacity: 0; }
}

/* =========================================================================
   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 var(--motion-normal) var(--ease), color var(--motion-normal) var(--ease), transform var(--motion-fast) 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(8, 8, 7, 0.35);
	border-radius: 0; padding: 0.6rem 0; color: var(--light-ink); font-size: 1rem;
	transition: border-color var(--motion-normal) var(--ease);
}
.cc-field input:focus { outline: none; border-bottom-color: var(--light-ink); }

.cc-submit-row { text-align: right; margin: 0; }

/* =========================================================================
   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; }

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

/* --- Reseñas: tarjeta Google + tarjetas de testimonio --- */

/* Flechas del carrusel en seccion clara */

/* =========================================================================
   V9 — REGLA DE DISEÑO: cards con esquinas RECTAS (sin border-radius).
   Los pills/chips/botones sí conservan su forma. + Orbita corregida.
   ========================================================================= */
.post-card, .about-story__media img, .team-member__media img, .principles__media img {
	border-radius: 0 !important;
}

/* =========================================================================
   V10 — Copy optimizado: micro-nota del hero, intro y CTAs del metodo.
   Sin WhatsApp flotante (retirado).
   ========================================================================= */
.method__intro {
	color: var(--light-muted); max-width: 56ch;
	font-size: var(--fs-lg); margin-top: var(--sp-2);
}

/* =========================================================================
   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; }
/* 16px mínimo en móvil: evita el zoom automático de iOS al enfocar */
.cc-field input { padding: 0.45rem 0; font-size: max(16px, 0.95rem); }
@media (min-width: 900px) { .cc-field input { 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.
   ========================================================================= */

/* =========================================================================
   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; }

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

/* =========================================================================
   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).
   ========================================================================= */

/* =========================================================================
   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 var(--motion-normal) var(--ease), gap var(--motion-normal) var(--ease);
}
.btn--line:hover { color: #067A4B; gap: 0.65em; transform: none; }
.section--light .btn--line { color: var(--light-ink); }
.section--light .btn--line:hover { color: #067A4B; }

/* =========================================================================
   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); } }
.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 var(--motion-normal) var(--ease), padding-left var(--motion-normal) var(--ease);
}
.sys2-row:last-child { border-bottom: 1px solid var(--light-line); }
.sys2-row:hover { padding-left: 0.6rem; }
.sys2-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.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; }
}

/* --- Footer compacto: el reveal parallax necesita caber en el viewport --- */
.site-footer { padding-block: clamp(2rem, 5vw, 3.5rem) var(--sp-3); }
.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); }

/* =========================================================================
   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(8, 8, 7, 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__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(8, 8, 7, 0.14);
}
.syst-card__list li::before { content: "+"; position: absolute; left: 0; top: 0.45rem; color: #067A4B; }

/* 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: #080807; 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__divider {
	border-top: 1px solid rgba(8, 8, 7, 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); }
.systems__head { margin-bottom: var(--space-l); }
.page-header { padding-block: var(--space-xl) var(--space-m); }
.method__intro { margin-top: var(--space-s); }
.contact-cta { padding-block: var(--space-xl); }
/* El ritmo del footer depende del ALTO de pantalla: así cabe entero en laptops
   de 720–768px y el footer reveal (motion.js) puede activarse. */
.site-footer { --ft-gap: clamp(1.75rem, 5vh, 4.5rem); padding-block: var(--ft-gap) var(--space-s); }
.site-footer__topline { margin-bottom: var(--ft-gap); }
.site-footer__bottom { margin-top: var(--ft-gap); }
.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); }

/* =========================================================================
   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 */

/* 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.
   ========================================================================= */

/* 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; }

/* Paginacion en claro */

/* --- 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 var(--motion-normal) var(--ease), transform var(--motion-normal) 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 */

/* =========================================================================
   V32 — /work/ pulida: statement editorial (sin recuadro), filtros como
   links subrayados, barra inferior con (SCROLL), header a proporcion.
   ========================================================================= */

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

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

/* Grid: imagenes cuadradas, gaps Motto-like (x corto, y largo) */
.wk-grid { column-gap: var(--space-s); row-gap: var(--space-xl); }

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

/* Hero claro alineado a la izquierda con (SCROLL) a la derecha */
.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);
}

/* --- Dropdown flotante abajo-izquierda --- */
.wk-dd__btn {
	display: flex; align-items: center; gap: 0.8rem;
	background: #F2F2F2; 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(8, 8, 7, 0.35);
	cursor: pointer; min-width: 230px; justify-content: space-between;
}
@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); }

/* =========================================================================
   V36 — Nosotros: hero en B/N con fundido invisible hacia la seccion
   oscura + fotos de historia y equipo tambien en blanco y negro.
   ========================================================================= */

/* 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.
   ========================================================================= */

/* =========================================================================
   V38 — REVERT de la pasada anterior en internas de proyecto:
   volvemos al look del clon fiel (labels y encabezados como estaban).
   ========================================================================= */

/* =========================================================================
   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 */

/* =========================================================================
   V42 — Resultados como bullets del sistema: "+" lima, lineas finas.
   ========================================================================= */

/* =========================================================================
   V43 — /servicios/: imagen de corte full-bleed con aire lateral.
   ========================================================================= */

/* V44 — /servicios/: imagen de corte full-bleed sin padding, alto 100svh */

/* =========================================================================
   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(91%); /* ≈ #E8E8E8, tinta de marca */
	transition: opacity var(--motion-normal) var(--ease), transform var(--motion-normal) 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(242, 242, 242, 0.55); }
.lang-switch strong { color: var(--ink); }
.nav-toggle__bar { background: #F2F2F2; }

/* --- Scrim --- */
.nav-scrim {
	position: fixed; inset: 0; z-index: 97;
	background: rgba(8, 8, 7, 0.45);
	opacity: 0; pointer-events: none;
	transition: opacity var(--motion-normal) var(--ease);
}

/* --- Panel flotante --- */
.nav-panel {
	position: fixed; top: 14px; right: 14px; z-index: 98;
	width: min(560px, calc(100vw - 28px));
	background: #F2F2F2; 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;
	visibility: hidden; /* cerrado: fuera del tab-order y de lectores de pantalla */
	transition: opacity var(--motion-normal) var(--ease), transform var(--motion-normal) var(--ease), visibility 0s linear var(--motion-normal);
	max-height: calc(100vh - 28px); overflow-y: auto;
}
/* (regla muerta eliminada: .nav-panel vive FUERA de .site-header; la
   apertura real la gobierna body:has(.site-nav.is-open) en V50) */

.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 var(--motion-normal) var(--ease), color var(--motion-normal) var(--ease);
}
.nav-panel__close:hover span { background: var(--light-ink); color: var(--ink); }

.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 var(--motion-fast) 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;
}

/* Textarea del sistema (subrayado como los inputs) */
.cc-field textarea {
	background: transparent; border: 0; border-bottom: 1px solid rgba(8, 8, 7, 0.35);
	border-radius: 0; padding: 0.6rem 0; color: var(--light-ink); font-size: 1rem;
	resize: vertical; min-height: 90px;
	transition: border-color var(--motion-normal) 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__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); }

/* =========================================================================
   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, 86vh); height: auto; /* 86vh ≈ 22vh de alto */
	filter: brightness(0) invert(91%); /* ≈ #E8E8E8, tinta de marca */
	margin-bottom: var(--ft-gap);
}

/* --- Blog archivo --- */
.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); }
.bl-card__title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; color: var(--light-ink); line-height: 1.2; }

/* Destacado: ancho completo en dos columnas */

/* --- Entrada individual --- */
.post-light { background: var(--light-bg); color: var(--light-ink); }
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" --- */

/* --- Comparativa: 3 cards premium en oscuro --- */
.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); } }

/* --- Banner checklist --- */

/* =========================================================================
   CHECKLIST IDENTITY® — experiencia por pasos
   ========================================================================= */
@keyframes ck-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Sub-campo "¿En qué sector?" cuando eligen Otro */

/* Campos de contacto (sistema cc- sobre oscuro) */

/* Opciones de respuesta */

/* --- Resultado tipo mini dashboard --- */

/* =========================================================================
   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; visibility: visible; transition-delay: 0s; }
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 --- */

/* Comparativa sobre claro */
.idcompare__grid { margin-top: var(--space-xl); }

/* --- Banner checklist: panel con anillo de muestra --- */
.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; }

/* =========================================================================
   V52 — Servicios® con la estructura Identity: contenido real dentro
   del layout editorial de dos columnas.
   ========================================================================= */

/* =========================================================================
   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 */

/* Texto editorial dentro del capítulo */

/* Subtítulos intermedios (h3 sin número) */

/* Pasos del sistema como grid de bloques */

/* CTA dentro del capítulo */

/* El hero del servicio usa su imagen propia — un poco más de velo para leer */

/* =========================================================================
   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 --- */

/* --- (02) Por qué elegir Identity®: texto | imagen B/N --- */
.idwhy__intro { color: var(--light-muted); margin-top: var(--space-s); max-width: 46ch; }
.idwhy__steps { margin-top: var(--space-l); display: grid; }

/* --- (03) Caminos: comparativa 3 columnas tipo planes --- */

/* --- Checklist: la intro es un hero como el home (patrón para todos los checklists) --- */ /* 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 --- */

/* --- V55: Care® — pill de membresía en la comparativa --- */

/* --- V56: Engage® — sección IA + automatización (oscura) con chips de socios --- */

/* --- V56.1: comparativa de pauta en 2 columnas (Engage®) --- */

/* --- 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); }

/* --- 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__bg { position: absolute; inset: 0; }
.bl-hero__bg img { width: 100%; height: 100%; object-fit: cover; }

/* Lectura: aside sticky + contenido */ /* 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-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__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-item { border-bottom: 1px solid rgba(8, 8, 7, 0.14); } /* en móvil el toggle manda */

/* --- V61: resultado del Test Impulse® --- */

/* --- V62: página legal con diagramación Andez --- */

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

/* --- 404 --- */
.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; }

/* --- Prosa a prueba de móvil: nada rompe el ancho --- */

/* --- 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; }
}

/* --- 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 --- */

/* --- Filas de automatizaciones: tap targets y respiro en móvil --- */

/* --- Comparativas: la banda de plan personalizado apila y centra --- */

/* --- Checklist/Test: opciones cómodas para el pulgar --- */

/* --- 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 var(--motion-normal) var(--ease);
	}
	nav.site-footer__col.is-open .site-footer__title::after { content: "−"; }
	/* Solo colapsan cuando hay JS (html.has-js). Sin JS, los 14 enlaces
	   del footer siguen visibles: nunca se pierde la navegación secundaria. */
	nav.site-footer__col ul { padding-bottom: 1rem; }
	.has-js nav.site-footer__col ul { display: none; }
	.has-js 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) {

	/* Archivo /work/: cards más panorámicas = más proyectos por scroll */
	.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); }
}

/* =========================================================================
   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); }
	.faq-intro__title { font-size: clamp(1.25rem, 5.5vw, 1.6rem); }
	/* 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: #080807; }
.section--light ::selection { background: #067A4B; color: var(--ink); }
html { scroll-padding-top: 96px; } /* anclas nunca quedan bajo el navbar fijo */
* { -webkit-tap-highlight-color: transparent; }

/* Scrollbar de página: canal claro, barrita negra fina y recta */
html { scrollbar-width: thin; scrollbar-color: #080807 #F2F2F2; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #F2F2F2; }
::-webkit-scrollbar-thumb { background: #080807; border-radius: 0; border: 0; }
::-webkit-scrollbar-thumb:hover { background: #1d241f; }
::-webkit-scrollbar-corner { background: #F2F2F2; }

/* --- 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 */

/* --- Cards de proyecto: zoom más fino + título que responde --- */
.project-card__media img { transition: transform var(--motion-slow) var(--ease), opacity var(--motion-slow) ease-out; }
.project-card:hover .project-card__media img { transform: scale(1.035); }
.project-card__title { transition: color var(--motion-normal) 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 var(--motion-slow) ease-out, transform var(--motion-slow) 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 var(--motion-slow) 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 var(--motion-slow) ease-out, transform var(--motion-slow) 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 var(--motion-fast) var(--ease), transform var(--motion-normal) 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 --- */
.site-footer__col a { display: inline-block; transition: transform var(--motion-normal) var(--ease), color var(--motion-fast) var(--ease), opacity var(--motion-fast) var(--ease); }
.site-footer__col a:hover { transform: translateX(4px); }

/* --- FAQ: la respuesta entra suave --- */
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: 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: var(--ink); letter-spacing: 0.01em; }
.nav-toggle__bars { display: flex; flex-direction: column; gap: 5px; }

.lang-switch a { color: rgba(242, 242, 242, 0.5); font-weight: 500; transition: color var(--motion-fast) var(--ease); }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a.is-lang-active { color: var(--ink); font-weight: 600; }

/* =========================================================================
   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 > * {
		animation: andez-rise 0.75s var(--ease) both;
	}

.hero__inner > :nth-child(1) { animation-delay: 0.12s; }

.hero__inner > :nth-child(2) { animation-delay: 0.2s; }

.hero__inner > :nth-child(3) { animation-delay: 0.28s; }

.hero__inner > :nth-child(4) { animation-delay: 0.36s; }
	.hero__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 { 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,.bl-hero__bg img {
	will-change: transform;
	transform: scale(1.12);
}

/* --- Compartir del blog: iconos horizontales --- */

/* --- Gracias premium --- */
.gracias { min-height: 86svh; display: grid; align-items: center; background: var(--bg); }
.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; }

/* --- 404 profesional: numeral fantasma + mapa de rutas --- */

/* --- Páginas claras: menos aire arriba, más contenido a la vista --- */
.page-header { padding-top: clamp(5.5rem, 9vw, 7rem); }

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

/* --- Banda de diferenciales --- */

/* --- 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: #080807; border: 0; cursor: pointer;
	display: grid; place-items: center;
	box-shadow: 0 14px 40px -12px rgba(20, 241, 149, 0.55);
	transition: transform var(--motion-normal) var(--ease), box-shadow var(--motion-normal) 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: #F2F2F2; 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: #0D0D0C; 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: #10100E;
}
.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__wa {
	display: block; text-align: center; background: var(--accent); color: #080807;
	font-weight: 700; font-size: 0.92rem; border-radius: 999px; padding: 0.85rem 1rem;
	transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) 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: #080807;
	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: #080807; border: 0;
	border-radius: 14px 14px 4px 14px; font-weight: 600;
}
.aa-m--user .aa-m__bubble strong { color: #080807; }

/* 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 var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}
.aa__chip:hover { background: var(--accent); color: #080807; }
.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 */

	/* Título del hero: a 8.6vw la frase no cabía y dejaba «tu» colgando
	   en su propia línea antes del recuadro. */
	.hero--home .hero__title { font-size: clamp(1.5rem, 7vw, 2.15rem); letter-spacing: -0.03em; }
	.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__btn { width: 100%; min-width: 0; border-radius: 999px; }
	.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 */
}

/* En móvil el filtro está arriba (sticky): el panel abre hacia ABAJO */

/* =========================================================================
   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.
   ========================================================================= */ /* "en «se ve bonito»" jamás se separa */

@media (max-width: 640px) {
	/* Hero compacto: de pantalla completa a tarjeta de presentación */
	.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; } /* 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); }
}

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

/* --- V74: auditoria implementada — hero__sub y evidencia en cards --- */

/* --- 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; }
/* En el footer el slot de Turnstile debe aportar CERO altura: el footer-reveal
   (motion.js) solo se activa si el footer cabe en el viewport, y los ~6px del
   slot bastaban para apagar la animación en pantallas justas. Absoluto: si CF
   llega a mostrar un desafío, se superpone en vez de engordar el footer. */
.site-footer .newsletter-form { position: relative; }
.site-footer .cf-turnstile { position: absolute; bottom: 0; left: 0; margin: 0; }

/* (Los pases editoriales V80 viven al FINAL del archivo: la cascada les
   pertenece — aquí en medio los pisaban los bloques V78/V79 posteriores.) */

/* --- V77: hero de Nosotros más alto y con fundido perfecto al fondo
       (el borde de la imagen jamás se nota) --- */

/* =========================================================================
   V78 — AUDITORÍA MÓVIL CONSOLIDADA (legibilidad, tap targets, overflow).
   Bloque único al final del archivo: gana la cascada de forma predecible.
   Orden interno: 1) tipografía/overflow  2) método y stack  3) header/menú
   4) formularios  5) footer  6) carruseles  7) tap targets  8) misc.
   ========================================================================= */

/* ---- 1. Tipografía: sin desbordes ni viudas -------------------------- */
p,
.method__intro,
.hero__lead,
.syst-card__desc {
	text-wrap: pretty;
}

h1,h2,h3,h4,h5,h6,p,li,dd,.bl-card__title,.syst-card__name {
	overflow-wrap: break-word;
}
.nav-panel__mail { overflow-wrap: anywhere; }

@media (max-width: 640px) {
	/* line-height 1.05 funciona a 1-2 líneas de desktop; a 3-5 líneas de
	   móvil los descendentes chocan. Aire vertical real: */
	h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; }
	.hero__title, .hero--home .hero__title { line-height: 1.12; }
	.section__title,
.systems__title,
.contact-page2__title,
.blog-page__title,
.faq-title,
.e404__title,
.gracias__title,
.work-hero__title { line-height: 1.15; }

	/* frame-box: conserva su rotación y blur (vida en móvil); solo se
	   reducen los "+" decorativos para que no invadan la línea vecina */
	.frame-box::before, .frame-box::after { font-size: 0.75rem; }
}

/* "en «se ve bonito»" puede partirse en pantallas estrechas: mejor dos
   líneas que un recorte silencioso bajo overflow-x:hidden */

@media (max-width: 640px) {
	/* V26 (min-height:86vh, sin media query) pisaba los fixes móviles de
	   V23/V24: 6 paneles × 86vh ≈ 5 pantallas de scroll casi vacío */
	.syst-card { position: static; min-height: 0; padding-block: var(--space-l); }
	.syst-card::after { content: none; }

	/* El head flex desbordaba con "Intelligence®" a 41.6px + gap + "05" */
	.syst-card__head { gap: var(--sp-2); align-items: baseline; }
	.syst-card__name { font-size: clamp(1.9rem, 9vw, 2.6rem); }
	.syst-card__name { min-width: 0; }
}
/* Tablet (641-899px): también sin sticky-stack — heredaba el 86vh desktop */
@media (max-width: 899px) {
	.syst-card { position: static; min-height: 0; }
}

/* ---- 3. Header y menú ------------------------------------------------- */
/* El header conserva su look original en móvil: logo solito con el blend
   difference (se auto-invierte según el fondo), SIN fondo detrás.
   EN/ES + Menú comparten UNA sola píldora sutil para ser legibles sobre
   fotos. */
@media (max-width: 900px) {
	.site-nav {
		background: rgba(242, 242, 242, 0.12);
		border: 1px solid rgba(242, 242, 242, 0.22);
		border-radius: 999px;
		padding: 2px 14px 2px 10px;
		gap: var(--sp-2);
	}
	.lang-switch a { color: rgba(242, 242, 242, 0.75); }
}

/* Selector de idioma: de ~20×16px a targets de 44px */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; }
.lang-switch a, .lang-switch strong {
	display: inline-grid; place-items: center;
	min-width: 34px; min-height: 44px; font-size: 0.85rem;
}

/* Enlaces del menú móvil: fila completa clicable y ≥48px de alto */
@media (max-width: 900px) {
	.nav-panel .menu--primary { gap: 0; }
	.nav-panel .menu--primary a {
		display: flex; align-items: center;
		width: 100%; min-height: 48px; padding: 0.3rem 0;
	}
}
/* Botón cerrar del panel: target cómodo */
.nav-panel__close { min-height: 44px; }
.nav-panel__close span { width: 36px; height: 36px; }

/* Redes/email dentro del panel: targets de 44px */
@media (max-width: 560px) {
	.nav-panel__side { gap: 0 1.1rem; }
	.nav-panel__side a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.95rem; }
	.nav-panel__mail { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Con el menú abierto, el chat flotante se aparta (compartía z-index 97
   con el scrim y quedaba flotando sobre la capa oscura) */
body:has(.site-nav.is-open) .aa { opacity: 0; pointer-events: none; transition: opacity var(--motion-fast); }

/* ---- 4. Formularios ---------------------------------------------------- */
/* Chips del formulario de leads: mínimo táctil real */
@media (max-width: 640px) {
	.cc-pill span { padding: 0.7rem 1.05rem; font-size: 0.9rem; min-height: 44px; display: inline-flex; align-items: center; }
	.cc-pills { gap: 0.7rem; }

	/* El submit compartía esquina con el chat flotante */
	.cc-submit-row { text-align: left; }
	.cc-submit-row .btn { width: 100%; }
	.contact-cta__form { padding-bottom: 4.5rem; }
}

/* ---- 5. Footer ---------------------------------------------------------- */
/* Newsletter: el aviso legal es letra pequeña, NO un párrafo destacado.
   Hace falta la especificidad de .site-footer__newsletter porque esa regla
   pinta todos sus <p> en blanco y peso 600 — el legal salía en negrita. */
.site-footer .site-footer__newsletter .newsletter-form__legal {
	font-size: 0.72rem; line-height: 1.55; font-weight: 400;
	color: var(--muted); opacity: 0.8; max-width: 46ch;
}
.site-footer .site-footer__newsletter .newsletter-form__legal a {
	color: var(--muted); font-weight: 400;
	text-decoration: underline; text-underline-offset: 2px;
}
.site-footer .site-footer__newsletter .newsletter-form__legal a:hover { color: var(--ink); }

/* Newsletter móvil: botón real de 48px en vez de "→" de 24px sobre el input */
@media (max-width: 719px) {
	.site-footer .newsletter-form input[type="email"] { padding-right: 0; font-size: max(16px, 1rem); }
	.site-footer .newsletter-form__row .btn {
		position: static; transform: none; margin-top: 0.75rem;
		width: 100%; min-height: 48px;
		background: var(--accent); color: var(--accent-ink);
		border-radius: 999px; font-size: 1rem;
	}
	.site-footer .newsletter-form__row .btn:hover { background: var(--accent); color: var(--accent-ink); }
}

/* Logo del footer en móvil (el selector de V63 no matcheaba: la clase ES el img) */
@media (max-width: 640px) {
	img.site-footer__marklogo { width: min(78vw, 320px); }
}

/* Las preguntas del FAQ son h3 (aparecen en el índice de encabezados de
   lectores de pantalla) sin cambiar el look del summary */

/* El toggle del acordeón es un <button> real dentro del h2 (semántica de
   encabezado + teclado nativo). Hereda el look del título. */
.site-footer__acc {
	all: unset; cursor: pointer;
	font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
	flex: 1; display: inline-flex; align-items: center; min-height: 44px;
}
.site-footer__acc:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* NAP visible (coherencia con el schema LocalBusiness) */
.site-footer__nap { font-style: normal; display: inline; }
.site-footer__nap a { color: var(--muted); }
.site-footer__nap a:hover { color: var(--accent); }

/* Sociales "in/Ig/X" y volver arriba: de ~15×20px a 44px */
.site-footer__social a, .back-top {
	display: inline-grid; place-items: center;
	min-width: 44px; min-height: 44px;
}
@media (max-width: 640px) {
	.site-footer .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}

/* ---- 6. Carruseles ------------------------------------------------------ */
/* En táctil no hay flechas ni scrollbar: el snap + tarjeta asomando son la
   única affordance de que se puede deslizar */
@media (pointer: coarse) {
	.hscroll { scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); }
	.hscroll > * { scroll-snap-align: start; }
}
@media (max-width: 640px) {
	/* Re-aplica la intención de V65 (V66 la pisaba sin media query) */
	.work--carousel .hscroll .project-card { width: min(80vw, 340px); }
}

/* ---- 7. Tap targets sueltos --------------------------------------------- */
.aa__close { min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; font-size: 1.05rem; }

/* Sin JS, los fieldsets progresivos del formulario quedan visibles */
html:not(.has-js) .cc-follow { display: block; }

/* Barra de migas bajo el hero de plantillas profundas */

/* --- Migas integradas: barra fina, no texto suelto flotando ---
   Se apoyan en una línea inferior y quedan pegadas al contenido, con
   contraste real (antes se leían desvaídas). */

/* Sobre fondo claro, [aria-current] heredaba var(--ink) (casi blanco) y la
   página actual quedaba invisible. Aquí manda la tinta oscura. */

/* Blog y Legal en móvil: el artículo PRIMERO, el aside (autor/compartir/
   índice) después. Antes el lector veía una pantalla de metadatos antes
   de la primera línea de contenido. */

/* ---- 8. Misc: opacidades hover, viewport iOS, grids y ritmo ------------- */
/* En táctil no existe hover: nada se queda "apagado" para siempre */

/* 100vh → 100svh/dvh: iOS no recorta bajo la barra de URL */
.aa__chat { height: min(46svh, 400px); }
@media (prefers-reduced-motion: reduce) { .aa__chat { scroll-behavior: auto; } }

/* Imagen decorativa full-bleed de /servicios/: de 100svh a franja */

/* /work/ en tablet (641-899px): el filtro flotante tapaba las cards */

/* Ritmo vertical móvil: los clamp() de V29 quedaban clavados en su mínimo
   desktop (72px+48px por sección = 24% del viewport en blanco) */
@media (max-width: 640px) {
	:root {
		--space-l:  clamp(2rem, 5vw, 4.5rem);
		--space-xl: clamp(2.75rem, 8vw, 8rem);
		--space-2xl: clamp(3.5rem, 11vw, 11rem);
	}
	/* min-height decorativos que inflaban el scroll */

}
@media (max-width: 480px) {
	/* Columnas de numeración: 64px para un "(01)" dejaba 248px al contenido */
}
@media (max-width: 640px) {
	/* Ghost 404: el mínimo del clamp (224px) cruzaba los CTAs */
}

/* =========================================================================
   V80 — REPOSICIONAMIENTO: navegación por Soluciones, footer de 5 grupos
   y honeypot verdaderamente invisible.
   ========================================================================= */

/* --- Honeypot: sin texto, sin espacio, fuera del flujo --- */
.hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* --- MENÚ LATERAL DE ALTURA COMPLETA ---
   Panel pegado al borde derecho, de arriba abajo, esquinas rectas.
   Ya no es una tarjeta flotante redondeada con scroll interno. */
.nav-panel {
	position: fixed; top: 0; right: 0; bottom: 0; left: auto;
	width: min(560px, 100vw);
	height: 100dvh; max-height: 100dvh;
	border-radius: 0;
	box-shadow: -30px 0 80px -30px rgba(0, 0, 0, 0.5);
	overflow-y: auto;
	padding: clamp(1.1rem, 3vh, 2.2rem) clamp(1.25rem, 3vw, 2.4rem);
	transform: translateX(24px);
	transform-origin: right center;
	opacity: 0;
	transition: opacity var(--motion-normal) var(--ease), transform var(--motion-normal) var(--ease), visibility 0s linear var(--motion-normal);

	/* El contenido se reparte de arriba abajo: nada apelotonado arriba con
	   la mitad del panel vacía. Redes y correo cierran en la MISMA línea. */
	display: grid;
	align-content: space-between;
	justify-content: stretch;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"top   top"
		"links links"
		"sol   sol"
		"cta   cta"
		"side  mail";
	gap: clamp(0.9rem, 2.2vh, 2rem) var(--space-s);
}
body:has(.site-nav.is-open) .nav-panel { opacity: 1; transform: translateX(0); }

.nav-panel__top {
	border-bottom: 1px solid var(--light-line); padding-bottom: 0.9rem;
	font-size: clamp(0.68rem, 2.4vw, 0.8rem);
}

/* Enlaces principales — tipografía fluida en LAS DOS dimensiones.
   Con un clamp basado solo en vh el texto no encogía al angostar la
   ventana: en pantallas estrechas seguía a 30px y desbordaba. */
.nav-panel .nav-panel__links a,
.nav-panel .menu--primary a {
	font-size: clamp(1.05rem, min(3.7vh, 5.4vw), 1.85rem);
	line-height: 1.25;
	min-height: 42px;
	padding: 0.05rem 0;
}
.nav-panel__links { gap: 0.15rem; }
.nav-count { font-size: 0.58rem; padding: 0.08rem 0.4rem; margin-top: 0.35rem; }

/* Soluciones */
.nav-sol {
	grid-area: sol;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.9rem, 2vh, 1.6rem) var(--space-m);
	padding-top: var(--space-s);
	border-top: 1px solid var(--light-line);
	align-content: start;
}
@media (min-width: 900px) {
	.nav-sol { border-top: 0; padding-top: 0; }
}
.nav-sol__title {
	font-size: clamp(0.52rem, 1.9vw, 0.6rem); font-weight: 700; letter-spacing: 0.09em;
	text-transform: uppercase; color: var(--light-muted);
	margin-bottom: 0.35rem;
	/* Sin esto, la regla global de overflow-wrap partía «CRECIMIENTO»
	   y «EMPRESARIAL» a mitad de palabra. */
	overflow-wrap: normal; word-break: normal; hyphens: none;
	white-space: nowrap;
}
.nav-sol__col ul { display: grid; gap: 0; }
.nav-sol__col a {
	display: flex; align-items: center; min-height: 30px;
	color: var(--light-ink); font-size: clamp(0.72rem, 2.5vw, 0.8rem); font-weight: 500;
	line-height: 1.25;
	transition: color var(--motion-fast) var(--ease);
}
.nav-sol__col a:hover { color: #067A4B; }

/* CTA a todo el ancho del panel */
.nav-panel__cta { grid-area: cta; justify-self: stretch; text-align: center; }

/* Redes y correo: cierran el panel en una sola línea (misma fila del grid,
   mismo borde superior, misma altura). */
/* align-self: stretch en AMBOS — con `end` cada bloque tenía su propia
   altura y los dos bordes superiores quedaban a distinta altura, como dos
   rayas desalineadas. Estirados, comparten el borde exacto. */
.nav-panel .nav-panel__side {
	grid-area: side; align-self: stretch;
	display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
	gap: 0 1.1rem;
	padding-top: var(--space-s);
	min-height: 34px;
	border-top: 1px solid var(--light-line);
}
.nav-panel .nav-panel__side a { font-size: clamp(0.68rem, 2.3vw, 0.76rem); min-height: 34px; }
.nav-panel__mail {
	grid-area: mail; align-self: stretch; justify-self: end;
	display: flex; align-items: center; min-height: 34px;
	font-size: clamp(0.68rem, 2.3vw, 0.76rem);
	padding-top: var(--space-s);
	border-top: 1px solid var(--light-line);
	white-space: nowrap;
}
/* Solo en pantallas muy estrechas el correo baja a su propia línea */
@media (max-width: 430px) {
	.nav-panel {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "top" "links" "sol" "cta" "side" "mail";
	}
	.nav-panel__mail { justify-self: start; border-top: 0; padding-top: 0; }
	.nav-panel .nav-panel__side { padding-bottom: 0.2rem; }
}

/* Móvil: escala ajustada para que TODO el menú quepa sin scroll */
@media (max-width: 899px) {
	.nav-panel { gap: 0.62rem; padding-block: 1rem; }
	.nav-panel__top { padding-bottom: 0.6rem; }
	/* También fluido por ancho: con un clamp de solo vh el texto se quedaba
	   en 28px en pantallas estrechas. */
	.nav-panel .nav-panel__links a,
	.nav-panel .menu--primary a { font-size: clamp(1.05rem, min(3.9vh, 5.6vw), 1.7rem); min-height: 40px; }
	.nav-sol { padding-top: 0.7rem; gap: 0.7rem var(--space-s); }
	.nav-sol__col a { min-height: 30px; font-size: 0.83rem; }
	/* Redes y correo comparten caja EXACTA: mismo padding y misma altura
	   mínima. Con valores distintos sus textos quedaban desfasados aunque
	   los bordes coincidieran. */
	.nav-panel .nav-panel__side,
	.nav-panel .nav-panel__mail { padding-top: 0.7rem; min-height: 34px; }
	.nav-panel .nav-panel__side a { min-height: 32px; }
}

/* Móvil muy estrecho: soluciones en una columna */
@media (max-width: 380px) {
	.nav-sol { grid-template-columns: 1fr; }
}
/* Pantallas bajas: recorta la escala para que no aparezca scroll */
@media (max-height: 640px) {
	.nav-panel .nav-panel__links a, .nav-panel .menu--primary a { font-size: 1.35rem; min-height: 38px; }
	.nav-panel { gap: 0.7rem; }
}

/* Bloqueo de scroll del fondo con el menú abierto */
body:has(.site-nav.is-open) { overflow: hidden; }

/* =========================================================================
   V81 — /work/ en oscuro + los proyectos visibles desde el primer scroll,
   y cierre del hero de Nosotros sin costura.
   ========================================================================= */

/* --- /work/ pasa a fondo oscuro --- */

.work-hero__title { color: var(--ink); }

/* Badge del hero sobre oscuro */

/* Tarjetas */

/* Filtro flotante */

/* Paginación */

/* El recuadro del titular, sobre oscuro */

/* Fondo fotográfico del hero, con velo para que el texto siempre se lea */

/* --- Filtro flotante del archivo de proyectos ---
   Vuelve el desplegable de siempre, ahora con los filtros agrupados por
   sistema, solución, sector y tecnología dentro del mismo panel. */
/* El panel lista cuatro opciones: cabe entero, sin scroll propio.
   Con scroll interno el gesto se escapaba a la página y se veía pesado. */
/* El punto del activo va al inicio, sin empujar el texto de las demás filas */

/* Hero compacto: antes ocupaba 74vh y el grid quedaba fuera de pantalla,
   así que con el reveal por scroll la página parecía vacía. Ahora la
   primera fila asoma y las tarjetas entran a la vista al instante. */

/* --- Nosotros: el hero cierra en el mismo negro que la sección siguiente ---
   El degradado llegaba a opaco justo en el 100%, así que en el último tramo
   todavía se veía la foto y aparecía una línea de corte. Ahora el fundido
   termina antes y el resto ya es fondo sólido. */

/* --- Nosotros · «Por qué elegir Andez»: la imagen acompaña a la lista ---
   Con align-items:start la columna no se estiraba y la foto se quedaba
   pequeña arriba, dejando un hueco grande debajo. */
@media (min-width: 900px) {
	.principles__media { display: flex; min-height: 100%; }
	.principles__media img {
		width: 100%; height: 100%;
		object-fit: cover; object-position: center;
		min-height: 420px;
	}
}

/* --- Footer de 5 grupos --- */
@media (min-width: 640px) {
	.site-footer__links--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.site-footer__links--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-s); }
}
@media (min-width: 900px) {
	.site-footer__grid { grid-template-columns: 1.9fr 1fr; }
}

/* =========================================================================
   V79 — Cards de proyecto VERTICALES (más altas que anchas) en todo el
   sitio + navbar móvil de una sola píldora + fix de texto cortado en
   las cards de /work/.
   ========================================================================= */

/* Carruseles (home, /servicios/, relacionados): retrato editorial.
   V80: el retrato se conserva pero ESCALA — la obra manda (basement). */
.work--carousel .project-card__media { aspect-ratio: 4 / 5; }
.work--carousel .project-card { width: clamp(260px, 32vw, 480px); }

/* Grid /proyectos/: tarjetas bajas. A 4/5 y a 1/1 seguían comiéndose la
   pantalla; con 4/3 caben varias filas y el portafolio se recorre rápido. */

/* Las tarjetas de proyecto nunca se ocultan esperando el scroll */
.wk-grid > .wk-card.stag { opacity: 1; transform: none; }
@media (max-width: 640px) {
	/* También baja en móvil: mantener 4/5 aquí anulaba el 4/3 del grid */

	/* La etiqueta de categoría a la derecha estrangulaba el tagline
	   (texto "cortado"); la info ya vive en la línea verde inferior */
}

/* =========================================================================
   V80 — PASE EDITORIAL «TOP» (al final del archivo: la cascada es suya).
   Principios destilados de basement.studio / Exo Ape / Ascend / Locomotive,
   ejecutados con identidad Andez: oscuro + lima + labels técnicos mono.
   ========================================================================= */

/* Contador técnico de sección: [19] en mono, discreto, muy Andez. */
.sec-label__count { font-family: var(--font-mono, monospace); color: var(--muted); font-weight: 400; letter-spacing: 0.04em; }
.section--light .sec-label__count { color: var(--light-muted); }

@media (min-width: 900px) {
	/* Títulos de sección a escala display: una idea, dicha en grande. */
	.section__title,
	.systems__title { font-size: clamp(3rem, 2rem + 2.9vw, 4.4rem); line-height: 1.02; letter-spacing: -0.035em; }
	.contact-cta__title { font-size: clamp(3.2rem, 6.2vw, 5.6rem); letter-spacing: -0.035em; }

	/* Nombre de proyecto a escala editorial bajo el retrato 4/5. */
	.work--carousel .project-card__title { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; }
	.work--carousel .project-card__tagline { font-size: 0.85rem; }
}

/* Menos texto por pantalla en móvil: cada sección dice UNA cosa.
   Lo que se oculta aquí sigue viviendo en las páginas interiores. */
@media (max-width: 640px) {
	/* Hero: título + lead + CTA. El selector de rutas es ruido en móvil. */
	/* Cards de servicios: nombre + promesa + Explorar (los bullets, dentro). */
	.syst-card__list { display: none; }
}

/* =========================================================================
   CAPA FINAL — Sistema Andez (referencia editorial: bymonolog.com)
   Va al final de skin.css y es la única capa que manda sobre las anteriores.

   ESCALA TIPOGRÁFICA (todo fluido entre 320px y 1600px)
     h1   --fs-4xl   Hero y CTA final             32 → 64px
     h2   --fs-3xl   Títulos de sección           30 → 48px, frase + frame-box
     h3   --fs-h3    Tarjetas grandes (planes…)   24 → 36px
     h4   --fs-xl    Títulos de bloque y tarjeta  22 → 24px, negrita
     p    --fs-base  Texto                        16 → 18px, gris, peso medio
     ·    mono       Etiquetas                    ~11px, MAYÚSCULAS, gris
   ========================================================================= */
:root {
	/* Margen lateral mínimo: 12px en móvil → 28px en 1600px. */
	--gutter:    clamp(0.75rem, 0.5rem + 1.25vw, 1.75rem);
	--container: none;

	--fs-sm:   clamp(0.875rem, 0.844rem + 0.156vw, 1rem);
	--fs-base: clamp(1rem, 0.969rem + 0.156vw, 1.125rem);
	--fs-lg:   clamp(1.125rem, 1.094rem + 0.156vw, 1.25rem);
	--fs-xl:   clamp(1.375rem, 1.344rem + 0.156vw, 1.5rem);
	--fs-2xl:  clamp(1.5rem, 1.125rem + 1.875vw, 3rem);
	--fs-h3:   clamp(1.5rem, 1.15rem + 1.1vw, 2.25rem);  /* subtítulos de tarjeta grande: siempre < h2 */
	--fs-3xl:  clamp(1.9rem, 1.3rem + 1.9vw, 3rem);
	--fs-4xl:  clamp(2rem, 1.3rem + 3vw, 4rem);

	--ink-soft: #938F8A;   /* gris cálido de textos secundarios y etiquetas */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

body { line-height: 1.45; }
h1, h2, h3 { letter-spacing: -0.03em; }

/* h1 */
.hero__title,.about-hero__title,.work-hero__title,.contact-page2__title,.blog-page__title,.faq-title,.gracias__title,.e404__title,.contact-cta__title {
	font-size: var(--fs-4xl); line-height: 1; letter-spacing: -0.03em;
}
/* h2 */
.section__title, .systems__title, .idcheck2__title, .faq-intro__title {
	font-size: var(--fs-3xl); line-height: 1; letter-spacing: -0.03em;
}
/* h3 de tarjetas grandes */
.method__intro, .hero__lead { font-size: var(--fs-base); line-height: 1.45; }

/* Rótulos numerados «(02) SERVICIOS [06]» fuera; los que son el único
   encabezado de su bloque (h2/h3) quedan solo para lectores de pantalla. */
p.sec-label, span.sec-label, div.sec-label { display: none !important; }
h2.sec-label, h3.sec-label {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Mismo rótulo en fichas y servicios «(01) Manifiesto»: se aplana a alto cero
   para que su columna de la cuadrícula se conserve y el texto no se corra. */

/* -------------------------------------------------------------------------
   Reveal tipográfico por líneas (motion.js · initTextReveal)
   Cada línea sube desde su máscara; el recorte deja ver descendentes y las
   esquinas del frame-box, y oculta la línea mientras está abajo.
   ------------------------------------------------------------------------- */
.lr-mask { display: block; clip-path: inset(-0.4em -0.6em -0.25em -0.6em); }
.lr-line {
	display: block; transform: translateY(135%);
	transition: transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms);
}
.lr-in .lr-line { transform: none; }
/* Hasta que motion.js parte los títulos de entrada (clase puesta en <head>). */
.lr-boot :is(.about-hero__title,.work-hero__title,.contact-page2__title,.blog-page__title,.faq-title,.gracias__title,.e404__title) { visibility: hidden; }

/* -------------------------------------------------------------------------
   Botones: más aire, sin sombra ni salto. El acento en hover pierde el
   relleno y queda trazo + texto (en tinta sobre fondos claros).
   ------------------------------------------------------------------------- */
.btn { padding: 1rem 1.75rem; }
.btn:hover, .btn:active { transform: none; box-shadow: none; }
.btn--accent {
	border: 1px solid var(--accent);
	transition: background-color var(--motion-normal) var(--ease), color var(--motion-normal) var(--ease), border-color var(--motion-normal) var(--ease);
}
.btn--accent:hover, .btn--accent:focus-visible {
	background: transparent; color: var(--accent); border-color: var(--accent); box-shadow: none;
}
.section--light .btn--accent:hover, .section--light .btn--accent:focus-visible, .post-light .btn--accent:hover {
	color: var(--light-ink); border-color: var(--light-ink);
}

/* -------------------------------------------------------------------------
   Hero de portada
   ------------------------------------------------------------------------- */
/* Etiqueta: texto mono en mayúsculas, sin caja ni trazo. */

.hero--home .hero__actions { align-items: center; }
.hero--home .hero__actions .btn { font-size: 0.95rem; padding: 1.05rem 1.9rem; }
.hero--home .hero__link { font-size: 0.95rem; }

/* Cortina de pliegues (hero-pleats.js): sobre la imagen, bajo el texto. */
.hero--home .hero__pleats {
	position: absolute; inset: 0; z-index: 1;
	width: 100%; height: 100%; pointer-events: none;
	opacity: 0; transition: opacity 1.2s var(--ease);
}
.hero--home.has-pleats .hero__pleats { opacity: 1; }
/* Grano de película (tesela generada en hero-pleats.js). */
.hero--home.has-pleats::after {
	content: ""; position: absolute; inset: -50%; z-index: 1; pointer-events: none;
	background-image: var(--hero-grain); background-size: 160px 160px;
	mix-blend-mode: overlay; opacity: 0.14;
	animation: andez-grain 0.9s steps(6) infinite;
}
@keyframes andez-grain {
	0%, 100% { transform: translate(0, 0); }
	20%      { transform: translate(-7%, 4%); }
	40%      { transform: translate(5%, -6%); }
	60%      { transform: translate(-4%, -3%); }
	80%      { transform: translate(6%, 5%); }
}
@media (prefers-reduced-motion: reduce) { .hero--home.has-pleats::after { animation: none; } }

/* En PC y tablet el hero deja asomar el carrusel de proyectos. */
@media (min-width: 768px) {
	.hero--home {
		--peek: clamp(96px, 17vh, 190px);
		display: flex; flex-direction: column; justify-content: center;
		height: calc(100svh - var(--peek)); min-height: 520px;
		padding-top: 4.5rem; padding-bottom: 1.5rem;
	}
	.hero--home .hero__inner { padding-bottom: 0; }
}

/* Chat flotante: entra cuando el hero sale de pantalla (clase de hero-pleats.js). */
.aa { transition: opacity var(--motion-normal) var(--ease), transform var(--motion-normal) var(--ease); }
body.hero-in-view .aa:not(.aa--open) { opacity: 0; transform: translateY(16px); pointer-events: none; }
/* En Contacto el formulario es la acción: el chat no le tapa el botón de enviar. */
body:has(.contact-page2) .aa { display: none; }

/* -------------------------------------------------------------------------
   CTA final
   ------------------------------------------------------------------------- */
@media (min-width: 960px) {
	.contact-cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

/* -------------------------------------------------------------------------
   Carrusel de proyectos: tarjetas 3:2, título en tinta y bajada en gris.
   ------------------------------------------------------------------------- */
/* Solo el carrusel que sigue al hero de portada se pega a él (asoma bajo el hero). */
.hero--home:not(.hero--inner) + .work--carousel { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 768px) { .hero--home:not(.hero--inner) + .work--carousel { padding-top: 0; } }
.work--carousel .project-card,
.work--carousel .hscroll .project-card { width: clamp(300px, 40vw, 620px); }
.work--carousel .project-card__media { aspect-ratio: 3 / 2; }
.work--carousel .project-card__body { display: grid; gap: 0.2rem; padding: 0.9rem 0 0; max-width: 40ch; }
.work--carousel .project-card__title {
	margin: 0; font-size: var(--fs-lg); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink);
}
.work--carousel .project-card__tagline {
	margin: 0; font-size: var(--fs-base); font-weight: 500; line-height: 1.35; letter-spacing: -0.005em; color: var(--ink-soft);
}
.work--carousel .project-card:hover .project-card__title { color: var(--ink); }
@media (max-width: 640px) {
	.work--carousel .project-card,
	.work--carousel .hscroll .project-card { width: min(84vw, 360px); }
}

/* -------------------------------------------------------------------------
   Sistemas: nombre como título de bloque, número como etiqueta mono.
   ------------------------------------------------------------------------- */
.syst-card__name { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: -0.03em; line-height: 1; }
.syst-card__desc {
	font-size: var(--fs-base); font-weight: 500; line-height: 1.4; letter-spacing: -0.005em;
	color: var(--light-muted); max-width: 38ch;
}
.syst-card__divider { margin-block: clamp(1rem, 2.5vh, 2rem); }

/* -------------------------------------------------------------------------
   Cómo trabajamos (template-parts/method-orbit.php)
   Medidas de «Project Journey» de Monolog: etiqueta ≈12% · texto ≈39% ·
   imagen 16:9 ≈49%, pegada al filete superior de su fila.
   ------------------------------------------------------------------------- */
.journey-step__name {
	margin: 0 0 0.9rem;
	font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.5rem); font-weight: 700;
	line-height: 1.1; letter-spacing: -0.015em; color: var(--ink);
}
.journey-step__desc {
	margin: 0; max-width: 20em;
	font-size: clamp(1rem, 0.92rem + 0.25vw, 1.125rem); font-weight: 500;
	line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-soft);
}

/* Lo que siempre incluye Andez, dentro del paso al que pertenece. */

/* -------------------------------------------------------------------------
   Footer: links fluidos sin partir línea + «Pregúntale a la IA por Andez».
   ------------------------------------------------------------------------- */
.site-footer .site-footer__col a { font-size: clamp(0.78rem, 0.6rem + 0.35vw, 0.95rem); white-space: nowrap; }
.site-footer .site-footer__title,
.site-footer .site-footer__title .site-footer__acc { font-size: clamp(0.82rem, 0.62rem + 0.4vw, 1rem); }
.site-footer .site-footer__newsletter > p:first-child { font-size: clamp(0.85rem, 0.65rem + 0.4vw, 1rem); }
@media (min-width: 1100px) {
	.site-footer__grid { grid-template-columns: 2.3fr 1fr; }
	.site-footer__links--5 { gap: clamp(0.75rem, 1.5vw, 1.5rem); }
}

/* .site-footer .ask-ai sube la especificidad sobre las reglas genéricas de
   .site-footer__col (ul en grid, a inline-block con desplazamiento). */
.ask-ai { margin-top: clamp(1rem, 2vw, 1.5rem); }
.site-footer .ask-ai .ask-ai__label {
	margin: 0 0 0.5rem; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
	letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft);
}
.site-footer .ask-ai .ask-ai__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.site-footer .ask-ai .ask-ai__btn {
	display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
	font-size: 0; color: inherit; border-radius: 4px; transform: none;
	background: color-mix(in srgb, currentColor 8%, transparent);
	transition: background-color var(--motion-normal) var(--ease), color var(--motion-normal) var(--ease);
}
.site-footer .ask-ai .ask-ai__btn svg { width: 1rem; height: 1rem; display: block; }
.site-footer .ask-ai .ask-ai__btn:hover,
.site-footer .ask-ai .ask-ai__btn:focus-visible { background: var(--accent); color: var(--accent-ink); transform: none; }

/* -------------------------------------------------------------------------
   Servicios · Tres frentes (page-servicios.php)
   Cada columna abre con el síntoma en palabras del cliente y cierra con los
   sistemas que lo resuelven. Firma «un solo engranaje»: un filete une las
   tres columnas con un nodo por frente, que se enciende al pasar por él
   (horizontal en escritorio, vertical en móvil).
   ------------------------------------------------------------------------- */
.front__symptom {
	margin: 0 0 1rem; max-width: none;
	font-size: clamp(1.15rem, 1.05rem + 0.3vw, 1.3rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--light-ink);
}

@media (min-width: 900px) {
	/* Subgrid: etiqueta, síntoma, texto y «Lo resolvemos con» alineados entre columnas. */
}

/* -------------------------------------------------------------------------
   Hero de páginas internas (.hero--inner): la luz y la cortina animada son
   de la portada. Aquí, editorial: ubicación en mono arriba, título a la
   izquierda y, tras un filete, bajada | acciones. Alto según contenido.
   ------------------------------------------------------------------------- */
.hero--home.hero--inner {
	height: auto; min-height: 0; display: block; text-align: left;
	padding-top: clamp(7.5rem, 13vw, 11rem); padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* La luz verde de marca se queda, pero tenue y hacia la derecha: el texto vive a la izquierda. */
.hero--inner .hero__bg {
	opacity: 0.55;
	-webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 65%);
	mask-image: linear-gradient(90deg, transparent 5%, #000 65%);
}
.hero--home.hero--inner::before {
	background: linear-gradient(180deg, rgba(8, 8, 7, 0.55), rgba(8, 8, 7, 0.35) 55%, var(--bg) 98%);
}
.hero--inner .hero__inner {
	max-width: none; margin: 0; padding-bottom: 0;
	display: grid; grid-template-columns: minmax(0, 1fr); align-items: end;
	grid-template-areas: "badge" "title" "lead" "actions";
}
.hero--inner .hero__title { grid-area: title; justify-items: start; text-align: left; max-width: none; margin: 0; }
.hero--inner .hero__lead {
	grid-area: lead; margin: clamp(2.5rem, 6vw, 5rem) 0 0; max-width: 46ch;
	padding-top: 1.5rem; border-top: 1px solid var(--line); text-align: left;
}
.hero--inner .hero__actions { grid-area: actions; justify-content: flex-start; margin-top: 1.75rem; }
@media (min-width: 900px) {
	.hero--inner .hero__inner {
		grid-template-columns: minmax(0, 1fr) auto; column-gap: 0;
		grid-template-areas: "badge badge" "title title" "lead actions";
	}
	.hero--inner .hero__lead { padding-right: 3rem; max-width: none; }
	.hero--inner .hero__lead > * { max-width: 46ch; }
	.hero--inner .hero__actions {
		margin-top: clamp(2.5rem, 6vw, 5rem); padding-top: 1.5rem;
		border-top: 1px solid var(--line); align-self: stretch; align-items: flex-start;
	}
}
/* Grano más tenue en los heros internos (la cortina ya va a media intensidad). */
.hero--home.hero--inner.has-pleats::after { opacity: 0.08; }

/* -------------------------------------------------------------------------
   Servicios · Equipo integral (.statement): datos rotativos a la izquierda
   y un manifiesto grande que se enciende letra a letra con el scroll
   (motion.js · initScrub / initStats). Referencia: bymonolog.com.
   ------------------------------------------------------------------------- */
.statement__bar { position: relative; height: 1px; background: var(--line); margin-bottom: 0.75rem; }
.statement__bar span {
	position: absolute; inset: 0; background: var(--ink);
	transform: scaleX(0); transform-origin: left center;
}
.statement__stat {
	position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(10px); pointer-events: none;
	transition: opacity var(--motion-slow) var(--ease), transform var(--motion-slow) var(--ease-out);
}
.statement__stat.is-active { opacity: 1; transform: none; pointer-events: auto; }
.statement__stat strong {
	display: block; margin-bottom: 0.5rem;
	font-size: clamp(2.25rem, 1.8rem + 1.5vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em;
}
.statement__stat span { display: block; max-width: 24ch; font-size: var(--fs-sm); font-weight: 500; line-height: 1.35; color: var(--ink-soft); }
.scrub-w { white-space: nowrap; }
.scrub-w span { transition: color var(--motion-normal) linear; }
.scrub-w span.is-on { color: var(--ink); }

/* Bloque de ayuda bajo los planes de cada servicio (los planes viven en
   template-parts/offers.php + v4.css). */

/* -------------------------------------------------------------------------
   Banner de checklist/diagnóstico (.idcheck2): sin caja; un filete arriba,
   botón normal y el anillo de muestra en trazo fino.
   ------------------------------------------------------------------------- */
.idcheck2__lead { font-size: var(--fs-base); font-weight: 500; line-height: 1.45; color: var(--ink-soft); }

/* -------------------------------------------------------------------------
   Preguntas frecuentes de servicios (template-parts/faq-section.php),
   como bymonolog.com: título y acordeón a la derecha; a la izquierda, abajo,
   los fundadores con la invitación a escribir.
   ------------------------------------------------------------------------- */
:root { interpolate-size: allow-keywords; } /* permite animar height: auto */
/* Apertura suave donde el navegador lo soporta (::details-content). */

/* -------------------------------------------------------------------------
   Casos en lista editorial (template-parts/case-list.php), como las
   «Success Stories» de bymonolog.com: rótulo fijo a la izquierda y filas
   imagen | texto separadas por un filete punteado. La prueba de cada caso
   es el sistema usado + un hecho de lo que quedó funcionando (sin cifras
   no verificadas).
   ------------------------------------------------------------------------- */
.case {
	display: grid; gap: 1.25rem; padding-block: clamp(1.5rem, 3vw, 2rem);
	border-bottom: 1px dotted color-mix(in srgb, var(--light-ink) 30%, transparent);
}
.case:first-child { padding-top: 0; }

@media (min-width: 900px) {
	.case { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: 1.25rem; }
}
/* Herramientas/socios (Intelligence, Engage): etiquetas mono separadas por «·», sin píldoras. */

/* =========================================================================
   PÁGINAS DE SERVICIO v2 (Identity®, Launch®): hero interno, tres soluciones
   con «Partes de → Te llevas», metodología con foto y CTA de diagnóstico.
   Solo clases propias (id-*) o acotadas a esta página; el resto reutiliza
   hero interno, offers, case-list, faq-section y contact-cta.
   ========================================================================= */
/* 01 Hero */

/* 03 Metodología: pasos en filas a la izquierda | foto B/N a la derecha. */

/* 10 CTA final: el componente global acepta bajada y WhatsApp opcionales. */

/* Identity® — cada solución: «Partes de» (situación) y «Te llevas» (resultado). */

/* Identity® — jerarquía de lectura: nombre › titular (gancho, tinta) › situación
   y resultado (detalle, gris y menor) › enlace. */

/* Servicios v2 — bajada bajo el título de las soluciones. */

/* Servicios v2 — «Después del lanzamiento»: flujo Launch® → Care® y auditor web. */

/* Servicios v2 — línea de claves bajo «Te llevas» (Engage®). */

/* Servicios v2 — alcance claro: qué entra y qué no. */

/* Servicios v2 — flujo del ecosistema con frases (sin mayúsculas grandes). */

/* Servicios v2 — fila secundaria para una modalidad especial (Care® Partners):
   separada de los planes, sin competir con ellos. */

/* Care® — título de la introducción junto al texto que se enciende con el scroll. */
/* Filas secundarias de Care®: misma grilla (etiqueta | texto | acción) y acción alineada a la derecha. */

/* Intelligence® — capacidades en filas editoriales: nombre | qué resuelve | recorrido. */

/* Impulse® — recorrido comercial bajo la bajada del alcance. */

/* Entrada por necesidad (home) y hub de sistemas (/servicios/). */
.need {
	display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 0.25rem 1.25rem;
	padding: 1.1rem 0; color: var(--ink); text-decoration: none;
}
@media (max-width: 560px) {
	.need { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Firma del artículo: autor real + cargo. */

/* Landings SEO — «Sigue explorando» sobre fondo claro. */

/* Artículo → landing comercial del cluster. */

/* Home — «¿Qué necesitas resolver?» como lista tipográfica (ref. Monolog):
   nombres grandes en gris, el activo se enciende; a la izquierda la imagen
   y la frase humana del ítem activo. */

/* Planes en 2×2 (Impulse®): la segunda fila con aire propio y su propio
   filete, con el punto sentado sobre la línea como en la primera fila. */

/* Heros internos con foto: sin zoom ni parallax (las fotos son de 768–1220 px
   y a pantalla completa se veían infladas y borrosas). En escritorio la foto
   vive en una franja a la derecha que se funde con el fondo, a tamaño real. */
.hero--inner .hero__bg img { transform: none; will-change: auto; }
@media (min-width: 900px) {
	.hero--inner .hero__bg {
		left: auto; right: 0; width: min(44vw, 680px); opacity: 0.75;
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%), linear-gradient(180deg, #000 70%, transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0%, #000 60%), linear-gradient(180deg, #000 70%, transparent 100%);
		-webkit-mask-composite: source-in; mask-composite: intersect;
	}
	.hero--inner .hero__bg img { object-position: center 35%; filter: saturate(0.85); }
	/* El título vive a la izquierda, fuera de la foto: baja a dos líneas. */
	.hero--inner .hero__title { max-width: min(58vw, 880px); }
	.hero--home.hero--inner::before { background: linear-gradient(180deg, rgba(8, 8, 7, 0.35), rgba(8, 8, 7, 0.15) 55%, var(--bg) 98%); }
}

/* Tests (Test Impulse®, Checklist Identity®): la portada se oculta de verdad al
   empezar (.hero--home la forzaba a flex y las preguntas quedaban abajo). */

/* Checklist: «/100» debajo del número, sin pisarlo. */

/* Auditor Web: hero más alto (80vh) → la foto se agrandaba para llenar la
   franja y el portátil quedaba cortado. Aquí la caja toma la proporción de la
   foto, centrada en vertical, y el fundido cae justo en sus bordes. */

/* Auditor Web: la caja de la URL vive bajo la bajada (columna izquierda), no
   en la columna de acciones donde chocaba con el botón flotante. */

/* Auditor Web: sin la altura mínima ni el padding extra del hero viejo (se
   sumaban al del hero interno y la caja de la URL quedaba bajo el pliegue). */

/* Auditor Web: todo más arriba, sin el filete sobre la bajada (aquí no
   separa nada) y título un paso más chico para que el formulario respire. */

/* Bento (link in bio) — mismo sistema editorial que la web: logo y
   coordenadas, titular, un solo CTA verde, filas con filete y etiquetas mono. */

/* Retratos del equipo: el recorte prioriza la cara (fotos 4:5). */
.team-member__media img { object-position: center 22%; }

/* ==========================================================================
   V82 — Nosotros con aire: contenido a 1180px, fotos más contenidas y más
   espacio entre secciones. Con --container:none todo se estiraba a lo ancho
   de la pantalla y las fotos del equipo ocupaban media pantalla cada una.
   ========================================================================== */

/* (01) Historia: la foto acompaña, el texto respira */

/* (02) Equipo: retratos 4:5 a tamaño de retrato, no de póster */

/* (03) Por qué elegir: la foto deja de estirarse a todo el alto de la lista */

/* V83 — Nosotros · Historia: la foto manda (más alta que el texto).
   Recorte casi cuadrado: en la foto 3:2 los dos fundadores caben entre el
   17% y el 83% del ancho, así que el 1:1 centrado no corta a nadie. */

/* V83 — Nosotros · Por qué elegir: igual que Historia, la foto gana
   protagonismo y supera en alto a la lista. */

/* ds2.css */
/* =========================================================================
   SISTEMA ANDEZ 2.0 — capa de sistema (se carga la última, solo con body.ds2)

   Misma esencia (negro + lima + Geist + etiquetas técnicas), con reglas
   fijas en lugar de parches:

   TIPOGRAFÍA — 8 pasos, nada fuera de la escala
     label  12px        etiquetas mono, migas, contadores (mínimo legible)
     sm     14 → 15px   notas, metadatos, textos de formulario
     base   16 → 18px   texto
     lead   18 → 22px   entradillas
     h4     20 → 24px   títulos de tarjeta y de fila
     h3     24 → 36px   títulos de bloque
     h2     32 → 60px   títulos de sección
     h1     36 → 88px   héroe de portada
     h1p    32 → 72px   título de páginas internas y CTA final

   ESPACIO — un ritmo para todo
     gutter  20px móvil → 40px escritorio
     Fibonacci 8 · 13 · 21 · 34 · 55 · 89 · 144 · 233; sección = s7 (89 → 144)
     ancho   texto 680px · contenido 1240px · amplio 1520px

   MOVIMIENTO — 3 velocidades y una curva
     rápido 0.2s (hover) · medio 0.45s (entradas) · lento 0.9s (revelados)
   ========================================================================= */

body.ds2 {
	/* Escala tipográfica */
	--ds-fs-label: 0.75rem;
	--ds-fs-sm:    clamp(0.8125rem, 0.76rem + 0.16vw, 0.9375rem);
	--ds-fs-base:  clamp(0.9375rem, 0.86rem + 0.22vw, 1.125rem);
	--ds-fs-lead:  clamp(1rem, 0.9rem + 0.35vw, 1.375rem);
	--ds-fs-h4:    clamp(1.125rem, 1rem + 0.5vw, 1.625rem);
	--ds-fs-h3:    clamp(1.375rem, 1.1rem + 1vw, 2rem);
	--ds-fs-h2:    clamp(1.75rem, 1.2rem + 1.8vw, 3.25rem);
	--ds-fs-h1:    clamp(2.25rem, 1rem + 3vw, 4.25rem);      /* héroe de portada */
	--ds-fs-h1p:   clamp(2rem, 1rem + 2.6vw, 3.75rem); /* título de página interna: 32 → 60px */

	/* Los tokens que ya usan los componentes pasan a la escala nueva */
	--fs-sm:   var(--ds-fs-sm);
	--fs-base: var(--ds-fs-base);
	--fs-lg:   var(--ds-fs-lead);
	--fs-xl:   var(--ds-fs-h4);
	--fs-2xl:  var(--ds-fs-h3);
	--fs-h3:   var(--ds-fs-h3);
	--fs-3xl:  var(--ds-fs-h2);
	--fs-4xl:  var(--ds-fs-h1p);

	/* Espacio — serie de Fibonacci (8 · 13 · 21 · 34 · 55 · 89 · 144 · 233 px).
	   Los pasos grandes bajan un escalón en móvil y suben hasta el suyo en
	   escritorio, así el ritmo es el mismo en cualquier pantalla. */
	--ds-s1: 0.5rem;                                   /*   8 */
	--ds-s2: 0.8125rem;                                /*  13 */
	--ds-s3: 1.3125rem;                                /*  21 */
	--ds-s4: clamp(1.3125rem, 0.95rem + 1.1vw, 2.125rem); /* 21 → 34 */
	--ds-s5: clamp(2.125rem, 1.5rem + 1.9vw, 3.4375rem);  /* 34 → 55 */
	--ds-s6: clamp(3.4375rem, 2.4rem + 3.2vw, 5.5625rem); /* 55 → 89 */
	--ds-s7: clamp(5.5625rem, 3.9rem + 5.2vw, 9rem);      /* 89 → 144 */
	--ds-s8: clamp(9rem, 6.3rem + 8.4vw, 14.5625rem);     /* 144 → 233 */
	--space-s:   var(--ds-s3);
	--space-m:   var(--ds-s5);
	--space-l:   var(--ds-s6);
	--space-xl:  var(--ds-s7);
	--space-2xl: var(--ds-s8);

	/* Anchos */
	--gutter:          clamp(1.25rem, 0.85rem + 1.8vw, 2.5rem);
	--ds-w-text:       680px;
	--ds-w-content:    1240px;
	--ds-w-wide:       1520px;
	--container:       var(--ds-w-wide);
	--container-narrow: var(--ds-w-text);

	/* Movimiento: tres duraciones y dos curvas para todo el sitio. */
	--motion-fast:   180ms;  /* hover de enlaces, foco, chips, flechas */
	--motion-normal: 320ms;  /* botones, acordeones, cambios de color/estado */
	--motion-slow:   700ms;  /* entradas de bloques, menú, imágenes */
	--ds-ease:    cubic-bezier(0.16, 1, 0.3, 1);  /* salida suave (entradas, hovers) */
	--ds-ease-io: cubic-bezier(0.65, 0, 0.35, 1); /* simétrica (texto que sube, cambios de estado) */
	--ds-fast:  var(--motion-fast);
	--ds-mid:   var(--motion-normal);
	--ds-slow:  var(--motion-slow);
	/* Espacio: alias semánticos sobre la escala --ds-s* (misma escala, sin duplicar). */
	--section-sm: var(--ds-s6);
	--section-md: var(--ds-s7);
	--section-lg: var(--ds-s8);
	--gap-sm: var(--ds-s3);
	--gap-md: var(--ds-s4);
	--gap-lg: var(--ds-s5);
	--page-gutter:   var(--gutter);
	--container-max: var(--container);

	font-size: var(--ds-fs-base);
	line-height: 1.55;
}

/* ----------------------------------------------------------------------
   1. LAYOUT — el contenido deja de estirarse de borde a borde
   ---------------------------------------------------------------------- */
body.ds2 .container { max-width: calc(var(--ds-w-wide) + 2 * var(--gutter)); padding-inline: var(--gutter); }
body.ds2 .section { padding-block: var(--ds-s7); }

/* Lectura cómoda: ningún párrafo pasa de ~68 caracteres */
body.ds2 main p { max-width: 68ch; }
body.ds2 main :is(.hero__lead, .section__lead, .method__intro) { font-size: var(--ds-fs-lead); line-height: 1.5; max-width: 56ch; }
body.ds2 main :is(h1, h2, h3) { text-wrap: balance; }
body.ds2 main p { text-wrap: pretty; }

/* Títulos de sección: escala h2 y aire fijo debajo */
body.ds2 :is(.section__title, .systems__title, .journey__title) { font-size: var(--ds-fs-h2); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: var(--ds-s5); }

/* ----------------------------------------------------------------------
   2. CABECERA — más presencia y áreas táctiles de 44px
   ---------------------------------------------------------------------- */
body.ds2 .brand-word { height: 30px; }
body.ds2 .nav-toggle { min-height: 44px; min-width: 44px; }
body.ds2 .nav-toggle__label { font-size: var(--ds-fs-sm); }
body.ds2 .lang-switch a { display: inline-grid; place-items: center; min-width: 32px; min-height: 44px; font-size: var(--ds-fs-label); letter-spacing: 0.06em; }

/* ----------------------------------------------------------------------
   3. BOTONES Y ENLACES — una sola sensación de clic
   ---------------------------------------------------------------------- */
body.ds2 .btn { min-height: 48px; padding: 0.95rem 1.6rem; font-size: var(--ds-fs-sm); letter-spacing: -0.005em; transition: background var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease), transform var(--ds-mid) var(--ds-ease); }
body.ds2 .btn--accent:active { transform: scale(0.97); }
body.ds2 :is(.hero__link, .btn--line) { min-height: 44px; display: inline-flex; align-items: center; }

/* ----------------------------------------------------------------------
   4. HÉROE — el primer pantallazo respira y no lo tapa nada
   ---------------------------------------------------------------------- */
body.ds2 .hero__title { font-size: var(--ds-fs-h1p); line-height: 1; letter-spacing: -0.035em; }
body.ds2 .hero--home:not(.hero--inner) .hero__title { font-size: var(--ds-fs-h1); line-height: 0.98; letter-spacing: -0.04em; }
body.ds2 .hero--inner .hero__title { max-width: min(22ch, 100%); }
body.ds2 .hero__actions { gap: var(--ds-s2) var(--ds-s4); }

/* Recuadro lima: la puntuación final vive dentro (ds2.js la mueve) y en
   móvil el recuadro es más fino para no separar las palabras. */
body.ds2 .frame-box .ds-punct { margin-left: -0.04em; }
@media (max-width: 640px) {
	body.ds2 .frame-box { padding: 0 0.22em; }
	body.ds2 .frame-box::before, body.ds2 .frame-box::after,
	body.ds2 .frame-box .tick::before, body.ds2 .frame-box .tick::after { width: 5px; height: 5px; }
	body.ds2 .frame-box::before { top: -3px; left: -3px; }
	body.ds2 .frame-box::after { bottom: -3px; right: -3px; }
	body.ds2 .frame-box .tick::before { top: -3px; right: -3px; }
	body.ds2 .frame-box .tick::after { bottom: -3px; left: -3px; }
}

/* El asistente no compite con el héroe ni con el banner de cookies */
body.ds2 .aa__fab { width: 48px; height: 48px; }
body.ds2:has(.andez-cc.is-open) .aa { opacity: 0; pointer-events: none; }

/* ----------------------------------------------------------------------
   6. MÓVIL — legible, tocable y con márgenes de verdad
   ---------------------------------------------------------------------- */
@media (max-width: 640px) {
	body.ds2 .section { padding-block: var(--ds-s6); }
	body.ds2 .hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
	body.ds2 .hero__actions .btn { width: 100%; }
	body.ds2 .hero__actions .hero__link { justify-content: center; }
	body.ds2 main :is(input, select, textarea) { font-size: 16px; } /* iOS no hace zoom */
}

/* ----------------------------------------------------------------------
   7. MOVIMIENTO — pulido de lo que ya existe
   ---------------------------------------------------------------------- */

/* Transición suave entre páginas (navegadores que la soportan) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: ds-out 0.28s var(--ds-ease, ease) both; }
::view-transition-new(root) { animation: ds-in 0.5s var(--ds-ease, ease) both; }
@keyframes ds-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes ds-in { from { opacity: 0; transform: translateY(12px); } }

/* Imágenes que se revelan con una cortina al entrar en pantalla (ds2.js) */
/* (el clip-path va en la imagen: en el contenedor impediría detectar la entrada) */
body.ds2 .ds-reveal { overflow: hidden; }
body.ds2 .ds-reveal img { clip-path: inset(0 0 100% 0); transform: scale(1.08); transition: clip-path var(--ds-slow) var(--ds-ease), transform 1.4s var(--ds-ease); }
body.ds2 .ds-reveal.is-in img { clip-path: inset(0 0 0 0); transform: none; }

/* Hover de imágenes de proyecto: zoom lento, nunca brusco */
body.ds2 :is(.project-card, .wk-card) :is(img) { transition: transform var(--motion-slow) var(--ds-ease); }
@media (hover: hover) {
	body.ds2 :is(.project-card, .wk-card):hover img { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	body.ds2 .ds-reveal img { clip-path: none !important; transform: none !important; transition: none !important; }
}

/* ----------------------------------------------------------------------
   8. VISTA PREVIA — distintivo para saber que estás viendo el DS 2.0
   ---------------------------------------------------------------------- */
body.ds2-preview .ds2-flag {
	position: fixed; z-index: 100000; top: 12px; left: 50%; transform: translateX(-50%);
	display: inline-flex; align-items: center; gap: 0.6rem;
	padding: 0.4rem 0.5rem 0.4rem 0.9rem; border-radius: 999px;
	background: var(--accent); color: var(--accent-ink);
	font: 600 12px/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
}
body.ds2-preview .ds2-flag a { color: var(--accent-ink); background: rgba(4, 18, 11, 0.12); padding: 0.35rem 0.6rem; border-radius: 999px; text-decoration: none; }
@media (max-width: 640px) { body.ds2-preview .ds2-flag { top: auto; bottom: 76px; left: 8px; transform: none; font-size: 10px; padding: 0.3rem 0.35rem 0.3rem 0.7rem; } body.ds2-preview .ds2-flag .ds2-flag__long { display: none; } }

/* ----------------------------------------------------------------------
   10. MENOS ES MÁS — héroes y footer depurados
   Héroe = etiqueta · título · entradilla · acciones. Nada más.
   ---------------------------------------------------------------------- */

/* Etiqueta superior: una sola línea técnica, siempre alineada al título */

/* Fuera el ruido: línea divisoria, fila de palabras clave y migas visuales
   (las migas siguen en el JSON-LD BreadcrumbList para Google) */
body.ds2 .hero--inner .hero__lead,
body.ds2 .hero--inner .hero__actions { border-top: 0; padding-top: 0; }
body.ds2 .hero--inner .hero__lead { margin-top: var(--ds-s5); }
body.ds2 .hero--inner .hero__actions { margin-top: var(--ds-s4); }

/* Nosotros: misma composición que el resto de páginas internas (izquierda) */
body.ds2 .about-hero__title { justify-items: start; text-align: left; max-width: min(18ch, 100%); }

/* Recuadro lima que se parte en dos líneas: un recuadro por línea, sin esquinas */
body.ds2 :is(h1, h2):has(> .frame-box.is-multi) { display: block; line-height: 1.2; }
body.ds2 :is(h1, h2):has(> .frame-box.is-multi) > span:not(.frame-box) { display: block; }
body.ds2 .frame-box.is-multi { display: inline; padding: 0 0.18em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
body.ds2 .frame-box.is-multi::before, body.ds2 .frame-box.is-multi::after, body.ds2 .frame-box.is-multi .tick { display: none; }

/* Footer móvil: filas de acordeón de 52px, sin huecos entre ellas */
@media (max-width: 719px) {
	body.ds2 .site-footer__links { gap: 0; }
	body.ds2 nav.site-footer__col .site-footer__title { padding-block: 0.25rem; }
	body.ds2 nav.site-footer__col .site-footer__acc { min-height: 44px; display: flex; align-items: center; font-size: var(--ds-fs-base); }
	body.ds2 .site-footer__bottom { margin-top: var(--ds-s5); }
}

/* Footer: entrada suave en móvil (en escritorio ya se revela con parallax) */
body.ds2 .site-footer.ds-foot-in > * { opacity: 0; transform: translateY(16px); transition: opacity var(--ds-slow) var(--ds-ease), transform var(--ds-slow) var(--ds-ease); }
body.ds2 .site-footer.ds-foot-in.is-in > * { opacity: 1; transform: none; }
body.ds2 .site-footer.ds-foot-in.is-in > :nth-child(2) { transition-delay: 0.08s; }
body.ds2 .site-footer.ds-foot-in.is-in > :nth-child(3) { transition-delay: 0.16s; }

/* Movimiento unificado: una sola curva y duraciones del sistema */
body.ds2 .lr-line { transition-duration: var(--motion-slow) !important; transition-timing-function: var(--ds-ease) !important; }
body.ds2 :is(a, button) { transition-timing-function: var(--ds-ease); }

/* ----------------------------------------------------------------------
   11. PORTADA DEPURADA — cada bloque dice una sola cosa
   ---------------------------------------------------------------------- */
/* Seis sistemas: nombre, promesa, foto y «Explorar». Los entregables viven en cada página. */
body.ds2 .syst-card__list { display: none; }
body.ds2 .syst-card__foot { justify-content: flex-start; }
/* Cómo trabajamos: paso, idea y foto; sin viñetas */
body.ds2 .journey-step__desc { font-size: var(--ds-fs-base); max-width: 42ch; }

/* ----------------------------------------------------------------------
   12. PORTADA v3 — «Seis sistemas. Dos formas de trabajar.»
   Una fila por sistema: nombre grande + mensaje maestro + flecha.
   ---------------------------------------------------------------------- */

/* ----------------------------------------------------------------------
   9. MÍNIMO LEGIBLE — ningún texto por debajo de 12px
   (generado a partir de las reglas con font-size < 0.75rem de las capas
   anteriores; misma regla con +1 de especificidad)
   ---------------------------------------------------------------------- */
body.ds2 .site-footer__legal,body.ds2 .site-footer__legal a,body.ds2 .sec-label { font-size: max(0.75rem, 12px); }

body.ds2 .site-footer .newsletter-form__legal,body.ds2 .site-footer .newsletter-form__legal a,body.ds2 .nav-count { font-size: max(0.75rem, 12px); }
body.ds2 .aa__status,
body.ds2 .aa__foot,
body.ds2 .aa-m__ava { font-size: max(0.75rem, 12px); }
body.ds2 .site-footer .site-footer__newsletter .newsletter-form__legal,
body.ds2 .nav-panel__top,
body.ds2 .nav-sol__title,
body.ds2 .nav-sol__col a { font-size: max(0.75rem, 12px); }

body.ds2 .nav-panel .nav-panel__side a,body.ds2 .nav-panel__mail { font-size: max(0.75rem, 12px); }
body.ds2 .site-footer .ask-ai .ask-ai__label { font-size: max(0.75rem, 12px); }

/* v4.css */
/* =========================================================================
   Andez v4 — capa de diseño del sitio (inc/ds2.php la carga en todas las
   páginas del Sistema Andez 2.0, después de ds2.css).
   Paleta negro #080807 / blanco / claro #F2F2F2 (tokens en main.css y
   skin.css), escala de texto --ds-fs-* (ds2.css), botón con texto que sube,
   enlaces de línea, menú, footer, reseñas, método, formulario y entradas
   suaves. Lo propio de la portada va con body.home.
   ========================================================================= */

/* Alias cortos de la escala (ds2.css): H1 > H2 > H3 > entrada > texto > pequeño. */
body.ds2 {
	--v4-h1: var(--ds-fs-h1);
	--v4-h2: var(--ds-fs-h2);
	--v4-h3: var(--ds-fs-h4);
	--v4-lead: var(--ds-fs-lead);
	--v4-body: var(--ds-fs-base);
	--v4-sm: var(--ds-fs-sm);
	--v4-xs: var(--ds-fs-label);
}

/* Sin numeración en la web: (01), [06], «Paso • 01»… */
body.ds2 :is(.sec-label .num, .sec-label__count, .syst-card__idx) { display: none !important; }

/* --- Hero ------------------------------------------------------------------ */
body.home .hero--home { min-height: 0; padding-top: 0; }
body.home .hero--home .hero__inner {
	display: grid; gap: var(--ds-s4); text-align: left; justify-items: start; align-items: end;
	padding-block: calc(var(--ds-s7) + var(--ds-s3)) var(--ds-s4);
}
@media (min-width: 960px) {
	body.home .hero--home .hero__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); column-gap: var(--ds-s7); align-items: start; }
	body.home .hero--home .hero__title { grid-row: 1 / span 2; }
	body.home .hero--home .hero__lead { grid-column: 2; grid-row: 1; align-self: start; padding-top: 0.2em; }
	body.home .hero--home .hero__actions { grid-column: 2; grid-row: 2; align-self: end; }
	/* Arriba, la entrada alinea con la primera línea del título; abajo, los botones con la última. */
	body.home .hero--home .hero__inner { row-gap: var(--ds-s3); align-items: stretch; }
	body.home .hero--home .hero__title { align-self: center; display: grid; align-content: start; }
	body.home .hero--home .hero__lead { align-self: start; }
	body.home .hero--home .hero__actions { align-self: end; }
}
body.home .hero--home:not(.hero--inner) .hero__title {
	margin: 0; font-size: var(--v4-h1); line-height: 1.02; letter-spacing: -0.04em; text-align: left; justify-items: start; gap: 0.12em;
}
body.home .hero--home .hero__title > span { display: block; white-space: nowrap; }
@media (max-width: 599px) { body.home .hero--home .hero__title > span { white-space: normal; } }
body.home .hero--home .hero__title-accent { margin-left: 0.1em; }
body.home .hero--home .hero__lead { margin: 0; max-width: 36ch; font-size: var(--v4-lead); line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); text-align: left; }
body.home .hero--home .hero__actions { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0; justify-content: flex-start; gap: var(--ds-s2) var(--ds-s5); }
body.home .hero--home .hero__actions .btn { font-size: var(--v4-sm); padding: var(--ds-s2) var(--ds-s3); }
body.home .hero--home .hero__link { font-size: var(--v4-sm); color: var(--ink); }

/* --- Proyectos: tarjetas más estrechas, texto pequeño ----------------------- */
body.ds2 .work--carousel { padding-top: var(--ds-s3); }
body.ds2 .work--carousel .hscroll .project-card { width: clamp(260px, 27vw, 410px); }
body.ds2 .work--carousel .project-card__media { aspect-ratio: 5 / 6; }
body.ds2 .work--carousel .project-card__media img { width: 100%; height: 100%; object-fit: cover; }
body.ds2 .work--carousel .project-card__body { padding-top: var(--ds-s2); gap: 0.15rem; }
body.ds2 .work--carousel .project-card__title { font-size: var(--v4-body); font-weight: 500; letter-spacing: -0.01em; text-transform: none; }
body.ds2 .work--carousel .project-card__tagline { font-size: var(--v4-sm); }
@media (max-width: 719px) { body.ds2 .work--carousel .hscroll .project-card { width: 68vw; } }

/* --- Sistemas: título contenido, entregables como items ----------------------- */
body.ds2 .systems .sec-label { display: none; }
/* Un mismo estilo de título en toda la portada (el de la casa: Geist 700). */
body.ds2 :is(.systems__title, .v4-method__title, .v4-reviews__title) {
	font-size: var(--v4-h2); font-weight: 700; line-height: 1.06; letter-spacing: -0.03em; text-transform: none; color: var(--light-ink);
}
/* Jerarquía: el H1 del hero manda; el resto de títulos va un paso por debajo. */
body.ds2 .contact-cta__title { font-size: var(--v4-h2); line-height: 1.06; letter-spacing: -0.03em; }
body.ds2 .v4-method .v4-method__title { color: var(--ink); }
body.ds2 .systems__title { max-width: 18ch; }
/* Subtítulos (sistemas, pasos): 600. */
body.ds2 :is(.syst-card__name, .v4-acc__name) { font-weight: 600; }
body.ds2 .syst { gap: 0; margin-top: var(--ds-s6); }
/* Se conserva el apilado de la portada publicada (sticky + --dim en motion.js):
   cada tarjeta sube y tapa a la anterior. Necesita fondo propio. */
body.ds2 .syst-card { min-height: min(62vh, 560px); height: auto; padding-block: var(--ds-s5); background: var(--light-bg); border-top: 1px solid var(--light-line); }
body.ds2 .syst-card:last-child { border-bottom: 1px solid var(--light-line); }
body.ds2 .syst-card__divider { display: none; }
body.ds2 .syst-card__head { margin: 0; }
body.ds2 .syst-card__name { font-size: var(--v4-h3); letter-spacing: -0.025em; }
/* Sin numeración en la portada. */
body.ds2 .syst-card__body { gap: var(--ds-s4); margin-top: var(--ds-s3); }
body.ds2 .syst-card__desc { max-width: 46ch; font-size: var(--v4-body); line-height: 1.55; color: var(--light-muted); }
body.ds2 .syst-card__foot { display: grid; gap: var(--ds-s4); justify-content: stretch; margin-top: var(--ds-s4); }
body.ds2 .syst-card__list { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--light-line); }
body.ds2 .syst-card__list li { position: relative; padding: var(--ds-s1) 0 var(--ds-s1) var(--ds-s3); font-size: var(--v4-sm); color: var(--light-ink); border-bottom: 1px solid var(--light-line); }
body.ds2 .syst-card__list li::before { content: "+"; position: absolute; left: 0; top: 0.6rem; color: var(--light-muted); }
body.ds2 .syst-card .btn--line { justify-self: start; font-size: var(--v4-sm); }
body.ds2 .syst-card__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; }
body.ds2 .syst-card__img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
	body.ds2 .syst-card { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr); column-gap: var(--ds-s6); align-items: start; }
	body.ds2 .syst-card__head { display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: flex-start; gap: var(--ds-s1); height: auto; }
	body.ds2 .syst-card__body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); column-gap: var(--ds-s6); margin-top: 0; align-items: start; }
	body.ds2 .syst-card__list { grid-template-columns: 1fr 1fr; column-gap: var(--ds-s4); }
}

/* --- Método: texto + acordeón a la izquierda, una foto a la derecha ---------- */
body.ds2 .v4-method, body.has-footer-reveal.ds2 .site-main > .v4-method { background: var(--bg); color: var(--ink); padding-block: var(--ds-s7); }
body.ds2 .v4-method :is(h2, h3) { color: var(--ink); margin: 0; }
body.ds2 .v4-method__grid { display: grid; gap: var(--ds-s6); }
@media (min-width: 960px) {
	body.ds2 .v4-method__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--ds-s7); align-items: center; }
}
body.ds2 .v4-method__intro { display: grid; gap: var(--ds-s4); justify-items: start; align-content: start; }
body.ds2 .v4-method__title { max-width: 16ch; }
body.ds2 .v4-method__lead { max-width: 36ch; margin: 0; font-size: var(--v4-lead); line-height: 1.45; color: var(--muted); }
body.ds2 .v4-link { display: inline-block; padding-bottom: 0.3rem; border-bottom: 1px solid currentColor; font-size: var(--v4-sm); color: inherit; text-decoration: none; }
body.ds2 .v4-acc { width: 100%; margin-block: var(--ds-s2); border-top: 1px solid var(--line); }
body.ds2 .v4-acc__item { border-bottom: 1px solid var(--line); }
body.ds2 .v4-acc__head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--ds-s2); padding: var(--ds-s3) 0; cursor: pointer; list-style: none; }
body.ds2 .v4-acc__head::-webkit-details-marker { display: none; }
body.ds2 .v4-acc__num { font-size: max(0.75rem, 12px); color: var(--muted); }
body.ds2 .v4-acc__name { font-size: var(--v4-h3); letter-spacing: -0.02em; }
body.ds2 .v4-acc__icon { position: relative; width: 0.9rem; height: 0.9rem; }
body.ds2 .v4-acc__icon::before, body.ds2 .v4-acc__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform var(--motion-normal) var(--ds-ease, ease); }
body.ds2 .v4-acc__icon::after { transform: rotate(90deg); }
body.ds2 .v4-acc__item[open] .v4-acc__icon::after { transform: rotate(0deg); }
body.ds2 .v4-acc__head:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
body.ds2 .v4-acc__body { display: grid; gap: var(--ds-s2); padding: 0 0 var(--ds-s3); }
body.ds2 .v4-acc__body p { margin: 0; max-width: 46ch; font-size: var(--v4-body); line-height: 1.55; color: var(--muted); }
/* Lo que incluye cada paso, en etiquetas. */
body.ds2 .v4-acc__body ul { display: flex; flex-wrap: wrap; gap: var(--ds-s1); margin: 0.25rem 0 0; padding: 0; list-style: none; }
body.ds2 .v4-acc__body li { padding: var(--ds-s1) var(--ds-s2); font-size: var(--v4-sm); line-height: 1.2; color: var(--ink); background: #1C1F1D; border-radius: 4px; }
body.ds2 .v4-acc__body { overflow: hidden; }
@keyframes v4-acc-in { from { opacity: 0; transform: translateY(-6px); } }
body.ds2 .v4-method__pic { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: #1A1D1B; }
body.ds2 .v4-method__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.1s cubic-bezier(.4,0,.2,1), transform 1.8s cubic-bezier(.2,.7,.2,1); }
body.ds2 .v4-method__pic img.is-on { opacity: 1; transform: none; z-index: 1; }
@media (max-width: 959px) { body.ds2 .v4-method__pic { aspect-ratio: 4 / 3; order: -1; } }
@media (prefers-reduced-motion: reduce) { body.ds2 .v4-method__pic img, body.ds2 .v4-acc__item[open] .v4-acc__body { transition: none; animation: none; } }

/* --- Reseñas --------------------------------------------------------------------- */
body.ds2 .v4-reviews { background: var(--light-bg); color: var(--light-ink); padding-block: var(--ds-s7) var(--ds-s5); border-top: 0; }
body.ds2 .contact-cta.section, body.ds2 .contact-cta { padding-top: var(--ds-s5) !important; }
body.ds2 .v4-reviews__head { display: grid; gap: var(--ds-s3); align-items: end; margin-bottom: var(--ds-s6); }
@media (min-width: 900px) { body.ds2 .v4-reviews__head { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr); column-gap: var(--ds-s6); } }
body.ds2 .v4-reviews__title { margin: 0; max-width: 16ch; }
body.ds2 .v4-reviews__note { margin: 0; font-size: var(--v4-body); line-height: 1.45; }
body.ds2 .v4-reviews__note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
body.ds2 .v4-reviews__count { margin: 0; font-size: 0.9375rem; color: var(--light-muted); white-space: nowrap; }
body.ds2 .v4-reviews__wrap { padding-inline: var(--gutter); }
body.ds2 .v4-reviews__track { gap: var(--ds-s3); padding-bottom: var(--ds-s3); }
body.ds2 .v4-rev { display: grid; align-content: start; gap: var(--ds-s5); width: clamp(280px, 30vw, 440px); min-height: 22rem; margin: 0; padding: var(--ds-s5); background: #fff; border-radius: 8px; }
body.ds2 .v4-rev__who { display: flex; align-items: center; gap: var(--ds-s2); }
body.ds2 .v4-rev__ava { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--light-bg); font-size: 1.25rem; color: var(--light-ink); }
body.ds2 .v4-rev__name { display: block; font-size: var(--v4-body); color: var(--light-ink); }
body.ds2 .v4-rev__role { display: block; font-size: var(--v4-sm); color: var(--light-muted); }
body.ds2 .v4-rev__quote { margin: 0; font-size: var(--v4-lead); line-height: 1.45; letter-spacing: -0.01em; color: var(--light-ink); }
body.ds2 .v4-rev__src { margin: auto 0 0; font-size: var(--v4-xs); color: var(--light-muted); }

/* --- Footer equilibrado: correo a la izquierda, enlaces a la derecha y la
       marca a todo el ancho abajo ------------------------------------------------- */
body.ds2 .site-footer > .container { display: flex; flex-direction: column; }
body.ds2 .site-footer__bottom { order: 3; }
body.ds2 .site-footer__marklogo { order: 2; width: 100%; height: auto; max-width: none; margin: var(--ds-s5) 0 var(--ds-s3); align-self: stretch; }
body.ds2 .site-footer__topline { display: none; }
@media (min-width: 1024px) {
	body.ds2 .site-footer__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr); column-gap: var(--ds-s7); align-items: start; }
	body.ds2 .site-footer__newsletter { order: -1; grid-column: 1; grid-row: 1; }
	body.ds2 .site-footer__links { grid-column: 2; grid-row: 1; }
}
body.ds2 .site-footer { padding-top: var(--ds-s7); }
body.ds2 .site-footer__marklogo { width: var(--v4-wm, min(100%, calc((100vh - 39rem) * 3.9))); align-self: flex-start; }

/* --- Flechas que siguen al mouse (v4.js) --------------------------------
   Las flechas fijas se ocultan (siguen disponibles con teclado). */
@media (pointer: fine) {
	body.ds2 .carousel-arrow { opacity: 0 !important; pointer-events: none !important; }
	body.ds2 .carousel-arrow:focus-visible { opacity: 1 !important; pointer-events: auto !important; }
	body.ds2 .v4-cursor-on, body.ds2 .v4-cursor-on * { cursor: none !important; }
}
.v4-cur {
	position: fixed; left: 0; top: 0; z-index: 90; width: 5.5rem; height: 5.5rem; margin: -2.75rem 0 0 -2.75rem;
	display: grid; place-items: center; border-radius: 50%; pointer-events: none;
	background: #161816; color: #F5F7FA; font-size: 1.75rem; line-height: 1;
	transform: translate3d(var(--x, -200px), var(--y, -200px), 0) scale(0); transition: transform var(--motion-normal) cubic-bezier(.2,.8,.2,1);
	will-change: transform;
}
.v4-cur.is-on { transform: translate3d(var(--x), var(--y), 0) scale(1); }
.v4-cur.is-light { background: #F5F7FA; color: #080807; }
.v4-cur.is-off { opacity: 0.35; }
@media (prefers-reduced-motion: reduce) { .v4-cur { transition: none; } }
/* ® y ™ pequeños (v4.js los envuelve). */
body.ds2 .v4-mark { font-size: 0.55em; font-weight: inherit; vertical-align: super; position: static; margin-left: 0.04em; letter-spacing: 0; line-height: 0; }

/* Footer: enlaces más juntos. */
body.ds2 .site-footer .site-footer__col ul { gap: var(--ds-s1); }
body.ds2 .site-footer .site-footer__col li { font-size: var(--v4-sm); line-height: 1.3 !important; }
body.ds2 .site-footer .site-footer__col li a { line-height: 1.3 !important; }
body.ds2 .site-footer__title { margin-bottom: var(--ds-s2); }

/* --- Enlaces de línea (como en un portafolio editorial): al entrar el mouse
   la línea sale hacia el lado contrario y vuelve a dibujarse desde el lado
   por donde entró (v4.js pone data-dir). -------------------------------- */
body.ds2 :is(.v4-line, .v4-link, .btn--line, .hero__link, .v4-reviews__note a, .nav-panel__links a) {
	position: relative; display: inline-flex; align-items: center; gap: 0; min-height: 0; padding: 0 0 0.4rem; border: 0; border-radius: 0;
	background: none; color: inherit; font-weight: 500; text-decoration: none; transform: none; box-shadow: none;
}
body.home .hero__actions .v4-line { font-size: var(--v4-sm); color: var(--ink); }
body.ds2 .v4-reviews__note a { padding-bottom: 0.2rem; }
body.ds2 :is(.v4-line, .v4-link, .btn--line, .hero__link, .v4-reviews__note a, .nav-panel__links a)::before,
body.ds2 :is(.v4-line, .v4-link, .btn--line, .hero__link, .v4-reviews__note a, .nav-panel__links a)::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
	transition: transform var(--motion-slow) var(--ds-ease-io); animation: none !important;
}
body.ds2 :is(.v4-line, .v4-link, .btn--line, .hero__link, .v4-reviews__note a, .nav-panel__links a)::before { transform: scaleX(1); transform-origin: right; transition-delay: 0.22s; }
body.ds2 :is(.v4-line, .v4-link, .btn--line, .hero__link, .v4-reviews__note a, .nav-panel__links a)::after { transform: scaleX(0); transform-origin: left; transition-delay: 0s; }
body.ds2 :is(.v4-line, .v4-link, .btn--line, .hero__link, .v4-reviews__note a, .nav-panel__links a):is(:hover, :focus-visible)::before { transform: scaleX(0); transition-delay: 0s; }
body.ds2 :is(.v4-line, .v4-link, .btn--line, .hero__link, .v4-reviews__note a, .nav-panel__links a):is(:hover, :focus-visible)::after { transform: scaleX(1); transition-delay: 0.22s; }
body.ds2 [data-dir="r"]::before { transform-origin: left !important; }
body.ds2 [data-dir="r"]::after { transform-origin: right !important; }
body.ds2 :is(.v4-line, .v4-link, .btn--line):hover { color: inherit; }
body.home .hero__actions .v4-line:hover { color: var(--ink); }
body.ds2 :is(.v4-line, .v4-link, .btn--line, .hero__link, .v4-reviews__note a, .nav-panel__links a):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
	body.ds2 :is(.v4-line, .v4-link, .btn--line, .hero__link, .v4-reviews__note a, .nav-panel__links a)::before,
	body.ds2 :is(.v4-line, .v4-link, .btn--line, .hero__link, .v4-reviews__note a, .nav-panel__links a)::after { transition: none; }
}

/* --- Hero: verde del fondo un poco más presente --------------------------- */
body.home .hero--home.has-pleats .hero__pleats { filter: brightness(1.3) saturate(1.2); }

/* --- Botón principal: el texto sube y entra otra copia desde abajo; la
   flecha aparece a la derecha. Misma pastilla verde de la casa. ------------ */
body.ds2 .v4-roll { display: inline-flex; align-items: center; gap: 0; overflow: hidden; transition: background-color var(--motion-normal) ease, gap var(--motion-slow) var(--ds-ease-io), padding var(--motion-slow) var(--ds-ease-io); }
body.ds2 .v4-roll__txt { display: inline-block; overflow: hidden; line-height: 1.3; }
body.ds2 .v4-roll__in { position: relative; display: inline-block; transition: transform var(--motion-slow) var(--ds-ease-io); }
body.ds2 .v4-roll__in::after { content: attr(data-text); position: absolute; left: 0; top: 100%; white-space: nowrap; }
body.ds2 .v4-roll__arrow { display: inline-block; width: 0; opacity: 0; transform: translateX(-0.4rem); transition: width var(--motion-slow) var(--ds-ease-io), opacity var(--motion-normal) ease, transform var(--motion-slow) var(--ds-ease-io); }
body.ds2 .v4-roll:is(:hover, :focus-visible) { transform: none; box-shadow: none; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
body.ds2 .v4-roll:is(:hover, :focus-visible) .v4-roll__in { transform: translateY(-100%); }
body.ds2 .v4-roll:is(:hover, :focus-visible) .v4-roll__arrow { width: 1em; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { body.ds2 .v4-roll, body.ds2 .v4-roll * { transition: none !important; } }

/* Mismos pasos en el resto de la portada. */
body.ds2 .syst-card__name { line-height: 1.15; }
body.ds2 .v4-acc__head { padding-block: var(--ds-s2); }
body.ds2 .v4-rev__quote { line-height: 1.5; }
body.ds2 .v4-rev { min-height: 18rem; }
body.ds2 .contact-cta :is(label, legend, .contact-cta__label) { font-size: var(--v4-sm); }
body.ds2 .site-footer__newsletter > p { font-size: var(--v4-body); line-height: 1.45; }
body.ds2 .site-footer__title { font-size: var(--v4-body); }

/* --- Formulario final: el título acompaña al bajar (bajo el header) y los
   chips en el gris neutro de la portada. ---------------------------------- */
@media (min-width: 960px) {
	body.ds2 .contact-cta__grid { align-items: start; }
	body.ds2 .contact-cta__intro { position: sticky; top: 7rem; display: grid; gap: var(--ds-s5); justify-items: start; }
}
body.ds2 .contact-cta .cc-pill span { background: #E4E4E4; }
body.ds2 .contact-cta .cc-pill input:checked + span { background: var(--accent); color: var(--accent-ink); }

/* --- Entradas suaves (v4.js · data-v4-in): suben y aparecen despacio,
   escalonadas, con una curva larga. ------------------------------------------ */
.v4-js [data-v4-in] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1.1s var(--ds-ease), transform 1.3s var(--ds-ease); transition-delay: calc(var(--d, 0) * 90ms); }
.v4-js [data-v4-in].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .v4-js [data-v4-in] { opacity: 1; transform: none; transition: none; } }

/* =========================================================================
   Móvil (portada v4)
   ========================================================================= */
@media (max-width: 959px) {
	/* Menú sin la cápsula. */
	body.ds2 .site-nav { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; padding-inline: 0 !important; }

	/* Hero: título en dos líneas que llenan el ancho, entrada al 100 %, un solo botón. */
	body.home .hero--home .hero__inner { padding-block: calc(var(--ds-s6) + var(--ds-s5)) var(--ds-s4); gap: var(--ds-s3); }
	body.home .hero--home:not(.hero--inner) .hero__title { font-size: min(7.7vw, 3.25rem); line-height: 1.08; gap: 0.08em; }
	body.home .hero--home .hero__title > span { white-space: nowrap; }
	body.home .hero--home .hero__lead { max-width: none; padding-top: 0; }
	body.home .hero--home .hero__actions { width: 100%; }
	body.home .hero--home .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
	body.home .hero--home .hero__actions .v4-line { display: none; }
	body.ds2 .work--carousel { padding-top: 0; }

	/* Sistemas: ritmo parejo, sin altura mínima. */
	body.ds2 .systems.section { padding-block: var(--ds-s6) var(--ds-s5); }
	body.ds2 .syst { margin-top: var(--ds-s5); }
	body.ds2 .syst-card { min-height: 0; padding-block: var(--ds-s4) var(--ds-s5); }
	body.ds2 .syst-card__body { margin-top: var(--ds-s2); gap: var(--ds-s3); }
	body.ds2 .syst-card__foot { margin-top: var(--ds-s3); gap: var(--ds-s3); }
	body.ds2 .syst-card__list li { padding-block: var(--ds-s1); }

	/* Formulario compacto. */
	body.ds2 .contact-cta .cc-pills { gap: var(--ds-s1); }
	body.ds2 .contact-cta .cc-pill span { padding: var(--ds-s1) var(--ds-s2); font-size: var(--v4-sm); }
	body.ds2 .contact-cta .cc-group { margin-bottom: var(--ds-s3); }
	body.ds2 .contact-cta__grid { gap: var(--ds-s4); }

	/* Footer: sin las listas de enlaces (ya están en el menú). */
	body.ds2 .site-footer__links { display: none; }
	body.ds2 .site-footer { padding-top: var(--ds-s6); }
	body.ds2 .site-footer__newsletter .newsletter-form__row .btn { padding-block: var(--ds-s2); }
}

/* Datos de contacto bajo el título del formulario. */
body.ds2 .contact-cta__details { display: grid; width: min(100%, 26rem); margin: 0; border-top: 1px solid var(--light-line); }
body.ds2 .contact-cta__details div { display: flex; justify-content: space-between; gap: var(--ds-s3); padding: var(--ds-s2) 0; border-bottom: 1px solid var(--light-line); }
body.ds2 .contact-cta__details dt { font-size: var(--v4-sm); color: var(--light-muted); }
body.ds2 .contact-cta__details dd { margin: 0; font-size: var(--v4-sm); text-align: right; }
body.ds2 .contact-cta__details a { color: inherit; text-decoration: none; }
body.ds2 .contact-cta__details a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Menú: mismo orden de siempre (enlaces, soluciones, acción, redes),
   en el claro nuevo, sin líneas y con entradas suaves en cascada. --------- */
body.ds2 .nav-panel { background: #F2F2F2 !important; }
body.ds2 .nav-panel :is(.nav-panel__top, .nav-sol, .nav-panel__side, .nav-panel__mail, .nav-panel__cta) { border: 0 !important; }
body.ds2 .nav-panel .nav-panel__top { padding-bottom: 0; }
body.ds2 .nav-panel .nav-panel__links a { letter-spacing: -0.03em; opacity: 1 !important; transform: none !important; }
body.ds2 .nav-panel .nav-panel__cta { font-size: var(--v4-sm); }
body.ds2 .nav-panel :is(.nav-panel__loc, .nav-panel__side a, .nav-panel__mail) { font-size: var(--v4-sm); }
/* Panel: entra deslizándose con una curva larga. */
body.ds2 .nav-panel { transform: translateX(32px); transition: opacity var(--motion-slow) var(--ds-ease), transform var(--motion-slow) var(--ds-ease), visibility 0s linear var(--motion-slow) !important; }
body.ds2:has(.site-nav.is-open) .nav-panel { transform: none; transition: opacity var(--motion-slow) var(--ds-ease), transform var(--motion-slow) var(--ds-ease), visibility 0s !important; }
/* Contenido en cascada: enlaces, soluciones, acción y redes. */
body.ds2 .nav-panel :is(.nav-panel__links li, .nav-sol__col, .nav-panel__cta, .nav-panel__side, .nav-panel__mail) {
	opacity: 0; transform: translate3d(0, 18px, 0);
	transition: opacity var(--motion-slow) var(--ds-ease), transform var(--motion-slow) var(--ds-ease);
	transition-delay: 0s;
}
body.ds2:has(.site-nav.is-open) .nav-panel :is(.nav-panel__links li, .nav-sol__col, .nav-panel__cta, .nav-panel__side, .nav-panel__mail) { opacity: 1; transform: none; }
body.ds2:has(.site-nav.is-open) .nav-panel__links li:nth-child(1) { transition-delay: 0.08s; }
body.ds2:has(.site-nav.is-open) .nav-panel__links li:nth-child(2) { transition-delay: 0.13s; }
body.ds2:has(.site-nav.is-open) .nav-panel__links li:nth-child(3) { transition-delay: 0.18s; }
body.ds2:has(.site-nav.is-open) .nav-panel__links li:nth-child(4) { transition-delay: 0.23s; }
body.ds2:has(.site-nav.is-open) .nav-panel__links li:nth-child(5) { transition-delay: 0.28s; }
body.ds2:has(.site-nav.is-open) .nav-panel__links li:nth-child(6) { transition-delay: 0.33s; }
body.ds2:has(.site-nav.is-open) .nav-sol__col:nth-child(1) { transition-delay: 0.38s; }
body.ds2:has(.site-nav.is-open) .nav-sol__col:nth-child(2) { transition-delay: 0.43s; }
body.ds2:has(.site-nav.is-open) .nav-sol__col:nth-child(3) { transition-delay: 0.48s; }
body.ds2:has(.site-nav.is-open) .nav-panel__cta { transition-delay: 0.5s; }
body.ds2:has(.site-nav.is-open) :is(.nav-panel__side, .nav-panel__mail) { transition-delay: 0.56s; }
@media (prefers-reduced-motion: reduce) {
	body.ds2 .nav-panel, body.ds2 .nav-panel * { transition: none !important; transform: none !important; }
}

/* Móvil: sin hueco entre el hero y el carrusel. */
@media (max-width: 959px) {
	body.home .hero--home { padding-bottom: 0 !important; }
	body.home .hero--home .hero__inner { padding-bottom: var(--ds-s5); row-gap: var(--ds-s4); }
	body.ds2 .work--carousel { padding-top: 0 !important; }
}

body.ds2 .nav-panel .nav-panel__links a { display: inline-flex; width: max-content; font-weight: 600; color: var(--light-ink); }
/* En el menú la línea solo aparece al pasar el mouse (sin línea en reposo). */
body.ds2 .nav-panel .nav-panel__links a::before { display: none; }
body.ds2 .nav-panel .nav-panel__links a::after { height: 2px; bottom: 0.1em; }

/* Nada se sale de lado a lado (carruseles a sangre). clip no rompe sticky. */
body.ds2 .site-main { overflow-x: clip; }

/* --- Heroes de todas las páginas: sin etiqueta arriba; en páginas internas,
   título a la izquierda y entrada, nota y acciones a la derecha (como en la
   portada). Solo cuando el hero trae acciones (no el del auditor con su campo). */
body.ds2 .hero__link { color: var(--ink); font-size: var(--v4-sm); }
@media (min-width: 960px) {
	body.ds2 .hero--inner .hero__inner:has(> .hero__actions) {
		display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); column-gap: var(--ds-s7); row-gap: var(--ds-s3);
		align-items: start; text-align: left; justify-items: start;
	}
	body.ds2 .hero--inner .hero__inner:has(> .hero__actions) > .hero__title { grid-column: 1; grid-row: 1 / span 3; align-self: center; margin: 0; }
	body.ds2 .hero--inner .hero__inner:has(> .hero__actions) > :is(.hero__lead, .svc-hero__note, .hero__actions) { grid-column: 2; margin: 0; max-width: 40ch; }
	body.ds2 .hero--inner .hero__inner:has(> .hero__actions) > .hero__lead { font-size: var(--v4-lead); line-height: 1.45; color: var(--ink); grid-row: 1; }
	body.ds2 .hero--inner .hero__inner:has(> .hero__actions) > .hero__actions { grid-row: 3; position: static; }
	body.ds2 .hero--inner .hero__inner:has(> .hero__actions) > .hero__actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ds-s2) var(--ds-s5); justify-content: flex-start; }
}
body.ds2 .hero--inner .hero__actions .btn { font-size: var(--v4-sm); padding: var(--ds-s2) var(--ds-s3); }

/* =========================================================================
   /nosotros/ (lectura editorial)
   ========================================================================= */
/* Hero con foto: título a la izquierda, entrada a la derecha. */
body.ds2 .about-hero__title { font-size: var(--ds-fs-h1p); }

/* Historia: título y texto a la izquierda; la foto, fija a la derecha mientras se lee. */
/* Texto de la historia: un solo tamaño y un solo color, ancho cómodo de lectura. */

/* Equipo: retratos iguales lado a lado; «Leer bio» abre la página de cada uno. */

/* Principios sin numeración. */

/* Círculo con texto que sigue al mouse (data-v4-cursor, v4.js). */
.v4-cur--label { width: 6.5rem; height: 6.5rem; margin: -3.25rem 0 0 -3.25rem; font-size: 0.9375rem; font-weight: 500; text-align: center; line-height: 1.15; padding: 0.5rem; }
/* Hero de /nosotros/ más compacto y con la entrada en tamaño de texto. */
/* Mismo ancho y espaciado que «Por qué elegir Andez». */
/* Equipo: retratos que caben en pantalla con nombre y cargo. */

/* =========================================================================
   Página de cada fundador (founder.php)
   ========================================================================= */
/* Bio: un solo tamaño y un solo color. */
body.ds2 :is(.fd__lead, .fd__bio p) { font-size: var(--v4-body); line-height: 1.65; color: var(--light-muted); }
/* Datos en filas con línea: etiqueta a la izquierda, dato a la derecha. */
/* Playlist: tarjeta negra con el reproductor de Spotify bajo pedido. */
/* Ecualizador decorativo. */
@keyframes fd-eq { to { background-size: 4px 30%, 4px 70%, 4px 100%, 4px 45%, 4px 90%; } }
/* El otro fundador */
/* Equipo: más aire a los lados (retratos más centrados). */

/* El equipo de cuatro patas (/nosotros/) */

/* =========================================================================
   /proyectos/ (como la portada: hero en dos columnas, tarjetas limpias)
   ========================================================================= */
@media (min-width: 960px) {
	body.ds2 .work-hero__title { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: 0; }
}
body.ds2 .work-hero__title { font-size: var(--ds-fs-h1p); line-height: 1.04; letter-spacing: -0.035em; }

/* Tarjetas: foto, nombre, frase y una sola etiqueta discreta. */
body.ds2 .wk-grid { gap: var(--ds-s5) var(--ds-s3); }
body.ds2 .wk-dd__btn { font-size: var(--v4-sm); }
/* Filtro de proyectos: separadores tenues que no tocan los bordes. */

/* Móvil: títulos con recuadro que no se parten (el recuadro va entero y el
   tamaño baja lo justo para que quepa). */
@media (max-width: 599px) {
	body.ds2 :is(h1, h2) .frame-box { white-space: nowrap; display: inline-block; }
	body.ds2 :is(.hero--inner .hero__title, .about-hero__title, .work-hero__title, .pj-hero__title) { font-size: min(7.4vw, 2rem); line-height: 1.12; }
	body.ds2 :is(.systems__title, .v4-method__title, .v4-reviews__title, .contact-cta__title, .section__title, .ab-title) { font-size: min(7vw, 1.875rem); }
}
@media (max-width: 640px) { body.ds2 .hero__actions .hero__link { align-self: center; width: auto; } }

/* /proyectos/: filtro fijo abajo (también en móvil) y sin el chat flotante. */
body.ds2.post-type-archive-proyecto .aa { display: none !important; }
@media (max-width: 959px) {
	body.ds2 .wk-dd__btn { width: 100%; box-shadow: 0 14px 40px -12px rgba(0,0,0,.6); }
}
@media (min-width: 960px) { body.ds2 .work-hero__title { grid-row: 1; } }

/* Imágenes con esquinas rectas en todo el sitio. */
body.ds2 main :is(img, picture, video, figure, [class*="__media"], [class*="__pic"], [class*="__img"], .cs-fig, .project-card__media, .wk-card__media, .syst-card__img, .v4-method__pic, .ab-story__pic, .ab-member__pic, .ab-cat__pic, .fd__pic, .principles__media, .journey-step__media) { border-radius: 0 !important; }
/* /proyectos/: menos aire bajo el hero y tarjetas un poco más altas. */
body.ds2 .wk-grid { margin-top: 0; }

/* =========================================================================
   Pulido móvil: espacios parejos
   ========================================================================= */
@media (max-width: 719px) {
	/* Hero de /nosotros/: sin el vacío bajo el texto. */
	/* Formulario: grupos más juntos, el primero pegado a los datos. */
	body.ds2 .contact-cta__grid { gap: var(--ds-s4); }
	body.ds2 .contact-cta__form { gap: var(--ds-s4); }
	body.ds2 .contact-cta .cc-group { margin: 0; padding: 0; }
	body.ds2 .contact-cta .cc-label { margin-bottom: var(--ds-s1); }
	body.ds2 .contact-cta__details div { padding-block: var(--ds-s2); }
	/* Reseñas: la tarjeta mide lo que su texto. */
	body.ds2 .v4-rev { min-height: 0; gap: var(--ds-s3); width: 82vw; }
	/* Proyectos: sin el dato repetido (cliente) en el detalle. */
}

/* El equipo de cuatro patas: carrusel en móvil. */

/* Casos en las páginas de servicio: carrusel de tarjetas como en la portada. */ /* Alineado con el título (skin.css lo corría a la derecha). */

/* =========================================================================
   Planes e inversión (template-parts/offers.php): pestañas + tarjetas
   ========================================================================= */

/* Páginas de servicio: sin numeración visible en método ni capacidades. */

/* Planes: capacidad, landings y exclusiones (CARE® y siguientes). */

/* =========================================================================
   Footer revelado sin CLS. Antes, motion.js fijaba el footer (position:
   fixed) y sumaba margen al contenido después de cargar: Lighthouse medía
   CLS 0,72 en escritorio. Ahora la posición se decide en CSS desde el primer
   pintado: sticky abajo en pantallas de 900 px o más y hasta 16:9 (donde el
   footer cabe en la ventana); en el resto, el footer va en su sitio normal.
   motion.js solo aplica el parallax con transform (no mueve el layout).
   ========================================================================= */
body.ds2.has-footer-reveal .site-main { margin-bottom: 0; }
body.ds2.has-footer-reveal .site-footer { position: relative; left: auto; right: auto; bottom: auto; z-index: 1; }
@media (min-width: 900px) and (max-aspect-ratio: 16/9) and (prefers-reduced-motion: no-preference) {
	body.ds2.has-footer-reveal .site-main { position: relative; z-index: 2; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35); }
	body.ds2.has-footer-reveal .site-footer { position: sticky; bottom: 0; z-index: 1; }
}
@media not all and (min-width: 900px) and (max-aspect-ratio: 16/9) and (prefers-reduced-motion: no-preference) {
	body.ds2.has-footer-reveal .site-main { box-shadow: none; }
}

/* Contraste (WCAG AA): --ink-soft (#938F8A) es para fondos oscuros; en
   secciones claras los textos secundarios usan el gris de su token. */
body.ds2 .section--light { --ink-soft: var(--light-muted, #5E5E5E); }
/* Foco visible (WCAG 2.2, 3:1): el verde no contrasta sobre fondos claros. */
body.ds2 :is(.section--light, .lp-show, .care-report, .offer, .lp-inc__card) :focus-visible { outline-color: var(--light-ink, #080807); }

/* Landings y Care®: encabezado y tarjetas «Qué incluye» (parte alta de la
   página). El resto de piezas va en pieces.css, que carga sin bloquear. */

/* Autorización de datos en los formularios de contacto (Ley 1581). */
body.ds2 .cc-consent { display: flex; gap: var(--ds-s2); align-items: flex-start; margin: var(--ds-s3) 0 0; font-size: var(--v4-xs, 13px); line-height: 1.5; color: var(--muted); cursor: pointer; }
body.ds2 .cc-consent input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
body.ds2 .cc-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
body.ds2 .section--light .cc-consent { color: var(--light-muted); }
body.ds2 .cc-consent:has(input[aria-invalid="true"]) { color: #FF6B6B; }
body.ds2 .section--light .cc-consent:has(input[aria-invalid="true"]) { color: #B3261E; }

/* Tests (Checklist Identity®, Test Impulse®): más ágiles.
   Escritorio: pregunta a la izquierda y respuestas a la derecha, todo en una
   pantalla (sin bajar a buscar «Volver»). Cada respuesta muestra su tecla
   (1, 2, 3…) y el cambio de pregunta es un fundido corto. */
@keyframes ck-swap { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }

/* «Arma tu plan» (template-parts/plan-builder.php): base + extras con
   interruptores y un resumen fijo con el total al mes y el de pago único. */
body.ds2 .pb { padding-top: 0; }
/* Interruptor (extras) y punto (base). */
/* Resumen. */
/* Móvil: barra fija con el total mientras se elige. */

/* Selector de moneda (COP | USD). */
body.ds2 .fx { display: inline-flex; align-self: start; justify-self: start; padding: 3px; gap: 2px; border: 1px solid var(--light-line); border-radius: 999px; background: #fff; }

/* «Arma tu plan» — acabado: base elegida y resumen en negro (punto focal). */

/* Móvil: más compacto. */

/* Planes = una sola pieza: la fila (nombre, precio, selector) es la grilla y
   la base elegida se abre con su detalle (Ideal si, Incluye, capacidad). */
@keyframes pb-open { from { opacity: 0; transform: translate3d(0, -6px, 0); } to { opacity: 1; transform: none; } }

/* «Arma tu plan» en tres pasos: números, paso 3 (datos) y siguiente paso. */
/* /gracias/: siguiente paso según lo elegido. */

/* ANDEZ® Project Builder (4 pasos): chips de preguntas, sugerencia, grupos
   de Engage®, resumen por servicio y orden en móvil (elige → cuéntanos →
   revisa → hablemos). */
/* Resumen por servicio. */
/* Un precio «desde» siempre lo dice, también en móvil. */

/* /servicios/ — «¿Cuál te conviene?» (template-parts/services-guide.php). */
/* Pestañas del configurador general: marca + línea. */

/* ==========================================================================
   Project Builder — paso a paso (una decisión por pantalla). Este bloque
   manda sobre los anteriores del configurador.
   ========================================================================== */
body.ds2 .pb [data-pb-step][hidden] { display: none; }
@keyframes pb-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
/* Progreso. */
/* Encabezado del paso. */
/* Navegación. */
/* Planes: tarjeta corta, radio a la izquierda, elegido en claro con borde. */
/* «Ver qué incluye». */
/* Ayuda para elegir y chips. */
/* Extras: filas cortas. */
/* Paso de datos: resumen corto. */
/* Resumen lateral (escritorio). */
/* Móvil: sin resumen lateral (el paso de datos lo muestra) y barra corta. */
@media (max-width: 999px) {
	body.ds2 .aa { transition: transform var(--motion-normal) var(--ds-ease); }
}
/* Paso a paso: anula la grilla móvil antigua (fila fantasma y radio a la derecha). */
/* Formulario del configurador: «¿Cuándo quieres empezar?» en botones. */

/* ==========================================================================
   Project Builder — versión simple (2 pasos, una columna). Manda sobre todo
   lo anterior del configurador.
   ========================================================================== */
body.ds2 .pb { max-width: 760px; margin-inline: auto; }
body.ds2 .pb [data-pb-step][hidden] { display: none; }
/* Engage®: selector segmentado. */
/* Tarjeta de plan: radio · nombre y línea · precio. */
/* Navegación y letra pequeña. */
/* Paso 2: lo elegido y «¿También te interesa?». */

/* CARE® — «Así se usan tus horas» (diagrama: horas por plan + flujo del mes). */
/* Flechas entre pasos. */

/* Casilla de autorización (todos los formularios): cuadro redondeado de la
   marca en vez del check azul del navegador. */
body.ds2 .cc-consent { display: flex; align-items: flex-start; gap: var(--ds-s2); cursor: pointer; }
body.ds2 .cc-consent input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; display: grid; place-content: center; width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid currentColor; border-radius: 7px; background: transparent; cursor: pointer; transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast); }
body.ds2 .cc-consent input[type="checkbox"]::after { content: ""; width: 11px; height: 6px; border-left: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform var(--motion-fast) var(--ds-ease); }
body.ds2 .cc-consent input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
body.ds2 .cc-consent input[type="checkbox"]:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
body.ds2 .cc-consent input[type="checkbox"]:active { transform: scale(.92); }
body.ds2 .cc-consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.ds2 .cc-consent input[type="checkbox"][aria-invalid="true"] { border-color: #B3261E; }
@media (prefers-reduced-motion: reduce) { body.ds2 .cc-consent input[type="checkbox"], body.ds2 .cc-consent input[type="checkbox"]::after { transition: none; } }

/* ==========================================================================
   Project Builder — tarjetas visuales + resumen + ventana «Hablemos».
   Manda sobre todos los bloques anteriores del configurador.
   ========================================================================== */
body.ds2 .pb { max-width: none; margin-inline: 0; display: grid; gap: var(--ds-s3); }
/* Tarjeta de plan. */
/* Resumen. */
/* ¿Dudas? */
/* Ventana «Tu proyecto. Hablemos.» (sin JS: sección normal). */
@keyframes pb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pb-pop { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.98); } to { opacity: 1; transform: none; } }
/* Trampa antispam: oculta de verdad (el autocompletado no llena display:none). */
.hp-field { display: none !important; }

/* ==========================================================================
   Blog — lectura cómoda: portada legible, tiempo de lectura, índice,
   barra de progreso y tipografía de artículo.
   ========================================================================== */
/* Portada: texto siempre legible sobre la foto. */
/* Lectura. */
/* Índice «En este artículo». */
/* Blog: portada más baja y el artículo empieza antes. */

/* Project Builder — ajustes: ® en línea, total proporcionado y «Pedir una
   llamada» del ancho de la columna de planes. */
@media (min-width: 1000px) {
	body.ds2 .pb { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); column-gap: var(--ds-s3); align-items: start; }
}
/* Resumen: nombre, frase y precio en una columna (los precios largos no aprietan el nombre). */

/* ==========================================================================
   Explicación de cada servicio (template-parts/service-explainer.php):
   Hoy → Lo que hacemos → Lo que recibes, y tarjetas «Qué podemos hacer».
   ========================================================================== */
/* Diagrama. */
/* Flechas entre columnas. */
/* Tarjetas «Qué podemos hacer». */
/* Intelligence®: las capacidades con el mismo estilo (sin numeración visible). */

/* ==========================================================================
   Explicación de servicio — versión editorial Andez (manda sobre la anterior):
   sin cajas de color ni iconos; líneas finas, viñetas «+», tipografía.
   ========================================================================== */
/* «Qué podemos hacer»: lista editorial de dos columnas. */

/* ==========================================================================
   «Qué hacemos» — diseño visual (sx2): antes/después a pantalla partida,
   proceso en línea de tiempo e índice editorial con hover invertido.
   ========================================================================== */
/* Antes / después. */
/* Proceso en línea de tiempo. */
/* Índice editorial. */

/* «Qué es …®» (service-explainer): mismo aspecto que «Primero entendemos tu negocio». */


/* /gracias/: agenda de Cal.com en línea (plan, contacto, prefooter). */
/* Ventana del configurador: retrato de quien toma la reunión. */

/* ==========================================================================
   Historia del servicio (template-parts/service-story.php): secciones claras
   y tranquilas, estilo editorial — «¿Es para ti?», «Lo que logras», «Cómo lo
   hacemos» (fases), «El sistema que recibes» (ventana de producto + módulos
   con maquetas sobre fondo punteado) y «Modelo Andez».
   ========================================================================== */
body.ds2 .ss { --ss-bg: #F2F2F2; --ss-card: #FFFFFF; --ss-ink: #0B0B0A; --ss-soft: #5E5E5E; --ss-line: #DCDCDC; --ss-ok: #0E8F5A; background: var(--ss-bg); color: var(--ss-ink); }
body.ds2 .ss-label { margin: 0; font-size: var(--ds-fs-base); font-weight: 500; color: var(--ss-ink); }
body.ds2 .ss-title { margin: 0; max-width: 18ch; font-size: var(--ds-fs-h2); font-weight: 500; line-height: 1.06; letter-spacing: -0.03em; color: var(--ss-ink); }
body.ds2 .ss-lead { margin: var(--ds-s5) 0 0; max-width: 54ch; font-size: var(--ds-fs-lead); line-height: 1.55; color: var(--ss-soft); }
body.ds2 .ss-here { margin: var(--ds-s6) 0 var(--ds-s3); font-size: var(--ds-fs-lead); font-weight: 500; color: var(--ss-ink); }
body.ds2 .ss-bullets { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ds-s2); }
body.ds2 .ss-bullets li { position: relative; padding-left: var(--ds-s5); font-size: var(--ds-fs-lead); line-height: 1.45; color: var(--ss-ink); }
body.ds2 .ss-bullets li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: var(--ss-ink); }

/* Lo que logras */
body.ds2 .ss-gain { padding-top: var(--ds-s4); border-top: 1px solid var(--ss-line); }
body.ds2 .ss-gain__t { margin: 0 0 var(--ds-s3); font-size: var(--ds-fs-h4); font-weight: 500; letter-spacing: -0.01em; color: var(--ss-ink); }

/* Fases */
body.ds2 .ss-phase { border-bottom: 1px solid var(--ss-line); }
body.ds2 .ss-phase summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-s4); padding: var(--ds-s4) 0; cursor: pointer; list-style: none; }
body.ds2 .ss-phase summary::-webkit-details-marker { display: none; }
body.ds2 .ss-phase .v4-acc__icon { color: var(--ss-ink); flex: none; }
body.ds2 .ss-phase[open] .v4-acc__icon::after { transform: rotate(0deg); }
body.ds2 .ss-phase p { margin: 0 0 var(--ds-s5); max-width: 56ch; font-size: var(--ds-fs-base); line-height: 1.65; color: var(--ss-soft); }
body.ds2 .ss-phase:first-child summary { padding-top: 0; }

/* Sistema: cabecera, ventana de producto y módulos */
body.ds2 .ss-app, body.ds2 .ss-hub__map { background-color: #F7F7F5; background-image: radial-gradient(#D6D6D2 1px, transparent 1px); background-size: 14px 14px; }
body.ds2 .ss-app { padding: var(--ds-s5); border: 1px solid var(--ss-line); border-radius: 24px; }
@media (max-width: 899px) {
	body.ds2 .ss-app { padding: var(--ds-s3); }
}

/* Hub «conectado» */
body.ds2 .ss-hub__t { margin: 0; font-size: var(--ds-fs-h3); font-weight: 500; letter-spacing: -0.02em; color: var(--ss-ink); }
body.ds2 .ss-hub__map { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--ss-line); border-radius: 24px; }
@media (max-width: 520px) { body.ds2 .ss-hub__map { aspect-ratio: 1; } }

/* Módulos */
body.ds2 .ss-mods { display: grid; gap: var(--ds-s4); margin: var(--ds-s7) 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { body.ds2 .ss-mods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.ds2 .ss-mod { display: flex; flex-direction: column; overflow: hidden; background: var(--ss-card); border: 1px solid var(--ss-line); border-radius: 20px; }

/* Modelo Andez */
body.ds2 .ss-links { display: grid; gap: var(--ds-s2); margin: var(--ds-s6) 0 0; padding: 0; list-style: none; }
body.ds2 .ss-links a { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: var(--ds-s3); align-items: center; padding: var(--ds-s4) 0; color: var(--ss-ink); text-decoration: none; border-bottom: 1px solid var(--ss-line); }
body.ds2 .ss-links strong { font-weight: 600; }
body.ds2 .ss-links span { color: var(--ss-soft); }
body.ds2 .ss-links a:hover i { transform: translateX(4px); }
body.ds2 .ss-links i { font-style: normal; transition: transform var(--motion-normal); }
@media (max-width: 600px) { body.ds2 .ss-links a { grid-template-columns: minmax(0, 1fr) auto; } body.ds2 .ss-links span { grid-column: 1; } }
body.ds2 .ss-go { margin-top: var(--ds-s6); }

/* Maquetas (.ssm): mini interfaces con datos ficticios */
body.ds2 .ss-bullets li { padding-left: 22px; }
body.ds2 .ss-bullets li::before { width: 7px; height: 7px; }

/* Historia del servicio en el diseño Andez: negro, texto blanco, gris para lo
   secundario, verde solo de acento; las maquetas son pantallas claras. */
body.ds2 .ss { --ss-bg: var(--bg); --ss-ink: var(--ink); --ss-soft: var(--muted); --ss-line: #232321; background: var(--bg); color: var(--ink); }
body.ds2 .ss-app, body.ds2 .ss-hub__map { background-color: #111110; background-image: radial-gradient(#2A2A27 1px, transparent 1px); }
body.ds2 .ss-app, body.ds2 .ss-hub__map { border-color: #232321; }
body.ds2 .ss-mod { background: #0F0F0E; border-color: #232321; }
body.ds2 .ss-bullets li::before { background: var(--accent); }
body.ds2 .ss-gain { border-top-color: #232321; }
body.ds2 .ss-gain__t, body.ds2 .ss-hub__t, body.ds2 .ss-label, body.ds2 .ss-here { color: var(--ink); }
body.ds2 .ss-title { font-weight: 600; }
body.ds2 .ss-label { color: var(--muted); }
body.ds2 .ss-links a { color: var(--ink); }

/* Módulos en carrusel (una fila, arrastre + flechas de carousel.js) y
   maquetas oscuras: todo en el negro Andez, sin saltos a blanco. */
body.ds2 .ss-mods-wrap { position: relative; margin-top: var(--ds-s6); }
body.ds2 .ss-mods { display: flex; gap: var(--ds-s4); margin: 0; padding: 0 max(var(--gutter, 20px), calc((100vw - var(--container, 1280px)) / 2 + var(--gutter, 20px))) var(--ds-s2); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
body.ds2 .ss-mods::-webkit-scrollbar { display: none; }
body.ds2 .ss-mod { flex: 0 0 min(360px, 82vw); scroll-snap-align: start; }
body.ds2 .ss-mods { scroll-padding-inline: max(var(--gutter, 20px), calc((100vw - var(--container, 1460px)) / 2 + var(--gutter, 20px))); }
body.ds2 .ss .ss-hub__map { aspect-ratio: 16 / 11; }

/* Balance: label + título a la izquierda (sticky), texto a la derecha.
   Sin cuadrículas redondeadas: bordes rectos y líneas finas. */
body.ds2 .ss .ss-mod, body.ds2 .ss .ss-app, body.ds2 .ss .ss-hub__map { border-radius: 0; }
body.ds2 .ss .ss-mod { background: transparent; border: 0; border-left: 1px solid var(--ss-line); }
body.ds2 .ss .ss-mods { gap: 0; }
body.ds2 .ss .ss-mods > li:last-child { border-right: 1px solid var(--ss-line); }
/* Títulos completos, en pocas líneas (sin ancho máximo en caracteres). */
body.ds2 .ss .ss-title { max-width: none; text-wrap: balance; }

/* Historia: experiencia de scroll (v4.js). */
body.ds2 .ss-lead[data-ss-lit] span { color: var(--ink); opacity: 0.18; transition: opacity var(--motion-normal) ease; }
body.ds2 .ss-lead[data-ss-lit] span.on { opacity: 1; }
body.ds2 .ss-anim.ss-app { opacity: 0; transform: translateY(60px) scale(0.94); transition: opacity var(--motion-slow) ease, transform 1.2s var(--ds-ease); }
body.ds2 .ss-anim.ss-app.is-in { opacity: 1; transform: none; }
/* Módulos fijos que corren de lado (escritorio). */
body.ds2 .ss-pin { margin-top: var(--ds-s5); }
body.ds2 .ss-pin .ss-mods { width: 100%; scroll-snap-type: none; overflow-x: hidden; }
body.ds2 .ss-pin .ss-mod { flex-basis: 400px; }
body.ds2 .ss-pin > .carousel-arrow { display: none; }

/* Heroes de cada servicio: el fondo de Identity® (luz verde + cortina) y aire
   arriba y abajo; nada pegado al menú ni a la sección siguiente. */
body.ds2.single-servicio .hero--inner { display: flex; align-items: center; min-height: min(92svh, 860px); padding-top: calc(var(--ds-s8) - var(--ds-s4)); padding-bottom: var(--ds-s7); }
body.ds2.single-servicio .hero--inner .hero__inner { width: 100%; }
@media (max-width: 760px) { body.ds2.single-servicio .hero--inner { min-height: 0; padding-top: var(--ds-s8); padding-bottom: var(--ds-s6); } }

/* Heroes internos (servicios y diagnóstico web): contenido alineado abajo,
   más aire arriba que abajo; textos pequeños con una sola medida. */
body.ds2.single-servicio .hero--inner { display: flex; align-items: flex-end; min-height: min(88svh, 820px); padding-top: var(--ds-s8); padding-bottom: var(--ds-s6); }
body.ds2 .hero--inner .hero__lead p, body.ds2 .hero--inner .hero__lead > p:first-child { font-size: var(--ds-fs-lead); line-height: 1.5; }
body.ds2 .ss-label { font-size: var(--ds-fs-sm); letter-spacing: 0; }
@media (max-width: 760px) { body.ds2.single-servicio .hero--inner { min-height: 0; padding-top: var(--ds-s8); padding-bottom: var(--ds-s5); } }

/* /diagnostico-web/: historia en negro con pasos animados y carrusel. */
@keyframes wa-type { to { width: 13ch; } }
@keyframes wa-scan { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Footer revelado: no se pinta mientras está tapado (el navegador lo contaba
   como el elemento más grande de la carga, LCP). v4.js lo muestra cuando el
   final de la página se acerca; sin JS se ve siempre. */
@media (min-width: 900px) {
	html.v4-foot-js body.ds2.has-footer-reveal .site-footer:not(.is-near) { visibility: hidden; }
}

/* Historia: botones de cada sección y carrusel sin scroll vertical interno. */
body.ds2 .ss-mods { overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; padding-bottom: var(--ds-s2); }
body.ds2 .ss-mod { overflow: hidden; }
/* Títulos de la historia en celular: llenan el ancho (sin balancear en líneas cortas). */
@media (max-width: 899px) { body.ds2 .ss .ss-title { text-wrap: wrap; } }
/* «Puede que estés aquí porque…» y sus ítems: un paso por debajo del párrafo. */
body.ds2 .ss-here { margin: var(--ds-s5) 0 var(--ds-s2); font-size: var(--ds-fs-base); }
body.ds2 .ss-bullets { gap: var(--ds-s1); }
body.ds2 .ss-bullets li { font-size: var(--ds-fs-sm); line-height: 1.5; color: var(--muted); }
body.ds2 .ss-bullets li::before { top: 0.6em; width: 6px; height: 6px; }

/* Landings SEO: hero con más aire arriba (alineado abajo, como los servicios)
   y «Qué incluye» como carrusel con gráficas; tarjetas rectas, lo interno
   puede tener esquinas suaves. */

/* Portada en celular: el hero respira (más aire arriba que abajo) y se separa
   del carrusel de proyectos. */
@media (max-width: 959px) {
	body.home .hero--home .hero__inner { padding-top: var(--ds-s8); padding-bottom: var(--ds-s6); }
	body.ds2.home .work--carousel { padding-top: var(--ds-s3) !important; }
}
/* «Seis servicios, un solo equipo» en celular: título completo y la imagen
   primero en cada servicio. */
@media (max-width: 899px) {
	body.ds2 .systems__title { max-width: none; }
	body.ds2 .syst-card { display: flex; flex-direction: column; }
	body.ds2 .syst-card__body { display: contents; }
	body.ds2 .syst-card__img { order: -1; margin-bottom: var(--ds-s4); }
}

/* Títulos sin cortes feos en celular: los heroes fluyen de corrido (sin
   renglones fijos) y la palabra enmarcada nunca queda sola en su línea. */
@media (max-width: 760px) {
	body.ds2 .hero .hero__title { display: block; text-wrap: pretty; }
	body.ds2 .hero .hero__title > span { display: inline; white-space: normal; }
}
/* Celular: al bajar, el menú desenfoca lo que pasa por detrás (el logo ya no
   se monta sobre el texto); se mantiene el modo de mezcla del diseño. */
@media (max-width: 899px) {
	body.ds2 .site-header.is-scrolled { -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important; }
}


/* ==========================================================================
   Pulido DS (auditoría 2026-11-08): área de toque, mínimo 12 px y estados.
   ========================================================================== */
/* Área de toque ≥ 24 px sin mover nada: el enlace crece hacia dentro de su
   línea (padding + margen negativo). */
body.ds2 .site-footer__col a, body.ds2 .site-footer__legal a, body.ds2 .lang-switch a { display: inline-block; padding-block: 0.35em; margin-block: -0.35em; }
body.ds2 .lang-switch a { padding-inline: 0.35em; margin-inline: -0.35em; }
/* Mínimo 12 px (regla del sistema): maquetas, diagrama y notas de precio. */ /* HEX bajo la muestra: no cabe a 12 en 5 columnas */
body.ds2 .site-footer__legal, body.ds2 .site-footer__legal a { font-size: max(12px, 0.75rem); }
/* Estados de formulario: una sola transición para foco, error y éxito. */
body.ds2 :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]) { transition: border-color var(--motion-fast) var(--ds-ease), box-shadow var(--motion-fast) var(--ds-ease), background-color var(--motion-fast) var(--ds-ease); }
body.ds2 :is(input, textarea, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.ds2 .form-msg { transition: opacity var(--motion-fast) var(--ds-ease), transform var(--motion-fast) var(--ds-ease); }
/* Menú: con «reducir movimiento», abre y cierra sin deslizar. */
@media (prefers-reduced-motion: reduce) {
	body.ds2 .nav-panel, body.ds2 .nav-panel__links li { transition-duration: 0.01ms !important; transition-delay: 0s !important; transform: none !important; }
}