/* SolarFinanceMX · Modern Product Showcase — клон уника 8, assunto «financiamiento».
   Кадр как товар: светлая страница, кадры полосами, плашки цифр,
   таблица платежа с узкой карточкой сбоку, лента доводов и
   лесенка расчёта. Начертания посчитаны mx.base.peso: у Caladea
   в заголовке стоит 700, и подделки жира тут нет. */
:root{
  --f-titular:'Caladea',Georgia,'Times New Roman',serif;
  --f-cuerpo:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-rotulo:'Reddit Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --w-titular:700;
  --w-cuerpo:400;
  --w-medio:500;
  --w-rotulo:600;
  --w-rotulo-med:500;
  --papel:#FCFCFC;
  --papel-velo:#FDFDFD;
  --nata:#F6F5F3;
  --linea:#E4E2DC;
  --linea-osc:#7F713E;
  --tinta:#242119;
  --humo:#6A6A6A;
  --humo-nata:#686866;
  --cobre:#746115;
  --cobre-nata:#6C5A14;
  --sobre-cobre:#FFFFFF;
  --tinte:#532FB1;
  --alerta:#B3261E;
  --alerta-osc:#F3BDBA;
  --oscuro:#5F4E0E;
  --sobre-osc:#FFFFFF;
  --tenue-osc:#CFCBB7;
  --tinte-osc:#D0C7EA;
}

*,*::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.66;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote,table{margin:0;padding:0}
ul,ol{list-style:none}

.banda{width:100%;max-width:1200px;margin:0 auto;padding:0 18px}
.banda--angosta{max-width:780px}
@media(min-width:768px){.banda{padding:0 34px}}

.titular{font-family:var(--f-titular);font-weight:var(--w-titular);
         line-height:1.1;letter-spacing:-.008em;color:var(--tinta)}
.titular--claro{color:var(--sobre-osc)}
.t-xl{font-size:clamp(2rem,5.6vw,3.9rem)}
.t-lg{font-size:clamp(1.55rem,3.8vw,2.6rem)}
.t-md{font-size:clamp(1.15rem,2.3vw,1.55rem);line-height:1.24}
.t-sm{font-size:clamp(1.02rem,1.8vw,1.22rem);line-height:1.3}
.rotulo{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
        text-transform:uppercase;letter-spacing:.19em;font-size:.67rem;
        color:var(--cobre)}
.rotulo--claro{color:var(--tinte-osc)}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24}

.boton{display:inline-flex;align-items:center;gap:.5rem;
       padding:.9rem 1.55rem;background:var(--cobre);color:var(--sobre-cobre);
       border:1px solid var(--cobre);text-decoration:none;cursor:pointer;
       font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
       font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
       transition:transform .22s ease,box-shadow .22s ease}
.boton .material-symbols-outlined{font-size:1.08rem}
.boton:hover{transform:translateY(-2px);
             box-shadow:0 14px 26px -16px rgba(0,0,0,.55)}
.boton:focus-visible{outline:3px solid var(--tinte);outline-offset:3px}
.boton--linea{background:transparent;color:var(--cobre);
              border-color:var(--linea)}
.boton--linea:hover{border-color:var(--cobre)}
.boton--chico{padding:.6rem 1rem;font-size:.65rem;letter-spacing:.08em}
.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:70px;
              justify-content:space-between}
.marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;
       flex:0 0 auto}
.marca__signo{width:38px;height:38px;object-fit:contain}
.marca__nombre{font-family:var(--f-titular);font-weight:var(--w-titular);
               font-size:1.05rem;color:var(--tinta)}
.nav-esc{display:none;gap:1.5rem;margin-left:auto}
.nav-l{font-family:var(--f-rotulo);font-weight:var(--w-rotulo-med);
       font-size:.76rem;letter-spacing:.07em;color:var(--humo);
       text-decoration:none;padding-bottom:2px;
       border-bottom:1px solid transparent;white-space:nowrap}
.nav-l:hover{color:var(--cobre);border-bottom-color:var(--cobre)}
.nav-mov{border-top:1px solid var(--linea)}
.nav-mov__riel{display:flex;gap:1.3rem;overflow-x:auto;padding:.65rem 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:1100px){.nav-esc{display:flex}.nav-mov{display:none}}

/* первый экран: выключка влево */
.portada{padding:clamp(2.4rem,5.5vw,4.8rem) 0 clamp(2.2rem,4.5vw,3.6rem)}
.portada__txt{max-width:720px}
.portada__txt .rotulo{display:block;margin-bottom:1rem}
.portada__txt h1{margin-bottom:1.25rem}
.portada__entrada{color:var(--humo);font-size:clamp(1rem,1.4vw,1.1rem);
                  max-width:62ch}
.portada__botones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.7rem}
.portada__lamina{margin-top:clamp(2rem,4.5vw,3.2rem)}
.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.03)}
.lamina--ancha{aspect-ratio:16/7}
.lamina--media{aspect-ratio:3/2}
@media(max-width:767px){.lamina--ancha{aspect-ratio:4/3}}
.pie-foto{margin-top:.75rem;font-size:.83rem;line-height:1.55;
          color:var(--humo);max-width:64ch}

/* четыре плашки */
.plakas{margin-top:clamp(1.8rem,3.6vw,2.6rem);gap:1px;
        background:var(--linea);border:1px solid var(--linea)}
.plaka{background:var(--papel);padding:1.05rem 1.1rem}
.plaka__n{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
          font-size:1.24rem;line-height:1.15;color:var(--cobre);
          font-variant-numeric:tabular-nums}
.plaka__d{margin-top:.4rem;font-size:.82rem;line-height:1.5;
          color:var(--humo)}

/* секции */
.seccion{padding:clamp(2.8rem,6.5vw,5.8rem) 0}
.seccion--nata{background:var(--nata);color:var(--tinta)}
.seccion--nata .pie-foto{color:var(--humo-nata)}
.seccion--osc{background:var(--oscuro);color:var(--sobre-osc)}
.sec__cab{max-width:700px;margin-bottom:clamp(1.8rem,4vw,3rem)}
.sec__cab .rotulo{display:block;margin-bottom:.8rem}

/* таблица платежа + узкая карточка */
.pago{display:grid;gap:clamp(1.5rem,3.5vw,2.8rem);align-items:start}
@media(min-width:980px){.pago{grid-template-columns:minmax(0,1fr) 330px}}
.tabla{width:100%;border-collapse:collapse;text-align:left;
       background:var(--papel)}
.tabla caption{caption-side:bottom;padding-top:.9rem;font-size:.8rem;
               line-height:1.5;color:var(--humo-nata);text-align:left}
.tabla th,.tabla td{border:1px solid var(--linea);padding:.85rem .95rem;
                    vertical-align:top;font-size:.93rem;line-height:1.5}
.tabla thead th{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
                font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
                color:var(--humo-nata);background:var(--nata)}
.tabla tbody th{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
                color:var(--cobre);width:34%;background:var(--papel)}
.tabla tbody td{color:var(--humo)}
@media(max-width:720px){
  .tabla,.tabla tbody,.tabla tr,.tabla th,.tabla td{display:block;width:auto}
  /* подпись остаётся table-caption внутри блочной таблицы и схлопывается
     в колонку шириной в одно слово: на 375 она была 80 пикселей и 245 в
     высоту. Здесь она такой же блок, как всё остальное */
  .tabla caption{display:block;width:auto}
  .tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;
               clip:rect(0 0 0 0);white-space:nowrap}
  .tabla tr{border:1px solid var(--linea);margin-bottom:-1px}
  .tabla th,.tabla td{border:0;padding:.7rem .9rem}
  /* ширина в 22 % у .tabla tbody th бьёт общий сброс выше по
     специфичности и доживала до телефона узким столбиком */
  .tabla tbody th{padding-bottom:0;width:auto}
}
.tarjeta{background:var(--papel);color:var(--tinta);
         border:1px solid var(--linea);
         box-shadow:0 24px 48px -36px rgba(0,0,0,.6)}
.tarjeta__tapa{background:var(--oscuro);color:var(--sobre-osc);
               padding:1.2rem 1.3rem 1.35rem}
.tarjeta__rotulo{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
                 text-transform:uppercase;letter-spacing:.19em;
                 font-size:.63rem;color:var(--tinte-osc);margin-bottom:.45rem}
.tarjeta__cifra{font-family:var(--f-titular);font-weight:var(--w-titular);
                font-size:2rem;line-height:1;color:var(--sobre-osc)}
.tarjeta__cuerpo{padding:1.3rem}
.tarjeta__nota{font-size:.84rem;line-height:1.55;color:var(--humo)}
.tarjeta__lista{margin-top:1.1rem;border-top:1px solid var(--linea);
                padding-top:1rem;display:grid;gap:.6rem}
.punto{position:relative;padding-left:1.1rem;font-size:.86rem;
       line-height:1.45;color:var(--tinta)}
.punto::before{content:'';position:absolute;left:0;top:.62em;width:.6rem;
               height:2px;background:var(--cobre)}
.tarjeta__cuerpo .boton{margin-top:1.3rem}

/* лента доводов */
.riel{display:flex;gap:1rem;overflow-x:auto;padding-bottom:1rem;
      -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.razon{flex:0 0 auto;width:min(83vw,300px);scroll-snap-align:start;
       background:var(--nata);border:1px solid var(--linea);
       padding:1.3rem 1.25rem}
.razon__icono{font-size:1.75rem;color:var(--cobre-nata)}
.razon h3{margin:.55rem 0 .5rem}
.razon__txt{font-size:.88rem;line-height:1.55;color:var(--humo-nata)}
.riel__aviso{margin-top:.2rem;font-size:.77rem;color:var(--humo)}
@media(min-width:1100px){.riel__aviso{display:none}}

/* лесенка */
.calculo{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:start}
@media(min-width:1000px){.calculo{grid-template-columns:minmax(0,420px) 1fr}}
.peldanos{display:grid;gap:0;border-top:1px solid var(--linea)}
.peldano{display:flex;gap:1rem;align-items:flex-start;padding:1.15rem 0;
         border-bottom:1px solid var(--linea)}
.peldano__n{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
            font-size:.82rem;letter-spacing:.16em;color:var(--cobre-nata);
            flex:0 0 auto;padding-top:.22rem}
.peldano__txt{margin-top:.4rem;font-size:.89rem;line-height:1.56;
              color:var(--humo-nata)}
.lienzo{display:block;width:100%;height:auto;border:1px solid var(--linea)}
.lienzo text{font-family:var(--f-rotulo)}
.lz-rot{font-size:15px;font-weight:var(--w-rotulo);letter-spacing:2.2px}
.lz-txt{font-size:15px;font-weight:var(--w-rotulo-med)}

/* маршруты */
.cobertura__foto{margin-bottom:clamp(1.6rem,3.5vw,2.6rem)}
.rutas{gap:1px;background:var(--linea);border:1px solid var(--linea)}
.ruta{background:var(--papel);padding:1.2rem 1.2rem 1.35rem}
.ruta__tit{font-family:var(--f-titular);font-weight:var(--w-titular);
           font-size:1.12rem;color:var(--tinta);margin-bottom:.45rem}
.ruta__lugares{font-size:.9rem;line-height:1.5;color:var(--tinta)}
.ruta__nota{margin-top:.6rem;font-size:.82rem;line-height:1.5;
            color:var(--humo)}
.cobertura__nota{margin-top:1.3rem;font-size:.85rem;line-height:1.6;
                 color:var(--humo);max-width:78ch}

/* отзывы */
.voces{gap:clamp(1.1rem,2.6vw,1.8rem)}
.voz{background:var(--papel);border:1px solid var(--linea);
     padding:1.35rem 1.35rem 1.2rem;display:flex;flex-direction:column;
     gap:.9rem}
.sello{width:52px;height:52px;flex:0 0 auto}
.sello__t{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
          font-size:22px;letter-spacing:1px}
.voz__txt p{font-size:.95rem;line-height:1.6;color:var(--tinta)}
.voz__pie{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--linea);
          display:flex;flex-wrap:wrap;gap:.2rem .9rem;align-items:baseline}
.voz__quien{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
            font-size:.85rem;color:var(--tinta)}
.voz__donde{font-size:.78rem;color:var(--humo)}

/* вопросы */
.qa{border-bottom:1px solid var(--linea)}
.qa:first-of-type{border-top:1px solid var(--linea)}
.pregunta>summary{list-style:none;cursor:pointer;display:flex;gap:1rem;
                  align-items:flex-start;padding:1.1rem 0;
                  font-family:var(--f-titular);font-weight:var(--w-titular);
                  font-size:clamp(1rem,1.9vw,1.24rem);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.25rem;
                         line-height:1;color:var(--cobre)}
.pregunta[open]>summary::after{content:'\2013'}
.qa__cuerpo{padding:0 0 1.3rem;max-width:68ch}
.qa__cuerpo p{color:var(--humo);font-size:.95rem}
.qa__lista{margin-top:.8rem;display:grid;gap:.4rem;padding-left:1.1rem}
.qa__lista li{position:relative;font-size:.9rem;color:var(--humo)}
.qa__lista li::before{content:'';position:absolute;left:-1.1rem;top:.62em;
                      width:.45rem;height:1px;background:var(--cobre)}

/* заявка на тёмном */
.panel{max-width:1020px}
.panel__cab{max-width:640px;margin-bottom:clamp(1.6rem,3.5vw,2.4rem)}
.panel__cab .rotulo{display:block;margin-bottom:.75rem}
.panel__cab h2{margin-bottom:.85rem}
.panel__txt{color:var(--tenue-osc);font-size:1rem;line-height:1.6}
/* ── полоса заявки: ДВЕ КОЛОНКИ, правая ЕДЕТ вместе со страницей ───────
   У собратьев по семейству заявка стояла последней секцией одной широкой
   панелью. Здесь она предпоследняя и разложена надвое: слева поля, справа
   узкий столбец с адресом, телефоном, почтой и часами. Пока форму
   заполняют, этот столбец держится на виду — но только на широком экране:
   ниже 1000 пикселей он просто уходит под форму, иначе на телефоне
   прилипшая колонка съедает половину экрана. */
.panel--par{display:grid;gap:clamp(1.8rem,4vw,2.6rem)}
@media(min-width:1000px){
  .panel--par{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);
              gap:0 clamp(2rem,4vw,3.4rem);align-items:start}
  .solicitud__lado{position:sticky;top:5.6rem;
                   border-left:1px solid var(--linea-osc);
                   padding-left:clamp(1.4rem,2.6vw,2.2rem)}
}
.solicitud__lado .rotulo{display:block;margin-bottom:.9rem}
.forma{display:grid;gap:1.05rem}
@media(min-width:760px){.forma{grid-template-columns:1fr 1fr}}
.campo label{display:block;font-family:var(--f-rotulo);
             font-weight:var(--w-rotulo);font-size:.67rem;letter-spacing:.13em;
             text-transform:uppercase;color:var(--tinte-osc);
             margin-bottom:.4rem}
.campo input,.campo select{width:100%;padding:.82rem .9rem;
       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:.94rem;appearance:none}
.campo input::placeholder{color:var(--humo)}
.campo input:focus,.campo select:focus{outline:2px solid var(--tinte-osc);
       outline-offset:2px}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"]{
       border-color:var(--alerta)}
.error{margin-top:.35rem;font-size:.78rem;color:var(--alerta-osc)}
.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(--tenue-osc);
              max-width:48ch}
.forma__aviso a{color:var(--tinte-osc)}
.contactos{display:grid;gap:.75rem;font-size:.86rem;color:var(--tenue-osc)}
@media(min-width:600px) and (max-width:999px){
  .contactos{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:999px){
  .solicitud__lado{padding-top:1.3rem;border-top:1px solid var(--linea-osc)}
}
.contactos li{display:flex;gap:.55rem;align-items:flex-start}
.contactos .material-symbols-outlined{font-size:1.12rem;color:var(--tinte-osc);
                                      flex:0 0 auto}
.contactos a{color:var(--sobre-osc);text-decoration:none}
.contactos a:hover{color:var(--tinte-osc)}

/* «спасибо» */
.gracias .rotulo{display:block;margin-bottom:1rem}
.gracias h1{margin-bottom:1.1rem}
.gracias__entrada{color:var(--humo);font-size:1.04rem;max-width:62ch}
.pasos{display:grid;gap:1px;margin:clamp(1.9rem,4vw,2.8rem) 0;
       background:var(--linea);border:1px solid var(--linea)}
.paso{background:var(--papel);padding:1.05rem 1.15rem;display:grid;gap:.28rem}
.paso__n{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
         font-size:.71rem;letter-spacing:.19em;color:var(--cobre)}
.paso__t{font-family:var(--f-titular);font-weight:var(--w-titular);
         font-size:1.1rem;color:var(--tinta)}
.paso__d{font-size:.89rem;color:var(--humo)}
.gracias__caja{background:var(--nata);color:var(--tinta);
               border:1px solid var(--linea);padding:1.25rem 1.3rem;
               margin-bottom:1.9rem}
.gracias__caja p{color:var(--humo-nata);font-size:.93rem}
.gracias__tit{font-family:var(--f-titular);font-weight:var(--w-titular);
              font-size:1.13rem;color:var(--tinta);margin-bottom:.4rem}
.gracias__caja a{color:var(--cobre-nata)}

/* правовые */
.legal .rotulo{display:block;margin-bottom:1rem}
.legal h1{margin-bottom:.75rem}
.legal__fecha{font-family:var(--f-rotulo);font-weight:var(--w-rotulo-med);
              font-size:.77rem;letter-spacing:.08em;color:var(--humo)}
.legal__entrada{margin-top:1.2rem;font-size:1.02rem;color:var(--humo);
                max-width:64ch}
.legal__cuerpo{margin-top:clamp(1.9rem,3.8vw,2.8rem);display:grid;
               gap:clamp(1.7rem,3.4vw,2.5rem)}
.legal__bloque h2{margin-bottom:.75rem}
.legal__bloque p{color:var(--humo);margin-bottom:.85rem;font-size:.96rem}
.legal__bloque p:last-child{margin-bottom:0}
.legal__lista{display:grid;gap:.45rem;margin:0 0 .85rem;padding-left:1.1rem}
.legal__lista li{position:relative;color:var(--humo);font-size:.96rem}
.legal__lista li::before{content:'';position:absolute;left:-1.1rem;top:.62em;
                         width:.42rem;height:1px;background:var(--cobre)}

/* подвал */
.pie{background:var(--oscuro);color:var(--sobre-osc);
     padding:clamp(2.4rem,4.5vw,3.8rem) 0 1.9rem}
.pie__rejilla{display:grid;gap:1.9rem;padding-bottom:1.9rem;
              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.7fr 1fr 1fr 1.2fr}}
.pie__marca{font-family:var(--f-titular);font-weight:var(--w-titular);
            font-size:1.22rem;color:var(--sobre-osc);margin-bottom:.65rem}
.pie__lema{font-size:.87rem;line-height:1.6;color:var(--tenue-osc);
           max-width:40ch}
.pie__tit{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
          text-transform:uppercase;letter-spacing:.19em;font-size:.63rem;
          color:var(--tinte-osc);margin-bottom:.8rem}
.pie__lista{display:grid;gap:.45rem;font-size:.87rem;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.5rem;display:grid;gap:.45rem;font-size:.77rem;
           line-height:1.55;color:var(--tenue-osc)}

/* печенье: широкая полоса по низу */
.galletas{position:fixed;left:0;right:0;bottom:0;z-index:60;
          background:var(--oscuro);color:var(--sobre-osc);
          border-top:3px solid var(--tinte-osc);padding:1rem 18px;
          display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-items:center;
          justify-content:space-between;
          box-shadow:0 -18px 40px -30px rgba(0,0,0,.9)}
.galletas[hidden]{display:none}
.galletas__txt{font-size:.82rem;line-height:1.5;color:var(--tenue-osc);
               max-width:74ch;flex:1 1 300px}
.galletas__pie{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.galletas__enl{font-size:.76rem;color:var(--tinte-osc)}

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