/* =====================================================================
   Aplicación del sistema "Tintes + grano" (es-assets/sistema/) a la home ES.
   Tokens y componentes en sistema.css; aquí solo el mapeo a la web.
   ===================================================================== */

/* ---------- Base ---------- */
html:root body { color: var(--cc-ink); }
html:root h1, html:root h2 { color: var(--cc-ink); }
html:root .section-label,
html:root .approach-eyebrow { color: var(--cc-ink-2); }
html:root .eyebrow-dot { background: var(--cc-vm); }

/* CTA: rosa en toda la web */
html:root .btn-primary,
html:root .nav .btn-primary,
html:root .hero .hero-cta-block .btn-primary,
html:root .cta-destacado .btn-primary { color: #FFFFFF; background: var(--cc-vm); border-color: var(--cc-vm); box-shadow: none; }
html:root .btn-primary:hover { background: var(--cc-vm-ink); border-color: var(--cc-vm-ink); }

/* ---------- Hero: tinte AI con grano suave (dirección C) ---------- */
html:root .hero > .hero-inner::before {
  background:
    url('assets/brand/grano-fuerte.svg') 0 0 / 180px 180px,
    radial-gradient(40% 50% at 12% 18%, #FFFFFF 0%, transparent 70%),
    radial-gradient(45% 55% at 90% 12%, #C9E9FF 0%, transparent 70%),
    radial-gradient(50% 50% at 70% 95%, #FFE6F2 0%, transparent 70%),
    var(--cc-tint-ai);
  background-blend-mode: soft-light, normal, normal, normal, normal;
}
html:root .hero-copy .hero-headline,
html:root .hero-copy .hero-deck { color: var(--cc-ink); }
html:root .hero-copy .hero-subhead { color: var(--cc-ink-2); }
html:root .hero .hero-cta-block > .cta-context { color: var(--cc-ink-2); text-shadow: none; font-weight: 500; }
html:root .hero .mc-editorial-note { color: var(--cc-ink); filter: none; }
html:root .map-card::before,
html:root .map-card::after { border-color: rgba(11,26,46,.08); background: rgba(255,255,255,.55); -webkit-backdrop-filter: none; backdrop-filter: none; }
html:root .map-card::after { background: rgba(255,255,255,.82); }

/* ---------- Qué hacemos: tinte por servicio + UI dentro ---------- */
html:root .operating-bridge { background: #FFFFFF; }
html:root .operating-intro > p.operating-lede { color: var(--cc-ink-2); }
html:root .service-card { border-color: var(--cc-line); border-radius: var(--cc-r-card); }
html:root .service-card .svc-visual-ai { background: var(--cc-tint-ai); border-bottom: 0; }
html:root .service-card .svc-visual-vm { background: var(--cc-tint-vm); border-bottom: 0; }
html:root .svc-ui { border-radius: var(--cc-r-ui); box-shadow: var(--cc-shadow); }
html:root .service-ai .service-kicker { color: var(--cc-ai-ink); }
html:root .service-startcorps .service-kicker { color: var(--cc-vm-ink); }
html:root .svc-ui-head em { color: var(--cc-ai-ink); background: #D7EFFF; }
html:root .svc-visual-vm .svc-ui-head em { color: var(--cc-vm-ink); background: #FFE0EF; }
html:root .svc-flow .t-agent { color: var(--cc-ai-ink); background: #D7EFFF; }
html:root .svc-stages .is-now { color: var(--cc-vm-ink); border-top-color: var(--cc-vm); }
html:root .service-tags li { color: var(--cc-ink); background: #FFFFFF; border-color: var(--cc-line); }
html:root .operating-close { color: var(--cc-ink-2); }

/* ---------- Método: minis con tinte, banda CTA en campo rosa ---------- */
html:root .method-mini { background-image: none; }
html:root .method-mini-decide,
html:root .method-mini-plan { background-color: var(--cc-tint-ai); }
html:root .method-mini-build,
html:root .method-mini-run { background-color: var(--cc-tint-vm); }
html:root .method-mini-prove,
html:root .method-mini-handover { background-color: var(--cc-tint-ok); }
html:root .method-mini-prove path { stroke: var(--cc-ok-ink); }
html:root .method-mini-run strong { background: var(--cc-vm); }
html:root .method-mini-handover strong { color: var(--cc-ok-ink); background: #DDF6CC; }
html:root .method-step-head b,
html:root .method-entry b { color: var(--cc-ink-2); }
html:root .method-steps article { border-color: var(--cc-line); border-radius: var(--cc-r-card); }
html:root .method-entry { border-color: var(--cc-line); }
html:root .method-entry-num { color: #FFFFFF; background: var(--cc-vm); }
html:root .method-tabs button[aria-selected="true"] { color: var(--cc-ink); }

html:root .method-cta.cc-field { background: var(--f-base); border: 0; border-radius: var(--cc-r-card); box-shadow: none; }
html:root .method-cta p { color: #FFFFFF; font-family: var(--cc-hand); font-size: clamp(30px, 3.2vw, 40px); font-weight: 700; }
html:root .method-cta a { color: var(--cc-ink); background: #FFFFFF; }
html:root .method-cta a:hover { background: #F4F6F9; }
html:root .method-cta small { color: rgba(255,255,255,.88); }

/* ---------- Casos: diseño actual + chip de servicio ---------- */
html:root .proof-kicker .cc-chip { white-space: nowrap; font-size: 8.5px; }
html:root .proof-kicker .cc-chip--vm { color: var(--cc-vm-ink); background: #FFE0EF; }
html:root .proof-kicker .cc-chip--ai { color: var(--cc-ai-ink); background: #D7EFFF; }
html:root .resultados { background: #FBFCFD; }

/* ---------- Equipo: "Por qué CoCoCo" sobre tinte neutro ---------- */
html:root .team-why,
html:root[data-locale="es"] .team-why {
  color: var(--cc-ink);
  background: var(--cc-tint-neutral);
  border: 0;
  border-radius: var(--cc-r-card);
  box-shadow: none;
}
html:root .team-why::after, html:root[data-locale="es"] .team-why::after { display: none; }
html:root .team-why h3 { color: var(--cc-ink); font-family: var(--cc-serif); font-weight: 600; letter-spacing: -.03em; }
html:root .team-why > p { color: var(--cc-ink-2); }
html:root .team-why .section-label { color: var(--cc-vm-ink); }

/* ---------- Encaje y FAQ: fondos suaves ---------- */
html:root .para-quien { background: #FFFFFF; }
html:root .faq { background: #FBFCFD; }

/* ---------- Cierre: campo oscuro con grano ---------- */
html:root .cta-destacado { background: #FFFFFF; }
html:root .cta-destacado::before,
html:root .cta-destacado::after { display: none; }
html:root .cta-destacado .cta-inner.cc-field { background: var(--f-base); border: 0; border-radius: var(--cc-r-card); box-shadow: none; }
html:root .cta-inner h2 { color: #FFFFFF; }
html:root .cta-inner p, html:root .cta-inner .cta-context { color: rgba(255,255,255,.8); }
html:root .cta-inner .section-label { color: #9FD8FF; }
/* Comprobar: gráfico y cifra en verde resultados */
html:root .method-mini-prove svg path { stroke: var(--cc-ok-ink); }
html:root .method-mini-prove [data-count-to],
html:root .method-mini-prove .prove-result b { color: var(--cc-ok-ink); }

/* =====================================================================
   Auditoría de maqueta · correcciones (2026-10-06)
   ===================================================================== */
:root { --cc-container: 1200px; --cc-gutter: 24px; --cc-sec: 96px; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; }
@media (max-width: 820px) { :root { --cc-gutter: 16px; --cc-sec: 72px; } }

/* 1 · Ritmo vertical único entre secciones */
html:root .operating-bridge,
html:root .approach,
html:root .resultados,
html:root .team-story,
html:root .para-quien,
html:root .faq,
html:root .cta-destacado { padding-top: var(--cc-sec); padding-bottom: var(--cc-sec); }
html:root .hero > .hero-inner > .map-card-section { padding-bottom: 24px; }
html:root .hero-logos { padding-top: 56px; padding-bottom: 56px; }

/* 2 · Un solo contenedor: mismo borde izquierdo en todas las secciones */
html:root .section-inner { max-width: calc(var(--cc-container) + 2 * var(--cc-gutter)); padding-left: var(--cc-gutter); padding-right: var(--cc-gutter); }
html:root .operating-bridge { padding-left: max(var(--cc-gutter), calc((100vw - var(--cc-container)) / 2)); padding-right: max(var(--cc-gutter), calc((100vw - var(--cc-container)) / 2)); }
html:root .operating-intro,
html:root .service-grid { max-width: var(--cc-container); width: 100%; }
html:root .hero-logos .section-inner { width: auto; }

/* 3 · El cierre ocupa el ancho del contenedor, como el resto de bloques */
html:root .cta-destacado { padding-left: 0; padding-right: 0; }
html:root .cta-destacado .cta-inner { width: calc(100% - 2 * var(--cc-gutter)); max-width: var(--cc-container); padding: 88px 40px; }
html:root .cta-inner h2 { max-width: 16ch; margin-left: auto; margin-right: auto; }
@media (max-width: 820px) { html:root .cta-destacado .cta-inner { padding: 56px 22px; } }

/* 4 · Etiquetas: una sola mono y un solo tamaño */
html:root .section-label,
html:root .approach-eyebrow,
html:root .cta-inner .section-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .09em; }

/* 5 · Footer: los títulos de columna habían quedado tinta sobre tinta */
html:root footer h2,
html:root .footer-eyebrow { color: #87A2B3; }

/* 6 · Restos de azul fuera del sistema → tinta / acento del sistema */
html:root .faq details[open] summary,
html:root .faq summary { color: var(--cc-ink); }
html:root .faq summary span { color: var(--cc-vm); }
html:root .team-person a,
html:root .team-presence span { color: var(--cc-ink); }
html:root .proof-count strong { color: var(--cc-ink); }
html:root .proof-progress span { background: var(--cc-ink); }
/* 7 · Encaje: viñetas en el acento del sistema */
html:root .fit-list li::before,
html:root .fit-point i,
html:root .para-quien li::marker { color: var(--cc-vm); }

/* =====================================================================
   Revisión 2 (2026-10-06)
   ===================================================================== */
/* Hero: vuelve el azul profundo (foto de cielo ampliada, solo cielo) + grano */
html:root .hero > .hero-inner::before {
  background:
    url('assets/brand/grano-fuerte.svg') 0 0 / 180px 180px,
    linear-gradient(180deg, rgba(1,22,44,.10) 0%, rgba(0,60,140,.06) 60%, rgba(1,22,44,.14) 100%),
    url('assets/hero/hero-business-landscape-v1.png') center 8% / 260% auto no-repeat,
    #1F5FB8;
  background-blend-mode: soft-light, normal, normal, normal;
}
@media (max-width: 820px) {
  html:root .hero > .hero-inner::before { background-size: 180px 180px, auto, auto 260%, auto; background-position: 0 0, 0 0, center 4%, 0 0; }
}
html:root .hero-copy .hero-headline,
html:root .hero-copy .hero-deck { color: #FFFFFF; }
html:root .hero-copy .hero-subhead { color: rgba(255,255,255,.88); }
html:root .hero .hero-cta-block > .cta-context { color: rgba(255,255,255,.9); text-shadow: 0 1px 2px rgba(1,22,44,.35); }
html:root .hero .mc-editorial-note { color: #FFFFFF; filter: drop-shadow(0 1px 1.5px rgba(1,22,44,.4)); }
html:root .map-card::before { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); }
html:root .map-card::after { background: rgba(255,255,255,.5); border-color: rgba(255,255,255,.6); }

/* Titulares: una línea si caben, dos líneas equilibradas si no */
html:root h2 { text-wrap: balance; }
html:root .proof-heading, html:root[data-locale="es"] .proof-heading { max-width: none; }
html:root #results h2, html:root[data-locale="es"] #results h2,
html:root #team-title { max-width: none; }
/* Encaje: cabecera arriba a todo el ancho y las 3 señales en columnas */
html:root .fit-inner { grid-template-columns: 1fr; }
html:root #fit h2, html:root[data-locale="es"] .fit-intro h2 { max-width: none; font-family: var(--cc-serif); }
html:root .fit-intro { display: grid; grid-template-columns: 1fr minmax(0, 46ch); gap: 12px 48px; align-items: end; margin-bottom: 48px; }
html:root .fit-intro .section-label { grid-column: 1 / -1; }
html:root .fit-signals { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
html:root .fit-signals article { margin: 0; padding: 28px; background: var(--cc-tint-neutral); border: 0; border-radius: var(--cc-r-card); }
@media (max-width: 900px) { html:root .fit-intro { grid-template-columns: 1fr; } html:root .fit-signals { grid-template-columns: 1fr; } }
html:root .faq-head h2 { max-width: none; white-space: nowrap; }
@media (max-width: 820px) { html:root .faq-head h2 { white-space: normal; } }
/* Párrafos bajo titular: medida de lectura única (≈ 60 caracteres) */
html:root .operating-intro > p.operating-lede,
html:root .team-intro > p,
html:root .fit-intro > p,
html:root .faq-head > p,
html:root .cta-inner > p:not(.section-label) { max-width: 58ch; text-wrap: pretty; }

/* Equipo: presencia en una sola tipografía */
html:root .team-presence { gap: 6px; color: var(--cc-ink-2); font-size: 14px; }
html:root .team-presence > span:first-child { color: var(--cc-ink); font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* Cierre: más grande en desktop, titular en dos líneas */
html:root .cta-destacado .cta-inner { padding: 120px 48px; }
html:root .cta-inner h2 { max-width: 17ch; font-size: clamp(40px, 6vw, 84px); line-height: .98; margin-top: 20px; margin-bottom: 24px; }
html:root .cta-inner > p:not(.section-label) { margin-left: auto; margin-right: auto; font-size: 18px; }
@media (max-width: 820px) { html:root .cta-destacado .cta-inner { padding: 64px 22px; } }
html:root .fit-signals { border-top: 0; }
html:root .fit-signals article { padding: 28px; border-bottom: 0; }
html:root .fit-signals article::before, html:root .fit-signals h3::before { display: none; }
html:root .fit-signals h3 { color: var(--cc-ink); padding-left: 0; }
html:root .fit-signals h3 { counter-increment: fit; }
html:root .fit-signals { counter-reset: fit; }
html:root .fit-signals h3::after { content: none; }
html:root .fit-signals article > h3 { display: block; }
html:root #calendly h2 { font-size: clamp(40px, 6vw, 84px); }
html:root[data-locale="es"] .fit-signals article { padding: 28px; }
html:root[data-locale="es"] .fit-signals article::before { display: none; }
html:root .approach-title, html:root[data-locale="es"] .approach-title { max-width: none; }
html:root .faq details { border-color: var(--cc-line); }
html:root .faq details[open] { border-color: rgba(224,19,127,.25); }
html:root .faq summary span { background: #FFE6F2; }

/* Logos de clientes: prueba social justo bajo el hero, limpia y legible */
html:root .hero-logos { padding: 64px 0 8px; background: #FFFFFF; border: 0; }
html:root .hero-logos .section-inner { width: auto; }
html:root .hero-logos-label { padding: 0 0 28px; border-top: 0; color: var(--cc-ink-2); font-size: 14px; text-align: center; }
html:root .client-wall { border: 0; }
html:root .client-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 24px; }
html:root .client-grid li,
html:root .client-grid li:nth-child(n) { min-height: 72px; padding: 12px; border: 0; }
html:root .client-grid img { max-height: 36px; opacity: .72; filter: grayscale(1) contrast(1.1); }
html:root .client-grid li:hover img { opacity: 1; }
@media (max-width: 760px) {
  html:root .hero-logos { padding-top: 48px; }
  html:root .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
  html:root .client-grid li, html:root .client-grid li:nth-child(n) { min-height: 64px; }
  html:root .client-grid img { max-height: 30px; }
}
/* Qué hacemos arranca justo después de los logos */
html:root .hero-logos + .operating-bridge { border-top: 0; }
/* Mobile: banda del método y cierre más compactos */
@media (max-width: 820px) {
  html:root .method-cta p { font-size: 28px; line-height: 1.1; margin-bottom: 18px; }
  html:root .method-cta small { font-size: 12px; }
  html:root .cta-inner > p:not(.section-label) { font-size: 16px; }
}