/* ==========================================================================
   FÉRTIL · Capa de marca (Brand Book oficial)
   Se carga DESPUÉS de index-*.css y sobrescribe tokens y componentes.
   Tipografía primaria: Neue Montreal (Bold display / Regular-Medium lectura)
   Tipografía secundaria: Biro Script (acentos, máx. 1 línea)
   Paleta: negro / blanco / crema + acentos oficiales del brand book
   ========================================================================== */

/* --- Fuentes con licencia: colocar los .woff2 en /assets/fonts/ ---------- */
@font-face{font-family:"Neue Montreal";src:url("fonts/NeueMontreal-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url("fonts/NeueMontreal-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url("fonts/NeueMontreal-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Biro Script";src:url("fonts/BiroScriptPlus.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* Neutros de marca */
  --fx-black:#111111;
  --fx-ink:#1a1a1a;
  --fx-cream:#f5f2ec;      /* fondo crema del brand book */
  --fx-stone:#d9d8d0;      /* gris piedra de paneles del brand book */
  --fx-white:#ffffff;
  /* Acentos oficiales (brand book · paleta por frente) */
  --fx-red:#e52029;
  --fx-green:#235f29;
  --fx-gold:#fdb91a;
  --fx-navy:#24437e;
  --fx-orange:#dc5330;
  --fx-sky:#9ccdd1;
  --fx-rose:#e1b3b5;

  /* Remapeo de tokens existentes → marca (sin verde corporativo dominante) */
  --green-deep:var(--fx-black);
  --green-brand:var(--fx-black);
  --green-surface:#2b2b2b;
  --green-light:var(--fx-cream);
  --black:var(--fx-black);
  --charcoal:var(--fx-ink);
  --ivory:var(--fx-cream);
  --paper:#ece8e0;
  --paper-border:#dedad0;
  --red-accent:var(--fx-red);
  --gold-accent:var(--fx-gold);
  --text-main:#151515;
  --text-muted:#4a4a48;
  --text-subtle:#77766f;
  --text-inverse:#f5f2ec;
  --text-inverse-muted:#b9b7b0;

  --font-display:"Neue Montreal","Switzer","Helvetica Neue",Arial,sans-serif;
  --font-serif:var(--font-display);
  --font-sans:var(--font-display);
  --font-mono:var(--font-display);
  --font-script:"Biro Script","Caveat","Segoe Print",cursive;
}

html,body{background-color:var(--fx-cream)}
body{font-weight:400;line-height:1.65}

/* --- Jerarquía tipográfica ------------------------------------------------ */
h1,h2,h3,.serif-heading,.section-title,.hero-title{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em}
.hero-title{font-size:clamp(2.6rem,5.2vw,4.4rem);line-height:1.02}
.section-title{line-height:1.08}
h4,.service-title,.platform-pillar-item h4,.method-step h4,.principle-box h4{font-family:var(--font-display);font-weight:500;letter-spacing:-.005em}
.perspective-card h3,.positioning-quote,.complex-project-callout h3{font-family:var(--font-display);font-weight:700}

/* Etiquetas en altas: Neue Montreal regular con tracking (estilo brand book) */
.eyebrow,.sector-num-badge,.experience-number,.service-index,.method-step-num,.perspective-date,
.channel-info h4,.footer-col h5,.main-idea-label,.sector-tag,.sector-footer-badge,.service-response-motto{
  font-family:var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:.14em}
.eyebrow{color:var(--fx-black);font-weight:500}
.eyebrow:before{background-color:var(--fx-red)}
.eyebrow.inverse{color:var(--fx-cream)}
.eyebrow.inverse:before{background-color:var(--fx-red)}

/* Acento Biro Script */
.fx-script{font-family:var(--font-script);font-weight:400;letter-spacing:0;text-transform:none;line-height:1.2}

/* --- Encabezado con logotipo oficial ------------------------------------- */
.site-header{background-color:#f5f2ecf2}
.brand-link{color:var(--fx-black);gap:0}
.brand-logo{display:block;height:38px;width:auto;color:var(--fx-black)}
.site-nav{gap:24px}
.nav-link:hover,.nav-link.active{color:var(--fx-black)}
.nav-link.active:after{background-color:var(--fx-red)}
.contact-nav-link{color:var(--fx-black)}
.contact-nav-link:hover{background-color:var(--fx-black);color:var(--fx-white);border-color:var(--fx-black)}
.lang-btn.active{color:var(--fx-black)}

/* --- Portada ------------------------------------------------------------- */
.hero-section{background-color:var(--fx-cream)}
.hero-vectors{display:flex;align-items:center;gap:14px;margin-bottom:22px;color:var(--fx-black)}
.hero-vectors .fx-compass{width:46px;height:auto;flex-shrink:0}
.hero-vectors .fx-script{font-size:1.45rem;color:var(--text-muted)}
.main-idea-card{border-left:4px solid var(--fx-red);border-radius:0 14px 14px 0}
.main-idea-label{color:var(--fx-red)}
.hero-photo-frame{border-radius:14px;overflow:hidden}
.photo-caption strong{font-weight:700}

/* Botones */
.btn-solid{background-color:var(--fx-black);color:var(--fx-white)}
.btn-solid:hover{background-color:#2b2b2b}
.btn-quiet{color:var(--fx-black);border-bottom-color:var(--fx-red)}

/* --- Tarjetas generales: blancas sobre crema, esquinas suaves -------------- */
.experience-card,.platform-stats-box,.principle-box,.perspective-card,.contact-channel-item,.contact-form-card,.sector-card-rich,.pre-sectors-box,.service-response-callout{border-radius:14px}
.experience-card{background-color:var(--fx-white)}
.experience-card:hover,.sector-card-rich:hover,.perspective-card:hover{border-color:var(--fx-black)}
.experience-number,.service-index,.perspective-date{color:var(--fx-red)}
.platform-pillar-item{border-left-color:var(--fx-red)}
.method-step-num{color:var(--fx-black);border-bottom-color:var(--fx-red)}

/* --- Secciones oscuras en negro de marca ---------------------------------- */
.positioning-section,.intervention-section,.complex-project-callout{background-color:var(--fx-black)}
.positioning-divider{background-color:var(--fx-red)}
.positioning-quote{font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.15;letter-spacing:-.02em}
.positioning-text{color:var(--text-inverse-muted)}
.positioning-signature{display:block;margin-top:28px;font-family:var(--font-script);font-size:1.5rem;color:var(--fx-cream)}

/* --- Franja fotográfica (provisional: banco de imágenes) ------------------ */
.fx-photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0 40px}
.fx-photo-strip figure{position:relative;margin:0;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--fx-stone)}
.fx-photo-strip img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.02)}
.fx-photo-strip figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 18px 14px;background:linear-gradient(to top,#000000b3,#0000);color:#fff;font-family:var(--font-script);font-size:1.5rem;line-height:1}
@media (max-width:760px){.fx-photo-strip{grid-template-columns:1fr}.fx-photo-strip figure{aspect-ratio:16/9}}

/* --- Sectores: formato de negocio (barra lateral de color + número en círculo) */
.pre-sectors-box{border-left:4px solid var(--fx-black)}
@media (min-width:1200px){.sectors-grid-8{grid-template-columns:repeat(4,1fr);gap:20px}.sectors-section .wrap{max-width:1440px}}
.sector-card-rich{padding:30px 24px 22px 34px}
.sector-card-rich{position:relative;background-color:var(--fx-white);border:1px solid var(--paper-border);padding-left:34px;overflow:hidden}
.sector-card-rich:before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--fx-red)}
.sectors-grid-8 .sector-card-rich:nth-child(3n+2):before{background:var(--fx-green)}
.sectors-grid-8 .sector-card-rich:nth-child(3n):before{background:var(--fx-gold)}
.sector-card-top{display:grid;grid-template-columns:52px 1fr;column-gap:16px;align-items:start}
.sector-card-top p{grid-column:1 / -1}
.sector-num-badge{width:48px;height:48px;border-radius:50%;background:#eeebe5;color:var(--fx-black);display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:700;letter-spacing:0;margin:0}
.sector-card-rich h3{text-transform:uppercase;font-weight:700;letter-spacing:.01em;font-size:1.12rem;line-height:1.2;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--paper-border);align-self:center}
.sector-card-rich p{color:var(--text-muted)}
.sector-footer-badge{background:none;color:var(--fx-black);font-weight:700;padding:0;font-size:.64rem;letter-spacing:.08em;white-space:nowrap}
.sectors-closing{text-align:center;margin:36px 0 44px}
.sectors-closing .fx-script{font-size:1.9rem;color:var(--fx-black)}

/* --- Intervención --------------------------------------------------------- */
.intervention-card{background-color:#1d1d1d;border-color:#ffffff1f;border-radius:14px}
.intervention-icon-wrap{background-color:var(--fx-red)!important;color:#fff!important}

/* --- Perfil: panel de marca mientras llega el retrato oficial ------------- */
.profile-brand-panel{background:var(--fx-black);color:var(--fx-cream);border-radius:14px;aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:40px;text-align:center}
.profile-brand-panel .fx-compass{width:120px;height:auto;color:var(--fx-cream)}
.profile-brand-panel .fx-script{font-size:1.9rem}
.profile-brand-panel small{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-inverse-muted)}
.profile-portrait-wrap{background:none;border:none;box-shadow:none}
.profile-role{color:var(--fx-red)}
.profile-statement{margin-top:22px;padding:18px 22px;border-left:4px solid var(--fx-red);background:var(--fx-white);border-radius:0 14px 14px 0;font-weight:500;color:var(--fx-black)}

/* --- Formulario y contacto ------------------------------------------------- */
.form-input:focus,.form-textarea:focus{border-color:var(--fx-black);box-shadow:0 0 0 3px #1111110f}
.channel-icon{color:var(--fx-black)}

/* --- Pie con logotipo blanco ---------------------------------------------- */
.site-footer{background-color:var(--fx-black)}
.footer-logo{display:block;height:44px;width:auto;color:var(--fx-cream);margin-bottom:18px}

@media (max-width:1100px){.brand-logo{height:32px}}
.fx-photo-strip picture{display:block;height:100%}
@media (max-width:520px){.hero-vectors{gap:10px}.hero-vectors .fx-compass{width:34px}.hero-vectors .fx-script{font-size:1rem}}