/* Sistema: paleta de su marca (marrón del logo y del packaging, dorado de sus etiquetas), dos tipografías y escala de 8 px */
  :root{
    --cacao:#2E2424; --marron:#5C4D4D; --oro:#EABE3F; --oro-texto:#9C7A22;
    --crema:#F6F1EA; --arena:#EBE1D5; --tinta:#2A2222; --gris:#6E6262; --linea:rgba(46,36,36,.12);
    --serif:"Cormorant Garamond",Georgia,serif; --sans:Montserrat,Helvetica,Arial,sans-serif;
    --u:8px; --ancho:1200px; --lado:clamp(20px,5vw,56px);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);color:var(--tinta);background:var(--crema);-webkit-font-smoothing:antialiased;line-height:1.6;font-size:16px}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  .caja{max-width:var(--ancho);margin:0 auto;padding:0 var(--lado)}
  .ceja{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--oro-texto)}
  .oscuro .ceja{color:var(--oro)}
  h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:-.01em}
  h2{font-size:clamp(36px,4.6vw,56px);margin-top:calc(2*var(--u))}
  .intro{max-width:560px;margin-top:calc(2*var(--u));color:var(--gris);font-size:17px}
  .oscuro .intro{color:#D9CCC0}
  section{padding:clamp(72px,10vw,128px) 0}
  .btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;letter-spacing:.02em;padding:16px 28px;border-radius:2px;transition:transform .2s,background .2s}
  .btn-oro{background:var(--oro);color:var(--cacao)}
  .btn-oro:hover{transform:translateY(-1px)}
  .btn-linea{border:1px solid rgba(255,255,255,.4);color:#fff}
  .btn-linea:hover{border-color:#fff}

  /* Barra y cabecera */
  .barra{background:var(--cacao);color:#CDBFB3;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:10px var(--lado)}
  header{background:var(--marron);position:sticky;top:0;z-index:10}
  header .caja{display:flex;align-items:center;justify-content:space-between;height:84px}
  header .logo{height:64px;width:auto}
  nav{display:flex;align-items:center;gap:calc(4*var(--u))}
  nav a{color:#EFE5DA;font-size:14px;font-weight:500;letter-spacing:.04em}
  nav a:hover{color:#fff}
  nav .btn{padding:12px 20px;font-size:14px}
  .menu{display:none;color:#fff;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}

  /* Portada */
  .portada{background:var(--cacao);color:#fff;padding:0;overflow:hidden}
  .portada .caja{display:grid;grid-template-columns:1.05fr .95fr;gap:calc(6*var(--u));align-items:center;min-height:640px}
  .portada .texto{padding:calc(10*var(--u)) 0}
  .portada h1{font-size:clamp(46px,6vw,80px);margin-top:calc(3*var(--u))}
  .portada h1 em{font-style:italic;color:var(--oro)}
  .portada p{margin-top:calc(3*var(--u));font-size:18px;color:#D9CCC0;max-width:500px}
  .acciones{display:flex;flex-wrap:wrap;gap:calc(2*var(--u));margin-top:calc(5*var(--u))}
  .foto-portada{position:relative;align-self:stretch;min-height:520px}
  .foto-portada .grande{position:absolute;inset:48px 0 0 0;background:url(img/despues-72.jpg) center 25%/cover}
  .foto-portada .mini{position:absolute;left:-40px;bottom:48px;width:180px;border:6px solid var(--cacao);box-shadow:0 20px 40px rgba(0,0,0,.35)}
  .foto-portada .mini img{aspect-ratio:3/4;object-fit:cover}
  .etq{position:absolute;background:var(--crema);color:var(--cacao);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px}
  .foto-portada .mini .etq{left:8px;top:8px}
  .foto-portada > .etq{right:16px;top:64px}

  /* Franja de confianza */
  .confianza{padding:calc(5*var(--u)) 0;border-bottom:1px solid var(--linea)}
  .confianza .caja{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(3*var(--u))}
  .sello{display:flex;align-items:center;gap:calc(1.5*var(--u));font-size:14px;font-weight:600;color:var(--marron)}
  .sello svg{flex:0 0 28px;height:28px;stroke:var(--oro-texto)}

  /* Tratamientos */
  .rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(3*var(--u));margin-top:calc(7*var(--u))}
  .trat{background:#fff;border:1px solid var(--linea);display:flex;flex-direction:column;transition:box-shadow .25s}
  .trat:hover{box-shadow:0 18px 40px rgba(46,36,36,.10)}
  .trat .img{background:var(--arena);height:280px;display:flex;align-items:center;justify-content:center;padding:calc(3*var(--u))}
  .trat .img img{max-height:100%;max-width:85%;width:auto;height:auto;mix-blend-mode:multiply;object-fit:contain}
  .trat .cuerpo{padding:calc(3*var(--u));display:flex;flex-direction:column;flex:1}
  .trat .tipo{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--oro-texto)}
  .trat h3{font-size:30px;margin-top:var(--u)}
  .trat p{color:var(--gris);font-size:15px;margin-top:var(--u);flex:1}
  .trat .ver{margin-top:calc(2.5*var(--u));font-size:14px;font-weight:600;color:var(--marron);border-top:1px solid var(--linea);padding-top:calc(2*var(--u))}

  /* Resultados */
  .oscuro{background:var(--cacao);color:#fff}
  .resultados .cabeza{display:flex;justify-content:space-between;align-items:flex-end;gap:calc(4*var(--u));flex-wrap:wrap}
  .pares{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(3*var(--u));margin-top:calc(7*var(--u))}
  .par{display:grid;grid-template-columns:1fr 1fr;gap:3px;position:relative}
  .par img{width:100%;aspect-ratio:3/4;object-fit:cover}
  .par .etq{top:10px} .par .a{left:10px} .par .d{right:10px}
  .pie-foto{grid-column:1/-1;font-size:13px;color:#BFAFA2;padding-top:calc(1.5*var(--u))}

  /* Para tu salón */
  .salon .caja{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,7vw,96px);align-items:center}
  .salon .foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
  .pasos{margin-top:calc(5*var(--u));display:grid;gap:calc(3*var(--u))}
  .paso{display:grid;grid-template-columns:56px 1fr;gap:calc(2*var(--u));padding-bottom:calc(3*var(--u));border-bottom:1px solid var(--linea)}
  .paso .n{font-family:var(--serif);font-size:40px;line-height:1;color:var(--oro-texto)}
  .paso h3{font-size:26px}
  .paso p{color:var(--gris);font-size:15px;margin-top:4px}

  /* Exclusivo */
  .exclusivo{background:var(--arena);padding:calc(9*var(--u)) 0;text-align:center}
  .exclusivo h2{max-width:820px;margin-left:auto;margin-right:auto}
  .exclusivo p{max-width:620px;margin:calc(2*var(--u)) auto 0;color:var(--gris)}

  /* Contacto */
  .contacto .caja{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,96px)}
  form{display:grid;grid-template-columns:1fr 1fr;gap:calc(2*var(--u))}
  label{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#CDBFB3}
  input,select{width:100%;margin-top:var(--u);background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.3);color:#fff;font:inherit;font-size:16px;padding:10px 0}
  select option{color:var(--tinta)}
  .ancho{grid-column:1/-1}
  form .btn{justify-content:center;margin-top:var(--u)}
  .nota{font-size:13px;color:#BFAFA2;margin-top:calc(2*var(--u))}
  .whats{display:inline-flex;margin-top:calc(4*var(--u));gap:10px;align-items:center;font-weight:600;color:var(--oro)}

  footer{background:#221B1B;color:#A8998D;font-size:13px;padding:calc(6*var(--u)) 0}
  footer .caja{display:flex;justify-content:space-between;align-items:center;gap:calc(3*var(--u));flex-wrap:wrap}
  footer .logo{height:40px}
  footer nav a{color:#A8998D;font-size:13px}

  /* Móvil */
  @media (max-width:900px){
    nav a:not(.btn){display:none}
    .portada .caja,.salon .caja,.contacto .caja{grid-template-columns:1fr}
    .portada .texto{padding:calc(7*var(--u)) 0 calc(2*var(--u))}
    .foto-portada{min-height:440px;margin:0 calc(-1*var(--lado))}
    .foto-portada .grande{inset:0}
    .foto-portada .mini{left:var(--lado);bottom:24px;width:120px}
    .foto-portada > .etq{top:16px}
    .confianza .caja{grid-template-columns:1fr 1fr}
    .rejilla,.pares{grid-template-columns:1fr}
    .pares{grid-template-columns:1fr}
    form{grid-template-columns:1fr}
  }
  @media (max-width:520px){
    header .caja{height:68px} header .logo{height:40px}
    nav .btn{padding:10px 14px;font-size:13px}
    .barra{font-size:10px}
  }