/* =========================================================
   CERPA GRUPO — Sistema de diseño
   Lujo discreto · neutros tierra · líneas finas
   ========================================================= */

:root{
  /* Paleta tierra */
  --bg:        #F3ECE1;   /* papel cálido */
  --bg-2:      #ECE3D5;   /* arena */
  --surface:   #FAF6EF;   /* tarjeta clara */
  --ink:       #211C17;   /* tinta cálida casi negra */
  --ink-soft:  #6E655A;   /* texto secundario */
  --ink-faint: #9A9082;
  --line:      rgba(33,28,23,.14);
  --line-soft: rgba(33,28,23,.08);
  --clay:      #9C7A4E;   /* bronce/acento */
  --clay-deep: #7C6038;
  --espresso:  #221D19;   /* secciones oscuras */
  --espresso-2:#2B251F;
  --cream:     #EFE7D9;   /* texto sobre oscuro */
  --cream-soft:#B7AC9A;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 76px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  letter-spacing:.01em;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---------- Tipografía ---------- */
.display{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.01em;
}
h1,h2,h3{ margin:0; font-weight:300; }
.eyebrow{
  font-family:var(--sans);
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--clay);
}
.eyebrow.muted{ color:var(--ink-faint); }
.lede{
  font-size:clamp(1.05rem,1.5vw,1.3rem);
  color:var(--ink-soft);
  font-weight:300;
  max-width:46ch;
}

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
section{ position:relative; }
.section-pad{ padding-block:clamp(72px,11vw,150px); }
.divider{ height:1px; background:var(--line-soft); border:0; margin:0; }

/* ---------- Botones ---------- */
.btn{
  --bc:var(--ink);
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:400; font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:1.05em 1.9em; border:1px solid var(--bc);
  color:var(--bc); background:transparent; cursor:pointer;
  border-radius:0; transition:all .5s cubic-bezier(.22,.61,.36,1); position:relative;
  overflow:hidden;
}
.btn .arrow{ transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.btn:hover{ background:var(--bc); color:var(--bg); }
.btn:hover .arrow{ transform:translateX(5px); }
.btn.filled{ background:var(--ink); color:var(--bg); }
.btn.filled:hover{ background:transparent; color:var(--ink); }
.btn.clay{ --bc:var(--clay); }
.btn.on-dark{ --bc:var(--cream); }
.btn.on-dark:hover{ color:var(--espresso); }

/* enlace con subrayado animado */
.link-u{
  position:relative; display:inline-flex; align-items:center; gap:.55em;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:400;
  padding-bottom:.35em;
}
.link-u::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.link-u:hover::after{ transform:scaleX(1); }
.link-u .arrow{ transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.link-u:hover .arrow{ transform:translateX(5px); }

/* ---------- Navegación ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad); transition:all .55s cubic-bezier(.22,.61,.36,1);
  mix-blend-mode:normal;
}
.nav.scrolled{
  background:rgba(243,236,225,.82);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line-soft);
  padding-block:13px;
}
.nav__logo{ display:flex; align-items:center; gap:.7rem; }
.nav__logo img{ height:38px; width:auto; transition:height .55s cubic-bezier(.22,.61,.36,1); }
.nav.scrolled .nav__logo img{ height:30px; }
.nav__word{
  font-family:var(--sans); font-weight:400; letter-spacing:.34em;
  font-size:.74rem; text-transform:uppercase; padding-top:2px;
}
.nav__links{ display:flex; align-items:center; gap:clamp(20px,2.6vw,42px); }
.nav__links a{
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; font-weight:400;
  position:relative; color:var(--ink); opacity:.78; transition:opacity .35s;
}
.nav__links a:hover{ opacity:1; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:100%;
  background:var(--clay); transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.nav__links a:hover::after{ transform:scaleX(1); }
.lang{
  display:flex; gap:2px; align-items:center; font-size:.74rem;
  letter-spacing:.12em; border:1px solid var(--line); border-radius:999px;
  padding:5px 6px;
}
.lang button{
  border:0; background:transparent; cursor:pointer; font-family:var(--sans);
  font-size:.7rem; letter-spacing:.1em; color:var(--ink-soft);
  padding:3px 9px; border-radius:999px; transition:all .35s;
}
.lang button.active{ background:var(--ink); color:var(--bg); }
.nav__burger{ display:none; }

/* Logo swap claro/oscuro */
.nav__logo .logo-dark{ display:none; }
.nav.scrolled .nav__logo .logo-light{ display:none; }
.nav.scrolled .nav__logo .logo-dark{ display:block; }

/* Nav sobre hero oscuro: texto claro */
.nav:not(.scrolled) .nav__word,
.nav:not(.scrolled) .nav__links a{ color:var(--cream); }
.nav:not(.scrolled) .nav__links a::after{ background:var(--cream); }
.nav:not(.scrolled) .lang{ border-color:rgba(239,231,217,.34); }
.nav:not(.scrolled) .lang button{ color:var(--cream-soft); }
.nav:not(.scrolled) .lang button.active{ background:var(--cream); color:var(--espresso); }
.nav:not(.scrolled) .nav__burger span{ background:var(--cream); }
@media (max-width:860px){
  /* menú abierto = fondo claro, restaurar tinta */
  .nav:not(.scrolled) .nav__links.open a{ color:var(--ink); }
}

/* ---------- Reveal on scroll ---------- */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms);
}
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="fade"]{ transform:none; }
[data-reveal="line"]{ transform:scaleX(0); transform-origin:left; opacity:1; }
[data-reveal="line"].in{ transform:scaleX(1); }

/* ---------- Placeholder de imagen (slot) ---------- */
.ph{
  position:relative; overflow:hidden; background:var(--bg-2);
  background-image:repeating-linear-gradient(135deg,
     rgba(33,28,23,.05) 0 1px, transparent 1px 11px);
}
.ph__tag{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-family:"Courier New",monospace; font-size:.66rem; letter-spacing:.08em;
  color:var(--ink-soft); background:rgba(250,246,239,.7);
  padding:4px 9px; border:1px solid var(--line);
}

/* lang visibility */
[data-en]{ display:none; }
html[data-lang="en"] [data-es]{ display:none; }
html[data-lang="en"] [data-en]{ display:revert; }

/* ---------- WhatsApp flotante ---------- */
.wa-fab{
  position:fixed; right:clamp(16px,3vw,30px); bottom:clamp(16px,3vw,30px); z-index:90;
  display:flex; align-items:center; height:58px; width:58px;
  border-radius:999px; background:var(--espresso); color:var(--cream);
  border:1px solid rgba(239,231,217,.18);
  box-shadow:0 14px 34px rgba(20,17,14,.32); overflow:hidden;
  transition:width .55s cubic-bezier(.22,.61,.36,1), background .45s cubic-bezier(.22,.61,.36,1), border-color .45s;
  text-decoration:none;
}
.wa-fab svg{ width:58px; height:58px; flex:0 0 58px; padding:15px; box-sizing:border-box;
  transition:color .45s; }
.wa-fab__label{ white-space:nowrap; font-family:var(--sans); font-weight:400;
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; padding-right:24px;
  opacity:0; transform:translateX(-6px); transition:opacity .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1); }
.wa-fab:hover{ width:auto; background:var(--clay); border-color:var(--clay); }
.wa-fab:hover .wa-fab__label{ opacity:1; transform:none; }
@media (max-width:560px){
  .wa-fab:hover{ width:58px; } /* en móvil queda como botón circular */
  .wa-fab__label{ display:none; }
}

/* ======================================================
   PÁGINAS INTERNAS (unidades de negocio)
   ====================================================== */
.iphero{ position:relative; min-height:74svh; display:flex; align-items:flex-end;
  background:var(--espresso); color:var(--cream); overflow:hidden; }
.iphero__art{ position:absolute; inset:0; z-index:0; opacity:.5; }
.iphero__art img{ width:100%; height:100%; object-fit:cover; }
.iphero__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,17,14,.62) 0%, rgba(20,17,14,.34) 45%, rgba(20,17,14,.86) 100%); }
.iphero__inner{ position:relative; z-index:2; width:100%; padding-block:clamp(120px,16vh,180px) clamp(48px,7vh,90px); }
.crumb{ display:flex; gap:.7em; align-items:center; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cream-soft); margin-bottom:1.8rem; }
.crumb a{ color:var(--cream-soft); transition:color .35s; } .crumb a:hover{ color:var(--cream); }
.iphero h1{ font-family:var(--serif); font-weight:300; letter-spacing:-.015em;
  font-size:clamp(2.6rem,6.4vw,5.6rem); line-height:1; max-width:15ch; text-wrap:balance; }
.iphero .lede{ color:rgba(239,231,217,.84); margin-top:1.4rem; }

.ip-intro{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,6vw,90px); align-items:start; }
.ip-intro h2{ font-family:var(--serif); font-size:clamp(1.8rem,3.4vw,2.8rem); line-height:1.08; }
.ip-intro p{ color:var(--ink-soft); margin:0 0 1.2rem; max-width:46ch; }

.ip-services{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); }
.svc{ background:var(--bg); padding:clamp(26px,3.4vw,46px); transition:background .5s cubic-bezier(.22,.61,.36,1); }
.svc:hover{ background:var(--surface); }
.svc .sn{ font-family:var(--serif); color:var(--clay); font-size:1.1rem; }
.svc h3{ font-family:var(--serif); font-weight:400; font-size:1.5rem; margin:1rem 0 .7rem; }
.svc p{ color:var(--ink-soft); font-size:.95rem; margin:0; }

.ip-showcase{ position:relative; aspect-ratio:16/7; overflow:hidden; }
.ip-showcase img{ width:100%; height:100%; object-fit:cover; }

.ip-cta{ background:var(--espresso); color:var(--cream); text-align:center; }
.ip-cta h2{ font-family:var(--serif); font-weight:300; font-size:clamp(2rem,4.6vw,3.6rem);
  line-height:1.05; max-width:18ch; margin:0 auto 1.6rem; text-wrap:balance; }

@media (max-width:860px){
  .ip-intro, .ip-services{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  .nav__links{
    position:fixed; inset:0; flex-direction:column; justify-content:center;
    gap:30px; background:var(--bg); transform:translateY(-100%);
    transition:transform .6s cubic-bezier(.22,.61,.36,1); padding:40px;
  }
  .nav__links.open{ transform:none; }
  .nav__links a{ font-size:1.1rem; }
  .nav__burger{
    display:flex; flex-direction:column; gap:5px; background:none; border:0;
    cursor:pointer; z-index:60; padding:8px;
  }
  .nav__burger span{ width:24px; height:1.4px; background:var(--ink); transition:.4s; }
  .nav__burger.open span:nth-child(1){ transform:translateY(6.4px) rotate(45deg); }
  .nav__burger.open span:nth-child(2){ opacity:0; }
  .nav__burger.open span:nth-child(3){ transform:translateY(-6.4px) rotate(-45deg); }
}