/* ============================================================
   Óptica Fija — Blog/Noticias
   Listado (.ofbp) y entrada individual (.ofsp)
   Calco del blog de Fónix con la marca de Óptica Fija:
   rojo #E02B20 + Albert Sans · animaciones suaves · hover
   ============================================================ */
.ofbp, .ofsp{
  --ink:#1a1a1a; --body:#54524e; --muted:#8a877f;
  --red:#e02b20; --red-d:#b81f17; --red-dk:#8d160f;
  --bg:#fff; --soft:#f7f6f5; --line:#e6e4e1;
  font-family:'Albert Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--body);
  -webkit-font-smoothing:antialiased;
}
.ofbp *, .ofsp *{ box-sizing:border-box; }
.ofbp img, .ofsp img{ display:block; max-width:100%; }
.ofbp a, .ofsp a{ text-decoration:none; color:inherit; }

.ofbp__wrap, .ofsp__wrap{ max-width:1360px; margin:0 auto; padding:0 24px; }

/* reveal */
.ofbp-rv{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.ofbp-rv.is-in{ opacity:1; transform:none; }

/* chip de categoría */
.ofbp__chip{
  display:inline-block; align-self:flex-start;
  padding:4px 12px; border-radius:999px;
  background:rgba(224,43,32,.10); color:var(--red-d);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.ofbp__chip--on{ background:var(--red); color:#fff; }

/* ====================== LISTADO ====================== */
.ofbp{ background:var(--bg); padding:56px 0 88px; }
.ofbp__head{ max-width:760px; margin:0 0 40px; }
.ofbp__eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--red); margin-bottom:14px;
}
.ofbp__title{
  font-size:clamp(32px,4.4vw,52px); font-weight:800; letter-spacing:-.022em;
  line-height:1.08; margin:0 0 14px; color:var(--ink);
}
.ofbp__sub{ font-size:17px; line-height:1.6; color:var(--body); margin:0; max-width:660px; }

/* fila destacada: hero + barra lateral */
.ofbp__feat{
  display:grid; grid-template-columns:1.7fr 1fr; gap:26px;
  margin-bottom:64px; align-items:stretch;
}
.ofbp__hero{
  position:relative; display:block; border-radius:22px; overflow:hidden;
  min-height:420px; background:var(--ink);
  box-shadow:0 20px 50px rgba(26,26,26,.14);
}
.ofbp__hero-img{ position:absolute; inset:0; }
.ofbp__hero-img img{ width:100%; height:100%; object-fit:cover; }
.ofbp__hero-ov{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  gap:12px; padding:34px;
  background:linear-gradient(0deg,rgba(15,14,13,.88) 0%,rgba(15,14,13,.45) 42%,transparent 72%);
}
.ofbp__hero-title{
  font-size:clamp(22px,2.4vw,32px); font-weight:800; letter-spacing:-.018em;
  line-height:1.18; color:#fff; max-width:92%;
}
.ofbp__hero-ex{ font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.82); max-width:90%;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.ofbp__side{ display:flex; flex-direction:column; }
.ofbp__side-title{
  font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--red-dk); margin:0 0 6px; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.ofbp__side-item{
  display:grid; grid-template-columns:84px 1fr; gap:14px; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--line); transition:transform .25s ease;
}
.ofbp__side-item:hover{ transform:translateX(4px); }
.ofbp__side-thumb{ width:84px; height:64px; border-radius:12px; overflow:hidden; background:var(--soft); }
.ofbp__side-thumb img{ width:100%; height:100%; object-fit:cover; }
.ofbp__side-tx{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ofbp__side-cat{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--red); }
.ofbp__side-name{
  font-size:14.5px; font-weight:700; line-height:1.32; color:var(--ink); letter-spacing:-.005em;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  transition:color .2s ease;
}
.ofbp__side-item:hover .ofbp__side-name{ color:var(--red); }

/* barra "Entradas recientes" + filtros */
.ofbp__bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px; }
.ofbp__bar h2{ font-size:clamp(24px,2.8vw,34px); font-weight:800; letter-spacing:-.02em; color:var(--ink); margin:0; }
.ofbp__filters{ display:flex; gap:8px; flex-wrap:wrap; }
.ofbp__pill{
  display:inline-flex; align-items:center; text-decoration:none;
  border:1px solid rgba(224,43,32,.30); background:#FBF2F1; color:var(--red-d);
  padding:8px 16px; border-radius:999px; font-size:13px; font-weight:700; cursor:pointer;
  font-family:inherit;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.ofbp__pill:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.ofbp__pill.is-active{ background:var(--red); border-color:var(--red); color:#fff; }

/* rejilla */
.ofbp__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.ofbp__card{
  display:flex; flex-direction:column; border-radius:18px; overflow:hidden;
  background:#fff; border:1px solid var(--line);
  transition:border-color .25s ease;
}
.ofbp__card:hover{ border-color:var(--red); }
.ofbp__card-img{ aspect-ratio:16/10; overflow:hidden; background:var(--soft); }
.ofbp__card-img img{ width:100%; height:100%; object-fit:cover; }
.ofbp__card-body{ display:flex; flex-direction:column; gap:11px; padding:22px 22px 24px; flex:1; }
.ofbp__card-title{
  font-size:18.5px; font-weight:700; line-height:1.3; color:var(--ink); letter-spacing:-.008em;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.ofbp__card-ex{
  font-size:14px; line-height:1.6; color:var(--body); flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.ofbp__card-more{
  display:inline-flex; align-items:center; gap:7px; margin-top:2px;
  font-size:13.5px; font-weight:700; color:var(--red);
}
.ofbp__card-more svg{ width:15px; height:15px; transition:transform .25s ease; }
.ofbp__card:hover .ofbp__card-more svg{ transform:translateX(4px); }
.ofbp__empty{ grid-column:1/-1; text-align:center; color:var(--muted); padding:40px 0; font-size:15px; }

/* paginación */
.ofbp__pager{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:54px; }
.ofbp__pager .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px;
  padding:0 14px; border-radius:12px; border:1px solid var(--line); background:#fff;
  font-size:14.5px; font-weight:700; color:var(--ink);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.ofbp__pager .page-numbers:hover{ border-color:var(--red); color:var(--red); }
.ofbp__pager .page-numbers.current{ background:var(--red); border-color:var(--red); color:#fff; }
.ofbp__pager .page-numbers.dots{ border-color:transparent; background:transparent; }

@media (max-width:980px){
  .ofbp__feat{ grid-template-columns:1fr; }
  .ofbp__hero{ min-height:340px; }
  .ofbp__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .ofbp{ padding:34px 0 60px; }
  .ofbp__grid{ grid-template-columns:1fr; gap:18px; }
  .ofbp__hero{ min-height:300px; }
  .ofbp__hero-ov{ padding:24px; }
  .ofbp__feat{ gap:18px; margin-bottom:44px; }
}

/* ====================== ENTRADA ====================== */
.ofsp{ background:var(--bg); padding:14px 0 80px; }
.ofbp__srtitle{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.ofsp__wrap{ max-width:1280px; }
.ofsp__back{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600;
  color:var(--red); margin-bottom:26px; transition:gap .2s ease, color .2s ease;
}
.ofsp__back svg{ width:18px; height:18px; }
.ofsp__back:hover{ gap:12px; color:var(--red-d); }

.ofsp__layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:48px; align-items:start; }
.ofsp__main{ min-width:0; }
.ofsp__title{
  font-size:clamp(28px,4vw,44px); font-weight:800; letter-spacing:-.022em;
  line-height:1.12; color:var(--ink); margin:0 0 24px;
}
.ofsp__hero{ border-radius:22px; overflow:hidden; margin-bottom:34px; box-shadow:0 20px 50px rgba(26,26,26,.13); aspect-ratio:16/9; background:var(--soft); }
.ofsp__hero img{ width:100%; height:100%; object-fit:cover; }

/* cuerpo del artículo */
.of-post{ font-size:17px; line-height:1.75; color:#3c3a36; }
.of-post > *:first-child{ margin-top:0; }
.of-post p{ margin:0 0 22px; }
/* lead: primer párrafo destacado */
.of-post__lead, .of-post > p:first-of-type{ font-size:20px; line-height:1.6; color:var(--ink); font-weight:500; }
/* palabra clave resaltada */
.of-hl{ color:var(--red); font-weight:700; }
.of-post strong .of-hl, .of-hl strong{ color:var(--red); }
.of-post h2{ font-size:27px; font-weight:800; letter-spacing:-.015em; color:var(--ink); margin:42px 0 16px; line-height:1.2; }
.of-post h3{ font-size:22px; font-weight:700; letter-spacing:-.01em; color:var(--ink); margin:36px 0 14px; line-height:1.25; }
.of-post h4{ font-size:18px; font-weight:700; color:var(--ink); margin:28px 0 12px; }
.of-post ul, .of-post ol{ margin:0 0 24px; padding-left:0; list-style:none; }
.of-post ul li{ position:relative; padding-left:28px; margin-bottom:11px; }
.of-post ul li::before{
  content:""; position:absolute; left:4px; top:11px; width:8px; height:8px;
  border-radius:50%; background:var(--red);
}
.of-post ol{ counter-reset:fp; padding-left:0; }
.of-post ol li{ position:relative; padding-left:38px; margin-bottom:12px; counter-increment:fp; }
.of-post ol li::before{
  content:counter(fp); position:absolute; left:0; top:1px; width:26px; height:26px;
  border-radius:50%; background:rgba(224,43,32,.10); color:var(--red-d);
  font-size:13px; font-weight:700; display:grid; place-items:center;
}
.of-post a{ color:var(--red); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(224,43,32,.4); transition:text-decoration-color .2s ease; }
.of-post a:hover{ text-decoration-color:var(--red); }
.of-post strong{ color:var(--ink); font-weight:700; }
.of-post blockquote{
  margin:0 0 26px; padding:22px 26px; background:var(--soft); border-radius:14px;
  font-size:18px; line-height:1.6; color:var(--red-dk); font-weight:500;
}
.of-post img{ border-radius:14px; height:auto; margin:8px 0 26px; }
.of-post figure{ margin:8px 0 26px; }
.of-post figure img{ margin:0; }
.of-post figcaption{ font-size:13.5px; color:var(--muted); text-align:center; margin-top:10px; }
.of-post iframe{ max-width:100%; border-radius:14px; margin:8px 0 26px; }

/* módulos Divi convertidos */
.of-post-img{ margin:8px 0 26px; }
.of-post-img img{ width:100%; height:auto; border-radius:14px; }
.of-post-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:8px 0 26px; }
.of-post-gallery .of-post-img{ margin:0; }
.of-post-video{ position:relative; margin:8px 0 26px; }
.of-post-video iframe{ width:100%; aspect-ratio:16/9; height:auto; margin:0; }
.of-post-btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:999px;
  background:var(--red); color:#fff !important; font-weight:700; font-size:15px;
  text-decoration:none !important; transition:background .2s ease, transform .2s ease;
}
.of-post-btn:hover{ background:var(--red-d); transform:translateY(-2px); }

/* sidebar de la entrada */
.ofsp__aside{ display:flex; flex-direction:column; gap:26px; position:sticky; top:108px; }
.ofsp__widget{ border:1px solid var(--line); border-radius:18px; padding:22px; background:#fff; }
.ofsp__widget-title{
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin:0 0 14px;
}
.ofsp__tags{ display:flex; flex-wrap:wrap; gap:8px; }
.ofsp__tag{
  display:inline-flex; align-items:center; padding:7px 14px; border-radius:999px;
  background:rgba(224,43,32,.08); color:var(--red-d);
  font-size:13px; font-weight:700; transition:background .2s ease, color .2s ease;
}
.ofsp__tag:hover{ background:var(--red); color:#fff; }
.ofsp__wdate{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; color:var(--ink); margin:0; }
.ofsp__wdate svg{ width:18px; height:18px; color:var(--red); flex:0 0 auto; }
.ofsp__rel{ display:flex; flex-direction:column; }
.ofsp__rel .ofbp__side-item:first-child{ padding-top:0; }
.ofsp__rel .ofbp__side-item:last-child{ border-bottom:0; padding-bottom:0; }

@media (max-width:900px){
  .ofsp__layout{ grid-template-columns:1fr; gap:36px; }
  .ofsp__aside{ position:static; top:auto; }
}
@media (max-width:640px){
  .ofsp__hero{ aspect-ratio:16/10; margin-bottom:24px; }
  .of-post{ font-size:16px; }
}