/* ============ VARIABLES ============ */
:root{
  --black: #0a0a0b;
  --black-soft: #121214;
  --graphite: #1c1d20;
  --steel: #3a3d42;
  --steel-light: #6b6f76;
  --silver: #b8bcc2;
  --silver-light: #e4e6e9;
  --white: #f5f5f6;
  --accent-metal: linear-gradient(135deg, #8e9199 0%, #e8eaed 25%, #cfd2d6 45%, #6b6f76 60%, #d8dade 80%, #9a9ea5 100%);
  --font-display: 'Fraunces', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 300;
  overflow-x: hidden;
  line-height: 1.6;
}
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
ul{ list-style:none; }
.container{ max-width: 1200px; margin: 0 auto; padding: 0 32px; }
em{ font-style: italic; color: var(--silver-light); }

.noise-overlay{
  position: fixed; inset:0; pointer-events:none; z-index: 2;
  background-image: radial-gradient(circle, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .5;
}

/* ============ SCROLL PROGRESS ============ */
.scroll-progress{
  position: fixed; top:0; left:0; height: 3px; width: 0%; z-index: 600;
  background: var(--accent-metal); background-size: 200% auto;
  box-shadow: 0 0 12px rgba(200,203,210,.5);
  transition: width .1s linear;
}

/* ============ LOGO SIN FONDO (recortado por canvas en tiempo de carga) ============ */
.blend-logo{
  filter: drop-shadow(0 0 14px rgba(200,203,210,.18));
}

/* ============ PRELOADER ============ */
.preloader{
  position: fixed; inset:0; background: var(--black);
  display:flex; align-items:center; justify-content:center;
  z-index: 9999;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
.preloader.hide{ opacity:0; visibility:hidden; }
.preloader-logo{
  width: 120px; opacity:0;
  animation: preloaderFade 1.4s var(--ease) forwards;
}
@keyframes preloaderFade{
  0%{ opacity:0; transform: scale(.85); filter: blur(6px); }
  100%{ opacity:1; transform: scale(1); filter: blur(0); }
}

/* ============ HEADER ============ */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding: 22px 0;
  transition: padding .4s var(--ease), background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled{
  padding: 12px 0;
  background: rgba(10,10,11,.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(184,188,194,.15);
}
.header-inner{
  max-width: 1300px; margin:0 auto; padding: 0 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand img{
  height: 46px; transition: height .4s var(--ease), filter .3s var(--ease);
  filter: drop-shadow(0 0 10px rgba(200,203,210,.15));
}
.site-header.scrolled .brand img{ height: 36px; }

.main-nav ul{ display:flex; gap: 8px; align-items:center; }
.main-nav li{ position: relative; }
.nav-link{
  display:inline-block; padding: 10px 18px; font-family: var(--font-body); font-size: 13px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--silver);
  position: relative;
  transition: color .35s var(--ease), transform .35s var(--ease);
}
.nav-link::after{
  content:''; position:absolute; left: 18px; right: 18px; bottom: 4px; height: 1px;
  background: var(--accent-metal);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav-link:hover{ color: var(--white); transform: translateY(-2px) scale(1.06); }
.nav-link:hover::after{ transform: scaleX(1); }
.caret{ font-size: 10px; display:inline-block; transition: transform .3s var(--ease); }
.has-dropdown:hover .caret{ transform: rotate(180deg); }

.dropdown{
  position:absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-8px);
  min-width: 230px; background: rgba(18,18,20,.97); border: 1px solid rgba(184,188,194,.15);
  border-radius: 4px; padding: 10px; opacity:0; visibility:hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  backdrop-filter: blur(10px);
}
.has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }
.dropdown li a{
  display:block; padding: 12px 16px; font-size: 13px; letter-spacing: .5px; color: var(--silver);
  border-radius: 3px; transition: background .3s var(--ease), color .3s var(--ease), padding-left .3s var(--ease);
}
.dropdown li a:hover{ background: rgba(184,188,194,.08); color: var(--white); padding-left: 22px; }

.burger{
  display:none; background:none; border:none; cursor:pointer; width: 32px; height: 22px;
  flex-direction: column; justify-content: space-between; padding:0;
}
.burger span{ display:block; height: 2px; width: 100%; background: var(--silver-light); border-radius: 2px; transition: transform .35s var(--ease), opacity .35s var(--ease); }
.burger.open span:nth-child(1){ transform: translateY(10px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity: 0; }
.burger.open span:nth-child(3){ transform: translateY(-10px) rotate(-45deg); }

/* ============ HERO ============ */
.hero{
  position: relative; min-height: 100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(120,124,132,.18), transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(90,93,100,.15), transparent 55%),
    linear-gradient(160deg, #050506 0%, #121214 45%, #050506 100%);
}
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px, transparent 1px, transparent 90px);
  animation: shimmerMove 14s linear infinite;
}
@keyframes shimmerMove{ 0%{ background-position: 0 0; } 100%{ background-position: 600px 0; } }

.hero-content{ position:relative; z-index:2; padding: 0 24px; }
.hero-logo{ width: 130px; margin: 0 auto 28px; opacity: .95; }
.hero-content h1{
  font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: clamp(2.8rem, 7.5vw, 6rem);
  letter-spacing: -1px; line-height: 1.02;
  background: var(--accent-metal); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: metalShine 6s linear infinite;
}
@keyframes metalShine{ 0%{ background-position: 0% center; } 100%{ background-position: 200% center; } }
.hero-tagline{
  margin-top: 20px; font-size: 1.1rem; letter-spacing: 3px; text-transform: uppercase; color: var(--silver);
  font-weight: 300;
}
.hero-cta{ margin-top: 46px; display:flex; align-items:center; gap: 20px; justify-content:center; flex-wrap: wrap; }

.btn{
  display:inline-block; padding: 16px 38px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  border-radius: 2px; cursor:pointer; transition: all .4s var(--ease); position: relative; overflow:hidden;
}
.btn-outline{ border: 1px solid rgba(184,188,194,.4); color: var(--silver-light); }
.btn-outline:hover{ border-color: var(--silver-light); background: rgba(255,255,255,.05); transform: translateY(-3px); letter-spacing: 3px; }
.btn-filled{
  background: var(--accent-metal); background-size: 200% auto; color: #101012; font-weight: 500;
  box-shadow: 0 8px 25px rgba(0,0,0,.4);
}
.btn-filled:hover{ background-position: 100% center; transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 34px rgba(0,0,0,.55); }

.scroll-indicator{
  position:absolute; bottom: 40px; left:50%; transform: translateX(-50%); z-index:2;
  display:flex; flex-direction: column; align-items:center; gap: 10px;
}
.scroll-indicator span{
  width: 1px; height: 50px; background: linear-gradient(var(--silver), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
.scroll-indicator p{ font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--steel-light); }

/* ============ SHARED SECTION STYLES ============ */
section{ padding: 140px 0; position: relative; }
.eyebrow{
  display:inline-block; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 15px; letter-spacing: .5px;
  color: var(--steel-light); margin-bottom: 18px; position: relative; padding-left: 30px;
}
.eyebrow::before{ content:''; position:absolute; left:0; top:50%; transform: translateY(-50%); width: 20px; height:1px; background: var(--silver); }
.section-head h2, .empresa-text h2, .contacto-text h2{
  font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: 0; line-height: 1.15;
  color: var(--white); margin-bottom: 20px;
}
.section-sub{ color: var(--steel-light); max-width: 520px; }

.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items:center; }

/* ============ REVEAL ANIMATION ============ */
.reveal{ opacity:0; transform: translateY(50px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.visible{ opacity:1; transform: translateY(0); }

/* ============ EMPRESA ============ */
.empresa{ background: linear-gradient(180deg, var(--black) 0%, var(--black-soft) 100%); }
.empresa-text p{ color: var(--silver); margin-bottom: 18px; max-width: 500px; }
.founders{ display:flex; gap: 20px; margin-top: 36px; flex-wrap: wrap; }
.founder-card{
  display:flex; align-items:center; gap: 14px; padding: 14px 20px; border: 1px solid rgba(184,188,194,.15);
  border-radius: 4px; transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.founder-card:hover{ transform: translateY(-6px); border-color: rgba(184,188,194,.4); background: rgba(255,255,255,.03); }
.founder-initial{
  width: 46px; height: 46px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  background: var(--accent-metal); color: #101012;
}
.founder-card h4{ font-size: 15px; font-weight: 500; letter-spacing: .5px; }
.founder-card span{ font-size: 12px; color: var(--steel-light); letter-spacing: .5px; }

.metal-frame{
  position: relative; border-radius: 6px; overflow:hidden; padding: 3px;
  background: var(--accent-metal); box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.metal-frame img{ border-radius: 4px; display:block; width:100%; height: 420px; object-fit: cover; transition: transform .8s var(--ease); }
.metal-frame:hover img{ transform: scale(1.05); }

/* ============ SERVICIOS / ACCORDION ============ */
.servicios{ background: var(--black-soft); }
.section-head{ text-align:center; max-width: 640px; margin: 0 auto 60px; }
.section-head .section-sub{ margin: 0 auto; }

.accordion{ max-width: 820px; margin: 0 auto; }
.acc-item{
  border-bottom: 1px solid rgba(184,188,194,.15);
  transition: border-color .4s var(--ease);
}
.acc-trigger{
  width:100%; background:none; border:none; cursor:pointer; color: var(--white);
  display:flex; align-items:center; gap: 24px; padding: 30px 10px; text-align:left;
  font-family: var(--font-body);
}
.acc-number{ font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--steel-light); }
.acc-title{ flex:1; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: 0; transition: color .3s var(--ease), transform .35s var(--ease); }
.acc-icon{
  font-size: 1.6rem; color: var(--silver); font-weight: 300; transition: transform .45s var(--ease), color .3s var(--ease);
}
.acc-trigger:hover .acc-title{ color: var(--silver-light); transform: translateX(8px); }
.acc-trigger:hover .acc-icon{ color: var(--white); }
.acc-item.active .acc-icon{ transform: rotate(135deg); color: var(--white); }

.acc-panel{
  max-height: 0; overflow:hidden; transition: max-height .55s var(--ease), padding .55s var(--ease);
  padding: 0 10px;
}
.acc-item.active .acc-panel{ max-height: 220px; padding: 0 10px 30px; }
.acc-panel p{ color: var(--silver); max-width: 640px; padding-left: 58px; }

/* ============ CALCULADORA ============ */
.calculadora{ background: var(--black-soft); }
.calc-box{
  max-width: 640px; margin: 50px auto 0; padding: 40px; border: 1px solid rgba(184,188,194,.15);
  border-radius: 14px; background: rgba(255,255,255,.02);
}
.calc-row{ margin-bottom: 34px; }
.calc-label{ display:block; font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--steel-light); margin-bottom: 14px; }
.calc-options{ display:flex; gap: 10px; flex-wrap: wrap; }
.calc-chip{
  padding: 11px 18px; border-radius: 30px; border: 1px solid rgba(184,188,194,.3); background: transparent;
  color: var(--silver); font-family: var(--font-body); font-size: 13.5px; cursor:pointer; transition: all .35s var(--ease);
}
.calc-chip:hover{ border-color: var(--silver-light); transform: translateY(-2px); }
.calc-chip.active{ background: var(--accent-metal); color:#101012; border-color: transparent; font-weight: 600; }
.calc-slider-wrap{ display:flex; align-items:center; gap: 18px; }
.calc-slider-wrap input[type="range"]{
  flex:1; -webkit-appearance:none; appearance:none; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--silver-light) 0%, rgba(184,188,194,.2) 0%);
  outline:none;
}
.calc-slider-wrap input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width: 18px; height:18px; border-radius:50%;
  background: var(--accent-metal); cursor:pointer; box-shadow: 0 2px 8px rgba(0,0,0,.5); border: 2px solid var(--black);
}
.calc-slider-wrap input[type="range"]::-moz-range-thumb{
  width: 18px; height:18px; border-radius:50%; background: var(--silver-light); cursor:pointer; border: 2px solid var(--black);
}
.calc-surface-value{ font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--white); min-width: 64px; text-align:right; }
.calc-result{
  text-align:center; padding: 26px 20px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(184,188,194,.12);
  margin-bottom: 26px;
}
.calc-result-label{ display:block; font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--steel-light); margin-bottom: 8px; }
.calc-result-value{
  display:block; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 4vw, 2.4rem);
  background: var(--accent-metal); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom: 10px;
}
.calc-result-note{ display:block; font-size: 11.5px; color: var(--steel-light); }
.calc-cta{ display:flex; justify-content:center; }

/* ============ ZONA DE COBERTURA ============ */
.cobertura{ background: var(--black); }
.coverage-chips{ display:flex; flex-wrap: wrap; justify-content:center; gap: 12px; margin-top: 40px; }
.coverage-chip{
  padding: 10px 20px; border-radius: 30px; border: 1px solid rgba(184,188,194,.25);
  font-family: var(--font-body); font-size: 13.5px; color: var(--silver-light);
  transition: all .35s var(--ease);
}
.coverage-chip:hover{ border-color: var(--silver-light); background: rgba(255,255,255,.05); transform: translateY(-2px); }

/* ============ FAQ ============ */
.faq{ background: var(--black-soft); }

/* ============ PROCESO ============ */
.proceso{ background: var(--black); }
.proceso-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 60px; position: relative; }
.proceso-grid::before{
  content:''; position:absolute; top: 14px; left: 6%; right: 6%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,188,194,.3), transparent);
}
.proceso-step{ position: relative; }
.proceso-num{
  font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--black);
  background: var(--accent-metal); width: 30px; height:30px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center; margin-bottom: 22px;
  position: relative; z-index: 1;
}
.proceso-step h4{ font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin-bottom: 10px; color: var(--white); }
.proceso-step p{ font-size: 14px; color: var(--steel-light); max-width: 240px; }

/* ============ TRABAJOS / GALLERY ============ */
.trabajos .section-head{ text-align:left; margin-left:0; }
.gallery{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 40px; }
.gallery-item{
  position: relative; overflow:hidden; border-radius: 6px; cursor: pointer;
  aspect-ratio: 4/3; border: 1px solid rgba(184,188,194,.15);
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease), filter .5s var(--ease); }
.gallery-item:hover img{ transform: scale(1.08); filter: brightness(1.05); }
.gallery-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding: 22px 24px;
  background: linear-gradient(0deg, rgba(0,0,0,.85), transparent);
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--silver-light);
  transform: translateY(10px); opacity: 0; transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.gallery-item:hover figcaption{ transform: translateY(0); opacity:1; }
.gallery-item::before{
  content: '＋'; position:absolute; top: 20px; right: 20px; width: 40px; height:40px; border-radius:50%;
  background: rgba(10,10,11,.6); border: 1px solid rgba(255,255,255,.3); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size: 18px;
  opacity:0; transform: scale(.6) rotate(-45deg); transition: all .4s var(--ease); backdrop-filter: blur(6px);
}
.gallery-item:hover::before{ opacity:1; transform: scale(1) rotate(0deg); }

/* ============ CONTACTO ============ */
.contacto{ background: var(--black); }
.contacto-text p{ color: var(--silver); max-width: 480px; margin-bottom: 30px; }
.contact-list{ display:flex; flex-direction: column; gap: 20px; margin-bottom: 36px; }
.contact-list li{ display:flex; flex-direction: column; gap: 4px; }
.contact-label{ font-family: var(--font-display); font-style: italic; font-size: 13px; letter-spacing: .3px; color: var(--steel-light); }
.contact-social-links{ display:flex; gap: 14px; }
.contact-list a{ transition: color .3s var(--ease), padding-left .3s var(--ease); }
.contact-list a:hover{ color: var(--silver-light); padding-left: 6px; }
.btn-whatsapp{ display:inline-flex; align-items:center; gap: 10px; }

.contacto-map{ border-radius: 6px; overflow:hidden; border: 1px solid rgba(184,188,194,.2); filter: grayscale(.4) contrast(1.1) brightness(.9); transition: filter .5s var(--ease); }
.contacto-map:hover{ filter: grayscale(0) brightness(1); }
.contacto-map iframe{ width:100%; height: 420px; border:0; display:block; }

/* ============ FOOTER ============ */
.site-footer{ padding: 50px 0; border-top: 1px solid rgba(184,188,194,.12); background: var(--black-soft); }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap: wrap; gap: 20px; }
.footer-logo{ height: 34px; opacity:.85; }
.footer-inner p{ font-size: 12px; color: var(--steel-light); letter-spacing: .5px; }
.footer-links{ display:flex; gap: 24px; }
.footer-links a{ font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--silver); transition: color .3s var(--ease); }
.footer-links a:hover{ color:#fff; }

/* ============ ASISTENTE VIRTUAL ============ */
.assistant-widget{ position: fixed; bottom: 30px; right: 30px; z-index: 700; display:flex; flex-direction: column; align-items:flex-end; gap: 16px; pointer-events: none; }
.assistant-widget > *{ pointer-events: auto; }

.assistant-toggle{
  position: relative; display:flex; align-items:center; gap: 10px; padding: 16px 24px; border-radius: 50px;
  background: var(--accent-metal); background-size: 200% auto; color:#101012; border:none; cursor:pointer;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transition: transform .4s var(--ease), background-position .4s var(--ease), box-shadow .4s var(--ease);
}
.assistant-toggle:hover{ transform: translateY(-4px) scale(1.04); background-position: 100% center; box-shadow: 0 16px 40px rgba(0,0,0,.6); }
.assistant-toggle-icon{ width: 20px; height:20px; display:flex; }
.assistant-pulse{
  position:absolute; top:-4px; right:-4px; width: 14px; height:14px; border-radius:50%;
  background: #4ee08a; border: 2px solid var(--black);
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot{ 0%,100%{ box-shadow: 0 0 0 0 rgba(78,224,138,.5); } 50%{ box-shadow: 0 0 0 6px rgba(78,224,138,0); } }

.assistant-panel{
  width: min(370px, 90vw); height: min(560px, 70vh); background: var(--graphite);
  border: 1px solid rgba(184,188,194,.18); border-radius: 16px; overflow:hidden;
  display:flex; flex-direction: column;
  box-shadow: 0 40px 90px rgba(0,0,0,.6);
  transform: scale(.9) translateY(20px); opacity:0; visibility:hidden; transform-origin: bottom right;
  transition: transform .45s var(--ease), opacity .45s var(--ease), visibility .45s var(--ease);
}
.assistant-panel.active{ transform: scale(1) translateY(0); opacity:1; visibility:visible; }

.assistant-header{
  display:flex; align-items:center; gap: 12px; padding: 18px 18px; border-bottom: 1px solid rgba(184,188,194,.15);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
.assistant-header img{ width: 34px; }
.assistant-header h4{ font-family: var(--font-display); font-size: .95rem; color: var(--white); font-weight: 600; }
.assistant-header span{ font-family: var(--font-display); font-style: italic; font-size: 11.5px; color: var(--steel-light); }
.assistant-header div{ flex:1; }
.assistant-close{
  background:none; border:none; color: var(--steel-light); font-size: 22px; cursor:pointer;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.assistant-close:hover{ color:#fff; transform: rotate(90deg); }

.assistant-body{ flex:1; overflow-y: auto; padding: 20px 18px; display:flex; flex-direction: column; gap: 14px; }
.assistant-body::-webkit-scrollbar{ width: 5px; }
.assistant-body::-webkit-scrollbar-thumb{ background: rgba(184,188,194,.25); border-radius: 3px; }

.msg{ max-width: 85%; padding: 12px 16px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; animation: msgIn .4s var(--ease); }
@keyframes msgIn{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform: translateY(0); } }
.msg-bot{ align-self:flex-start; background: rgba(255,255,255,.06); color: var(--silver-light); border-bottom-left-radius: 3px; }
.msg-user{ align-self:flex-end; background: var(--accent-metal); color:#101012; font-weight: 500; border-bottom-right-radius: 3px; }

.assistant-input{ padding: 14px 16px; border-top: 1px solid rgba(184,188,194,.15); display:flex; flex-wrap: wrap; gap: 8px; }
.chip{
  padding: 9px 15px; border-radius: 20px; border: 1px solid rgba(184,188,194,.35); background: transparent;
  color: var(--silver-light); font-family: var(--font-body); font-size: 12.5px; cursor:pointer;
  transition: all .3s var(--ease);
}
.chip:hover{ background: rgba(255,255,255,.08); border-color: var(--silver-light); transform: translateY(-2px); }
.input-row{ display:flex; gap: 8px; width:100%; }
.input-row input{
  flex:1; background: rgba(255,255,255,.05); border: 1px solid rgba(184,188,194,.25); border-radius: 20px;
  padding: 10px 16px; color: var(--white); font-family: var(--font-body); font-size: 13px;
}
.input-row input:focus{ outline: none; border-color: var(--silver-light); }
.input-row input.input-invalid{ border-color: #e07a7a; }
.input-error{ width:100%; font-size: 11.5px; color: #e07a7a; padding: 0 4px; }
.input-row button{
  width: 40px; height:40px; border-radius:50%; border:none; background: var(--accent-metal); color:#101012;
  cursor:pointer; font-size: 16px; flex-shrink:0; transition: transform .3s var(--ease);
}
.input-row button:hover{ transform: scale(1.08); }

.assistant-summary{ background: rgba(255,255,255,.04); border: 1px solid rgba(184,188,194,.15); border-radius: 10px; padding: 14px 16px; font-size: 12.5px; }
.assistant-summary div{ display:flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed rgba(184,188,194,.15); }
.assistant-summary div:last-child{ border-bottom:none; }
.assistant-summary span:first-child{ font-family: var(--font-display); font-style: italic; color: var(--steel-light); }
.assistant-summary span:last-child{ color: var(--silver-light); text-align:right; }

/* ============ LIGHTBOX ============ */
.lightbox{
  position: fixed; inset:0; z-index: 950; background: rgba(4,4,5,.92); backdrop-filter: blur(16px) saturate(1.1);
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; padding: 40px;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.lightbox.active{ opacity:1; visibility:visible; }
.lightbox img{
  max-width: 90vw; max-height: 86vh; border-radius: 6px; box-shadow: 0 40px 100px rgba(0,0,0,.7);
  transform: scale(.85); transition: transform .5s var(--ease);
  border: 1px solid rgba(255,255,255,.15);
}
.lightbox.active img{ transform: scale(1); }
.lightbox-close{
  position: absolute; top: 30px; right: 40px; background: none; border: 1px solid rgba(255,255,255,.3);
  color:#fff; width: 46px; height:46px; border-radius:50%; font-size: 24px; cursor:pointer;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.lightbox-close:hover{ transform: rotate(90deg); background: rgba(255,255,255,.1); }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; gap: 40px; }
  .gallery{ grid-template-columns: 1fr; }
  section{ padding: 90px 0; }
  .main-nav{
    position: fixed; top:0; right:-100%; width: min(80vw, 340px); height: 100vh;
    background: rgba(10,10,11,.98); backdrop-filter: blur(20px);
    transition: right .5s var(--ease); padding: 100px 30px; border-left: 1px solid rgba(184,188,194,.15);
  }
  .main-nav.open{ right:0; }
  .main-nav ul{ flex-direction: column; align-items: flex-start; gap: 6px; }
  .nav-link{ padding: 14px 6px; width:100%; }
  .main-nav .dropdown,
  .has-dropdown:hover .dropdown{ position: static; transform:none; opacity:1; visibility:visible; display:none; box-shadow:none; background:none; border:none; margin-left: 12px; flex-direction: column; }
  .has-dropdown.open .dropdown{ display:flex; }
  .burger{ display:flex; }
  .assistant-toggle-text{ display:none; }
  .assistant-toggle{ padding: 16px; border-radius: 50%; }
  .assistant-widget{ bottom: 20px; right: 20px; }
  .assistant-panel{ width: 92vw; height: 75vh; }
  .footer-inner{ flex-direction: column; text-align:center; }
  .proceso-grid{ grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .proceso-grid::before{ display:none; }
}