/* Monfemar — hoja de estilos principal */

:root{
  --ink: oklch(20% 0.03 255);
  --muted: oklch(48% 0.02 255);
  --navy: oklch(30% 0.07 255);
  --navy-2: oklch(23% 0.06 255);
  --navy-deep: oklch(17% 0.05 255);
  --steel: oklch(55% 0.06 255);
  --amber: oklch(74% 0.16 55);
  --amber-ink: oklch(24% 0.03 55);
  --bg: oklch(98% 0.004 255);
  --surface: oklch(95.5% 0.007 255);
  --line: oklch(89% 0.01 255);
  --line-navy: oklch(40% 0.06 255);
  --white: oklch(100% 0 0);
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth; overflow-x:hidden; width:100% }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Public Sans', system-ui, sans-serif; overflow-x:hidden; width:100% }
h1,h2,h3,h4{ font-family:'Archivo', system-ui, sans-serif; margin:0; color:var(--ink); letter-spacing:-0.01em }
p{ margin:0; color:var(--muted); line-height:1.6 }
a{ color:var(--navy); text-decoration:none }
a:hover{ color:var(--amber-ink) }
img{ max-width:100% }

.wrap{ max-width:1440px; margin:0 auto; padding-left:64px; padding-right:64px }
@media (max-width:900px){ .wrap{ padding-left:24px; padding-right:24px } }

/* balanced multi-line headings — desktop only, where wide measures make orphan words likely */
@media (min-width:901px){ h1,h2,h3{ text-wrap:balance } }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px; font-family:'Public Sans'; font-weight:700; font-size:14.5px; border-radius:2px; white-space:nowrap; border:0; cursor:pointer }
.btn-amber{ background:var(--amber); color:var(--amber-ink) }
.btn-dark{ background:var(--amber-ink); color:var(--white) }
.btn-ink{ background:var(--ink); color:var(--white) }
.btn-sm{ padding:10px 20px; font-size:13.5px }

/* header */
.site-header{ background:var(--white); border-bottom:1px solid var(--line) }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:88px }
.site-logo img{ height:52px; width:auto; display:block }
.site-nav{ display:flex; gap:34px; font-weight:600; font-size:14.5px }
.site-nav a{ color:var(--ink) }
.header-actions{ display:flex; align-items:center; gap:20px }
.header-phone{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; color:var(--ink) }
.nav-toggle{ display:none; background:none; border:0; padding:8px; cursor:pointer }
.site-nav-mobile{ display:none; flex-direction:column; background:var(--white); border-top:1px solid var(--line); padding:8px 24px 20px 24px }
.site-nav-mobile a{ padding:12px 0; border-bottom:1px solid var(--line); font-weight:600; font-size:15px; color:var(--ink) }
.site-nav-mobile .btn{ margin-top:16px; width:100% }

@media (max-width:900px){
  .site-nav, .header-actions{ display:none }
  .header-inner{ height:64px; justify-content:flex-start }
  .nav-toggle{ display:flex; align-items:center; justify-content:center; margin-left:auto }
  .site-logo img{ height:36px }
  .site-nav-mobile.is-open{ display:flex }
}

/* hero */
.hero{ background:var(--navy) }
.hero-inner{ display:flex; align-items:stretch; gap:56px; padding-top:60px; padding-bottom:60px }
.hero-copy{ flex:0 0 580px; display:flex; flex-direction:column; justify-content:center; gap:20px }
.hero-copy h1{ color:var(--white); font-size:39px; line-height:1.15; font-weight:800 }
.hero-copy p{ color:oklch(85% 0.01 255); font-size:15.5px; max-width:460px }
.hero-copy .btn{ align-self:flex-start; margin-top:4px }
.hero-photo{ flex:1 }
.hero-photo img{ height:100%; min-height:320px; max-height:400px }

@media (max-width:900px){
  .hero-inner{ flex-direction:column; padding-top:36px; padding-bottom:0; gap:0 }
  .hero-copy{ flex:none; padding-bottom:32px; gap:16px }
  .hero-copy h1{ font-size:26px }
  .hero-copy p{ max-width:none }
  .hero-copy .btn{ width:100%; align-self:stretch }
  .hero-photo{ margin:0 -24px }
  .hero-photo img{ height:200px; min-height:0; max-height:none }
}

/* photos with brand duotone wash */
.photo{ position:relative; overflow:hidden; background:var(--surface); width:100% }
.photo img{ display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(35%) contrast(1.05) brightness(0.97) }
.photo .wash{ position:absolute; inset:0; background:linear-gradient(150deg, oklch(30% 0.07 255 / 55%), oklch(30% 0.07 255 / 6%)); mix-blend-mode:multiply }

/* generic section chrome */
.section{ padding:68px 0 }
.eyebrow{ font-family:'Archivo'; font-weight:800; font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--amber-ink); margin-bottom:12px; display:block }
.eyebrow.on-dark{ color:var(--amber) }
.section h2{ font-size:32px; margin-bottom:14px }
.section-intro{ font-size:15px; max-width:600px; margin-bottom:0; color:var(--muted) }

@media (max-width:900px){
  .section{ padding:44px 0 }
  .section h2{ font-size:23px }
  .section-intro{ font-size:14px }
}

/* ============ POR QUÉ MONFEMAR ============ */
.why{ padding-top:68px; padding-bottom:68px }
.why-head{ max-width:640px; margin-bottom:40px }
.why-columns{ display:flex; gap:56px; align-items:center }
.why-photo{ flex:0 0 40%; position:relative }
.why-photo .photo{ aspect-ratio:3/4; max-height:380px; border-radius:3px }
.why-badge{ position:absolute; left:24px; bottom:-24px; background:var(--navy); color:var(--white); padding:16px 22px; border-radius:2px; box-shadow:0 16px 32px oklch(20% 0.03 255 / 22%); display:flex; flex-direction:column; gap:2px }
.why-badge .num{ font-family:'Archivo'; font-weight:800; font-size:34px; color:var(--amber); line-height:1 }
.why-badge .lbl{ font-weight:700; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:oklch(85% 0.01 255) }

.proof-grid{ flex:1; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line) }
.proof-item{ display:flex; gap:12px; align-items:flex-start; padding:20px 22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line) }
.proof-item .tick{ width:3px; flex-shrink:0; background:var(--amber); align-self:stretch; min-height:20px }
.proof-item span{ font-weight:700; font-size:14.5px; color:var(--ink); line-height:1.35 }

.why-foot{ margin-top:44px; padding-top:20px; border-top:1px solid var(--line) }
.why-foot p{ font-size:13.5px; font-style:italic; color:var(--ink) }

@media (max-width:900px){
  .why-columns{ flex-direction:column; gap:44px }
  .why-photo{ flex:none; width:100%; max-width:320px }
  .why-badge{ left:16px; bottom:-20px; padding:12px 16px }
  .why-badge .num{ font-size:26px }
  .proof-grid{ grid-template-columns:1fr; margin-top:8px }
  .proof-item{ padding:16px 4px 16px 0; border-right:0 }
  .why-foot{ margin-top:32px }
}

/* ============ CÓMO TRABAJAMOS ============ */
.service{ background:var(--surface) }
.service-head{ display:flex; gap:56px; align-items:center; margin-bottom:48px }
.service-head-copy{ flex:1.25 }
.service-head-photo{ flex:1; align-self:stretch }
.service-head-photo .photo{ aspect-ratio:4/3; border-radius:3px; height:100% }

.process{ margin:0 }
.process-desktop{ display:flex }
.process-mobile{ display:none }
.process-col{ flex:1; display:flex; flex-direction:column }
.process-col:not(:last-child){ padding-right:24px }
.process-head{ display:flex; align-items:center; height:40px }
.process-line{ flex:1; height:1px; background:var(--line); position:relative; margin-left:8px }
.process-line svg{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--surface) }
.step-circle{ width:40px; height:40px; border-radius:50%; background:var(--navy); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:'Archivo'; font-weight:800; font-size:14px; flex-shrink:0 }
.process-body{ display:flex; flex-direction:column; gap:10px; padding-top:18px }
.process-body h3{ font-size:16.5px }
.process-body p{ font-size:13.5px }
.bullets{ list-style:none; margin:6px 0 0 0; padding:0; display:flex; flex-direction:column; gap:5px }
.bullets li{ font-size:13px; color:var(--muted); padding-left:13px; position:relative }
.bullets li::before{ content:"\2013"; position:absolute; left:0; color:var(--amber-ink) }

.trust-strip{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:44px; padding-top:24px; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink); flex-wrap:wrap }
.trust-strip .strong{ font-weight:700 }
.trust-strip .sep{ color:var(--muted) }

@media (max-width:900px){
  .service-head{ flex-direction:column; gap:24px; margin-bottom:36px }
  .service-head-photo{ width:100%; align-self:stretch }
  .service-head-photo .photo{ aspect-ratio:16/10 }

  .process-desktop{ display:none }
  .process-mobile{ display:flex; flex-direction:column }
  .process-mobile .process-row{ display:flex; gap:14px }
  .process-rail{ flex-shrink:0; width:32px; display:flex; flex-direction:column; align-items:center }
  .process-rail .step-circle{ width:32px; height:32px; font-size:12.5px }
  .process-vline{ flex:1; width:1px; background:var(--line); margin-top:6px }
  .process-mobile .process-body{ flex:1; padding-bottom:26px; padding-top:0 }
  .process-mobile .process-row:last-child .process-body{ padding-bottom:0 }
  .process-mobile .process-body h3{ font-size:16px }
  .process-mobile .process-body p{ font-size:13px }

  .trust-strip{ flex-direction:column; gap:6px; text-align:center; margin-top:32px; padding-top:20px }
}

/* ============ MODELO (almacenaje flexible) ============ */
.model{ background:var(--navy); padding:80px 0 }
.model-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:64px; align-items:start }
.model-copy h2{ color:var(--white); max-width:520px }
.model-statement{ font-family:'Archivo'; font-weight:800; font-size:23px; color:var(--amber); line-height:1.3; margin:18px 0 14px 0; max-width:480px }
.model-copy > p{ color:oklch(82% 0.01 255); font-size:14.5px; max-width:460px }

.equiv-row{ display:flex; flex-direction:column; gap:9px; margin-top:28px }
.equiv{ font-size:15px; color:oklch(88% 0.01 255); font-weight:600 }
.equiv b{ color:var(--white) }
.equiv .arrow{ color:var(--amber); margin:0 6px }
.equiv.final{ color:var(--amber); font-weight:800; font-size:16.5px; margin-top:2px }

.model-checklist{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 28px; margin-top:32px; padding-top:24px; border-top:1px solid var(--line-navy) }
.model-checklist .check span{ color:oklch(90% 0.01 255) }

.model-visual{ position:relative }
.model-visual .photo{ aspect-ratio:4/5; max-height:380px; border-radius:3px }
.model-visual .photo img{ filter:grayscale(45%) contrast(1.05) brightness(0.85) }
.m3-badge{ position:absolute; right:20px; bottom:-26px; background:var(--navy-deep); border:1px solid var(--line-navy); padding:16px 20px; border-radius:2px; text-align:right }
.m3-badge .num{ font-family:'Archivo'; font-weight:800; font-size:44px; color:var(--amber); line-height:1 }
.m3-badge .lbl{ font-weight:700; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:oklch(80% 0.01 255); margin-top:4px; max-width:150px }

.model-note{ grid-column:1 / -1; margin-top:24px; padding-top:22px; border-top:1px solid var(--line-navy) }
.model-note p{ color:oklch(72% 0.01 255); font-size:13px; max-width:640px }

@media (max-width:900px){
  .model{ padding:48px 0 }
  .model-grid{ grid-template-columns:1fr; gap:44px }
  .model-statement{ font-size:19px }
  .model-visual{ max-width:320px; margin:0 auto }
  .m3-badge{ right:16px; bottom:-20px; padding:12px 16px }
  .m3-badge .num{ font-size:34px }
  .model-checklist{ grid-template-columns:1fr; margin-top:24px; padding-top:20px }
  .model-note{ margin-top:44px }
}

/* ============ ESPECIALIZACIÓN ============ */
.spec{ background:var(--bg) }
.spec-head{ max-width:720px; margin-bottom:40px }
.spec-grid{ display:flex; gap:56px; align-items:center }
.spec-segments{ flex:1; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 24px; align-content:center }
.spec-segments div{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); font-weight:700; font-size:14.5px; color:var(--ink) }
.spec-segments div::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--amber); flex-shrink:0 }
.spec-photo{ flex:0 0 40% }
.spec-photo .photo{ aspect-ratio:4/3; max-height:340px; border-radius:3px }

@media (max-width:900px){
  .spec-grid{ flex-direction:column; gap:28px }
  .spec-segments{ grid-template-columns:1fr; width:100% }
  .spec-photo{ width:100%; max-width:320px }
}

/* ============ BLOQUE POTENTE ============ */
.potente{ position:relative; min-height:420px; display:flex; align-items:center; color:var(--white); overflow:hidden }
.potente .photo{ position:absolute; inset:0 }
.potente .photo img{ filter:grayscale(30%) contrast(1.05) brightness(0.75) }
.potente .overlay{ position:absolute; inset:0; background:linear-gradient(105deg, oklch(15% 0.05 255 / 92%) 0%, oklch(15% 0.05 255 / 78%) 42%, oklch(20% 0.06 255 / 40%) 100%) }
.potente-inner{ position:relative; padding:64px 0 }
.potente h2{ color:var(--white); font-size:36px; max-width:640px; margin-bottom:16px }
.potente .sub{ font-family:'Archivo'; font-weight:700; font-size:17px; color:oklch(92% 0.01 255); margin-bottom:22px }
.potente .specs{ font-size:13.5px; color:oklch(82% 0.01 255); display:flex; gap:12px; flex-wrap:wrap }
.potente .specs .sep{ color:oklch(60% 0.02 255) }

@media (max-width:900px){
  .potente{ min-height:340px }
  .potente-inner{ padding:44px 0 }
  .potente h2{ font-size:24px }
  .potente .sub{ font-size:15px }
  .potente .specs{ flex-direction:column; gap:6px }
  .potente .specs .sep{ display:none }
}

/* ============ CTA FINAL ============ */
.cta-final{ background:var(--amber); padding:48px 0 }
.cta-final-inner{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px }
.cta-final-inner h2{ font-size:29px; color:var(--amber-ink); line-height:1.2 }
.cta-final-inner p{ font-size:14.5px; color:var(--amber-ink); opacity:0.75; margin-top:10px; max-width:440px }
.cta-final-actions{ display:flex; gap:14px; flex-shrink:0 }

@media (max-width:900px){
  .cta-final{ padding:36px 0 }
  .cta-final-inner{ flex-direction:column; align-items:flex-start; gap:18px }
  .cta-final-actions{ flex-direction:column; width:100% }
  .cta-final-actions .btn{ width:100% }
}

/* footer */
.site-footer{ background:var(--navy-2); color:oklch(80% 0.01 255) }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; padding-top:44px; padding-bottom:32px }
.footer-brand-name{ font-family:'Archivo'; font-weight:800; font-size:19px; color:var(--white); margin-bottom:6px }
.footer-tagline{ color:oklch(68% 0.01 255); font-size:13.5px; max-width:320px }
.footer-contact{ display:flex; flex-direction:column; gap:8px; flex-shrink:0; text-align:right; font-size:13.5px }
.footer-contact a{ color:oklch(85% 0.01 255) }
.maps-link{ display:flex; align-items:center; justify-content:flex-end; gap:6px; font-size:13.5px; font-weight:700; color:var(--white) }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:20px; padding-bottom:24px; border-top:1px solid oklch(38% 0.04 255); font-size:12.5px; color:oklch(65% 0.01 255) }
.footer-logo{ background:var(--white); display:inline-block; padding:6px 9px }
.footer-logo img{ height:20px; width:auto; display:block }
.footer-bottom a{ color:oklch(65% 0.01 255) }

@media (max-width:900px){
  .footer-top{ flex-direction:column; gap:20px; text-align:left; padding-top:36px }
  .footer-contact{ text-align:left }
  .maps-link{ justify-content:flex-start }
  .footer-bottom{ flex-direction:column; gap:12px; align-items:flex-start }
}