:root{
  --accent:#FF6F00;
  --bg:#121314;
  --bg-alt:#141517;
  --card:#1E1F21;
  --line:#2D2F31;
  --text:#FFFFFF;
  --muted:#9AA0A6;
  --link:#8AB4F8;
  --ac:var(--accent);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Roboto',sans-serif;font-size:16px;line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{opacity:.85}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent);color:var(--bg);padding:10px 16px;border-radius:999px;font-weight:500}
.skip:focus{top:12px}
.wrap{max-width:1200px;margin:0 auto;padding-left:20px;padding-right:20px}
.only-d{display:none}
.only-m{display:block}
span.only-m{display:inline}

/* Botones */
.btn{display:inline-block;text-align:center;background:var(--accent);color:var(--bg);font-weight:500;padding:16px 24px;border-radius:999px}
.btn--sm{padding:10px 20px;font-size:15px}
.btn--ghost{background:none;border:1px solid var(--line);color:var(--link)}
.btn--xl{font-size:18px}

/* Encabezado */
.header{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.header__in{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px;gap:16px}
.brand{display:flex;align-items:center;gap:10px}
.brand__mark{height:34px;width:auto}
.brand__name{height:26px;width:auto}
.nav{display:none}
.burger{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--text);cursor:pointer;padding:0}
.menu{display:flex;flex-direction:column;gap:4px;padding:8px 20px 20px;border-top:1px solid var(--line)}
.menu[hidden]{display:none}
.menu a:not(.btn){padding:12px 0;color:var(--muted);font-size:17px}
.menu .btn{margin-top:8px}

/* Inicio */
.hero{display:flex;flex-direction:column;gap:40px;padding-top:48px;padding-bottom:56px}
.hero__text{display:flex;flex-direction:column;gap:20px;min-width:0}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
h1{font-weight:600;font-size:36px;line-height:1.15;letter-spacing:-.02em;background:linear-gradient(90deg,#FFC107,#FF5722);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:17px;color:var(--muted);max-width:560px}
.demo{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--accent);border-radius:12px;padding:14px 16px;max-width:560px;font-size:15px;line-height:1.5}
.demo svg{flex:none}
.demo strong{font-weight:600}
.actions{display:flex;flex-direction:column;gap:12px;padding-top:4px}
.hero__chat{min-width:0}

/* Chat animado */
.chat{background:#0b141a;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.chat__stage{position:relative;height:414px;background:#0b141a url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'180'%20height%3D'180'%20viewBox%3D'0%200%20180%20180'%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-opacity%3D'.055'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M16%2020h28a6%206%200%200%201%206%206v13a6%206%200%200%201-6%206H31l-9%208v-8h-6a6%206%200%200%201-6-6V26a6%206%200%200%201%206-6z'%2F%3E%3Ccircle%20cx%3D'112'%20cy%3D'28'%20r%3D'10'%2F%3E%3Cpath%20d%3D'M108%2028h8M112%2024v8'%2F%3E%3Cpath%20d%3D'M150%2014l5%2011%2012%201-9%208%203%2012-11-7-11%207%203-12-9-8%2012-1z'%20transform%3D'translate(-6%20-2)%20scale(.9)'%2F%3E%3Cpath%20d%3D'M30%20112c-9-10-20-1-13%209l13%2012%2013-12c7-10-4-19-13-9z'%2F%3E%3Cpath%20d%3D'M92%20100l34%2013-34%2013%207-13z'%2F%3E%3Cpath%20d%3D'M99%20113h20'%2F%3E%3Crect%20x%3D'146'%20y%3D'98'%20width%3D'24'%20height%3D'34'%20rx%3D'5'%2F%3E%3Cpath%20d%3D'M154%20126h8'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'160'%20r%3D'8'%2F%3E%3Cpath%20d%3D'M60%20160l3%203%206-6'%2F%3E%3Cpath%20d%3D'M112%20164h34M112%20172h22'%2F%3E%3Cpath%20d%3D'M12%2070c6-6%2012%206%2018%200s12%206%2018%200'%2F%3E%3Ccircle%20cx%3D'80'%20cy%3D'66'%20r%3D'3'%2F%3E%3Ccircle%20cx%3D'150'%20cy%3D'64'%20r%3D'3'%2F%3E%3C%2Fsvg%3E") 0 0/180px 180px repeat}
.scene{position:absolute;top:0;left:0;right:0}
.s1,.s2{opacity:0}
.scene__head{display:flex;align-items:center;gap:12px;padding:12px 20px;background:#202c33;position:relative}
.scene__head::after{content:"";margin-left:auto;flex:none;width:84px;height:20px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'84'%20height%3D'20'%20viewBox%3D'0%200%2084%2020'%20fill%3D'none'%20stroke%3D'%23aebac1'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'1'%20y%3D'4'%20width%3D'12'%20height%3D'12'%20rx%3D'2.5'%2F%3E%3Cpath%20d%3D'M13%208.5l6-3v9l-6-3z'%2F%3E%3Cpath%20d%3D'M42%204.5c0-1%20.8-1.5%201.7-1.2l2.4.9c.8.3%201.2%201.1%201%201.9l-.7%202.2c-.2.6%200%201.2.4%201.6l1.8%201.8c.4.4%201%20.6%201.6.4l2.2-.7c.8-.2%201.6.2%201.9%201l.9%202.4c.3.9-.2%201.7-1.2%201.7C47.5%2018%2042%2012.5%2042%204.5z'%20transform%3D'translate(-6%20-1)%20scale(.95)'%2F%3E%3Ccircle%20cx%3D'76'%20cy%3D'4'%20r%3D'1.3'%20fill%3D'%23aebac1'%2F%3E%3Ccircle%20cx%3D'76'%20cy%3D'10'%20r%3D'1.3'%20fill%3D'%23aebac1'%2F%3E%3Ccircle%20cx%3D'76'%20cy%3D'16'%20r%3D'1.3'%20fill%3D'%23aebac1'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.avatar{width:36px;height:36px;flex:none;border-radius:50%;background:var(--ac);display:flex;align-items:center;justify-content:center}
.scene__t{display:flex;flex-direction:column;min-width:0}
.scene__t span{font-weight:500;font-size:16px;line-height:1.3}
.scene__t small{font-size:13px;color:var(--muted);line-height:1.3}
.scene__body{padding:20px;height:300px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:84%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.45}
.msg.in{align-self:flex-start;background:#202c33;color:#e9edef;border-bottom-left-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.25)}
.msg.out{align-self:flex-end;background:var(--ac);color:var(--bg);border-bottom-right-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.25)}
.scene__foot{display:flex;align-items:center;gap:10px;padding:12px 20px;background:#202c33;font-size:13px;color:#aebac1}
.dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--ac)}
.dots{display:flex;justify-content:center;gap:8px;padding-top:14px}
.d{width:8px;height:8px;border-radius:50%;background:var(--line)}
.d0{background:var(--ac)}

/* Chat de la portada: lo maneja js/main.js (mensaje por mensaje, con "escribiendo..." antes de cada respuesta, y pasa de una conversación a otra).
   Sin JavaScript se ve la primera conversación completa. */
.msg{position:relative}
.d{transition:background .3s ease}
.is-live .scene{opacity:0;transition:opacity .5s ease;pointer-events:none}
.is-live .scene.active{opacity:1}
.is-live .msg{opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease,max-width .4s ease,color .15s ease .3s}
.is-live .msg.typing{transition:opacity .35s ease,transform .35s ease,max-width .4s ease,color 0s}
.is-live .msg.show{opacity:1;transform:none}
.is-live .scene__foot{opacity:0;transition:opacity .4s ease}
.is-live .scene__foot.show{opacity:1}
.is-live .msg.typing{color:transparent;max-width:70px;overflow:hidden;white-space:nowrap}
.is-live .msg.typing::after{content:"";position:absolute;left:50%;top:50%;width:42px;height:8px;margin:-4px 0 0 -21px;background:radial-gradient(circle at 7px 4px,var(--bg) 3.5px,transparent 4px),radial-gradient(circle at 21px 4px,var(--bg) 3.5px,transparent 4px),radial-gradient(circle at 35px 4px,var(--bg) 3.5px,transparent 4px);animation:typing-blink 1s ease-in-out infinite}
.is-live .d0{background:var(--line)}
.is-live .d.on{background:var(--ac)}
@keyframes typing-blink{0%,100%{opacity:.35}50%{opacity:1}}

/* Menos movimiento: la conversación sigue, pero con fundidos suaves, sin desplazamientos ni puntos que parpadean */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .is-live .msg{transform:none}
  .is-live .msg.typing::after{animation:none}
}

/* Secciones */
.alt{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section{padding-top:56px;padding-bottom:56px;display:flex;flex-direction:column;gap:24px}
.head{display:flex;flex-direction:column;gap:12px;max-width:640px}
.head--w{max-width:700px}
.head p,.section>.head p{color:var(--muted)}
h2{font-weight:700;font-size:28px;line-height:1.2;letter-spacing:-.01em}
h3{font-weight:600}

.grid{display:grid;gap:16px;grid-template-columns:1fr}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:14px;min-width:0}
.card h3{font-size:20px}
.card p{color:var(--muted);font-size:15px}
.grid--3 .card h3,.grid--steps .card h3{font-size:18px}
.card--lg{gap:20px}
.ico{width:36px;height:36px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico--40{width:36px;height:36px}
.list{display:none;flex-direction:column;gap:8px;font-size:15px}
#servicios .head p{display:none}
#servicios .section{gap:28px}
.num{font-weight:600;font-size:24px;color:var(--accent);line-height:1.3}


/* Quiénes somos */
.about{flex-direction:column;gap:24px}
.about__text{display:flex;flex-direction:column;gap:24px;min-width:0}
.about__text>p{color:var(--muted)}
.about__photo{border-radius:12px;overflow:hidden;background:var(--card);border:1px solid var(--line)}
.about__photo img{width:100%;height:240px;object-fit:cover}
.values{display:flex;flex-direction:column;gap:12px}
.values li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 20px;flex:1 1 130px;min-width:0}
.values strong{display:block;font-weight:600;font-size:16px;color:var(--accent)}
.values span{display:block;font-size:14px;color:var(--muted)}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:16px}
.card--faq{padding:22px;gap:8px}
.card--faq h3{font-size:17px}

/* Llamado final */
.cta{border-top:1px solid var(--line)}
.cta__in{display:flex;flex-direction:column;gap:20px;padding-top:56px;padding-bottom:56px}
.cta__text{display:flex;flex-direction:column;gap:12px}
.cta__text p{color:var(--muted)}

/* Pie */
.contact{border-top:1px solid var(--line)}
.contact__in{display:flex;flex-direction:column;gap:4px;padding-top:32px;padding-bottom:12px;font-size:15px}
.contact__t{font-weight:600;font-size:16px;padding-bottom:4px}
.contact a,.contact span{color:var(--muted);padding:8px 0}
.legal{border-top:1px solid var(--line);margin-top:0}
.legal__in{display:flex;flex-direction:column;gap:6px;padding-top:28px;padding-bottom:92px;font-size:13px;color:var(--muted)}

/* Botón flotante */
.wa-float{position:fixed;right:16px;bottom:16px;z-index:50;background:var(--accent);color:var(--bg);font-weight:500;font-size:16px;padding:14px;border-radius:999px;display:flex;align-items:center;gap:10px;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.wa-float svg{width:28px;height:28px}
.wa-float__t{display:none}

/* Escritorio */
@media (min-width:768px){
  .wrap{padding-left:32px;padding-right:32px}
  .only-d{display:inline}
  .only-m,span.only-m{display:none}
  .brand{gap:12px}
  .brand__mark{height:38px}
  .brand__name{height:32px}
  .header__in{padding-top:20px;padding-bottom:20px}

  .hero{flex-direction:row;align-items:center;gap:64px;padding-top:96px;padding-bottom:112px}
  .hero__text{flex:1 1 480px;gap:28px}
  .hero__chat{flex:1 1 380px}
  .eyebrow{font-size:14px}
  h1{font-size:60px;line-height:1.12}
  .lead{font-size:20px}
  .demo{font-size:16px;padding:14px 18px}
  .actions{flex-direction:row;flex-wrap:wrap;gap:16px;padding-top:8px}
  .btn--lg{font-size:17px;padding:16px 28px}
  .btn--xl{padding:18px 32px}

  .section{padding-top:96px;padding-bottom:96px;gap:48px}
  h2{font-size:40px;line-height:1.15}
  .head p{font-size:17px}
  .grid{gap:24px}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--steps{grid-template-columns:repeat(4,1fr)}
  .card{padding:28px}
  .card--lg{padding:32px}
  .card p{font-size:16px}
  .card h3{font-size:20px}
  .card--lg h3{font-size:22px}
  .grid--steps .card h3{font-size:20px}
  .card--faq{padding:28px;gap:10px}
  .card--faq h3{font-size:19px}
  .ico--40{width:40px;height:40px}
  .list{display:flex;font-size:16px}
  #servicios .head p{display:block}
  #servicios .section{gap:48px}
  .num{font-size:28px}

  .about{flex-direction:row;flex-wrap:wrap;align-items:center;gap:64px}
  .about__photo{flex:1 1 320px}
  .about__photo img{height:380px}
  .about__text{flex:1 1 440px}
  .values{flex-direction:row;flex-wrap:wrap;gap:16px}
  .values li{padding:20px}
  .values strong{font-size:17px}
  .values span{font-size:15px;padding-top:4px}

  .faq{flex-direction:row;flex-wrap:wrap;gap:24px}
  .card--faq{flex:1 1 440px}

  .cta__in{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;padding-top:96px;padding-bottom:96px}
  .cta__text{flex:1 1 400px}
  .contact__in{padding-top:48px;padding-bottom:0;gap:10px;font-size:16px}
  .contact__t{font-size:17px;padding-bottom:0}
  .contact a,.contact span{padding:0}
  .legal{margin-top:40px}
  .legal__in{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:32px;padding-bottom:32px;font-size:14px}

  .wa-float{right:28px;bottom:28px;padding:14px 22px}
  .wa-float svg{width:24px;height:24px}
  .wa-float__t{display:inline}
}

/* Video de presentación */
.intro-video{padding-top:40px;padding-bottom:8px}
.intro-video__in{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.intro-video__tag{color:var(--accent);font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:4px}
.intro-video__el{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--card);border:1px solid var(--line);border-radius:12px}

/* Tarjetas de servicios con imagen de fondo */
.card--img{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(18,19,20,.5) 0%,rgba(18,19,20,.9) 100%),var(--img) center/cover no-repeat;border-color:var(--line)}
.card--img p,.card--img .list{color:#d6d7d9}
.img1{--img:url(../assets/servicio-1.jpg)}
.img2{--img:url(../assets/servicio-2.jpg)}
.img3{--img:url(../assets/servicio-3.jpg)}
.img4{--img:url(../assets/servicio-4.jpg)}
.auto1{--img:url(../assets/auto-1.jpg)}
.auto2{--img:url(../assets/auto-2.jpg)}
.auto3{--img:url(../assets/auto-3.jpg)}
.auto4{--img:url(../assets/auto-4.jpg)}
.auto5{--img:url(../assets/auto-5.jpg)}
.auto6{--img:url(../assets/auto-6.jpg)}
.paso1{--img:url(../assets/paso-1.jpg)}
.paso2{--img:url(../assets/paso-2.jpg)}
.paso3{--img:url(../assets/paso-3.jpg)}
.paso4{--img:url(../assets/paso-4.jpg)}
.faq1{--img:url(../assets/faq-1.jpg)}
.faq2{--img:url(../assets/faq-2.jpg)}
.faq3{--img:url(../assets/faq-3.jpg)}
.faq4{--img:url(../assets/faq-4.jpg)}
.faq5{--img:url(../assets/faq-5.jpg)}

/* Tarjetas de valores de Quiénes somos con imagen de fondo */
.values li.card--img{position:relative;overflow:hidden;padding-top:56px;background:linear-gradient(180deg,rgba(18,19,20,.45) 0%,rgba(18,19,20,.92) 100%),var(--img) center/cover no-repeat}
.values li.card--img span{color:#d6d7d9}
.valor1{--img:url(../assets/valor-1.jpg)}
.valor2{--img:url(../assets/valor-2.jpg)}
.valor3{--img:url(../assets/valor-3.jpg)}

/* Encabezado del chat: una sola línea para que la escena no crezca; en pantallas chicas sin los iconos */
.scene__t span,.scene__t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){
  .scene__head::after{display:none}
}
/* En celular los mensajes se parten en más líneas: más alto para que ninguno quede tapado por el pie */
@media (max-width:560px){
  .chat__stage{height:468px}
  .scene__body{height:346px}
}

/* Hora y tildes dentro de cada burbuja, como en WhatsApp */
.msg .meta{float:right;margin:7px 0 -4px 12px;font-size:11px;line-height:1;white-space:nowrap;opacity:.65}
.msg.out .meta{opacity:.7}
.is-live .msg .meta{transition:opacity .15s ease .3s}
.is-live .msg.typing .meta{opacity:0;transition:none}

/* Tarjetas con imagen: relieve y 3D al pasar el mouse (solo con mouse; la inclinación la calcula js/main.js) */
@media (hover:hover) and (pointer:fine){
  .card--img{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;backface-visibility:hidden;box-shadow:0 0 0 0 transparent,0 0 0 0 transparent,0 0 0 0 transparent,inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 0 transparent}
  .card--img::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s ease;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,160,70,.2),transparent 45%)}
  .card--img:hover{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px) scale(1.015);border-color:rgba(255,111,0,.7);box-shadow:0 22px 44px rgba(0,0,0,.6),0 0 0 1px rgba(255,111,0,.35),0 0 34px rgba(255,111,0,.28),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -22px 32px rgba(0,0,0,.28);z-index:2}
  .card--img:hover::after{opacity:1}
  @media (prefers-reduced-motion:reduce){
    .card--img:hover{transform:translateY(-3px)}
  }
}

/* Menú completo solo desde 1024px; en tablet queda el botón hamburguesa para que el logo no se pise con los links */
@media (min-width:1024px){
  .nav{display:flex;align-items:center;gap:28px;font-size:15px;color:var(--muted);white-space:nowrap}
  .nav .btn{color:var(--bg)}
  .burger,.menu{display:none !important}
}