/* ==========================================================================
   Grupo Merpro — hoja de estilos principal
   Mobile-first. Sin frameworks, sin build step.
   ========================================================================== */

:root{
  /* Paleta aprobada (ver documento de estrategia) */
  --navy-950:#0c1c2c;
  --navy-900:#122a42;
  --navy-800:#1a3a5c;
  --navy-700:#2a5178;
  --clay-600:#b5602f;
  --clay-500:#c97a44;
  --clay-100:#f3ded0;
  --paper-0:#faf8f4;
  --paper-50:#f4f0e9;
  --paper-100:#ece5da;
  --stone-300:#cdc3b4;
  --stone-500:#8f8574;
  --ink-900:#1c1a16;
  --ink-700:#4a453d;
  --line:#ddd4c4;

  --bg:var(--paper-0);
  --surface:#ffffff;
  --surface-2:var(--paper-50);
  --text:var(--ink-900);
  --text-soft:var(--ink-700);
  --accent:var(--clay-600);
  --accent-soft:var(--clay-100);
  --navy:var(--navy-900);
  --navy-ink:#eef1f4;
  --border:var(--line);
  --shadow:0 1px 2px rgba(28,26,22,.06), 0 8px 24px -12px rgba(28,26,22,.18);
  --radius:10px;
  --radius-sm:6px;
  --container:1180px;
  --gap:24px;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto;}
a{color:inherit; text-decoration:none;}
ul,ol{margin:0; padding:0; list-style:none;}
button{font:inherit; cursor:pointer;}
input,textarea,select{font:inherit;}
h1,h2,h3,h4{
  font-family:'Lora', Georgia, 'Times New Roman', serif;
  font-weight:600;
  color:var(--text);
  text-wrap:balance;
  margin:0 0 .5em;
  line-height:1.2;
}
p{margin:0 0 1em; max-width:68ch;}
:focus-visible{outline:3px solid var(--clay-500); outline-offset:2px;}

.mono{font-family:'IBM Plex Mono', ui-monospace, monospace;}
.label,.eyebrow{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:.74rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:500;
  display:inline-block;
  margin-bottom:10px;
}
.container{max-width:var(--container); margin:0 auto; padding:0 20px;}
@media (min-width:640px){ .container{padding:0 32px;} }

.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}
.skip-link{position:absolute; left:-999px; top:0; background:var(--navy); color:var(--navy-ink); padding:10px 16px; z-index:200;}
.skip-link:focus{left:12px; top:12px;}

/* ---- Buttons ---- */
.btn{
  font-family:'Public Sans',sans-serif; font-weight:700; font-size:.95rem;
  padding:13px 22px; border-radius:8px; border:1px solid transparent;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  min-height:44px;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:#a1522a;}
.btn-navy{background:var(--navy); color:var(--navy-ink);}
.btn-navy:hover{background:var(--navy-800);}
.btn-outline{background:transparent; border-color:var(--navy); color:var(--text);}
.btn-outline:hover{background:var(--navy); color:var(--navy-ink);}
.btn-ghost{background:transparent; color:var(--accent); padding-left:4px; padding-right:4px; min-height:auto;}
.btn-wa{background:#25D366; color:#0b1a10;}
.btn-wa:hover{background:#20bd5a;}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.btn svg{width:18px; height:18px; flex:none;}

/* ==========================================================================
   Header / navegación
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header .container{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:14px; padding-bottom:14px;}
.site-branding{display:flex; align-items:center; gap:10px;}
.site-branding img{height:36px; width:auto;}
.site-branding .site-title{font-family:'Lora',serif; font-weight:600; font-size:1.1rem; color:var(--navy);}

.primary-nav{display:none;}
.primary-nav ul{display:flex; align-items:center; gap:4px;}
.primary-nav a{
  padding:9px 12px; border-radius:100px; font-size:.92rem; color:var(--text-soft);
  transition:all .15s ease;
}
.primary-nav a:hover, .primary-nav .current-menu-item > a{color:var(--text); background:var(--surface-2);}

.header-actions{display:flex; align-items:center; gap:10px;}
.header-actions .btn{padding:10px 16px; font-size:.88rem;}
.wa-icon-link{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; background:#25D366; color:#0b1a10; flex:none;
}

.menu-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid var(--border); border-radius:8px; background:var(--surface);
}
.menu-toggle svg{width:20px; height:20px;}

.mobile-nav{
  display:none; position:fixed; inset:0; z-index:150; background:var(--bg);
  padding:20px; overflow-y:auto;
}
.mobile-nav.is-open{display:block;}
.mobile-nav-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;}
.mobile-nav ul{display:flex; flex-direction:column; gap:2px;}
.mobile-nav a{display:block; padding:14px 4px; font-size:1.15rem; font-family:'Lora',serif; border-bottom:1px solid var(--border);}
.mobile-nav-cta{margin-top:28px; display:flex; flex-direction:column; gap:12px;}
.mobile-nav-cta .btn{justify-content:center; width:100%;}

@media (min-width:960px){
  .primary-nav{display:block;}
  .menu-toggle{display:none;}
  .wa-icon-link{display:inline-flex;}
}

/* ---- Sticky mobile CTA bar ---- */
.mobile-cta-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:flex; gap:10px; padding:10px 14px; padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:var(--surface); border-top:1px solid var(--border); box-shadow:0 -8px 24px -12px rgba(28,26,22,.25);
}
.mobile-cta-bar .btn{flex:1; justify-content:center; padding:12px 10px; font-size:.86rem;}
body{padding-bottom:74px;}
@media (min-width:960px){
  .mobile-cta-bar{display:none;}
  body{padding-bottom:0;}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; color:#fff; padding:72px 0 56px;
  background:linear-gradient(180deg, rgba(12,28,44,.72), rgba(12,28,44,.82)), var(--navy) center/cover no-repeat;
  overflow:hidden;
}
.hero.has-image{background-image:linear-gradient(180deg, rgba(12,28,44,.66), rgba(12,28,44,.84)), var(--hero-img, none);}
.hero-inner{max-width:640px;}
.hero .eyebrow{color:var(--clay-500);}
.hero h1{color:#fff; font-size:clamp(2.1rem, 6vw, 3.4rem); margin-bottom:.4em;}
.hero p.lead{color:#f0ece4; font-size:1.15rem; max-width:52ch;}
.hero .proof{font-size:.82rem; color:var(--clay-100); margin:18px 0 26px;}
@media (min-width:960px){ .hero{padding:120px 0 90px;} }

.logo-band{display:flex; justify-content:center; padding:36px 20px; background:var(--bg);}
.logo-band img{max-height:64px; width:auto;}
@media (min-width:720px){ .logo-band img{max-height:88px;} }

.page-hero{background:var(--navy); color:#fff; padding:56px 0;}
.page-hero h1{color:#fff; font-size:clamp(1.9rem,4.5vw,2.6rem);}
.page-hero p{color:#e7e1d6; font-size:1.05rem; max-width:60ch; margin-bottom:0;}
.page-hero .eyebrow{color:var(--clay-500);}

/* ==========================================================================
   Secciones genéricas
   ========================================================================== */
.section{padding:56px 0;}
.section.tight{padding:40px 0;}
.section-head{max-width:64ch; margin-bottom:32px;}
.section-head p{color:var(--text-soft);}
.section.bg-surface2{background:var(--surface-2);}
.section.bg-navy{background:var(--navy); color:var(--navy-ink);}
.section.bg-navy h2, .section.bg-navy h3{color:var(--navy-ink);}
.section.bg-navy p{color:#d9deE4; opacity:.92;}

.grid{display:grid; gap:20px;}
.grid-2{grid-template-columns:1fr;}
.grid-3{grid-template-columns:1fr;}
.grid-4{grid-template-columns:repeat(2,1fr);}
@media (min-width:720px){
  .grid-2{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:960px){
  .grid-4{grid-template-columns:repeat(4,1fr);}
}

/* ---- Stats (bloque confianza) ---- */
.stats{display:flex; gap:28px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch;}
.stats::-webkit-scrollbar{height:4px;}
.stat{flex:none; min-width:150px;}
.stat .num{font-family:'Lora',serif; font-size:2.1rem; font-weight:600; color:var(--accent); line-height:1;}
.stat .cap{font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-soft); margin-top:6px; display:block;}
@media (min-width:720px){ .stats{overflow:visible; flex-wrap:wrap;} }

/* ---- Steps (proceso) ---- */
.steps{display:flex; flex-direction:column;}
.step{display:grid; grid-template-columns:44px 1fr; gap:16px; padding:18px 0; border-bottom:1px dashed var(--border);}
.step:last-child{border-bottom:none;}
.step .n{font-family:'Lora',serif; color:var(--accent); font-size:1.5rem; font-weight:600;}
.step .t{font-weight:700; font-size:1.05rem;}
.step .d{color:var(--text-soft); margin-top:2px;}

/* ---- Cards ---- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; height:100%;
}
.card .thumb{aspect-ratio:4/5; background:var(--surface-2); overflow:hidden;}
.card .thumb img{width:100%; height:100%; object-fit:cover;}
.card .thumb.empty{display:flex; align-items:center; justify-content:center; color:var(--stone-500); font-family:'IBM Plex Mono',monospace; font-size:.7rem; text-align:center; padding:10px;}
.card .body{padding:16px 18px; display:flex; flex-direction:column; gap:6px; flex:1;}
.card .cat{font-family:'IBM Plex Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent);}
.card h3, .card h4{margin:0; font-size:1.05rem;}
.card .spec{font-size:.86rem; color:var(--text-soft); margin:0;}
.card .more{margin-top:auto; font-weight:700; font-size:.88rem; color:var(--navy);}

.photo-tile{
  display:block; aspect-ratio:1/1; border-radius:var(--radius); overflow:hidden;
  background:var(--surface-2); box-shadow:var(--shadow);
}
.photo-tile img{width:100%; height:100%; object-fit:cover; transition:transform .2s ease;}
.photo-tile:hover img{transform:scale(1.04);}
.photo-tile .thumb.empty{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:var(--stone-500); font-family:'IBM Plex Mono',monospace; font-size:.7rem; text-align:center; padding:10px;
}

.category-tile{
  display:flex; align-items:center; justify-content:center; text-align:center;
  aspect-ratio:1/1; border-radius:var(--radius); background:var(--navy); color:#fff;
  font-family:'Lora',serif; font-weight:600; font-size:1.1rem; padding:16px;
  transition:background-color .15s ease;
}
.category-tile:hover{background:var(--navy-800);}

/* ---- Clientes (logos) ---- */
.client-logos{display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:center;}
.client-logos img{max-height:40px; width:auto; filter:grayscale(1) opacity(.6); transition:filter .2s ease;}
.client-logos img:hover{filter:grayscale(0) opacity(1);}

/* ---- FAQ ---- */
.faq details{border-bottom:1px solid var(--border); padding:16px 0;}
.faq details:first-child{border-top:1px solid var(--border);}
.faq summary{
  font-weight:700; cursor:pointer; font-size:1.02rem; list-style:none;
  display:flex; justify-content:space-between; gap:12px; align-items:center;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; font-family:'Lora',serif; color:var(--accent); font-size:1.4rem; flex:none; line-height:1;}
.faq details[open] summary::after{content:"\2013";}
.faq .answer{margin-top:10px; color:var(--text-soft); max-width:64ch;}

/* ---- Formularios ---- */
.form-grid{display:grid; grid-template-columns:1fr; gap:16px;}
@media (min-width:720px){ .form-grid{grid-template-columns:1fr 1fr;} }
.form-field{display:flex; flex-direction:column; gap:6px;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-size:.86rem; font-weight:700;}
.form-field .req{color:var(--accent);}
.form-field input[type=text],
.form-field input[type=email],
.form-field input[type=tel],
.form-field input[type=date],
.form-field input[type=number],
.form-field select,
.form-field textarea{
  border:1px solid var(--border); border-radius:8px; padding:12px 14px; background:var(--surface); color:var(--text);
  font-size:1rem; width:100%;
}
.form-field textarea{min-height:120px; resize:vertical;}
.form-field input[type=file]{
  border:1px dashed var(--border); border-radius:8px; padding:14px; background:var(--surface-2); width:100%;
}
.form-note{font-size:.82rem; color:var(--text-soft);}
.form-success{background:var(--accent-soft); border:1px solid var(--accent); border-radius:var(--radius); padding:18px 20px; margin-bottom:24px;}
.form-error{background:#fbe8e2; border:1px solid #c0432a; border-radius:var(--radius); padding:18px 20px; margin-bottom:24px; color:#7a2a17;}

/* ---- Tabla de materiales ---- */
/* ---- Visor de catálogo PDF ---- */
.pdf-viewer{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); overflow:hidden; margin-bottom:32px;}
.pdf-viewer-head{padding:20px 20px 4px;}
.pdf-viewer-head h3{margin-bottom:2px;}
.pdf-viewer-head .spec{margin:0; color:var(--text-soft); font-size:.9rem;}
.pdf-viewer iframe{display:block; width:100%; height:92vh; min-height:640px; max-height:1400px; border:0; background:#fff; margin-top:14px;}
@media (min-width:960px){ .pdf-viewer iframe{height:95vh;} }

.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);}
table{width:100%; border-collapse:collapse; font-size:.92rem;}
th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--border);}
th{font-family:'IBM Plex Mono',monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-soft); font-weight:500;}
tr:last-child td{border-bottom:none;}

/* ---- CTA final band ---- */
.cta-band{background:var(--navy); color:var(--navy-ink); padding:56px 0; text-align:center;}
.cta-band h2{color:#fff;}
.cta-band .btn-row{justify-content:center;}

/* ---- Breadcrumbs ---- */
.breadcrumbs{font-family:'IBM Plex Mono',monospace; font-size:.76rem; color:var(--text-soft); padding:14px 0;}
.breadcrumbs a{color:var(--text-soft);}
.breadcrumbs a:hover{color:var(--accent);}

/* ---- Footer ---- */
.site-footer{background:var(--navy); color:var(--navy-ink); padding:56px 0 28px; margin-top:64px;}
.footer-grid{display:grid; grid-template-columns:1fr; gap:32px; margin-bottom:40px;}
@media (min-width:720px){ .footer-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:960px){ .footer-grid{grid-template-columns:repeat(4,1fr);} }
.footer-col h4{color:#fff; font-size:.9rem; font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px;}
.footer-col ul{display:flex; flex-direction:column; gap:8px;}
.footer-col a, .footer-col p{color:#c9d2db; font-size:.92rem;}
.footer-tagline{text-align:center; font-family:'Lora',serif; font-size:1.2rem; color:#fff; padding-top:28px; border-top:1px solid rgba(238,241,244,.18);}
.footer-bottom{text-align:center; font-size:.8rem; color:#9fadba; margin-top:12px;}

/* ---- Utilidades ---- */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.center-col{max-width:64ch; margin-left:auto; margin-right:auto;}