:root{
  --noche:#1B0B0D;
  --panel:#171110;
  --alto:#231D1C;
  --texto:#F6F1EE;
  --sub:#959191;
  --cap:#949190;
  --aura:#B1822F;
  --brasa:#C78B83;
  --aura-12:rgba(177,130,47,.12);
  --aura-30:rgba(177,130,47,.30);
  --aura-55:rgba(177,130,47,.55);
  --aura-0:rgba(177,130,47,0);
  --brasa-18:rgba(199,139,131,.18);
  --brasa-35:rgba(199,139,131,.35);
  --brasa-0:rgba(199,139,131,0);
  --linea:rgba(246,241,238,.10);
  --linea-2:rgba(246,241,238,.18);
  --sombra:0 34px 80px -46px rgba(0,0,0,.95);
  --fuente:"Exo",system-ui,sans-serif;
  --rotulo:"Familjen Grotesk",system-ui,sans-serif;
}

/* Ambient Light Design ---------------------------------------------------
   Тёмная страница с радиальным светом: пятна за блоками, светящаяся кромка
   у панелей, мягкая тень наружу. Всё своё, поверх Tailwind по CDN.        */

*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{background:var(--noche);color:var(--texto);font-family:var(--fuente);
     -webkit-font-smoothing:antialiased;line-height:1.55}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{letter-spacing:-.015em;line-height:1.15}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 300,
     'GRAD' 0,'opsz' 40;line-height:1}

.etiqueta{font-family:var(--rotulo);font-weight:500;font-size:.72rem;
     letter-spacing:.2em;text-transform:uppercase}
.marca{font-family:var(--rotulo);font-weight:700;font-size:1.15rem;
     letter-spacing:.02em;color:var(--texto)}
.brillo{color:var(--brasa);text-shadow:0 0 34px var(--brasa-35)}
.enlace{color:var(--aura);text-decoration:underline;
     text-underline-offset:3px}
.enlace:hover{text-shadow:0 0 18px var(--aura-55)}

/* световые пятна ------------------------------------------------------- */
.zona{position:relative;isolation:isolate;overflow:hidden}
.mancha{position:absolute;z-index:-1;pointer-events:none;border-radius:50%}
.mancha-fria{background:radial-gradient(closest-side,var(--aura-30),
     var(--aura-0))}
.mancha-calida{background:radial-gradient(closest-side,var(--brasa-18),
     var(--brasa-0))}

/* панели со светящейся кромкой ----------------------------------------- */
.panel{position:relative;border-radius:18px;
     background:linear-gradient(158deg,var(--alto),#100C0B);
     box-shadow:var(--sombra)}
.panel::before{content:"";position:absolute;inset:0;border-radius:inherit;
     padding:1px;pointer-events:none;
     background:linear-gradient(150deg,var(--aura-55),var(--brasa-35) 45%,
       rgba(246,241,238,.06) 78%);
     -webkit-mask:linear-gradient(#000 0 0) content-box,
       linear-gradient(#000 0 0);
     -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,
       linear-gradient(#000 0 0);mask-composite:exclude}
.panel-luz{box-shadow:var(--sombra),0 0 70px -34px var(--aura-55)}
.panel-hover{transition:transform .3s ease,box-shadow .3s ease}
.panel-hover:hover{transform:translateY(-3px);
     box-shadow:var(--sombra),0 0 60px -28px var(--aura-55)}

/* шапка ---------------------------------------------------------------- */
.barra{position:fixed;top:0;left:0;right:0;z-index:50;
     background:rgba(12,9,8,.72);backdrop-filter:blur(14px);
     border-bottom:1px solid var(--linea);transition:background .3s ease}
.barra.densa{background:rgba(12,9,8,.95)}
.barra::after{content:"";position:absolute;left:50%;bottom:-1px;width:64%;
     height:1px;transform:translateX(-50%);
     background:linear-gradient(90deg,transparent,var(--aura-55),transparent)}
.enlace-nav{font-size:.95rem;color:var(--sub);transition:color .25s,
     text-shadow .25s}
.enlace-nav:hover{color:var(--texto);text-shadow:0 0 20px var(--aura-55)}

/* кнопки --------------------------------------------------------------- */
.boton{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;
     padding:.95rem 1.7rem;font-weight:700;font-size:.98rem;cursor:pointer;
     transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease}
.boton .material-symbols-outlined{font-size:20px}
.boton-chico{padding:.6rem 1.15rem;font-size:.88rem}
.boton-luz{color:var(--noche);
     background:linear-gradient(120deg,var(--aura),#FFFFFF 210%);
     box-shadow:0 0 34px -10px var(--aura-55)}
.boton-luz:hover{box-shadow:0 0 48px -8px var(--aura-55);
     transform:translateY(-1px)}
.boton-borde{color:var(--texto);border:1px solid var(--linea-2)}
.boton-borde:hover{border-color:var(--aura-55);
     box-shadow:0 0 34px -18px var(--aura-55)}
.boton-plano{color:var(--sub)}
.boton-plano:hover{color:var(--texto)}

/* первый экран --------------------------------------------------------- */
.portada{position:relative;padding-bottom:4rem}
.escena{position:absolute;left:0;right:0;top:0;bottom:7rem;overflow:hidden}
.escena .fondo{width:100%;height:100%;object-fit:cover;
     object-position:center 42%}
.velo{position:absolute;inset:0;
     background:linear-gradient(180deg,rgba(12,9,8,.94) 0%,
       rgba(12,9,8,.84) 46%,rgba(12,9,8,.97) 100%)}
.texto-portada{color:rgba(246,241,238,.93)}
.nota-portada{color:rgba(246,241,238,.72)}
.foco{position:absolute;left:-140px;top:40px;width:820px;height:520px;
     border-radius:50%;
     background:radial-gradient(closest-side,var(--brasa-35),var(--brasa-0))}
.tarjeta-cifra{backdrop-filter:blur(6px)}
.numero{font-family:var(--rotulo);font-weight:700;font-size:1.6rem;
     color:var(--texto);line-height:1.1}
.numero-grande{font-size:2.3rem;color:var(--brasa)}
.celda-media{border-top:1px solid var(--linea);padding-top:1.3rem}
@media(min-width:768px){
  .escena{bottom:9rem}
  .velo{background:linear-gradient(90deg,rgba(12,9,8,.96) 0%,
     rgba(12,9,8,.88) 44%,rgba(12,9,8,.48) 78%,rgba(12,9,8,.36) 100%),
     linear-gradient(180deg,rgba(12,9,8,.86) 0%,rgba(12,9,8,.58) 45%,
     rgba(12,9,8,.96) 100%)}
  .celda-media{border-top:0;border-left:1px solid var(--linea);padding-top:0;
     padding-left:1.6rem}
}

/* полоса цифр ---------------------------------------------------------- */
.celdas{display:grid;grid-template-columns:1fr;border:1px solid var(--linea);
     border-radius:22px;overflow:hidden;background:rgba(23,17,16,.65)}
.celda{position:relative;padding:1.9rem 1.5rem;
     border-top:1px solid var(--linea)}
.celda:first-child{border-top:0}
.celda::after{content:"";position:absolute;left:50%;bottom:-55%;width:250px;
     height:190px;transform:translateX(-50%);pointer-events:none;
     background:radial-gradient(closest-side,var(--aura-30),var(--aura-0))}
@media(min-width:860px){
  .celdas{grid-template-columns:repeat(3,1fr)}
  .celda{border-top:0;border-left:1px solid var(--linea);padding:2.4rem 2rem}
  .celda:first-child{border-left:0}
}

/* значок в световом ореоле --------------------------------------------- */
.halo{display:inline-grid;place-items:center;width:62px;height:62px;
     border-radius:999px;
     background:radial-gradient(circle at 50% 45%,var(--aura-30),
       var(--aura-0) 72%);
     box-shadow:inset 0 0 0 1px var(--linea),0 0 30px -8px var(--aura-55)}
.halo .material-symbols-outlined{font-size:30px;color:var(--aura)}
.halo-grande{width:84px;height:84px}
.halo-grande .material-symbols-outlined{font-size:40px}

/* зона покрытия -------------------------------------------------------- */
.marco-foto{overflow:hidden}
.marco-foto img{border-radius:12px;min-height:260px}
.lista-estados{list-style:none;padding:0;margin:0}
.lista-estados li{display:flex;gap:.9rem;align-items:flex-start;
     padding:1rem 0;border-top:1px solid var(--linea)}
.lista-estados li:first-child{border-top:0}
.lista-estados .punto{color:var(--brasa);font-size:22px;margin-top:2px}
.estado{font-family:var(--rotulo);font-weight:700;letter-spacing:.01em}

/* лента отзывов -------------------------------------------------------- */
.tira{display:flex;gap:1rem;overflow-x:auto;padding:.4rem .2rem 1.2rem;
     scroll-behavior:smooth;overscroll-behavior-x:contain}
.tira>figure{flex:0 0 auto;width:min(84vw,330px)}
.tira::-webkit-scrollbar{height:6px}
.tira::-webkit-scrollbar-track{background:rgba(246,241,238,.06);
     border-radius:99px}
.tira::-webkit-scrollbar-thumb{background:var(--aura-30);border-radius:99px}
.comilla{color:var(--brasa);font-size:28px}
.inicial{display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;
     border-radius:999px;font-family:var(--rotulo);font-weight:700;
     font-size:.85rem;color:var(--noche);
     background:linear-gradient(140deg,var(--aura),var(--brasa))}
.flecha{display:grid;place-items:center;width:44px;height:44px;
     border-radius:999px;border:1px solid var(--linea-2);color:var(--texto);
     background:rgba(23,17,16,.6);transition:box-shadow .3s,border-color .3s}
.flecha:hover{border-color:var(--aura-55);
     box-shadow:0 0 30px -12px var(--aura-55)}

/* вопросы-ответы ------------------------------------------------------- */
.pregunta{position:relative;border-radius:16px;border:1px solid var(--linea);
     background:rgba(23,17,16,.6);transition:box-shadow .3s ease,
     border-color .3s ease,background .3s ease}
.pregunta summary{display:flex;gap:1rem;align-items:flex-start;
     justify-content:space-between;cursor:pointer;list-style:none;
     padding:1.2rem 1.4rem;font-weight:700}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta p{padding:0 1.4rem 1.4rem}
.pregunta .mas{color:var(--aura);transition:transform .3s ease}
.pregunta[open]{border-color:var(--aura-30);background:rgba(28,20,19,.8);
     box-shadow:0 0 60px -26px var(--aura-55)}
.pregunta[open] .mas{transform:rotate(45deg)}

/* форма ---------------------------------------------------------------- */
.etiqueta-campo{display:block;font-family:var(--rotulo);font-weight:500;
     font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
     color:var(--cap);margin-bottom:.5rem}
.campo{width:100%;border-radius:12px;padding:.85rem 1rem;color:var(--texto);
     background:rgba(12,9,8,.75);border:1px solid var(--linea-2);
     font-family:var(--fuente);font-size:.98rem;transition:border-color .25s,
     box-shadow .25s}
.campo::placeholder{color:var(--cap)}
.campo:focus{outline:none;border-color:var(--aura-55);
     box-shadow:0 0 0 3px var(--aura-12),0 0 30px -14px var(--aura-55)}
.campo.mal{border-color:#E08A7A;box-shadow:0 0 0 3px rgba(224,138,122,.14)}
select.campo{appearance:none;background-image:linear-gradient(45deg,
     transparent 50%,var(--cap) 50%),linear-gradient(135deg,var(--cap) 50%,
     transparent 50%);background-position:calc(100% - 20px) 55%,
     calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;
     background-repeat:no-repeat;padding-right:2.6rem}
select.campo option{background:#171110;color:#F6F1EE}
.error{display:none;color:#E8A091;font-size:.82rem;margin-top:.45rem}
.error.visible{display:block}
.acuerdo{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer}
.acuerdo input{margin-top:.25rem;width:18px;height:18px;flex:0 0 auto;
     accent-color:#2CBEA8}
/* подвал панели заявки: «что дальше» и контакты стоят в два ручья внутри
   той же широкой панели — отдельного бокового столбца у формы нет */
.pie-panel{display:grid;gap:2rem;margin-top:2.4rem;padding-top:2rem;
     border-top:1px solid var(--linea)}
@media(min-width:860px){
  .pie-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.6rem}
}
.pasos{list-style:none;counter-reset:paso;padding:0;margin:0}
.pasos li{counter-increment:paso;position:relative;padding-left:2.4rem;
     margin-bottom:1rem;font-size:.92rem;color:var(--sub);line-height:1.6}
.pasos li::before{content:counter(paso);position:absolute;left:0;top:-2px;
     display:grid;place-items:center;width:26px;height:26px;border-radius:999px;
     font-family:var(--rotulo);font-size:.75rem;font-weight:700;
     color:var(--aura);border:1px solid var(--aura-30);
     box-shadow:0 0 20px -8px var(--aura-55)}
.contacto{list-style:none;padding:0;margin:0}
.contacto li{display:flex;gap:.7rem;align-items:flex-start;
     margin-bottom:.9rem;font-size:.92rem;color:var(--sub)}
.contacto .material-symbols-outlined{color:var(--brasa);font-size:20px;
     margin-top:2px}

/* подвал --------------------------------------------------------------- */
.pie{border-top:1px solid var(--linea);background:#0A0706}
.enlace-pie{color:var(--sub);transition:color .25s,text-shadow .25s;
     display:inline-block;max-width:100%;overflow-wrap:anywhere}
.enlace-pie:hover{color:var(--texto);text-shadow:0 0 18px var(--aura-55)}
.linea-pie{margin-top:2.5rem;padding-top:1.5rem;
     border-top:1px solid var(--linea);font-size:.8rem;color:var(--cap)}

/* печенья -------------------------------------------------------------- */
.galletas{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:60;
     display:none}
.galletas.visible{display:block}
@media(min-width:860px){.galletas{right:auto;width:420px}}

/* правовые страницы ---------------------------------------------------- */
.texto-legal h2{font-size:1.35rem;margin:2.1rem 0 .7rem;color:var(--texto)}
.texto-legal h2:first-child{margin-top:0}
.texto-legal p,.texto-legal li{color:var(--sub);line-height:1.75;
     margin-bottom:.95rem;font-size:.97rem}
.texto-legal ul{list-style:disc;padding-left:1.3rem;margin-bottom:1rem}
.texto-legal li{margin-bottom:.5rem}