/* ============================================================
   M3 DESARROLLOS — Estudio de diseño y construcción
   Mockup institucional · estático · sin build step
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --ink:        #0B0B0B;
  --ink-soft:   #1A1A1A;
  --paper:      #FFFFFF;

  --con-050:    #F5F3F0;
  --con-100:    #EAE6E1;
  --con-200:    #DAD4CC;
  --con-300:    #C4BCB2;
  --con-500:    #9B9289;
  --con-600:    #7A7168;
  --con-700:    #55504A;

  --sky-1:      #DCE4E9;
  --sky-2:      #C2CFD8;

  --alert:      #B4441F;   /* solo para marcar pendientes */

  --serif: "Zilla Slab", "Roboto Slab", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(20px, 5.4vw, 88px);
  --maxw: 1360px;

  --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:76px;
  /* `clip` recorta los sangrados diagonales SIN crear contexto de scroll,
     así los position:sticky de Nosotros y Contacto siguen funcionando. */
  overflow-x:clip;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.7;
  overflow-x:hidden;   /* fallback navegadores sin `clip` */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:400; line-height:1.02; letter-spacing:-.02em; }
p{ margin:0 0 1.1em; }
ol,ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--ink); color:var(--paper); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- TIPO DISPLAY ---------- */
.h-display{
  font-size:clamp(3rem,10.5vw,8.5rem);
  font-weight:300;
  letter-spacing:-.035em;
  text-transform:lowercase;
}
.idx{
  display:block;
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--con-500);
  margin-bottom:.9rem;
}
.idx::before{ content:"— "; }
.idx--light{ color:var(--con-500); }

/* ============================================================
   PLACEHOLDERS — sistema visual
   ============================================================ */
.ph__surface{
  position:absolute; inset:0;
  background:
    linear-gradient(158deg, var(--sky-1) 0%, var(--sky-2) 45%, transparent 45.1%),
    linear-gradient(158deg, transparent 45%, var(--con-200) 45.1%, var(--con-500) 100%);
}
.ph__surface::after{
  content:"";
  position:absolute; inset:0;
  opacity:.28; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.ph__surface::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(158deg, rgba(11,11,11,.045) 0 1px, transparent 1px 22px);
}
.ph__surface--b{
  background:
    linear-gradient(202deg, var(--sky-1) 0%, var(--sky-2) 38%, transparent 38.1%),
    linear-gradient(202deg, transparent 38%, var(--con-300) 38.1%, var(--con-600) 100%);
}
.ph__surface--c{
  background:
    linear-gradient(158deg, var(--con-100) 0%, var(--con-200) 52%, transparent 52.1%),
    linear-gradient(158deg, transparent 52%, var(--con-600) 52.1%, var(--con-700) 100%);
}
.ph__surface--hero{
  background:
    linear-gradient(163deg, #E6ECF0 0%, #BFCCD6 40%, transparent 40.1%),
    linear-gradient(163deg, transparent 40%, #A79E94 40.1%, #4E4842 100%);
}
.ph__surface--tall{
  background:
    linear-gradient(196deg, var(--sky-1) 0%, var(--sky-2) 32%, transparent 32.1%),
    linear-gradient(196deg, transparent 32%, var(--con-300) 32.1%, var(--con-700) 100%);
}

.ph__tag,
.ph-block__tag,
.card__tag,
.grid__note,
[data-ph]{
  font-family:var(--sans);
  font-weight:400;
  letter-spacing:.02em;
}
.ph__tag{
  position:absolute; left:0; bottom:0;
  z-index:2;
  padding:.5rem .9rem;
  font-size:.63rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paper);
  background:var(--ink);
}
.ph__tag--hero{
  position:absolute; z-index:3;
  left:var(--pad); bottom:auto;
  top:clamp(68px,9vh,104px);
  border-bottom:0;
}

/* texto placeholder inline */
[data-ph]{
  color:var(--con-600);
  border-bottom:1px dashed var(--con-300);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.ph-inline{ border-bottom:0; color:inherit; }
.ph-inline-p{ display:block; margin:0; }

.ph-chip{
  display:inline-block;
  margin-left:.6em;
  padding:.2em .55em;
  font-family:var(--sans);
  font-size:.55rem;
  font-weight:400;
  font-style:normal;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--con-600);
  border:1px solid currentColor;
  border-radius:2px;
  vertical-align:middle;
  white-space:nowrap;
}
.ph-chip--sm{ font-size:.5rem; margin-left:.4em; }

.ph-block{
  margin:0 0 2.2rem;
  padding-left:1.1rem;
  border-left:2px solid var(--con-200);
}
.ph-block__tag{
  display:block;
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:.85rem;
}
.ph-lines i{
  display:block; height:9px;
  margin-bottom:9px;
  background:var(--con-100);
}
.ph-lines i:nth-child(2){ width:92%; }
.ph-lines i:nth-child(3){ width:97%; }

/* ============================================================
   SPLASH
   ============================================================ */
.splash{
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  background:var(--ink); color:var(--paper);
  animation:splashOut .9s var(--ease-out) 2.1s forwards;  /* red de seguridad 1: CSS */
}
.splash.is-done{ animation:none; opacity:0; visibility:hidden; pointer-events:none; }
@keyframes splashOut{
  to{ opacity:0; visibility:hidden; pointer-events:none; }
}
.mark--splash{ width:clamp(56px,11vw,96px); animation:markIn 1s var(--ease-out) both; }
@keyframes markIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.splash__bar{ width:min(180px,34vw); height:1px; background:rgba(255,255,255,.22); overflow:hidden; }
.splash__bar i{ display:block; height:100%; width:100%; background:var(--paper); transform:scaleX(0); transform-origin:left; animation:barIn 1.7s var(--ease) .15s forwards; }
@keyframes barIn{ to{ transform:scaleX(1) } }
html.no-splash .splash{ display:none; }

/* ============================================================
   MARCA (isologo SVG — reemplazar por el vector real)
   ============================================================ */
.mark{ width:34px; height:34px; color:currentColor; flex:none; }
.mark--hero{ width:clamp(66px,9vw,116px); height:auto; margin:0 auto clamp(18px,2.6vw,30px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:1.05rem var(--pad);
  color:var(--paper);
  transition:background .45s var(--ease), color .45s var(--ease), padding .45s var(--ease), box-shadow .45s var(--ease);
}
.nav.is-stuck{
  background:var(--paper);
  color:var(--ink);
  padding-block:.72rem;
  box-shadow:0 1px 0 var(--con-100);
}
.nav.is-hidden{ transform:translateY(-102%); }
.nav{ transition-property:background,color,padding,box-shadow,transform; }

.nav__brand{ display:flex; align-items:center; gap:.62rem; }
.nav__word{
  font-family:var(--serif);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
}
.nav__links{ display:none; align-items:center; gap:2.1rem; }
.nav__links a{
  position:relative;
  font-size:.74rem;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.nav__links a:hover::after,
.nav__links a.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{
  padding:.55rem 1.05rem;
  border:1px solid currentColor;
}
.nav__cta::after{ display:none; }
.nav__cta:hover{ background:currentColor; }
.nav__cta:hover span{ color:var(--paper); }
.nav.is-stuck .nav__cta:hover{ color:var(--paper); background:var(--ink); border-color:var(--ink); }
.nav:not(.is-stuck) .nav__cta:hover{ color:var(--ink); background:var(--paper); }

.nav__burger{ display:flex; flex-direction:column; justify-content:center; gap:6px; width:34px; height:34px; }
.nav__burger span{ display:block; height:1.5px; background:currentColor; transition:transform .4s var(--ease), opacity .3s; }
.nav__burger span:first-child{ width:100%; }
.nav__burger span:last-child{ width:62%; align-self:flex-end; }
body.menu-open .nav__burger span:first-child{ transform:translateY(3.75px) rotate(45deg); }
body.menu-open .nav__burger span:last-child{ width:100%; transform:translateY(-3.75px) rotate(-45deg); }
body.menu-open .nav{ color:var(--paper); background:transparent; box-shadow:none; }

/* ---------- MENU MOBILE ---------- */
.menu{
  position:fixed; inset:0; z-index:110;
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--pad) 2.4rem;
  background:var(--ink); color:var(--paper);
  clip-path:polygon(0 0,100% 0,100% 0,0 0);
  transition:clip-path .78s var(--ease-out);
  pointer-events:none;
}
body.menu-open .menu{ clip-path:polygon(0 0,100% 0,100% 100%,0 100%); pointer-events:auto; }
.menu__inner{ display:flex; flex-direction:column; gap:.35rem; }
.menu__inner a{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--serif);
  font-size:clamp(2rem,10vw,3.2rem);
  font-weight:300;
  letter-spacing:-.03em;
  text-transform:lowercase;
  opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--ease), transform .6s var(--ease-out);
}
body.menu-open .menu__inner a{ opacity:1; transform:none; }
body.menu-open .menu__inner a:nth-child(1){ transition-delay:.22s }
body.menu-open .menu__inner a:nth-child(2){ transition-delay:.28s }
body.menu-open .menu__inner a:nth-child(3){ transition-delay:.34s }
body.menu-open .menu__inner a:nth-child(4){ transition-delay:.40s }
body.menu-open .menu__inner a:nth-child(5){ transition-delay:.46s }
body.menu-open .menu__inner a:nth-child(6){ transition-delay:.52s }
.menu__inner em{
  font-family:var(--sans); font-style:normal;
  font-size:.62rem; letter-spacing:.24em; color:var(--con-500);
}
.menu__foot{
  margin-top:auto; padding-top:2.5rem;
  display:flex; flex-direction:column; gap:.35rem;
  font-size:.82rem; color:var(--con-300);
  border-top:1px solid rgba(255,255,255,.13);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  overflow:hidden;
  color:var(--paper);
  text-align:center;
  padding:7rem var(--pad) 5rem;
}
/* El sangrado -20% da margen para el parallax sin que asome el borde. */
.hero__bg{ position:absolute; inset:-20% 0; z-index:0; will-change:transform; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(11,11,11,.52) 0%, rgba(11,11,11,.12) 34%, rgba(11,11,11,.62) 100%);
}
.hero__content{ position:relative; z-index:2; max-width:920px; }
.hero__word{
  font-size:clamp(2.6rem,12.5vw,10rem);
  font-weight:300;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:.94;
}
.hero__tagline{
  margin:clamp(16px,2.4vw,26px) 0 0;
  font-size:clamp(.92rem,1.5vw,1.16rem);
  font-weight:300;
  letter-spacing:.02em;
  color:rgba(255,255,255,.9);
}
.hero__tagline .ph-chip{ color:rgba(255,255,255,.6); }
.hero__meta{
  position:absolute; z-index:2; left:var(--pad); right:var(--pad); bottom:1.9rem;
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.hero__meta .ph-chip{ color:rgba(255,255,255,.55); }
.hero__scroll{ display:flex; align-items:center; gap:.6rem; }
.hero__scroll i{
  display:block; width:1px; height:34px; background:rgba(255,255,255,.4); position:relative; overflow:hidden;
}
.hero__scroll i::after{
  content:""; position:absolute; inset:0; background:var(--paper);
  animation:scrollCue 1.9s var(--ease) infinite;
}
@keyframes scrollCue{
  0%{ transform:translateY(-100%) } 55%,100%{ transform:translateY(100%) }
}
.hero__cut{
  position:absolute; z-index:3; left:-2%; right:-2%; bottom:-1px; height:clamp(40px,7vw,110px);
  background:var(--paper);
  clip-path:polygon(0 100%, 100% 0, 100% 101%, 0 101%);
}

/* ============================================================
   STRIP / MARQUEE
   ============================================================ */
.strip{
  position:relative; z-index:4;
  margin:-1px 0 0;
  padding:0;
  background:var(--ink); color:var(--paper);
  overflow:hidden;
  transform:rotate(-1.4deg) scale(1.045);
}
.strip__track{
  display:flex; align-items:center; gap:1.6rem;
  padding:.85rem 0;
  white-space:nowrap;
  will-change:transform;
}
.strip__track span{
  font-family:var(--serif);
  font-size:clamp(.85rem,1.7vw,1.25rem);
  font-weight:300;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.strip__track i{ font-size:.55rem; color:var(--con-500); font-style:normal; }

/* ============================================================
   SECCIONES BASE
   ============================================================ */
.sec{ position:relative; padding-block:clamp(72px,11vw,168px); }
.sec--dark{ background:var(--ink); color:var(--paper); }
.sec--dark .idx{ color:var(--con-500); }
.sec__head{ margin-bottom:clamp(38px,5.5vw,76px); }
.sec__sub{
  max-width:46ch; margin-top:1.3rem;
  font-size:clamp(.95rem,1.3vw,1.1rem);
  color:var(--con-500);
}
.sec--dark .sec__sub{ color:var(--con-300); }
.sec__sub--warn{
  display:block;
  padding:.75rem 1rem;
  max-width:62ch;
  font-size:.78rem; line-height:1.55;
  border:1px dashed var(--con-300);
}
.sec__head--row{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.6rem;
}

/* ============================================================
   NOSOTROS
   ============================================================ */
.about{ display:grid; gap:clamp(30px,4vw,58px); }
.about__side{ position:relative; }
.lede{
  font-family:var(--serif);
  font-size:clamp(1.24rem,2.5vw,1.95rem);
  font-weight:300;
  line-height:1.32;
  letter-spacing:-.015em;
  margin-bottom:2.6rem;
  max-width:30ch;
}
.about__facts{
  display:grid; gap:0;
  margin-top:2.4rem;
  border-top:1px solid var(--con-100);
}
.fact{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem;
  padding:.95rem 0;
  border-bottom:1px solid var(--con-100);
}
.fact__k{ font-size:.78rem; letter-spacing:.06em; }
.fact__v{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--con-500); }

.about__fig{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 8vw));
}

/* ============================================================
   SERVICIOS
   ============================================================ */
.srv{ border-top:1px solid rgba(255,255,255,.14); }
.srv__row{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"n ico" "txt txt";
  gap:.4rem 1.2rem;
  align-items:center;
  padding:clamp(24px,3.4vw,46px) 0;
  border-bottom:1px solid rgba(255,255,255,.14);
  overflow:hidden;
}
.srv__row::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--paper);
  clip-path:polygon(0 100%, 0 100%, 0 100%, 0 100%);
  transition:clip-path .68s var(--ease-out);
}
.srv__row:hover::before{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.srv__row > *{ position:relative; z-index:1; transition:color .45s var(--ease); }
.srv__row:hover > *{ color:var(--ink); }

.srv__n{
  grid-area:n;
  font-size:.66rem; letter-spacing:.24em; color:var(--con-500);
}
.srv__ico{ grid-area:ico; justify-self:start; width:38px; }
.srv__ico svg{ width:100%; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linejoin:round; }
.srv__txt{ grid-area:txt; max-width:60ch; }
.srv__txt h3{
  font-size:clamp(1.6rem,4.6vw,3.1rem);
  font-weight:300;
  letter-spacing:-.028em;
  margin-bottom:.5rem;
}
.srv__txt p{
  font-size:.84rem; line-height:1.6; color:var(--con-300);
}
.srv__row:hover .srv__txt p{ color:var(--con-600); }
.srv__row:hover [data-ph]{ color:var(--con-600); }
.srv__arrow{
  display:none;
  font-size:1.4rem; color:var(--con-500);
  transition:transform .5s var(--ease-out), color .4s;
}
.srv__row:hover .srv__arrow{ transform:translate(6px,-6px); color:var(--ink); }

/* ============================================================
   PROYECTOS
   ============================================================ */
.filters{ display:flex; flex-wrap:wrap; gap:.4rem; }
.filters__b{
  padding:.5rem .95rem;
  font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--con-600);
  border:1px solid var(--con-200);
  transition:color .3s, background .3s, border-color .3s;
}
.filters__b:hover{ border-color:var(--ink); color:var(--ink); }
.filters__b.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.grid{ display:grid; grid-template-columns:1fr; gap:clamp(14px,2vw,26px); }
.card{
  position:relative;
  overflow:hidden;
  background:var(--con-050);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.card.is-out{ display:none; }
.card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.card__media .ph__surface{ transition:transform 1.1s var(--ease-out); }
.card:hover .card__media .ph__surface{ transform:scale(1.045); }
.card--lg .card__media{ aspect-ratio:4/5; }
.card--wide .card__media{ aspect-ratio:16/10; }
.card__info{
  padding:1.05rem 1.15rem 1.25rem;
}
.card__info h3{
  font-size:1.02rem; font-weight:400; letter-spacing:-.01em; margin-bottom:.3rem;
}
.card__info span{
  display:block;
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--con-500);
}
.card__info em{ font-style:normal; }
.card__tag{
  position:absolute; top:0; left:0; z-index:2;
  padding:.45rem .8rem;
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper); background:var(--ink);
}
.grid__note{
  display:block;
  margin:clamp(20px,3vw,34px) 0 0;
  padding:.85rem 1rem;
  max-width:70ch;
  font-size:.76rem; line-height:1.55;
  border:1px dashed var(--con-300);
}

/* ============================================================
   PROCESO
   ============================================================ */
.sec--process{ background:var(--con-050); }
.steps{ position:relative; display:grid; gap:clamp(24px,3vw,40px); padding-top:1.6rem; }
.steps__rail{
  position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--con-200);
}
.steps__rail i{ display:block; height:100%; width:0; background:var(--ink); }
.step{ padding-top:.4rem; }
.step__n{
  display:block;
  font-family:var(--serif);
  font-size:clamp(2.4rem,7vw,4.4rem);
  font-weight:300;
  line-height:1;
  color:var(--con-300);
  margin-bottom:.7rem;
}
.step h3{ font-size:1.06rem; font-weight:500; margin-bottom:.5rem; }
.step p{ font-size:.84rem; color:var(--con-600); margin:0; }

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.quotes{ display:grid; gap:clamp(16px,2.2vw,26px); }
.quote{
  position:relative;
  margin:0;
  padding:clamp(24px,3vw,40px);
  border:1px dashed var(--con-300);
}
.quote__mark{
  display:block;
  font-family:var(--serif);
  font-size:3.4rem; line-height:.6;
  color:var(--con-200);
  margin-bottom:.9rem;
}
.quote p{
  font-family:var(--serif);
  font-size:clamp(1.02rem,1.7vw,1.3rem);
  font-weight:300; line-height:1.42; letter-spacing:-.012em;
  margin-bottom:1.8rem;
  min-height:4.2em;
}
.quote footer{ display:flex; flex-direction:column; gap:.18rem; padding-top:1rem; border-top:1px solid var(--con-100); }
.quote footer span{ font-size:.8rem; }
.quote footer em{ font-style:normal; font-size:.64rem; letter-spacing:.15em; text-transform:uppercase; color:var(--con-500); }

/* ============================================================
   CONTACTO
   ============================================================ */
.sec--contact{
  background:var(--ink); color:var(--paper);
  padding-top:clamp(90px,13vw,190px);
}
.sec--contact .idx{ color:var(--con-500); }
.contact__cut{
  position:absolute; top:-1px; left:-2%; right:-2%; height:clamp(40px,7vw,110px);
  background:var(--paper);
  clip-path:polygon(0 -1%, 100% -1%, 100% 0, 0 100%);
}
.contact{ display:grid; gap:clamp(34px,4.5vw,60px); position:relative; z-index:1; }

.contact__data{ display:grid; gap:0; border-top:1px solid rgba(255,255,255,.15); }
.cdata{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.4rem;
  padding:1rem 0;
  border-bottom:1px solid rgba(255,255,255,.15);
  transition:padding-left .45s var(--ease-out), border-color .4s;
}
.cdata:hover{ padding-left:.7rem; border-color:rgba(255,255,255,.4); }
.cdata__k{ font-size:.63rem; letter-spacing:.2em; text-transform:uppercase; color:var(--con-500); }
.cdata__v{
  font-family:var(--serif);
  font-size:clamp(1rem,2.2vw,1.5rem);
  font-weight:300; letter-spacing:-.015em;
  word-break:break-word;
}
.cdata--ph .cdata__v{ font-family:var(--sans); font-size:.85rem; }

/* ---------- FORM ---------- */
.form__note{
  margin-bottom:1.9rem;
  padding:.75rem 1rem;
  font-size:.72rem; line-height:1.5;
  border:1px dashed rgba(255,255,255,.3);
  color:var(--con-300);
}
.form__note[data-ph]{ color:var(--con-300); border-bottom-style:dashed; }
.field{ position:relative; margin-bottom:1.6rem; }
.field input,
.field textarea{
  width:100%;
  padding:1.35rem 0 .55rem;
  font-family:var(--sans); font-size:.95rem; font-weight:300;
  color:var(--paper);
  background:transparent;
  border:0; border-bottom:1px solid rgba(255,255,255,.26);
  border-radius:0;
  outline:none;
  resize:vertical;
  transition:border-color .4s var(--ease);
}
.field label{
  position:absolute; left:0; top:1.3rem;
  font-size:.95rem; font-weight:300; color:var(--con-500);
  pointer-events:none;
  transition:transform .38s var(--ease-out), font-size .38s var(--ease-out), color .38s;
  transform-origin:left top;
}
.field input:focus, .field textarea:focus{ border-color:var(--paper); }
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-1.28rem);
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--con-300);
}
.field.is-bad input, .field.is-bad textarea{ border-color:var(--alert); }

.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:.8rem;
  margin-top:.4rem; padding:1rem 1.9rem;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper);
  border:1px solid rgba(255,255,255,.45);
  overflow:hidden;
}
.btn span, .btn i{ position:relative; z-index:1; transition:color .4s var(--ease); }
.btn i{ font-style:normal; transition:transform .5s var(--ease-out); }
.btn::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--paper);
  clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);
  transition:clip-path .6s var(--ease-out);
}
.btn:hover::before{ clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }
.btn:hover span, .btn:hover i{ color:var(--ink); }
.btn:hover i{ transform:translateX(5px); }
.form__status{
  margin:1.1rem 0 0; min-height:1.3em;
  font-size:.75rem; letter-spacing:.04em; color:var(--con-300);
}
.form__status.is-bad{ color:#E58A6A; }

/* ---------- MAPA ---------- */
.map{ margin:0; position:relative; border:1px solid rgba(255,255,255,.15); overflow:hidden; }
.map__svg{ width:100%; height:clamp(200px,32vw,300px); background:#131313; }
.map__grid path{ fill:none; stroke:rgba(255,255,255,.09); stroke-width:1; }
.map__grid .map__diag{ stroke:rgba(255,255,255,.055); }
.map__blocks rect{ fill:rgba(255,255,255,.055); stroke:rgba(255,255,255,.12); stroke-width:1; }
.map__pin path{ fill:var(--paper); }
.map__halo{ fill:none; stroke:rgba(255,255,255,.28); stroke-width:1; transform-origin:200px 126px; animation:halo 3.4s var(--ease) infinite; }
.map__halo--2{ animation-delay:1.1s; }
@keyframes halo{
  0%{ transform:scale(.35); opacity:0 }
  30%{ opacity:.75 }
  100%{ transform:scale(1.25); opacity:0 }
}
.map__cap{
  display:flex; flex-direction:column; gap:.3rem;
  padding:1rem 1.15rem;
  border-top:1px solid rgba(255,255,255,.15);
}
.map__cap strong{ font-family:var(--serif); font-size:1rem; font-weight:400; letter-spacing:.02em; }
.map__cap span{ font-size:.72rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--ink); color:var(--con-300); padding-top:clamp(46px,6vw,80px); }
.foot__in{
  display:grid; gap:2rem;
  padding-bottom:2.4rem;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.foot__brand{ display:flex; align-items:center; gap:.62rem; color:var(--paper); }
.foot__brand span{
  font-family:var(--serif); font-size:.78rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase;
}
.foot__nav{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.foot__nav a{ font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; transition:color .3s; }
.foot__nav a:hover{ color:var(--paper); }
.foot__ig{ display:inline-flex; align-items:center; gap:.6rem; font-size:.76rem; }
.foot__ig svg{ width:19px; fill:none; stroke:currentColor; stroke-width:1.3; }
.foot__legal{
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; justify-content:space-between;
  padding-block:1.5rem 2rem;
  font-size:.65rem; letter-spacing:.13em; text-transform:uppercase; color:var(--con-600);
}

/* ============================================================
   #mockup-toggle — BLOQUE BORRABLE EN LA VERSIÓN FINAL
   ============================================================ */
.phtoggle{
  position:fixed; left:14px; bottom:14px; z-index:200;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .82rem;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper); background:rgba(11,11,11,.86);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(8px);
  transition:background .3s, border-color .3s;
}
.phtoggle:hover{ border-color:rgba(255,255,255,.55); }
.phtoggle i{ width:7px; height:7px; background:var(--con-500); border-radius:50%; transition:background .3s; }
.phtoggle[aria-pressed="true"] i{ background:var(--alert); }
body.ph-on [data-ph]{
  background:rgba(180,68,31,.14) !important;
  color:var(--alert) !important;
  border-bottom-color:var(--alert) !important;
  outline:1px dashed var(--alert);
  outline-offset:2px;
}
body.ph-on .ph-chip{ color:var(--alert) !important; }
body.ph-on .ph__tag,
body.ph-on .card__tag{ background:var(--alert) !important; }
/* fin #mockup-toggle */

/* ============================================================
   REVEAL — con red de seguridad defensiva
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }
/* Defensiva: si el JS de split-text falla o queda cacheado viejo,
   el texto grande NUNCA queda invisible. */
.reveal[data-split]{ opacity:1; transform:none; }
.reveal[data-split] .line{ display:block; overflow:hidden; }
.reveal[data-split] .line > i{
  display:block; font-style:normal;
  transform:translateY(105%);
  transition:transform 1.05s var(--ease-out);
}
.reveal[data-split].is-in .line > i{ transform:none; }
html.no-js .reveal{ opacity:1; transform:none; }

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (min-width:600px){
  .grid{ grid-template-columns:repeat(2,1fr); }
  .card--lg{ grid-row:span 2; }
  .card--wide{ grid-column:span 2; }
  .quotes{ grid-template-columns:repeat(2,1fr); }
  .srv__row{
    grid-template-columns:auto 54px 1fr auto;
    grid-template-areas:"n ico txt arrow";
    gap:0 2rem;
    align-items:center;
  }
  .srv__arrow{ display:block; grid-area:arrow; }
  .srv__ico{ width:44px; }
  .foot__in{ grid-template-columns:auto 1fr auto; align-items:center; gap:2.6rem; }
  .foot__nav{ justify-content:center; }
}

@media (min-width:900px){
  html{ scroll-padding-top:92px; }
  .nav__links{ display:flex; }
  .nav__burger{ display:none; }
  .menu{ display:none; }

  .about{
    grid-template-columns:minmax(180px,1fr) minmax(0,1.55fr) minmax(220px,.95fr);
    gap:clamp(30px,4vw,72px);
    align-items:start;
  }
  .about__side{ position:sticky; top:120px; }
  .about__side .h-display{ font-size:clamp(2.6rem,5.4vw,5rem); }

  .steps{ grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.6vw,44px); }

  .quotes{ grid-template-columns:repeat(3,1fr); }

  .grid{ grid-template-columns:repeat(3,1fr); }
  .card--lg{ grid-column:span 1; grid-row:span 2; }
  .card--wide{ grid-column:span 2; }

  .contact{
    grid-template-columns:minmax(200px,.85fr) minmax(0,1.15fr) minmax(0,1fr);
    grid-template-areas:
      "lead data form"
      "map  map  form";
    gap:clamp(34px,3.6vw,64px) clamp(30px,4vw,70px);
    align-items:start;
  }
  .contact__lead{ grid-area:lead; position:sticky; top:120px; }
  .contact__lead .h-display{ font-size:clamp(2.4rem,5vw,4.6rem); }
  .contact__data{ grid-area:data; }
  .form{ grid-area:form; }
  .map{ grid-area:map; }
}

@media (min-width:1200px){
  .sec__head .h-display{ font-size:clamp(4rem,8.4vw,8rem); }
}

/* ---------- Accesibilidad: sólo se apagan efectos intrusivos ---------- */
@media (prefers-reduced-motion:reduce){
  .strip__track{ animation:none !important; transform:none !important; }
  .hero__scroll i::after{ animation:none; }
  .map__halo{ animation:none; opacity:.4; }
}

/* ---------- Impresión ---------- */
@media print{
  .nav,.menu,.phtoggle,.splash,.strip{ display:none !important; }
  .sec--dark,.sec--contact,.foot{ background:#fff !important; color:#000 !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}