/* ============================================================
   AGROBERRUECO · styles.css
   Agro-Tech Orgánico — verde musgo, brote, cobre, neblina
   ============================================================ */

:root{
  --base:    #121C16;   /* verde musgo profundo */
  --panel:   #0d1510;   /* más oscuro, paneles */
  --panel-2: #16231b;
  --verde:   #4EEE94;   /* brote / vida / tech */
  --cobre:   #C37B4C;   /* maquinaria / trabajo */
  --niebla:  #EAEFEB;   /* blanco neblina / aire */
  --muted:   #8ba093;   /* texto secundario */
  --line:    rgba(234,239,235,.12);

  --ff: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --gut: clamp(20px, 5vw, 80px);
  --maxw: 1320px;
  --r: 14px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--ff);
  background:var(--base);
  color:var(--niebla);
  font-weight:400;
  line-height:1.5;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--verde); color:var(--base); }

/* ---- DEFENSIVO: el contenido SIEMPRE es visible por defecto.
   El JS solo AÑADE la clase .armed para ocultar antes de animar,
   y la QUITA para revelar. Si el JS falla, nada queda oculto.    */
.reveal{ opacity:1; transform:none; }
html.js .reveal{ transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
html.js .reveal.armed{ opacity:0; transform:translateY(26px); }
html.js .reveal[data-d="1"]{ transition-delay:.06s; }
html.js .reveal[data-d="2"]{ transition-delay:.16s; }
html.js .reveal[data-d="3"]{ transition-delay:.26s; }
html.js .reveal[data-d="4"]{ transition-delay:.36s; }

/* ---- FONDO: aurora + grano ------------------------------- */
.aurora{
  position:fixed; inset:-30vmax; z-index:-2; pointer-events:none;
  background:
    radial-gradient(40vmax 40vmax at 20% 25%, rgba(78,238,148,.10), transparent 60%),
    radial-gradient(46vmax 46vmax at 82% 70%, rgba(195,123,76,.10), transparent 62%),
    radial-gradient(60vmax 60vmax at 60% 110%, rgba(78,238,148,.06), transparent 60%),
    var(--base);
  animation:aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{ transform:translate3d(-3%, -2%, 0) rotate(0deg); }
  100%{ transform:translate3d(4%, 3%, 0) rotate(8deg); }
}
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---- PLACEHOLDERS DE FOTO -------------------------------- */
.ph{
  position:relative; overflow:hidden; background:var(--panel);
  background-image:
    repeating-linear-gradient(135deg, rgba(234,239,235,.04) 0 2px, transparent 2px 11px);
  display:flex; align-items:flex-end; justify-content:flex-start;
}
.ph::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 30% 20%, rgba(78,238,148,.06), transparent 55%);
}
.ph__tag{
  position:relative; z-index:1; margin:12px;
  font:600 10.5px/1.3 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); background:rgba(13,21,16,.7);
  padding:5px 9px; border:1px solid var(--line); border-radius:6px;
}
/* cuando hay foto real cargada desde el manifest */
.ph.has-photo{ background-image:none; }
.ph.has-photo::after{ content:none; }
.ph.has-photo .ph__tag{ display:none; }

/* ---- SPLASH ---------------------------------------------- */
.splash{
  position:fixed; inset:0; z-index:1000; background:var(--base);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  animation:splashOut .8s ease 4.2s forwards;   /* red de seguridad CSS */
}
.splash.gone{ animation:splashOut .7s ease forwards; }
@keyframes splashOut{ to{ opacity:0; visibility:hidden; } }
.splash::before{
  content:""; position:absolute; inset:0; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.splash__word{ display:flex; gap:.02em; }
.splash__word span{
  font-weight:800; font-size:clamp(30px, 8vw, 76px); letter-spacing:-.02em; color:var(--niebla);
  opacity:0; transform:translateY(40px);
  animation:splashLetter .6s cubic-bezier(.2,.8,.2,1) forwards;
}
.splash__word span:nth-child(1){ animation-delay:.05s; }
.splash__word span:nth-child(2){ animation-delay:.10s; }
.splash__word span:nth-child(3){ animation-delay:.15s; }
.splash__word span:nth-child(4){ animation-delay:.20s; }
.splash__word span:nth-child(5){ animation-delay:.25s; }
.splash__word span:nth-child(6){ animation-delay:.30s; }
.splash__word span:nth-child(7){ animation-delay:.35s; }
.splash__word span:nth-child(8){ animation-delay:.40s; }
.splash__word span:nth-child(9){ animation-delay:.45s; }
.splash__word span:nth-child(10){ animation-delay:.50s; }
.splash__word span:nth-child(11){ animation-delay:.55s; }
.splash__word span:nth-child(12){ animation-delay:.60s; }
@keyframes splashLetter{ to{ opacity:1; transform:none; } }
.splash__bar{ width:min(240px,60vw); height:2px; background:var(--line); overflow:hidden; border-radius:2px; }
.splash__bar i{ display:block; height:100%; width:0; background:var(--verde); animation:splashBar 3.6s ease .4s forwards; box-shadow:0 0 14px var(--verde); }
@keyframes splashBar{ to{ width:100%; } }
.splash__sub{ font:600 11px/1 ui-monospace, monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ---- CURSOR ---------------------------------------------- */
.cursor{
  position:fixed; top:0; left:0; z-index:900; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1.5px solid var(--verde); border-radius:50%;
  transition:width .22s, height .22s, margin .22s, background .22s, border-color .22s;
  display:flex; align-items:center; justify-content:center; opacity:0;
}
.cursor.on{ opacity:1; }
.cursor.hot{ width:84px; height:84px; margin:-42px 0 0 -42px; background:rgba(78,238,148,.08); }
.cursor__label{
  font:600 9.5px/1 ui-monospace, monospace; letter-spacing:.1em; text-transform:uppercase;
  color:var(--verde); opacity:0; transform:scale(.6); transition:opacity .2s, transform .2s; white-space:nowrap;
}
.cursor.hot .cursor__label{ opacity:1; transform:none; }
@media (hover:none){ .cursor{ display:none !important; } }

/* ---- MARCA LATERAL --------------------------------------- */
.sidebrand{
  position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column; align-items:center; gap:14px; pointer-events:none;
}
.sidebrand__dot{ width:9px; height:9px; border-radius:50%; background:var(--verde); box-shadow:0 0 0 0 rgba(78,238,148,.6); animation:pulse 2.4s ease-out infinite; flex:none; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(78,238,148,.5); } 100%{ box-shadow:0 0 0 12px rgba(78,238,148,0); } }
.sidebrand__txt{ writing-mode:vertical-rl; font:600 10px/1 ui-monospace, monospace; letter-spacing:.18em; color:var(--muted); }
@media (max-width:1100px){ .sidebrand{ display:none; } }

/* ---- NAV ------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gut);
  transition:background .3s, padding .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(13,21,16,.72); backdrop-filter:blur(12px); border-bottom-color:var(--line); padding-top:13px; padding-bottom:13px; }
.nav__logo{ font-weight:800; font-size:19px; letter-spacing:-.02em; display:flex; align-items:center; gap:8px; }
.nav__logo svg{ width:.95em; height:.95em; flex-shrink:0; color:var(--niebla); }
.nav__links{ display:flex; align-items:center; gap:26px; }
.nav__links a{ font-size:13.5px; font-weight:600; color:var(--niebla); display:inline-flex; gap:6px; align-items:baseline; transition:color .2s; }
.nav__links a b{ font:600 10px/1 ui-monospace, monospace; color:var(--verde); opacity:.8; }
.nav__links a:not(.nav__cta):hover{ color:var(--verde); }
.nav__cta{ border:1.5px solid var(--verde); border-radius:40px; padding:9px 18px; color:var(--verde) !important; transition:background .25s, color .25s; }
.nav__cta:hover{ background:var(--verde); color:var(--base) !important; }
.burger{ display:none; width:42px; height:42px; background:none; border:1px solid var(--line); border-radius:10px; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.burger span{ width:18px; height:1.6px; background:var(--niebla); transition:transform .3s, opacity .3s; }
.burger.open span:nth-child(1){ transform:translateY(3.3px) rotate(45deg); }
.burger.open span:nth-child(2){ transform:translateY(-3.3px) rotate(-45deg); }

@media (max-width:1080px){
  .burger{ display:flex; }
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(320px,82vw);
    background:var(--panel); flex-direction:column; align-items:flex-start; justify-content:center;
    gap:22px; padding:0 36px; transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.8,.2,1);
    border-left:1px solid var(--line);
  }
  .nav__links.open{ transform:none; }
  .nav__links a{ font-size:20px; }
  .nav__cta{ margin-top:8px; }
}

/* ---- HERO ------------------------------------------------ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding:120px var(--gut) clamp(48px,9vh,110px); overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:-1; }
.ph--hero{ position:absolute; inset:0; align-items:center; justify-content:center; }
.ph--hero .ph__tag{ position:absolute; bottom:14px; left:14px; margin:0; }
.hero__particles{ position:absolute; inset:0; width:100%; height:100%; }
.hero__veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,28,22,.55) 0%, rgba(18,28,22,.5) 40%, rgba(18,28,22,.82) 100%); }
.hero__inner{ position:relative; max-width:var(--maxw); width:100%; margin:0 auto; }
.kicker{ font:600 12px/1.4 ui-monospace, monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--cobre); max-width:640px; margin-bottom:22px; }
.hero__title{ font-weight:800; font-size:clamp(44px, 11vw, 150px); line-height:.92; letter-spacing:-.03em; }
.hero__title span{ display:block; }
.hero__title--offset{ color:var(--verde); margin-left:clamp(0px, 6vw, 90px); }
.hero__tag{ font-weight:300; font-size:clamp(17px,2.4vw,26px); color:var(--niebla); margin-top:26px; max-width:540px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero__scroll{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); width:24px; height:38px; border:1.5px solid var(--line); border-radius:14px; display:flex; justify-content:center; padding-top:7px; }
.hero__scroll span{ width:3px; height:8px; border-radius:3px; background:var(--verde); animation:scrolldot 1.8s ease-in-out infinite; }
@keyframes scrolldot{ 0%,100%{ transform:translateY(0); opacity:1; } 60%{ transform:translateY(11px); opacity:.2; } }

/* ---- BOTONES --------------------------------------------- */
.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; padding:14px 26px; border-radius:44px; transition:background .25s, color .25s, border-color .25s, transform .2s; }
.btn--primary{ border:1.5px solid var(--verde); color:var(--verde); }
.btn--primary:hover{ background:var(--verde); color:var(--base); transform:translateY(-2px); }
.btn--ghost{ color:var(--niebla); border:1.5px solid transparent; }
.btn--ghost:hover{ color:var(--verde); }
.btn--full{ width:100%; justify-content:center; margin-top:8px; }

/* ---- MARQUEE --------------------------------------------- */
.marquee{ overflow:hidden; white-space:nowrap; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--panel); }
.marquee__track{ display:inline-flex; will-change:transform; }
.marquee__track span{ font-weight:300; font-size:clamp(15px,2vw,22px); padding:16px 0; }
.marquee--copper .marquee__track span{ color:var(--cobre); letter-spacing:.02em; }
.marquee--inverse{ border:none; background:transparent; margin-top:auto; }
.marquee--inverse .marquee__track span{ color:var(--muted); font:600 12px/1 ui-monospace, monospace; letter-spacing:.16em; text-transform:uppercase; padding:14px 0; }

/* ---- SHARED SECTION TYPE --------------------------------- */
.eyebrow{ font:600 12px/1 ui-monospace, monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--cobre); margin-bottom:18px; }
.display{ font-weight:800; font-size:clamp(30px,5.2vw,68px); line-height:1.02; letter-spacing:-.025em; text-wrap:balance; }
.display em{ font-style:italic; color:var(--verde); }
.wm{ position:absolute; font-weight:800; font-size:clamp(180px,34vw,460px); line-height:.7; color:rgba(78,238,148,.07); top:-.06em; left:calc(var(--gut) - 12px); z-index:0; pointer-events:none; letter-spacing:-.04em; }
.wm--right{ left:auto; right:var(--gut); }
.aside-label{ position:absolute; right:18px; top:120px; writing-mode:vertical-rl; transform:rotate(180deg); font:600 11px/1 ui-monospace, monospace; letter-spacing:.2em; color:var(--muted); }

/* ---- PROYECTO (01) --------------------------------------- */
.proyecto{ position:relative; padding:clamp(80px,12vh,150px) var(--gut); max-width:var(--maxw); margin:0 auto; }
.proyecto__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,90px); align-items:center; }
.collage{ position:relative; aspect-ratio:4/4.4; }
.collage figure{ position:absolute; border:5px solid var(--niebla); box-shadow:0 30px 60px rgba(0,0,0,.45); }
.collage__a{ inset:0 26% 30% 0; transform:rotate(-3deg); z-index:1; }
.collage__b{ inset:30% 0 8% 34%; transform:rotate(3.5deg); z-index:2; }
.collage__c{ width:42%; aspect-ratio:1; right:6%; top:2%; transform:rotate(2deg); z-index:3; }
.ribbon{ position:absolute; z-index:4; left:-4%; top:42%; transform:rotate(-8deg); background:var(--cobre); color:var(--base); font:800 12px/1 var(--ff); letter-spacing:.08em; padding:9px 16px; box-shadow:0 10px 24px rgba(0,0,0,.4); }
.lead{ font-weight:400; font-size:clamp(17px,2vw,21px); margin-top:24px; max-width:46ch; color:var(--niebla); }
.support{ color:var(--muted); margin-top:16px; max-width:46ch; }
.display{ margin-top:6px; }
.defs{ margin-top:30px; border-top:1px solid var(--line); }
.defs div{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); }
.defs dt{ font:600 12px/1.3 ui-monospace, monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--cobre); }
.defs dd{ font:300 15px/1.3 var(--ff); color:var(--niebla); text-align:right; }

/* ---- SERVICIOS (02) — pin horizontal --------------------- */
.servicios{ position:relative; background:var(--panel); }
.servicios__pin{ position:sticky; top:0; height:100svh; overflow:hidden; display:flex; flex-direction:column; }
.servicios__head{ display:flex; align-items:center; justify-content:space-between; padding:clamp(80px,12vh,110px) var(--gut) 0; }
.servicios__progress{ font:600 13px/1 ui-monospace, monospace; letter-spacing:.1em; color:var(--muted); display:flex; align-items:center; gap:12px; }
.servicios__progress b{ color:var(--verde); font-size:15px; }
.progressbar{ display:inline-block; width:120px; height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.progressbar i{ display:block; height:100%; width:14%; background:var(--verde); box-shadow:0 0 10px var(--verde); transition:width .15s linear; }
.track{ flex:1; display:flex; align-items:center; gap:clamp(20px,3vw,42px); padding:0 var(--gut); will-change:transform; }
.svc{ flex:none; width:clamp(300px, 80vw, 940px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,48px); align-items:center; background:linear-gradient(160deg, rgba(22,35,27,.7), rgba(13,21,16,.4)); border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,3vw,46px); }
.svc[data-acc="cobre"]{ --acc:var(--cobre); }
.svc[data-acc="verde"]{ --acc:var(--verde); }
.svc__art{ aspect-ratio:1/.78; display:flex; align-items:center; justify-content:center; border-radius:10px; background:radial-gradient(120% 120% at 40% 20%, rgba(78,238,148,.05), transparent 60%); border:1px solid var(--line); }
.lineart{ width:88%; height:88%; }
.lineart .ln{ stroke:var(--acc, var(--verde)); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; transition:stroke-dashoffset 1.1s ease; }
.lineart .beam{ filter:drop-shadow(0 0 4px rgba(78,238,148,.7)); animation:beampulse 2.4s ease-in-out infinite; }
@keyframes beampulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.svc__serie{ font:600 11px/1 ui-monospace, monospace; letter-spacing:.16em; color:var(--acc); }
.svc__name{ font-weight:800; font-size:clamp(24px,3.2vw,40px); line-height:1.02; letter-spacing:-.02em; margin-top:14px; }
.svc__sub{ font-weight:300; font-size:clamp(16px,2vw,21px); color:var(--niebla); margin-top:8px; }
.svc__machine{ font:600 13px/1 ui-monospace, monospace; color:var(--cobre); margin-top:18px; letter-spacing:.04em; }
.svc__ficha{ font:400 12.5px/1.4 ui-monospace, monospace; color:var(--muted); margin-top:6px; }
.svc__text{ color:var(--muted); font-size:15px; margin-top:16px; max-width:42ch; }
.svc__cta{ display:inline-block; margin-top:22px; font-weight:600; font-size:14px; color:var(--acc); border-bottom:1px solid currentColor; padding-bottom:3px; }
.servicios__hint{ position:absolute; bottom:74px; right:var(--gut); font:600 11px/1 ui-monospace, monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); animation:hintpulse 2s ease-in-out infinite; }
@keyframes hintpulse{ 0%,100%{ opacity:.4; transform:translateX(0); } 50%{ opacity:1; transform:translateX(6px); } }

/* ---- ASESORAMIENTO (03) ---------------------------------- */
.aseso{ position:relative; padding:clamp(80px,12vh,150px) var(--gut); max-width:var(--maxw); margin:0 auto; }
.aseso__head{ position:relative; z-index:1; max-width:760px; }
.aseso__head .display{ margin-top:6px; }
.aseso__grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
.acard{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:32px 28px; transition:border-color .3s, transform .3s, background .3s; }
.acard:hover{ border-color:var(--verde); transform:translateY(-4px); background:var(--panel-2); }
.acard__icon{ width:48px; height:48px; stroke:var(--verde); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; margin-bottom:22px; }
.acard h3{ font-weight:800; font-size:21px; line-height:1.1; letter-spacing:-.01em; }
.acard p{ color:var(--muted); font-size:15px; margin-top:12px; }
.aseso__cta{ display:inline-block; margin-top:40px; font-weight:600; font-size:clamp(18px,2.4vw,26px); color:var(--verde); border-bottom:2px solid var(--verde); padding-bottom:5px; transition:gap .2s; }
.aseso__cta:hover{ opacity:.85; }

/* ---- GALERÍA (04) ---------------------------------------- */
.galeria{ padding:clamp(70px,10vh,130px) 0; overflow:hidden; }
.galeria__head{ padding:0 var(--gut); max-width:var(--maxw); margin:0 auto 44px; }
.galeria__head .display{ margin-top:6px; }
.lanes{ display:flex; flex-direction:column; gap:18px; }
.lane{ display:flex; gap:18px; width:max-content; will-change:transform; }
.lane figure{ flex:none; width:clamp(220px,26vw,340px); aspect-ratio:4/3; border-radius:10px; }
.galeria__note{ text-align:center; color:var(--muted); }

/* ---- CONTACTO (05) --------------------------------------- */
.contacto{ position:relative; padding:clamp(80px,12vh,150px) var(--gut); max-width:var(--maxw); margin:0 auto; }
.contacto__head{ position:relative; z-index:1; max-width:760px; margin-bottom:48px; }
.contacto__head .display{ margin-top:6px; }
.contacto__grid{ position:relative; z-index:1; display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(26px,4vw,60px); align-items:start; }
.infocard{ background:var(--panel); border:1px solid var(--cobre); border-radius:var(--r); padding:34px 30px; }
.infocard h3{ font-weight:800; font-size:24px; letter-spacing:-.01em; margin-bottom:22px; }
.infocard ul{ list-style:none; }
.infocard li{ display:flex; flex-direction:column; gap:4px; padding:14px 0; border-bottom:1px solid var(--line); }
.infocard li:last-of-type{ border-bottom:none; }
.infocard span{ font:600 11px/1 ui-monospace, monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.infocard a, .infocard b{ font-weight:600; font-size:16px; color:var(--niebla); transition:color .2s; }
.infocard a:hover{ color:var(--verde); }
.infocard__badge{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; font:600 12px/1 ui-monospace, monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--verde); }

.formu{ display:flex; flex-direction:column; gap:14px; }
.field{ position:relative; display:flex; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:12px; transition:border-color .25s; min-width:0; }
.field:focus-within{ border-color:var(--verde); }
.field__n{ font:600 11px/1 ui-monospace, monospace; color:var(--cobre); padding:0 0 0 18px; letter-spacing:.1em; }
.field input, .field select, .field textarea{ flex:1; min-width:0; width:100%; box-sizing:border-box; background:none; border:none; color:var(--niebla); font-family:var(--ff); font-size:16px; padding:16px 18px; outline:none; }
.field textarea{ resize:vertical; min-height:84px; }
.field select{ cursor:pointer; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238ba093' stroke-width='2'><path d='M1 1l5 5 5-5'/></svg>"); background-repeat:no-repeat; background-position:right 18px center; }
.field select option{ background:var(--panel); color:var(--niebla); }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); }
.field__suffix{ flex:0 0 auto; padding-right:16px; color:var(--muted); font-size:14px; user-select:none; }
.field:has(.field__suffix) input{ padding-right:4px; }
.field--area{ align-items:flex-start; }
.field--area .field__n{ padding-top:16px; }
.field-split{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.formu__alt{ text-align:center; font-weight:600; font-size:14px; color:var(--verde); margin-top:6px; }
.formu__alt:hover{ opacity:.8; }

/* ---- FOOTER ---------------------------------------------- */
.footer{ position:relative; background:var(--base); border-top:1px solid var(--line); overflow:hidden; padding-bottom:30px; }
.footer__loop{ overflow:hidden; white-space:nowrap; padding:30px 0; border-bottom:1px solid var(--line); }
.footer__loopTrack{ display:inline-flex; will-change:transform; }
.footer__loopTrack span{ font-weight:800; font-size:clamp(40px,9vw,120px); letter-spacing:-.03em; color:rgba(78,238,148,.15); }
.footer__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; padding:56px var(--gut) 40px; max-width:var(--maxw); margin:0 auto; }
.footer h4{ font:600 12px/1 ui-monospace, monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--cobre); margin-bottom:18px; }
.footer p{ color:var(--niebla); line-height:1.6; }
.footer__link{ display:inline-block; margin-top:14px; color:var(--verde); font-weight:600; font-size:14px; }
.footer__svc, .footer__contact{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.footer__svc a, .footer__contact a{ color:var(--niebla); font-size:15px; transition:color .2s; }
.footer__svc a:hover, .footer__contact a:hover{ color:var(--verde); }
.footer__contact b{ color:var(--muted); font-weight:600; font-size:14px; }
.footer__legal{ display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center; padding:24px var(--gut) 0; max-width:var(--maxw); margin:0 auto; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.footer__legal a{ color:var(--muted); transition:color .2s; }
.footer__legal a:hover{ color:var(--verde); }

/* ---- RESPONSIVE ------------------------------------------ */
@media (max-width:900px){
  .proyecto__grid{ grid-template-columns:1fr; }
  .collage{ aspect-ratio:4/3.6; max-width:460px; }
  .aseso__grid{ grid-template-columns:1fr; }
  .contacto__grid{ grid-template-columns:1fr; }
  .aside-label{ display:none; }
  /* servicios: swipe nativo en móvil, sin pin */
  .servicios{ background:var(--panel); }
  .servicios__pin{ position:static; height:auto; }
  .servicios__head{ padding-top:clamp(64px,9vh,90px); }
  .track{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:24px; transform:none !important; scrollbar-width:none; }
  .track::-webkit-scrollbar{ display:none; }
  .svc{ width:86vw; scroll-snap-align:center; grid-template-columns:1fr; }
  .svc__art{ aspect-ratio:1/.6; }
  .marquee--inverse{ margin-top:20px; }
  .servicios__hint{ position:static; text-align:right; padding:14px var(--gut) 0; }
}
@media (max-width:560px){
  .footer__grid{ grid-template-columns:1fr; gap:30px; }
  .field-split{ grid-template-columns:1fr; }
  .hero__title--offset{ margin-left:0; }
}