/* ══════════════════════════════════════════════════════════════════
   100LIFE — web de alto standing en el tema (9-oct-2026).
   Copia de shopify/maqueta-lujo/lujo.css con los estilos globales
   (html, body, a, img) acotados a .lj, el envoltorio de cada sección
   lj-*, para no pisar el resto del tema. Si se cambia la maqueta, se
   vuelve a copiar.
   ══════════════════════════════════════════════════════════════════ */
.lj {
  --marfil: #f4f1ea; --marfil2: #ebe6db; --tinta: #1b1a17; --gris: #6e6960;
  --noche: #10120f; --noche2: #191c17; --oro: #c9b48a; --verde: #2e6b4f;
  --linea: rgba(27,26,23,.12); --linea-n: rgba(244,241,234,.16);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;
  --curva: cubic-bezier(.2,.7,.2,1);
}
.lj, .lj * { box-sizing: border-box; }
.lj { background: var(--marfil); color: var(--tinta); font-family: var(--sans); font-weight: 300; -webkit-font-smoothing: antialiased; }
.lj a { color: inherit; text-decoration: none; }
.lj img, .lj video { display: block; max-width: 100%; }
.lj h1, .lj h2, .lj h3 { font-family: inherit; letter-spacing: inherit; color: inherit; }
.lj .serif { font-family: var(--serif) !important; }

.k { margin: 0; font-size: 10.5px; font-weight: 400; letter-spacing: .32em; text-transform: uppercase; }
.serif { font-family: var(--serif); font-weight: 300; letter-spacing: -.01em; }

/* ── cabecera ─────────────────────────────────────────────────────── */
.cab { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; color: var(--marfil); transition: background .4s, color .4s, padding .4s; }
.cab.is-solida { background: rgba(244,241,234,.92); color: var(--tinta); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 12px 20px; box-shadow: 0 1px 0 var(--linea); }
.cab__logo { position: relative; display: block; width: 112px; height: 29px; }
.cab__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .4s; }
.cab__logo-n { opacity: 0; }
.cab.is-solida .cab__logo-b { opacity: 0; }
.cab.is-solida .cab__logo-n { opacity: 1; }
@media (min-width: 900px) { .cab__logo { width: 136px; height: 35px; } }
.cab__nav { display: none; gap: 32px; }
.cab__nav a, .cab__cesta { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
@media (min-width: 900px) { .cab { padding: 26px 48px; } .cab.is-solida { padding: 16px 48px; } .cab__nav { display: flex; } }

/* ── héroe ────────────────────────────────────────────────────────── */
.heroe { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--noche); color: var(--marfil); }
.heroe video, .heroe__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); animation: acercar 14s var(--curva) forwards; }
@keyframes acercar { to { transform: scale(1); } }
.heroe::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,18,15,.35) 0%, rgba(16,18,15,0) 30%, rgba(16,18,15,0) 50%, rgba(16,18,15,.72) 100%); }
.heroe__txt { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 20px 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.heroe__t { margin: 0; font-size: clamp(48px, min(13vw, 15svh), 132px); line-height: .92; }
.heroe__d { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.6; color: rgba(244,241,234,.86); }
.boton { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 26px; border-radius: 999px; font-size: 11px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; border: 1px solid currentColor; transition: background .3s, color .3s, border-color .3s; cursor: pointer; background: none; color: inherit; font-family: var(--sans); }
.boton--claro { background: var(--marfil); color: var(--tinta); border-color: var(--marfil); }
.boton--claro:hover { background: var(--oro); border-color: var(--oro); }
.boton--tinta { background: var(--tinta); color: var(--marfil); border-color: var(--tinta); }
.boton--tinta:hover { background: var(--verde); border-color: var(--verde); }
.heroe__baja { position: absolute; z-index: 2; right: 20px; bottom: 56px; width: 1px; height: 56px; background: rgba(244,241,234,.4); overflow: hidden; }
.heroe__baja::after { content: ''; position: absolute; left: 0; top: -56px; width: 1px; height: 56px; background: var(--marfil); animation: baja 2.4s ease-in-out infinite; }
@keyframes baja { to { top: 56px; } }
@media (min-width: 900px) { .heroe__txt { padding: 0 48px 80px; } .heroe__d { font-size: 17px; } .heroe__baja { right: 48px; bottom: 80px; } }

/* ── héroe partido (tipo SANA): vídeo + bote ───────────────────────── */
.duo { display: grid; min-height: 100svh; padding-top: 0; }
.duo__video { position: relative; min-height: 78svh; overflow: hidden; background: var(--noche); color: var(--marfil); }
.duo__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.duo__video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,18,15,.25), rgba(16,18,15,0) 30%, rgba(16,18,15,0) 55%, rgba(16,18,15,.55)); }
.duo__txt { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 24px 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.duo__t { margin: 0; font-size: clamp(46px, min(9vw, 12svh), 112px); line-height: .95; }
.duo__bote { position: relative; min-height: 64svh; overflow: hidden; background: #ded8cb; }
.duo__bote img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1.35fr 1fr; height: 100svh; }
  .duo__video, .duo__bote { min-height: 0; }
  .duo__txt { padding: 0 48px 64px; }
}

/* ── rejilla de productos ─────────────────────────────────────────── */
.prods { padding: 96px 20px 104px; max-width: 1440px; margin: 0 auto; }
.prods__t { margin: 0 0 40px; text-align: center; font-size: clamp(34px, 5vw, 52px); }
.prods__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
.prod { display: flex; flex-direction: column; gap: 6px; }
.prod__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: #ded8cb; margin-bottom: 10px; }
.prod__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; transition: transform 1.2s var(--curva); }
.prod:hover .prod__foto img { transform: scale(1.04); }
.prod__n { margin: 0; font-size: 22px; line-height: 1.1; }
.prod__p { margin: 0; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); }
.prod__e { margin: 4px 0 0; font-size: 14px; }
.prod--pronto .prod__foto img { filter: grayscale(1) contrast(.9) brightness(1.05); opacity: .55; }
.prod--pronto .prod__e { color: var(--verde); }
.prod__sello { position: absolute; top: 14px; left: 14px; padding: 7px 12px; border-radius: 999px; background: var(--tinta); color: var(--marfil); font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; }
@media (min-width: 900px) { .prods { padding: 140px 48px; } .prods__rejilla { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } }

/* ── héroe de marca: el bote de cerca con una luz que lo recorre ──── */
.marca { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(28px, 5svh, 56px);
  padding: 96px 0 56px; background: radial-gradient(120% 80% at 50% 45%, #1f3328 0%, #121a15 55%, #0c100d 100%); color: var(--marfil); overflow: hidden; }
.marca__txt { text-align: center; padding: 0 20px; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.marca__t { margin: 0; font-size: clamp(46px, min(10vw, 12svh), 128px); line-height: .95; }
.marca__bote { position: relative; width: 100%; aspect-ratio: 1692 / 512; overflow: hidden; }
/* La foto trae piedra a la izquierda: se recorta (15 %) y un poco a la derecha (3 %) para que el bote llene la franja. */
.marca__bote img { width: 122%; max-width: none; height: 100%; margin-left: -18.3%; object-fit: cover; animation: respira 16s ease-in-out infinite alternate; }
@keyframes respira { from { transform: scale(1.04); } to { transform: scale(1); } }
.marca__luz { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,246,220,.28) 48%, rgba(255,246,220,.05) 56%, transparent 66%);
  mix-blend-mode: screen; transform: translateX(-100%); animation: barre 7s cubic-bezier(.45,.05,.35,1) 1.2s infinite; }
@keyframes barre { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.marca__pie { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 0 20px; text-align: center; }
.marca__d { margin: 0; max-width: 40ch; font-size: 15px; line-height: 1.6; color: rgba(244,241,234,.78); }
@media (max-aspect-ratio: 4/5) { .marca__bote { aspect-ratio: auto; height: 34svh; } .marca__bote img { width: 100%; margin-left: 0; object-position: 34% 50%; } }

/* ── banda a todo el ancho con vídeo (Collagen 10) ──────────────── */
.banda { position: relative; height: 86svh; min-height: 480px; overflow: hidden; color: var(--marfil); background: var(--noche); }
.banda video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banda::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,18,15,.55) 0%, rgba(16,18,15,.15) 45%, rgba(16,18,15,0) 70%); }
.banda__txt { position: absolute; z-index: 2; left: 0; bottom: 0; padding: 0 24px 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.banda__t { margin: 0; font-size: clamp(36px, 6vw, 72px); line-height: 1.02; }
@media (min-width: 900px) { .banda__txt { padding: 0 48px 72px; } }

/* ── objetivos: los vídeos de estilo de vida, uno por objetivo ───── */
.objs { padding: 104px 0 112px; }
.objs__cab { padding: 0 20px; max-width: 1280px; margin: 0 auto; }
.objs__t { margin: 14px 0 0; font-size: clamp(36px, 6vw, 58px); line-height: 1.05; }
.objs__fila { margin-top: 40px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px 8px; scrollbar-width: none; }
.objs__fila::-webkit-scrollbar { display: none; }
.obj { position: relative; flex: 0 0 76%; scroll-snap-align: start; aspect-ratio: 3 / 4; border-radius: 4px; overflow: hidden; background: var(--noche2); color: var(--marfil);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; isolation: isolate; }
.obj video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--curva), filter 1.2s; }
.obj:hover video, .obj.is-sonando video { transform: scale(1); }
.obj::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16,18,15,0) 45%, rgba(16,18,15,.75)); }
.obj--pronto video { filter: grayscale(.6) brightness(.7); }
.obj--pronto:hover video { filter: grayscale(0) brightness(.8); }
.obj--tipo { background: radial-gradient(120% 90% at 70% 15%, #2a2f25 0%, var(--noche2) 60%); }
.obj__n { font-size: 40px; line-height: 1; }
.obj__p { margin-top: 8px; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; opacity: .8; }
.obj__sello { position: absolute; top: 18px; left: 18px; padding: 7px 12px; border: 1px solid var(--linea-n); border-radius: 999px; font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--oro); }
@media (min-width: 900px) { .objs { padding: 160px 0; } .objs__cab { padding: 0 48px; } .objs__fila { padding: 0 48px 8px; } .obj { flex: 1 1 0; } }

/* ── manifiesto ───────────────────────────────────────────────────── */
.manif { padding: 120px 20px 96px; text-align: center; }
.manif__t { margin: 22px auto 0; max-width: 18ch; font-size: clamp(34px, 7vw, 68px); line-height: 1.08; }
.manif__t em { font-style: italic; color: var(--verde); }
.cifras { margin: 72px auto 0; max-width: 1080px; display: grid; gap: 1px; background: var(--linea); border-block: 1px solid var(--linea); }
.cifra { background: var(--marfil); padding: 32px 12px; }
.cifra__n { margin: 0; font-family: var(--serif); font-weight: 300; font-size: 54px; line-height: 1; }
.cifra__n small { font-size: .42em; letter-spacing: .04em; }
.cifra__d { margin: 12px auto 0; max-width: 26ch; font-size: 13px; line-height: 1.55; color: var(--gris); }
@media (min-width: 760px) { .cifras { grid-template-columns: repeat(3, 1fr); } .manif { padding: 160px 48px 120px; } }

/* ── el sello: el bote de cerca, se acerca al hacer scroll ────────── */
.sello { position: relative; aspect-ratio: 2064 / 512; overflow: hidden; background: #1c2a22; }
.sello img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transform: scale(calc(1.1 - var(--s, 0) * .1)); transform-origin: 50% 60%; }
/* En vertical el logo entero no cabe a buen tamaño: se enseña el «100» y el infinito. */
@media (max-aspect-ratio: 4/5) { .sello { aspect-ratio: auto; height: 42svh; } .sello img { object-position: 30% 50%; } }

/* ── capítulos (un producto por pantalla) ─────────────────────────── */
.cap { position: relative; display: grid; min-height: 100svh; background: var(--marfil); }
.cap__media { position: relative; min-height: 72svh; overflow: hidden; background: var(--marfil2); }
.cap__media video, .cap__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.8s var(--curva); }
.cap.is-visible .cap__media video, .cap.is-visible .cap__media img { transform: scale(1); }
.cap__media--bote { background: #ded8cb; }
.cap__media--bote img { object-fit: cover; object-position: center 58%; }
.cap__num { position: absolute; z-index: 2; top: 20px; left: 20px; font-family: var(--serif); font-size: 15px; letter-spacing: .1em; color: var(--marfil); mix-blend-mode: difference; }
.cap__txt { padding: 56px 24px 72px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.cap__n { margin: 0; font-size: clamp(44px, 9vw, 84px); line-height: .95; }
.cap__n span { display: block; font-style: italic; font-size: .46em; margin-top: 12px; color: var(--gris); letter-spacing: 0; }
.cap__d { margin: 0; max-width: 40ch; font-size: 15px; line-height: 1.7; color: #3e3b35; }
.dosis { margin: 4px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linea); max-width: 460px; }
.dosis li { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--linea); font-size: 13.5px; }
.dosis b { font-weight: 400; font-family: var(--serif); font-size: 19px; white-space: nowrap; }
.pild { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pild li { padding: 8px 14px; border: 1px solid var(--linea); border-radius: 999px; font-size: 12px; letter-spacing: .03em; }
.cap__pie { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 8px; }
.precio { font-family: var(--serif); font-size: 28px; }
.precio small { font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); margin-left: 6px; }
@media (min-width: 900px) {
  .cap { grid-template-columns: 1.15fr 1fr; }
  .cap--rev { grid-template-columns: 1fr 1.15fr; }
  .cap--rev .cap__media { order: 2; }
  .cap__media { min-height: 100svh; position: sticky; top: 0; height: 100svh; }
  .cap__txt { padding: 120px clamp(48px, 7vw, 120px); }
  .cap__num { top: 32px; left: 48px; }
}

/* ── próximamente ─────────────────────────────────────────────────── */
.pronto { background: var(--noche); color: var(--marfil); padding: 112px 20px 120px; }
.pronto__cab { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.pronto__t { margin: 0; font-size: clamp(40px, 8vw, 76px); line-height: 1; }
.pronto__d { margin: 0; max-width: 46ch; color: rgba(244,241,234,.7); line-height: 1.7; font-size: 15px; }
.pronto__rejilla { max-width: 1180px; margin: 56px auto 0; display: grid; gap: 16px; }
.prox { position: relative; overflow: hidden; border-radius: 4px; min-height: 520px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--noche2); isolation: isolate; }
.prox video, .prox img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55) brightness(.62); transform: scale(1.04); transition: filter 1.2s var(--curva), transform 1.6s var(--curva); }
.prox:hover video { filter: grayscale(0) brightness(.75); transform: scale(1); }
.prox::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16,18,15,0) 35%, rgba(16,18,15,.88) 100%); }
.prox__sello { position: absolute; top: 20px; left: 20px; padding: 8px 14px; border: 1px solid var(--linea-n); border-radius: 999px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--oro); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.prox__txt { padding: 28px 24px 30px; display: flex; flex-direction: column; gap: 10px; }
.prox__n { margin: 0; font-size: 46px; line-height: 1; }
.prox__d { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(244,241,234,.72); }
.prox--tipo { background: radial-gradient(120% 90% at 70% 10%, #2a2f25 0%, var(--noche2) 60%); }
.prox--tipo .prox__luz { position: absolute; z-index: -1; top: 18%; right: 14%; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(201,180,138,.55), rgba(201,180,138,0) 70%); animation: latir 6s ease-in-out infinite; }
@keyframes latir { 50% { transform: scale(1.25); opacity: .6; } }
.aviso { max-width: 1180px; margin: 40px auto 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.aviso input { flex: 1 1 260px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--linea-n); background: transparent; color: var(--marfil); font: inherit; font-size: 14px; }
.aviso input::placeholder { color: rgba(244,241,234,.5); }
@media (min-width: 760px) { .pronto__rejilla { grid-template-columns: 1.4fr 1fr; } .pronto { padding: 160px 48px; } }

/* ── journal (blog) ───────────────────────────────────────────────── */
.journal { padding: 112px 20px; max-width: 1280px; margin: 0 auto; }
.journal__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.journal__t { margin: 16px 0 0; font-size: clamp(36px, 6vw, 58px); line-height: 1.05; }
.journal__rejilla { margin-top: 48px; display: grid; gap: 40px 20px; }
.art { display: flex; flex-direction: column; gap: 14px; }
.art__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: var(--marfil2); }
.art__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--curva); }
.art:hover .art__media video { transform: scale(1.04); }
.art__play { position: absolute; left: 20px; bottom: 20px; width: 52px; height: 52px; border-radius: 50%; background: rgba(244,241,234,.9); }
.art__play::after { content: ''; position: absolute; left: 21px; top: 17px; border-left: 15px solid var(--tinta); border-block: 9px solid transparent; }
.art__media--tipo { display: grid; place-items: center; background: #e4ded1; }
.art__media--tipo span { font-size: clamp(72px, 10vw, 128px); color: var(--tinta); transition: transform 1.4s var(--curva); }
.art:hover .art__media--tipo span { transform: scale(1.06); }
.art__media--verde { background: var(--verde); }
.art__media--verde span { color: var(--marfil); font-style: italic; }
.art__k { color: var(--gris); }
.art__t { margin: 0; font-size: 26px; line-height: 1.15; max-width: 24ch; }
@media (min-width: 760px) { .journal__rejilla { grid-template-columns: 1.3fr 1fr 1fr; } .journal { padding: 160px 48px; } }

/* ── Journal: portada y artículo ───────────────────────────────── */
.journal--portada { padding-top: 140px; }
.journal__rejilla--todo { grid-template-columns: 1fr; }
.art__x { margin: 0; font-size: 14px; line-height: 1.6; color: var(--gris); max-width: 46ch; }
.art__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 760px) { .journal__rejilla--todo { grid-template-columns: 1fr 1fr; } }
.art-p { padding: 128px 0 40px; }
.art-p__cab { max-width: 760px; margin: 0 auto; padding: 0 20px; text-align: center; display: flex; flex-direction: column; gap: 18px; }
.art-p__cab .k a { text-decoration: underline; text-underline-offset: 3px; }
.art-p__t { margin: 0; font-size: clamp(38px, 6vw, 68px); line-height: 1.02; text-wrap: balance; }
.art-p__sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--gris); }
.art-p__media { position: relative; max-width: 1180px; margin: 56px auto 0; aspect-ratio: 16 / 8; overflow: hidden; border-radius: 4px; background: var(--marfil2); }
.art-p__media video, .art-p__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-p__cuerpo { max-width: 680px; margin: 0 auto; padding: 56px 20px 0; font-size: 17px; line-height: 1.8; color: #2c2a26; }
.art-p__cuerpo h2 { margin: 48px 0 12px; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.15; }
.art-p__cuerpo p { margin: 0 0 18px; }
.art-p__cuerpo ul { margin: 0 0 18px; padding-left: 20px; }
.art-p__cuerpo li { margin-bottom: 8px; }
.art-p__cuerpo blockquote { margin: 28px 0; padding: 20px 26px; border-left: 2px solid var(--verde); font-family: var(--serif); font-size: 24px; line-height: 1.3; }
.art-p__cuerpo hr { border: 0; border-top: 1px solid var(--linea); margin: 48px 0 24px; }
.art-p__cuerpo em { color: var(--gris); }
@media (min-width: 900px) { .art-p__media { margin-left: 48px; margin-right: 48px; } }
@media (min-width: 1276px) { .art-p__media { margin-left: auto; margin-right: auto; } }

/* ── puente analítica ─────────────────────────────────────────────── */
.puente { padding: 120px 20px; display: grid; gap: 40px; max-width: 1180px; margin: 0 auto; align-items: center; }
.puente__t { margin: 16px 0 0; font-size: clamp(36px, 6vw, 58px); line-height: 1.05; }
.puente__d { margin: 0 0 28px; max-width: 42ch; line-height: 1.7; color: #3e3b35; }
.puente__num { font-family: var(--serif); font-weight: 300; font-size: clamp(120px, 26vw, 260px); line-height: .8; color: var(--verde); }
.puente__num small { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gris); margin-top: 18px; }
@media (min-width: 900px) { .puente { grid-template-columns: 1fr 1fr; padding: 160px 48px; } }

/* ── pie ──────────────────────────────────────────────────────────── */
.pie { border-top: 1px solid var(--linea); padding: 56px 20px 40px; display: grid; gap: 28px; font-size: 13px; color: var(--gris); }
.pie__logo { width: 120px; height: auto; }
.pie__legal { font-size: 11.5px; line-height: 1.6; max-width: 80ch; }
@media (min-width: 900px) { .pie { padding: 72px 48px 48px; } }

/* ── aparición al hacer scroll ────────────────────────────────────── */
.lj-js .sube { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--curva), transform 1.1s var(--curva); }
.lj-js .sube.is-visible { opacity: 1; transform: none; }
.sube[data-retardo="1"] { transition-delay: .12s; } .sube[data-retardo="2"] { transition-delay: .24s; } .sube[data-retardo="3"] { transition-delay: .36s; }

/* ══ ficha: Longevity Ritual ══════════════════════════════════════ */
.f-heroe { position: relative; height: 92svh; min-height: 540px; overflow: hidden; color: var(--marfil); background: var(--noche); }
.f-heroe video, .f-heroe__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.f-heroe::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,18,15,.3), rgba(16,18,15,0) 35%, rgba(16,18,15,.78)); }
.f-heroe__txt { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 20px 48px; display: flex; flex-direction: column; gap: 14px; }
.f-heroe__t { margin: 0; font-size: clamp(48px, min(12vw, 14svh), 120px); line-height: .9; }
.f-heroe__t em { display: block; font-size: .38em; margin-top: 14px; color: var(--oro); letter-spacing: .04em; }
@media (min-width: 900px) { .f-heroe__txt { padding: 0 48px 72px; } }

/* El día: del amanecer al anochecer al hacer scroll. --p va de 0 a 1. */
.dia { position: relative; height: 320svh; --p: 0; }
.dia__escena { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(180deg,
    color-mix(in oklab, #f6d9b0 calc((1 - var(--p)) * 100%), #1b2233) 0%,
    color-mix(in oklab, #f4f1ea calc((1 - var(--p)) * 100%), #3a3550) 62%,
    color-mix(in oklab, #ebe6db calc((1 - var(--p)) * 100%), #10120f) 100%);
  color: color-mix(in oklab, var(--tinta) calc((1 - var(--p)) * 100%), var(--marfil)); }
.dia__astro { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  transform: translate(calc((var(--p) - .5) * 70vw), calc(sin(var(--p) * 3.1416) * -34svh + 14svh));
  background: radial-gradient(circle at 40% 40%, color-mix(in oklab, #fff3d6 calc((1 - var(--p)) * 100%), #e9e6f2), color-mix(in oklab, #f2c27b calc((1 - var(--p)) * 100%), #b9b6c9) 70%);
  box-shadow: 0 0 120px 40px color-mix(in oklab, rgba(242,194,123,.55) calc((1 - var(--p)) * 100%), rgba(185,182,201,.25)); }
.dia__botes { position: relative; z-index: 2; margin-top: 18svh; display: flex; gap: clamp(16px, 6vw, 96px); align-items: flex-end; }
.bote { width: clamp(110px, min(22vw, 26svh), 230px); text-align: center; transition: transform .6s var(--curva), opacity .6s; }
.bote img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 56%; border-radius: 6px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); }
.bote__n { margin: 18px 0 4px; font-family: var(--serif); font-size: 30px; }
.bote__h { margin: 0; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; opacity: .7; }
.bote--dawn { opacity: calc(1 - var(--p) * .55); transform: translateY(calc(var(--p) * 24px)) scale(calc(1.06 - var(--p) * .12)); }
.bote--dusk { opacity: calc(.45 + var(--p) * .55); transform: translateY(calc((1 - var(--p)) * 24px)) scale(calc(.94 + var(--p) * .12)); }
.dia__frase { position: absolute; z-index: 2; left: 0; right: 0; top: max(72px, 11svh); text-align: center; padding: 0 20px; }
.dia__frase p:not(.k) { margin: 0; font-family: var(--serif); font-size: clamp(24px, min(5vw, 6svh), 52px); line-height: 1.1; }
.dia__frase .k { margin-bottom: 14px; }
.dia__hora { position: absolute; z-index: 2; bottom: 8svh; left: 0; right: 0; display: flex; justify-content: center; gap: 40px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; }
.dia__hora span { opacity: .4; transition: opacity .4s; }
.dia__hora span.is-on { opacity: 1; }

/* Los dos momentos: Dawn y Dusk lado a lado */
.momentos { display: grid; gap: 2px; background: var(--noche); }
.momento { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; color: var(--marfil); }
.momento video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.momento::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,18,15,0) 50%, rgba(16,18,15,.7)); }
.momento figcaption { position: absolute; z-index: 2; left: 24px; bottom: 22px; display: flex; flex-direction: column; gap: 4px; }
.momento__h { font-size: 11px; letter-spacing: .3em; opacity: .8; }
.momento__n { font-size: 44px; line-height: 1; }
.momento__d { font-size: 13px; opacity: .85; }
@media (min-width: 900px) { .momentos { grid-template-columns: 1fr 1fr; } .momento { aspect-ratio: 4 / 5; } .momento figcaption { left: 40px; bottom: 36px; } }

/* Ingredientes: tarjeta con foto (alimento donde está en la dieta), nombre, dosis y frase oficial */
.ingrs { max-width: 1280px; margin: 0 auto; padding: 104px 20px 24px; }
.ingrs__t { margin: 0 0 40px; text-align: center; font-size: clamp(36px, 6vw, 60px); }
.ingrs__rejilla { display: grid; gap: 14px; }
.ingr { display: grid; grid-template-columns: 112px 1fr; min-height: 112px; background: #fff; border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; }
.ingr__foto { position: relative; background: radial-gradient(120% 120% at 30% 30%, color-mix(in oklab, var(--tono) 55%, #fff), var(--tono)); }
.ingr__foto span { position: absolute; left: 10px; bottom: 8px; font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.9); }
.ingr__txt { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.ingr__n { margin: 0; font-size: 12.5px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.ingr__n b { font-weight: 400; color: var(--verde); margin-left: 6px; letter-spacing: .06em; }
.ingr__txt p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #4a463f; }
.ingr__dieta { font-size: 12px !important; color: var(--gris) !important; font-style: italic; }
@media (min-width: 900px) { .ingrs { padding: 140px 48px 24px; } .ingrs__rejilla { grid-template-columns: 1fr 1fr; } .ingr { grid-template-columns: 136px 1fr; } }

.f-info { max-width: 1180px; margin: 0 auto; padding: 112px 20px; display: grid; gap: 56px; }
.f-bloque h2 { margin: 14px 0 22px; font-size: clamp(32px, 5vw, 48px); line-height: 1.05; }
.f-bloque p { margin: 0 0 14px; line-height: 1.7; color: #3e3b35; font-size: 15px; }
.f-oficial { font-size: 12.5px !important; color: var(--gris) !important; }
.f-compra { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; background: rgba(244,241,234,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -1px 0 var(--linea); }
.f-compra__n { font-family: var(--serif); font-size: 22px; }
@media (min-width: 900px) { .f-info { grid-template-columns: 1fr 1fr; padding: 160px 48px; column-gap: 96px; } .f-compra { padding: 16px 48px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sube { opacity: 1; transform: none; }
}


/* ── ajustes del héroe en el tema (9-oct-2026) ─────────────────────
   Con la cabecera de Shopify encima, el héroe ocupa la pantalla menos
   la cabecera, para que el botón se vea sin bajar; en pantallas muy
   anchas el texto crece con ellas y el lado izquierdo se oscurece algo
   más para que se lea sobre cualquier vídeo. */
.lj .heroe { height: calc(100svh - 96px); min-height: 520px; max-height: 1000px; }
.lj .heroe::after { background:
  linear-gradient(90deg, rgba(16,18,15,.5) 0%, rgba(16,18,15,.18) 38%, rgba(16,18,15,0) 60%),
  linear-gradient(180deg, rgba(16,18,15,0) 55%, rgba(16,18,15,.5) 100%); }
.lj .heroe__txt { padding-bottom: clamp(40px, 7svh, 96px); }
@media (min-width: 1400px) {
  .lj .heroe__txt { padding-left: clamp(48px, 5vw, 120px); gap: 26px; }
  .lj .heroe__t { font-size: clamp(110px, 8.5vw, 180px); }
  .lj .heroe__d { font-size: clamp(18px, 1.15vw, 24px); max-width: 30ch; }
  .lj .boton { min-height: 56px; padding: 0 34px; font-size: 12.5px; }
}

/* «.lj a { color: inherit }» pesa más que «.boton--claro» y dejaba el texto
   del botón claro en blanco sobre marfil (9-oct-2026): los colores de los
   botones, con la misma especificidad. */
.lj .boton--claro, .lj a.boton--claro { color: var(--tinta); }
.lj .boton--tinta, .lj a.boton--tinta { color: var(--marfil); }
/* Mismo motivo: las tarjetas de objetivo son enlaces y el texto tiene que ir en marfil sobre el vídeo. */
.lj a.obj { color: var(--marfil); }
.lj .boton--claro:hover { color: var(--tinta); }


/* La escena en la ficha de Shopify (9-oct-2026): el día pasa en menos
   recorrido que en la maqueta, porque debajo sigue la información. */
.lj-escena .dia { height: 240svh; }
.lj-escena .banda { height: 72svh; }
/* La foto del bote lleva width/height en el HTML (para que no salte al
   cargar): sin height:auto, el alto del atributo gana a la proporción 3/4. */
.lj .bote img { height: auto; }

/* ── proporciones en pantallas grandes (9-oct-2026) ─────────────────
   Aitor: «los vídeos no se hacen responsive, queda fatal maquetado». Los
   textos y la ficha tienen ancho máximo; los vídeos llenaban todo el ancho
   y, en una pantalla grande o con el zoom reducido, se disparaban. Ahora
   los bloques con vídeo comparten el ancho de la ficha (1360 px) y sus
   esquinas, y su alto tiene tope. */
.lj-escena { padding: 0 16px; }
.lj-escena .momentos { max-width: 1360px; margin: 0 auto; gap: 12px; background: transparent; }
.lj-escena .momento { border-radius: 20px; aspect-ratio: 4 / 5; max-height: 86svh; }
.lj-escena .banda { max-width: 1360px; margin: 0 auto; border-radius: 20px; height: min(72svh, 760px); min-height: 420px; }
.lj-escena .dia { margin: 56px -16px 0; }
.lj-escena .dia .bote { width: clamp(130px, min(18vw, 30svh), 280px); }
.lj .objs__fila { max-width: 1440px; margin-left: auto; margin-right: auto; }
.lj .banda { max-height: 900px; }
@media (min-width: 990px) {
  .lj-escena { padding: 0 40px; }
  .lj-escena .momentos { gap: 16px; }
  .lj-escena .momento, .lj-escena .banda { border-radius: 26px; }
  .lj-escena .dia { margin: 72px -40px 0; }
}

/* Revisión de marca (9-oct-2026). Tarjeta tipográfica para los artículos
   sobre la analítica (sin producto), y el héroe con proporción de vídeo: en
   pantallas muy anchas o con el zoom reducido quedaba una franja y se veía
   solo una nariz. */
.lj-tipo { position: absolute; inset: 0; display: grid; place-items: center; background: var(--verde); }
.lj-tipo span { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(56px, 8vw, 120px); color: var(--marfil); }
.lj .heroe { height: min(calc(100svh - 96px), 58vw); }
.lj .heroe video { object-position: 50% 30%; }

/* ══════════════════════════════════════════════════════════════════
   Web única (9-oct-2026): la portada de longevidad y la página del
   estudio, con el contenido de la maqueta de 100life.es
   (docs/traspaso-clinica/home-100life/). Secciones lj-estudio, lj-suple,
   lj-linea y lj-estudio-pagina.
   ══════════════════════════════════════════════════════════════════ */
.lj { --lado: clamp(20px, 4vw, 56px); --gris2: #4a463f; --oro-t: #8a7650; }
.lj .heroe__ir { display: inline-block; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--marfil); border-bottom: 1px solid rgba(244,241,234,.5); padding-bottom: 6px; transition: border-color .3s; }
.lj .heroe__ir:hover { border-color: var(--marfil); }

/* el estudio, en la portada */
.lj .estudio { padding: clamp(88px, 12vw, 170px) var(--lado); max-width: 1320px; margin: 0 auto; }
.lj .estudio__cab { display: grid; gap: 28px; align-items: end; }
.lj .estudio .k { color: var(--oro-t); }
.lj .estudio__t { margin: 18px 0 0; font-size: clamp(38px, 5.6vw, 76px); line-height: 1.02; max-width: 15ch; font-weight: 300; }
.lj .estudio__d { margin: 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.65; color: var(--gris2); max-width: 44ch; }
@media (min-width: 960px) { .lj .estudio__cab { grid-template-columns: 1.1fr 1fr; gap: 64px; } }
.lj .ventajas { margin: clamp(56px, 7vw, 96px) 0 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--linea); border-block: 1px solid var(--linea); }
.lj .ventaja { background: var(--marfil); padding: 36px 4px 40px; display: flex; flex-direction: column; gap: 12px; }
.lj .ventaja__t { margin: 0; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.1; font-weight: 300; }
.lj .ventaja__d { margin: 0; font-size: 15px; line-height: 1.6; color: var(--gris2); max-width: 30ch; }
@media (min-width: 700px) { .lj .ventajas { grid-template-columns: repeat(2, 1fr); } .lj .ventaja { padding: 40px 32px 44px; } }
@media (min-width: 1100px) { .lj .ventajas { grid-template-columns: repeat(4, 1fr); } }
.lj .estudio__pie { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.lj .estudio__nota { margin: 0; font-size: 13px; color: var(--gris); }

/* botones de la web única */
.lj .boton--tinta, .lj a.boton--tinta { background: var(--tinta); border-color: var(--tinta); color: var(--marfil); }
.lj .boton--tinta:hover { background: var(--verde); border-color: var(--verde); }
.lj .boton--linea, .lj a.boton--linea { background: transparent; color: var(--tinta); border: 1px solid var(--linea); }
.lj .boton--linea:hover { border-color: var(--tinta); }
.lj .boton--oro, .lj a.boton--oro { background: var(--oro); border-color: var(--oro); color: var(--noche); }
.lj .boton--oro:hover { background: var(--marfil); border-color: var(--marfil); }

/* también, complementos */
.lj .suple { background: var(--marfil2); }
.lj .suple__in { max-width: 1320px; margin: 0 auto; padding: clamp(80px, 10vw, 150px) var(--lado); display: grid; gap: clamp(36px, 5vw, 80px); align-items: center; }
.lj .suple__foto { display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; }
.lj .suple__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.lj .suple__foto:hover img { transform: scale(1.03); }
.lj .suple__t { margin: 18px 0 0; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; max-width: 14ch; font-weight: 300; }
.lj .suple__d { margin: 22px 0 32px; font-size: 16px; line-height: 1.65; color: var(--gris2); max-width: 40ch; }
.lj .suple__nota { margin: 16px 0 0; font-size: 12px; color: var(--gris); }
@media (min-width: 900px) { .lj .suple__in { grid-template-columns: 1.15fr 1fr; } }

/* y, discreta, la analítica */
.lj .linea { max-width: 1320px; margin: 0 auto; padding: 56px var(--lado); display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--linea); }
.lj .linea__t { margin: 0; font-size: clamp(20px, 2vw, 26px); max-width: 40ch; font-weight: 300; }
.lj .linea__nota { margin: 8px 0 0; font-size: 12px; color: var(--gris); }
.lj .linea__ir { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--verde); border-bottom: 1px solid currentColor; padding-bottom: 4px; }

/* página del estudio */
.lj .ep-cab { max-width: 1320px; margin: 0 auto; padding: clamp(72px, 10vw, 140px) var(--lado) clamp(56px, 7vw, 96px); }
.lj .ep-cab .k { color: var(--oro-t); }
.lj .ep-cab__t { margin: 18px 0 0; font-size: clamp(48px, 7.4vw, 112px); line-height: .96; max-width: 13ch; font-weight: 300; }
.lj .ep-cab__d { margin: 28px 0 0; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.65; color: var(--gris2); max-width: 46ch; }
.lj .ep-cab__pie { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.lj .ep-nota { margin: 0; font-size: 13px; color: var(--gris); }
.lj .ep-cifras { margin: clamp(56px, 7vw, 96px) 0 0; padding: 28px 0 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 1px solid var(--linea); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.lj .ep-cifras span { display: block; margin-bottom: 8px; font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: 0; text-transform: none; color: var(--verde); }
.lj .ep-cifras small { font-size: .4em; margin-left: 2px; }
.lj .ep-bloque { max-width: 1320px; margin: 0 auto; padding: clamp(72px, 9vw, 130px) var(--lado); }
.lj .ep-bloque__t { margin: 18px 0 0; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.05; max-width: 18ch; font-weight: 300; }
.lj .ep-incluye { margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--linea); border-block: 1px solid var(--linea); }
.lj .ep-incluye li { background: var(--marfil); padding: 32px 4px 36px; }
.lj .ep-incluye h3, .lj .ep-pasos h3 { margin: 0; font-size: clamp(24px, 2vw, 30px); line-height: 1.1; font-weight: 300; }
.lj .ep-incluye p, .lj .ep-pasos li p:last-child { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--gris2); max-width: 34ch; }
@media (min-width: 760px) { .lj .ep-incluye { grid-template-columns: repeat(2, 1fr); } .lj .ep-incluye li { padding: 36px 32px 40px; } }
@media (min-width: 760px) and (max-width: 1099px) { .lj .ep-incluye li:last-child:nth-child(odd) { grid-column: span 2; } }
@media (min-width: 1100px) { .lj .ep-incluye { grid-template-columns: repeat(3, 1fr); } .lj .ep-incluye li:last-child:nth-child(3n+2) { grid-column: span 2; } .lj .ep-incluye li:last-child:nth-child(3n+1) { grid-column: span 3; } }
.lj .ep-pasos { background: var(--noche); color: var(--marfil); }
.lj .ep-pasos__in { max-width: 1320px; margin: 0 auto; padding: clamp(80px, 10vw, 150px) var(--lado); }
.lj .ep-pasos .k { color: var(--oro); }
.lj .ep-pasos__fila { margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; display: grid; gap: 40px; }
.lj .ep-pasos li p:last-child { color: rgba(244,241,234,.72); }
.lj .ep-paso__n { margin: 0 0 14px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--oro); }
@media (min-width: 900px) { .lj .ep-pasos__fila { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.lj .ep-compara { margin: clamp(40px, 5vw, 64px) 0 0; display: grid; gap: 20px; }
.lj .ep-compara__col { border: 1px solid var(--linea); border-radius: 18px; padding: 32px 28px; }
.lj .ep-compara__col--100 { background: var(--marfil2); border-color: transparent; }
.lj .ep-compara__n { margin: 0 0 18px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--gris); }
.lj .ep-compara__col--100 .ep-compara__n { color: var(--verde); }
.lj .ep-compara ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.lj .ep-compara li { font-size: 15px; line-height: 1.5; padding-left: 22px; position: relative; }
.lj .ep-compara li::before { content: '—'; position: absolute; left: 0; color: var(--gris); }
.lj .ep-compara__col--100 li::before { content: '✓'; color: var(--verde); }
@media (min-width: 800px) { .lj .ep-compara { grid-template-columns: 1fr 1fr; } }
.lj .ep-faq__lista { margin-top: 32px; border-top: 1px solid var(--linea); max-width: 920px; }
.lj .ep-faq details { border-bottom: 1px solid var(--linea); }
.lj .ep-faq summary { cursor: pointer; list-style: none; padding: 26px 40px 26px 0; position: relative; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.25; }
.lj .ep-faq summary::-webkit-details-marker { display: none; }
.lj .ep-faq summary::after { content: '+'; position: absolute; right: 4px; top: 22px; font-family: var(--sans); font-size: 22px; color: var(--gris); transition: transform .3s; }
.lj .ep-faq details[open] summary::after { transform: rotate(45deg); }
.lj .ep-faq details p { margin: 0 0 26px; font-size: 15px; line-height: 1.7; color: var(--gris2); max-width: 64ch; }
.lj .ep-fin { background: var(--noche); color: var(--marfil); text-align: center; padding: clamp(88px, 11vw, 160px) var(--lado); }
.lj .ep-fin__t { margin: 0; font-size: clamp(40px, 5.4vw, 80px); line-height: 1; font-weight: 300; }
.lj .ep-fin__d { margin: 22px auto 34px; max-width: 46ch; font-size: 16px; line-height: 1.65; color: rgba(244,241,234,.75); }

/* ══════════════════════════════════════════════════════════════════
   El informe dentro de un iPhone (lj-iphone, 9-oct-2026). El iPhone se
   queda quieto; al hacer scroll se mueve el informe de dentro. Datos
   ficticios. JS: assets/100life-iphone.js.
   ══════════════════════════════════════════════════════════════════ */
.lj .ip { --pasos: 7; --entrada: 0; position: relative; height: calc((var(--pasos) + var(--entrada)) * 72svh + 100svh); background: var(--marfil); }
/* la entrada: el iPhone crece desde el centro antes de enseñar el informe (JS) */
.lj .ip__movil { transform: translate3d(var(--tx, 0px), var(--ty, 0vh), 0) perspective(1800px) rotateX(var(--rx, 0deg)) scale(var(--e, 1)); transform-origin: 50% 60%; will-change: transform; }
.lj .ip__marco { box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 calc(40px * var(--sombra, 1)) calc(80px * var(--sombra, 1)) -30px rgba(16,18,15,.45), 0 18px 36px -18px rgba(16,18,15,.35) !important; }
.lj .ip__pega { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto 1fr; justify-items: center; align-items: center; gap: 18px; padding: 20px var(--lado) 24px; overflow: hidden; }
.lj .ip__movil { --alto: min(60svh, 560px); order: 1; }
.lj .ip__textos { order: 2; position: relative; width: 100%; max-width: 440px; text-align: center; min-height: 150px; }
.lj .ip__k { color: var(--oro-t); display: none; }
.lj .ip__pasos { position: relative; min-height: 128px; }
.lj .ip__paso { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--curva), transform .6s var(--curva); pointer-events: none; }
.lj .ip__paso.is-on { opacity: 1; transform: none; }
.lj .ip__t { margin: 0; font-size: clamp(28px, 7vw, 40px); line-height: 1.04; font-weight: 300; }
.lj .ip__d { margin: 12px auto 0; max-width: 34ch; font-size: 15px; line-height: 1.55; color: var(--gris2); }
.lj .ip__puntos { display: flex; justify-content: center; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.lj .ip__puntos li { width: 6px; height: 6px; border-radius: 50%; background: var(--linea); transition: background .4s, transform .4s; }
.lj .ip__puntos li.is-on { background: #9c7a2a; transform: scale(1.3); }
@media (min-width: 900px) {
  .lj .ip__pega { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: clamp(40px, 6vw, 120px); max-width: 1320px; margin: 0 auto; padding: 0 var(--lado); }
  .lj .ip__movil { --alto: min(84svh, 780px); order: 2; justify-self: start; }
  .lj .ip__textos { order: 1; text-align: left; justify-self: end; max-width: 460px; min-height: 260px; }
  .lj .ip__k { display: block; margin-bottom: 26px; }
  .lj .ip__pasos { min-height: 220px; }
  .lj .ip__t { font-size: clamp(40px, 4.2vw, 64px); }
  .lj .ip__d { margin-left: 0; font-size: 17px; }
  .lj .ip__puntos { justify-content: flex-start; margin-top: 28px; }
}

/* el aparato */
.lj .ip__marco { position: relative; height: var(--alto); width: calc(var(--alto) * 410 / 864); padding: calc(var(--alto) * .0125); border-radius: calc(var(--alto) * .078); background: linear-gradient(145deg, #2a2c2b, #0b0c0c 40%, #1d1f1e); box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 40px 80px -30px rgba(16,18,15,.45), 0 18px 36px -18px rgba(16,18,15,.35); }
.lj .ip__isla { position: absolute; z-index: 3; top: calc(var(--alto) * .026); left: 50%; width: 30%; height: calc(var(--alto) * .036); transform: translateX(-50%); border-radius: 999px; background: #050505; }
.lj .ip__pantalla { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--alto) * .066); background: #f4f1ea; }
.lj .ip__escala { width: 390px; transform: scale(var(--k, 1)); transform-origin: 0 0; }
.lj .ip__rollo { transform: translate3d(0, calc(var(--y, 0) * -1px), 0); will-change: transform; }

/* el informe, dentro: el de la CLÍNICA, tema carbón y oro (data/report.js de la
   clínica), en 390 px de ancho como el real */
.lj .ip__pantalla { background: #f7f5f0; }
.lj .ip { --oro-t2: #9c7a2a; --oro-g: linear-gradient(115deg,#7a5a14 0%,#b8913a 14%,#f4e2a8 26%,#c9a04a 36%,#8f6c20 48%,#dcbb68 60%,#fbefc6 70%,#b58c35 82%,#7a5a14 100%); }
.lj .ipr { padding: 74px 26px 34px; min-height: 700px; font-family: var(--sans); color: var(--tinta); font-variant-numeric: lining-nums; }
.lj .ipr em { font-style: italic; font-weight: 400; color: var(--oro-t2); }
.lj .ipr-k { margin: 0; font-size: 10px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: #d9c79a; }
.lj .ipr-k--sec { color: var(--oro-t2); }
.lj .ipr-k span { margin-right: 10px; color: var(--gris); }
.lj .ipr-t { margin: 12px 0 26px; font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 1.05; }
.lj .ipr-t::after { content: ''; display: block; width: 36px; height: 1px; margin-top: 18px; background: var(--oro-t2); opacity: .6; }
.lj .ipr-oro { display: block; width: 168px; aspect-ratio: 5332 / 1363; background: var(--oro-g); background-size: 260% 100%; -webkit-mask: url('logo-100life-white.png') center / contain no-repeat; mask: url('logo-100life-white.png') center / contain no-repeat; /* el logo junto a esta hoja: una url() relativa dentro de una variable se resolvía desde landing/ y no se veía (12-oct-2026) */ animation: ipr-brillo 9s ease-in-out infinite alternate; }
@keyframes ipr-brillo { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.lj .ipr--portada, .lj .ipr--cierre { padding: 0; min-height: 0; }
.lj .ipr-portada { height: 846px; border-radius: 0; padding: 150px 26px 34px; display: flex; flex-direction: column; align-items: center; text-align: center; color: #f7f5f0; background: radial-gradient(circle at 50% 32%, #2e2b26, #1b1a17 70%); }
.lj .ipr-portada .ipr-oro { margin-bottom: 52px; }
.lj .ipr-portada__t { margin: 16px 0 26px; font-family: var(--serif); font-weight: 300; font-size: 33px; line-height: 1.1; }
.lj .ipr-portada__t em { color: #e3cf98; }
.lj .ipr-pildora { margin: 0; padding: 8px 15px; border: 1px solid rgba(227,207,152,.35); border-radius: 999px; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: #e3cf98; }
.lj .ipr-portada__pie { margin-top: auto; width: 100%; display: flex; justify-content: space-between; text-align: left; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(247,245,240,.55); border-top: 1px solid rgba(247,245,240,.16); padding-top: 16px; }
.lj .ipr-portada__pie b { display: block; margin-top: 6px; font-family: var(--serif); font-weight: 300; font-size: 18px; letter-spacing: 0; text-transform: none; color: rgba(247,245,240,.88); }
/* esfera del Score: 100 trazos, de champán a oro viejo */
.lj .ipr-esfera { position: relative; width: 310px; height: 310px; margin: 0 auto; }
.lj .ipr-esfera svg { width: 100%; height: 100%; overflow: visible; }
.lj .ipr-esfera__luz path { opacity: 0; transition: opacity .2s; }
.lj .ipr-esfera__luz path.is-on { opacity: 1; }
.lj .ipr-esfera__marca { opacity: 0; transition: opacity .4s, transform 1.6s var(--curva); transform-origin: 150px 150px; }
.lj .ipr-esfera__marca circle { fill: #86651c; }
.lj .is-vista .ipr-esfera__marca { opacity: 1; }
.lj .ipr-esfera__c { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.lj .ipr-esfera__c img { width: 64px; height: auto; }
.lj .ipr-esfera__c .ipr-num { font-family: var(--serif); font-weight: 300; font-size: 88px; line-height: 1; margin-top: 4px; }
.lj .ipr-esfera__c small { font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--oro-t2); }
/* edad */
.lj .ipr-edad { margin: 26px 0 40px; text-align: center; font-family: var(--serif); font-weight: 300; font-size: 104px; line-height: 1; }
.lj .ipr-edad small { font-family: var(--sans); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--gris); margin-left: 8px; }
.lj .ipr-regla__l { position: relative; height: 1px; background: rgba(27,26,23,.18); margin: 0 6px; }
.lj .ipr-regla__l i { position: absolute; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); left: calc(var(--x) * 100%); }
.lj .ipr-regla__real { width: 11px; height: 11px; background: #fffdf9; border: 1.5px solid #7c7468; }
.lj .ipr-regla__bio { width: 15px; height: 15px; background: #2f7d4f; left: 63% !important; transition: left 1.6s var(--curva) .3s; }
.lj .is-vista .ipr-regla__bio { left: calc(var(--x) * 100%) !important; }
.lj .ipr-regla__tramo { position: absolute; top: -1px; height: 3px; border-radius: 3px; background: #2f7d4f; right: 37%; width: 0; transition: width 1.6s var(--curva) .3s; }
.lj .is-vista .ipr-regla__tramo { width: 11%; }
.lj .ipr-regla__n { display: flex; justify-content: space-between; margin-top: 14px; font-size: 10px; color: var(--gris); }
.lj .ipr-regla__ley { display: flex; justify-content: center; gap: 22px; margin: 24px 0 0; font-size: 11px; color: #3a3731; }
.lj .ipr-regla__ley span, .lj .ipr-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.lj .ipr-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lj .ipr-dot--v { background: #2f7d4f; } .lj .ipr-dot--a { background: #b8862f; } .lj .ipr-dot--r { background: #b4443a; }
.lj .ipr-dot--bio { background: #2f7d4f; } .lj .ipr-dot--h { background: #fffdf9; border: 1.5px solid #7c7468; }
/* constelación */
.lj .ipr-const svg { width: 100%; height: auto; overflow: visible; }
.lj .ipr-const .ipr-nodo { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .5s, transform .6s var(--curva); }
.lj .ipr-const .ipr-nodo.is-on { opacity: 1; transform: none; }
.lj .ipr-const text { font-family: var(--sans); font-size: 8.5px; letter-spacing: .06em; fill: #3a3731; }
.lj .ipr-const .ipr-num-s { font-family: var(--serif); font-size: 13px; letter-spacing: 0; fill: #1b1a17; }
.lj .ipr-leyenda { display: flex; justify-content: center; gap: 14px; margin: 12px 0 0; font-size: 10px; color: #3a3731; }
/* pruebas funcionales */
.lj .ipr-pruebas { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lj .ipr-pruebas li { position: relative; padding: 16px 14px 14px; border: 1px solid rgba(27,26,23,.12); border-radius: 10px; background: #fffdf9; opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s var(--curva); }
.lj .is-vista .ipr-pruebas li { opacity: 1; transform: none; }
.lj .ipr-pruebas li:nth-child(2) { transition-delay: .08s; } .lj .ipr-pruebas li:nth-child(3) { transition-delay: .16s; } .lj .ipr-pruebas li:nth-child(4) { transition-delay: .24s; } .lj .ipr-pruebas li:nth-child(5) { transition-delay: .32s; } .lj .ipr-pruebas li:nth-child(6) { transition-delay: .4s; }
.lj .ipr-pruebas small { display: block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.lj .ipr-pruebas b { display: block; margin-top: 10px; font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1; }
.lj .ipr-pruebas li:last-child b { font-size: 18px; }
.lj .ipr-pruebas .ipr-dot { position: absolute; top: 14px; right: 12px; }
/* prioridades */
.lj .ipr-prio { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(27,26,23,.12); }
.lj .ipr-prio li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid rgba(27,26,23,.12); opacity: 0; transform: translateX(14px); transition: opacity .6s, transform .7s var(--curva); }
.lj .is-vista .ipr-prio li { opacity: 1; transform: none; }
.lj .ipr-prio li:nth-child(2) { transition-delay: .15s; } .lj .ipr-prio li:nth-child(3) { transition-delay: .3s; }
.lj .ipr-prio__n { font-family: var(--serif); font-size: 28px; line-height: 1; color: var(--oro-t2); }
.lj .ipr-prio small { display: block; margin-bottom: 4px; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.lj .ipr-prio li > span:last-child { font-family: var(--serif); font-size: 21px; line-height: 1.2; }
.lj .ipr-prio b { font-weight: 400; color: #b8862f; }
.lj .ipr-prio em { font-family: var(--sans); font-style: normal; font-size: 11px; color: var(--gris); }
.lj .ipr-prio__r { display: block; font-family: var(--sans); font-style: normal; font-size: 11px; color: #7f776b; }
/* médico y plan */
.lj .ipr-medico { display: flex; gap: 16px; align-items: center; padding: 18px; border: 1px solid rgba(156,122,42,.3); border-radius: 12px; background: #fffdf9; }
.lj .ipr-medico p { margin: 0; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.35; color: #3a3731; }
.lj .ipr-sello { flex: 0 0 58px; width: 58px; height: 58px; padding: 4px; border-radius: 50%; border: 1px solid rgba(156,122,42,.5); }
.lj .ipr-sello span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(155deg,#f6efe0,#e8dcc2); font-family: var(--serif); font-size: 20px; color: var(--oro-t2); }
.lj .ipr-plan { position: relative; margin: 30px 0 0; padding: 0 0 0 26px; list-style: none; display: grid; gap: 22px; }
.lj .ipr-plan::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: rgba(27,26,23,.2); }
.lj .ipr-plan li { position: relative; }
.lj .ipr-plan li::before { content: ''; position: absolute; left: -26px; top: 4px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid #7f776b; background: #f7f5f0; }
.lj .ipr-plan li.is-hoy::before { background: var(--oro-t2); border-color: var(--oro-t2); box-shadow: 0 0 0 5px rgba(156,122,42,.15); }
.lj .ipr-plan b { display: block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--oro-t2); font-weight: 400; }
.lj .ipr-plan span { display: block; margin-top: 4px; font-family: var(--serif); font-size: 20px; }
/* cierre */
.lj .ipr-cierre { height: 846px; border-radius: 0; display: grid; place-content: center; justify-items: center; gap: 28px; background: radial-gradient(circle at 50% 32%, #2e2b26, #1b1a17 70%); color: #f7f5f0; }
.lj .ipr-cierre__t { margin: 0; font-family: var(--serif); font-weight: 300; font-size: 34px; }
.lj .ipr-cierre__t em { color: #e3cf98; }
@media (prefers-reduced-motion: reduce) {
  .lj .ip__paso, .lj .ipr-regla__bio, .lj .ipr-regla__tramo, .lj .ipr-pruebas li, .lj .ipr-prio li, .lj .ipr-const .ipr-nodo, .lj .ipr-esfera__marca { transition: none; }
  .lj .ipr-oro { animation: none; }
}