/* ============================================================
   ÓPTICA FIJA — Promociones (HUB)  ·  CSS autocontenido (scope .of-promos)
   Se encola SOLO en la página /promociones/ desde opticafija-promociones.php.
   Incluye: tokens + fuente Outfit + componentes globales (.of-btn, .of-tel, .of-faq)
   + estilos de la página. No depende del snippet global del sitio.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

.of-promos{
  --of-red:#E02B20; --of-red-dark:#B81F17; --of-black:#000; --of-ink:#1A1A1A;
  --of-muted:#6B6B6B; --of-white:#FFF; --of-surface:#F7F6F5; --of-border:#E6E4E1;
  --of-radius:8px; --of-radius-lg:12px; --of-maxw:1160px;
  --of-font:'Outfit',Helvetica,Arial,sans-serif;
  font-family:var(--of-font); color:var(--of-ink);
}
.of-promos *{ box-sizing:border-box; }
.of-promos .of-wrap{ max-width:var(--of-maxw); margin:0 auto; padding-left:20px; padding-right:20px; }
.of-promos h1,.of-promos h2,.of-promos h3{ text-transform:none; margin:0; }
.of-promos p{ margin:0; }
.of-promos strong{ color:var(--of-red); font-weight:700; }
.of-promos a{ text-decoration:none; }

/* Oculta el título de página del tema (mostramos nuestro H1 en el hero) */
body.of-promociones .page-header,
body.of-promociones .entry-title,
body.of-promociones .elementor-page-title{ display:none !important; }

/* Romper el contenedor con max-width del tema (hello-elementor) → secciones a TODO el ancho */
body.of-promociones #content.site-main,
body.of-promociones main.site-main,
body.of-promociones .page-content{
  max-width:100% !important; width:100% !important;
  margin-left:0 !important; margin-right:0 !important;
  padding-left:0 !important; padding-right:0 !important;
}
body.of-promociones{ overflow-x:hidden; }
.of-promos{ width:100%; }
.of-promos > section{ width:100%; }

/* ---------- Botón sólido ---------- */
.of-promos .of-btn{
  display:inline-flex; align-items:center; gap:.5em; font-family:var(--of-font); font-weight:700;
  font-size:1.0625rem; line-height:1; padding:16px 30px; border-radius:var(--of-radius);
  background:var(--of-red) !important; color:#fff !important; border:2px solid var(--of-red) !important;
  text-decoration:none; cursor:pointer; transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.of-promos .of-btn:hover,.of-promos .of-btn:focus-visible{ background:#fff !important; color:var(--of-red) !important; border-color:var(--of-red) !important; }
.of-promos .of-btn svg{ width:18px; height:18px; flex-shrink:0; }

/* ---------- Botón teléfono con popup Copiar/Llamar ---------- */
.of-promos .of-tel-wrap{ position:relative; display:inline-block; }
.of-promos .of-tel{
  display:inline-flex; align-items:center; gap:10px; background:#fff; color:var(--of-red);
  padding:16px 28px; border-radius:var(--of-radius); font-weight:700; font-size:1.0625rem; line-height:1;
  text-decoration:none; border:2px solid var(--of-red); cursor:pointer; font-family:var(--of-font);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.of-promos .of-tel:hover,.of-promos .of-tel[aria-expanded="true"]{ background:var(--of-red); color:#fff; }
.of-promos .of-tel svg{ width:18px; height:18px; flex-shrink:0; }
.of-promos .of-tel-pop{
  position:absolute; left:50%; bottom:calc(100% + 12px);
  transform:translate(-50%,8px) scale(.96); transform-origin:bottom center;
  background:#16181D; color:#fff; border-radius:var(--of-radius-lg); padding:14px 14px 12px; min-width:248px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, transform .25s cubic-bezier(.2,.7,.2,1), visibility 0s linear .25s;
  box-shadow:0 22px 44px rgba(0,0,0,.28); z-index:30;
}
.of-promos .of-tel-pop::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:7px solid transparent; border-top-color:#16181D; }
.of-promos .of-tel-pop.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0) scale(1); transition:opacity .22s ease, transform .25s cubic-bezier(.2,.7,.2,1), visibility 0s linear; }
.of-promos .of-tel-pop-num{ display:flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:1.0625rem; padding-bottom:12px; }
.of-promos .of-tel-pop-num svg{ width:16px; height:16px; }
.of-promos .of-tel-pop-actions{ display:flex; gap:8px; }
.of-promos .of-tel-pop-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-size:.875rem; font-weight:700; color:#fff; background:transparent;
  border:1px solid rgba(255,255,255,.28); border-radius:var(--of-radius); padding:10px; cursor:pointer;
  text-decoration:none; transition:background .2s ease,border-color .2s ease,color .2s ease; font-family:var(--of-font);
}
.of-promos .of-tel-pop-btn svg{ width:14px; height:14px; flex-shrink:0; }
.of-promos .of-tel-pop-btn-copy:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.55); }
.of-promos .of-tel-pop-btn-copy.is-copied{ background:#1F9D57; border-color:#1F9D57; }
.of-promos .of-tel-pop-btn-call{ background:var(--of-red); border-color:var(--of-red); }
.of-promos .of-tel-pop-btn-call:hover{ background:var(--of-red-dark); border-color:var(--of-red-dark); }

/* ---------- FAQ acordeón (single-open, altura por JS) ---------- */
.of-promos .of-faq{ width:100%; border:1px solid var(--of-border); border-radius:12px; overflow:hidden; background:#fff; }
.of-promos .of-faq-item{ border-bottom:1px solid var(--of-border); }
.of-promos .of-faq-item:last-child{ border-bottom:0; }
.of-promos .of-faq-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0; padding:18px 20px; background:transparent !important; border:0; -webkit-appearance:none; appearance:none; box-shadow:none !important; cursor:pointer; font-family:var(--of-font); font-weight:600; font-size:1.0625rem; color:var(--of-ink) !important; text-align:left; line-height:1.5; transition:background .15s ease; white-space:normal !important; }
.of-promos .of-faq-trigger:hover{ background:var(--of-surface) !important; }
.of-promos .of-faq-trigger:focus,.of-promos .of-faq-trigger:focus-visible,.of-promos .of-faq-trigger:active{ background:transparent !important; outline:none; }
.of-promos .of-faq-item.is-open .of-faq-trigger{ background:var(--of-surface) !important; }
.of-promos .of-faq-chev{ width:18px; height:18px; flex-shrink:0; color:var(--of-red); transition:transform .25s ease; }
.of-promos .of-faq-item.is-open .of-faq-chev{ transform:rotate(180deg); }
.of-promos .of-faq-a{ padding:2px 20px 18px; color:var(--of-muted); font-size:1.0625rem; line-height:1.65; text-align:left; }
.of-promos .of-faq-a a{ color:var(--of-red); font-weight:600; }
.of-js .of-promos .of-faq-panel{ overflow:hidden; height:0; transition:height .3s ease; }

/* palabra clave roja */
.of-promos .of-accent,.of-promos .of-rh{ color:var(--of-red); }

/* ---------- Animación "censura que cae" en H2 (opt-in con .of-censor) ---------- */
.of-promos .of-censored .of-cz{ position:relative; display:inline-block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em; }
.of-promos .of-censored .of-cz::after{ content:""; position:absolute; inset:0; background:currentColor; z-index:2; pointer-events:none; transform:translateY(0); }
.of-promos .of-censored.is-on .of-cz::after{ transform:translateY(101%); transition:transform .55s cubic-bezier(.7,0,.2,1) var(--d); }
@media (prefers-reduced-motion: reduce){ .of-promos .of-censored .of-cz::after{ display:none !important; } }

/* ---------- Reveal escalonado al hacer scroll (.js-reveal) ---------- */
.of-js .of-promos .js-reveal > *{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.of-js .of-promos .js-reveal.is-in > *{ opacity:1; transform:none; }
.of-js .of-promos .js-reveal.is-in > *:nth-child(1){ transition-delay:.04s; }
.of-js .of-promos .js-reveal.is-in > *:nth-child(2){ transition-delay:.09s; }
.of-js .of-promos .js-reveal.is-in > *:nth-child(3){ transition-delay:.14s; }
.of-js .of-promos .js-reveal.is-in > *:nth-child(4){ transition-delay:.19s; }
.of-js .of-promos .js-reveal.is-in > *:nth-child(5){ transition-delay:.24s; }
.of-js .of-promos .js-reveal.is-in > *:nth-child(6){ transition-delay:.29s; }
.of-js .of-promos .js-reveal.is-in > *:nth-child(7){ transition-delay:.34s; }
.of-js .of-promos .js-reveal.is-in > *:nth-child(8){ transition-delay:.39s; }
@media (prefers-reduced-motion: reduce){ .of-js .of-promos .js-reveal > *{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* ---------- Lenis (scroll suave global, igual que la home) ---------- */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
.lenis.lenis-smooth iframe{ pointer-events:none; }

/* ============================================================
   ESTRUCTURA DE LA PÁGINA
   ============================================================ */
/* Hero */
.of-prom-hero{ padding:clamp(56px,9vw,96px) 0; text-align:center; background:var(--of-white); }
.of-prom-hero .of-wrap{ max-width:860px; }
.of-prom-eyebrow{ display:inline-block; font-weight:700; font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase; color:var(--of-red); margin-bottom:18px; }
.of-prom-hero h1{ font-size:clamp(2rem,5vw,3.1rem); font-weight:800; line-height:1.1; color:var(--of-black); margin:0 auto; max-width:18ch; }
.of-prom-lead{ margin:30px auto 0; max-width:62ch; font-size:1.1875rem; line-height:1.6; color:var(--of-muted); }

/* Texto SEO answer-first (2 columnas) */
.of-prom-seo{ padding:clamp(48px,8vw,88px) 0; background:#fff; }
.of-prom-seo .of-wrap{ max-width:1080px; }
.of-prom-h2{ font-size:clamp(1.6rem,3.5vw,2.25rem); font-weight:800; line-height:1.15; color:var(--of-black); }
.of-prom-seo-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,56px); align-items:center; }
@media (max-width:860px){ .of-prom-seo-grid{ grid-template-columns:1fr; gap:28px; } }
.of-prom-seo-text .of-prom-h2{ text-align:left; }
.of-prom-seo-text p{ margin:18px 0 0; color:var(--of-muted); font-size:1.0625rem; line-height:1.7; }
.of-prom-types{ list-style:none; margin:0; padding:30px; background:var(--of-surface); border-radius:16px; display:grid; gap:16px; }
.of-prom-types li{ display:flex; gap:13px; align-items:flex-start; color:var(--of-ink); font-size:1.0625rem; line-height:1.45; }
.of-prom-types svg{ width:20px; height:20px; flex-shrink:0; color:var(--of-red); margin-top:2px; }

/* Promoción destacada */
.of-prom-feat{ padding:clamp(40px,7vw,84px) 0; background:#fff; }
.of-prom-feat .of-wrap{ max-width:1000px; }
.of-prom-feat-card{ background:var(--of-surface); border:1px solid var(--of-border); border-radius:18px; padding:clamp(28px,4vw,44px); }
.of-prom-feat-eyebrow{ display:inline-block; font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--of-red); margin-bottom:12px; }
.of-prom-feat-card h2{ font-size:clamp(1.5rem,3.2vw,2.1rem); font-weight:800; line-height:1.15; color:var(--of-black); }
.of-prom-feat-benefits{ list-style:none; margin:22px 0 0; display:grid; gap:14px; }
.of-prom-feat-benefits li{ display:flex; gap:12px; align-items:flex-start; color:var(--of-ink); font-size:1.0625rem; line-height:1.5; }
.of-prom-feat-benefits svg{ width:22px; height:22px; flex-shrink:0; color:var(--of-red); margin-top:1px; }
.of-prom-feat-body{ margin-top:20px; color:var(--of-muted); font-size:1.0625rem; line-height:1.7; }
.of-prom-feat-body p{ margin:0 0 12px; }
.of-prom-feat-body p:last-child{ margin-bottom:0; }
.of-prom-feat-meta{ margin-top:20px; color:var(--of-muted); font-size:.95rem; line-height:1.5; }
.of-prom-feat-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
@media (max-width:600px){ .of-prom-feat-actions{ flex-direction:column; align-items:stretch; } .of-prom-feat-actions .of-btn{ justify-content:center; } }

/* Grid de marcas: FONDO a todo el ancho, tarjetas en contenedor centrado de ancho cómodo */
.of-prom-brands{ padding:clamp(36px,6vw,72px) clamp(20px,5vw,40px); background:var(--of-surface); }
.of-prom-brands .of-wrap{ max-width:1160px; margin:0 auto; }
.of-prom-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
@media (max-width:1100px){ .of-prom-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:780px){ .of-prom-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .of-prom-grid{ grid-template-columns:1fr; } }
.of-prom-card{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--of-border); border-radius:16px; overflow:hidden; transition:border-color .2s ease; }
.of-prom-card:hover{ border-color:var(--of-red); }
.of-prom-card__logo{ display:flex; align-items:center; justify-content:center; height:150px; padding:30px; border-bottom:1px solid var(--of-border); }
.of-prom-card__logo img{ max-width:100%; max-height:64px; width:auto; height:auto; object-fit:contain; }
.of-prom-card__body{ flex:1; display:flex; flex-direction:column; padding:22px 24px 24px; }
.of-prom-card__name{ font-weight:700; color:var(--of-ink); font-size:1.15rem; }
.of-prom-card__list{ display:grid; gap:9px; margin-top:12px; }
.of-prom-card__li{ display:flex; gap:10px; align-items:flex-start; color:var(--of-muted); font-size:.95rem; line-height:1.4; }
.of-prom-card__li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--of-red); margin-top:7px; flex-shrink:0; }
.of-prom-badge{ position:absolute; top:14px; right:14px; background:var(--of-red); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.02em; padding:4px 11px; border-radius:999px; }

/* FAQ */
.of-prom-faqsec{ padding:clamp(48px,8vw,88px) 0; background:#fff; }
.of-prom-faqsec .of-wrap{ max-width:880px; }
.of-prom-faqsec .of-prom-h2{ text-align:center; margin:0 auto; }
.of-prom-sub{ display:block; text-align:center; max-width:60ch; margin:28px auto 0; color:var(--of-muted); font-size:1.0625rem; line-height:1.6; }
.of-prom-sub a{ color:var(--of-red); font-weight:600; }
.of-prom-faq{ margin-top:40px; }

/* CTA — bloque ROJO igual que el de la home (único bloque rojo de la página) */
.of-prom-cta{ padding:clamp(54px,8vw,104px) 0; background:var(--of-red); color:#fff; text-align:center; }
.of-prom-cta .of-wrap{ max-width:760px; }
.of-prom-cta h2{ font-size:clamp(1.8rem,3.8vw,2.5rem); font-weight:800; color:#fff; }
.of-prom-cta p{ max-width:58ch; margin:24px auto 0; color:rgba(255,255,255,.92); font-size:1.0625rem; line-height:1.6; }
.of-prom-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px; }
.of-prom-cta .of-btn{ background:#fff !important; color:var(--of-red) !important; border-color:#fff !important; }
.of-prom-cta .of-btn:hover,.of-prom-cta .of-btn:focus-visible{ background:transparent !important; color:#fff !important; border-color:#fff !important; }
.of-prom-cta .of-tel{ background:rgba(255,255,255,.10); color:#fff; border:1.5px solid rgba(255,255,255,.5); }
.of-prom-cta .of-tel:hover,.of-prom-cta .of-tel[aria-expanded="true"]{ background:#fff; color:var(--of-red); border-color:#fff; }
@media (max-width:600px){ .of-prom-actions{ flex-direction:column; align-items:stretch; } .of-prom-actions .of-btn,.of-prom-actions .of-tel{ justify-content:center; } .of-prom-actions .of-tel-wrap{ display:block; } .of-prom-actions .of-tel{ width:100%; } }

/* ============================================================
   OVERRIDE de centrado/separación — gana al tema (hello-elementor
   tiene `.page-content p{...}` que pisa mis márgenes auto y el margin-top).
   Alta especificidad (.of-promos .X) + !important para asegurar.
   ============================================================ */
.of-promos .of-prom-hero{ text-align:center !important; }
.of-promos .of-prom-hero h1{ margin:0 auto !important; max-width:20ch; }
.of-promos .of-prom-lead{ margin:30px auto 0 !important; text-align:center !important; max-width:62ch; }
.of-promos .of-prom-faqsec{ text-align:center; }
.of-promos .of-prom-faqsec .of-prom-h2{ margin:0 auto !important; text-align:center !important; }
.of-promos .of-prom-sub{ margin:26px auto 0 !important; text-align:center !important; max-width:60ch; }
.of-promos .of-prom-cta{ text-align:center !important; }
.of-promos .of-prom-cta h2{ margin:0 auto !important; }
.of-promos .of-prom-cta p{ margin:22px auto 0 !important; text-align:center !important; max-width:58ch; }
.of-promos .of-promb-empty p{ margin:14px auto 0 !important; text-align:center !important; max-width:56ch; }

/* ============================================================
   PÁGINAS DE MARCA (/promociones-<marca>/) — banners de promo
   ============================================================ */
.of-promb{ padding:clamp(36px,6vw,72px) 0; background:#fff; }
.of-promb .of-wrap{ max-width:1000px; }
.of-promb-list{ display:grid; gap:24px; }
.of-promb-card{ display:block; border:1px solid var(--of-border); border-radius:16px; overflow:hidden; background:#fff; transition:border-color .2s ease; }
.of-promb-card:hover{ border-color:var(--of-red); }
.of-promb-card img{ display:block; width:100%; height:auto; }
.of-promb-card--text{ padding:24px 26px; }
.of-promb-ttl{ font-weight:700; color:var(--of-ink); font-size:1.15rem; }
.of-promb-empty{ text-align:center; background:var(--of-surface); border:1px solid var(--of-border); border-radius:18px; padding:clamp(28px,5vw,48px); }
.of-promb-empty h2{ font-size:clamp(1.4rem,3vw,1.9rem); font-weight:800; color:var(--of-black); margin:0; }
.of-promb-empty .of-prom-actions{ margin-top:26px; }
.of-promb-back{ background:#fff; text-align:center; padding:0 0 clamp(24px,5vw,48px); }
.of-promb-back a{ color:var(--of-red); font-weight:600; font-size:1.0625rem; }

/* Botón secundario "fantasma" (sobre fondo claro) */
.of-promos .of-btn--ghost{ background:#fff !important; color:var(--of-ink) !important; border-color:var(--of-border) !important; }
.of-promos .of-btn--ghost:hover,.of-promos .of-btn--ghost:focus-visible{ background:var(--of-ink) !important; color:#fff !important; border-color:var(--of-ink) !important; }

/* ============================================================
   PÁGINA DE MARCA v2 — tarjetas de promoción + logo de marca
   ============================================================ */
.of-pbrand-logo{ display:inline-flex; align-items:center; justify-content:center; height:52px; margin-bottom:18px; }
.of-pbrand-logo img{ max-height:52px; width:auto; object-fit:contain; }
.of-pbrand{ padding:clamp(36px,6vw,72px) 0; background:#fff; }
.of-pbrand .of-wrap{ max-width:1160px; }
.of-pcards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:stretch; }
@media (max-width:760px){ .of-pcards{ grid-template-columns:1fr; } }
.of-pcard{ display:flex; flex-direction:column; height:100%; border:1px solid var(--of-border); border-radius:18px; overflow:hidden; background:#fff; transition:border-color .2s ease; }
.of-pcard:hover{ border-color:var(--of-red); }
.of-pcard__img{ display:block; background:var(--of-surface); }
.of-pcard__img img{ display:block; width:100%; height:auto; aspect-ratio:1600/450; object-fit:cover; object-position:center center; }
.of-pcard__body{ display:flex; flex-direction:column; gap:10px; padding:22px 24px 24px; flex:1; }
.of-pcard__badge{ align-self:flex-start; background:var(--of-red); color:#fff; font-size:.74rem; font-weight:700; letter-spacing:.02em; padding:5px 12px; border-radius:999px; }
.of-pcard__title{ font-size:1.25rem; font-weight:800; color:var(--of-black); line-height:1.2; }
.of-pcard__sum{ color:var(--of-muted); font-size:1rem; line-height:1.5; }
.of-pcard__meta{ color:var(--of-muted); font-size:.9rem; }
.of-pcard__go{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; color:var(--of-red); font-weight:700; padding-top:6px; }
.of-pcard__go svg{ width:18px; height:18px; transition:transform .2s ease; }
.of-pcard:hover .of-pcard__go svg{ transform:translateX(4px); }

/* ============================================================
   PÁGINA DE PROMOCIÓN INDIVIDUAL (.of-promo)
   ============================================================ */
.of-promo .of-wrap{ max-width:1000px; }
.of-promo-hero{ padding:clamp(36px,6vw,68px) 0 clamp(16px,3vw,28px); background:#fff; }
.of-promo-crumb{ display:inline-block; color:var(--of-red); font-weight:600; font-size:.95rem; margin-bottom:18px; }
.of-promo-head{ display:flex; gap:28px; align-items:flex-start; justify-content:space-between; }
.of-promo-headmain{ flex:1; min-width:0; }
.of-promo-badge{ display:inline-block; background:var(--of-red); color:#fff; font-size:.8rem; font-weight:700; letter-spacing:.02em; padding:6px 14px; border-radius:999px; margin-bottom:16px; }
.of-promo-hero h1{ font-size:clamp(1.9rem,4vw,2.9rem); font-weight:800; line-height:1.1; color:var(--of-black); }
.of-promo-sum{ margin-top:16px; max-width:60ch; font-size:1.15rem; line-height:1.55; color:var(--of-muted); }
.of-promo-vig{ display:inline-flex; align-items:center; gap:9px; margin-top:18px; padding:9px 15px; background:var(--of-surface); border:1px solid var(--of-border); border-radius:999px; color:var(--of-ink); font-weight:600; font-size:.95rem; }
.of-promo-vig svg{ width:18px; height:18px; color:var(--of-red); flex-shrink:0; }
.of-promo-brandlogo{ flex-shrink:0; display:flex; align-items:center; height:60px; }
.of-promo-brandlogo img{ max-height:52px; max-width:160px; width:auto; object-fit:contain; }
@media (max-width:680px){ .of-promo-head{ flex-direction:column-reverse; align-items:flex-start; gap:14px; } .of-promo-brandlogo{ height:auto; } }

.of-promo-bannersec{ padding:clamp(8px,2vw,16px) 0 clamp(18px,3vw,26px); background:#fff; }
.of-promo-banner,.of-promo-gitem{ border:1px solid var(--of-border); border-radius:18px; overflow:hidden; display:flex; justify-content:center; align-items:center; background:var(--of-surface); }
.of-promo-banner img,.of-promo-gitem img{ display:block; width:auto; max-width:100%; height:auto; max-height:560px; }
@media (max-width:600px){ .of-promo-banner img,.of-promo-gitem img{ max-height:420px; } }
.of-promo-gallery{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; align-items:flex-start; }
.of-promo-gallery .of-promo-gitem{ flex:0 1 auto; max-width:100%; transition:box-shadow .25s ease; }
.of-promo-gallery .of-promo-gitem img{ max-height:520px; }
@media (max-width:600px){ .of-promo-gallery .of-promo-gitem img{ max-height:420px; } }

.of-promo-body{ padding:clamp(16px,3vw,32px) 0 clamp(40px,7vw,80px); background:#fff; }
.of-promo-desc{ font-size:1.075rem; line-height:1.75; color:var(--of-ink); }
.of-promo-desc p{ margin:0 0 14px; } .of-promo-desc p:last-child{ margin-bottom:0; }
.of-promo-desc a{ color:var(--of-red); font-weight:600; }
.of-promo-desc ul{ margin:0 0 14px; padding-left:20px; } .of-promo-desc li{ margin:6px 0; }
.of-promo-perks{ list-style:none; margin:26px 0 0; padding:24px; background:var(--of-surface); border:1px solid var(--of-border); border-radius:16px; display:grid; gap:14px; }
.of-promo-perks li{ display:flex; gap:13px; align-items:flex-start; font-size:1.075rem; line-height:1.5; color:var(--of-ink); }
.of-promo-perks svg{ width:22px; height:22px; flex-shrink:0; color:var(--of-red); margin-top:1px; }
.of-promo-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
@media (max-width:600px){ .of-promo-ctas{ flex-direction:column; align-items:stretch; } .of-promo-ctas .of-btn{ justify-content:center; } }

.of-promo-block{ margin-top:clamp(40px,5.5vw,64px); }
.of-promos .of-promo-h2{ font-size:clamp(1.5rem,3vw,2rem); font-weight:800; color:var(--of-black); line-height:1.18; margin:0 0 clamp(28px,3.2vw,38px) !important; }
.of-promo-steps{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.of-promo-steps li{ display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--of-border); border-radius:14px; padding:18px 20px; }
.of-promo-stepn{ flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--of-red); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.of-promo-stept{ font-size:1.05rem; line-height:1.55; color:var(--of-ink); padding-top:4px; }
.of-promo-stept a{ color:var(--of-red); font-weight:600; }
.of-promo-tramos .of-faq-trigger{ font-weight:700; }
.of-promo-tcount{ color:var(--of-muted); font-weight:600; }
.of-promo-models{ list-style:none; margin:0; padding:0; columns:2; column-gap:28px; }
.of-promo-models li{ break-inside:avoid; padding:5px 0 5px 18px; position:relative; color:var(--of-ink); font-size:1rem; }
.of-promo-models li::before{ content:""; position:absolute; left:0; top:12px; width:6px; height:6px; border-radius:50%; background:var(--of-red); }
@media (max-width:600px){ .of-promo-models{ columns:1; } }
.of-promo-cond p{ margin:0 0 12px; } .of-promo-cond a{ color:var(--of-red); font-weight:600; }
.of-promo-back{ margin-top:clamp(32px,5vw,48px); }
.of-promo-back a{ color:var(--of-red); font-weight:600; font-size:1.0625rem; }

/* ============================================================
   v3 — HERO PREMIUM con foto oscura + tarjetas refinadas
   ============================================================ */
.of-promos{ --of-prom-hero:url('https://opticafija.com/wp-content/uploads/of-hero/promociones.jpg'); }

/* Hero oscuro con foto (hub / marca / promoción) */
.of-promos .of-prom-hero--img{
  position:relative; isolation:isolate; overflow:hidden;
  background:#0b0c0e !important; color:#fff;
  padding:clamp(94px,15vw,170px) 0 !important;
  text-align:center !important;
}
.of-prom-hero--img::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:var(--of-hero-bg, var(--of-prom-hero)); background-size:cover; background-position:center 42%; background-repeat:no-repeat;
  transform:scale(1.04);
}
/* velo oscuro PLANO (sin degradado) */
.of-prom-hero--img::after{
  content:""; position:absolute; inset:0; z-index:-1; background:rgba(8,9,11,.6);
}
.of-prom-hero--img .of-wrap{ position:relative; z-index:1; max-width:900px !important; }
.of-promos .of-prom-hero--img h1{ color:#fff !important; text-shadow:0 2px 34px rgba(0,0,0,.45); font-size:clamp(1.95rem,4.4vw,2.95rem); max-width:24ch; margin:0 auto !important; }
.of-promos .of-prom-hero--img .of-accent{ color:#ff6a5f; }
.of-promos .of-prom-hero--img .of-prom-lead{ color:rgba(255,255,255,.84) !important; margin:26px auto 0 !important; }

/* eyebrow con guiones laterales */
.of-promos .of-prom-eyebrow{
  display:inline-flex; align-items:center; gap:12px; font-weight:700; font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--of-red); margin-bottom:22px;
}
.of-prom-hero--img .of-prom-eyebrow{ color:#ff5a4e; }
.of-promos .of-prom-eyebrow::before,.of-promos .of-prom-eyebrow::after{ content:""; width:26px; height:1px; background:currentColor; opacity:.55; }

/* logo de marca -> placa blanca sobre hero oscuro */
.of-prom-hero--img .of-pbrand-logo{
  display:inline-flex; align-items:center; justify-content:center; height:auto !important;
  background:#fff; border-radius:14px; padding:15px 26px; margin-bottom:22px !important; box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.of-prom-hero--img .of-pbrand-logo img{ max-height:44px !important; max-width:190px; width:auto; }

/* Hero promoción individual sobre oscuro */
.of-promo .of-prom-hero--img .of-wrap{ max-width:820px !important; }
.of-promos .of-promo-hero.of-prom-hero--img h1{ color:#fff !important; }
.of-promo-back-top{ display:inline-flex; align-items:center; gap:7px; color:var(--of-muted); font-weight:600; font-size:.95rem; margin-bottom:18px; }
.of-promo-back-top svg{ width:16px; height:16px; }
.of-promo-back-top:hover{ color:var(--of-red); }
/* La que sí va sobre imagen (si volviera a usarse) mantiene texto claro */
.of-promos .of-promo-hero.of-prom-hero--img .of-promo-back-top{ color:rgba(255,255,255,.78); }
.of-promos .of-promo-hero.of-prom-hero--img .of-promo-back-top:hover{ color:#fff; }
/* Ficha de promoción: cabecera plana, alineada a la izquierda, ritmo vertical homogéneo */
.of-promos .of-promo-phead{ display:block; padding:clamp(26px,4vw,44px) 0 clamp(6px,1.4vw,14px); background:transparent; }
.of-promos .of-promo-phead .of-wrap{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.of-promos .of-promo-phead .of-promo-hbadge{ margin:0; }
.of-promos .of-promo-phead h1{ margin:0; line-height:1.14; }
.of-promos .of-promo-phead .of-promo-sum{ margin:0; max-width:64ch; }
.of-promos .of-promo-phead .of-promo-vig{ margin:0; }
/* Imagen propia de la promoción: a TODO el ancho y pegada a la parte de arriba */
.of-promos .of-promo-leadfull{ margin:0 auto; padding:0; width:100%; line-height:0; font-size:0; display:flex; justify-content:center; align-items:flex-start; }
.of-promos .of-promo-leadfull img{ display:block; width:auto; max-width:100%; height:auto; max-height:560px; border-radius:14px; }
@media (max-width:600px){ .of-promos .of-promo-leadfull img{ max-height:420px; } }
.of-promo-hbadge{ display:inline-block; background:var(--of-red); color:#fff; font-size:.78rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:6px 14px; border-radius:999px; margin-bottom:18px; }
.of-promos .of-promo-hero.of-prom-hero--img .of-promo-sum{ color:rgba(255,255,255,.84) !important; margin:18px auto 0 !important; text-align:center; max-width:62ch; }
.of-promos .of-promo-hero.of-prom-hero--img .of-promo-vig{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); color:#fff; }
.of-promo-hero.of-prom-hero--img .of-promo-vig svg{ color:#ff6a5f; }

/* Grid de marcas (hub): el estilo vive en el bloque v3.4 al final del archivo. */
.of-prom-badge{ box-shadow:0 4px 14px rgba(224,43,32,.32); }

/* Tarjetas de promoción (página de marca): foto completa (32:9) + sombra. Sin zoom en hover (recortaba el banner). */
.of-pcard{ border-radius:20px !important; box-shadow:0 1px 2px rgba(0,0,0,.04); transition:border-color .2s ease, box-shadow .25s ease !important; }
.of-pcard:hover{ border-color:var(--of-red) !important; box-shadow:0 16px 44px rgba(0,0,0,.12); }
.of-pcard__img{ overflow:hidden; }
.of-pcard:hover .of-pcard__img img{ transform:none; }
.of-pcard__badge{ box-shadow:0 4px 14px rgba(224,43,32,.28); }

/* Banner de la promoción individual: sombra suave */
.of-promo-banner,.of-promo-gitem{ box-shadow:0 10px 34px rgba(0,0,0,.08); }

@media (max-width:600px){
  .of-promos .of-prom-eyebrow::before,.of-promos .of-prom-eyebrow::after{ width:16px; }
}

/* ============================================================
   FICHA DE PROMOCIÓN v3 — layout 2 columnas + tarjeta de acción + timeline
   ============================================================ */
.of-promo .of-wrap{ max-width:1140px; }
.of-promo-layout{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:clamp(28px,4vw,52px); align-items:start; }
.of-promo-layout.is-single{ grid-template-columns:minmax(0,1fr); max-width:840px; margin:0 auto; }
.of-promo-main{ min-width:0; }
.of-promo-main > .of-promo-banner,.of-promo-main > .of-promo-gallery{ margin:0 0 28px; }
.of-promo-aside{ position:sticky; top:104px; }
@media (max-width:920px){ .of-promo-layout{ grid-template-columns:1fr; } .of-promo-aside{ position:static; } }

/* Tarjeta de acción (resumen + perks + CTAs) */
.of-promo-card{ background:#fff; border:1px solid var(--of-border); border-radius:18px; padding:26px; box-shadow:0 16px 44px rgba(0,0,0,.07); }
.of-promo-card-badge{ display:inline-block; background:var(--of-red); color:#fff; font-size:.76rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:6px 14px; border-radius:999px; }
.of-promo-card-vig{ display:flex; align-items:center; gap:9px; margin-top:16px; color:var(--of-ink); font-weight:600; font-size:.92rem; line-height:1.4; }
.of-promo-card-vig svg{ width:18px; height:18px; color:var(--of-red); flex-shrink:0; }
.of-promo-card-perks{ list-style:none; margin:18px 0 0; padding:18px 0 0; border-top:1px solid var(--of-border); display:grid; gap:13px; }
.of-promo-card-perks li{ display:flex; gap:11px; align-items:flex-start; font-size:1rem; line-height:1.45; color:var(--of-ink); }
.of-promo-card-perks svg{ width:20px; height:20px; flex-shrink:0; color:var(--of-red); margin-top:1px; }
.of-promo-card-perks strong{ color:var(--of-red); }
.of-promo-card-ctas{ display:grid; gap:10px; margin-top:22px; }
.of-promos .of-promo-card-ctas .of-btn{ justify-content:center; width:100%; padding:15px 22px; }
.of-promo-card-note{ margin:18px 0 0; padding-top:16px; border-top:1px solid var(--of-border); color:var(--of-muted); font-size:.875rem; line-height:1.55; }

/* Pasos como TIMELINE conectado (sustituye las tarjetas sueltas) */
.of-promos .of-promo-steps{ display:block; }
.of-promos .of-promo-steps li{ display:flex; gap:18px; align-items:flex-start; position:relative; background:transparent; border:0; border-radius:0; padding:0 0 24px; }
.of-promos .of-promo-steps li:last-child{ padding-bottom:0; }
.of-promos .of-promo-steps li:not(:last-child)::before{ content:""; position:absolute; left:16px; top:36px; bottom:2px; width:2px; background:var(--of-border); }
.of-promos .of-promo-stepn{ position:relative; z-index:1; box-shadow:0 0 0 4px #fff; }
.of-promos .of-promo-stept{ padding-top:5px; }

@media (max-width:920px){ .of-promo-card{ padding:22px; } }

/* ============================================================
   CRO v3.2 — urgencia de vigencia + confianza + CTA-first en móvil
   ============================================================ */
.of-promo-card-top{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.of-promo-card-urg{ display:inline-flex; align-items:center; gap:6px; background:#FBF3F2; color:var(--of-red); border:1px solid #F1D8D5; font-size:.76rem; font-weight:700; padding:5px 11px; border-radius:999px; }
.of-promo-card-urg svg{ width:14px; height:14px; }
.of-promo-card-trust{ list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--of-border); display:grid; gap:10px; }
.of-promo-card-trust li{ display:flex; gap:10px; align-items:flex-start; color:var(--of-muted); font-size:.875rem; line-height:1.4; }
.of-promo-card-trust svg{ width:17px; height:17px; flex-shrink:0; color:var(--of-red); margin-top:1px; }
.of-promo-card-trust strong{ color:var(--of-ink); }

/* urgencia en la tarjeta de promoción del hub de marca (esquina de la imagen) */
.of-pcard__img{ position:relative; }
.of-pcard__urg{ position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; gap:6px; background:rgba(17,18,21,.82); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff; font-size:.74rem; font-weight:700; padding:5px 11px; border-radius:999px; z-index:1; }
.of-pcard__urg svg{ width:13px; height:13px; color:#ff7a70; }

/* CRO móvil: la tarjeta de acción (CTA) va primero, justo bajo el hero */
@media (max-width:920px){ .of-promo-aside{ order:-1; margin-bottom:8px; } }

/* ============================================================
   v3.4 — TARJETAS DE MARCA: un solo bloque, transparente, +anchas
   ============================================================ */
/* flex centrado en vez de grid: las filas incompletas (p. ej. la última con 2 tarjetas) quedan centradas */
.of-promos .of-prom-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(28px,3.2vw,48px); }
.of-promos .of-prom-card{ flex:0 1 calc((100% - 2 * clamp(28px,3.2vw,48px)) / 3); min-width:0; }
@media (max-width:980px){ .of-promos .of-prom-card{ flex-basis:calc((100% - clamp(28px,3.2vw,48px)) / 2); } }
@media (max-width:560px){ .of-promos .of-prom-card{ flex-basis:100%; } }

/* tarjeta = un solo bloque transparente con borde; hover = solo borde rojo */
.of-promos .of-prom-card{
  position:relative; display:flex; flex-direction:column; justify-content:flex-start;
  background:transparent; border:1px solid var(--of-border); border-radius:20px; overflow:hidden;
  padding:28px 0; box-shadow:none; transition:border-color .2s ease;
}
/* banda del chip: altura fija siempre (con o sin chip) -> los logos quedan alineados */
.of-promos .of-prom-card__top{ height:30px; display:flex; align-items:center; justify-content:center; }
.of-promos .of-prom-card:hover{ border-color:var(--of-red); box-shadow:none; transform:none; }

/* logo: sin fondo, sin degradado, sin divisor, sin zoom, sin glow */
.of-promos .of-prom-card__logo{
  position:relative; display:flex; align-items:center; justify-content:center;
  height:100px; padding:0 30px; background:transparent; border-bottom:0; overflow:visible;
}
.of-promos .of-prom-card__logo::after{ display:none; }
.of-promos .of-prom-card__logo img{ max-width:74%; max-height:58px; width:auto; object-fit:contain; transition:none; transform:none; }
.of-promos .of-prom-card:hover .of-prom-card__logo img{ transform:none; }
.of-promos .of-prom-card.is-empty .of-prom-card__logo img{ filter:grayscale(.15); opacity:.9; }
/* Marca personalizada sin logo: nombre como texto centrado en lugar de imagen */
.of-promos .of-prom-card__logotext{ font-weight:800; font-size:1.4rem; letter-spacing:.01em; color:var(--of-ink); text-align:center; line-height:1.15; }

/* pill "N activas" con punto vivo — chip centrado en la banda superior */
.of-promos .of-prom-card__pill{
  display:inline-flex; align-items:center; gap:7px; margin:0;
  background:#fff; border:1px solid var(--of-border); color:var(--of-red);
  font-size:.72rem; font-weight:800; padding:5px 12px 5px 9px; border-radius:999px;
}
.of-promos .of-prom-card__pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--of-red); animation:ofPulse 1.9s ease-out infinite; }
@keyframes ofPulse{ 0%{box-shadow:0 0 0 0 rgba(224,43,32,.55)} 70%{box-shadow:0 0 0 7px rgba(224,43,32,0)} 100%{box-shadow:0 0 0 0 rgba(224,43,32,0)} }
@media (prefers-reduced-motion:reduce){ .of-promos .of-prom-card__pill .dot{ animation:none; } }

/* cuerpo transparente */
.of-promos .of-prom-card__body{ flex:0 1 auto; display:flex; flex-direction:column; padding:22px 28px 0; background:transparent; }
.of-promos .of-prom-card__list{ display:grid; gap:11px; margin:0; }
.of-promos .of-prom-card__li{ display:flex; gap:11px; align-items:flex-start; color:var(--of-muted); font-size:.96rem; line-height:1.45; }
.of-promos .of-prom-card__li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--of-red); margin-top:8px; flex-shrink:0; }
.of-promos .of-prom-card__empty{ margin:0; color:var(--of-muted); font-size:.96rem; line-height:1.5; }

/* ============================================================
   v3.5.8 — CARRUSEL DE GALERÍA (columna derecha) + LIGHTBOX
   ============================================================ */
.of-promo-carousel{ position:relative; margin-top:22px; background:#fff; border:1px solid var(--of-border); border-radius:18px; padding:16px; box-shadow:0 16px 44px rgba(0,0,0,.07); }
.of-promo-carousel-head{ font-size:.78rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--of-muted); margin:0 4px 12px; }
.of-promo-carousel-viewport{ overflow:hidden; border-radius:12px; background:var(--of-surface); }
.of-promo-carousel-track{ display:flex; transition:transform .42s cubic-bezier(.4,0,.2,1); will-change:transform; }
.of-promo-slide{ flex:0 0 100%; min-width:100%; margin:0; padding:0; border:0; background:transparent; cursor:zoom-in; display:flex; align-items:center; justify-content:center; }
.of-promo-slide img{ display:block; width:100%; height:auto; max-height:420px; object-fit:contain; }
.of-promo-carousel-nav{ position:absolute; top:calc(50% + 14px); transform:translateY(-50%); width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.94); border:1px solid var(--of-border); border-radius:50%; color:var(--of-black); cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.12); transition:background .18s ease, color .18s ease, border-color .18s ease; z-index:2; }
.of-promo-carousel-nav:hover{ background:var(--of-red); border-color:var(--of-red); color:#fff; }
.of-promo-carousel-nav svg{ width:20px; height:20px; }
.of-promo-carousel-prev{ left:8px; } .of-promo-carousel-next{ right:8px; }
.of-promo-carousel-dots{ display:flex; justify-content:center; gap:8px; margin-top:13px; }
.of-promo-carousel-dot{ width:8px; height:8px; padding:0; border:0; border-radius:50%; background:var(--of-border); cursor:pointer; transition:background .18s ease, transform .18s ease; }
.of-promo-carousel-dot.is-active{ background:var(--of-red); transform:scale(1.25); }
/* una sola imagen: sin flechas ni puntos */
.of-promo-carousel:not([data-multi]) .of-promo-carousel-nav,
.of-promo-carousel:not([data-multi]) .of-promo-carousel-dots{ display:none; }

/* lightbox */
.of-lightbox{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,48px); background:rgba(10,11,13,.92); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; }
.of-lightbox.is-open{ opacity:1; visibility:visible; }
.of-lightbox img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; border-radius:10px; box-shadow:0 30px 90px rgba(0,0,0,.5); }
.of-lightbox-close{ position:absolute; top:18px; right:18px; width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:50%; color:#fff; cursor:pointer; transition:background .18s ease; }
.of-lightbox-close:hover{ background:rgba(255,255,255,.25); }
.of-lightbox-close svg{ width:24px; height:24px; }
.of-lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:50%; color:#fff; cursor:pointer; transition:background .18s ease; }
.of-lightbox-nav:hover{ background:rgba(255,255,255,.25); }
.of-lightbox-nav svg{ width:26px; height:26px; }
.of-lightbox-prev{ left:clamp(10px,3vw,34px); } .of-lightbox-next{ right:clamp(10px,3vw,34px); }
.of-lightbox-counter{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.85); font-size:.92rem; font-weight:600; letter-spacing:.02em; }
@media (max-width:560px){ .of-lightbox-nav{ width:42px; height:42px; } }