:root{
  --tinta:#10151C; --tinta-2:#1C232C; --borde-osc:#3A434E;
  --fondo:#F3F2EE; --fondo-2:#E9E7E1; --blanco:#FFFFFF; --borde:#DCDAD3;
  --gris:#4A525C; --gris-claro:#A9B0B8; --texto-osc:#C9CED4;
  --acento:#F5A524; --acento-osc:#B9440A; --ok:#1B7F4B;
  --radio:12px; --ancho:1240px;
  --display:'Space Grotesk',system-ui,sans-serif;
  --cuerpo:'IBM Plex Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--cuerpo);color:var(--tinta);background:var(--fondo);line-height:1.5}
img{max-width:100%;display:block}
a{color:var(--tinta)} a:hover{color:var(--acento-osc)}
h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.oculto{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:8px;font:inherit;font-weight:600;font-size:16px;text-decoration:none;cursor:pointer;border:1px solid transparent}
.btn-acento{background:var(--acento);color:var(--tinta)} .btn-acento:hover{color:var(--tinta);filter:brightness(1.05)}
.btn-oscuro{background:var(--tinta);color:var(--fondo)} .btn-oscuro:hover{color:var(--fondo);background:#232b35}
.btn-linea{border-color:#5A636E;color:var(--fondo);background:transparent} .btn-linea:hover{color:var(--acento)}
.btn-linea-claro{border-color:#A9A69C;color:var(--tinta);background:transparent}
.btn-bloque{width:100%}

/* Encabezado */
.cabecera{background:var(--tinta);color:var(--fondo);position:sticky;top:0;z-index:20}
.cabecera .contenedor{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:14px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--fondo)}
.marca:hover{color:var(--fondo)}
.marca-logo{width:40px;height:40px;border-radius:8px;background:var(--acento);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;color:var(--tinta)}
.marca-texto{display:flex;flex-direction:column;line-height:1.1}
.marca-texto strong{font-family:var(--display);font-size:19px}
.marca-texto small{font-size:12px;color:var(--gris-claro)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.nav a{color:var(--fondo);text-decoration:none;padding:12px 12px;font-size:15px}
.nav a:hover{color:var(--acento)}
.nav .cuenta{border:1px solid var(--borde-osc);border-radius:8px;padding:10px 14px}
.btn-carrito{background:var(--acento);color:var(--tinta);border:none;border-radius:8px;padding:10px 16px;min-height:44px;font:inherit;font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px;cursor:pointer}
.menu-movil{display:none;background:none;border:1px solid var(--borde-osc);color:var(--fondo);border-radius:8px;min-height:44px;padding:0 14px;font:inherit}
@media (max-width:860px){
  .menu-movil{display:inline-flex;align-items:center}
  .nav{width:100%;display:none;flex-direction:column;align-items:stretch}
  .nav.abierto{display:flex}
  .nav a,.nav .btn-carrito{width:100%}
}

/* Hero */
.hero{background:var(--tinta);color:var(--fondo);border-top:1px solid #252D37}
.hero .contenedor{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:56px;align-items:center;padding-top:72px;padding-bottom:88px}
.antetitulo{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--acento-osc)}
.hero .antetitulo{color:var(--acento)}
.hero h1{font-size:clamp(38px,5.2vw,60px);margin:20px 0}
.hero p{font-size:19px;color:var(--texto-osc);max-width:560px;margin:0 0 24px}
.acciones{display:flex;flex-wrap:wrap;gap:12px}
.datos-hero{display:flex;flex-wrap:wrap;gap:20px;font-size:14px;color:var(--gris-claro);margin-top:24px}
.mosaico{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.foto{border-radius:var(--radio);background:var(--tinta-2);border:1px dashed var(--borde-osc);display:flex;align-items:center;justify-content:center;color:#8A929B;font-size:14px;text-align:center;padding:12px;overflow:hidden}
.foto img{width:100%;height:100%;object-fit:cover}
.foto-grande{grid-column:span 2;height:240px}
.foto-chica{height:170px}
.tarjeta-licencia{height:170px;border-radius:var(--radio);background:var(--acento);color:var(--tinta);display:flex;flex-direction:column;justify-content:flex-end;padding:20px}
.tarjeta-licencia strong{font-family:var(--display);font-size:32px}

/* Secciones */
.seccion{padding:64px 0}
.seccion-gris{background:var(--fondo-2)}
.titulo-seccion{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:28px}
.titulo-seccion h2{font-size:32px;margin-top:6px}
.titulo-seccion .lado{font-size:15px;color:var(--gris)}
.rejilla{display:grid;gap:20px}
.rejilla-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rejilla-4{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

.tarjeta{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:28px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--tinta)}
a.tarjeta:hover{border-color:var(--tinta);color:var(--tinta)}
.tarjeta h3{font-size:22px}
.tarjeta p{margin:0;color:var(--gris);font-size:15px}
.tarjeta .img{height:150px;border-radius:8px;background:var(--fondo-2);display:flex;align-items:center;justify-content:center;color:#6A727C;font-size:14px;overflow:hidden}
.tarjeta .img img{width:100%;height:100%;object-fit:cover}
.etiqueta{font-size:13px;font-weight:600;color:var(--acento-osc)}
.precio{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-top:auto}
.precio strong{font-family:var(--display);font-size:26px}
.precio span{font-size:14px;color:var(--gris)}

.producto{background:var(--blanco);border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column}
.producto .img{height:190px;background:var(--fondo);display:flex;align-items:center;justify-content:center;color:#6A727C;font-size:14px}
.producto .img img{width:100%;height:100%;object-fit:cover}
.producto .cuerpo{padding:20px;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.producto .tipo{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--gris)}
.producto h3{font-family:var(--cuerpo);font-size:18px;font-weight:600;line-height:1.3}
.producto .nota{font-size:14px;color:var(--gris)}
.producto .monto{font-family:var(--display);font-size:22px;font-weight:700;margin-top:auto}

.filtros{display:flex;flex-wrap:wrap;gap:8px}
.filtro{min-height:44px;padding:10px 16px;border-radius:999px;border:1px solid #A9A69C;background:transparent;color:var(--tinta);font:inherit;font-size:14px;cursor:pointer}
.filtro[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--fondo)}

.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.paso{border-top:3px solid var(--tinta);padding-top:18px}
.paso b{display:block;font-family:var(--display);font-size:40px;color:var(--acento-osc)}
.paso h3{font-family:var(--cuerpo);font-size:19px;font-weight:600;margin:6px 0}
.paso p{margin:0;color:var(--gris);font-size:15px}

.banda{background:var(--tinta);color:var(--fondo);border-radius:16px;padding:44px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px}
.banda h2{font-size:34px;margin-bottom:10px}
.banda p{margin:0;color:var(--texto-osc);font-size:17px;max-width:620px}

/* Formulario */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:28px}
.campo{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:500}
.campo.ancho{grid-column:1/-1}
.campo input,.campo select,.campo textarea{font:inherit;font-weight:400;padding:12px;border:1px solid #A9A69C;border-radius:8px;background:var(--blanco);color:var(--tinta);min-height:46px}
.campo textarea{min-height:100px;resize:vertical}

/* Pie */
.pie{background:var(--tinta);color:var(--gris-claro);font-size:14px}
.pie .contenedor{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;padding-top:48px;padding-bottom:48px}
.pie strong{color:var(--fondo);display:block;margin-bottom:8px}
.pie a{color:var(--gris-claro);display:block;padding:3px 0}
.pie a:hover{color:var(--acento)}
.pie-final{border-top:1px solid #252D37;padding:16px 24px;text-align:center;font-size:13px}

/* Ficha de producto */
.migas{font-size:14px;color:var(--gris);display:flex;flex-wrap:wrap;gap:8px;padding-top:20px}
.migas a{color:var(--gris)}
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:48px;align-items:start;padding:28px 0 64px}
.ficha .principal{height:420px;border-radius:var(--radio);background:var(--fondo-2);border:1px dashed #A9A69C;display:flex;align-items:center;justify-content:center;color:#6A727C;overflow:hidden}
.ficha .principal img{width:100%;height:100%;object-fit:cover}
.ficha h1{font-size:clamp(36px,4vw,48px);margin:10px 0 14px}
.ficha .lead{font-size:18px;color:var(--gris);margin:0 0 22px}
.planes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 18px}
.plan{display:flex;flex-direction:column;gap:4px;text-align:left;padding:18px;border-radius:var(--radio);font:inherit;color:var(--tinta);cursor:pointer;background:transparent;border:2px solid #C9C6BC}
.plan[aria-pressed="true"]{background:var(--blanco);border-color:var(--tinta)}
.plan b{font-size:14px} .plan strong{font-family:var(--display);font-size:26px} .plan span{font-size:13px;color:var(--gris)}
.caja-incluye{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:22px;margin-top:22px}
.caja-incluye ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.caja-incluye li{display:flex;gap:10px;font-size:15px}
.caja-incluye li::before{content:"";flex-shrink:0;width:18px;height:18px;margin-top:2px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B7F4B' stroke-width='2.6'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E")}
.nota-pago{font-size:14px;color:var(--gris);text-align:center;margin-top:10px}

/* Carrito */
.velo{position:fixed;inset:0;background:rgba(16,21,28,.5);z-index:40}
.carrito{position:fixed;top:0;right:0;height:100%;width:min(440px,100%);background:var(--fondo);z-index:50;display:flex;flex-direction:column;box-shadow:-8px 0 24px rgba(0,0,0,.2)}
.carrito header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--borde)}
.carrito header h2{font-size:24px}
.cerrar{background:none;border:none;font:inherit;font-size:28px;line-height:1;width:44px;height:44px;cursor:pointer;color:var(--tinta)}
.carrito .lista{flex:1;overflow:auto;padding:16px 24px;display:flex;flex-direction:column;gap:12px}
.item{background:var(--blanco);border:1px solid var(--borde);border-radius:10px;padding:14px;display:flex;justify-content:space-between;gap:12px}
.item small{color:var(--gris);display:block}
.item .cant{display:flex;align-items:center;gap:6px}
.item .cant button{width:34px;height:34px;border-radius:6px;border:1px solid #A9A69C;background:var(--blanco);cursor:pointer;font:inherit}
.carrito .pie-carrito{border-top:1px solid var(--borde);padding:20px 24px;display:flex;flex-direction:column;gap:12px}
.total{display:flex;justify-content:space-between;font-family:var(--display);font-size:22px;font-weight:700}
.vacio{color:var(--gris);text-align:center;padding:40px 0}

.aviso{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--tinta);color:var(--fondo);padding:12px 20px;border-radius:8px;z-index:60;font-size:15px}
