:root{
  --crema:#F2ECE6;
  --crema-2:#EAE2D9;
  --tinta:#161412;
  --gris:#A29C95;
  --texto-suave:#5F5951;
  --naranja:#E85A2B;
  --naranja-osc:#C9461B;
  --linea:#DCD3C9;
  --radio:18px;
  --ancho:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--crema);color:var(--tinta);font-family:"Inter Tight",system-ui,sans-serif;
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--naranja);outline-offset:3px;border-radius:6px}

.contenedor{width:min(100% - 32px, var(--ancho));margin-inline:auto}
.punto-final{color:var(--naranja)}

/* ---------- botones ---------- */
.boton{display:inline-flex;align-items:center;gap:.5em;background:var(--tinta);color:var(--crema);
  font-weight:600;font-size:16px;padding:14px 24px;border-radius:999px;border:1.5px solid var(--tinta);
  transition:transform .2s, background .2s, color .2s}
.boton:hover{transform:translateY(-2px);background:var(--naranja);border-color:var(--naranja)}
.boton-linea{background:transparent;color:var(--tinta)}
.boton-linea:hover{background:var(--tinta);color:var(--crema);border-color:var(--tinta)}
.boton-chico{padding:9px 18px;font-size:15px}

/* ---------- barra ---------- */
.barra{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--crema) 82%, transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.barra.con-borde{border-bottom-color:var(--linea)}
.barra-in{display:flex;align-items:center;justify-content:space-between;height:68px}
.marca{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.03em}
.marca svg{height:26px;width:auto;fill:var(--tinta)}
.marca .marca-punto{fill:var(--naranja)}
.menu{display:flex;align-items:center;gap:30px;font-weight:500;font-size:16px}
.menu a:not(.boton){position:relative}
.menu a:not(.boton)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--naranja);
  transform:scaleX(0);transform-origin:left;transition:transform .25s}
.menu a:not(.boton):hover::after{transform:scaleX(1)}
.hamburguesa{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative}
.hamburguesa span{position:absolute;left:11px;right:11px;height:2px;background:var(--tinta);transition:transform .25s}
.hamburguesa span:first-child{top:17px}.hamburguesa span:last-child{top:25px}
.hamburguesa[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ---------- portada ---------- */
.portada{padding:24px 0 48px}
.portada-in{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;min-height:calc(100svh - 68px - 72px)}
.rotulo-seccion{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave);margin-bottom:18px}
.rotulo-seccion span{color:var(--naranja)}
.rotulo-seccion::after{content:"";display:block;width:28px;height:2px;background:var(--naranja);margin-top:8px}
h1{font-size:clamp(42px, 6.2vw, 84px);font-weight:800;line-height:.98;letter-spacing:-.045em;margin-bottom:24px}
.subrayado{background:linear-gradient(var(--naranja),var(--naranja)) 0 92%/100% .09em no-repeat;padding-bottom:.04em}
.bajada{font-size:clamp(17px, 1.6vw, 20px);color:var(--texto-suave);max-width:30em;margin-bottom:32px}
.acciones{display:flex;flex-wrap:wrap;gap:12px}

.portada-anim{position:relative}
.escena{position:relative;width:min(100%, calc(100svh - 160px));margin-inline:auto;aspect-ratio:1/1;overflow:hidden;container-type:size}
.repetir{position:absolute;right:6px;bottom:6px;width:40px;height:40px;border-radius:50%;border:1px solid var(--linea);
  background:transparent;color:var(--texto-suave);font-size:18px;cursor:pointer;opacity:0;transition:opacity .3s, color .2s, border-color .2s}
.repetir.visible{opacity:1}
.repetir:hover{color:var(--naranja);border-color:var(--naranja)}

/* animación (idéntica a animacion-1-iniciales) */
.capa{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.lista{display:flex;flex-direction:column;gap:.05em;font-size:12.5cqmin;font-weight:800;letter-spacing:-.035em;line-height:1.02}
.lista span{display:inline-block}
.palabra{font-size:20cqmin;font-weight:800;letter-spacing:-.045em;line-height:1;white-space:nowrap}
.palabra span{display:inline-block}
.gris{color:var(--gris)}
.slot{width:.2em;height:.2em;margin-left:.04em}
.logo{height:50cqmin;aspect-ratio:267/291;transform-origin:0 0}
.logo svg,.tw svg{display:block;width:100%;height:100%;fill:var(--tinta)}
.palabra .tw{height:.727em;width:calc(.727em * 246 / 291);margin-right:-.015em}
.punto{position:absolute;left:0;top:0;border-radius:50%;background:var(--naranja)}

/* ---------- secciones ---------- */
.seccion{padding:110px 0}
.seccion-alt{background:var(--crema-2)}
.titulo{font-size:clamp(36px, 4.6vw, 60px);font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:56px}

/* servicios */
.servicios{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.servicio{position:relative;overflow:hidden;background:#F7F2EC;border:1px solid var(--linea);border-radius:var(--radio);
  padding:34px 34px 30px;min-height:330px;display:flex;flex-direction:column;transition:transform .3s, box-shadow .3s, border-color .3s}
.servicio:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(22,20,18,.35);border-color:#cfc4b8}
.servicio .inicial{position:absolute;right:22px;top:-.18em;font-size:180px;font-weight:800;line-height:1;letter-spacing:-.05em;
  color:var(--naranja);opacity:.13;transition:opacity .3s, transform .4s}
.servicio:hover .inicial{opacity:.9;transform:translateY(6px)}
.inicial-play{top:24px !important;width:120px;height:120px}
.inicial-play svg{width:100%;height:100%;fill:var(--naranja)}
.num{font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--naranja);margin-bottom:auto}
.servicio h3{font-size:30px;font-weight:800;letter-spacing:-.035em;line-height:1.05;margin:70px 0 10px}
.servicio > p:not(.num){color:var(--texto-suave);max-width:28em;margin-bottom:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:14px;font-weight:500;padding:6px 12px;border-radius:999px;border:1px solid var(--linea);background:var(--crema)}

/* trabajos */
.trabajos{display:grid;grid-template-columns:repeat(3,1fr);grid-template-areas:"doppio doppio cable" "casa rafa cable";gap:20px}
.t-doppio{grid-area:doppio}.t-casa{grid-area:casa}.t-rafa{grid-area:rafa}.t-cable{grid-area:cable}
.trabajo{display:flex;flex-direction:column;gap:16px;min-width:0}
.pantalla{position:relative;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--linea);
  box-shadow:0 20px 40px -30px rgba(22,20,18,.5);transition:transform .35s, box-shadow .35s;flex:1;min-height:200px}
.pantalla-barra{position:absolute;inset:0 0 auto 0;height:26px;background:#F7F2EC;border-bottom:1px solid var(--linea);display:flex;gap:6px;align-items:center;padding-left:12px;z-index:1}
.pantalla-barra i{width:8px;height:8px;border-radius:50%;background:var(--linea)}
.pantalla img{position:absolute;inset:26px 0 0 0;width:100%;height:calc(100% - 26px);object-fit:cover;object-position:top center;transition:transform .6s}
a.trabajo:hover .pantalla{transform:translateY(-4px);box-shadow:0 28px 50px -30px rgba(22,20,18,.6)}
a.trabajo:hover .pantalla img{transform:scale(1.03)}
.t-doppio .pantalla{min-height:340px}
.trabajo-info h3{font-size:22px;font-weight:800;letter-spacing:-.03em}
.trabajo-info p{color:var(--texto-suave);font-size:16px}
.ver{display:inline-block;margin-top:6px;font-weight:600;font-size:15px;color:var(--naranja)}
.celular{position:relative;border-radius:26px;overflow:hidden;background:#0d0b0a;border:6px solid var(--tinta);
  aspect-ratio:9/16;box-shadow:0 30px 50px -30px rgba(22,20,18,.7);width:100%;max-width:380px;margin-inline:auto}
.celular video{width:100%;height:100%;object-fit:cover}
.sonido{position:absolute;right:10px;bottom:10px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(242,236,230,.9);cursor:pointer;font-size:16px}
.t-cable .trabajo-info{text-align:center}

/* proceso */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.pasos::before{content:"";position:absolute;left:8px;right:8px;top:8px;height:2px;background:var(--linea)}
.pasos li{position:relative;padding-top:40px}
.paso-punto{position:absolute;top:0;left:0;width:18px;height:18px;border-radius:50%;background:var(--crema);border:2px solid var(--naranja);transition:background .4s}
.pasos li.visto .paso-punto{background:var(--naranja)}
.pasos h3{font-size:24px;font-weight:800;letter-spacing:-.03em;margin-bottom:8px}
.pasos p{color:var(--texto-suave)}

/* contacto */
.contacto{background:var(--tinta);color:var(--crema);padding:120px 0}
.contacto-cabeza{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:56px}
.rotulo-claro{color:#B9B1A8}
.rotulo-claro::after{margin-inline:auto}
.contacto h2{font-size:clamp(44px, 7vw, 96px);font-weight:800;letter-spacing:-.045em;line-height:1;margin-bottom:22px}
.contacto .bajada{color:#C9C1B8;margin:0 auto}
.contacto-grilla{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:start;max-width:1000px;margin-inline:auto}

.formulario{background:#201D1A;border:1px solid #2F2A26;border-radius:var(--radio);padding:32px;display:grid;gap:20px}
.campo{display:grid;gap:8px;border:0;min-width:0}
.campo label,.campo legend{font-size:14px;font-weight:600;color:#C9C1B8;padding:0}
.campo legend{margin-bottom:8px}
.campo input,.campo textarea{font:inherit;font-size:16px;color:var(--crema);background:#161412;border:1px solid #3A342F;
  border-radius:12px;padding:13px 15px;width:100%;resize:vertical;transition:border-color .2s}
.campo input::placeholder,.campo textarea::placeholder{color:#6F675F}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--naranja)}
.campo .invalido{border-color:#E8775A}
.opciones{display:flex;flex-wrap:wrap;gap:8px}
.opciones label{cursor:pointer}
.opciones input{position:absolute;opacity:0;pointer-events:none}
.opciones span{display:inline-block;font-size:14px;font-weight:500;color:var(--crema);padding:8px 14px;border-radius:999px;border:1px solid #3A342F;transition:background .2s, border-color .2s, color .2s}
.opciones label:hover span{border-color:#6F675F}
.opciones input:checked + span{background:var(--naranja);border-color:var(--naranja);color:#fff}
.opciones input:focus-visible + span{outline:2px solid var(--naranja);outline-offset:2px}
.trampa{position:absolute;left:-9999px}
.boton-enviar{justify-self:start;background:var(--naranja);border-color:var(--naranja);color:#fff;cursor:pointer;font-family:inherit}
.boton-enviar:hover{background:var(--crema);border-color:var(--crema);color:var(--tinta)}
.boton-enviar[disabled]{opacity:.6;cursor:wait;transform:none}
.aviso{font-size:15px;min-height:1.4em;color:#C9C1B8}
.aviso.ok{color:#9FD39B}.aviso.error{color:#F09A80}
.aviso a{text-decoration:underline}

.canales{display:grid;gap:10px}
.canales-titulo{font-size:14px;font-weight:600;color:#C9C1B8;margin:4px 0 6px}
.canal{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;border:1px solid #2F2A26;background:#1B1816;transition:border-color .2s, transform .2s}
.canal:hover{border-color:var(--naranja);transform:translateX(4px)}
.canal svg{width:24px;height:24px;flex:none;fill:var(--crema)}
.canal span{display:grid;line-height:1.3}
.canal b{font-weight:600}
.canal small{font-size:14px;color:#8E867D}
.canal-wa{background:#25D366;border-color:#25D366;color:#0B2614}
.canal-wa svg{fill:#0B2614}
.canal-wa small{color:#145A2C}
.canal-wa:hover{border-color:#fff}

.wa-flotante{position:fixed;right:20px;bottom:20px;z-index:40;width:58px;height:58px;border-radius:50%;background:#25D366;
  display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(0,0,0,.45);transition:transform .2s}
.wa-flotante:hover{transform:scale(1.08)}
.wa-flotante svg{width:30px;height:30px;fill:#fff}

/* pie */
.pie{background:var(--tinta);color:#8E867D;border-top:1px solid #2a2622;padding:28px 0;font-size:14px}
.pie-in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.pie-marca{color:var(--crema);font-weight:800;font-size:18px;letter-spacing:-.03em}

/* aparición al hacer scroll */
.aparecer{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.aparecer.visto{opacity:1;transform:none}
.sin-js .aparecer{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .portada-in{grid-template-columns:1fr;min-height:0;gap:8px}
  .portada-anim{order:-1;width:min(100%, 440px);margin-inline:auto}
  .escena{aspect-ratio:5/4;width:100%}
  .servicios{grid-template-columns:1fr}
  .trabajos{grid-template-columns:1fr 1fr;grid-template-areas:"doppio doppio" "casa rafa" "cable cable"}
  .pasos{grid-template-columns:1fr 1fr;row-gap:40px}
  .pasos::before{display:none}
  .contacto-grilla{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .menu{position:fixed;inset:68px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--crema);
    border-bottom:1px solid var(--linea);padding:8px 16px 20px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .25s, transform .25s}
  .menu.abierto{opacity:1;transform:none;pointer-events:auto}
  .menu a:not(.boton){padding:14px 0;border-bottom:1px solid var(--linea);font-size:18px}
  .menu a:not(.boton)::after{display:none}
  .menu .boton{margin-top:16px;justify-content:center}
  .hamburguesa{display:block}
  .portada{padding:16px 0 64px}
  .seccion{padding:80px 0}
  .titulo{margin-bottom:36px}
  .servicio{padding:26px 24px;min-height:0}
  .servicio h3{margin-top:48px;font-size:26px}
  .servicio .inicial{font-size:140px}
  .inicial-play{width:90px;height:90px}
  .trabajos{grid-template-columns:1fr;grid-template-areas:"doppio" "casa" "rafa" "cable"}
  .t-doppio .pantalla,.pantalla{min-height:220px}
  .celular{max-width:300px}
  .pasos{grid-template-columns:1fr}
  .contacto{padding:88px 0}
  .contacto-grilla{grid-template-columns:1fr}
  .formulario{padding:22px}
  .wa-flotante{right:14px;bottom:14px;width:54px;height:54px}
  .pie-in{flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .aparecer{opacity:1;transform:none;transition:none}
}