:root{
  --morado:#7220DA;
  --morado-oscuro:#5A17B0;
  --lila:#F4F0FB;
  --lila-borde:#E8E2F2;
  --lila-texto:#E9DDFB;
  --oscuro:#16121F;
  --oscuro-2:#231C31;
  --texto:#3D3748;
  --texto-suave:#6B6478;
  --blanco:#FFFFFF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--oscuro);background:var(--blanco);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--morado)}
h1,h2,h3{font-family:Montserrat,system-ui,sans-serif;margin:0;line-height:1.1}
p{margin:0}
.contenedor{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.etiqueta{font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--morado)}
.titulo-seccion{font-weight:800;font-size:clamp(2rem,3.5vw,2.75rem)}
.seccion{padding:96px 0}
.encabezado-seccion{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 48px;margin-bottom:48px}
.encabezado-seccion .bloque{display:flex;flex-direction:column;gap:12px}
.encabezado-seccion .intro{font-size:16px;line-height:1.6;color:#4A4458;max-width:480px}
.boton{display:inline-block;text-decoration:none;font-weight:700;font-size:16px;padding:15px 26px;border-radius:4px;border:1px solid transparent;transition:background .2s,color .2s}
.boton-primario{background:var(--morado);color:var(--blanco)}
.boton-primario:hover{background:var(--morado-oscuro);color:var(--blanco)}
.boton-blanco{background:var(--blanco);color:var(--morado)}
.boton-blanco:hover{background:var(--lila);color:var(--morado-oscuro)}
.boton-borde{border-color:#C7B3F2;color:var(--blanco);font-weight:600}
.boton-borde:hover{background:var(--morado-oscuro);color:var(--blanco)}

/* Encabezado */
.cabecera{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid #EEE9F6}
.cabecera .contenedor{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px}
.cabecera .logo img{width:170px;height:auto}
.menu{display:flex;align-items:center;gap:28px}
.menu a{text-decoration:none;color:var(--oscuro);font-size:15px;font-weight:500}
.menu a:hover{color:var(--morado)}
.menu .boton{color:var(--blanco);font-size:15px;padding:12px 20px}

/* Portada */
.hero{background:var(--morado);color:var(--blanco)}
.hero .contenedor{display:flex;flex-wrap:wrap;align-items:center;gap:48px;padding-top:80px;padding-bottom:80px}
.hero-texto{flex:1 1 440px;display:flex;flex-direction:column;gap:24px}
.hero .etiqueta{color:var(--lila-texto);letter-spacing:.24em}
.hero h1{font-weight:800;font-size:clamp(2.6rem,5vw,4rem);line-height:1.04}
.hero-texto p{font-size:19px;line-height:1.6;color:#F1EAFD;max-width:520px}
.hero-botones{display:flex;flex-wrap:wrap;gap:12px;padding-top:8px}
.hero-foto{flex:1 1 440px;height:440px;border-radius:6px;overflow:hidden;background:var(--morado-oscuro)}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:55% 50%}

/* Promesa */
.promesa{background:var(--lila)}
.promesa .contenedor{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 48px;padding-top:36px;padding-bottom:36px}
.promesa strong{font-family:Montserrat,sans-serif;font-weight:800;font-size:26px;line-height:1.2}
.promesa p{font-size:16px;line-height:1.6;color:var(--texto);max-width:560px}

/* Servicios */
.rejilla-servicios{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.servicio{background:var(--blanco);border:1px solid var(--lila-borde);border-radius:6px;padding:28px;display:flex;flex-direction:column;gap:14px}
.servicio .icono{width:52px;height:52px;border-radius:6px;background:var(--lila);display:flex;align-items:center;justify-content:center}
.servicio h3{font-weight:700;font-size:19px;line-height:1.25}
.servicio p{font-size:15px;line-height:1.6;color:#4A4458}
svg.ic{width:28px;height:28px;fill:none;stroke:var(--morado);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* Proyectos */
.proyectos{background:#FAF8FD}
.rejilla-proyectos{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.proyecto{background:var(--blanco);border:1px solid var(--lila-borde);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.proyecto figure{margin:0;height:240px;position:relative;background:#EEEBF2}
.proyecto figure img{width:100%;height:100%;object-fit:cover}
.proyecto .numero{position:absolute;top:14px;left:14px;background:var(--morado);color:var(--blanco);font-family:Montserrat,sans-serif;font-weight:800;font-size:15px;padding:6px 12px;border-radius:3px}
.proyecto .cuerpo{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px}
.proyecto h3{font-weight:700;font-size:18px;line-height:1.3}
.proyecto .cliente{font-size:14px;color:var(--texto-suave)}
.proyecto .dato{margin-top:6px;font-size:14px;font-weight:600;color:var(--morado)}

/* Bodegas */
.bodegas{background:var(--oscuro);color:var(--blanco)}
.bodegas .etiqueta{color:#C7B3F2}
.bodegas .intro{color:#D8D3E2}
.fila-bodega{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;padding:24px 0;border-top:1px solid #3A3150}
.fila-bodega .nombre{flex:1 1 220px;display:flex;flex-direction:column;gap:4px}
.fila-bodega .nombre strong{font-family:Montserrat,sans-serif;font-size:19px}
.fila-bodega .nombre span{font-size:14px;color:#A9A1B8}
.fila-bodega .barra{flex:3 1 260px;height:12px;background:#2B2339;border-radius:999px;overflow:hidden}
.fila-bodega .barra span{display:block;height:100%;background:#9B6BEB;border-radius:999px}
.fila-bodega .m2{flex:0 0 160px;text-align:right;font-family:Montserrat,sans-serif;font-weight:800;font-size:28px}
.fila-bodega .m2 small{font-size:15px;font-weight:600;color:#A9A1B8}

/* Clientes */
.clientes .encabezado-seccion{justify-content:center;text-align:center}
.clientes .encabezado-seccion .bloque{align-items:center}
.rejilla-clientes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.cliente-logo{height:140px;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:20px}
.cliente-lemus{background:#1B437E;padding:0}
.cliente-lemus img{height:180px;width:auto;max-width:none}
.cliente-sherwin{background:var(--blanco);border:1px solid var(--lila-borde)}
.cliente-sherwin img{width:240px}
.cliente-sheehan{background:#9E1111}
.cliente-sheehan img{width:300px}

/* Servicios adicionales */
.adicionales .contenedor{display:flex;flex-wrap:wrap;gap:48px}
.adicionales .bloque{flex:1 1 320px;display:flex;flex-direction:column;gap:16px}
.adicionales .bloque p{font-size:16px;line-height:1.6;color:#4A4458}
.lista-adicionales{flex:2 1 520px;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));column-gap:32px}
.lista-adicionales li{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--lila-borde);font-size:16px;font-weight:500}
.lista-adicionales svg.ic{width:20px;height:20px}

/* Contacto */
.contacto{background:var(--morado);color:var(--blanco)}
.contacto .contenedor{display:flex;flex-wrap:wrap;gap:48px}
.contacto-info{flex:1 1 460px;display:flex;flex-direction:column;gap:24px}
.contacto-info>p{font-size:17px;line-height:1.6;color:#F1EAFD}
.personas{display:flex;flex-wrap:wrap;gap:16px}
.persona{flex:1 1 240px;background:var(--morado-oscuro);border-radius:6px;padding:24px;display:flex;flex-direction:column;gap:10px}
.persona strong{font-family:Montserrat,sans-serif;font-size:19px}
.persona .cargo{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#D9C8F5;margin-bottom:4px}
.persona a{display:flex;align-items:center;gap:10px;color:var(--blanco);text-decoration:none;font-size:15px;overflow-wrap:anywhere}
.persona a:hover{text-decoration:underline}
.persona svg.ic,.direccion svg.ic{width:18px;height:18px;stroke:var(--lila-texto)}
.direccion{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5;color:#F1EAFD}
.formulario{flex:1 1 380px;background:var(--blanco);color:var(--oscuro);border-radius:6px;padding:32px;display:flex;flex-direction:column;gap:16px}
.formulario h3{font-weight:700;font-size:20px;margin-bottom:4px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:13px;font-weight:600;color:var(--texto)}
.campo input,.campo textarea{font:inherit;font-size:15px;border:1px solid #D8D1E6;border-radius:4px;padding:12px 14px;color:var(--oscuro);background:var(--blanco)}
.campo input{height:46px}
.campo textarea{resize:vertical;min-height:110px}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--morado);outline-offset:1px;border-color:var(--morado)}
.formulario button{height:50px;border:0;border-radius:4px;background:var(--morado);color:var(--blanco);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.formulario button:hover{background:var(--morado-oscuro)}
.oculto{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Pie */
.pie{background:var(--oscuro);color:#A9A1B8;padding:40px 0}
.pie .contenedor{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.pie img{width:150px;height:auto}
.pie p{font-size:13px;line-height:1.6}

/* Gracias */
.gracias{min-height:100vh;background:var(--morado);color:var(--blanco);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}
.gracias .caja{max-width:560px;display:flex;flex-direction:column;align-items:center;gap:24px}
.gracias img{width:220px}
.gracias h1{font-weight:800;font-size:clamp(2rem,5vw,3rem)}
.gracias p{font-size:18px;line-height:1.6;color:#F1EAFD}

@media (max-width:760px){
  .menu .enlace{display:none}
  .cabecera .logo img{width:140px}
  .seccion{padding:64px 0}
  .hero .contenedor{padding-top:48px;padding-bottom:56px}
  .hero-foto{height:280px}
  .fila-bodega .m2{flex:1 1 auto;text-align:left}
  .formulario{padding:24px}
}

/* Botón iniciar sesión */
.boton-login{display:inline-flex;align-items:center;gap:8px;border-color:var(--morado);color:var(--morado)!important;background:var(--blanco);font-size:15px;padding:11px 18px}
.boton-login:hover{background:var(--lila)}
.boton-login svg.ic{width:18px;height:18px}

/* Tickets */
.tickets{background:var(--blanco)}
.pasos-tickets{list-style:none;margin:0 0 48px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.pasos-tickets li{display:flex;gap:16px;align-items:flex-start;background:var(--lila);border-radius:6px;padding:24px}
.paso-num{flex:0 0 40px;height:40px;border-radius:50%;background:var(--morado);color:var(--blanco);font-family:Montserrat,sans-serif;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center}
.pasos-tickets h3{font-size:18px;font-weight:700;margin-bottom:6px}
.pasos-tickets p{font-size:15px;line-height:1.55;color:#4A4458}
.tickets-demo-zona{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.demo{flex:1.4 1 480px;min-width:0;border:1px solid var(--lila-borde);border-radius:10px;overflow:hidden;box-shadow:0 12px 40px rgba(22,18,31,.08);background:var(--blanco);position:relative}
.demo-barra{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--morado);color:var(--blanco);padding:14px 20px}
.demo-app{font-family:Montserrat,sans-serif;font-weight:700;font-size:16px}
.demo-aviso{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.18);padding:5px 10px;border-radius:999px}
.demo-tabs{display:flex;border-bottom:1px solid var(--lila-borde);overflow-x:auto}
.demo-tabs button{flex:1 0 auto;font:inherit;font-size:15px;font-weight:600;color:var(--texto-suave);background:none;border:0;border-bottom:3px solid transparent;padding:14px 18px;cursor:pointer;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.demo-tabs button[aria-selected="true"]{color:var(--morado);border-bottom-color:var(--morado)}
.demo-badge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--morado);color:var(--blanco);font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.demo-badge:empty{display:none}
.demo-panel{padding:24px;min-height:430px}
.demo-rol{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave);margin-bottom:16px}
.demo-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.demo-form .campo-ancho{grid-column:1/-1}
.demo-form select{font:inherit;font-size:15px;height:46px;border:1px solid #D8D1E6;border-radius:4px;padding:0 12px;background:var(--blanco)}
.demo-foto{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;font:inherit;font-size:15px;font-weight:600;color:var(--morado);background:var(--lila);border:1px dashed #B79BEB;border-radius:6px;cursor:pointer}
.demo-foto[aria-pressed="true"]{border-style:solid;background:#EAE0FA}
.demo-foto svg.ic{width:22px;height:22px}
.demo-crear{border:0;cursor:pointer;font-family:inherit}
.t-card{border:1px solid var(--lila-borde);border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.t-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.t-id{font-family:Montserrat,sans-serif;font-weight:700;font-size:15px}
.t-meta{font-size:13px;color:var(--texto-suave)}
.t-desc{font-size:15px;line-height:1.5}
.chip{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--lila);color:var(--morado)}
.chip-ok{background:#E3F4EA;color:#1D6B3A}
.chip-no{background:#FBE7E7;color:#9E1111}
.t-pasos{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.t-pasos span{height:6px;border-radius:999px;background:#ECE6F7}
.t-pasos span.on{background:var(--morado)}
.t-acciones{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.t-acciones button{font:inherit;font-size:14px;font-weight:600;min-height:44px;padding:0 16px;border-radius:4px;cursor:pointer;border:1px solid var(--morado);background:var(--blanco);color:var(--morado)}
.t-acciones button.primario{background:var(--morado);color:var(--blanco)}
.t-acciones button.rechazar{border-color:#C9C2D6;color:var(--texto)}
.t-precio{font-family:Montserrat,sans-serif;font-weight:800;font-size:20px}
.t-precio small{font-family:Inter,sans-serif;font-size:12px;font-weight:600;color:var(--texto-suave)}
.t-visita{font-size:13px;color:var(--texto)}
.demo-vacio{font-size:15px;color:var(--texto-suave);padding:24px;text-align:center;background:#FAF8FD;border-radius:8px}
.demo-toast{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:var(--oscuro);color:var(--blanco);font-size:14px;padding:10px 16px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .25s;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.demo-toast.ver{opacity:1}
.tickets-lado{flex:1 1 340px;display:flex;flex-direction:column;gap:28px}
.tickets-ventajas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.tickets-ventajas li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5}
.tickets-ventajas svg.ic{width:20px;height:20px;margin-top:1px}
.acceso{background:var(--oscuro);color:var(--blanco);border-radius:8px;padding:28px;display:flex;flex-direction:column;gap:14px}
.acceso h3{font-size:20px;font-weight:700}
.acceso-nota{font-size:14px;line-height:1.55;color:#D8D3E2}
.acceso .campo label{color:#D8D3E2}
.acceso .campo input{border-color:#3A3150}
.acceso .boton{border:0;cursor:pointer;font-family:inherit;margin-top:4px}
.acceso-login{font-size:14px;color:#D8D3E2}
.acceso-login a{color:#C7B3F2}
.form-estado{font-size:14px;font-weight:600;min-height:1em}
.form-estado.ok{color:#1D6B3A}
.acceso .form-estado.ok{color:#8FE0AE}
.form-estado.error{color:#C0392B}
.acceso .form-estado.error{color:#FFB4B4}

@media (max-width:760px){
  .solo-escritorio{display:none}
  .boton-login{padding:10px 14px}
  .demo-panel{padding:18px;min-height:0}
  .demo-tabs button{padding:12px 14px;font-size:14px}
}
section[id],main[id]{scroll-margin-top:84px}
