/* =====================================================================
   tokens-y-componentes.css · Revisión de diseño v1 (Claude Design)
   Se carga DESPUÉS de site.css y de los <style> de cada página
   (justo antes de </head>). Todo lo de aquí es nuevo o sobrescribe.
   Para integrarlo en el generador: fusionar en site.css y eliminar
   las reglas antiguas indicadas en cada bloque (C-xxx = ficha del doc).
   ===================================================================== */

/* ---------- C-001 · Tokens (definidos una sola vez) ---------------- */
:root{
  /* Marca (sin cambios) */
  --navy:#263570; --blue:#2E53A1; --coral:#F25C54; --red:#A1261E; --ink:#1A1A1A;
  /* Nuevos: coral accesible para texto pequeño y fondos de botón con texto blanco */
  --coral-ink:#C63D35;      /* 5,1:1 sobre #FFF · 4,9:1 sobre #FAFAF8 · 4,6:1 sobre #F4F5FA */
  --coral-ink-hover:#A1261E;/* = --red, 7,5:1 */
  /* Neutros */
  --bg-soft:#F4F5FA; --bg-warm:#FAFAF8; --line:#E4E4DE;
  --text-2:#4B4B48;   /* 8,9:1 */
  --text-3:#5C5C56;   /* 6,9:1 · cuerpo secundario */
  --text-4:#6B6B62;   /* 5,4:1 · notas, créditos, leyendas (mínimo permitido) */
  --on-dark-2:#C6CBE0;/* texto secundario sobre navy, 8,1:1 */
  --on-footer-2:#A3A8C3;/* texto secundario sobre #171B3C, 7,6:1 */
  /* Escala tipográfica mínima */
  --fs-min:12px;      /* nada por debajo de 12px */
  --fs-input:16px;    /* evita el zoom automático de iOS al enfocar */
  /* Interacción */
  --tap:44px;
  --focus:0 0 0 3px #fff, 0 0 0 5px var(--navy);
  --focus-on-dark:0 0 0 3px var(--navy), 0 0 0 5px #fff;
  /* Breakpoints (documentados; CSS no admite variables en @media)
     móvil ≤480 · tablet 481–900 · portátil 901–1100 (menú hamburguesa) · escritorio ≥1101 */
}

/* ---------- C-002 · Foco visible en todo el sitio ------------------- */
:where(a,button,summary,input,textarea,select,[tabindex]):focus{outline:none;}
:where(a,button,summary,[tabindex]):focus-visible{outline:none; box-shadow:var(--focus); border-radius:4px;}
.final-outer :where(a,button):focus-visible,
.case-band-outer :where(a,button):focus-visible,
.site-footer :where(a,button):focus-visible,
.stats-band :where(a,button):focus-visible,
.ia-spotlight :where(a,button):focus-visible{box-shadow:var(--focus-on-dark);}
.contact-card input:focus-visible,.contact-card textarea:focus-visible{box-shadow:0 0 0 3px rgba(38,53,112,.25); border-color:var(--navy);}
.skip-link{position:absolute; left:12px; top:-60px; z-index:10001; background:var(--navy); color:#fff; font-weight:700; font-size:14px; padding:12px 18px; border-radius:6px; text-decoration:none;}
.skip-link:focus{top:12px;}

/* ---------- C-003 · Contraste: coral y grises ---------------------- */
.kicker,.kicker-sm,.card-kind,.press-card .press-kind,.related-card .rel-kicker,
.svc-card .flag + .svc-icon + .card-kind{color:var(--coral-ink);}
.contact-card .consent-row a,.ck-banner p a{color:var(--coral-ink);}
/* Botones coral con texto blanco: fondo accesible */
.mm-cta,.mm-d-cta a,nav .cta,.contact-card .submit-btn,.svc-card .flag{background:var(--coral-ink);}
.mm-cta:hover,.mm-d-cta a:hover,.contact-card .submit-btn:hover{background:var(--navy);}
.btn-primary:hover{background:var(--coral-ink); border-color:var(--coral-ink);}
.pill-cta:hover,.svc-card:hover .pill-cta,.aud-card:hover .pill-cta{background:var(--coral-ink); border-color:var(--coral-ink);}
.pill-cta-invert{border-color:var(--coral-ink); color:var(--coral-ink);}
/* Grises por debajo de 4,5:1 → --text-4 */
.trust-label,.photo-col .inset-cap,.photo-col .photo-credit,.note,
.contact-card .form-info,.form-divider span,.trust-logos .pending{color:var(--text-4);}
.footer-brand p,.footer-bottom,.footer-bottom a{color:var(--on-footer-2);}
/* Bloque final: degradado oscurecido para texto blanco ≥5:1 en todo el fondo */
.final-outer{background:linear-gradient(135deg, var(--coral-ink) 0%, var(--red) 100%);}
.final-band .kicker-sm,.final-band .band-lead{color:#fff;}

/* ---------- C-004 · Tamaño mínimo de texto (12px) ------------------ */
.card-kind,.press-card .press-kind,.trust-label,.photo-col .photo-credit,
.kicker-xs,.flag-tag,.stats-band-grid .s,.s,.src,.gap-src-dark,.credit,
.b-photos .bp .credit,.mhf-lbl,.mhf-tag,.inst,.contact-card .form-info,
.mmA .mm-feature small,.svc-card .flag,.keynote-tag,.rkicker,.cap,.lbl,
.bio-hero .t,.process-step .num,.trust-award,.card .t{font-size:max(var(--fs-min), 1em) !important;}
/* Nota: el !important solo eleva lo que estaba por debajo de 12px; en el
   generador basta con sustituir cada valor <12px por 12px en su regla. */

/* ---------- C-005 · Objetivos táctiles ≥44px ----------------------- */
.pill-cta{min-height:var(--tap); padding:10px 18px; font-size:13.5px;}
.link-cta{min-height:var(--tap);}
.mm-logo{display:inline-flex; align-items:center; min-height:var(--tap);}
.mm-cta{min-height:var(--tap);}
.mm-burger{width:var(--tap); height:var(--tap);}
.mm-close{width:var(--tap); height:var(--tap);}
.mm-trigger{min-height:var(--tap);}
.mm-sub a{min-height:32px; display:inline-flex; align-items:center; padding:6px 12px;}
.footer-col a{padding:8px 0; margin-bottom:2px;}
.footer-bottom a{display:inline-flex; align-items:center; min-height:var(--tap);}
.footer-social a{width:var(--tap); height:var(--tap);}
.ck-btn{min-height:var(--tap);}
.ck-link{min-height:var(--tap);}
.btn{min-height:48px;}
/* Formularios */
.contact-card input,.contact-card textarea{font-size:var(--fs-input); min-height:48px; padding:12px 14px;}
.contact-card textarea{min-height:110px;}
.contact-card .consent-row{min-height:var(--tap); align-items:center; font-size:13.5px;}
.contact-card .consent-row input{width:20px; height:20px; min-height:0; margin-top:0;}
.contact-card label{font-size:12px;}

/* ---------- C-006 · Tarjetas de credenciales sin cortes de palabra --- */
.card .n,.card .t{hyphens:manual; word-break:normal; overflow-wrap:break-word; text-wrap:balance;}
.band-title,h1{text-wrap:balance;}
.band-lead,.sub,.section-intro{text-wrap:pretty;}

/* ---------- C-007 · Hero de Inicio: mensaje antes que la foto (móvil) */
@media (max-width:480px){
  .hero .photo-col{order:0; max-width:280px;}
  .hero .stack-spacer{padding-top:100%;}
  .hero .photo-col .inset-cap,.hero .photo-col .photo-credit{text-align:center;}
  .hero h1{font-size:34px; line-height:1.1;}
  .hero .ctas .btn{width:100%; justify-content:center;}
}

/* ---------- C-008 · Layout de tablet (481–900px) ------------------- */
@media (max-width:900px) and (min-width:481px){
  .hero{grid-template-columns:1fr; gap:36px; padding:44px 32px 32px;}
  .hero .hero-text-narrow{max-width:640px;}
  .hero .photo-col{max-width:420px; width:100%; margin:0 auto;}
  .hero h1{font-size:44px;}
  .svc-hero-photo,.mkt-hero-flow,.ia-hero-visual,.hero-collage{max-width:560px; width:100%; margin:0 auto;}
  .band,.section{padding-left:32px; padding-right:32px;}
  .trust{padding-left:32px; padding-right:32px;}
  .band-title-tight{white-space:normal;}
  .svc-grid{grid-template-columns:1fr 1fr; gap:24px 16px;}
  .aud-grid{grid-template-columns:1fr; gap:12px;}
  .aud-card{display:grid; grid-template-columns:44px 1fr; column-gap:16px;}
  .aud-card .aud-icon{grid-row:span 4; margin:0;}
  .press-grid{grid-template-columns:1fr 1fr;}
  .case-band{grid-template-columns:1fr; padding:48px 32px;}
  .final-band{grid-template-columns:1fr; gap:32px; padding:56px 32px;}
  .final-band .band-title,.final-band .band-lead{max-width:600px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-inner,.footer-mini-cta{padding-left:32px; padding-right:32px;}
  .why-grid{grid-template-columns:240px 1fr; gap:32px;}
  .mm-bar{padding:0 32px;}
}
@media (max-width:1100px) and (min-width:901px){
  .band-title-tight{white-space:normal;}
  .svc-grid{grid-template-columns:1fr 1fr;}
  .press-grid{grid-template-columns:1fr 1fr;}
}

/* ---------- C-009 · Hero de Marketing de procesos: sin recorte ----- */
@media (max-width:900px){
  .mkt-hero-flow{max-width:460px; width:100%; margin:0 auto; overflow:hidden;}
}
@media (max-width:480px){
  .mkt-hero-flow{order:0; max-width:340px;}
}

/* ---------- C-010 · Banner de cookies compacto en móvil ------------ */
.mm-drawer{z-index:10000;} /* el menú abierto queda por encima del banner */
@media (max-width:560px){
  .ck-banner{left:8px; right:8px; bottom:8px; padding:14px 14px 10px; border-radius:12px; max-height:46vh; overflow:auto;}
  .ck-banner h2{font-size:15px; margin-bottom:4px;}
  .ck-banner p{font-size:12.5px; line-height:1.5; margin-bottom:10px;}
  .ck-actions{flex-wrap:nowrap;}
  .ck-btn{flex:1 1 0; min-width:0; padding:10px 8px;}
  .ck-link{margin-top:2px;}
}
body.mm-lock .ck-banner{visibility:hidden;}

/* ---------- C-011 · Franja de prueba unificada en Inicio ----------- */
.proof-more{grid-column:1/-1; display:flex; justify-content:flex-end; margin-top:6px;}
.trust-logos{row-gap:20px;}
@media (max-width:480px){ .proof-more{justify-content:flex-start;} }

/* ---------- C-012 · Enlace «ver todos los servicios» bajo «Qué hago» */
.svc-more{display:flex; justify-content:center; margin-top:24px;}

/* ---------- C-013 · Tablas legales: scroll interno con pista ------- */
.legal-body .tbl{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:8px;}
.legal-body .tbl table{min-width:640px; margin:0;}
@media (max-width:700px){ .legal-body .tbl::before{content:"Desliza la tabla →"; display:block; font-size:12px; color:var(--text-4); padding:8px 12px; border-bottom:1px solid var(--line);} }

/* ---------- C-026 · Mega-menú: enlace al hub de Servicios ----------- */
.mmA .mm-panel-foot{align-items:center; gap:16px; flex-wrap:wrap;}
.mmA .mm-panel-foot > span a{margin-left:6px;}
.mm-d-body .mm-card.mm-all{border-bottom:1px solid #ECECE6; margin-bottom:4px;}
.mm-d-body .mm-card.mm-all b{color:var(--coral-ink);}

/* ---------- C-015 · Movimiento reducido ---------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

/* ---------- Añadido al aplicar la revisión · P-018 selector «¿Qué necesitas?» ---------- */
.contact-card select{width:100%; border:1px solid #DDDDD6; border-radius:4px; padding:12px 12px; font-family:inherit; font-size:16px; min-height:48px; color:var(--ink); background:#FAFAF8;}
.contact-card select:focus-visible{border-color:var(--navy); background:#fff; box-shadow:0 0 0 3px rgba(38,53,112,.25); outline:none;}