/**
 * INNOVA FORZA v2 — innova-forza-v2.css
 * Identidad real de marca sobre terra-arch.css
 * Paleta: Ciruela #4A2E42 · Teal #3F8079 · Arena #B5A898
 * Tipografía: Fraunces (display) · Hanken Grotesk (body)
 */

/* ============================================================
   TOKENS — PALETA REAL INNOVA FORZA
   ============================================================ */
:root {
  /* Oscuros */
  --c-forest:        #120D10;   /* near-black con matiz ciruela  */
  --c-forest-2:      #1E1520;   /* fondo secciones oscuras       */
  --c-forest-3:      #2D1E2A;   /* fondo intermedio              */

  /* Primario de acción — Teal */
  --c-sage:          #3F8079;   /* Pantone 7720U                 */
  --c-sage-light:    #5AA19A;   /* teal claro                    */

  /* Ciruela — secciones dramáticas */
  --c-plum:          #4A2E42;   /* Pantone 74448C                */
  --c-plum-deep:     #371F2D;   /* ciruela profundo              */

  /* Arena / gold — acento cálido */
  --c-gold:          #B5A898;   /* Pantone 7535C                 */
  --c-gold-warm:     #C8B89A;   /* arena más cálida              */

  /* Fondos claros */
  --c-cream:         #F5F4F1;   /* off-white                     */
  --c-cream-2:       #EAE5DF;   /* crema secundaria              */

  /* Tipografía */
  --c-text:          #1E1A20;
  --c-text-muted:    #6E6770;
  --c-text-light:    #EAE6E2;
  --c-text-muted-dk: #9E949D;

  /* Tipografías — override global */
  --font-display:    'Fraunces', Georgia, serif;
  --font-body:       'Hanken Grotesk', system-ui, sans-serif;

  /* Bordes */
  --c-border-light:  rgba(30,26,32,.10);
  --c-border-dark:   rgba(255,255,255,.08);
}

/* ============================================================
   BOTONES — teal como color primario
   ============================================================ */
.btn--sage {
  background: var(--c-sage);
  color: #fff;
  border-color: var(--c-sage);
}
.btn--sage:hover {
  background: var(--c-sage-light);
  border-color: var(--c-sage-light);
}
.btn--forest {
  background: var(--c-plum);
  color: #fff;
  border-color: var(--c-plum);
}
.btn--forest:hover {
  background: var(--c-plum-deep);
  border-color: var(--c-plum-deep);
}
.btn--white:hover {
  background: var(--c-sage);
  color: #fff;
  border-color: var(--c-sage);
}

/* ============================================================
   HEADER — logo imagen + phone + CTA
   ============================================================ */
.hdr__logo {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  flex-shrink: 0;
}
.logo__img {
  height: 60px;
  width: auto;
  display: block;
  /* Filtro: logo blanco se muestra bien sobre header oscuro */
  filter: brightness(1);
  transition: opacity var(--dur-fast);
}
.hdr.scrolled .logo__img {
  /* Cuando el header se vuelve blanco, invertir logo */
  filter: invert(1);
}
.logo__img:hover { opacity: .85; }

/* Fallback texto si no carga el logo */
.logo__mark { display: none; }
.logo__wordmark { display: none; }

.hdr__phone {
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255,255,255,.75);
  margin-left: auto;
  transition: color var(--dur-fast);
  white-space: nowrap;
  font-family: var(--font-body);
}
.hdr__phone:hover { color: var(--c-sage-light); }
.hdr.scrolled .hdr__phone { color: var(--c-text-muted); }
.hdr.scrolled .hdr__phone:hover { color: var(--c-sage); }

.hdr__cta {
  padding: 10px 22px;
  font-size: .88rem;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .hdr__phone { display: none; }
  .hdr__cta { padding: 9px 16px; font-size: .84rem; }
  .logo__img { height: 48px; }
}

/* ============================================================
   SECTION TAG — teal
   ============================================================ */
.section-tag {
  color: var(--c-sage);
  border-left-color: var(--c-sage);
}

/* ============================================================
   HERO — micro-proof badge
   ============================================================ */
.hero__microproof {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.hero__microproof.in-view { opacity: 1; transform: translateY(0); }
.micro-sep { color: rgba(255,255,255,.25); }
.micro-hero {
  color: var(--c-sage-light);
  font-weight: 700;
}

/* ============================================================
   SECCIÓN EL VERDADERO RIESGO — usa ciruela
   ============================================================ */
.risk-section {
  background: var(--c-forest-2);
  padding-block: var(--sp-11);
  border-block: 1px solid var(--c-border-dark);
}

.risk__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--sp-10);
  align-items: center;
}

.risk__headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--c-text-light);
  margin-bottom: var(--sp-7);
}

.risk__body {
  font-size: .96rem;
  line-height: 1.8;
  color: var(--c-text-muted-dk);
  margin-bottom: var(--sp-5);
}

.risk__plaque {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(181,168,152,.2);
  border-radius: var(--r-lg);
  padding: var(--sp-9) var(--sp-7);
  background: rgba(74,46,66,.15);        /* ciruela sutil */
}
.risk__plaque-num {
  font-family: var(--font-display);
  font-size: clamp(5rem, 10vw, 8rem);
  font-weight: 300;
  line-height: 1;
  color: var(--c-sage-light);            /* teal */
  display: block;
  margin-bottom: var(--sp-4);
}
.risk__plaque-text {
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-muted-dk);
  line-height: 1.6;
}

@media (max-width: 820px) {
  .risk__inner { grid-template-columns: 1fr; }
  .risk__plaque { flex-direction: row; gap: var(--sp-6); padding: var(--sp-7); }
  .risk__plaque-num { font-size: 4rem; margin-bottom: 0; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about__headline em {
  color: var(--c-sage-light);
}

/* ============================================================
   STATS — héroe stat "0" en teal
   ============================================================ */
.stats__item--hero {
  position: relative;
}
.stats__item--hero::before {
  content: '';
  position: absolute;
  inset: var(--sp-3);
  border: 1px solid rgba(63,128,121,.25);
  border-radius: var(--r-md);
  pointer-events: none;
}
.stats__num--zero {
  color: var(--c-sage-light) !important;
  font-size: clamp(4rem, 8vw, 7rem) !important;
}
.stats__label--hero {
  color: var(--c-sage-light) !important;
  opacity: .9;
}

/* ============================================================
   SERVICES — botón dentro del panel
   ============================================================ */
.svc-panel__content .btn {
  margin-top: var(--sp-3);
}

/* ============================================================
   SECCIÓN CÓMO TRABAJAMOS
   ============================================================ */
.method-section {
  background: var(--c-white);
  padding-block: var(--sp-11);
}

.method__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: center;
}

.method__headline {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--c-text);
  margin-bottom: var(--sp-5);
}
.method__headline em { font-style: italic; color: var(--c-sage); }

.method__intro {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-7);
}

.method__steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  list-style: none;
}
.method__step {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-border-light);
}
.method__step:last-child { border-bottom: none; padding-bottom: 0; }

.step-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--c-sage);
  line-height: 1;
  flex-shrink: 0;
  min-width: 36px;
  padding-top: 2px;
}
.method__step strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 4px;
  letter-spacing: .01em;
}
.method__step p {
  font-size: 1rem;
  color: var(--c-text-muted);
  line-height: 1.65;
  margin: 0;
}

.method__image-wrap {
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 8/9;
}
.method__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 6s var(--ease-out);
}
.method__image-wrap.in-view .method__image { transform: scale(1.02); }

@media (max-width: 960px) {
  .method__grid { grid-template-columns: 1fr; }
  .method__image-wrap { order: -1; aspect-ratio: 16/9; }
}

/* ============================================================
   BPO — proof text
   ============================================================ */
.bpo__proof {
  margin-top: var(--sp-6);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--c-sage-light);
  border-left: 2px solid var(--c-sage);
  padding-left: var(--sp-4);
  line-height: 1.5;
}

/* ============================================================
   BANDA CIRUELA — transición dramática (reemplaza CTA --forest)
   En la sección .cta-section el overlay es ciruela
   ============================================================ */
.cta-section {
  position: relative;
}
.cta-section__overlay {
  background: linear-gradient(
    150deg,
    rgba(55,31,45,.92) 0%,
    rgba(74,46,66,.78) 50%,
    rgba(30,21,32,.88) 100%
  );
}

/* ============================================================
   CTA — cuerpo + sello + alt text
   ============================================================ */
.cta__body {
  max-width: 560px;
  margin: 0 auto var(--sp-6);
  font-size: 1.08rem;
  line-height: 1.75;
  color: rgba(232,228,219,.82);
  position: relative;
  z-index: 10;
}
.cta__stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-sage-light);
  border: 1px solid rgba(90,161,154,.35);
  border-radius: 100px;
  padding: 8px 20px;
  margin-bottom: var(--sp-7);
  position: relative;
  z-index: 10;
}
.cta__stamp::before {
  content: '✓';
  font-size: .85rem;
}
.cta__alt {
  margin-top: var(--sp-5);
  font-size: .96rem;
  color: rgba(255,255,255,.45);
  position: relative;
  z-index: 10;
}
.cta__alt a {
  color: rgba(255,255,255,.75);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-fast);
}
.cta__alt a:hover { color: var(--c-sage-light); }

/* ============================================================
   CONTACT FORM — opt + privacy
   ============================================================ */
.opt {
  font-weight: 300;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--c-text-muted);
  text-transform: none;
}
.form__privacy {
  text-align: center;
  font-size: .88rem;
  color: var(--c-text-muted);
  margin-top: var(--sp-4);
  line-height: 1.5;
}

/* Focus ring — teal */
:focus-visible {
  outline-color: var(--c-sage);
}

/* ============================================================
   FOOTER — simplificado
   ============================================================ */
.footer__top--if {
  grid-template-columns: 1.2fr 1fr 0.7fr 1fr;
}
.footer__legal {
  font-size: .8rem;
  color: rgba(160,148,158,.32);
  letter-spacing: .03em;
  line-height: 1.5;
  margin-top: var(--sp-3);
  max-width: 640px;
}

@media (max-width: 900px) {
  .footer__top--if { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer__top--if { grid-template-columns: 1fr; }
}

/* Footer logo imagen */
.footer__logo-img {
  height: 54px;
  width: auto;
  /* Logo blanco sobre footer oscuro — sin filtro */
  filter: brightness(1);
  margin-bottom: var(--sp-4);
}

/* ============================================================
   CORRECCIONES — Escala, Proporciones y Responsividad
   Overrides sobre terra-arch.css para producción Innova Forza
   ============================================================ */

/* ── Hero image — toma aérea: anclar al centro-alto de la estructura ── */
.hero__bg-img {
  object-position: center 35%;
}

/* ── Header scrolled: usa oscuro de marca, no verde ── */
#site-header.scrolled {
  background: rgba(18, 13, 16, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ── Logo: fallback de texto cuando la img no carga ── */
.logo__text-fb {
  display: none;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-white);
  line-height: 1.3;
  white-space: nowrap;
}
.hdr.scrolled .logo__text-fb,
#site-header.scrolled .logo__text-fb { color: var(--c-text); }

/* ── SECCIÓN PADDING GLOBAL — de 160px a escala humana ── */
/* Todos los var(--sp-11) = 160px reducidos con clamp */
.about,
.services,
.interior,
.healthcare,
.projects,
.testimonials,
.contact-section {
  padding-block: clamp(52px, 7.5vw, 92px);
}

.risk-section  { padding-block: clamp(52px, 7.5vw, 88px); }
.method-section{ padding-block: clamp(52px, 7.5vw, 88px); }

/* Stats: antes var(--sp-9) top + var(--sp-11) bottom = 96+160 */
.stats { padding-block: clamp(36px, 5vw, 64px); }
.stats__grid   { padding-block: clamp(20px, 3vw, 36px); }

/* CTA section content: before var(--sp-11) each side */
.cta-section__content { padding-block: clamp(52px, 7.5vw, 88px); }

/* ── TITULARES DISPLAY — reducidos proporcionalmente ── */

/* Hero: era clamp(3.2rem, 8vw, 7rem) → máx 112px, excesivo */
.hero__headline {
  font-size: clamp(1.9rem, 5vw, 3.5rem);
  line-height: 1.05;
}

/* About: era clamp(2.2rem, 4.5vw, 3.8rem) */
.about__headline {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}

/* CTA: era clamp(3rem, 7vw, 6rem) → hasta 96px */
.cta-section__headline {
  font-size: clamp(1.7rem, 4vw, 3rem);
}

/* Interior / BPO: era clamp(2.4rem, 4.5vw, 4rem) */
.interior__headline {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
}

/* Healthcare: era clamp(2.2rem, 4vw, 3.6rem) */
.healthcare__headline {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
}

/* Contact: era clamp(2.2rem, 4vw, 3.5rem) */
.contact__headline {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
}

/* Method: era clamp(2.2rem, 4vw, 3.4rem) */
.method__headline {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
}

/* Risk: era clamp(2rem, 4vw, 3.2rem) */
.risk__headline {
  font-size: clamp(1.4rem, 2.8vw, 2.3rem);
}

/* Stats principal "0" — era clamp(4rem, 8vw, 7rem) */
.stats__num--zero {
  font-size: clamp(2.6rem, 5vw, 4.2rem) !important;
}

/* Risk plaque number — era clamp(5rem, 10vw, 8rem) */
.risk__plaque-num {
  font-size: clamp(2.8rem, 5vw, 4.5rem);
}

/* Stats num general — era clamp(3rem, 6vw, 5rem) */
.stats__num {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
}

/* Stats suffix proportional */
.stats__suffix {
  font-size: clamp(1.1rem, 2.2vw, 1.8rem);
}

/* ── ABOUT IMAGE — eliminada, regla neutral ── */
.about__image-wrap { display: none; }

/* ── ABOUT intro margin ── */
.about__intro {
  margin-bottom: clamp(24px, 4vw, 48px);
}

/* ── SERVICES header margin ── */
.services__header,
.projects__header,
.testimonials__header {
  margin-bottom: clamp(24px, 4vw, 48px);
}

/* ── RISK inner grid gap ── */
.risk__inner {
  gap: clamp(24px, 4vw, 56px);
}

/* ── RISK plaque padding ── */
.risk__plaque {
  padding: clamp(24px, 4vw, 48px) clamp(16px, 2.5vw, 32px);
}

/* ── METHOD grid gap ── */
.method__grid {
  gap: clamp(28px, 4vw, 56px);
}

/* ── CONTACT grid gap ── */
.contact__grid {
  gap: clamp(28px, 4vw, 56px);
}

/* ── HEALTHCARE grid gap ── */
.healthcare__grid {
  gap: clamp(28px, 4vw, 56px);
}

/* ── SERVICES panel gap ── */
.svc-panel {
  gap: clamp(28px, 5vw, 64px);
}

/* ── PROJECTS grid gap ── */
.projects__grid {
  gap: clamp(20px, 3vw, 40px);
}

/* ── FOOTER top padding ── */
.site-footer {
  padding-block-start: clamp(40px, 6vw, 72px);
  padding-block-end: clamp(28px, 4vw, 48px);
}

/* ── HERO scroll indicator — desaparece antes en viewports angostos ── */
@media (max-height: 640px) {
  .hero__scroll { display: none; }
}

/* ── MOBILE — 768px y menos ── */
@media (max-width: 768px) {

  /* Padding sections aún más compacto en móvil */
  .about, .services, .interior, .healthcare,
  .projects, .testimonials, .contact-section,
  .risk-section, .method-section {
    padding-block: clamp(40px, 8vw, 64px);
  }
  .stats { padding-block: clamp(28px, 5vw, 44px); }
  .cta-section__content { padding-block: 48px 52px; }

  /* Hero: texto más compacto */
  .hero__headline { font-size: clamp(1.7rem, 7vw, 2.8rem); }
  .hero__desc { font-size: .875rem; }
  .hero__content { max-width: 100%; }

  /* Risk: apilar en 1 columna */
  .risk__inner { grid-template-columns: 1fr; gap: 28px; }
  .risk__plaque { flex-direction: row; gap: 20px; padding: 20px 24px; }
  .risk__plaque-num { font-size: 2.8rem; margin-bottom: 0; }

  /* Method: ya tiene @media(max-width:960px) en la hoja, reforzar */
  .method__grid { grid-template-columns: 1fr; gap: 28px; }
  .method__image-wrap { order: -1; aspect-ratio: 16/9; max-height: 260px; }

  /* About image menos alta */
  .about__image-wrap { height: clamp(160px, 40vw, 280px); }

  /* Stats grid: 2 col en móvil */
  .stats__grid { padding-block: 16px; }
  .stats__item { padding: 20px 16px; }

  /* Footer grid */
  .footer__top--if { grid-template-columns: 1fr 1fr; }

  /* Form row: apilar */
  .form-row { flex-direction: column; }
}

/* ── MOBILE PEQUEÑO — 480px y menos ── */
@media (max-width: 480px) {

  .about, .services, .interior, .healthcare,
  .projects, .testimonials, .contact-section,
  .risk-section, .method-section {
    padding-block: 36px 40px;
  }
  .stats { padding-block: 24px 32px; }

  .hero__headline { font-size: clamp(1.6rem, 8vw, 2.4rem); line-height: 1.1; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 12px; }

  .risk__plaque { flex-direction: column; text-align: center; }
  .risk__plaque-num { font-size: 2.6rem; }

  .svc-panel { grid-template-columns: 1fr; }
  .svc-panel__img-wrap { aspect-ratio: 16/9; }

  .contact__grid { grid-template-columns: 1fr; }

  .stats__grid { grid-template-columns: 1fr; }
  .stats__divider { display: none; }
  .stats__item { border-bottom: 1px solid var(--c-border-dark); text-align: center; }

  .footer__top--if { grid-template-columns: 1fr; }
  .cta-section__content { padding-block: 40px; }
  .cta-section__actions { flex-direction: column; align-items: center; }

  .about__image-wrap { height: 200px; }
  .method__image-wrap { max-height: 200px; }
}