/* ============================================================
   SELECTOS CAJAMARQUINOS — hoja de estilos
   Paleta tomada del logotipo: verde bosque + dorado + crema
   Tipografía: Cormorant Garamond (títulos) · Jost (interfaz) · Inter (texto)
   ============================================================ */

:root{
  /* ---- Marca ---- */
  --verde-950:#081712;
  --verde-900:#0D2019;
  --verde-800:#132E24;
  --verde-700:#1E4536;   /* verde del logotipo */
  --verde-600:#2B5A47;
  --verde-500:#3D7359;

  --oro-700:#8E6C2C;
  --oro-600:#A8823A;
  --oro-500:#C29A4E;     /* dorado del logotipo */
  --oro-400:#D8B87C;
  --oro-300:#E6D0A4;
  --oro-100:#F2E7CF;

  --crema-50:#FDFBF6;
  --crema-100:#F7F2E7;
  --crema-200:#EFE7D6;
  --crema-300:#E2D7C0;

  --tinta:#1A1913;
  --tinta-70:#4A473E;
  --tinta-50:#726E62;
  --tinta-30:#9C978A;

  /* ---- Tipografía ---- */
  --font-display:'Cormorant Garamond','Georgia',serif;
  --font-ui:'Jost','Futura','Century Gothic',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- Medidas ---- */
  --wrap:1280px;
  --gutter:clamp(1.25rem,4vw,3.25rem);
  --radius:3px;
  --radius-lg:2px;
  --header-h:76px;

  --shadow-sm:0 1px 2px rgba(26,25,19,.05),0 6px 18px rgba(26,25,19,.045);
  --shadow-md:0 18px 48px rgba(19,46,36,.11);
  --shadow-lg:0 40px 90px rgba(19,46,36,.18);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 14px)}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(15.5px,.35vw + 14.8px,16.75px);
  font-weight:300;
  line-height:1.75;
  color:var(--tinta-70);
  background:var(--crema-50);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
a{color:inherit}
ul,ol{margin:0; padding:0; list-style:none}
blockquote,figure{margin:0}

/* Sprite SVG oculto */
.svg-defs{position:absolute; width:0; height:0; overflow:hidden}

/* ---------- Grano de papel ---------- */
body::after{
  content:""; position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.028; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Titulares ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.07;
  letter-spacing:-.012em;
  color:var(--tinta);
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(3rem,7vw,5.75rem); font-weight:300}
h2{font-size:clamp(2.35rem,4.6vw,4rem); font-weight:300}
h3{font-family:var(--font-display); font-size:clamp(1.35rem,1.7vw,1.65rem); font-weight:500; letter-spacing:-.005em}
h1 em,h2 em,h3 em{font-style:italic; font-weight:300; color:var(--oro-600)}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
strong{font-weight:500; color:var(--tinta)}

::selection{background:var(--oro-400); color:var(--verde-900)}

.skip-link{position:absolute; left:-9999px; top:0; z-index:200; background:var(--verde-700); color:#fff; padding:.8rem 1.2rem}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--oro-500); outline-offset:3px; border-radius:2px}

/* ---------- Utilidades ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}

.eyebrow{
  font-family:var(--font-ui);
  font-size:.7rem; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--oro-600);
  margin:0 0 1.35rem;
  display:flex; align-items:center; gap:1rem;
}
.eyebrow::after{content:""; flex:0 0 38px; height:1px; background:currentColor; opacity:.5}
.eyebrow.light{color:var(--oro-300)}
.center .eyebrow{justify-content:center}
.center .eyebrow::before{content:""; flex:0 0 38px; height:1px; background:currentColor; opacity:.5}

.ornament{display:block; width:140px; height:14px; margin:1.6rem auto 0; color:var(--oro-500); fill:currentColor; stroke:currentColor}
.section-dark .ornament{color:var(--oro-400)}

.section{padding:clamp(5rem,10vw,9.5rem) 0; position:relative}
.section-cream{background:var(--crema-100)}
.section-dark{background:var(--verde-900); color:rgba(242,231,207,.72); overflow:hidden}
.section-dark::before{
  content:""; position:absolute; top:-25%; left:50%; transform:translateX(-50%);
  width:min(1100px,120%); aspect-ratio:1; pointer-events:none;
  background:radial-gradient(circle, rgba(194,154,78,.13) 0%, transparent 62%);
}
.section-dark h2,.section-dark h3{color:var(--crema-50)}
.section-dark strong{color:var(--oro-300)}

.section-head{max-width:60ch; margin-bottom:clamp(2.75rem,4.5vw,4.5rem); position:relative}
.section-head.center{margin-inline:auto; text-align:center}
.section-sub{color:var(--tinta-50); margin-top:1.35rem; font-size:1.03rem}
.section-dark .section-sub{color:rgba(242,231,207,.6)}

.lead{font-size:1.1rem; line-height:1.72; color:var(--tinta-70)}

/* ---------- Botones ---------- */
.btn{
  --btn-bg:var(--verde-700);
  --btn-fg:#fff;
  --btn-bd:var(--verde-700);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  padding:1.05rem 2rem;
  font-family:var(--font-ui); font-size:.755rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  color:var(--btn-fg); background:var(--btn-bg);
  border:1px solid var(--btn-bd); border-radius:var(--radius);
  transition:color .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease),
             transform .4s var(--ease-out), box-shadow .4s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--btn-hover,var(--verde-600)); transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn .ico{width:17px; height:17px; fill:currentColor; flex:none}
/* solo la flecha final se desplaza en hover */
.btn .ico:last-child{transition:transform .4s var(--ease-out)}
.btn:hover .ico:last-child{transform:translateX(4px)}

.btn-primary{--btn-bg:var(--verde-700); --btn-bd:var(--verde-700); --btn-hover:var(--verde-600)}
.btn-gold{--btn-bg:var(--oro-500); --btn-bd:var(--oro-500); --btn-fg:var(--verde-950); --btn-hover:var(--oro-400)}
.btn-ghost{--btn-bg:transparent; --btn-bd:rgba(255,255,255,.42); --btn-fg:#fff; --btn-hover:rgba(255,255,255,.16); backdrop-filter:blur(6px)}
.btn-ghost:hover{--btn-bd:#fff}
.btn-outline{--btn-bg:transparent; --btn-bd:var(--crema-300); --btn-fg:var(--verde-700); --btn-hover:var(--verde-700)}
.btn-outline:hover{color:#fff; --btn-bd:var(--verde-700)}
.btn-outline-light{--btn-bg:transparent; --btn-bd:rgba(230,208,164,.32); --btn-fg:var(--crema-100); --btn-hover:var(--oro-500)}
.btn-outline-light:hover{color:var(--verde-950); --btn-bd:var(--oro-500)}

.btn-sm{padding:.72rem 1.35rem; font-size:.685rem}
.btn-block{width:100%}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{position:fixed; inset:0 0 auto 0; z-index:100}

.topbar{
  background:var(--verde-900); color:rgba(242,231,207,.68);
  overflow:hidden; max-height:40px;
  transition:max-height .45s var(--ease), opacity .35s var(--ease);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:40px;
  font-family:var(--font-ui); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
}
.topbar-inner p{margin:0}
.topbar-wa{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--oro-300); transition:color .3s}
.topbar-wa:hover{color:var(--oro-100)}
.topbar-wa .ico{width:14px; height:14px; fill:currentColor}
.site-header.is-stuck .topbar{max-height:0; opacity:0}

.headbar{
  background:rgba(253,251,246,.78);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.is-stuck .headbar{
  background:rgba(253,251,246,.95);
  border-bottom-color:var(--crema-200);
  box-shadow:0 1px 30px rgba(19,46,36,.07);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:var(--header-h)}

.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; flex:none}
.brand-mark{
  display:grid; place-items:center; width:46px; height:46px; flex:none;
  border:1px solid var(--crema-300); border-radius:50%; background:var(--crema-50);
  transition:border-color .4s var(--ease);
}
.brand:hover .brand-mark{border-color:var(--oro-400)}
.brand-mark img{width:32px; height:auto; mix-blend-mode:multiply}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-text strong{
  font-family:var(--font-ui); font-weight:400; font-size:1rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--verde-700);
}
.brand-text em{
  font-family:var(--font-ui); font-style:normal; font-weight:300;
  font-size:.555rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--oro-600); margin-top:.35rem;
}

.nav{display:flex; align-items:center; gap:2.15rem}
.nav a{
  font-family:var(--font-ui); font-size:.775rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:var(--verde-800); position:relative; padding:.35rem 0;
  transition:color .3s var(--ease);
}
.nav a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--oro-500); transform:scaleX(0); transform-origin:right;
  transition:transform .42s var(--ease-out);
}
.nav a:not(.btn):hover::after,
.nav a:not(.btn).is-active::after{transform:scaleX(1); transform-origin:left}
.nav a:not(.btn).is-active{color:var(--oro-700)}
.nav-cta{color:#fff !important}

.burger{display:none; width:44px; height:44px; padding:11px; flex:none}
.burger span{display:block; height:1.4px; background:var(--verde-800); border-radius:2px; transition:transform .4s var(--ease), opacity .25s}
.burger span + span{margin-top:6px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; z-index:0; isolation:isolate;
  min-height:100svh; display:flex; align-items:center;
  padding:calc(var(--header-h) + 5rem) 0 6.5rem;
  color:#fff; overflow:hidden;
}
.hero-media{position:absolute; inset:0; z-index:-2}
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 58%;
  animation:kenburns 26s var(--ease) infinite alternate;
}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(8,23,18,.93) 0%, rgba(8,23,18,.78) 34%, rgba(8,23,18,.34) 66%, rgba(8,23,18,.58) 100%),
    linear-gradient(to top, rgba(8,23,18,.8) 0%, transparent 42%);
}
.hero-inner{position:relative}
.hero h1{max-width:14ch; margin-bottom:1.75rem; color:#fff; letter-spacing:-.025em}
.hero h1 em{color:var(--oro-400)}
.hero-lead{max-width:50ch; font-size:1.075rem; font-weight:300; color:rgba(255,255,255,.8); margin-bottom:2.6rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:3.2rem}

.hero-creds{display:flex; flex-wrap:wrap; gap:1.5rem 2.4rem}
.hero-creds li{
  position:relative; padding-left:1.15rem;
  font-family:var(--font-ui); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.62);
}
.hero-creds li::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%) rotate(45deg);
  width:5px; height:5px; background:var(--oro-500);
}

.hero-rail{
  position:absolute; left:calc(var(--gutter) - 1.4rem); top:50%;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  font-family:var(--font-ui); font-size:.66rem; letter-spacing:.42em;
  text-transform:uppercase; color:rgba(255,255,255,.34);
  pointer-events:none;
}

.hero-scroll{position:absolute; left:50%; bottom:2.2rem; width:1px; height:58px; background:rgba(255,255,255,.22); overflow:hidden}
.hero-scroll span{display:block; width:100%; height:24px; background:var(--oro-400); animation:scrollCue 2.6s var(--ease) infinite}
@keyframes scrollCue{0%{transform:translateY(-26px)}62%,100%{transform:translateY(62px)}}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  background:var(--oro-500); color:var(--verde-950);
  padding:.95rem 0; overflow:hidden;
  border-top:1px solid rgba(8,23,18,.1); border-bottom:1px solid rgba(8,23,18,.1);
}
.marquee-track{display:flex; width:max-content; animation:marquee 46s linear infinite}
.marquee-track span{
  display:inline-flex; align-items:center; flex:none;
  font-family:var(--font-ui); font-size:.735rem; font-weight:400;
  letter-spacing:.3em; text-transform:uppercase; white-space:nowrap;
}
.marquee-track i{
  display:inline-block; flex:none; width:5px; height:5px;
  margin:0 2.1rem; background:currentColor; transform:rotate(45deg); opacity:.55;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   GARANTÍAS
   ============================================================ */
.strip{background:var(--verde-700); color:rgba(242,231,207,.72); padding:clamp(3.2rem,6vw,5rem) 0}
.strip-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.8rem,3.2vw,3.25rem)}
.strip-item{padding-top:1.75rem; border-top:1px solid rgba(230,208,164,.2)}
.strip-ico{display:block; width:32px; height:32px; margin-bottom:1.1rem; color:var(--oro-400)}
.strip-ico svg{width:100%; height:100%}
.strip-item h3{font-size:1.22rem; color:var(--crema-50); margin-bottom:.6rem}
.strip-item p{font-size:.885rem; color:rgba(242,231,207,.62); line-height:1.68; margin:0}

/* ============================================================
   NOSOTROS
   ============================================================ */
.split{display:grid; grid-template-columns:1fr 1.02fr; gap:clamp(2.75rem,7vw,7rem); align-items:center}

.split-media{position:relative; will-change:transform}
.split-media img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg)}
.split-frame{
  position:absolute; inset:auto auto -1.15rem -1.15rem; width:58%; height:58%;
  border-left:1px solid var(--oro-400); border-bottom:1px solid var(--oro-400);
  pointer-events:none;
}
.split-badge{
  position:absolute; right:-1.5rem; bottom:2.75rem;
  background:var(--oro-500); color:var(--verde-950);
  padding:1.4rem 1.8rem; text-align:center; box-shadow:var(--shadow-md);
  font-family:var(--font-ui); line-height:1.25;
}
.split-badge span{display:block; font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; opacity:.7}
.split-badge strong{display:block; font-family:var(--font-display); font-size:1.5rem; font-weight:500; letter-spacing:.02em; margin:.2rem 0; color:inherit}

.quote{
  margin:1.9rem 0; padding:.2rem 0 .2rem 1.75rem;
  border-left:1px solid var(--oro-400);
  font-family:var(--font-display); font-size:1.32rem; font-style:italic;
  font-weight:300; line-height:1.5; color:var(--tinta);
}

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin:2.4rem 0 2.6rem; padding:1.9rem 0; border-block:1px solid var(--crema-300)}
.stats li{display:flex; flex-direction:column; gap:.45rem}
.stats strong{
  font-family:var(--font-display); font-size:clamp(2.1rem,3.4vw,2.85rem);
  font-weight:300; line-height:1; color:var(--verde-700);
}
.stats span{font-family:var(--font-ui); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-30); line-height:1.6}

/* ============================================================
   BANNER
   ============================================================ */
.banner{line-height:0}
.banner img{width:100%}

/* ============================================================
   PRODUCTOS
   ============================================================ */
.filters{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-bottom:clamp(2.25rem,4vw,3.5rem)}
.filter{
  padding:.66rem 1.35rem;
  font-family:var(--font-ui); font-size:.715rem; font-weight:400;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--tinta-50);
  border:1px solid var(--crema-300); border-radius:100px; background:transparent;
  transition:color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.filter:hover{border-color:var(--oro-400); color:var(--verde-700)}
.filter.is-active{background:var(--verde-700); border-color:var(--verde-700); color:#fff}

.grid-products{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:clamp(1.1rem,2vw,1.85rem)}

.card{
  display:flex; flex-direction:column;
  background:var(--crema-50); border:1px solid var(--crema-200);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .55s var(--ease);
}
.card:hover{transform:translateY(-7px); box-shadow:var(--shadow-md); border-color:var(--oro-300)}
.card.is-hidden{display:none}

.card-media{position:relative; overflow:hidden; background:var(--crema-200)}
.card-media img{width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .9s var(--ease-out)}
.card:hover .card-media img{transform:scale(1.055)}
.card-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,23,18,.28), transparent 45%);
  opacity:0; transition:opacity .5s var(--ease);
}
.card:hover .card-media::after{opacity:1}

.tag{
  position:absolute; top:1rem; left:1rem; z-index:1;
  background:var(--oro-500); color:var(--verde-950);
  font-family:var(--font-ui); font-size:.6rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  padding:.42rem .8rem;
}

.card-body{padding:1.65rem 1.6rem 1.75rem; display:flex; flex-direction:column; flex:1}
.card-kicker{
  font-family:var(--font-ui); font-size:.615rem; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase; color:var(--oro-600); margin-bottom:.6rem;
}
.card-body h3{margin-bottom:.7rem}
.card-desc{font-size:.9rem; line-height:1.68; color:var(--tinta-50)}
.card-meta{
  margin:1.15rem 0 1.35rem; padding-top:1rem; border-top:1px solid var(--crema-200);
  font-family:var(--font-ui); font-size:.685rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--tinta-30);
}
.card-cta{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-ui); font-size:.715rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  color:var(--verde-700); position:relative; padding-bottom:.35rem;
}
.card-cta .ico{width:16px; height:16px; fill:none; stroke:currentColor; transition:transform .45s var(--ease-out)}
.card-cta::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--oro-500); transform:scaleX(1); transform-origin:left; transition:transform .45s var(--ease-out)}
.card:hover .card-cta{color:var(--oro-700)}
.card:hover .card-cta .ico{transform:translateX(4px)}

.empty-msg{margin-top:2.5rem; text-align:center; color:var(--tinta-30); font-style:italic}

.cta-row{
  margin-top:clamp(2.75rem,4.5vw,4rem);
  padding:clamp(2rem,3.4vw,3rem);
  background:var(--verde-700); color:rgba(242,231,207,.72);
  border-radius:var(--radius-lg);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.75rem;
}
.cta-row h3{color:var(--crema-50); margin-bottom:.4rem}
.cta-row p{margin:0; max-width:52ch; font-size:.93rem}

/* ============================================================
   TABLAS
   ============================================================ */
.grid-tablas{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2vw,1.85rem); align-items:stretch}
.tabla-card{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(2rem,3.2vw,2.9rem);
  background:rgba(255,255,255,.038);
  border:1px solid rgba(230,208,164,.15);
  border-radius:var(--radius-lg);
  transition:transform .55s var(--ease-out), background .5s var(--ease), border-color .5s var(--ease);
}
.tabla-card:hover{transform:translateY(-7px); background:rgba(255,255,255,.07); border-color:rgba(216,184,124,.4)}
.tabla-card.is-featured{background:rgba(194,154,78,.1); border-color:rgba(216,184,124,.42)}
.tabla-flag{
  position:absolute; top:-.7rem; left:clamp(2rem,3.2vw,2.9rem);
  background:var(--oro-500); color:var(--verde-950);
  font-family:var(--font-ui); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.38rem .85rem;
}
.tabla-size{font-family:var(--font-ui); font-size:.665rem; letter-spacing:.24em; text-transform:uppercase; color:var(--oro-400); margin-bottom:.7rem}
.tabla-card h3{font-family:var(--font-display); font-size:clamp(1.75rem,2.4vw,2.15rem); font-weight:300; margin-bottom:1.6rem}
.tabla-card ul{display:grid; gap:.78rem; margin-bottom:2.2rem; flex:1}
.tabla-card li{position:relative; padding-left:1.55rem; font-size:.9rem; line-height:1.6; color:rgba(242,231,207,.72)}
.tabla-card li::before{content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; background:var(--oro-500); transform:rotate(45deg)}
.tabla-card .btn{width:100%}
.tablas-note{margin-top:clamp(2.25rem,3.5vw,3.25rem); text-align:center; font-size:.9rem; color:rgba(242,231,207,.55)}

/* ============================================================
   PROCESO
   ============================================================ */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.6rem,3.2vw,3rem)}
.step{position:relative; padding-top:3.1rem}
.step::before{content:""; position:absolute; top:1.35rem; left:3.1rem; right:-1.5rem; height:1px; background:linear-gradient(to right,var(--crema-300) 0%,var(--crema-300) 60%,transparent 100%)}
.step:last-child::before{display:none}
.step-num{
  position:absolute; top:0; left:0;
  display:grid; place-items:center; width:44px; height:44px;
  border:1px solid var(--oro-400); border-radius:50%; background:var(--crema-50);
  font-family:var(--font-display); font-size:1.05rem; color:var(--oro-700);
}
.step h3{font-size:1.25rem; margin-bottom:.65rem}
.step p{font-size:.9rem; line-height:1.68; color:var(--tinta-50); margin:0}

/* ============================================================
   GALERÍA
   ============================================================ */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:215px; gap:clamp(.55rem,1.1vw,.9rem)}
.g-item{position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:0; background:var(--crema-200)}
.g-item img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-out)}
.g-item::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(8,23,18,.72),transparent 58%); opacity:0; transition:opacity .45s var(--ease)}
.g-cap{
  position:absolute; left:1.15rem; right:1.15rem; bottom:1.1rem; z-index:1;
  font-family:var(--font-ui); font-size:.655rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--crema-50); text-align:left;
  opacity:0; transform:translateY(10px);
  transition:opacity .45s var(--ease), transform .45s var(--ease-out);
}
.g-item:hover img{transform:scale(1.08)}
.g-item:hover::after,.g-item:focus-visible::after{opacity:1}
.g-item:hover .g-cap,.g-item:focus-visible .g-cap{opacity:1; transform:none}
.g-tall{grid-row:span 2}
.g-wide{grid-column:span 2}

/* ============================================================
   CONTACTO
   ============================================================ */
.contact-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2.75rem,6vw,6rem); align-items:start}

.contact-list{display:grid; gap:1.6rem; margin:2.6rem 0}
.contact-list li{display:flex; gap:1.15rem; align-items:flex-start}
.ci-ico{flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--crema-100); border:1px solid var(--crema-200)}
.ci-ico svg{width:19px; height:19px; fill:var(--verde-700)}
.contact-list strong{
  display:block; font-family:var(--font-ui); font-size:.645rem; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase; color:var(--oro-600); margin-bottom:.25rem;
}
.contact-list a,.contact-list span:not(.ci-ico){color:var(--tinta); text-decoration:none; font-size:.99rem}
.contact-list a{transition:color .3s var(--ease)}
.contact-list a:hover{color:var(--oro-700)}

.socials{display:flex; gap:.65rem}
.socials a{display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--crema-300); border-radius:50%; transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease)}
.socials a svg{width:18px; height:18px; fill:var(--verde-700); transition:fill .35s var(--ease)}
.socials a:hover{background:var(--verde-700); border-color:var(--verde-700); transform:translateY(-3px)}
.socials a:hover svg{fill:#fff}

.contact-form{background:var(--crema-100); border:1px solid var(--crema-200); border-radius:var(--radius-lg); padding:clamp(1.9rem,3.4vw,3rem)}
.contact-form h3{font-size:1.75rem; margin-bottom:.4rem}
.form-note{font-size:.85rem; color:var(--tinta-30); margin-bottom:2rem}

.field{margin-bottom:1.2rem}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.field label{display:block; font-family:var(--font-ui); font-size:.645rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-50); margin-bottom:.55rem}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--font-body); font-weight:300; font-size:.96rem; color:var(--tinta);
  padding:.9rem 1.05rem; background:var(--crema-50);
  border:1px solid var(--crema-300); border-radius:var(--radius);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{resize:vertical; min-height:112px}
.field input::placeholder,.field textarea::placeholder{color:var(--tinta-30)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--oro-500); box-shadow:0 0 0 3px rgba(194,154,78,.13)}
.field .is-invalid{border-color:#B4462F}
.form-error{margin-top:1rem; font-size:.87rem; color:#B4462F}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--verde-950); color:rgba(242,231,207,.6); padding:clamp(4rem,7vw,6rem) 0 0}
.footer-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1.35fr; gap:clamp(2.25rem,4vw,3.75rem); padding-bottom:clamp(3rem,4.5vw,4.5rem)}
.footer-logo{display:inline-grid; place-items:center; width:86px; height:86px; background:var(--crema-50); border-radius:var(--radius-lg); margin-bottom:1.5rem}
.footer-logo img{width:62px; height:auto}
.footer-brand p{font-size:.92rem; line-height:1.75; margin:0 0 1.6rem}
.footer-wa{align-self:flex-start}

.footer-col h4{font-family:var(--font-ui); font-size:.655rem; font-weight:400; letter-spacing:.26em; text-transform:uppercase; color:var(--oro-400); margin-bottom:1.35rem}
.footer-col a,.footer-col span{display:block; font-size:.91rem; text-decoration:none; margin-bottom:.72rem; transition:color .3s var(--ease)}
.footer-col a:hover{color:var(--oro-300)}

.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem;
  padding-top:1.9rem; padding-bottom:1.9rem;
  border-top:1px solid rgba(230,208,164,.1);
  font-family:var(--font-ui); font-size:.7rem; letter-spacing:.1em; color:rgba(242,231,207,.38);
}
.footer-bottom p{margin:0}

/* ============================================================
   FLOTANTES
   ============================================================ */
.fab-wa{
  position:fixed; right:22px; bottom:22px; z-index:90;
  display:grid; place-items:center; width:56px; height:56px;
  background:#25D366; border-radius:50%;
  box-shadow:0 10px 30px rgba(37,211,102,.36);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease);
}
.fab-wa svg{width:28px; height:28px; fill:#fff}
.fab-wa::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1.5px solid #25D366; animation:pulse 2.8s var(--ease) infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.55);opacity:0}}
.fab-wa:hover{transform:scale(1.08); box-shadow:0 14px 38px rgba(37,211,102,.5)}

.fab-top{
  position:fixed; right:22px; bottom:90px; z-index:90;
  display:grid; place-items:center; width:44px; height:44px;
  background:var(--verde-700); border-radius:50%;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .4s var(--ease), transform .4s var(--ease-out), background .3s;
}
.fab-top svg{width:22px; height:22px; fill:#fff}
.fab-top.is-visible{opacity:1; pointer-events:auto; transform:none}
.fab-top:hover{background:var(--verde-600)}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:150;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,23,18,.96); backdrop-filter:blur(8px);
  padding:clamp(1rem,4vw,3.5rem);
  animation:fadeIn .35s var(--ease);
}
.lightbox[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.lb-figure{max-width:min(1120px,100%); max-height:100%; display:flex; flex-direction:column; align-items:center; gap:1.15rem}
.lb-figure img{max-height:76vh; width:auto; object-fit:contain}
.lb-figure figcaption{font-family:var(--font-ui); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--oro-400); text-align:center}
.lb-close{position:absolute; top:1.1rem; right:1.5rem; font-size:2.5rem; line-height:1; color:var(--crema-100); opacity:.75; transition:opacity .25s}
.lb-close:hover{opacity:1}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; font-size:2.3rem; line-height:1; color:var(--crema-100); background:rgba(255,255,255,.06); border-radius:50%; transition:background .3s var(--ease)}
.lb-nav:hover{background:rgba(255,255,255,.16)}
.lb-prev{left:clamp(.5rem,2.5vw,2.5rem)}
.lb-next{right:clamp(.5rem,2.5vw,2.5rem)}
.lb-count{position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); margin:0; font-family:var(--font-ui); font-size:.7rem; letter-spacing:.24em; color:rgba(242,231,207,.45)}

/* ============================================================
   ANIMACIONES DE ENTRADA
   ------------------------------------------------------------
   El contenido es visible por defecto. Solo se oculta cuando el
   JS confirma que puede animarlo (clase .js en <html>), de modo
   que si el script falla nada queda invisible.
   ============================================================ */
.js .reveal{opacity:0; transform:translateY(30px); transition:opacity .95s var(--ease-out) var(--d,0s), transform .95s var(--ease-out) var(--d,0s)}
.js .reveal.is-in{opacity:1; transform:none}
.js.no-reveal .reveal{opacity:1; transform:none; transition:none}

/* Revelado de imágenes con cortina */
.js .img-reveal img{clip-path:inset(0 0 100% 0); transform:scale(1.06); transition:clip-path 1.25s var(--ease-out) var(--d,0s), transform 1.5s var(--ease-out) var(--d,0s)}
.js .img-reveal.is-in img{clip-path:inset(0 0 0 0); transform:scale(1)}
.js.no-reveal .img-reveal img{clip-path:none; transform:none; transition:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .strip-grid{grid-template-columns:repeat(2,1fr); row-gap:2.5rem}
  .steps{grid-template-columns:repeat(2,1fr); row-gap:3rem}
  .step:nth-child(2)::before{display:none}
  .grid-tablas{grid-template-columns:1fr; max-width:580px; margin-inline:auto}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .hero-rail{display:none}
}

@media (max-width:960px){
  .split{grid-template-columns:1fr}
  .split-media img{aspect-ratio:4/3}
  .split-badge{right:1rem; bottom:-1.35rem; padding:1.05rem 1.35rem}
  .split-frame{display:none}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}

@media (max-width:900px){
  :root{--header-h:66px}
  .topbar{display:none}
  .burger{display:block}
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--crema-50); border-bottom:1px solid var(--crema-200);
    padding:.5rem var(--gutter) 1.6rem;
    box-shadow:0 24px 48px rgba(19,46,36,.12);
    clip-path:inset(0 0 100% 0); opacity:0; pointer-events:none;
    transition:clip-path .5s var(--ease-out), opacity .3s var(--ease);
  }
  .nav.is-open{clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto}
  .nav a{padding:1rem 0; border-bottom:1px solid var(--crema-200); font-size:.88rem}
  .nav a:not(.btn)::after{display:none}
  .nav-cta{margin-top:1.2rem; border-bottom:0 !important; justify-content:center}

  .hero{min-height:auto; padding:calc(var(--header-h) + 4.5rem) 0 5rem}
  .hero-scroll{display:none}
  .cta-row{flex-direction:column; align-items:flex-start}
}

@media (max-width:620px){
  .strip-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr; row-gap:2.4rem}
  .step::before{display:none}
  .gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:158px}
  .g-wide{grid-column:span 2}
  .g-tall{grid-row:span 2}
  .field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-actions{flex-direction:column; align-items:stretch}
  .hero-creds{gap:.85rem 1.6rem}
  .stats{grid-template-columns:1fr; gap:1.35rem; text-align:left}
  .stats li{flex-direction:row; align-items:baseline; gap:1rem}
  .stats strong{font-size:2.1rem; min-width:3.5ch}
  .stats span br{display:none}
  .quote{font-size:1.18rem; padding-left:1.35rem}
  .lb-nav{width:42px; height:42px; font-size:1.9rem}
  .fab-wa{width:52px; height:52px; right:15px; bottom:15px}
  .fab-top{right:19px; bottom:79px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .js .reveal,.js .img-reveal img{opacity:1 !important; transform:none !important; clip-path:none !important}
}