/* SustainableMX · Modern Product Showcase — клон уника 8, assunto «autoconsumo».
   Кадр как товар, первый экран в два столбца, вторую секцию
   держит рисунок суток, зона работы — лента, отзывы на тёмном.
   Начертания посчитаны mx.base.peso: заголовок BioRhyme идёт на 700. */
:root{
  --f-titular:'BioRhyme',Georgia,'Times New Roman',serif;
  --f-cuerpo:'Kumbh Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-rotulo:'Pontano Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --w-titular:700;
  --w-cuerpo:400;
  --w-medio:500;
  --w-rotulo:400;
  --w-rotulo-med:400;
  --papel:#FCFCFC;
  --papel-velo:#FDFDFD;
  --nata:#F3F6F4;
  --linea:#DCE4E0;
  --linea-osc:#487661;
  --tinta:#19241F;
  --humo:#6A6A6A;
  --humo-nata:#666867;
  --ambar:#23734E;
  --ambar-nata:#216B49;
  --sobre-ambar:#FFFFFF;
  --indigo:#732FB1;
  --indigo-nata:#732FB1;
  --alerta:#B3261E;
  --oscuro:#144F34;
  --sobre-osc:#FFFFFF;
  --tenue-osc:#A9BFB5;
  --indigo-osc:#CCB5E2;
}

*,*::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:1180px;margin:0 auto;padding:0 18px}
.banda--angosta{max-width:790px}
@media(min-width:768px){.banda{padding:0 34px}}

.titular{font-family:var(--f-titular);font-weight:var(--w-titular);
         line-height:1.08;letter-spacing:-.014em;color:var(--tinta)}
.titular--claro{color:var(--sobre-osc)}
.t-xl{font-size:clamp(1.95rem,5vw,3.5rem)}
.t-lg{font-size:clamp(1.5rem,3.5vw,2.45rem)}
.t-md{font-size:clamp(1.12rem,2.1vw,1.48rem);line-height:1.26}
.t-sm{font-size:clamp(1rem,1.7vw,1.16rem);line-height:1.32}
.rotulo{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
        text-transform:uppercase;letter-spacing:.22em;font-size:.68rem;
        color:var(--ambar)}
.rotulo--claro{color:var(--indigo-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:.88rem 1.5rem;background:var(--ambar);
       color:var(--sobre-ambar);border:1px solid var(--ambar);
       text-decoration:none;cursor:pointer;
       font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
       font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
       transition:transform .22s ease,box-shadow .22s ease}
.boton .material-symbols-outlined{font-size:1.06rem}
.boton:hover{transform:translateY(-2px);
             box-shadow:0 14px 26px -16px rgba(0,0,0,.55)}
.boton:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}
.boton--linea{background:transparent;color:var(--ambar);
              border-color:var(--linea)}
.boton--linea:hover{border-color:var(--ambar)}
.boton--chico{padding:.58rem 1rem;font-size:.66rem;letter-spacing:.08em;
 white-space:nowrap}
.boton--bloque{display:flex;justify-content:center;width:100%}
.boton--suelto{margin-top:1.5rem}

/* шапка */
.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.02rem;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:.8rem;letter-spacing:.05em;color:var(--humo);
       text-decoration:none;padding-bottom:2px;
       border-bottom:1px solid transparent;white-space:nowrap}
.nav-l:hover{color:var(--ambar);border-bottom-color:var(--ambar)}
.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:1120px){.nav-esc{display:flex}.nav-mov{display:none}}

/* первый экран в два столбца */
.portada{padding:clamp(2.4rem,5.5vw,4.6rem) 0 clamp(2.2rem,4.5vw,3.6rem)}
.portada__par{display:grid;gap:clamp(1.4rem,3.5vw,3rem);align-items:end}
@media(min-width:960px){
  .portada__par{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}
.portada__izq .rotulo{display:block;margin-bottom:1rem}
.portada__entrada{color:var(--humo);font-size:clamp(1rem,1.4vw,1.1rem);
                  max-width:58ch}
.portada__botones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.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:21/8}
.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(--nata);padding:1.1rem 1.15rem;display:flex;
       gap:1rem;align-items:baseline}
.plaka__n{font-family:var(--f-titular);font-weight:var(--w-titular);
          font-size:1.2rem;line-height:1.2;color:var(--ambar-nata);
          flex:0 0 auto;min-width:8.5rem}
.plaka__d{font-size:.84rem;line-height:1.5;color:var(--humo-nata)}
@media(max-width:520px){
  .plaka{display:block}
  .plaka__d{margin-top:.35rem}
}

/* секции */
.seccion{padding:clamp(2.8rem,6.5vw,5.6rem) 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:720px;margin-bottom:clamp(1.8rem,4vw,2.9rem)}
.sec__cab .rotulo{display:block;margin-bottom:.8rem}
/* вторая половина секции: тот же разговор, отбитый линией, но не своя полоса */
.sec__parte{margin-top:clamp(2.4rem,5vw,3.8rem);
            padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--linea)}

/* рисунок суток + узкая карточка */
.dia{display:grid;gap:clamp(1.5rem,3.5vw,2.8rem);align-items:start}
@media(min-width:1000px){.dia{grid-template-columns:minmax(0,1fr) 326px}}
.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.4px}
.lz-txt{font-size:15px;font-weight:var(--w-rotulo-med)}
.tarjeta{background:var(--papel);color:var(--tinta);
         border:1px solid var(--linea);
         box-shadow:0 24px 48px -36px rgba(0,0,0,.55)}
.tarjeta__tapa{background:var(--oscuro);color:var(--sobre-osc);
               padding:1.15rem 1.25rem 1.3rem}
.tarjeta__rotulo{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
                 text-transform:uppercase;letter-spacing:.2em;
                 font-size:.63rem;color:var(--indigo-osc);
                 margin-bottom:.45rem}
.tarjeta__cifra{font-family:var(--f-titular);font-weight:var(--w-titular);
                font-size:1.7rem;line-height:1.1;color:var(--sobre-osc)}
.tarjeta__cuerpo{padding:1.25rem}
.tarjeta__nota{font-size:.85rem;line-height:1.58;color:var(--humo)}
.tarjeta__lista{margin-top:1.05rem;border-top:1px solid var(--linea);
                padding-top:1rem;display:grid;gap:.6rem}
.franja{position:relative;padding-left:1.15rem;font-size:.86rem;
        line-height:1.48;color:var(--tinta)}
.franja::before{content:'';position:absolute;left:0;top:.5em;width:.5rem;
                height:.5rem;background:var(--ambar)}
.tarjeta__cuerpo .boton{margin-top:1.25rem}

/* шесть доводов лесенкой */
.motivos{display:grid;gap:0;border-top:1px solid var(--linea)}
.motivo{display:flex;gap:1.1rem;align-items:flex-start;padding:1.25rem 0;
        border-bottom:1px solid var(--linea)}
.motivo__n{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
           font-size:1rem;letter-spacing:.05em;color:var(--ambar);
           flex:0 0 auto;padding-top:.14rem;font-variant-numeric:tabular-nums}
.motivo__txt{margin-top:.42rem;font-size:.92rem;line-height:1.6;
             color:var(--humo)}

/* таблица моментов */
.tabla{width:100%;border-collapse:collapse;text-align:left;
       background:var(--papel)}
.tabla caption{caption-side:bottom;padding-top:.9rem;font-size:.82rem;
               line-height:1.5;color:var(--humo-nata);text-align:left;
               max-width:80ch}
.tabla th,.tabla td{border:1px solid var(--linea);padding:.8rem .9rem;
                    vertical-align:top;font-size:.92rem;line-height:1.5}
.tabla thead th{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
                font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
                color:var(--humo-nata);background:var(--nata)}
.tabla tbody th{font-family:var(--f-titular);font-weight:var(--w-titular);
                color:var(--ambar);width:23%;background:var(--papel);
                font-size:.98rem}
.tabla tbody td{color:var(--humo)}
@media(max-width:780px){
  .tabla,.tabla tbody,.tabla tr,.tabla th,.tabla td{display:block;width:auto}
  /* подпись остаётся table-caption внутри блочной таблицы и схлопывается
     в колонку шириной в одно слово: на 375 она была 72 пикселя и 270 в
     высоту. Здесь она такой же блок, как всё остальное */
  .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;
            padding-bottom:.45rem}
  .tabla th,.tabla td{border:0;padding:.55rem .9rem}
  /* у .tabla tbody th специфичность выше, чем у общего сброса выше, и
     ширина в 22 % доживала до телефона: первая колонка становилась
     столбиком в 74 пикселя */
  .tabla tbody th{width:auto}
}
.nota{margin-top:1.4rem;display:grid;gap:.5rem}
.nota li{position:relative;padding-left:1.2rem;font-size:.88rem;
         line-height:1.55;color:var(--humo-nata)}
.nota li::before{content:'';position:absolute;left:0;top:.66em;width:.7rem;
                 height:2px;background:var(--ambar-nata)}

/* лента штатов */
.cobertura__foto{margin-bottom:clamp(1.6rem,3.5vw,2.4rem)}
.riel{display:flex;gap:1rem;overflow-x:auto;padding-bottom:1rem;
      -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.edo{flex:0 0 auto;width:min(80vw,286px);scroll-snap-align:start;
     background:var(--nata);border:1px solid var(--linea);
     padding:1.2rem 1.2rem 1.35rem}
.edo__d{margin-top:.5rem;font-size:.87rem;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}}
.cobertura__nota{margin-top:1.3rem;font-size:.85rem;line-height:1.6;
                 color:var(--humo);max-width:80ch}

/* отзывы на тёмном */
.voces{gap:1px;background:var(--linea-osc);border:1px solid var(--linea-osc)}
.voz{background:var(--oscuro);padding:1.35rem 1.3rem 1.2rem;display:flex;
     flex-direction:column;gap:.9rem}
.voz__txt p{font-size:.94rem;line-height:1.62;color:var(--sobre-osc)}
.voz__pie{margin-top:auto;padding-top:.9rem;
          border-top:1px solid var(--linea-osc);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(--indigo-osc)}
.voz__donde{font-size:.78rem;color:var(--tenue-osc)}

/* вопросы */
.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.2rem);line-height:1.34;
                  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(--ambar)}
.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}

/* ── заявка: УЗКАЯ КОЛОНКА ПО ЦЕНТРУ ──────────────────────────────────
   Собратья по семейству держали форму последней секцией и широкой панелью
   в три ручья полей. Здесь заявка стоит четвёртой из семи — в первой
   половине страницы — и собрана узкой колонкой по центру: поля идут в
   ОДИН столбец, реквизиты под ними, ширина как у текстовых разделов. */
.panel{max-width:1020px}
.panel--angosto{max-width:560px;margin:0 auto}
.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(--humo-nata);font-size:1rem;line-height:1.62}
.forma{display:grid;gap:1.05rem}
.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:.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(--indigo);
       outline-offset:1px;border-color:var(--indigo)}
.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:48ch}
.forma__aviso a{color:var(--ambar-nata)}
.contactos{display:grid;gap:.65rem;margin-top:clamp(1.6rem,3.5vw,2.3rem);
           padding-top:1.3rem;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:.55rem;align-items:flex-start}
.contactos .material-symbols-outlined{font-size:1.12rem;
                                      color:var(--ambar-nata);flex:0 0 auto}
.contactos a{color:var(--tinta);text-decoration:none}
.contactos a:hover{color:var(--ambar-nata)}

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

/* правовые */
.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:.78rem;letter-spacing:.07em;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(--ambar)}

/* подвал */
.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.18rem;color:var(--sobre-osc);margin-bottom:.65rem}
.pie__lema{font-size:.87rem;line-height:1.6;color:var(--tenue-osc);
           max-width:42ch}
.pie__tit{font-family:var(--f-rotulo);font-weight:var(--w-rotulo);
          text-transform:uppercase;letter-spacing:.2em;font-size:.63rem;
          color:var(--indigo-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(--nata);color:var(--tinta);
          border-top:1px solid var(--linea);padding:.95rem 18px;
          display:flex;flex-wrap:wrap;gap:.8rem 1.3rem;align-items:center;
          justify-content:space-between;
          box-shadow:0 -16px 36px -28px rgba(0,0,0,.6)}
.galletas[hidden]{display:none}
.galletas__txt{font-size:.81rem;line-height:1.5;color:var(--humo-nata);
               max-width:76ch;flex:1 1 280px}
.galletas__pie{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.galletas__enl{font-size:.76rem;color:var(--ambar-nata)}

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