/* =========================================================================
   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
     sección 72px móvil → 136px escritorio (s7); héroe y cierre usan s8
     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.875rem, 0.85rem + 0.1vw, 0.9375rem);
	--ds-fs-base:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--ds-fs-lead:  clamp(1.125rem, 1.03rem + 0.45vw, 1.375rem);
	--ds-fs-h4:    clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--ds-fs-h3:    clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
	--ds-fs-h2:    clamp(2rem, 1.35rem + 3.2vw, 3.75rem);
	--ds-fs-h1:    clamp(2.25rem, 1.35rem + 5vw, 5.5rem);    /* héroe de portada */
	--ds-fs-h1p:   clamp(2rem, 1.4rem + 3.6vw, 4.5rem); /* título de página interna: 36 → 72px */

	/* 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 */
	--ds-s1: 0.5rem;
	--ds-s2: 1rem;
	--ds-s3: 1.5rem;
	--ds-s4: 2rem;
	--ds-s5: clamp(2rem, 1.5rem + 2vw, 3rem);
	--ds-s6: clamp(3rem, 2rem + 3.5vw, 4.5rem);
	--ds-s7: clamp(4.5rem, 3rem + 6vw, 8.5rem);
	--ds-s8: clamp(6rem, 4rem + 8vw, 11rem);
	--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 */
	--ds-ease:  cubic-bezier(0.16, 1, 0.3, 1);
	--ds-fast:  0.2s;
	--ds-mid:   0.45s;
	--ds-slow:  0.9s;

	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 .container--narrow { max-width: calc(var(--ds-w-text) + 2 * 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; }

/* Banner de cookies: una línea discreta, no una tarjeta encima del héroe */
body.ds2 .andez-cc__box { padding: 8px 10px 8px 14px; border-radius: 10px; font-size: var(--ds-fs-label); }

/* ----------------------------------------------------------------------
   5. PORTADA — la pila de sistemas sin huecos muertos
   ---------------------------------------------------------------------- */
body.ds2 .syst-card__desc { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem); max-width: 30ch; }
body.ds2 .syst-card__list li { font-size: var(--ds-fs-sm); }
@media (min-width: 900px) {
	/* Cada panel cabe en pantalla y la foto acompaña en serio (antes 360px) */
	body.ds2 .syst-card { min-height: min(78vh, 760px); }
	body.ds2 .syst-card__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ds-s6); align-items: stretch; }
	body.ds2 .syst-card__img { max-width: none; justify-self: stretch; aspect-ratio: auto; min-height: 320px; height: 100%; }
}

/* ----------------------------------------------------------------------
   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 */
	body.ds2 .andez-cc { left: 8px; right: 8px; bottom: 8px; }
	body.ds2 .andez-cc__box { flex-wrap: nowrap; gap: 10px; padding: 8px 8px 8px 12px; }
	body.ds2 .andez-cc__text { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.35; }
}

/* ----------------------------------------------------------------------
   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 0.9s 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 */
body.ds2 .hero--inner .hero__badges { justify-content: flex-start; margin-bottom: var(--ds-s4); }
body.ds2 .hero--inner .hero__badge {
	display: flex; flex-wrap: wrap; gap: 0.35em 0.9em; justify-content: flex-start;
	max-width: none; white-space: normal; text-align: left; line-height: 1.5;
	padding: 0; border: 0; background: none;
	font-family: var(--font-mono); font-size: var(--ds-fs-label); letter-spacing: 0.08em; text-transform: uppercase;
}
body.ds2 .hero--inner .hero__badge .sep { display: none; }

/* 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); }
body.ds2 .hero .svc-hero__note,
body.ds2 .hero ~ .breadcrumbs-wrap,
body.ds2 main > .breadcrumbs-wrap { display: none; }
body.ds2 .hero--home:not(.hero--inner) .hero__badge--studio .coords,
body.ds2 .hero--home:not(.hero--inner) .hero__badge--studio .sep { display: none; }

/* Nosotros: misma composición que el resto de páginas internas (izquierda) */
body.ds2 .about-hero { text-align: left; }
body.ds2 .about-hero__title { justify-items: start; text-align: left; max-width: min(18ch, 100%); }
body.ds2 .about-hero__lead { margin: var(--ds-s5) 0 0; max-width: 56ch; text-align: left; font-size: var(--ds-fs-lead); line-height: 1.5; }
body.ds2 .about-hero__crumb { font-family: var(--font-mono); font-size: var(--ds-fs-label); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--ds-s4); }

/* 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__mark { margin-bottom: var(--ds-s4); }
	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: 0.9s !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__incl { display: none; }
body.ds2 .journey-step__desc { font-size: var(--ds-fs-base); max-width: 42ch; }

/* ----------------------------------------------------------------------
   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 .pj-label,
body.ds2 .pj-detalles__label,
body.ds2 .sec-label,
body.ds2 .method-step__num { font-size: max(0.75rem, 12px); }
body.ds2 .site-footer .newsletter-form__legal,
body.ds2 .site-footer .newsletter-form__legal a,
body.ds2 .pj-label small,
body.ds2 .pj-detalles__row dt,
body.ds2 .nav-count,
body.ds2 .idplan__pill { font-size: max(0.75rem, 12px); }
body.ds2 .aihub__chips span,
body.ds2 .aiflow__tool,
body.ds2 .bl-aside__label,
body.ds2 .aa__status,
body.ds2 .aa__foot,
body.ds2 .aa-m__ava { font-size: max(0.75rem, 12px); }
body.ds2 .work-hero .hero__badge,
body.ds2 .site-footer .site-footer__newsletter .newsletter-form__legal,
body.ds2 .breadcrumbs ol,
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,
body.ds2 .pj-ficha__eyebrow,
body.ds2 .pj-results__src,
body.ds2 .hero--home .hero__badge,
body.ds2 .hero--home .hero__badge--studio { font-size: max(0.75rem, 12px); }
body.ds2 .syst-card__idx,
body.ds2 .journey-step__label,
body.ds2 .site-footer .ask-ai .ask-ai__label,
body.ds2 .front__label,
body.ds2 .front__fix,
body.ds2 .statement__count { font-size: max(0.75rem, 12px); }
body.ds2 .idplan__idx,
body.ds2 .idplan .idplan__label,
body.ds2 .idcheck2__score small,
body.ds2 .idcheck2__caption,
body.ds2 .case__idx,
body.ds2 .idpage .hero--inner .hero__lead .svc-hero__note { font-size: max(0.75rem, 12px); }
body.ds2 .svc-step__num,
body.ds2 .svcsol__fact dt,
body.ds2 .svc-solutions .svcsol__fact dt,
body.ds2 .svc-next__sys,
body.ds2 .svc-solutions .svcsol__keys,
body.ds2 .svc-scope__label { font-size: max(0.75rem, 12px); }
body.ds2 .svc-partner__name,
body.ds2 .svc-cap__idx,
body.ds2 .svc-cap__flow,
body.ds2 .need__sys,
body.ds2 .need__cat,
body.ds2 .need__keys { font-size: max(0.75rem, 12px); }
body.ds2 .bl-landing__label,
body.ds2 .need-t__sys,
body.ds2 .needs__sysname,
body.ds2 .ck-hero__note,
body.ds2 .bn2__coords,
body.ds2 .bn2__label { font-size: max(0.75rem, 12px); }
body.ds2 .bn2-row__note,
body.ds2 .bn2__legal,
body.ds2 .rc-feat__flag,
body.ds2 .rc-list__kicker,
body.ds2 .rc-card__pdf,
body.ds2 .rc-tag { font-size: max(0.75rem, 12px); }
body.ds2 .bn__promo-kicker { font-size: max(0.75rem, 12px); }