/* ============================================================
   Landing de venta del Metodo Tikun.
   Reproduce el diseno de Canva pero adaptado a celular y a
   computadora. Los colores estan tomados del diseno original.
   ============================================================ */

:root{
  --lp-negro:#000000;
  --lp-carbon:#0B0B0C;
  --lp-menta:#BCECE0;
  --lp-beige:#C6AC8F;
  --lp-rosa:#FF66C4;
  --lp-oro:#9D7E46;
  --lp-dorado:#C6AC8F;
  --lp-crema:#EAE0D5;
  --lp-tinta:#1A1A1A;
  --lp-display:'Italiana',Georgia,serif;
  --lp-sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --lp-script:'Sacramento',cursive;
  --lp-ancho:1180px;
}

.lp{
  margin:0;background:var(--lp-negro);color:var(--lp-crema);
  font-family:var(--lp-sans);font-weight:300;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
.lp *,.lp *::before,.lp *::after{box-sizing:border-box}
.lp img{max-width:100%;height:auto;display:block}

.lp-wrap{width:min(var(--lp-ancho),92vw);margin-inline:auto}
.lp-seccion{padding-block:clamp(56px,9vw,104px)}
.lp-centro{text-align:center}

/* titulos: display fina en mayusculas, dos tonos como en el diseno */
.lp h1,.lp h2{
  font-family:var(--lp-display);font-weight:400;
  text-transform:uppercase;letter-spacing:.03em;line-height:.98;
  margin:0 0 22px;color:var(--lp-crema);
}
.lp h1{font-size:clamp(2.5rem,8.4vw,4.6rem)}
.lp h2{font-size:clamp(2rem,6.4vw,3.6rem)}
.lp h1 .oro,.lp h2 .oro{color:var(--lp-dorado)}
.lp h3{
  font-family:var(--lp-display);font-weight:400;text-transform:uppercase;
  letter-spacing:.09em;font-size:clamp(.95rem,1.8vw,1.08rem);
  line-height:1.35;margin:0 0 12px;color:var(--lp-dorado);
}
.lp p{margin:0 0 16px}
.lp-script{
  font-family:var(--lp-script);color:var(--lp-dorado);
  font-size:clamp(1.9rem,5.2vw,2.9rem);line-height:1;
  text-transform:none;letter-spacing:0;display:block;margin:6px 0 24px;
}
.lp-lead{font-size:clamp(1rem,1.6vw,1.1rem);color:#CFC7BB;line-height:1.85}

/* barras de color */
.lp-barra-menta{background:var(--lp-menta);height:14px}
.lp-barra-rosa{
  background:var(--lp-rosa);color:#111;text-align:center;
  padding:18px 20px;font-weight:600;font-size:clamp(.95rem,2vw,1.1rem);
  line-height:1.5;letter-spacing:.01em;
}

/* cabecera con el logo */
.lp-logo{background:var(--lp-negro);text-align:center;padding:34px 20px 30px}
.lp-logo-marca{
  font-family:var(--lp-display);font-size:clamp(1.8rem,5vw,2.6rem);
  letter-spacing:.16em;color:var(--lp-dorado);text-transform:uppercase;line-height:1;
}
.lp-logo-sub{
  margin-top:12px;font-size:.68rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--lp-crema);font-weight:500;
}
.lp-ojo{display:block;width:44px;height:auto;margin:0 auto 14px;opacity:.9}

/* hero */
.lp-hero{background:linear-gradient(105deg,#0A0A0A 0%,#141414 46%,#2A2A2A 100%);overflow:hidden}
.lp-hero-grid{display:grid;gap:0;align-items:stretch}
@media(min-width:900px){.lp-hero-grid{grid-template-columns:1.05fr .95fr}}
.lp-hero-txt{padding:clamp(40px,6vw,76px) clamp(22px,4vw,58px)}
/* la foto se muestra entera y centrada, no recortada */
.lp-hero-foto{
  display:flex;align-items:center;justify-content:center;
  background:#B3B3B3;padding:clamp(18px,3vw,30px);
}
.lp-hero-foto img{
  width:auto;max-width:100%;max-height:clamp(300px,52vh,520px);
  object-fit:contain;border-radius:10px;
}

/* seccion beige del dolor */
.lp-dolor{background:var(--lp-beige);color:#241C13}
.lp-dolor h2{color:#3A2E20}
.lp-dolor h2 .oro{color:#F4EDE4}
.lp-dolor-grid{display:grid;gap:30px;align-items:start;margin-top:34px}
@media(min-width:820px){.lp-dolor-grid{grid-template-columns:1.35fr .65fr;gap:46px}}
.lp-dolor p{color:#2C2118;font-size:clamp(1rem,1.7vw,1.1rem);line-height:1.8}
.lp-dolor strong{color:#FFF;font-weight:600}
.lp-dolor .destaca{color:#FFF;font-weight:600}
.lp-dolor-foto{border-radius:50%;overflow:hidden;aspect-ratio:1;max-width:300px;margin-inline:auto}
.lp-dolor-foto img{width:100%;height:100%;object-fit:cover}

/* lo que vas a recibir */
.lp-recibis-grid{display:grid;gap:38px;align-items:start;margin-top:38px}
@media(min-width:900px){.lp-recibis-grid{grid-template-columns:1.15fr .85fr;gap:52px}}
.lp-lista{list-style:none;margin:0;padding:0}
.lp-lista li{
  position:relative;padding:0 0 22px 26px;
  font-size:clamp(.97rem,1.55vw,1.04rem);line-height:1.7;color:#DCD4C8;
}
.lp-lista li::before{
  content:"";position:absolute;left:0;top:11px;width:7px;height:7px;
  background:var(--lp-dorado);transform:rotate(45deg);
}
.lp-lista b{color:var(--lp-dorado);font-weight:600}
.lp-portadas{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(min-width:520px){.lp-portadas{gap:14px}}
@media(min-width:900px){.lp-portadas{grid-template-columns:repeat(2,1fr);gap:16px}}
.lp-portadas img{border-radius:14px;box-shadow:0 14px 30px rgba(0,0,0,.55)}

/* bloque de texto en cursiva */
.lp-manifiesto{max-width:760px;margin-inline:auto;text-align:center}
.lp-manifiesto p{font-style:italic;font-size:clamp(1rem,1.7vw,1.12rem);line-height:1.9;color:#D6CEC2}
.lp-manifiesto strong{font-style:normal;font-weight:600;color:#FFF}
.lp-manifiesto .subraya{text-decoration:underline;font-style:italic;color:var(--lp-dorado)}

/* los tres arcos */
.lp-arcos{display:grid;gap:34px;margin-top:44px}
@media(min-width:720px){.lp-arcos{grid-template-columns:repeat(3,1fr);gap:26px}}
.lp-arco{text-align:center}
.lp-arco img{
  width:100%;max-width:230px;margin:0 auto 20px;
  border-radius:190px 190px 12px 12px;
}
.lp-arco p{font-size:.94rem;line-height:1.7;color:#CFC7BB}
.lp-sep{
  display:block;width:70px;height:1px;margin:16px auto;
  background:linear-gradient(90deg,transparent,var(--lp-dorado),transparent);
}

/* tu vida entera cambia */
.lp-cambia{display:grid;gap:30px;margin-top:40px}
@media(min-width:720px){.lp-cambia{grid-template-columns:repeat(3,1fr);gap:34px}}
.lp-cambia p{font-size:.96rem;line-height:1.8;color:#CFC7BB;text-align:center}
.lp-cambia .oro{color:var(--lp-dorado)}

/* resenas */
.lp-resenas{background:var(--lp-oro);color:#2A2113}
.lp-resenas h2{color:#F7F1E8}
.lp-resenas h2 .oro{color:#3A2E1B}
.lp-resenas-caja{margin-top:34px;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.34)}
.lp-resenas-pie{margin-top:20px;text-align:center;font-size:.84rem;color:#3A2E1B}

/* oferta */
.lp-oferta{background:var(--lp-carbon)}
.lp-caja{
  max-width:660px;margin:38px auto 0;padding:clamp(30px,5vw,52px) clamp(24px,4vw,46px);
  background:#131316;border:1px solid rgba(198,172,143,.42);border-radius:22px;text-align:center;
}
.lp-precio{
  font-family:var(--lp-display);font-size:clamp(3.2rem,11vw,5rem);
  line-height:1;color:var(--lp-menta);letter-spacing:.02em;margin:22px 0 10px;
}
.lp-precio-nota{font-size:.9rem;color:#A9A197;margin:0}
.lp-garantia{
  max-width:660px;margin:26px auto 0;padding:26px 28px;text-align:left;
  background:rgba(198,172,143,.08);border:1px solid rgba(198,172,143,.28);border-radius:18px;
}
.lp-garantia h3{margin-bottom:8px}
.lp-garantia p{font-size:.94rem;color:#C3BBAF;margin:0}

/* botones */
.lp-btn{
  display:inline-block;padding:19px 44px;border-radius:999px;
  font-family:var(--lp-sans);font-size:.82rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  background:var(--lp-menta);color:#0A0A0A;border:0;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.lp-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(188,236,224,.28)}
.lp-btn-bloque{display:block;width:100%}
.lp-btn-linea{background:transparent;color:var(--lp-menta);border:1px solid var(--lp-menta)}
.lp-btn-oscuro{background:#0A0A0A;color:var(--lp-dorado);border:1px solid rgba(198,172,143,.5)}
.lp-btn-nota{margin-top:16px;font-size:.8rem;color:#A9A197;letter-spacing:.04em}

/* barra fija de compra en el celular */
.lp-fija{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 16px;background:rgba(8,8,9,.96);
  border-top:1px solid rgba(198,172,143,.3);
  backdrop-filter:blur(8px);
  transform:translateY(105%);transition:transform .3s ease;
}
.lp-fija.visible{transform:none}
.lp-fija-precio{font-family:var(--lp-display);font-size:1.5rem;color:var(--lp-menta);line-height:1}
.lp-fija-precio em{display:block;font-family:var(--lp-sans);font-style:normal;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#A9A197;margin-top:3px}
.lp-fija .lp-btn{padding:14px 26px;font-size:.72rem;letter-spacing:.16em}
@media(min-width:900px){.lp-fija{display:none}}
body.lp{padding-bottom:0}

/* pie */
.lp-pie{background:#000;padding:44px 20px 54px;text-align:center}
.lp-pie p{font-size:.76rem;line-height:1.75;color:#6F6A63;max-width:760px;margin:0 auto 12px}
.lp-pie a{color:#8C8478;text-decoration:none}
.lp-credito{display:inline-flex;flex-direction:column;align-items:center;gap:10px;margin-top:22px;opacity:.55;text-decoration:none;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#8C8478}
.lp-credito img{height:34px;width:auto}

/* aparicion suave */
.lp .revela{transition:opacity .7s ease,transform .7s ease}
html.js .lp .revela{opacity:0;transform:translateY(20px)}
html.js .lp .revela.dentro{opacity:1;transform:none}

/* titulo que entra con zoom para llamar la atencion */
.lp-zoom{transform-origin:center}
html.js .lp .lp-zoom{
  opacity:0;transform:scale(.72);
  transition:opacity .55s ease,transform .9s cubic-bezier(.16,1.02,.3,1);
}
html.js .lp .lp-zoom.dentro{opacity:1;transform:scale(1)}
/* y late una vez cuando termina de entrar */
html.js .lp .lp-zoom.dentro{animation:lp-latido 2.6s ease-in-out .9s 1}
@keyframes lp-latido{
  0%,100%{letter-spacing:.03em}
  45%{letter-spacing:.075em}
}

@media(prefers-reduced-motion:reduce){
  html.js .lp .revela,html.js .lp .lp-zoom{opacity:1;transform:none;animation:none}
  .lp-btn:hover{transform:none}
}

/* ============================================================
   Seccion destacada "En menos de 7 dias".
   Es el momento de mayor deseo de la pagina, asi que lleva
   halo dorado, destellos y el titulo con brillo en movimiento.
   ============================================================ */
.lp-destaque{position:relative;overflow:hidden;background:#050505}
.lp-destaque::before{
  content:"";position:absolute;left:50%;top:-10%;translate:-50% 0;
  width:min(1100px,150vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(198,172,143,.20) 0%,rgba(198,172,143,.07) 34%,transparent 68%);
}
.lp-destaque > *{position:relative;z-index:1}

/* titulo con destello que barre */
.lp-brillo{
  background:linear-gradient(100deg,#B69B7C 0%,#C6AC8F 34%,#FFF4E2 47%,#FFFFFF 51%,#FFF4E2 55%,#C6AC8F 68%,#B69B7C 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:lp-barrido 5.5s ease-in-out infinite;
}
@keyframes lp-barrido{
  0%{background-position:140% 0}
  55%,100%{background-position:-40% 0}
}

/* destellos sueltos alrededor del bloque */
.lp-chispa{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:#F3E4CB;box-shadow:0 0 8px 2px rgba(243,228,203,.75);
  opacity:0;animation:lp-titilar 4.2s ease-in-out infinite;pointer-events:none;
}
@keyframes lp-titilar{
  0%,100%{opacity:0;transform:scale(.4)}
  50%{opacity:.95;transform:scale(1)}
}

/* las frases, una debajo de otra, con jerarquia */
.lp-frases{max-width:780px;margin:38px auto 0;text-align:center}
.lp-frases p{font-size:clamp(1rem,1.75vw,1.15rem);line-height:1.85;color:#BEB6AA;margin:0 0 20px}
.lp-frases .fuerte{
  font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.6;
  color:#FFFFFF;font-weight:500;margin-bottom:26px;
}
.lp-frases .oro{color:var(--lp-dorado)}

/* la frase clave, en placa con halo */
.lp-placa{
  margin:36px auto;padding:clamp(24px,4vw,34px) clamp(22px,4vw,40px);
  max-width:660px;border-radius:20px;
  background:linear-gradient(160deg,rgba(198,172,143,.16),rgba(198,172,143,.04));
  border:1px solid rgba(198,172,143,.5);
  box-shadow:0 0 0 rgba(198,172,143,.4);
  animation:lp-pulso 3.4s ease-in-out infinite;
}
.lp-placa p{
  margin:0;font-family:var(--lp-display);text-transform:uppercase;
  font-size:clamp(1.3rem,3.6vw,2.1rem);line-height:1.25;letter-spacing:.04em;
  color:#FFF6E8;
}
@keyframes lp-pulso{
  0%,100%{box-shadow:0 0 0 rgba(198,172,143,0);border-color:rgba(198,172,143,.4)}
  50%{box-shadow:0 0 42px rgba(198,172,143,.28);border-color:rgba(198,172,143,.85)}
}

/* cierre con el boton */
.lp-cierre-destaque{margin-top:40px}
.lp-cierre-destaque .lp-btn{box-shadow:0 0 34px rgba(188,236,224,.22)}

/* ------------------------------------------------------------
   Titulos de columna legibles.
   La display fina se lee mal en tamano chico, asi que estos van
   en la sans, en blanco solido, con un halo dorado que late.
   El brillo se hace con sombra y no con degradado sobre el texto,
   para que el contraste no baje nunca.
   ------------------------------------------------------------ */
.lp-arco h3,
.lp-columna-titulo{
  font-family:var(--lp-sans);
  font-weight:500;
  font-size:clamp(1.06rem,2.1vw,1.28rem);
  line-height:1.4;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#FFFFFF;
  margin:0 0 14px;
  animation:lp-halo 3.8s ease-in-out infinite;
}
.lp-arco:nth-child(2) h3{animation-delay:.7s}
.lp-arco:nth-child(3) h3{animation-delay:1.4s}

@keyframes lp-halo{
  0%,100%{text-shadow:0 0 0 rgba(198,172,143,0)}
  50%{text-shadow:0 0 18px rgba(230,203,160,.75),0 0 34px rgba(198,172,143,.35)}
}

/* el texto de apoyo, con mas contraste que antes */
.lp-arco p{color:#D8D1C6;font-size:clamp(.95rem,1.6vw,1.02rem)}
.lp-cambia p{color:#D8D1C6;font-size:clamp(.98rem,1.6vw,1.05rem);line-height:1.85}
.lp-cambia .oro{color:#E4CBA2;font-weight:400}

/* separador un poco mas visible */
.lp-sep{
  width:88px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(230,203,160,.9),transparent);
}

@media(prefers-reduced-motion:reduce){
  .lp-arco h3,.lp-columna-titulo{animation:none;text-shadow:0 0 16px rgba(198,172,143,.4)}
  .lp-brillo{animation:none}
  .lp-placa{animation:none;border-color:rgba(198,172,143,.7)}
  .lp-chispa{animation:none;opacity:.6}
}

/* ------------------------------------------------------------
   Movimiento en el boton de compra.
   Late despacio, con un halo que respira, y una luz que lo cruza
   cada tanto. Al pasar el mouse o al tocarlo se frena y se agranda,
   asi el movimiento invita pero no molesta cuando se va a hacer clic.
   ------------------------------------------------------------ */
.lp-btn{position:relative;overflow:hidden;isolation:isolate}
.lp-btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.72) 48%,transparent 66%);
  transform:translateX(-130%);
  animation:lp-luz 4.6s ease-in-out infinite;
}
@keyframes lp-luz{
  0%,62%{transform:translateX(-130%)}
  84%,100%{transform:translateX(130%)}
}

.lp-late{animation:lp-respira 2.4s ease-in-out infinite}
@keyframes lp-respira{
  0%,100%{transform:scale(1);box-shadow:0 0 0 rgba(188,236,224,.0)}
  50%{transform:scale(1.035);box-shadow:0 12px 38px rgba(188,236,224,.34)}
}
.lp-late:hover,.lp-late:focus-visible{
  animation-play-state:paused;
  transform:scale(1.055);
  box-shadow:0 16px 44px rgba(188,236,224,.44);
}

/* el de la caja de precio, que es el mas importante, late un poco mas */
.lp-caja .lp-late{animation-duration:2s}

@media(prefers-reduced-motion:reduce){
  .lp-late,.lp-btn::after{animation:none}
  .lp-late{transform:none}
}

/* ------------------------------------------------------------
   Pie de pagina: mas legible y con la aclaracion de autoria.
   ------------------------------------------------------------ */
.lp-legal{
  font-size:.86rem;line-height:1.85;color:#9E968A;
  max-width:74ch;margin:0 auto 18px;
}
.lp-legal strong{color:var(--lp-dorado);font-weight:500}
.lp-reg{font-size:.42em;vertical-align:super;letter-spacing:0;margin-left:2px}
.lp-aclaracion{
  font-size:.76rem;line-height:1.7;color:#756E64;
  max-width:60ch;margin:16px auto 0;
}
.lp-credito{opacity:.7}
.lp-credito:hover{opacity:1}

/* ------------------------------------------------------------
   "Lo que vas a recibir": mas compacto y agrupado.
   Antes la lista tenia mucho aire entre puntos y las portadas
   iban en dos columnas, asi que el bloque de la derecha quedaba
   mucho mas largo que el de la izquierda.
   ------------------------------------------------------------ */
.lp-recibis-grid{gap:30px;align-items:start}
@media(min-width:900px){.lp-recibis-grid{grid-template-columns:1.1fr .9fr;gap:44px}}

.lp-lista li{
  padding:0 0 13px 24px;
  line-height:1.6;
}
.lp-lista li::before{top:9px;width:6px;height:6px}
.lp-lista li:last-child{padding-bottom:0}

.lp-portadas{grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:520px){.lp-portadas{gap:12px}}
@media(min-width:900px){.lp-portadas{grid-template-columns:repeat(3,1fr);gap:12px}}
.lp-portadas img{border-radius:11px;box-shadow:0 10px 22px rgba(0,0,0,.5)}

/* ------------------------------------------------------------
   Hero rediseñado: la foto llena su marco, sin gris alrededor.
   En celular va como una banda arriba del texto; en computadora
   ocupa toda la columna derecha de borde a borde.
   El encuadre se corre para que siempre entren el pendulo y la cara.
   ------------------------------------------------------------ */
.lp-hero{position:relative}
.lp-hero-foto{
  display:block;padding:0;background:#B3B3B3;
  aspect-ratio:4/3;overflow:hidden;
}
.lp-hero-foto img{
  width:100%;height:100%;max-height:none;
  object-fit:cover;object-position:46% 34%;border-radius:0;
}
@media(min-width:900px){
  .lp-hero-grid{align-items:stretch}
  .lp-hero-foto{aspect-ratio:auto;height:100%;min-height:520px}
}

/* degradado suave para que la foto se funda con el negro del hero */
.lp-hero-foto::after{
  content:"";position:absolute;inset:auto 0 0 0;height:34%;
  background:linear-gradient(to top,rgba(10,10,10,.55),transparent);
  pointer-events:none;
}
@media(min-width:900px){
  .lp-hero-foto{position:relative}
  .lp-hero-foto::after{
    inset:0 auto 0 0;width:26%;height:auto;
    background:linear-gradient(to right,#141414,transparent);
  }
}

/* ------------------------------------------------------------
   Hero: la foto en proporcion al texto.
   Antes se estiraba a lo alto de toda la fila y quedaba enorme,
   con mucho negro vacio debajo del texto. Ahora tiene un alto
   propio y se centra respecto del bloque de texto.
   ------------------------------------------------------------ */
.lp-hero-foto{aspect-ratio:16/11}

@media(min-width:900px){
  .lp-hero-grid{grid-template-columns:1.25fr .75fr;align-items:center}
  .lp-hero-txt{padding:clamp(44px,4.6vw,64px) clamp(24px,3.4vw,48px)}
  .lp-hero-foto{
    aspect-ratio:4/5;height:auto;min-height:0;
    max-height:440px;align-self:center;
    margin:clamp(28px,3vw,44px) clamp(28px,3vw,44px) clamp(28px,3vw,44px) 0;
    border-radius:14px;
  }
  .lp-hero-foto::after{
    inset:auto 0 0 0;width:auto;height:38%;border-radius:0 0 14px 14px;
    background:linear-gradient(to top,rgba(10,10,10,.5),transparent);
  }
}

/* ------------------------------------------------------------
   "Lo que vas a recibir" en dos bloques apilados:
   primero la lista, despues las portadas a todo el ancho.
   ------------------------------------------------------------ */
.lp-recibis-grid{display:block;margin-top:34px}
@media(min-width:900px){.lp-recibis-grid{display:block}}

.lp-lista{max-width:820px;margin-inline:auto}

.lp-portadas{
  margin-top:clamp(38px,5vw,58px);
  grid-template-columns:repeat(3,1fr);gap:12px;
}
@media(min-width:620px){.lp-portadas{grid-template-columns:repeat(4,1fr);gap:14px}}
@media(min-width:900px){.lp-portadas{grid-template-columns:repeat(5,1fr);gap:16px}}

/* ------------------------------------------------------------
   Texto dos puntos mas grande en toda la pagina.
   Se sube la base de 16 a 18 px, asi crece todo lo que esta
   medido en rem sin tener que tocar regla por regla.
   ------------------------------------------------------------ */
html{font-size:112.5%}

/* ------------------------------------------------------------
   Hero centrado.
   Antes el texto arrancaba pegado al borde izquierdo de la pantalla
   porque la grilla ocupaba todo el ancho. Ahora usa el mismo ancho
   y los mismos margenes que el resto de las secciones.
   ------------------------------------------------------------ */
.lp-hero-grid{
  width:min(var(--lp-ancho),92vw);
  margin-inline:auto;
}
.lp-hero-txt{padding:clamp(38px,6vw,60px) 0}

@media(min-width:900px){
  .lp-hero-grid{gap:clamp(32px,4vw,56px);align-items:center}
  .lp-hero-txt{padding:clamp(52px,5vw,72px) 0}
  .lp-hero-foto{margin:0}
}

/* ------------------------------------------------------------
   Tipografias elegidas:
   Josefin Sans extra light para los titulos,
   Mrs Saint Delafield para la frase manuscrita.
   Josefin tiene el ojo mas chico que Italiana, asi que los
   titulos suben de tamano y ganan espaciado entre letras.
   ------------------------------------------------------------ */
:root{
  --lp-display:'Josefin Sans',-apple-system,'Segoe UI',sans-serif;
  --lp-script:'Mrs Saint Delafield',cursive;
}

.lp h1,.lp h2{
  font-family:var(--lp-display);
  font-weight:200;
  letter-spacing:.055em;
  line-height:1.06;
}
.lp h1{font-size:clamp(2.3rem,7.6vw,4.2rem)}
.lp h2{font-size:clamp(1.9rem,5.8vw,3.2rem)}

.lp-script{
  font-family:var(--lp-script);
  font-size:clamp(2.4rem,7vw,4rem);
  line-height:1.05;
  margin:14px 0 26px;
}

.lp-logo-marca{
  font-family:var(--lp-display);font-weight:200;letter-spacing:.2em;
}
.lp-precio,.lp-fija-precio{
  font-family:var(--lp-display);font-weight:200;letter-spacing:.04em;
}
.lp-placa p{
  font-family:var(--lp-display);font-weight:200;letter-spacing:.05em;
}

/* ------------------------------------------------------------
   Portadas con entrada tipo morph.
   Arrancan dispersas, giradas y en 3D, y se acomodan en la grilla
   una detras de otra. Al pasar el mouse la tapa se levanta y gira.
   Todo con transformaciones de CSS: no se usa ninguna libreria.
   ------------------------------------------------------------ */
.lp-portadas{perspective:1400px}
.lp-portadas img{
  transform-origin:center;
  will-change:transform,opacity;
  transition:box-shadow .35s ease;
}

/* estado inicial, antes de entrar en pantalla */
html.js .lp-portadas.morph img{
  opacity:0;
  transform:translate3d(var(--dx,0px),var(--dy,60px),-260px) rotate(var(--rot,0deg)) scale(.72);
  transition:
    opacity .7s ease var(--retraso,0s),
    transform 1.15s cubic-bezier(.16,1.02,.28,1) var(--retraso,0s);
}
/* estado final, acomodadas en la grilla */
html.js .lp-portadas.morph.dentro img{
  opacity:1;
  transform:translate3d(0,0,0) rotate(0deg) scale(1);
}

/* al pasar el mouse: se levanta, gira apenas y brilla el borde */
@media(hover:hover){
  .lp-portadas img:hover{
    transform:translate3d(0,-10px,42px) rotate(-1.5deg) scale(1.06)!important;
    box-shadow:0 26px 50px rgba(0,0,0,.65),0 0 0 1px rgba(198,172,143,.55);
    z-index:2;position:relative;
  }
}

@media(prefers-reduced-motion:reduce){
  html.js .lp-portadas.morph img{opacity:1;transform:none;transition:none}
}

/* ------------------------------------------------------------
   Boton de vidrio liquido.
   El efecto son tres capas: el fondo desenfocado que se ve a traves,
   una pila de sombras interiores que dibujan el canto del vidrio,
   y un brillo que lo cruza. Se mantiene el tinte menta para que
   el boton siga siendo lo que mas resalta de la pagina.
   ------------------------------------------------------------ */
.lp-btn{
  background:linear-gradient(150deg,rgba(206,244,235,.94),rgba(160,220,206,.86));
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  backdrop-filter:blur(14px) saturate(180%);
  color:#07110F;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 3px 3px 1px -3px rgba(255,255,255,.95),
    inset -3px -3px 1px -3px rgba(255,255,255,.75),
    inset 1px 1px 1px -.5px rgba(255,255,255,.7),
    inset -1px -1px 1px -.5px rgba(255,255,255,.55),
    inset 0 0 7px 7px rgba(255,255,255,.14),
    inset 0 0 2px 2px rgba(255,255,255,.1),
    0 2px 8px rgba(0,0,0,.28),
    0 0 18px rgba(188,236,224,.24);
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.lp-btn:hover{
  background:linear-gradient(150deg,rgba(219,250,242,.98),rgba(174,230,216,.92));
  border-color:rgba(255,255,255,.8);
}

/* la capa que distorsiona lo que hay detras, como el vidrio real.
   Solo la dibujan los navegadores que soportan filtros SVG de fondo;
   en el resto queda el desenfoque, que ya se ve muy bien. */
.lp-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  -webkit-backdrop-filter:url(#8A6F4A);
  backdrop-filter:url(#8A6F4A);
}

/* el latido ahora mueve la escala y el halo exterior,
   sin pisar las sombras interiores que forman el vidrio */
.lp-late{animation:lp-respira 2.4s ease-in-out infinite}
@keyframes lp-respira{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(188,236,224,0))}
  50%{transform:scale(1.035);filter:drop-shadow(0 10px 26px rgba(188,236,224,.42))}
}
.lp-late:hover,.lp-late:focus-visible{
  animation-play-state:paused;
  transform:scale(1.055);
  filter:drop-shadow(0 14px 34px rgba(188,236,224,.5));
}

@media(prefers-reduced-motion:reduce){
  .lp-late{animation:none;transform:none;filter:none}
}

/* ============================================================
   Botones con degradado animado.
   El truco son propiedades personalizadas registradas con
   @property: al declararlas con un tipo, el navegador puede
   animarlas, y el degradado se mueve en vez de saltar.
   Los colores son los de la marca: menta y dorado.
   ============================================================ */
@property --pos-x   { syntax:'<percentage>'; initial-value:14%;  inherits:false }
@property --pos-y   { syntax:'<percentage>'; initial-value:130%; inherits:false }
@property --exp-x   { syntax:'<percentage>'; initial-value:150%; inherits:false }
@property --exp-y   { syntax:'<percentage>'; initial-value:180%; inherits:false }
@property --tono-1  { syntax:'<color>'; initial-value:#EAFBF5; inherits:false }
@property --tono-2  { syntax:'<color>'; initial-value:#BCECE0; inherits:false }
@property --tono-3  { syntax:'<color>'; initial-value:#8FDCC8; inherits:false }
@property --tono-4  { syntax:'<color>'; initial-value:#C6AC8F; inherits:false }
@property --tono-5  { syntax:'<color>'; initial-value:#8A6F4A; inherits:false }
@property --corte-1 { syntax:'<percentage>'; initial-value:20%;  inherits:false }
@property --corte-2 { syntax:'<percentage>'; initial-value:52%;  inherits:false }
@property --corte-3 { syntax:'<percentage>'; initial-value:74%;  inherits:false }
@property --corte-4 { syntax:'<percentage>'; initial-value:90%;  inherits:false }
@property --corte-5 { syntax:'<percentage>'; initial-value:100%; inherits:false }
@property --borde-giro { syntax:'<angle>'; initial-value:20deg; inherits:true }
@property --borde-1 { syntax:'<color>'; initial-value:rgba(255,255,255,.75); inherits:true }
@property --borde-2 { syntax:'<color>'; initial-value:rgba(198,172,143,.55); inherits:true }

.lp-btn{
  background:radial-gradient(
    var(--exp-x) var(--exp-y) at var(--pos-x) var(--pos-y),
    var(--tono-1) var(--corte-1),
    var(--tono-2) var(--corte-2),
    var(--tono-3) var(--corte-3),
    var(--tono-4) var(--corte-4),
    var(--tono-5) var(--corte-5)
  );
  border:0;
  color:#07120F;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:
    inset 2px 2px 1px -2px rgba(255,255,255,.95),
    inset -2px -2px 1px -2px rgba(255,255,255,.6),
    inset 0 0 8px 6px rgba(255,255,255,.12),
    0 3px 12px rgba(0,0,0,.34);
  transition:
    --pos-x .55s,--pos-y .55s,--exp-x .55s,--exp-y .55s,
    --tono-1 .55s,--tono-2 .55s,--tono-3 .55s,--tono-4 .55s,--tono-5 .55s,
    --corte-1 .55s,--corte-2 .55s,--corte-3 .55s,--corte-4 .55s,--corte-5 .55s,
    --borde-giro .55s,--borde-1 .55s,--borde-2 .55s,
    transform .25s ease, box-shadow .25s ease;
}

/* borde con degradado propio, dibujado como marco */
.lp-btn::before{
  content:"";position:absolute;inset:0;z-index:0;
  border-radius:inherit;padding:1.4px;
  background:linear-gradient(var(--borde-giro),var(--borde-1),var(--borde-2));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}

.lp-btn:hover,.lp-btn:focus-visible{
  --pos-x:0%; --pos-y:88%;
  --exp-x:122%; --exp-y:104%;
  --tono-1:#FFFFFF;
  --tono-2:#DFF7EF;
  --tono-3:#BCECE0;
  --tono-4:#D8BE9E;
  --tono-5:#7A6340;
  --corte-1:0%; --corte-2:12%; --corte-3:34%; --corte-4:74%; --corte-5:100%;
  --borde-giro:200deg;
  --borde-1:rgba(255,255,255,.95);
  --borde-2:rgba(198,172,143,.85);
}

/* el texto por encima del degradado y del borde */
.lp-btn > *{position:relative;z-index:2}

/* ------------------------------------------------------------
   Terminada la entrada, las tapas responden al mouse al instante.
   Durante la entrada cada una tiene su retraso; si ese retraso
   quedara puesto, al pasar el mouse tardaria casi un segundo.
   ------------------------------------------------------------ */
html.js .lp-portadas.morph.listo img{
  transition:transform .32s cubic-bezier(.2,.9,.3,1) 0s,
             box-shadow .32s ease 0s;
}

/* ------------------------------------------------------------
   Efecto que sigue al cursor sobre las portadas.
   Una luz dorada acompana al mouse y las tapas se corren apenas
   en sentido contrario, como si el bloque tuviera profundidad.
   Solo en pantallas con mouse: en el celular no existe cursor.
   ------------------------------------------------------------ */
@media(hover:hover) and (pointer:fine){
  .lp-cursor{position:relative}

  /* la luz que persigue al cursor */
  .lp-cursor::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(
      360px circle at var(--mx,50%) var(--my,50%),
      rgba(230,203,160,.16),
      rgba(230,203,160,.05) 42%,
      transparent 68%
    );
    opacity:0;transition:opacity .45s ease;
  }
  .lp-cursor.activo::before{opacity:1}
  .lp-cursor > *{position:relative;z-index:1}

  /* el bloque de tapas se corre apenas siguiendo al mouse */
  html.js .lp-portadas.morph.listo{
    transform:translate3d(var(--px,0px),var(--py,0px),0);
    transition:transform .6s cubic-bezier(.2,.8,.3,1);
  }
}

/* ============================================================
   Galeria en abanico.
   Las tapas se superponen en curva, cada una girada un poco mas
   que la anterior. Al pasar el mouse, la tapa se endereza,
   se levanta y pasa al frente.
   Solo se arma en pantallas anchas: en celular quedan en grilla,
   porque superpuestas no se veria ninguna.
   ============================================================ */
@media(min-width:900px){
  .lp-portadas.abanico{
    display:block;position:relative;
    width:var(--escena-ancho,1080px);
    height:var(--escena-alto,300px);
    margin:clamp(38px,5vw,58px) auto 0;
    perspective:1200px;
  }
  .lp-portadas.abanico img{
    position:absolute;left:50%;top:50%;
    width:var(--carta-ancho,120px);
    height:var(--carta-alto,162px);
    margin-left:calc(var(--carta-ancho,120px) / -2);
    margin-top:calc(var(--carta-alto,162px) / -2);
    object-fit:cover;border-radius:14px;
    transform-origin:center center;
    transform:translate(var(--tx,0px),var(--ty,0px)) rotate(var(--rot,0deg)) scale(1);
    z-index:var(--z,1);
    box-shadow:0 14px 30px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.35);
    transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease;
    cursor:pointer;
  }
  .lp-portadas.abanico img:hover,
  .lp-portadas.abanico img:focus-visible{
    transform:translate(var(--tx,0px),calc(var(--ty,0px) - 20px)) rotate(0deg) scale(1.16);
    z-index:99;
    box-shadow:0 30px 56px rgba(0,0,0,.66),0 0 0 1px rgba(198,172,143,.6);
    outline:none;
  }
  /* con el abanico armado no se aplica el corrimiento por cursor */
  html.js .lp-portadas.abanico{transform:none!important}
}

@media(prefers-reduced-motion:reduce){
  .lp-portadas.abanico img{transition:none}
}

/* el abanico no debe recortar la tapa que se agranda */
@media(min-width:900px){
  .lp-portadas.abanico{overflow:visible}
  .lp-seccion.lp-cursor{overflow:visible}
}

/* ------------------------------------------------------------
   Correccion del temblor al pasar el mouse.
   El problema era el levantado: la tapa subia 20 px, se salia de
   abajo del cursor, el navegador disparaba la salida, la achicaba,
   volvia a quedar bajo el cursor y arrancaba de nuevo.
   Ahora solo crece, y al crecer siempre cubre la posicion del
   cursor, asi que el ciclo no puede empezar.
   ------------------------------------------------------------ */
@media(min-width:900px){
  .lp-portadas.abanico img{
    will-change:transform;
    transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease;
  }
  .lp-portadas.abanico img:hover,
  .lp-portadas.abanico img:focus-visible{
    transform:translate(var(--tx,0px),var(--ty,0px)) rotate(0deg) scale(1.14);
    z-index:99;
    box-shadow:0 26px 50px rgba(0,0,0,.66),0 0 0 1px rgba(198,172,143,.6);
    outline:none;
  }
}

/* ------------------------------------------------------------
   Portadas quietas en grilla.
   No se mueven solas ni se superponen: cada una se ve entera.
   Al pasar el mouse, esa tapa se agranda y pasa al frente.
   El agrandado no la desplaza, asi que el cursor nunca la pierde
   y no aparece el temblor.
   ------------------------------------------------------------ */
.lp-portadas img{
  transform:scale(1);
  transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s ease;
  will-change:transform;
}
@media(hover:hover) and (pointer:fine){
  .lp-portadas img:hover,
  .lp-portadas img:focus-visible{
    transform:scale(1.16);
    box-shadow:0 24px 46px rgba(0,0,0,.62),0 0 0 1px rgba(198,172,143,.6);
    position:relative;z-index:20;outline:none;
  }
}

/* ============================================================
   Anillo giratorio de portadas.
   Las tapas se ubican sobre un circulo en tres dimensiones y el
   anillo gira sin parar. Como la cara de atras no se dibuja, solo
   se ven las de adelante: da la forma de abanico en movimiento.
   Al pasar el mouse el giro se detiene y esa tapa se adelanta.
   ============================================================ */
.lp-anillo{
  position:relative;
  height:var(--anillo-alto,320px);
  margin:clamp(38px,5vw,58px) auto 0;
  perspective:1100px;
  perspective-origin:50% 42%;
}
.lp-anillo-giro{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  animation:lp-girar var(--vuelta,46s) linear infinite;
}
@keyframes lp-girar{
  from{transform:rotateY(0deg)}
  to{transform:rotateY(-360deg)}
}
/* al pasar el mouse por el anillo, se frena */
.lp-anillo:hover .lp-anillo-giro{animation-play-state:paused}

.lp-anillo img{
  position:absolute;left:50%;top:50%;
  width:var(--carta-ancho,130px);
  height:var(--carta-alto,172px);
  margin-left:calc(var(--carta-ancho,130px) / -2);
  margin-top:calc(var(--carta-alto,172px) / -2);
  object-fit:cover;border-radius:14px;
  transform:rotateY(var(--ang,0deg)) translateZ(var(--radio,300px));
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:0 16px 32px rgba(0,0,0,.55);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;
  cursor:pointer;
}
@media(hover:hover) and (pointer:fine){
  .lp-anillo img:hover,
  .lp-anillo img:focus-visible{
    transform:rotateY(var(--ang,0deg)) translateZ(calc(var(--radio,300px) + 70px)) scale(1.1);
    box-shadow:0 30px 60px rgba(0,0,0,.7),0 0 0 1px rgba(198,172,143,.65);
    outline:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .lp-anillo-giro{animation:none}
}