/* ═══════════════════════════════════════════════════
   DINNBIER DENTAL by AIVORIQ — style.css
   Aesthetic: precision / blueprint · corner brackets
   diagonal cuts · measurement marks · crosshairs
   Completely distinct from all previous AIVORIQ sites
   ═══════════════════════════════════════════════════ */

/* ── ANTIQUE LEGACY ── */
@font-face{font-family:'Antique Legacy';src:url('../fonts/Antique-Legacy-Thin/AntiqueLegacy-Thin.woff2')format('woff2');font-weight:100;font-display:swap}
@font-face{font-family:'Antique Legacy';src:url('../fonts/Antique-Legacy-Light/AntiqueLegacy-Light.woff2')format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Antique Legacy';src:url('../fonts/Antique-Legacy-Light-Italic/AntiqueLegacy-LightItalic.woff2')format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Antique Legacy';src:url('../fonts/Antique-Legacy-Regular/AntiqueLegacy-Regular.woff2')format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Antique Legacy';src:url('../fonts/Antique-Legacy-Italic/AntiqueLegacy-Italic.woff2')format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Antique Legacy';src:url('../fonts/Antique-Legacy-Medium/AntiqueLegacy-Medium.woff2')format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Antique Legacy';src:url('../fonts/Antique-Legacy-Bold/AntiqueLegacy-Bold.woff2')format('woff2');font-weight:700;font-display:swap}

/* ── THEINHARDT MONO ── */
@font-face{font-family:'Theinhardt Mono';src:url('../fonts/Theinhardt-Mono-Regular/TheinhardtMono-Regular.woff2')format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Theinhardt Mono';src:url('../fonts/Theinhardt-Mono-Medium/TheinhardtMono-Medium.woff2')format('woff2');font-weight:500;font-display:swap}

/* ═══════════════════════════════════════════════════
   VARIABLES
   ═══════════════════════════════════════════════════ */
:root{
  --at:#C16950;
  --iv:#FCF9EE;
  --mn:#757A82;
  --lq:#E5E3DD;
  --wh:#FFFFFF;
  --bk:#000000;
  --dk:#0A0A0A;
  --gr:#F4F2EC;
  --f:'Antique Legacy',Arial,sans-serif;
  --m:'Theinhardt Mono','Courier New',monospace;
  --ease:cubic-bezier(.25,.46,.45,.94);
  --spring:cubic-bezier(.16,1,.3,1);
}

/* ═══════════════════════════════════════════════════
   RESET
   ═══════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--f);
  background:var(--wh);
  color:var(--bk);
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  font-weight:300;
  line-height:1.6;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
video{display:block;width:100%}
h1,h2,h3,h4,h5{font-family:var(--f);font-weight:300;line-height:1.15}

.container{max-width:1280px;margin:0 auto;padding:0 32px}
.section{padding:96px 0;position:relative}

/* ═══════════════════════════════════════════════════
   CORNER BRACKETS — elemento distintivo, tipo mira
   de cámara / precisión óptica
   ═══════════════════════════════════════════════════ */
.brackets{position:relative}
.brackets::before,
.brackets::after,
.brackets .bk-tr,
.brackets .bk-bl{
  content:'';
  position:absolute;
  width:18px;height:18px;
  border:1.5px solid var(--at);
  z-index:3;
}
.brackets::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.brackets::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.brackets .bk-tr{top:-1px;right:-1px;border-left:none;border-bottom:none}
.brackets .bk-bl{bottom:-1px;left:-1px;border-right:none;border-top:none}

/* ═══════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════ */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:200;
  height:76px;
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 36px;
  transition:box-shadow .3s;
}
.nav.scrolled{box-shadow:0 4px 24px rgba(0,0,0,.3)}

.nav-logo{display:flex;align-items:center;gap:12px}
.nav-logo-img{height:62px;width:auto;flex-shrink:0;object-fit:contain}

.nav-wordmark{display:flex;flex-direction:column;gap:1px;line-height:1}
.nav-wordmark strong{
  font-family:var(--f);
  font-weight:500;
  font-size:16px;
  letter-spacing:2px;
  color:var(--iv);
  text-transform:uppercase;
}
.nav-wordmark small{
  font-family:var(--m);
  font-size:8px;
  letter-spacing:1.5px;
  color:var(--at);
  text-transform:uppercase;
}

.nav-links{display:flex;align-items:center;gap:30px;list-style:none}
.nav-links>li{position:relative}
.nav-links>li>a{
  font-size:13px;
  font-weight:400;
  letter-spacing:.3px;
  color:rgba(252,249,238,.65);
  transition:color .2s;
  padding:8px 0;
  display:inline-block;
}
.nav-links>li>a:hover,.nav-links>li>a.active{color:var(--at)}

.nav-drop{
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:var(--dk);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 14px 40px rgba(0,0,0,.4);
  min-width:180px;
  padding:6px 0;
  list-style:none;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s var(--spring);
  border-top:2px solid var(--at);
}
.nav-drop::before{
  content:'';
  position:absolute;
  top:-12px;
  left:0;
  right:0;
  height:12px;
  pointer-events:auto;
}
.nav-links>li:hover .nav-drop{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)}
.nav-drop li a{display:block;padding:10px 20px;font-size:13px;color:rgba(252,249,238,.6);transition:background .15s,color .15s}
.nav-drop li a:hover{background:rgba(255,255,255,.06);color:var(--at)}

.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none}
.nav-burger span{display:block;width:22px;height:2px;background:var(--iv);transition:.3s}

.nav-mobile{
  display:none;
  position:fixed;
  top:76px;left:0;right:0;
  background:var(--dk);
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 10px 32px rgba(0,0,0,.4);
  padding:24px 24px 32px;
  flex-direction:column;
  gap:6px;
  z-index:199;
  max-height:calc(100vh - 76px);
  overflow-y:auto;
}
.nav-mobile.open{display:flex}
.nav-mobile a{font-size:15px;color:rgba(252,249,238,.7);padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.nav-mobile .nav-mobile-sub{padding-left:16px}
.nav-mobile .nav-mobile-sub a{font-size:13px;color:rgba(252,249,238,.4)}

/* ═══════════════════════════════════════════════════
   HERO — diagonal split con crosshair y ticks
   ═══════════════════════════════════════════════════ */
.hero{
  min-height:100vh;
  padding-top:76px;
  position:relative;
  display:flex;
  align-items:stretch;
  background:var(--wh);
  overflow:hidden;
}

.hero-text{
  flex:0 0 46%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:64px 56px 64px 64px;
  position:relative;
  z-index:2;
}

.hero-img{
  flex:1;
  position:relative;
  overflow:hidden;
  clip-path:polygon(8% 0,100% 0,100% 100%,0 100%);
}
.hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.hero-img::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,rgba(10,10,10,.5) 0%,transparent 35%);
}

/* Ticks tipo regla técnica */
.hero-ticks{
  position:absolute;
  left:0;top:0;bottom:0;
  width:28px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:100px 0 40px;
  z-index:2;
}
.hero-ticks span{display:block;width:12px;height:1px;background:rgba(0,0,0,.15)}
.hero-ticks span:nth-child(5n+1){width:20px;background:var(--at)}

.hero-kicker{
  font-family:var(--m);
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--at);
  margin-bottom:28px;
  display:flex;
  align-items:center;
  gap:12px;
}
.hero-kicker::before{content:'';display:block;width:8px;height:8px;border:1px solid var(--at);transform:rotate(45deg)}

.hero-title{
  font-size:clamp(38px,5.5vw,72px);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-1.5px;
  color:var(--bk);
  margin-bottom:28px;
}
.hero-title em{font-style:italic;font-weight:300;color:var(--at)}

.hero-desc{
  font-size:16px;
  font-weight:300;
  color:rgba(0,0,0,.55);
  line-height:1.75;
  max-width:440px;
  margin-bottom:36px;
}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}

.hero-coords{
  display:flex;
  gap:0;
  font-family:var(--m);
  font-size:10px;
  letter-spacing:1px;
  color:rgba(0,0,0,.35);
  border-top:1px solid rgba(0,0,0,.1);
  padding-top:20px;
}
.hero-coords span{padding-right:24px}

/* ═══════════════════════════════════════════════════
   HOME BANNER — foto full-bleed + overlay negro + título centrado
   ═══════════════════════════════════════════════════ */
.home-banner{
  min-height:100vh;
  padding-top:76px;
  position:relative;
  background:var(--bk);
  overflow:hidden;
}
.home-banner-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  z-index:1;
  transition:opacity 1.2s var(--ease);
  pointer-events:none;
}
.home-banner-slide.is-active{opacity:1;z-index:2;pointer-events:auto}
.home-banner-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.home-banner-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.72) 60%,rgba(0,0,0,.85) 100%);
}
.home-banner-puzzle{
  position:absolute;
  inset:0;
  display:grid;
  pointer-events:none;
}
.hb-piece{
  position:relative;
  overflow:hidden;
  background-repeat:no-repeat;
  opacity:0;
  transform:translate(var(--tx,0),var(--ty,0)) rotate(var(--rot,0deg)) scale(.82);
  transition:opacity .5s var(--ease),transform .85s var(--spring);
  will-change:transform,opacity;
}
.hb-piece.is-in{opacity:1;transform:translate(0,0) rotate(0deg) scale(1)}
.home-banner-content{
  position:relative;
  z-index:2;
  text-align:center;
  padding:64px 32px;
  max-width:960px;
}
.home-banner-kicker{
  font-family:var(--m);
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--at);
  margin-bottom:28px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  opacity:0;
  animation:bannerIn .8s var(--spring) .4s forwards;
}
.home-banner-kicker::before,.home-banner-kicker::after{content:'';display:block;width:8px;height:8px;border:1px solid var(--at);transform:rotate(45deg)}
.home-banner-title{
  font-family:var(--f);
  font-weight:300;
  font-size:clamp(28px,4.6vw,58px);
  letter-spacing:1px;
  line-height:1.2;
  color:var(--iv);
  text-transform:uppercase;
  margin-bottom:44px;
  opacity:0;
  animation:bannerIn 1s var(--spring) .6s forwards;
}
.home-banner-dash{color:var(--at);margin:0 18px;font-style:italic}
.home-banner-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  opacity:0;
  animation:bannerIn .8s var(--spring) .95s forwards;
}

@keyframes bannerIn{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}

.home-banner-dots{
  position:absolute;
  left:50%;
  bottom:36px;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  gap:12px;
}
.home-banner-dot{
  width:36px;height:16px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  position:relative;
}
.home-banner-dot::before{content:'';position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);background:rgba(255,255,255,.3)}
.home-banner-dot::after{content:'';position:absolute;left:0;top:50%;height:2px;width:0;transform:translateY(-50%);background:var(--at);transition:width .35s var(--ease)}
.home-banner-dot.is-active::after{width:100%}

.home-banner-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:52px;height:52px;
  border-radius:50%;
  background:var(--bk);
  border:1px solid rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .3s,border-color .3s;
}
.home-banner-arrow:hover{background:var(--at);border-color:var(--at)}
.home-banner-arrow--prev{left:24px}
.home-banner-arrow--next{right:24px}
.home-banner-arrow span{
  display:block;
  width:9px;height:9px;
  border-top:2px solid var(--iv);
  border-right:2px solid var(--iv);
  transition:border-color .3s;
}
.home-banner-arrow--prev span{transform:rotate(-135deg);margin-left:4px}
.home-banner-arrow--next span{transform:rotate(45deg);margin-right:4px}
.home-banner-arrow:hover span{border-color:var(--bk)}

/* ═══════════════════════════════════════════════════
   TIPOGRAFÍA GLOBAL
   ═══════════════════════════════════════════════════ */
.kicker{
  font-family:var(--m);
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--at);
  margin-bottom:18px;
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.kicker::before{content:'';display:block;width:8px;height:8px;border:1px solid var(--at);transform:rotate(45deg)}
.kicker--light{color:rgba(252,249,238,.7)}
.kicker--light::before{border-color:var(--at)}

.sec-title{
  font-size:clamp(30px,4.5vw,56px);
  font-weight:300;
  letter-spacing:-1px;
  line-height:1.08;
}
.sec-title em{font-style:italic;color:var(--at)}
.sec-title strong{font-weight:500}

.sec-desc{
  font-size:16px;
  font-weight:300;
  color:rgba(0,0,0,.55);
  line-height:1.75;
  max-width:600px;
}

.section--dark{background:var(--dk);color:var(--iv)}
.section--dark .sec-title{color:var(--iv)}
.section--dark .sec-desc{color:rgba(252,249,238,.55)}
.section--gr{background:var(--gr)}
.section--at{background:var(--at)}

/* ═══════════════════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════════════════ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--m);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:15px 28px;
  cursor:pointer;
  border:none;
  transition:all .25s var(--ease);
  position:relative;
}
.btn-cross{
  display:block;
  width:10px;height:10px;
  position:relative;
  flex-shrink:0;
}
.btn-cross::before,.btn-cross::after{content:'';position:absolute;background:currentColor}
.btn-cross::before{width:10px;height:1px;top:50%;left:0;transform:translateY(-50%)}
.btn-cross::after{width:1px;height:10px;left:50%;top:0;transform:translateX(-50%)}
.btn:hover .btn-cross{transform:rotate(90deg)}

.btn--bk{background:var(--bk);color:var(--wh)}
.btn--bk:hover{background:var(--at);color:var(--bk)}
.btn--at{background:var(--at);color:var(--bk)}
.btn--at:hover{background:var(--bk);color:var(--wh)}
.btn--out{background:transparent;color:var(--bk);border:1.5px solid var(--bk)}
.btn--out:hover{background:var(--bk);color:var(--wh)}
.btn--out-l{background:transparent;color:var(--wh);border:1.5px solid rgba(255,255,255,.3)}
.btn--out-l:hover{background:var(--wh);color:var(--bk);border-color:var(--wh)}

/* ═══════════════════════════════════════════════════
   DIAGONAL DIVIDER — entre secciones
   ═══════════════════════════════════════════════════ */
.diag-divider{
  height:64px;
  position:relative;
  overflow:hidden;
}
.diag-divider svg{width:100%;height:100%;display:block}

/* ═══════════════════════════════════════════════════
   TARJETAS ENTRADA — home 3 cards, sin imagen
   ═══════════════════════════════════════════════════ */
.services-section{padding-top:0;padding-bottom:0;background:var(--dk)}
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(255,255,255,.06);
}
.service-card{
  background:var(--dk);
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:420px;
  padding:44px 44px 40px;
  overflow:hidden;
  isolation:isolate;
  transition:background .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
}
.service-card:hover{
  background:#111;
  transform:translateY(-6px);
  box-shadow:0 30px 60px rgba(0,0,0,.45);
  z-index:2;
}

.service-card-ghost{
  position:absolute;
  right:-10px;top:-40px;
  font-family:var(--m);
  font-size:170px;
  font-weight:500;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.08);
  z-index:0;
  transition:color .5s,-webkit-text-stroke-color .5s,transform .5s var(--ease);
  pointer-events:none;
}
.service-card:hover .service-card-ghost{-webkit-text-stroke-color:rgba(193,105,80,.4);transform:translateY(6px)}

.service-card-bar{
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--at);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .5s var(--ease);
}
.service-card:hover .service-card-bar{transform:scaleY(1)}

.service-card-num{
  position:relative;
  z-index:1;
  font-family:var(--m);
  font-size:11px;
  letter-spacing:2px;
  color:var(--at);
  margin-bottom:56px;
}
.service-card-icon{
  position:relative;
  z-index:1;
  width:58px;height:58px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:26px;
  transition:border-color .4s,background .4s,transform .4s var(--ease);
}
.service-card:hover .service-card-icon{border-color:var(--at);background:var(--at);transform:scale(1.08)}
.service-card-icon::before{content:'';background:var(--at);transition:background .4s}
.service-card:hover .service-card-icon::before{background:var(--bk)}
.service-card--work .service-card-icon::before{width:16px;height:16px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.service-card--design .service-card-icon::before{width:14px;height:14px;border:1.5px solid var(--at);background:transparent;transform:rotate(45deg);transition:border-color .4s}
.service-card:hover .service-card--design .service-card-icon::before,
.service-card--design:hover .service-card-icon::before{border-color:var(--bk)}
.service-card--esthetics .service-card-icon::before{width:14px;height:14px;border-radius:50%;background:transparent;border:1.5px solid var(--at);transition:border-color .4s}
.service-card--esthetics:hover .service-card-icon::before{border-color:var(--bk)}

.service-card-title{
  position:relative;
  z-index:1;
  font-size:27px;
  font-weight:300;
  letter-spacing:-.3px;
  color:var(--iv);
  margin-bottom:14px;
}
.service-card-desc{
  position:relative;
  z-index:1;
  font-size:14px;
  font-weight:300;
  color:rgba(252,249,238,.5);
  line-height:1.75;
  margin-bottom:30px;
}
.service-card-link{
  position:relative;
  z-index:1;
  font-family:var(--m);
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--iv);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
  transition:color .3s,gap .3s;
}
.service-card:hover .service-card-link{color:var(--at);gap:14px}
.service-card:hover .service-card-link .btn-cross{transform:rotate(90deg)}

/* ═══════════════════════════════════════════════════
   NOSOTROS INTRO
   ═══════════════════════════════════════════════════ */
.about-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.about-split-img{position:relative;aspect-ratio:4/5;overflow:hidden}
.about-split-img img{width:100%;height:100%;object-fit:cover;object-position:center top}
.about-split-text p{
  font-size:15px;
  font-weight:300;
  color:rgba(0,0,0,.6);
  line-height:1.85;
  margin-bottom:16px;
}
.about-split-text p strong{color:var(--bk);font-weight:500}

/* ═══════════════════════════════════════════════════
   NOSOTROS — banner claro home (sin foto)
   ═══════════════════════════════════════════════════ */
.about-banner{padding:72px 0;background:var(--wh)}
.about-banner-wrap{
  max-width:900px;
  margin:0 auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.about-banner-wrap .kicker{justify-content:center}
.about-banner-stats{
  display:flex;
  gap:0;
  flex-wrap:wrap;
  justify-content:center;
  font-family:var(--m);
  font-size:10px;
  letter-spacing:1px;
  color:rgba(0,0,0,.4);
  border-top:1px solid rgba(0,0,0,.1);
  margin:32px 0 36px;
  padding-top:20px;
}
.about-banner-stats span{padding:0 16px;position:relative}
.about-banner-stats span+span::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:1px;background:rgba(0,0,0,.12)}

/* ═══════════════════════════════════════════════════
   SOFTWARE / MATERIALES CHIPS
   ═══════════════════════════════════════════════════ */
.chips-row{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}
.chip{
  font-family:var(--m);
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:9px 16px;
  border:1px solid rgba(0,0,0,.15);
  color:rgba(0,0,0,.55);
  transition:all .2s;
}
.chip:hover{border-color:var(--at);color:var(--at)}
.chip--dark{border-color:rgba(252,249,238,.2);color:rgba(252,249,238,.6)}
.chip--dark:hover{border-color:var(--at);color:var(--at)}

/* ═══════════════════════════════════════════════════
   GALERÍA — masonry con lightbox
   ═══════════════════════════════════════════════════ */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:2px;
}
.gallery-item{
  aspect-ratio:1/1;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  background:#111;
}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);filter:grayscale(15%)}
.gallery-item:hover img{transform:scale(1.08);filter:grayscale(0)}
.gallery-item-mark{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  background:rgba(193,105,80,.25);
  transition:opacity .25s;
}
.gallery-item:hover .gallery-item-mark{opacity:1}
.gallery-item-mark::before,.gallery-item-mark::after{content:'';position:absolute;background:var(--wh)}
.gallery-item-mark::before{width:20px;height:1.5px}
.gallery-item-mark::after{width:1.5px;height:20px}

#lb{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(8,8,8,.96);
  z-index:999;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
#lb.on{display:flex}
#lb img{max-width:90vw;max-height:88vh;object-fit:contain}
#lb-close{
  position:absolute;
  top:24px;right:32px;
  font-family:var(--m);
  font-size:12px;
  letter-spacing:2px;
  color:var(--iv);
  text-transform:uppercase;
}

/* ═══════════════════════════════════════════════════
   TIMELINE — Javier Ortolá CV
   ═══════════════════════════════════════════════════ */
.timeline{position:relative;padding-left:32px}
.timeline::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:1px;background:rgba(0,0,0,.12)}
.timeline-item{position:relative;padding-bottom:26px}
.timeline-item::before{
  content:'';
  position:absolute;
  left:-32px;top:6px;
  width:7px;height:7px;
  background:var(--at);
  transform:translateX(-3px);
}
.timeline-item strong{color:var(--bk);font-weight:500}
.timeline-item p{font-size:14px;font-weight:300;color:rgba(0,0,0,.6);line-height:1.7}

/* ═══════════════════════════════════════════════════
   PRODUCTO SOLUCIÓN — hero de página Y·producto
   ═══════════════════════════════════════════════════ */
.prod-hero{
  padding:150px 0 80px;
  background:var(--gr);
  position:relative;
  overflow:hidden;
}
.prod-hero-tag{
  font-family:var(--m);
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--at);
  margin-bottom:20px;
  display:flex;
  align-items:center;
  gap:12px;
}
.prod-hero-tag::before{content:'';display:block;width:28px;height:1px;background:var(--at)}
.prod-hero-title{
  font-size:clamp(40px,6.5vw,88px);
  font-weight:300;
  letter-spacing:-2px;
  line-height:.95;
  max-width:820px;
}
.prod-hero-title em{font-style:italic;color:var(--at)}
.prod-hero-desc{
  font-size:17px;
  font-weight:300;
  color:rgba(0,0,0,.55);
  max-width:600px;
  line-height:1.75;
  margin-top:24px;
}

.prod-features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(0,0,0,.07);
}
.prod-features--5{grid-template-columns:repeat(5,1fr)}
.prod-feature{
  background:var(--wh);
  padding:44px 36px;
  transition:background .25s;
}
.prod-feature:hover{background:var(--gr)}
.prod-feature-icon{
  width:38px;height:38px;
  border:1.5px solid var(--at);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
  position:relative;
}
.prod-feature-icon::before{content:'';width:12px;height:12px;background:var(--at);clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}
.prod-feature-title{font-size:19px;font-weight:400;color:var(--bk);margin-bottom:12px}
.prod-feature-desc{font-size:14px;font-weight:300;color:rgba(0,0,0,.55);line-height:1.7}

/* ═══════════════════════════════════════════════════
   CASOS CLÍNICOS — grid con etiqueta
   ═══════════════════════════════════════════════════ */
.casos-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:rgba(0,0,0,.06);
}
.caso-card{
  background:var(--wh);
  position:relative;
  overflow:hidden;
  display:block;
  aspect-ratio:1/1;
}
.caso-card-img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);filter:brightness(.85)}
.caso-card:hover .caso-card-img{transform:scale(1.06);filter:brightness(.6)}
.caso-card-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:20px;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,transparent 55%);
}
.caso-card-tag{font-family:var(--m);font-size:9px;letter-spacing:1.5px;color:var(--at);text-transform:uppercase;margin-bottom:6px}
.caso-card-title{font-size:15px;font-weight:400;color:var(--iv);line-height:1.35}

/* ═══════════════════════════════════════════════════
   NOTICIAS
   ═══════════════════════════════════════════════════ */
.noticias-list{border-top:1px solid rgba(0,0,0,.08)}
.noticia-row{
  display:grid;
  grid-template-columns:120px 1fr auto;
  gap:28px;
  align-items:center;
  padding:28px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
  transition:background .2s;
}
.noticia-row:hover{background:var(--gr)}
.noticia-date{font-family:var(--m);font-size:11px;letter-spacing:1px;color:var(--at)}
.noticia-title{font-size:18px;font-weight:400;color:var(--bk);line-height:1.4}
.noticia-arrow{font-family:var(--m);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(0,0,0,.35)}
.noticia-row:hover .noticia-arrow{color:var(--at)}
.section--dark .noticia-row:hover{background:rgba(255,255,255,.06)}

/* Página de noticia: lateral + artículo */
.page-hero-title--sm{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.8px;line-height:1.12;max-width:900px}
.noticia-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:72px;align-items:start}
.noticia-aside{position:sticky;top:110px}
.noticia-aside-head{display:block;font-family:var(--m);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--at);padding-bottom:16px;border-bottom:1px solid rgba(0,0,0,.08)}
.noticia-aside-item{display:grid;grid-template-columns:80px 1fr;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.noticia-aside-item img{width:80px;height:80px;object-fit:cover;background:var(--gr)}
.noticia-aside-item img.is-contain{object-fit:contain;padding:6px}
.noticia-aside-date{display:block;font-family:var(--m);font-size:10px;letter-spacing:1px;color:var(--at);margin-bottom:4px}
.noticia-aside-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;font-weight:400;color:var(--bk);line-height:1.4;transition:color .2s}
.noticia-aside-item:hover .noticia-aside-title{color:var(--at)}
.noticia-aside-all{display:inline-block;margin-top:18px;font-family:var(--m);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(0,0,0,.45)}
.noticia-aside-all:hover{color:var(--at)}
.noticia-body{max-width:780px}
.noticia-body p{font-size:16px;color:rgba(0,0,0,.68);line-height:1.8;margin-bottom:20px}
.noticia-body h3{font-size:19px;font-weight:400;line-height:1.5;margin:8px 0 20px}
.noticia-body strong{font-weight:500;color:var(--bk)}
.noticia-body p a{color:var(--at);border-bottom:1px solid currentColor;word-break:break-word}
.noticia-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px;margin:28px 0}
.noticia-figure{margin:28px 0}
.noticia-figure img{width:100%;height:auto}
.noticia-embed{position:relative;padding-top:62.8%;margin:28px 0;background:var(--gr)}
.noticia-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.noticia-back{display:inline-block;margin-top:24px;font-family:var(--m);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--at)}

/* ═══════════════════════════════════════════════════
   CONTACTO
   ═══════════════════════════════════════════════════ */
.contacto-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:0;background:var(--wh)}
.contacto-info{padding:64px 88px;background:var(--gr);display:flex;flex-direction:column;gap:28px}
.contacto-info h2{font-size:clamp(28px,4vw,44px);font-weight:300;letter-spacing:-1px;line-height:1.08}
.contacto-info h2 em{font-style:italic;color:var(--at)}
.contacto-info>p{font-size:15px;font-weight:300;color:rgba(0,0,0,.55);line-height:1.7}
.contacto-data{padding:20px 0;border-top:1px solid rgba(0,0,0,.1)}
.contacto-data-label{font-family:var(--m);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--at);margin-bottom:8px}
.contacto-data-val{font-size:15px;font-weight:400;color:var(--bk)}
.contacto-data-val a{color:var(--bk);transition:color .2s}
.contacto-data-val a:hover{color:var(--at)}
.contacto-social{display:flex;gap:8px;margin-top:8px}
.contacto-social a{
  width:36px;height:36px;
  border:1px solid rgba(0,0,0,.15);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--m);
  font-size:9px;
  transition:all .2s;
}
.contacto-social a:hover{background:var(--at);color:var(--bk);border-color:var(--at)}
.mapa-iframe{width:100%;height:260px;border:none;display:block;filter:grayscale(20%);margin-top:8px}

.video-embed{position:relative;width:100%;padding-top:56.25%;overflow:hidden;background:var(--dk);border:1px solid var(--lq)}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:none;display:block}

.contacto-form-wrap{padding:64px 88px;background:var(--wh)}
.contacto-form-wrap h3{font-size:clamp(22px,2.6vw,32px);font-weight:300;letter-spacing:-.5px;margin-bottom:8px}
.contacto-form-wrap>p{font-size:14px;font-weight:300;color:rgba(0,0,0,.5);line-height:1.65;margin-bottom:32px}

.ff{margin-bottom:20px}
.ff label{display:block;font-family:var(--m);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(0,0,0,.4);margin-bottom:8px}
.ff input,.ff textarea,.ff select{
  width:100%;border:none;border-bottom:1.5px solid rgba(0,0,0,.15);background:transparent;
  padding:11px 0;font-family:var(--f);font-size:15px;font-weight:300;color:var(--bk);
  outline:none;transition:border-color .2s;border-radius:0;-webkit-appearance:none;
}
.ff input:focus,.ff textarea:focus,.ff select:focus{border-color:var(--at)}
.ff textarea{min-height:100px;resize:none}
.ff-2{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.ff-check{display:flex;align-items:flex-start;gap:10px;margin:20px 0 24px}
.ff-check input{width:auto;margin-top:3px;accent-color:var(--at);cursor:pointer}
.ff-check label{font-size:12px;font-weight:300;color:rgba(0,0,0,.45);line-height:1.6;cursor:pointer}
.ff-check label a{color:var(--at)}

.form-msg{padding:14px 18px;margin-bottom:20px;font-family:var(--m);font-size:11px;letter-spacing:1px;display:none}
.form-msg.success{background:rgba(42,138,90,.1);color:#2a8a5a;border-left:3px solid #2a8a5a;display:block}
.form-msg.error{background:rgba(193,105,80,.1);color:var(--at);border-left:3px solid var(--at);display:block}

/* ═══════════════════════════════════════════════════
   PEDIDO
   ═══════════════════════════════════════════════════ */
.pedido-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:rgba(0,0,0,.07)}
.pedido-card{background:var(--wh);padding:48px 40px;display:flex;flex-direction:column;gap:20px}
.pedido-card-icon{width:44px;height:44px;border:1.5px solid var(--at);display:flex;align-items:center;justify-content:center;position:relative}
.pedido-card-icon::before{content:'↓';font-family:var(--m);font-size:16px;color:var(--at)}
.pedido-card h3{font-size:22px;font-weight:400;color:var(--bk)}
.pedido-card p{font-size:14px;font-weight:300;color:rgba(0,0,0,.55);line-height:1.7;flex:1}

/* ═══════════════════════════════════════════════════
   LEGAL PAGES
   ═══════════════════════════════════════════════════ */
.legal-content{max-width:860px;margin:0 auto;padding:0 32px}
.legal-content h2{font-size:clamp(22px,2.6vw,32px);font-weight:300;letter-spacing:-.3px;margin:44px 0 16px;color:var(--bk)}
.legal-content h2:first-child{margin-top:0}
.legal-content h3{font-size:17px;font-weight:500;margin:26px 0 10px;color:var(--at)}
.legal-content p{font-size:15px;font-weight:300;color:rgba(0,0,0,.65);line-height:1.85;margin-bottom:14px}
.legal-content ul{margin:14px 0 18px 22px}
.legal-content li{font-size:15px;font-weight:300;color:rgba(0,0,0,.65);line-height:1.8;margin-bottom:8px}
.legal-content a{color:var(--at)}
.legal-meta{
  font-family:var(--m);font-size:11px;letter-spacing:1px;color:rgba(0,0,0,.35);
  border-left:2px solid var(--at);padding-left:14px;margin-bottom:32px;
}

/* ═══════════════════════════════════════════════════
   PAGE HERO (interior sencillo)
   ═══════════════════════════════════════════════════ */
.page-hero{padding:150px 32px 64px;background:var(--gr);border-bottom:1px solid rgba(0,0,0,.05)}
.page-hero-wrap{max-width:1280px;margin:0 auto}
.page-hero-tag{font-family:var(--m);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--at);margin-bottom:20px;display:flex;align-items:center;gap:12px}
.page-hero-tag::before{content:'';display:block;width:28px;height:1px;background:var(--at)}
.page-hero-title{font-size:clamp(36px,5.5vw,68px);font-weight:300;letter-spacing:-1.5px;line-height:1.02;max-width:760px}
.page-hero-title em{font-style:italic;color:var(--at)}
.page-hero-desc{font-size:16px;font-weight:300;color:rgba(0,0,0,.5);max-width:600px;line-height:1.75;margin-top:20px}

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */
.footer{background:var(--dk);color:var(--iv);padding:64px 0 0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding:0 32px 40px;max-width:1280px;margin:0 auto;border-bottom:1px solid rgba(255,255,255,.07)}
.footer-logo-row{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.footer-logo-img{height:54px;width:auto;object-fit:contain}
.footer-name{font-family:var(--f);font-weight:500;font-size:16px;letter-spacing:2px;text-transform:uppercase;color:var(--iv)}
.footer-byline{font-family:var(--m);font-size:9px;letter-spacing:2px;color:var(--at);text-transform:uppercase;margin-bottom:14px;display:block}
.footer-tagline{font-size:13px;font-weight:300;color:rgba(252,249,238,.4);line-height:1.7;max-width:300px}
.footer-col h5{font-family:var(--m);font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--at);margin-bottom:20px}
.footer-col a,.footer-col p{display:block;font-size:13px;font-weight:300;color:rgba(252,249,238,.45);line-height:2.1;transition:color .2s}
.footer-col a:hover{color:var(--iv)}
.footer-social{display:flex;gap:8px;margin-top:8px}
.footer-social a{width:34px;height:34px;border:1px solid rgba(252,249,238,.15);display:inline-flex;align-items:center;justify-content:center;font-family:var(--m);font-size:9px;transition:all .2s}
.footer-social a:hover{background:var(--at);color:var(--bk);border-color:var(--at)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:18px 32px;flex-wrap:wrap;gap:10px;max-width:1280px;margin:0 auto}
.footer-copy{font-family:var(--m);font-size:9px;letter-spacing:1px;color:rgba(252,249,238,.22)}
.footer-copy a{color:rgba(252,249,238,.4)}
.footer-copy a:hover{color:var(--at)}

/* ═══════════════════════════════════════════════════
   REVEAL
   ═══════════════════════════════════════════════════ */
.rev{opacity:0;transform:translateY(22px);transition:opacity .65s var(--spring),transform .65s var(--spring)}
.rev.in{opacity:1;transform:none}

.rev-l{opacity:0;transform:translateX(-52px);transition:opacity .75s var(--spring),transform .75s var(--spring)}
.rev-l.in{opacity:1;transform:none}

.rev-r{opacity:0;transform:translateX(52px);transition:opacity .75s var(--spring),transform .75s var(--spring)}
.rev-r.in{opacity:1;transform:none}

.rev-scale{opacity:0;transform:scale(.9);transition:opacity .7s var(--spring),transform .7s var(--spring)}
.rev-scale.in{opacity:1;transform:none}

.rev-fade{opacity:0;transition:opacity 1s var(--ease)}
.rev-fade.in{opacity:1}

.d1{transition-delay:.08s}
.d2{transition-delay:.16s}
.d3{transition-delay:.24s}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media(max-width:1100px){
  .hero{flex-direction:column}
  .hero-text{flex:none;padding:56px 32px 40px}
  .hero-img{clip-path:none;min-height:360px}
  .hero-ticks{display:none}
  .home-banner{min-height:70vh}
  .services-grid{grid-template-columns:1fr 1fr}
  .about-split{grid-template-columns:1fr;gap:40px}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .prod-features,.prod-features--5{grid-template-columns:1fr}
  .noticia-layout{grid-template-columns:1fr}
  .noticia-aside{display:none}
  .casos-grid{grid-template-columns:repeat(3,1fr)}
  .contacto-grid{grid-template-columns:1fr}
  .pedido-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .nav-links{display:none}
}
@media(max-width:680px){
  .nav{padding:0 20px;height:64px}
  .nav-mobile{top:64px}
  .nav-burger{display:flex}
  .container{padding:0 20px}
  .section{padding:64px 0}
  .hero-text{padding:48px 20px 32px}
  .home-banner{min-height:60vh}
  .home-banner-dash{display:block;margin:10px 0}
  .home-banner-arrow{width:40px;height:40px}
  .home-banner-arrow--prev{left:12px}
  .home-banner-arrow--next{right:12px}
  .services-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .casos-grid{grid-template-columns:1fr 1fr}
  .noticia-row{grid-template-columns:1fr;gap:8px}
  .contacto-info,.contacto-form-wrap{padding:48px 24px}
  .ff-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;padding:0 20px 32px}
  .footer-bottom{padding:18px 20px;flex-direction:column;text-align:center}
  .page-hero{padding:120px 20px 48px}
  .prod-hero{padding:130px 0 56px}
}