/* SolarMexicoExperts.club · Modern Product Showcase
   Кадр как товар: светлая страница, кадры широкими полосами,
   узкая карточка «$0 enganche» сбоку, три горизонтальные карточки.
   Начертания посчитаны mx.base.peso и лежат переменными: у Judson
   единственный вес 400, поэтому жирных заголовков тут нет вовсе. */
:root{
  --f-titular:'Judson',Georgia,'Times New Roman',serif;
  --f-cuerpo:'Monda',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-rotulo:'Gudea',system-ui,-apple-system,'Segoe UI',sans-serif;
  --w-titular:400;
  --w-cuerpo:400;
  --w-medio:500;
  --w-fuerte:700;
  --w-rotulo:700;
  --w-rotulo-med:400;
  --papel:#FCFCFC;
  --papel-velo:#FDFDFD;
  --nata:#F3F6F3;
  --linea:#DCE4DE;
  --linea-osc:#406C4A;
  --tinta:#19241B;
  --humo:#6F6F6F;
  --humo-nata:#6A6C6A;
  --sol:#276F36;
  --sobre-sol:#FFFFFF;
  --cielo:#B12F95;
  --alerta:#B3261E;
  --oscuro:#164C22;
  --sobre-osc:#FFFFFF;
  --tenue-osc:#A9BDAE;
  --cielo-osc:#DCA2CF;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);
     font-family:var(--f-cuerpo);font-weight:var(--w-cuerpo);
     font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}

/* ── полоса содержимого ─────────────────────────────────────────────── */
.banda{width:100%;max-width:1180px;margin:0 auto;padding:0 18px}
.banda--angosta{max-width:760px}
@media(min-width:768px){.banda{padding:0 36px}}

/* ── шрифтовые роли ─────────────────────────────────────────────────── */
.titular{font-family:var(--f-titular);font-weight:var(--w-titular);
         line-height:1.07;letter-spacing:-.012em;color:var(--tinta)}
.t-xl{font-size:clamp(2.05rem,6.2vw,4.3rem)}
.t-lg{font-size:clamp(1.62rem,4.1vw,2.85rem)}
.t-md{font-size:clamp(1.18rem,2.4vw,1.6rem);line-height:1.22}
.rotulo{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
        text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;
        color:var(--sol)}
.prosa{color:var(--humo)}
.cifra{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
       font-variant-numeric:tabular-nums;color:var(--sol);white-space:nowrap}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24}

/* ── кнопки: чистые, с лёгким подъёмом ──────────────────────────────── */
.boton{display:inline-flex;align-items:center;gap:.5rem;
       padding:.92rem 1.65rem;background:var(--sol);color:var(--sobre-sol);
       border:1px solid var(--sol);text-decoration:none;cursor:pointer;
       font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
       font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;
       transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.boton .material-symbols-outlined{font-size:1.1rem}
.boton:hover{transform:translateY(-2px);
             box-shadow:0 16px 28px -16px rgba(0,0,0,.55)}
.boton:focus-visible{outline:3px solid var(--cielo);outline-offset:3px}
.boton--linea{background:transparent;color:var(--sol);
              border-color:var(--linea)}
.boton--linea:hover{border-color:var(--sol)}
.boton--chico{padding:.62rem 1.05rem;font-size:.66rem;letter-spacing:.09em;
              white-space:nowrap;flex:0 0 auto}
.boton--bloque{display:flex;justify-content:center;width:100%}

/* ── шапка ──────────────────────────────────────────────────────────── */
.cabeza{position:sticky;top:0;z-index:50;background:var(--papel-velo);
        backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.cabeza__fila{display:flex;align-items:center;gap:1rem;
              min-height:72px;justify-content:space-between}
.marca{display:flex;align-items:center;gap:.65rem;text-decoration:none;
       flex:0 1 auto;min-width:0}
.marca__signo{width:40px;height:40px;object-fit:contain;flex:0 0 auto}
.marca__nombre{font-family:var(--f-titular);font-weight:var(--w-titular);
               font-size:1.08rem;letter-spacing:-.01em;color:var(--tinta);
               overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-esc{display:none;gap:1.9rem;margin-left:auto}
.nav-l{font-family:var(--f-rotulo);font-weight:var(--w-rotulo-med);
       font-size:.78rem;letter-spacing:.09em;color:var(--humo);
       text-decoration:none;padding-bottom:2px;
       border-bottom:1px solid transparent;white-space:nowrap}
.nav-l:hover{color:var(--sol);border-bottom-color:var(--sol)}
.nav-mov{border-top:1px solid var(--linea)}
.nav-mov__riel{display:flex;gap:1.4rem;overflow-x:auto;padding:.7rem 18px;
               min-width:100%;-webkit-overflow-scrolling:touch;
               scrollbar-width:none}
.nav-mov__riel::-webkit-scrollbar{display:none}
.nav-mov__riel .nav-l{flex:0 0 auto}
@media(min-width:1024px){
  .nav-esc{display:flex}
  .nav-mov{display:none}
}

/* ── первый экран: текст сверху, кадр отдельной полосой ─────────────── */
.portada{padding:clamp(2.6rem,6vw,5.4rem) 0 clamp(2.4rem,5vw,4rem)}
.portada__texto{max-width:780px;margin:0 auto;text-align:center}
.portada__texto .rotulo{display:block;margin-bottom:1.1rem}
.portada__texto h1{margin-bottom:1.35rem}
.portada__entrada{color:var(--humo);font-size:clamp(1rem,1.5vw,1.12rem);
                  max-width:64ch;margin:0 auto}
.portada__botones{display:flex;flex-wrap:wrap;gap:.8rem;
                  justify-content:center;margin-top:1.9rem}
.portada__lamina{margin-top:clamp(2.2rem,5vw,3.6rem)}
.lamina{position:relative;overflow:hidden;background:var(--nata);
        border:1px solid var(--linea)}
.lamina img{width:100%;height:100%;object-fit:cover;
            transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.lamina:hover img{transform:scale(1.035)}
.lamina--ancha{aspect-ratio:16/7}
.lamina--media{aspect-ratio:3/2}
.lamina--alta{aspect-ratio:4/5}
.lamina__detalle{object-position:64% 82%;transform:scale(1.9);
                 transform-origin:64% 82%}
.lamina:hover .lamina__detalle{transform:scale(1.97)}
@media(max-width:767px){
  .lamina--ancha{aspect-ratio:4/3}
  .lamina--alta{aspect-ratio:1/1}
}
.pie-foto{margin-top:.8rem;font-size:.84rem;line-height:1.55;
          color:var(--humo);max-width:62ch}

/* ── цифры тонкой строкой через точки ───────────────────────────────── */
.cifras{display:flex;flex-wrap:wrap;gap:.35rem 1rem;
        margin-top:clamp(1.8rem,4vw,2.8rem);padding-top:1.2rem;
        border-top:1px solid var(--linea);font-size:.85rem;
        color:var(--humo)}
.cifras li{display:flex;align-items:baseline;gap:.42rem}
.cifras li+li::before{content:'·';color:var(--linea);margin-right:.6rem}
.cifra__txt{color:var(--humo)}

/* ── секции ─────────────────────────────────────────────────────────── */
.seccion{padding:clamp(3rem,7vw,6.2rem) 0}
.seccion--nata{background:var(--nata);color:var(--tinta)}
.seccion--nata .prosa,.seccion--nata .pie-foto{color:var(--humo-nata)}
.seccion__cabeza{max-width:720px;margin-bottom:clamp(2rem,4.5vw,3.4rem)}
.seccion__cabeza .rotulo{display:block;margin-bottom:.9rem}

/* ── кадр + узкая карточка проекта ──────────────────────────────────── */
.ficha-zona{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:start}
@media(min-width:960px){
  .ficha-zona{grid-template-columns:minmax(0,1fr) 344px}
}
.ficha{background:var(--papel);color:var(--tinta);
       border:1px solid var(--linea);
       box-shadow:0 26px 52px -38px rgba(0,0,0,.6)}
.ficha__tapa{background:var(--oscuro);color:var(--sobre-osc);
             padding:1.3rem 1.4rem 1.45rem}
.ficha__rotulo{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
               text-transform:uppercase;letter-spacing:.2em;font-size:.64rem;
               color:var(--cielo-osc);margin-bottom:.5rem}
.ficha__nombre{font-family:var(--f-titular);font-weight:var(--w-titular);
               font-size:1.22rem;line-height:1.2;color:var(--sobre-osc)}
.ficha__cuerpo{padding:1.4rem}
.ficha__precio{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
               font-size:2.1rem;line-height:1;color:var(--sol);
               font-variant-numeric:tabular-nums}
.ficha__nota{margin-top:.6rem;font-size:.8rem;line-height:1.5;
             color:var(--humo)}
.ficha__lista{margin-top:1.2rem;border-top:1px solid var(--linea);
              padding-top:1.1rem;display:grid;gap:.6rem}
.ficha__lista li{display:flex;gap:.5rem;align-items:flex-start;
                 font-size:.88rem;line-height:1.45;color:var(--tinta)}
.ficha__icono{font-size:1.15rem;color:var(--sol);flex:0 0 auto;
              margin-top:.05rem}
.ficha__extras{margin-top:1.2rem;border-top:1px solid var(--linea);
               padding-top:1.1rem;display:grid;gap:1rem}
.ficha__extras dt{font-size:.85rem;color:var(--tinta)}
.ficha__extras dd{margin:.15rem 0 0;font-family:var(--f-rotulo);
                  font-weight:var(--w-rotulo);color:var(--sol);
                  font-variant-numeric:tabular-nums}
.ficha__pie{font-size:.76rem;color:var(--humo);margin-top:.2rem}
.ficha__cuerpo .boton{margin-top:1.4rem}

/* ── три широкие горизонтальные карточки ────────────────────────────── */
.tarjetas-anchas{display:grid;gap:clamp(2.4rem,6vw,4.6rem)}
.tarjeta-ancha{display:grid;gap:clamp(1.3rem,3.5vw,2.8rem);align-items:center}
@media(min-width:900px){
  .tarjeta-ancha{grid-template-columns:minmax(0,47%) minmax(0,1fr)}
  .tarjeta-ancha--espejo .tarjeta-ancha__vis{order:2}
}
.lienzo{display:block;width:100%;height:auto;border:1px solid var(--linea)}
.lienzo text{font-family:var(--f-rotulo)}
.lz-rot{font-size:14px;font-weight:var(--w-rotulo);letter-spacing:2.4px}
.lz-txt{font-size:14px;font-weight:var(--w-rotulo-med)}
.lz-dato{font-size:28px;font-weight:var(--w-rotulo)}
.paso{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
      font-size:.72rem;letter-spacing:.24em;color:var(--sol);
      margin-bottom:.75rem}
.tarjeta-ancha__txt h3{margin-bottom:.85rem}

/* ── зона покрытия ──────────────────────────────────────────────────── */
.cobertura{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:start}
@media(min-width:960px){
  .cobertura{grid-template-columns:minmax(0,1fr) 300px}
}
.cobertura__tit{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
                text-transform:uppercase;letter-spacing:.2em;
                font-size:.66rem;color:var(--sol);margin-bottom:.9rem}
.estados{border-top:1px solid var(--linea)}
.estados li{display:flex;justify-content:space-between;gap:.8rem;
            align-items:baseline;padding:.6rem 0;
            border-bottom:1px solid var(--linea)}
.estado__n{font-size:.95rem;color:var(--tinta)}
.estado__d{font-size:.72rem;color:var(--humo-nata);text-align:right;
           flex:0 0 auto}
.cobertura__nota{margin-top:1rem;font-size:.82rem;line-height:1.55;
                 color:var(--humo-nata)}

/* ── два крупных отзыва ─────────────────────────────────────────────── */
.citas{display:grid;gap:clamp(1.4rem,3.5vw,2.4rem)}
@media(min-width:900px){.citas{grid-template-columns:1fr 1fr}}
.cita{position:relative;overflow:hidden;background:var(--nata);
      color:var(--tinta);border:1px solid var(--linea);
      padding:clamp(2.6rem,5vw,3.4rem) clamp(1.4rem,3.5vw,2.6rem)
              clamp(1.6rem,3.5vw,2.4rem)}
.cita::before{content:'\201C';position:absolute;top:-.04em;left:.06em;
              font-family:var(--f-titular);font-weight:var(--w-titular);
              font-size:clamp(6rem,13vw,10rem);line-height:1;
              color:var(--linea);pointer-events:none}
.cita blockquote p{position:relative;font-size:clamp(1rem,1.7vw,1.2rem);
                   line-height:1.6;color:var(--tinta)}
.cita figcaption{margin-top:1.3rem;padding-top:1rem;
                 border-top:1px solid var(--linea);display:flex;
                 flex-wrap:wrap;gap:.2rem 1rem;align-items:baseline}
.cita__quien{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
             font-size:.86rem;color:var(--tinta)}
.cita__donde{font-size:.78rem;color:var(--humo-nata)}

/* ── вопросы-ответы ─────────────────────────────────────────────────── */
.preguntas{border-top:1px solid var(--linea)}
.pregunta{border-bottom:1px solid var(--linea)}
.pregunta>summary{list-style:none;cursor:pointer;display:flex;gap:1rem;
                  align-items:flex-start;padding:1.15rem 0;
                  font-family:var(--f-titular);font-weight:var(--w-titular);
                  font-size:clamp(1.02rem,2vw,1.28rem);line-height:1.3;
                  color:var(--tinta)}
.pregunta>summary::-webkit-details-marker{display:none}
.pregunta>summary::after{content:'+';margin-left:auto;flex:0 0 auto;
                         font-family:var(--f-rotulo);
                         font-weight:var(--w-rotulo);font-size:1.3rem;
                         line-height:1;color:var(--sol)}
.pregunta[open]>summary::after{content:'\2013'}
.pregunta__cuerpo{padding:0 0 1.35rem;max-width:66ch}
.pregunta__cuerpo p{color:var(--humo-nata);font-size:.95rem}

/* ── заявка ─────────────────────────────────────────────────────────── */
.panel-solicitud{background:var(--nata);color:var(--tinta);
                 border:1px solid var(--linea);
                 padding:clamp(1.5rem,4.5vw,3.4rem)}
.panel-solicitud__cabeza{max-width:620px;margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.panel-solicitud__cabeza .rotulo{display:block;margin-bottom:.8rem}
.panel-solicitud__cabeza h2{margin-bottom:.9rem}
.panel-solicitud__cabeza .prosa{color:var(--humo-nata)}
.forma{display:grid;gap:1.1rem}
@media(min-width:760px){.forma{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.forma{grid-template-columns:repeat(3,1fr)}}
.campo label{display:block;font-family:var(--f-rotulo);
             font-weight:var(--w-rotulo);font-size:.68rem;
             letter-spacing:.14em;text-transform:uppercase;
             color:var(--humo-nata);margin-bottom:.45rem}
.campo input,.campo select{width:100%;padding:.85rem .95rem;
       background:var(--papel);color:var(--tinta);
       border:1px solid var(--linea);border-radius:0;
       font-family:var(--f-cuerpo);font-weight:var(--w-cuerpo);
       font-size:.95rem;appearance:none}
.campo select{background-image:none}
.campo input::placeholder{color:var(--humo)}
.campo input:focus,.campo select:focus{outline:2px solid var(--cielo);
       outline-offset:1px;border-color:var(--cielo)}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"]{
       border-color:var(--alerta)}
.error{margin-top:.35rem;font-size:.78rem;color:var(--alerta)}
.error[hidden]{display:none}
.forma__pie{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;
            grid-column:1/-1}
.forma__aviso{font-size:.78rem;line-height:1.5;color:var(--humo-nata);
              max-width:46ch}
.forma__aviso a{color:var(--sol)}
.contactos{display:grid;gap:.7rem;margin-top:clamp(1.6rem,4vw,2.4rem);
           padding-top:1.4rem;border-top:1px solid var(--linea);
           font-size:.86rem;color:var(--humo-nata)}
@media(min-width:900px){.contactos{grid-template-columns:repeat(2,1fr)}}
.contactos li{display:flex;gap:.6rem;align-items:flex-start}
.contactos .material-symbols-outlined{font-size:1.15rem;color:var(--sol);
                                      flex:0 0 auto}
.contactos a{color:var(--tinta);text-decoration:none}
.contactos a:hover{color:var(--sol)}

/* ── страница «спасибо» ─────────────────────────────────────────────── */
.gracias .rotulo{display:block;margin-bottom:1rem}
.gracias h1{margin-bottom:1.2rem}
.gracias__entrada{color:var(--humo);font-size:1.05rem;max-width:60ch}
.pasos{display:grid;gap:1px;margin:clamp(2rem,4vw,3rem) 0;
       background:var(--linea);border:1px solid var(--linea)}
.pasos li{background:var(--papel);padding:1.1rem 1.2rem;display:grid;
          gap:.3rem}
.paso__n{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
         font-size:.72rem;letter-spacing:.2em;color:var(--sol)}
.paso__t{font-family:var(--f-titular);font-weight:var(--w-titular);
         font-size:1.12rem;color:var(--tinta)}
.paso__d{font-size:.9rem;color:var(--humo)}
.gracias__caja{background:var(--nata);color:var(--tinta);
               border:1px solid var(--linea);padding:1.3rem 1.4rem;
               margin-bottom:2rem}
.gracias__caja p{color:var(--humo-nata);font-size:.94rem}
.gracias__tit{font-family:var(--f-titular);font-weight:var(--w-titular);
              font-size:1.15rem;color:var(--tinta);margin-bottom:.4rem}
.gracias__caja a{color:var(--sol)}

/* ── правовые страницы ──────────────────────────────────────────────── */
.legal .rotulo{display:block;margin-bottom:1rem}
.legal h1{margin-bottom:.8rem}
.legal__fecha{font-family:var(--f-rotulo);font-weight:var(--w-rotulo-med);
              font-size:.78rem;letter-spacing:.09em;color:var(--humo)}
.legal__entrada{margin-top:1.3rem;font-size:1.03rem;color:var(--humo);
                max-width:62ch}
.legal__cuerpo{margin-top:clamp(2rem,4vw,3rem);display:grid;
               gap:clamp(1.8rem,3.5vw,2.6rem)}
.legal__bloque h2{margin-bottom:.8rem}
.legal__bloque p{color:var(--humo);margin-bottom:.9rem;font-size:.97rem}
.legal__bloque p:last-child{margin-bottom:0}
.legal__lista{display:grid;gap:.5rem;margin:0 0 .9rem;padding-left:1.1rem}
.legal__lista li{position:relative;color:var(--humo);font-size:.97rem}
.legal__lista li::before{content:'';position:absolute;left:-1.1rem;
                         top:.62em;width:.42rem;height:1px;
                         background:var(--sol)}

/* ── подвал ─────────────────────────────────────────────────────────── */
.pie{background:var(--oscuro);color:var(--sobre-osc);
     padding:clamp(2.6rem,5vw,4rem) 0 2rem;margin-top:0}
.pie__rejilla{display:grid;gap:2rem;padding-bottom:2rem;
              border-bottom:1px solid var(--linea-osc)}
@media(min-width:760px){.pie__rejilla{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){
  .pie__rejilla{grid-template-columns:1.6fr 1fr 1fr 1.2fr}
}
.pie__marca{font-family:var(--f-titular);font-weight:var(--w-titular);
            font-size:1.25rem;color:var(--sobre-osc);margin-bottom:.7rem}
.pie__lema{font-size:.88rem;line-height:1.6;color:var(--tenue-osc);
           max-width:38ch}
.pie__tit{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
          text-transform:uppercase;letter-spacing:.2em;font-size:.64rem;
          color:var(--cielo-osc);margin-bottom:.85rem}
.pie__lista{display:grid;gap:.5rem;font-size:.88rem;color:var(--tenue-osc)}
.pie__lista a{color:var(--tenue-osc);text-decoration:none}
.pie__lista a:hover{color:var(--sobre-osc)}
.pie__raya{padding-top:1.6rem;display:grid;gap:.5rem;font-size:.78rem;
           line-height:1.55;color:var(--tenue-osc)}

/* ── плашка о печеньях: узкая карточка слева внизу ──────────────────── */
.galletas{position:fixed;left:14px;right:14px;bottom:14px;z-index:60;
          max-width:392px;background:var(--oscuro);color:var(--sobre-osc);
          border:1px solid var(--linea-osc);border-left:4px solid var(--cielo-osc);
          padding:1.05rem 1.15rem;
          box-shadow:0 22px 46px -26px rgba(0,0,0,.8)}
.galletas[hidden]{display:none}
.galletas__txt{font-size:.82rem;line-height:1.55;color:var(--tenue-osc)}
.galletas__pie{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;
               margin-top:.9rem}
.galletas__enl{font-size:.76rem;color:var(--cielo-osc)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lamina img,.boton{transition:none}
  .lamina:hover img{transform:none}
  .lamina:hover .lamina__detalle{transform:scale(1.9)}
}