
/* Spotled · mismas reglas que spotled.com.mx (manual v3, oct-2026). Minimalista: blanco, gris suave y azul profundo; un solo azul de acción. */
@font-face{font-family:"Michroma";src:url(michroma.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{--profundo:#040608;--electrico:#1C46F0;--luz:#47B7EF;--ink:#040608;--body:#343840;--muted:#5E646E;--rule:#DCDEE2;--soft:#F3F4F6;--night:#040608;--night-ink:#F2F3F5;--night-body:#B9BDC4;--night-rule:#23272E;--fm:"Michroma","Poppins",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:#fff;color:var(--body);font-family:var(--font-body,Poppins),Arial,sans-serif;font-size:15.5px;line-height:1.7}
body{min-height:100vh;display:flex;flex-direction:column}main{flex:1 0 auto}/* el pie queda abajo en páginas cortas */
a{color:inherit}img{max-width:100%;display:block}button,input,select{font:inherit}p{margin:0}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--luz);outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding-inline:clamp(16px,5vw,48px)}
.skip{position:absolute;top:-100px}.skip:focus{top:10px;background:#fff;padding:12px;z-index:30}
h1,h2,h3,h4{color:var(--ink);margin:0;font-weight:700;text-wrap:balance}
h1,h2{letter-spacing:-.02em;line-height:1.12}h3,h4{font-weight:600;letter-spacing:-.01em;line-height:1.3}
.eyebrow{font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--electrico)}
.dark .eyebrow{color:var(--luz)}
.dark{background:var(--night);color:var(--night-body)}.dark h1,.dark h2,.dark h3{color:var(--night-ink)}
.soft{background:var(--soft)}
section.content{padding-block:clamp(56px,8vw,96px);scroll-margin-top:64px}

/* Botones: 4 px, borde 1.5 px, un solo azul */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:600;text-decoration:none;padding:12px 18px;border-radius:4px;border:1.5px solid currentColor;cursor:pointer;color:var(--ink);background:transparent;transition:background .15s,border-color .15s}
.btn.primary{background:var(--electrico);border-color:var(--electrico);color:#fff}.btn.primary:hover{background:#1636C4;border-color:#1636C4}
.btn.ghost-dark{color:#fff;border-color:rgba(255,255,255,.5)}.btn.ghost-dark:hover{border-color:#fff}
.btn.small{padding:9px 14px;font-size:14px;white-space:nowrap}

/* Encabezado */
header.site{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px}
.logo img{height:17px;width:auto}
header.site nav{display:flex;align-items:center;gap:22px;font-size:14px}
header.site nav a:not(.btn){text-decoration:none;color:var(--body)}header.site nav a:not(.btn):hover{color:var(--electrico)}

/* Portada */
.hero{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(64px,10vw,120px) clamp(48px,7vw,80px)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,6,8,.95) 0%,rgba(4,6,8,.78) 45%,rgba(4,6,8,.25) 100%);z-index:-1}
.hero h1{font-size:clamp(34px,5vw,60px);line-height:1.06;letter-spacing:-.025em;color:#fff;max-width:17ch;margin-top:18px}
.hero p.lead{font-size:clamp(17px,1.6vw,20px);color:#C2CCD4;margin-top:20px;max-width:46ch}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .pie-foto{position:absolute;right:clamp(16px,5vw,48px);bottom:16px;font-size:12px;color:rgba(255,255,255,.7)}

/* Banda de respaldo (como las cifras del sitio) */
.datos{background:var(--night);border-top:1px solid var(--night-rule)}
.datos .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-block:26px}
.datos b{display:block;font-family:var(--fm);font-weight:400;font-size:18px;color:#fff;letter-spacing:.02em}
.datos span{font-size:13.5px;color:var(--night-body)}

/* Encabezado de sección: línea y cuadro azul luz */
.shead{max-width:760px;display:grid;gap:12px;margin-bottom:40px;position:relative;padding-left:26px;border-left:1.5px solid var(--luz)}
.shead:before{content:"";position:absolute;left:-8px;top:2px;width:14px;height:13px;background:var(--luz)}
.shead h2{font-size:clamp(28px,3.8vw,42px)}.shead p{font-size:17.5px}
.dark .shead p{color:var(--night-body)}

/* Paquetes */
.packages{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--rule);border-radius:6px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.card>img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover}
.card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px}
.card .tipo{font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--electrico)}
.card h3{font-size:26px;font-weight:700;letter-spacing:-.02em}
.card .lugar{font-size:13.5px;color:var(--muted)}
.price{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin-top:8px}
.tax{font-size:13px;color:var(--muted)}
.payline{margin-top:10px;padding:12px 14px;background:var(--soft);border-radius:6px;font-size:13.5px;line-height:1.6}
.payline strong{display:block;color:var(--ink)}
.card .btn{width:100%;margin-top:auto}.card .payline{margin-bottom:14px}
.discreet{font-size:13px;color:var(--muted);margin-top:18px}
.inclusions{margin-top:28px;border-top:1px solid var(--rule)}
.inclusions summary{cursor:pointer;padding:18px 0;font-size:16px;font-weight:600;color:var(--ink)}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-bottom:24px}
.columns h3{font-size:17px;margin-bottom:8px}.columns ul{margin:0;padding-left:18px}.columns p,.columns li{font-size:15px}.columns p+p{margin-top:8px}

/* Pasos: como los pilares del sitio */
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink)}
.step{padding:24px 24px 8px 0;display:grid;gap:10px;align-content:start}
.step+.step{padding-left:24px;border-left:1px solid var(--rule)}
.number{font-family:var(--fm);font-size:12px;letter-spacing:.06em;color:var(--electrico)}
.step h3{font-size:21px;font-weight:700}

/* Nota destacada (el "puente" del sitio) */
.puente{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding:18px 22px;border:1px solid var(--rule);border-left:4px solid var(--electrico);border-radius:8px;background:#fff}
.puente p{font-size:16px;color:var(--ink);max-width:70ch}
.soft .puente{background:#fff}
.dark .puente{background:rgba(255,255,255,.04);border-color:var(--night-rule);border-left-color:var(--luz)}.dark .puente p{color:#fff}

/* Interior y exterior */
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.project-grid .shead{margin-bottom:24px}
.rows{border-top:1px solid var(--night-rule)}
.row{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--night-rule);font-size:16px}
.row b{color:#fff;font-weight:600}.row span{font-family:var(--fm);font-size:13px;color:var(--luz)}
.project-notes{display:grid;gap:12px;margin-top:20px;font-size:15px}.project-notes strong{color:#fff;font-weight:600}

/* Preguntas */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--rule);padding:18px 0}.faq details:first-of-type{border-top:1px solid var(--rule)}
.faq summary{cursor:pointer;font-size:17px;font-weight:600;color:var(--ink)}
.faq details p{margin-top:10px;font-size:15.5px}

/* Pie */
footer{background:var(--night);color:var(--night-body);padding-block:48px 40px;border-top:1px solid var(--night-rule);font-size:14px}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px}
.foot img{height:17px;width:auto;margin-bottom:14px}
.foot h4{color:var(--night-ink);font-family:var(--fm);font-size:12px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.foot a{color:var(--night-ink);text-decoration:none}.foot a:hover{color:var(--luz)}
.foot-bottom{margin-top:32px;padding-top:18px;border-top:1px solid var(--night-rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:12.5px}

/* Páginas internas, producto, catálogo, carrito y contraseña (mismas reglas que la portada) */
.crumb{display:inline-block;font-size:14px;color:var(--muted);text-decoration:none;margin-bottom:24px}.crumb:hover{color:var(--electrico)}
.product{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.product-photo{width:100%;height:auto;border-radius:6px;border:1px solid var(--rule)}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}.thumbs img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px;border:1px solid var(--rule)}
.product .info{display:grid;gap:10px;align-content:start;position:sticky;top:88px}
.product h1{font-size:clamp(30px,3.6vw,42px)}
.product .price{font-size:30px;margin-top:6px}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.compra{display:grid;gap:6px;margin-top:14px}.compra label{font-size:14px;font-weight:600;color:var(--ink)}
.compra select,.compra input{padding:11px 12px;border:1px solid var(--rule);border-radius:4px;width:100%;margin-bottom:8px;background:#fff}
.description{margin-top:22px;padding-top:22px;border-top:1px solid var(--rule)}
.rte h2{font-size:22px;margin:26px 0 8px}.rte h3{font-size:18px;margin:20px 0 6px}.rte p+p{margin-top:12px}.rte ul,.rte ol{padding-left:20px;margin:10px 0}.rte li+li{margin-top:4px}.rte a{color:var(--electrico)}
.rte table{border-collapse:collapse;width:100%;margin:14px 0;font-size:15px}.rte th,.rte td{border-bottom:1px solid var(--rule);padding:9px 12px 9px 0;text-align:left;vertical-align:top}.rte th{color:var(--ink)}
.pagina{max-width:820px}.pagina h1{font-size:clamp(28px,3.8vw,42px)}
.card h3 a{text-decoration:none}.card>a img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover}
.paginas{margin-top:32px;font-size:15px}.paginas a,.paginas span{display:inline-block;padding:6px 10px;margin-right:4px;border:1px solid var(--rule);border-radius:4px;text-decoration:none}.paginas .current{background:var(--ink);color:#fff;border-color:var(--ink)}
.carrito{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start}
.cart-row{display:grid;grid-template-columns:96px 1fr 110px;gap:20px;align-items:center;border-bottom:1px solid var(--rule);padding:18px 0}.cart-row:first-child{border-top:1px solid var(--rule)}
.cart-row img{width:96px;aspect-ratio:3/2;object-fit:cover;border-radius:4px}.cart-t{font-weight:600;color:var(--ink);text-decoration:none}.quitar{font-size:13.5px;color:var(--muted)}
.cart-row label{font-size:13px;color:var(--muted);display:grid;gap:4px}.cart-row input{width:72px;padding:8px;border:1px solid var(--rule);border-radius:4px}
.resumen{display:grid;gap:12px;padding:22px;border:1px solid var(--rule);border-radius:8px;background:#fff;position:sticky;top:88px}.resumen .btn{width:100%}
.total{display:flex;justify-content:space-between;align-items:baseline;font-size:16px;color:var(--ink)}.total b{font-size:24px}
.password{min-height:100vh;display:grid;place-content:center;justify-items:center;text-align:center;gap:16px;padding:40px clamp(16px,5vw,48px)}
.password h1{font-size:clamp(30px,4.4vw,48px);max-width:18ch}.password>p{color:var(--night-body);font-size:17px}
.password img{height:22px;width:auto;margin-bottom:22px}
.password details{margin-top:28px;font-size:14px}.password summary{cursor:pointer;color:var(--night-body)}
.password form{display:grid;gap:8px;margin-top:14px;text-align:left;min-width:min(320px,80vw)}.password label{color:var(--night-ink);font-size:14px}
.password input{padding:11px 12px;border-radius:4px;border:1px solid var(--night-rule);background:var(--night);color:#fff}
.empty{padding:24px;border:1px solid var(--rule);border-radius:6px}.pill{background:#E6EBFE;color:var(--electrico);padding:3px 9px;font-size:12px;border-radius:4px;display:inline-block}

@media(max-width:1050px){.packages{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
  header.site nav a:not(.btn){display:none}.logo img{height:14px}
  .hero:after{background:linear-gradient(180deg,rgba(4,6,8,.85),rgba(4,6,8,.92))}.hero .pie-foto{position:static;display:block;margin-top:28px;padding-inline:clamp(16px,5vw,48px)}
  .datos .wrap{grid-template-columns:1fr;gap:14px}
  .packages,.columns,.project-grid,.product,.foot{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}.step,.step+.step{padding:20px 0 4px;border-left:0}.step+.step{border-top:1px solid var(--rule)}
  .puente{flex-direction:column;align-items:flex-start}
  .cart-row{grid-template-columns:64px 1fr 72px;gap:12px}.cart-row img{width:64px}.carrito{grid-template-columns:1fr}.product .info,.resumen{position:static}.thumbs{grid-template-columns:repeat(4,1fr)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
