/* ══════════════════════════════════════════════════════════════════════
   Lineage & Heritage — el resultado del funnel.

   Ritmo de bandas: borgoña → pergamino → borgoña → EL LIBRO (vitela con
   marco) → pergamino → borgoña → pergamino → blanco → pergamino → borgoña.
   El bloque de compra es el unico sobre vitela clara con orla dorada: es
   el que tiene que saltar a la vista al bajar.

   Curva unica en toda la pagina, expo-out. Nada se mueve a velocidad
   constante — es lo que separa una pagina cuidada de una plantilla.
   ══════════════════════════════════════════════════════════════════════ */

.lf-offer {
  --curva: cubic-bezier(.16, 1, .3, 1);
  --oscuro: #3d1218;
  --navy: #3d1218;          /* nombre viejo, mismo borgoña */
  --vitela: #f4ecdd;
  --card: #fff;
  background: var(--parchment);
}
.lf-offer * { box-sizing: border-box; }

.lf-offer section { padding: 66px 22px; }
.lf-offer > section > * { max-width: 780px; margin-left: auto !important; margin-right: auto !important; }

/* ── Tipografia comun ─────────────────────────────────────────────────── */
.lfo-eyebrow {
  font-family: var(--body);
  font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold) !important; text-align: center; margin: 0 0 14px;
}
.lfo-h2 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(26px, 4.4vw, 38px); line-height: 1.16;
  color: var(--ink) !important; text-align: center; margin: 0 0 12px;
  text-wrap: balance;
}
.lfo-h2 em { font-style: italic; color: var(--burgundy) !important; }
/* La aclaracion del encabezado va en el mismo renglon pero un paso atras: es
   el marco, no el titulo. Si pesara igual competiria con la frase. */
.lfo-h2__s { font-weight: 400; font-style: italic; color: var(--ink-faint) !important; }
.lfo-lede { font-size: 17px; line-height: 1.62; color: var(--ink-soft) !important; margin: 0; }
.lfo-p { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft) !important; margin: 0 0 14px; }
.lfo-center { text-align: center; margin-left: auto; margin-right: auto; max-width: 60ch; }
.lfo-note {
  font-size: 12.5px; font-style: italic; color: var(--ink-faint) !important;
  text-align: center; margin: 26px auto 0; max-width: 62ch;
}

/* Escudito: la vineta de la marca, usada como bala de lista y como icono. */
.lfo-shield { width: 15px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--gold); stroke-width: 1.6; }
.lfo-shield--sm { width: 13px; height: 15.5px; margin-top: 3px; }

/* Separador con rombo */
.lfo-sep { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 300px; margin: 0 auto; padding: 8px 0; }
.lfo-sep span { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); }
.lfo-sep i { width: 7px; height: 7px; background: var(--gold-bright); transform: rotate(45deg); flex-shrink: 0; }

/* ══ Fondo: capas tenues para que ninguna banda quede plana ═════════════
   Todo esto es decorativo y no intercepta el mouse. Son tres recursos:
   una filigrana heraldica en el papel, motas de oro que suben despacio en
   las bandas oscuras, y un resplandor detras de lo que importa. */

.lf-offer section { position: relative; overflow: hidden; }
/* Sube el contenido por encima de las capas de fondo. Se excluyen los hijos
   que YA estan posicionados en absoluto — el degradado del heroe y el canvas
   de polvo —: esta regla tiene mas especificidad que la suya y los sacaba de
   su lugar (el degradado terminaba en el flujo, partido al medio). */
.lf-offer section > *:not(.lfo-hero__fade):not(.lfo-dust) { position: relative; z-index: 1; }
/* Los dos son decoracion. `pointer-events: none` NO es opcional: el degradado
   mide 190 px desde el pie del heroe y en telefono cae justo encima del primer
   boton — sin esto se come el toque y el CTA no responde. */
.lf-offer section > .lfo-hero__fade,
.lf-offer section > .lfo-dust { position: absolute; z-index: 1; pointer-events: none; }

/* Filigrana del papel: escudos y cruces, casi invisible. */
.lfo-band::before,
.lfo-honest::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23a8842f' stroke-width='1' opacity='.5'%3E%3Cpath d='M24 20h16v9c0 6-3.4 9-8 11-4.6-2-8-5-8-11z'/%3E%3Cpath d='M114 66h16v9c0 6-3.4 9-8 11-4.6-2-8-5-8-11z'/%3E%3Cpath d='M64 124h16v9c0 6-3.4 9-8 11-4.6-2-8-5-8-11z'/%3E%3Cpath d='M150 132v14M143 139h14'/%3E%3Cpath d='M84 30v12M78 36h12'/%3E%3Cpath d='M30 96v12M24 102h12'/%3E%3C/g%3E%3Cg fill='%23a8842f' opacity='.28'%3E%3Ccircle cx='160' cy='24' r='1.6'/%3E%3Ccircle cx='58' cy='72' r='1.6'/%3E%3Ccircle cx='128' cy='160' r='1.6'/%3E%3Ccircle cx='10' cy='150' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 210px 210px;
  opacity: .34;
}
.lfo-band--paper::before { opacity: .28; }

/* En las bandas oscuras la filigrana va en oro tenue. */
.lfo-band--dark::before,
.lfo-hero::before,
.lfo-close::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23c9a84c' stroke-width='1' opacity='.5'%3E%3Cpath d='M30 26h16v9c0 6-3.4 9-8 11-4.6-2-8-5-8-11z'/%3E%3Cpath d='M132 78h16v9c0 6-3.4 9-8 11-4.6-2-8-5-8-11z'/%3E%3Cpath d='M72 144h16v9c0 6-3.4 9-8 11-4.6-2-8-5-8-11z'/%3E%3Cpath d='M168 150v12M162 156h12'/%3E%3Cpath d='M96 34v12M90 40h12'/%3E%3Cpath d='M20 112v12M14 118h12'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: .16;
}

/* Motas de oro subiendo, lentas y desfasadas. Dos capas de radial-gradient
   sobre un fondo que se desplaza: sin canvas y sin un solo nodo extra. */
.lfo-band--dark::after,
.lfo-close::after {
  content: ''; position: absolute; inset: -20% 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 20%, rgba(201,168,76,.55), transparent),
    radial-gradient(1.4px 1.4px at 78% 12%, rgba(201,168,76,.42), transparent),
    radial-gradient(1.8px 1.8px at 34% 62%, rgba(201,168,76,.5), transparent),
    radial-gradient(1.3px 1.3px at 62% 78%, rgba(201,168,76,.38), transparent),
    radial-gradient(1.5px 1.5px at 88% 52%, rgba(201,168,76,.45), transparent),
    radial-gradient(1.2px 1.2px at 22% 88%, rgba(201,168,76,.34), transparent);
  background-size: 100% 100%;
  animation: lfoMotas 26s linear infinite;
  opacity: .9;
}
@keyframes lfoMotas {
  from { transform: translateY(0); }
  to   { transform: translateY(-14%); }
}

/* ── Bandas ───────────────────────────────────────────────────────────── */
.lfo-band { background: var(--parchment); }
.lfo-band--tight { padding-top: 46px !important; }
.lfo-band--paper { background: var(--vitela); }
.lfo-band--dark { background: var(--oscuro); }
.lfo-band--dark .lfo-h2 { color: #f7f1e6 !important; }
.lfo-band--dark .lfo-eyebrow { color: var(--gold-bright) !important; }
.lfo-band--dark .lfo-p { color: rgba(247,241,230,.76) !important; }
.lfo-band--dark .lfo-note { color: rgba(247,241,230,.5) !important; }

/* ═══ 1 · Encabezado ═══════════════════════════════════════════════════ */
.lfo-hero {
  position: relative; background: var(--oscuro);
  padding: 74px 22px 150px !important; overflow: hidden; text-align: center;
}
.lfo-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lfo-hero__in { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; }
.lfo-hero .lfo-eyebrow { color: var(--gold-bright) !important; }
/* El apellido ya no es el titular: pasa arriba como firma. Sigue siendo lo
   primero que el lector busca, pero deja el peso al hallazgo. */
.lfo-hero__sn {
  font-family: var(--serif); font-weight: 700; font-style: italic;
  font-size: clamp(26px, 5vw, 40px); line-height: 1; letter-spacing: -.01em;
  color: var(--gold-bright) !important; text-align: center; margin: 0 0 18px;
}
/* El titular ahora es una frase, no una palabra: el tamaño baja para que
   entre en dos renglones y `balance` evita la linea huerfana. */
.lfo-hero__h {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(28px, 4.6vw, 42px); line-height: 1.14; letter-spacing: -.015em;
  color: #f7f1e6 !important; margin: 0 auto; text-align: center !important;
  /* 24ch para que las frases largas ("Catalan, Castilian or Italian") caigan
     en dos renglones y la bajada llegue a verse sin bajar la pagina. */
  max-width: 24ch; text-wrap: balance;
}
/* En lugar del boton: que se sepa que abajo hay mas. */
.lfo-hero__mas {
  font-family: var(--body); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(247,241,230,.5) !important; text-align: center; margin: 30px 0 0 !important;
}
.lfo-hero__mas::after {
  content: ''; display: block; width: 1px; height: 26px; margin: 12px auto 0;
  background: linear-gradient(to bottom, rgba(232,204,128,.5), transparent);
}
.lfo-hero .lfo-sep span { background: linear-gradient(to right, transparent, var(--gold-bright), transparent); }
.lfo-hero .lfo-lede { color: rgba(247,241,230,.74) !important; margin: 14px auto 0; max-width: 46ch; }
/* El degradado del heroe.
   Iba de borgoña transparente a pergamino opaco: al mezclarse en sRGB el
   punto medio caia en un gris lechoso, que es lo que se veia sucio. Ahora
   es el PERGAMINO el que entra, con paradas escalonadas segun una curva
   ease-out — mas densas arriba — asi la zona de mezcla es corta y el paso
   se lee como intencional. Las paradas tambien matan el banding. */
.lfo-hero__fade {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 190px;
  max-width: none !important; margin: 0 !important;
  background: linear-gradient(
    to bottom,
    rgba(247, 241, 230, 0)     0%,
    rgba(247, 241, 230, .012)  14%,
    rgba(247, 241, 230, .05)   26%,
    rgba(247, 241, 230, .11)   36%,
    rgba(247, 241, 230, .2)    45%,
    rgba(247, 241, 230, .32)   54%,
    rgba(247, 241, 230, .46)   62%,
    rgba(247, 241, 230, .62)   70%,
    rgba(247, 241, 230, .77)   78%,
    rgba(247, 241, 230, .89)   86%,
    rgba(247, 241, 230, .97)   94%,
    rgba(247, 241, 230, 1)     100%
  );
}
/* Un filete dorado casi invisible en la juntura: le da un borde al paso en
   vez de dejarlo disolverse en la nada. */
.lfo-hero__fade::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(168, 132, 47, .38), transparent);
}
@supports (background: linear-gradient(in oklab, red, blue)) {
  .lfo-hero__fade {
    background: linear-gradient(in oklab, to bottom,
      rgba(247, 241, 230, 0) 0%,
      rgba(247, 241, 230, .06) 26%,
      rgba(247, 241, 230, .24) 48%,
      rgba(247, 241, 230, .58) 68%,
      rgba(247, 241, 230, .88) 86%,
      rgba(247, 241, 230, 1) 100%);
  }
}
.lfo-partial {
  display: inline-block; margin: 22px auto 0 !important; padding: 10px 20px;
  border: 1px solid rgba(232,204,128,.34); border-radius: 3px;
  font-size: 13.5px; color: rgba(247,241,230,.82) !important; background: rgba(0,0,0,.16);
}
.lfo-partial span { color: var(--gold-bright) !important; font-weight: 700; letter-spacing: .04em; }

/* ═══ Otra lectura ═════════════════════════════════════════════════════
   Barra de una linea que encabeza la lectura gratuita. Sin fondo ni caja
   propios: va sobre el papel de la seccion para que el degradado del heroe
   siga muriendo sobre un solo color. Y sin el dorado de los botones de
   venta — es una salida util, no compite con la compra. */
.lfo-otra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 10px; margin: 0 auto 34px; padding-bottom: 24px; max-width: 62ch;
  border-bottom: 1px solid rgba(168,132,47,.2);
}
.lfo-otra[hidden] { display: none; }
.lfo-otra__ya { display: contents; }
.lfo-otra__t {
  font-family: var(--body); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint) !important; margin: 0 2px 0 0 !important;
}
.lfo-otra__pastilla {
  font-family: var(--serif); font-size: 14.5px; line-height: 1;
  color: var(--vino) !important; background: rgba(255,255,255,.65);
  border: 1px solid rgba(168,132,47,.32); border-radius: 999px;
  padding: 8px 17px; margin: 0; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.lfo-otra__pastilla:hover { background: #fff; border-color: rgba(168,132,47,.62); }
.lfo-otra__cta {
  font-family: var(--body); font-size: 12.5px; font-weight: 600;
  letter-spacing: .03em; color: var(--vino) !important;
  border-bottom: 1px solid rgba(124,26,42,.38); padding-bottom: 2px;
  text-decoration: none; white-space: nowrap;
}
.lfo-otra__cta:hover { border-bottom-color: var(--vino); }
@media (max-width: 600px) {
  .lfo-otra { gap: 7px 8px; margin-bottom: 28px; padding-bottom: 20px; }
  .lfo-otra__t { width: 100%; margin: 0 0 2px !important; }
  .lfo-otra__pastilla { font-size: 13.5px; padding: 7px 14px; }
}

/* ═══ 2 · Tarjetas de hallazgo ═════════════════════════════════════════ */
.lfo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.lfo-cards:empty { display: none; }
/* si un apellido no da los cuatro datos, la ultima tarjeta ocupa el ancho
   en vez de quedar coja al costado */
.lfo-cd:last-child:nth-child(odd) { grid-column: 1 / -1; }
.lfo-cd {
  position: relative; display: flex; flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(201,168,76,.07) 0%, rgba(201,168,76,0) 62%),
    var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px; padding: 30px 26px 20px; text-align: left;
  transition: transform .4s var(--curva), border-color .4s ease, box-shadow .4s ease;
}
/* la fuente se ancla al pie: las tarjetas de una fila terminan parejas */
.lfo-cd__src { margin-top: auto !important; }

/* Escuadras doradas en las esquinas, como el marco de una lamina. Se dibujan
   con dos gradientes por esquina — cero elementos de mas en el DOM. */
.lfo-cd::before,
.lfo-cd::after {
  content: ''; position: absolute; width: 16px; height: 16px; pointer-events: none;
  border-color: var(--gold); opacity: .5;
}
.lfo-cd::before { top: 8px; left: 8px; border-top: 1px solid; border-left: 1px solid; }
.lfo-cd::after { bottom: 8px; right: 8px; border-bottom: 1px solid; border-right: 1px solid; }

.lfo-cd:hover {
  transform: translateY(-4px); border-color: var(--gold);
  box-shadow: 0 20px 38px -22px rgba(36,31,33,.5);
}
.lfo-cd:hover::before, .lfo-cd:hover::after { opacity: .95; }

/* Emblema: medallon de vitela con filete dorado */
.lfo-cd__em {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin: 0 0 15px;
  color: var(--burgundy);
  background: var(--vitela);
  border: 1px solid var(--gold); border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.7);
  transition: transform .45s var(--curva), color .3s ease;
}
.lfo-cd__svg { width: 24px; height: 24px; display: block; }
.lfo-cd:hover .lfo-cd__em { transform: scale(1.07) rotate(-3deg); color: var(--gold); }

.lfo-cd__k {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--body); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--burgundy) !important; margin: 0 0 11px;
}
.lfo-cd__b { font-size: 15px; line-height: 1.66; color: var(--ink) !important; margin: 0; }
.lfo-cd__b b { font-weight: 700; }
.lfo-cd__b em { font-style: italic; color: var(--ink-soft) !important; }
.lfo-cd__src {
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint) !important; margin: 14px 0 0;
  padding-top: 11px; border-top: 1px solid var(--rule);
}
.lfo-num { font-family: var(--serif); font-weight: 700; font-size: 1.34em; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* ═══ 3 · La falta ═════════════════════════════════════════════════════ */
.lfo-falta__l { list-style: none; margin: 32px auto 0; padding: 0; max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
.lfo-falta__l li { display: flex; gap: 14px; align-items: flex-start; font-size: 15.5px; line-height: 1.6; color: rgba(247,241,230,.8) !important; text-align: left; }
.lfo-falta__l .lfo-shield { stroke: var(--gold-bright); margin-top: 3px; }

/* ═══ 4 · EL LIBRO ═════════════════════════════════════════════════════ */
.lfo-buy { background: var(--vitela); padding: 78px 22px !important; }
.lfo-buy__grid {
  display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr);
  gap: 48px; align-items: center;
  max-width: 1020px !important; margin: 0 auto !important;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 5px; padding: 44px 46px;
  box-shadow: 0 30px 70px -46px rgba(61,18,24,.5);
}
/* orla dorada fina por dentro del marco */
.lfo-buy__grid { position: relative; }
.lfo-buy__grid::after {
  content: ''; position: absolute; inset: 7px; border: 1px solid var(--gold);
  opacity: .3; border-radius: 3px; pointer-events: none;
}

.lfo-buy__art { position: relative; }
.lfo-buy__halo {
  position: absolute; left: 50%; top: 50%; width: 116%; padding-bottom: 116%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201,168,76,.24) 0%, rgba(201,168,76,0) 66%);
}
.lfo-buy__img {
  position: relative; width: 100%; height: auto; display: block;
  filter: drop-shadow(0 26px 46px rgba(61,18,24,.34));
  transition: filter .5s ease;
}

/* ── Las tres vistas del producto ──────────────────────────────────────
   El marco toma la proporcion de la TAPA, que es la que manda: asi la
   portada se ve igual de grande que cuando era la unica foto. Un marco
   cuadrado la encogia un 30% — entraba de alto y le sobraba ancho.

   Las dos del libro abierto son horizontales y dentro de un marco vertical
   quedarian como una franja pequeña, con medio marco de aire arriba y
   abajo. Por eso van ampliadas: ocupan area parecida a la tapa sin mover
   el marco, que es lo que evita que la columna de precios salte en cada
   cambio. */
/* `width: 100%` no es adorno: las tres imagenes van en posicion absoluta, asi
   que no le dan ancho a nadie. Sin esto el contenedor se queda sin contenido
   que lo sostenga y colapsa — en telefono quedaba en 35 px. */
.lfo-carru { position: relative; width: 100%; aspect-ratio: 697 / 998; }
.lfo-carru__i {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity .9s ease;
}
/* 1.34 las hacia grandes pero les cortaba el lomo contra el borde de la
   seccion. 1.12 es lo que entra sin tocar nada. */
.lfo-carru__i--ancha { transform: scale(1.12); }
.lfo-carru__i.is-activa { opacity: 1; }
/* Solo flota la que se ve: animar las ocultas es gastar bateria. */
.lfo-carru__i:not(.is-activa) { animation: none; }

.lfo-carru__pts {
  display: flex; justify-content: center; gap: 7px; margin-top: 14px;
}
.lfo-carru__pt {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(168,132,47,.3);
  transition: background .4s ease, transform .4s ease;
}
.lfo-carru__pt.is-activa { background: var(--gold); transform: scale(1.25); }
.lfo-buy__grid:hover .lfo-buy__img { filter: drop-shadow(0 34px 56px rgba(61,18,24,.46)); }

.lfo-buy__side { text-align: left; }
.lfo-buy__side .lfo-eyebrow { text-align: left; margin-bottom: 10px; }
.lfo-buy__h {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1;
  color: var(--ink) !important; margin: 0 0 12px; text-align: left;
}
.lfo-buy__sub { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft) !important; margin: 0 0 22px; }

.lfo-buy__list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lfo-buy__list li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14.5px; line-height: 1.5; color: var(--ink) !important;
}

.lfo-buy__deal { margin: 0 0 18px; padding-top: 20px; border-top: 1px solid var(--rule); }
.lfo-buy__off {
  display: inline-block; margin-bottom: 10px; padding: 5px 12px;
  font-family: var(--body); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff !important; background: var(--burgundy); border-radius: 2px;
}
.lfo-buy__price { display: flex; align-items: baseline; gap: 14px; }
.lfo-buy__was {
  font-family: var(--serif); font-size: 26px; color: var(--ink-faint) !important;
  text-decoration: line-through; text-decoration-thickness: 1.5px;
}
.lfo-buy__was .woocommerce-Price-amount { color: var(--ink-faint) !important; }
.lfo-buy__amount { font-family: var(--serif); font-weight: 700; font-size: 52px; line-height: 1; color: var(--ink) !important; }
.lfo-buy__amount .woocommerce-Price-amount { color: var(--ink) !important; }
.lfo-buy__unit { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint) !important; margin: 6px 0 0; }

/* Reloj y cupos del dia. El reloj es lo unico de la pagina que se mueve
   solo: se lo trata como una placa, no como un renglon de texto. */
.lfo-urg {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 0 0 18px; padding: 14px 18px;
  background: var(--oscuro);
  border: 1px solid rgba(201, 168, 76, .42); border-radius: 4px;
}
.lfo-urg p { margin: 0; font-size: 13px; color: rgba(247, 241, 230, .72) !important; }
.lfo-urg__clock { display: flex; align-items: center; gap: 12px; }
.lfo-urg__lab {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-bright) !important; line-height: 1.3; max-width: 15ch;
}
.lfo-urg__clock b {
  font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1;
  color: #fff !important; font-variant-numeric: tabular-nums;
  letter-spacing: .01em; padding: 7px 12px; border-radius: 3px;
  background: rgba(0, 0, 0, .28);
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, .34);
  animation: lfoTic 1s steps(1, end) infinite;
}
/* un parpadeo apenas perceptible en los dos puntos, como un reloj de verdad */
@keyframes lfoTic { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .88; } }
.lfo-urg__left { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.lfo-urg__left b { color: var(--gold-bright) !important; font-weight: 700; font-size: 15px; }
.lfo-urg__left i {
  width: 8px; height: 8px; border-radius: 50%; background: #d8574f;
  flex-shrink: 0; box-shadow: 0 0 0 0 rgba(216, 87, 79, .6);
  animation: lfoPulso 2.2s ease-out infinite;
}
@keyframes lfoPulso {
  0%   { box-shadow: 0 0 0 0 rgba(216, 87, 79, .55); opacity: 1; }
  70%  { box-shadow: 0 0 0 7px rgba(216, 87, 79, 0); opacity: .85; }
  100% { box-shadow: 0 0 0 0 rgba(216, 87, 79, 0); opacity: 1; }
}

.lfo-buy__trust { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); }
.lfo-buy__seal { width: 56px; height: 56px; flex-shrink: 0; }
.lfo-buy__trust-t { font-size: 13.5px; font-weight: 700; color: var(--ink) !important; margin: 0 0 2px; }
.lfo-buy__trust-s { font-size: 12.5px; line-height: 1.45; color: var(--ink-faint) !important; margin: 0; }

/* ═══ 5 · Que se lee adentro ═══════════════════════════════════════════ */
.lfo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.lfo-grid__i {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--rule); border-radius: 4px;
  padding: 20px 22px; text-align: left;
  transition: transform .4s var(--curva), border-color .4s ease;
}
.lfo-grid__i:hover { transform: translateY(-3px); border-color: var(--gold); }
/* El numero de capitulo: se entiende de un vistazo que son las paginas del
   libro en su orden, no una lista suelta de caracteristicas. */
.lfo-grid__n {
  flex-shrink: 0; width: 30px; height: 30px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 15px; font-weight: 700;
  color: var(--burgundy) !important;
  background: var(--vitela); border: 1px solid var(--gold); border-radius: 50%;
}
.lfo-grid__i h3 { font-family: var(--serif); font-size: 18px; color: var(--ink) !important; margin: 0 0 5px; }
.lfo-grid__i p { font-size: 14px; line-height: 1.58; color: var(--ink-soft) !important; margin: 0; }

/* ═══ 6 · Paginas reales ═══════════════════════════════════════════════
   En escritorio iban de a cuatro y no se leia una linea. De a dos, y a todo
   el ancho que da la banda: son la prueba del producto, tienen que verse. */
.lfo-pages { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; max-width: 1080px !important; margin-top: 32px; }
.lfo-page { margin: 0; }
.lfo-page img { width: 100%; height: auto; display: block; border-radius: 3px; box-shadow: 0 16px 34px -12px rgba(0,0,0,.6); transition: transform .45s var(--curva), box-shadow .45s var(--curva); }
.lfo-page:hover img { transform: translateY(-8px) scale(1.02); box-shadow: 0 26px 46px -14px rgba(0,0,0,.7); }
@media (min-width: 1200px) {
  .lfo-pages { grid-template-columns: repeat(3, 1fr); max-width: 1220px !important; }
}

/* Las paginas invitan a tocarlas */
.lfo-page { cursor: zoom-in; }
.lfo-page:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
.lfo-page figcaption { pointer-events: none; }

/* ── Visor a pantalla completa ────────────────────────────────────────── */
/* El visor cuelga de <body>, FUERA de .lf: las variables de la marca no
   llegan hasta aca y todo salia en negro. Se redeclaran en el propio visor. */
.lfo-visor {
  --gold-bright: #c9a84c;
  --curva: cubic-bezier(.16, 1, .3, 1);
  position: fixed; inset: 0; z-index: 100000;
  display: none; align-items: center; justify-content: center;
  gap: 10px; padding: 26px 16px 64px;
  background: rgba(28, 8, 11, .94);
  backdrop-filter: blur(3px);
}
.lfo-visor.visto { display: flex; animation: lfoVisorEntra .28s var(--curva); }
@keyframes lfoVisorEntra { from { opacity: 0; } to { opacity: 1; } }
.lfo-visor img {
  max-width: min(94vw, 780px); max-height: 84vh;
  width: auto; height: auto; display: block;
  border-radius: 3px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8);
  animation: lfoVisorZoom .3s var(--curva);
}
@keyframes lfoVisorZoom { from { transform: scale(.94); } to { transform: none; } }
/* Los controles llevan !important porque el tema pinta TODO <button> con su
   propio azul de marca — de ahi salia el celeste. Aca son filete dorado
   sobre el borgoña del visor, en el lenguaje del resto de la pagina. */
.lfo-visor button {
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  color: var(--gold-bright) !important;
  background: rgba(61, 18, 24, .72) !important;
  border: 1px solid rgba(201, 168, 76, .5) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  transition: background .22s ease, border-color .22s ease, transform .22s var(--curva);
}
.lfo-visor button:hover {
  background: rgba(201, 168, 76, .18) !important;
  border-color: var(--gold-bright) !important;
  color: var(--gold-bright) !important;
  transform: scale(1.06);
}
.lfo-visor button:active { transform: scale(.97); }
.lfo-visor button:focus { outline: none; }
.lfo-visor button:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.lfo-visor button svg { width: 20px; height: 20px; display: block; }

.lfo-visor__x { position: absolute; top: 16px; right: 18px; width: 42px; height: 42px; }
.lfo-visor__nav { flex-shrink: 0; width: 46px; height: 46px; }
.lfo-visor__nav svg { width: 22px; height: 22px; }
.lfo-visor__pie {
  position: absolute; left: 0; right: 0; bottom: 20px;
  text-align: center; font-size: 13px; line-height: 1.4;
  color: rgba(247, 241, 230, .72) !important; margin: 0; padding: 0 20px;
}
@media (max-width: 700px) {
  .lfo-visor { padding: 14px 8px 72px; gap: 4px; }
  .lfo-visor img { max-width: 96vw; max-height: 76vh; }
  /* en telefono los botones van abajo, donde llega el pulgar */
  .lfo-visor__nav { position: absolute; bottom: 14px; width: 52px; height: 52px; }
  .lfo-visor__nav--prev { left: 18px; }
  .lfo-visor__nav--next { right: 18px; }
  .lfo-visor__pie { bottom: 78px; font-size: 12.5px; }
}

/* ── Remate del analisis parcial: la bisagra hacia el libro ───────────── */
.lfo-remate {
  max-width: 640px; margin: 36px auto 0; padding: 28px 30px 24px;
  background: var(--card); border: 1px solid var(--gold); border-radius: 4px;
  text-align: center; box-shadow: 0 18px 40px -30px rgba(61,18,24,.5);
}
.lfo-remate__k {
  font-family: var(--body); font-size: 10.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint) !important; margin: 0 0 8px;
}
.lfo-remate__t {
  font-family: var(--serif) !important; font-size: 27px !important; line-height: 1.24;
  color: var(--ink) !important; margin: 0 0 14px;
}
.lfo-remate__p {
  font-size: 15.5px; line-height: 1.7; color: var(--ink-soft) !important;
  margin: 0 0 22px; text-align: left;
}
.lfo-remate__p b { color: var(--burgundy) !important; font-weight: 700; }
.lfo-buy__pago {
  margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--rule);
  font-size: 12.5px; color: var(--ink-faint) !important;
}
.lfo-remate__s { font-size: 12.5px; font-style: italic; color: var(--ink-faint) !important; margin: 12px 0 0; }
.lfo-page figcaption { font-size: 12px; line-height: 1.4; color: rgba(247,241,230,.7) !important; margin: 9px 0 0; }
.lfo-page figcaption span { display: block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-bright) !important; margin-bottom: 2px; }

/* ═══ 7 · Los tres equipos ═════════════════════════════════════════════ */
.lfo-teams { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-direction: column; gap: 30px; }
.lfo-teams li { display: flex; gap: 20px; align-items: flex-start; text-align: left; }
.lfo-teams span {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--gold); background: var(--card);
  color: var(--burgundy) !important; font-family: var(--serif); font-size: 17px;
  display: flex; align-items: center; justify-content: center; letter-spacing: .04em;
}
.lfo-teams h3 { font-family: var(--serif); font-size: 23px; color: var(--ink) !important; margin: 4px 0 2px; }
.lfo-teams__k { font-size: 12.5px !important; font-style: italic; color: var(--burgundy) !important; margin: 0 0 9px !important; }
.lfo-teams p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft) !important; margin: 0; }
.lfo-mid-cta { text-align: center; margin-top: 42px; }
/* Banda que existe solo para llevar el boton, sin encabezado que la anuncie. */
.lfo-solo-cta { padding-top: 0 !important; padding-bottom: 54px !important; }
.lfo-solo-cta .lfo-mid-cta { margin-top: 0; }
.lfo-mid-cta .lfo-cta { max-width: 460px; margin: 0 auto; }

/* El boton del encabezado va sobre el borgoña: se invierte para que se vea.
   Necesita ganarle a .lfo-cta, que se define mas abajo en este archivo. */
.lf-offer .lfo-cta--hero {
  margin-top: 26px;
  background: var(--gold-bright); border-color: var(--gold-bright);
  color: #3d1218 !important;
  box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .55);
}
.lf-offer .lfo-cta--hero:hover { background: #dcbb5e; border-color: #dcbb5e; color: #3d1218 !important; }

/* ═══ 7b · Reseñas ═════════════════════════════════════════════════════ */
.lfo-buy__rated { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; color: var(--ink-soft) !important; }
.lfo-buy__rated span { color: var(--gold) !important; letter-spacing: 1.5px; font-size: 14px; }
.lfo-buy__rated b { color: var(--ink) !important; font-weight: 700; }

.lfo-score { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 22px 0 4px; }
.lfo-score__stars { color: var(--gold) !important; letter-spacing: 3px; font-size: 19px; }
.lfo-score__n { font-family: var(--serif); font-size: 34px; font-weight: 700; color: var(--ink) !important; line-height: 1; }
.lfo-score__n i { font-style: normal; font-size: 17px; color: var(--ink-faint) !important; }
.lfo-score__t { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint) !important; }

.lfo-revs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
.lfo-rv {
  display: flex; flex-direction: column; margin: 0;
  background: var(--card); border: 1px solid var(--rule); border-radius: 4px;
  padding: 22px 24px 18px; text-align: left;
  transition: transform .4s var(--curva), border-color .4s ease, box-shadow .4s ease;
}
.lfo-rv:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 16px 32px -20px rgba(36,31,33,.45); }
.lfo-rv__stars { color: var(--gold) !important; letter-spacing: 2.5px; font-size: 14px; margin-bottom: 11px; }
.lfo-rv blockquote {
  margin: 0 0 16px; padding: 0; border: none;
  font-size: 14.5px; line-height: 1.66; color: var(--ink) !important;
}
.lfo-rv figcaption {
  display: flex; align-items: center; gap: 11px; margin-top: auto;
  padding-top: 14px; border-top: 1px solid var(--rule);
}
/* Foto de perfil. Es de archivo, como las del inicio: quien escribio la
   reseña pidio no exponerse, asi que va con nombre y cara cambiados. */
.lfo-rv__foto {
  flex-shrink: 0; width: 44px; height: 44px;
  border-radius: 50%; object-fit: cover; display: block;
  border: 1px solid var(--rule);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(168, 132, 47, .45);
}
.lfo-rv figcaption b { display: block; font-size: 13.5px; color: var(--ink) !important; font-weight: 700; }
.lfo-rv figcaption i { font-size: 11px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--gold) !important; }

/* ═══ 8 · Honestidad ═══════════════════════════════════════════════════ */
.lfo-honest { background: var(--card); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.lfo-honest .lfo-h2 { text-align: left; }

/* ═══ 9 · Preguntas ════════════════════════════════════════════════════ */
.lfo-faq-group { margin-top: 34px; }
.lfo-faq-group__t {
  font-family: var(--body); font-size: 10.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold) !important; margin: 0 0 6px;
}
.lfo-faq details { border-bottom: 1px solid var(--rule); }
.lfo-faq details:first-child { border-top: 1px solid var(--rule); }
.lfo-faq summary { font-family: var(--serif); font-size: 18px; color: var(--ink) !important; padding: 16px 0; cursor: pointer; list-style: none; }
.lfo-faq summary::-webkit-details-marker { display: none; }
.lfo-faq summary::after { content: '+'; float: right; color: var(--gold); }
.lfo-faq details[open] summary::after { content: '\2212'; }
.lfo-faq p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft) !important; margin: 0 0 16px; }

/* ═══ 10 · Cierre ══════════════════════════════════════════════════════ */
.lfo-close { text-align: center; background: var(--oscuro); padding: 74px 22px 84px !important; }
.lfo-close .lfo-sep span { background: linear-gradient(to right, transparent, var(--gold-bright), transparent); }
.lfo-close__line {
  font-family: var(--serif); font-size: clamp(24px, 4.2vw, 34px); line-height: 1.28;
  color: #f7f1e6 !important; margin: 22px auto 28px; max-width: 22ch;
}
.lfo-close .lfo-note { color: rgba(247,241,230,.5) !important; }

/* ── El boton ─────────────────────────────────────────────────────────────
   Es lo unico que tiene que saltar de la pagina: filete dorado, cuerpo mas
   grande, sombra que lo despega del papel y un latido lento que lo hace
   encontrar sin que moleste. */
.lfo-cta {
  position: relative; overflow: hidden;
  display: inline-block; padding: 21px 46px;
  font-family: var(--body); font-size: 15.5px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; text-decoration: none;
  color: #fff !important;
  background: linear-gradient(180deg, #8c2333 0%, var(--burgundy) 55%, #6d1a26 100%);
  border: 1px solid #5e1620;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(201, 168, 76, .55),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 16px 34px -14px rgba(123, 30, 43, .95);
  transition: transform .18s var(--curva), box-shadow .3s ease, filter .2s ease;
  animation: lfoLatido 3.6s var(--curva) infinite;
}
.lfo-cta:hover {
  transform: translateY(-3px); color: #fff !important; filter: brightness(1.08);
  animation-play-state: paused;
  box-shadow:
    inset 0 0 0 1px rgba(201, 168, 76, .9),
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 22px 42px -14px rgba(123, 30, 43, 1);
}
.lfo-cta:active { transform: translateY(-1px); }
@keyframes lfoLatido {
  0%, 88%, 100% { box-shadow:
    inset 0 0 0 1px rgba(201,168,76,.55), inset 0 1px 0 rgba(255,255,255,.18),
    0 16px 34px -14px rgba(123,30,43,.95); }
  94% { box-shadow:
    inset 0 0 0 1px rgba(201,168,76,.95), inset 0 1px 0 rgba(255,255,255,.18),
    0 16px 34px -14px rgba(123,30,43,.95), 0 0 0 6px rgba(201,168,76,.16); }
}
.lfo-cta:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.lfo-cta .woocommerce-Price-amount { color: #fff !important; }
.lfo-cta--big { display: block; width: 100%; text-align: center; padding: 21px 32px; font-size: 15px; }
.lfo-close .lfo-cta--big, .lfo-mid-cta .lfo-cta { max-width: 420px; margin: 0 auto; }
/* brillo que cruza el boton al pasar por encima */
.lfo-cta::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 46px; left: -70px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
}
.lfo-cta:hover::after { animation: lfoBrillo .85s var(--curva); }
@keyframes lfoBrillo { to { left: 130%; } }

/* ── Revelado al entrar en pantalla ───────────────────────────────────── */
.lfo-rev {
  opacity: 0; transform: translateY(24px);
  transition: opacity .85s var(--curva), transform .85s var(--curva);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.lfo-rev.visto { opacity: 1; transform: none; }
.lfo-rev[data-d="1"] { --d: 1; }
.lfo-rev[data-d="2"] { --d: 2; }
.lfo-rev[data-d="3"] { --d: 3; }

.lfo-rev-group > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--curva), transform .8s var(--curva);
}
.lfo-rev-group.visto > * { opacity: 1; transform: none; }
.lfo-rev-group.visto > *:nth-child(1) { transition-delay: 0ms; }
.lfo-rev-group.visto > *:nth-child(2) { transition-delay: 90ms; }
.lfo-rev-group.visto > *:nth-child(3) { transition-delay: 180ms; }
.lfo-rev-group.visto > *:nth-child(4) { transition-delay: 270ms; }
.lfo-rev-group.visto > *:nth-child(5) { transition-delay: 360ms; }
.lfo-rev-group.visto > *:nth-child(6) { transition-delay: 450ms; }
.lfo-rev-group.visto > *:nth-child(7) { transition-delay: 540ms; }
.lfo-rev-group.visto > *:nth-child(8) { transition-delay: 630ms; }

/* el libro respira */
.lfo-float { animation: lfoFloat 7s ease-in-out infinite; }
@keyframes lfoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(-.5deg); }
}

/* ── Telefono ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lfo-buy__grid { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; }
  /* En telefono el bloque es una sola columna: se le puede dar mas ancho.
     `width: 100%` ademas sostiene al carrusel, cuyas imagenes son absolutas. */
  .lfo-buy__art { width: 100%; max-width: 330px; margin: 0 auto; }
  /* Menos ampliacion que en pantalla grande: aca el margen lateral es
     minimo y con mas escala el libro se sale de la pantalla. */
  .lfo-carru__i--ancha { transform: scale(1.06); }
  /* Marco menos alargado que en escritorio: con la proporcion de la tapa,
     el libro abierto quedaba flotando en medio marco de aire. */
  .lfo-carru { aspect-ratio: 4 / 5; }
  .lfo-buy__side, .lfo-buy__h, .lfo-buy__side .lfo-eyebrow { text-align: center; }
  .lfo-buy__list li, .lfo-buy__trust { text-align: left; }
  .lfo-buy__price { justify-content: center; }
  .lfo-pages { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .lf-offer section { padding: 48px 16px; }
  .lfo-hero { padding: 66px 18px 96px !important; }
  .lfo-cards, .lfo-grid { grid-template-columns: 1fr; }
  .lfo-cd { padding: 20px 20px 16px; }
  .lfo-buy { padding: 48px 14px !important; }
  .lfo-buy__grid { padding: 28px 20px; }
  .lfo-buy__amount { font-size: 42px; }
  .lfo-cta { width: 100%; padding: 18px 20px; }
  .lfo-teams li { gap: 14px; }
  .lfo-teams span { width: 38px; height: 38px; font-size: 15px; }
  .lfo-honest .lfo-h2 { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lfo-rev, .lfo-rev-group > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lfo-float { animation: none; }
  .lfo-dust { display: none; }
  .lfo-cta::after { display: none; }
  .lfo-cta { animation: none; }
  .lfo-urg__left i, .lfo-urg__clock b { animation: none; }
  .lfo-band--dark::after, .lfo-close::after { animation: none; }
  .lfo-buy__halo { animation: none; }
}

/* Un resplandor detras del libro, que respira: el bloque de compra es lo que
   tiene que atraer la vista al bajar. */
.lfo-buy__halo { animation: lfoRespira 9s ease-in-out infinite; }
@keyframes lfoRespira {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: .72; transform: translate(-50%, -50%) scale(1.06); }
}

/* La banda del libro tambien recibe su resplandor, muy suave. */
.lfo-buy {
  background:
    radial-gradient(70% 50% at 50% 42%, rgba(201,168,76,.1) 0%, rgba(201,168,76,0) 70%),
    var(--vitela);
}

/* ══ Lo que hay que arrancarle al tema ═════════════════════════════════
   familycrests fuerza tipografia, tamaño y subrayado en toda la pagina con
   selectores mas especificos que estos. Donde el tamaño es parte del diseño
   hay que ganarle explicitamente. */
.lf-offer .lfo-h2,
.lf-offer .lfo-hero__h,
.lf-offer .lfo-buy__h,
.lf-offer .lfo-close__line,
.lf-offer .lfo-teams h3,
.lf-offer .lfo-grid__i h3,
.lf-offer .lfo-faq summary { font-family: var(--serif) !important; }

.lf-offer .lfo-h2 { font-size: clamp(26px, 4.4vw, 38px) !important; }
/* Ojo: este bloque es el que manda (gana por !important sobre el tema), asi
   que el tamaño del titular se cambia ACA, no arriba. */
/* El `margin: 0 auto` de arriba no sobrevive: el tema pisa el margen de los
   h1. Como el titular ahora tiene max-width, sin los `auto` el bloque queda
   pegado a la izquierda de la columna y se lee descentrado. */
.lf-offer .lfo-hero__h {
  font-size: clamp(28px, 4.6vw, 42px) !important; line-height: 1.14 !important;
  margin-left: auto !important; margin-right: auto !important;
}
.lf-offer .lfo-hero__sn { font-size: clamp(26px, 5vw, 40px) !important; line-height: 1 !important; }
.lf-offer .lfo-buy__h { font-size: clamp(28px, 3.4vw, 40px) !important; line-height: 1.1 !important; }
.lf-offer .lfo-close__line { font-size: clamp(24px, 4.2vw, 34px) !important; line-height: 1.28 !important; }
.lf-offer .lfo-teams h3 { font-size: 23px !important; }
.lf-offer .lfo-grid__i h3 { font-size: 18px !important; }
.lf-offer .lfo-faq summary { font-size: 18px !important; }

/* el boton es un boton, no un enlace subrayado */
.lf-offer a.lfo-cta,
.lf-offer a.lfo-cta:hover,
.lf-offer a.lfo-cta:focus { text-decoration: none !important; border-bottom: none !important; }

/* la orla dorada del bloque de compra tiene que verse */
.lfo-buy__grid::after { opacity: .55; }
.lfo-buy__seal { width: 64px; height: 64px; }

/* En telefono el apellido y los titulos tienen que pesar: con el minimo del
   clamp se quedaban chicos y la pantalla se leia vacia. */
@media (max-width: 700px) {
  .lf-offer .lfo-hero__h { font-size: clamp(25px, 6.4vw, 32px) !important; }
  .lf-offer .lfo-hero__sn { font-size: clamp(23px, 6vw, 30px) !important; }
  .lf-offer .lfo-h2 { font-size: clamp(29px, 7.4vw, 34px) !important; }
  .lf-offer .lfo-buy__h { font-size: clamp(30px, 8vw, 36px) !important; }
  .lf-offer .lfo-close__line { font-size: clamp(26px, 6.6vw, 32px) !important; }
  .lfo-hero .lfo-lede { font-size: 16.5px; }

  /* el precio y su aclaracion no entran en la misma linea */
  .lfo-buy__price { justify-content: center; gap: 10px; }
  .lfo-buy__was { font-size: 22px; }
  .lfo-buy__amount { font-size: 46px; }
  .lfo-buy__unit, .lfo-buy__deal { text-align: center; }
  .lfo-urg { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  .lfo-revs { grid-template-columns: 1fr; }
  .lfo-rv { padding: 20px 20px 16px; }
  .lfo-buy__rated { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lfo-urg__left i { animation: none; }
}