/* ============================================================
   CristalesGafas — Ficha de producto (PDP)
   Reutiliza tokens y componentes de styles.css
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--faint);padding-top:22px;}
.crumbs a{color:var(--muted);transition:color .16s;}
.crumbs a:hover{color:var(--blue);}
.crumbs svg{width:14px;height:14px;opacity:.6;}
.crumbs .cur{color:var(--ink);font-weight:600;}

/* ============================================================
   PDP HERO
   ============================================================ */
.pdp-hero{padding-top:18px;padding-bottom:clamp(48px,6vw,80px);position:relative;overflow:hidden;}
.pdp-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 60% at 90% -10%,var(--blue-soft) 0,transparent 55%),var(--paper);}
.pdp-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(28px,4vw,56px);align-items:start;margin-top:18px;}
/* Ocultar el añadir-al-carrito nativo SOLO cuando hay un configurador que lo
   reemplaza (modo normal → body.cg-has-configurator, p. ej. cristales).
   - Modo "optional" (montura graduable): body.cg-configurator-optional → el botón
     nativo SÍ se ve (compra solo la montura) + CTA "Añadir lentes graduadas".
   - Sin configurador asignado: sin clase → botón nativo normal visible. */
body.cg-has-configurator form.cart .quantity,
body.cg-has-configurator form.cart .single_add_to_cart_button{display:none !important;}
.pdp-page form.cart .cg-open-configurator{display:inline-flex !important;}

.pdp-media{position:relative;}
.pdp-photo{width:100%;aspect-ratio:4/3.4;border-radius:var(--card-radius);box-shadow:var(--shadow-card);background:var(--bg-2);overflow:hidden;}
.pdp-photo image-slot{width:100%;height:100%;}
.pdp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px;}
.pdp-thumb{aspect-ratio:1;border-radius:14px;background:var(--bg-2);overflow:hidden;border:1px solid var(--line);}
.pdp-thumb image-slot{width:100%;height:100%;}
.pdp-badge-float{position:absolute;top:16px;left:16px;background:var(--green);color:#fff;font-weight:700;font-size:13px;letter-spacing:.02em;padding:8px 14px;border-radius:999px;box-shadow:var(--shadow-float);}

.pdp-info .pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--blue-ink);background:var(--blue-soft);padding:7px 13px;border-radius:999px;}
.pill svg{width:15px;height:15px;}
.pill.green{color:var(--green);background:var(--green-soft);}
.pill.sand{color:#a9762a;background:var(--sand-soft);}
.pdp-info h1{font-size:clamp(30px,4.6vw,50px);letter-spacing:-.02em;}
.pdp-stars{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:14px;color:var(--muted);}
.pdp-stars .s{color:#e7a93b;font-size:15px;letter-spacing:2px;}
.pdp-stars a{color:var(--blue);font-weight:600;}
.pdp-intro{margin-top:18px;color:var(--muted);font-size:17px;line-height:1.6;max-width:52ch;}
.pdp-pricebox{display:flex;align-items:baseline;gap:12px;margin-top:24px;}
.pdp-pricebox .from{font-size:14px;color:var(--muted);font-weight:600;}
.pdp-pricebox .amount{font-family:var(--font-display);font-weight:700;font-size:clamp(38px,5vw,52px);letter-spacing:-.03em;color:var(--ink);line-height:1;}
.pdp-pricebox .amount sup{font-size:.55em;top:-.55em;}
.pdp-pricebox .vs{font-size:14px;color:var(--faint);}
.pdp-pricebox .vs s{color:var(--faint);}
.pdp-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:24px;}
.pdp-assure{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line);}
.pdp-assure .a{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);}
.pdp-assure .a svg{width:20px;height:20px;color:var(--green);flex:none;}
.pdp-assure .a b{color:var(--ink);font-weight:600;display:block;font-size:14px;}

/* ============================================================
   Bloques de contenido
   ============================================================ */
.prose{max-width:760px;}
.prose p{color:var(--muted);font-size:17px;line-height:1.65;margin-top:16px;}
.prose p:first-child{margin-top:0;}
.prose strong{color:var(--ink);font-weight:600;}

/* layout de dos columnas: texto + tarjeta lateral */
.split{display:grid;grid-template-columns:1.3fr .9fr;gap:clamp(32px,5vw,64px);align-items:start;}
.split.rev{grid-template-columns:.9fr 1.3fr;}

/* incluye checklist */
.include-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.inc-item{display:flex;gap:13px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 20px;transition:.2s;}
.inc-item:hover{box-shadow:var(--shadow-soft);transform:translateY(-2px);}
.inc-item .chk{width:26px;height:26px;border-radius:50%;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px;}
.inc-item .chk svg{width:15px;height:15px;}
.inc-item p{font-size:15px;color:var(--ink);line-height:1.45;}
.inc-item p b{font-weight:600;}

/* casos de uso (lejos/cerca/intermedia) */
.usecase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;}
.usecase{background:var(--paper);border:1px solid var(--line);border-radius:var(--card-radius);padding:26px 24px;transition:.22s;}
.usecase:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);}
.usecase .uc-ic{width:50px;height:50px;border-radius:14px;background:var(--blue-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.usecase .uc-ic svg{width:26px;height:26px;}
.usecase h3{font-size:19px;margin-bottom:7px;}
.usecase p{color:var(--muted);font-size:14.5px;line-height:1.5;}

/* lista "cuándo cambiar" */
.tick-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:11px 26px;}
.tick-list li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--ink);line-height:1.45;}
.tick-list li svg{width:21px;height:21px;color:var(--blue);flex:none;margin-top:1px;}
.tick-list.warn li svg{color:#d9892b;}
.cg-eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#1f5fe0}
.cg-eyebrow::before{content:"";width:22px;height:1.5px;background:#1f5fe0;border-radius:2px}

/* tarjeta lateral sticky */
.side-card{background:var(--deep);color:#dfeaf2;border-radius:var(--card-radius);padding:clamp(26px,3vw,34px);position:sticky;top:calc(var(--header-h) + 20px);overflow:hidden;}
.side-card::before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;right:-90px;top:-110px;background:radial-gradient(circle,color-mix(in srgb,var(--blue) 32%,transparent),transparent 70%);}
.side-card h3{color:#fff;font-size:22px;position:relative;}
.side-card p{color:#a9bdcd;font-size:14.5px;margin-top:10px;position:relative;}
.side-card .sc-price{font-family:var(--font-display);font-weight:700;font-size:34px;color:#fff;margin-top:18px;letter-spacing:-.02em;position:relative;}
.side-card .sc-price sup{font-size:.55em;top:-.5em;}
.side-card .sc-price span{font-size:14px;font-weight:500;color:#9fb3c4;font-family:var(--font-body);}
.side-card .btn{margin-top:18px;position:relative;}
.side-card ul{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:11px;position:relative;}
.side-card ul li{display:flex;gap:10px;align-items:center;font-size:14px;color:#dceaf3;}
.side-card ul li svg{width:18px;height:18px;color:#4ade9e;flex:none;}

/* ============================================================
   TABLAS
   ============================================================ */
.tbl-wrap{border:1px solid var(--line);border-radius:var(--card-radius);overflow:hidden;background:var(--paper);box-shadow:var(--shadow-soft);}
table.tbl{width:100%;border-collapse:collapse;font-size:15px;}
table.tbl th,table.tbl td{text-align:left;padding:16px 22px;vertical-align:top;}
table.tbl thead th{background:var(--deep);color:#fff;font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:.01em;}
table.tbl tbody tr+tr{border-top:1px solid var(--line);}
table.tbl tbody tr:nth-child(even){background:var(--bg);}
table.tbl td:first-child,table.tbl th:first-child{font-weight:600;color:var(--ink);}
table.tbl td{color:var(--muted);line-height:1.45;}
.idx-pill{display:inline-flex;align-items:center;justify-content:center;min-width:46px;padding:5px 10px;border-radius:9px;background:var(--blue-soft);color:var(--blue-ink);font-family:var(--font-display);font-weight:700;font-size:15px;}

/* ============================================================
   TRATAMIENTOS
   ============================================================ */
.treat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.tcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--card-radius);padding:26px 24px;transition:.22s;position:relative;overflow:hidden;}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);}
.tcard .tc-ic{width:48px;height:48px;border-radius:13px;background:var(--sand-soft);color:#a9762a;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.tcard .tc-ic svg{width:24px;height:24px;}
.tcard h3{font-size:18px;margin-bottom:8px;display:flex;align-items:center;gap:9px;}
.tcard .reco{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--green);background:var(--green-soft);padding:3px 9px;border-radius:999px;}
.tcard p{color:var(--muted);font-size:14.5px;line-height:1.55;}

/* ============================================================
   PROCESO (7 pasos)
   ============================================================ */
.process{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;counter-reset:p;}
.pstep{position:relative;padding-top:18px;}
.pstep::before{counter-increment:p;content:counter(p);position:absolute;top:0;left:0;font-family:var(--font-display);font-weight:700;font-size:14px;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;}
.pstep .pbar{height:2px;background:var(--line-strong);margin:16px 0 0;position:absolute;top:16px;left:40px;right:-6px;}
.pstep:last-child .pbar{display:none;}
.pstep h4{font-family:var(--font-display);font-weight:600;font-size:15px;margin:46px 0 0;letter-spacing:-.01em;line-height:1.25;}
.pstep p{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.45;}

/* franja de envío */
.ship-band{background:var(--green-soft);border:1px solid color-mix(in srgb,var(--green) 22%,transparent);border-radius:var(--card-radius);padding:24px 28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.ship-band .sb-ic{width:48px;height:48px;border-radius:13px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;}
.ship-band .sb-ic svg{width:26px;height:26px;}
.ship-band b{font-family:var(--font-display);font-size:19px;color:var(--ink);}
.ship-band p{color:var(--muted);font-size:14.5px;margin-top:2px;}
.ship-band .btn{margin-left:auto;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .pdp-grid{grid-template-columns:1fr;}
  .pdp-media{max-width:520px;}
  .split,.split.rev{grid-template-columns:1fr;}
  .side-card{position:static;}
  .treat-cards{grid-template-columns:repeat(2,1fr);}
  .process{grid-template-columns:repeat(2,1fr);gap:20px;}
  .pstep .pbar{display:none;}
  .pstep h4{margin-top:8px;}
  .pstep{padding-left:46px;padding-top:0;min-height:40px;}
  .pstep::before{top:0;}
}
@media (max-width:680px){
  .usecase-grid{grid-template-columns:1fr;}
  .include-grid{grid-template-columns:1fr;}
  .tick-list{grid-template-columns:1fr;}
  .treat-cards{grid-template-columns:1fr;}
  .process{grid-template-columns:1fr;}
  table.tbl th,table.tbl td{padding:13px 15px;font-size:14px;}
  .ship-band .btn{margin-left:0;width:100%;}
}

/* ============================================================
   WordPress / GP compatibility overrides
   ============================================================ */
.pdp-page { display: block; }

/* Eyebrow — mismo estilo que en home */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-ink);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--blue);
  border-radius: 2px;
}
.eyebrow.on-dark { color: #9fc0ff; }
.eyebrow.on-dark::before { background: #5b8cf0; }

/* Secciones */
.section { padding-block: clamp(64px, 9vw, 120px); }
.section.alt { background: var(--bg); }
.dark-sec { background: var(--deep); color: #dfeaf2; position: relative; overflow: hidden; }
.dark-sec::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  left: -200px;
  bottom: -260px;
  background: radial-gradient(circle, rgba(31,95,224,.26), transparent 68%);
}

/* sec-head */
.sec-head { max-width: 680px; margin-bottom: clamp(36px, 5vw, 56px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.04;
  color: var(--ink);
  margin-top: 16px;
}
.sec-head p { margin-top: 16px; }
.lead { color: var(--muted); font-size: clamp(17px, 2vw, 20px); line-height: 1.55; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  padding: 15px 26px; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform .18s, box-shadow .25s, background .2s, color .2s, border-color .2s;
  white-space: nowrap; line-height: 1; text-decoration: none; cursor: pointer;
}
.btn svg { width: 18px; height: 18px; transition: transform .25s; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 24px -10px rgba(31,95,224,.5); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(31,95,224,.5); color: #fff; }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { transform: translateY(-2px); background: #0a1c2b; color: #fff; }
.btn-lg { padding: 18px 32px; font-size: 17px; }
.btn-block { width: 100%; justify-content: center; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* FAQ home style */
.faq-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px,5vw,64px); align-items: start; }
.faq-aside { background: var(--bg); border-radius: var(--card-radius); padding: clamp(28px,3vw,40px); position: sticky; top: calc(var(--header-h) + 20px); }
.faq-aside h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin-bottom: 10px; color: var(--ink); letter-spacing: -.01em; }
.faq-aside p { color: var(--muted); font-size: 15px; margin-bottom: 22px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; background: none; border: 0; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(17px,2.2vw,20px);
  color: var(--ink); letter-spacing: -.01em; cursor: pointer;
}
.faq-q .ic {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center; flex: none; transition: .25s; position: relative;
}
.faq-q .ic::before, .faq-q .ic::after { content: ""; position: absolute; background: var(--ink); border-radius: 2px; transition: .25s; }
.faq-q .ic::before { width: 12px; height: 1.8px; }
.faq-q .ic::after  { width: 1.8px; height: 12px; }
.faq-item.open .faq-q .ic { background: var(--blue); border-color: var(--blue); }
.faq-item.open .faq-q .ic::before,
.faq-item.open .faq-q .ic::after { background: #fff; }
.faq-item.open .faq-q .ic::after { transform: scaleY(0); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { padding: 0 4px 24px; color: var(--muted); font-size: 15.5px; max-width: 60ch; margin: 0; }

/* CTA final */
.final-cta { padding-block: clamp(36px,5vw,60px); }
.cta-band {
  background: linear-gradient(135deg,var(--deep),#103a5e);
  border-radius: var(--r-xl); padding: clamp(40px,6vw,80px); text-align: center; color: #fff;
  position: relative; overflow: hidden;
}
.cta-band::before,.cta-band::after { content:""; position:absolute; border:1.5px solid rgba(255,255,255,.1); border-radius:50%; }
.cta-band::before { width:340px;height:340px;left:-120px;top:-150px; }
.cta-band::after  { width:240px;height:240px;right:-80px;bottom:-130px;border-color:rgba(120,170,255,.22); }
.cta-band h2 { color:#fff; font-family:var(--font-display); font-size:clamp(32px,5vw,52px); font-weight:700; letter-spacing:-.02em; position:relative; margin:0; }
.cta-band p { color:#bcd2e4; max-width:560px; margin:18px auto 0; font-size:clamp(17px,2vw,20px); position:relative; }
.cta-band .btn { margin-top:32px; position:relative; background:#fff; color:var(--deep); }
.cta-band .btn:hover { transform:translateY(-2px); color:var(--deep); }
.cta-band .micro { margin-top:18px; color:#8eaabf; font-size:13.5px; position:relative; }

/* Treat-grid para dark-sec */
.treat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:28px; }
.treat { display:flex;align-items:center;gap:11px;padding:14px 16px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.04);font-size:15px;font-weight:500;transition:.2s; }
.treat:hover { background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22); }
.treat svg { width:20px;height:20px;flex:none; }

/* ── Par note + trust grid ───────────────────────────────────── */
.pdp-pair-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--muted);
  background: var(--blue-soft);
  border-radius: var(--r-xs);
  padding: 10px 14px;
  margin: 8px 0 4px;
}

.pdp-assure--grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px 20px !important;
}

.pdp-assure--grid .a {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.a--highlight {
  background: var(--green-soft);
  border-radius: var(--r-xs);
  padding: 8px 10px;
  grid-column: 1 / -1;
}

@media (max-width: 680px) {
  .pdp-assure--grid { grid-template-columns: 1fr !important; }
}

/* ── Fix: pasos — números solapan el texto ───────────────────── */
.process {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  counter-reset: p;
}
.pstep {
  position: relative;
  padding-top: 48px !important; /* espacio suficiente para el número encima */
  padding-left: 0 !important;
}
.pstep::before {
  top: 0 !important;
  left: 0 !important;
}
.pstep h4 {
  margin-top: 8px !important; /* quitar el margin-top enorme */
  font-size: 13px;
}
.pstep p { font-size: 12px; }

@media (max-width: 1000px) {
  .process { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .pstep { padding-top: 0 !important; padding-left: 46px !important; }
  .pstep::before { top: 0; left: 0; }
  .pstep h4 { margin-top: 0 !important; }
  .pstep .pbar { display: none; }
}
@media (max-width: 680px) {
  .process { grid-template-columns: 1fr; }
}

/* ── Fix: dark-sec — texto visible sobre fondo oscuro ───────────── */
.dark-sec h2 { color: #fff !important; }
.dark-sec p, .dark-sec .lead { color: #a9bdcd !important; }
.dark-sec .eyebrow { color: #9fc0ff !important; }

/* ── Fix: CTA band — texto visible ───────────────────────────── */
.cta-band h2 { color: #fff !important; }
.cta-band p  { color: #bcd2e4 !important; }
.cta-band .micro { color: #8eaabf !important; }

/* ── Bloque "También te puede interesar" (interlinking) ──────── */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.related-card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--card-radius);padding:26px 24px;transition:.22s;text-decoration:none;}
.related-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--blue);}
.related-card .rc-ic{width:46px;height:46px;border-radius:13px;background:var(--blue-soft);color:var(--blue-ink);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.related-card .rc-ic svg{width:24px;height:24px;}
.related-card h3{font-size:18px;color:var(--ink);margin-bottom:7px;}
.related-card p{font-size:14.5px;color:var(--muted);line-height:1.5;}
.related-card .rc-go{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--blue-ink);font-weight:600;font-size:14px;}
.related-card:hover .rc-go svg{transform:translateX(3px);transition:transform .2s;}
@media(max-width:900px){.related-grid{grid-template-columns:1fr;}}

/* ── Figura de grabado de marca (ZEISS) ──────────────────────── */
.brand-fig{margin:0;border-radius:var(--card-radius);overflow:hidden;background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--shadow-soft);}
.brand-fig img{display:block;width:100%;height:auto;}
.brand-fig figcaption{padding:14px 18px;font-size:13.5px;color:var(--muted);background:var(--paper);border-top:1px solid var(--line);}
.brand-fig figcaption b{color:var(--ink);}
.brand-fig--ph{aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;color:var(--blue-ink);padding:24px;}
.brand-fig--ph svg{width:46px;height:46px;opacity:.7;}
.brand-fig--ph span{font-size:14px;color:var(--muted);max-width:32ch;}

/* ── Bloque de marca (datos de la categoría) ─────────────────── */
.brand-block{display:grid;grid-template-columns:.9fr 1.3fr;gap:clamp(28px,4vw,56px);align-items:center;}
.brand-block.brand-block--noimg{grid-template-columns:1fr;max-width:760px;}
.brand-block__media{border-radius:var(--card-radius);overflow:hidden;background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--shadow-soft);}
.brand-block__media img{display:block;width:100%;height:auto;}
.brand-block__title{font-family:var(--font-display);font-size:clamp(26px,3.4vw,40px);font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:14px 0 16px;}
.brand-block__desc{color:var(--muted);font-size:16.5px;line-height:1.65;}
.brand-block__desc p{margin-top:14px;}
.brand-block__desc p:first-child{margin-top:0;}
.brand-block__desc strong{color:var(--ink);font-weight:600;}
@media(max-width:900px){.brand-block{grid-template-columns:1fr;}}

/* ── Ficha de gafas: galería WooCommerce dentro del hero PDP ──── */
.pdp-page--gafas .pdp-media .woocommerce-product-gallery{width:100%!important;margin:0;}
.pdp-page--gafas .pdp-media .woocommerce-product-gallery__image img{border-radius:var(--card-radius);}
.pdp-page--gafas .pdp-pricebox{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.pdp-page--gafas .pdp-pricebox .cg-from{font-size:15px;font-weight:600;color:var(--muted);}
.pdp-page--gafas .pdp-pricebox .price{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4vw,42px);color:var(--ink);margin:0;display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
/* Oferta: precio antiguo pequeño y gris (tachado), precio rebajado destacado */
.pdp-page--gafas .pdp-pricebox .price del{font-size:.5em;font-weight:500;color:var(--faint);text-decoration:line-through;}
.pdp-page--gafas .pdp-pricebox .price del .woocommerce-Price-amount{color:var(--faint);}
.pdp-page--gafas .pdp-pricebox .price ins{text-decoration:none;background:none;color:var(--ink);}
.pdp-page--gafas .pdp-pricebox .price del{color:var(--faint);font-size:.6em;font-weight:500;}
.pdp-page--gafas .pdp-pricebox .price ins{text-decoration:none;}
.pdp-page--gafas .frame-specs{margin-top:0;}
.gafas-extra-images{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.gafas-thumb{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-2);padding:0;cursor:pointer;width:72px;height:72px;}
.gafas-thumb img{width:100%;height:100%;object-fit:cover;}

/* Galería propia de gafas (independiente del slider de WooCommerce) */
.cg-gal{position:relative;}
.cg-gal__main{position:relative;margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--card-radius);box-shadow:var(--shadow-soft);overflow:hidden;aspect-ratio:4/3.4;display:flex;align-items:center;justify-content:center;padding:18px;}
.cg-gal__main .cg-gal__img,.cg-gal__main img{width:100%;height:100%;object-fit:contain;display:block;}
.cg-gal__thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.cg-gal__thumb{width:72px;height:72px;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper);padding:4px;cursor:pointer;transition:.15s;}
.cg-gal__thumb img{width:100%;height:100%;object-fit:contain;}
.cg-gal__thumb:hover{border-color:var(--line-strong);}
.cg-gal__thumb.is-active{border-color:var(--blue);}
.pdp-page--gafas .pdp-badge-float{z-index:3;}

/* Variaciones + cantidad + botón añadir */
.pdp-page--gafas form.variations_form table.variations{margin:0 0 14px;}
.pdp-page--gafas form.variations_form td.label{font-weight:600;color:var(--ink);padding-right:12px;}
.pdp-page--gafas .single_add_to_cart_button{background:var(--blue)!important;color:#fff!important;border-radius:999px!important;padding:15px 28px!important;font-weight:600!important;border:0!important;}
.pdp-page--gafas .single_add_to_cart_button:hover{transform:translateY(-2px);}
.pdp-page--gafas .quantity input.qty{height:50px;border:1.5px solid var(--line-strong);border-radius:var(--r-xs);width:72px;text-align:center;font-weight:700;}
.pdp-page--gafas .woocommerce-variation-price .price{font-family:var(--font-display);font-weight:700;color:var(--ink);}

/* Swatches de variación (sustituyen al desplegable) */
.cg-swatches{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px;}
.cg-swatch-btn{border:1.5px solid var(--line-strong);background:var(--paper);color:var(--ink);border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:.15s;line-height:1;}
.cg-swatch-btn:hover{border-color:var(--blue);}
.cg-swatch-btn.is-active{background:var(--blue);border-color:var(--blue);color:#fff;}
/* Ocultar el reset feo de WC cuando ya hay swatches */
.pdp-page--gafas .variations .reset_variations{font-size:13px;}
.pdp-page--gafas table.variations,.pdp-page--gafas table.variations td,.pdp-page--gafas table.variations th{border:0;background:none;display:block;width:100%;padding:0;}
.pdp-page--gafas table.variations td.label{margin-top:8px;}

/* Especificaciones gafas (reutiliza estética de tabla) */
.frame-specs__list{display:grid;gap:0;}
.frame-spec{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line);}
.frame-spec:last-child{border-bottom:0;}
.frame-spec dt{color:var(--muted);font-size:14.5px;}
.frame-spec dd{margin:0;color:var(--ink);font-weight:600;font-size:14.5px;text-align:right;}
.frame-spec__chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.frame-spec__chips .chip{background:var(--blue-soft);color:var(--blue-ink);font-weight:600;font-size:12.5px;padding:4px 10px;border-radius:999px;}

/* Enlaces internos dentro del texto prose */
.prose a{color:var(--blue-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.prose a:hover{color:var(--blue);}

/* ── Pill-row después del h1 ─────────────────────────────────── */
.pdp-info h1 + .pill-row { margin-top: 14px; }

/* ── Tabla de compatibilidad de monturas ─────────────────────── */
.compat-tbl thead th:first-child  { background: #0e5934 !important; }
.compat-tbl thead th:last-child   { background: #7c2e00 !important; }
.compat-tbl tbody td:first-child  { color: #166534; font-weight: 600; }
.compat-tbl tbody td:last-child   { color: #92400e; }

/* ── WC form embebido en PDP ─────────────────────────────────── */
.pdp-wc-section { background: var(--bg); }
.pdp-wc-inner   { max-width: 640px; }

.wc-pdp-qty {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.wc-pdp-qty .quantity input {
  width: 72px !important;
  height: 52px !important;
  border: 1.5px solid var(--line-strong) !important;
  border-radius: var(--r-xs) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-lg) !important;
  font-weight: var(--fw-bold) !important;
  text-align: center !important;
  padding: 0 12px !important;
}

.wc-pdp-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 12px;
}

/* ── Colores blancos en secciones oscuras (override global.css !important) ── */
.side-card h2,
.side-card h3,
.side-card h4 { color: #fff !important; }

.dark-sec h1,
.dark-sec h2,
.dark-sec h3 { color: #fff !important; }

.cta-band h1,
.cta-band h2,
.cta-band h3 { color: #fff !important; }

/* Fondo oscuro en cta-band donde texto no se veía */
.cta-band .btn {
  background: #fff !important;
  color: var(--deep) !important;
}

/* ── Modal configurador ──────────────────────────────────────── */
.pdp-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}

.pdp-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.pdp-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(13,34,51,.55);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.pdp-modal__box {
  position: relative;
  background: var(--paper);
  border-radius: var(--card-radius);
  padding: clamp(28px, 5vw, 44px);
  max-width: 520px;
  width: 100%;
  box-shadow: 0 32px 80px -20px rgba(13,34,51,.4);
  transform: translateY(16px);
  transition: transform .3s var(--ease-out);
}

.pdp-modal.is-open .pdp-modal__box {
  transform: translateY(0);
}

.pdp-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.pdp-modal__close:hover { background: var(--bg-2); color: var(--ink); }

.pdp-modal__head {
  margin-bottom: 24px;
}
.pdp-modal__head h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  color: var(--ink) !important;
  margin: 8px 0 6px;
  letter-spacing: -.02em;
}
.pdp-modal__head p {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}

/* Opciones */
.pdp-modal__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pdp-modal__opt {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  background: var(--paper);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.pdp-modal__opt:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 16px -6px rgba(31,95,224,.2);
  transform: translateY(-2px);
  color: var(--ink);
}

.pdp-modal__opt--primary {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.pdp-modal__opt--whatsapp:hover {
  border-color: #25d366;
  box-shadow: 0 4px 16px -6px rgba(37,211,102,.3);
}

.pdp-opt__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pdp-opt__text {
  flex: 1;
  min-width: 0;
}
.pdp-opt__text strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}
.pdp-opt__text span {
  font-size: 13px;
  color: var(--muted);
}

.pdp-opt__arrow {
  color: var(--muted);
  flex-shrink: 0;
}
.pdp-modal__opt:hover .pdp-opt__arrow { color: var(--blue); }

/* Nota al pie */
.pdp-modal__note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.pdp-modal__note svg { color: var(--green); flex-shrink: 0; }

@media (max-width: 520px) {
  .pdp-modal__box { padding: 24px 20px; }
  .pdp-opt__icon { width: 44px; height: 44px; }
}

/* ── Sección de opiniones (PDP) ─────────────────────────────── */
.cg-rev-stars{color:#e7a93b;letter-spacing:1px;}
.cg-reviews-sec .lead .cg-rev-stars{font-size:18px;vertical-align:middle;margin-right:6px;}
.cg-rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.cg-rev{background:var(--paper);border:1px solid var(--line);border-radius:var(--card-radius);padding:20px;box-shadow:var(--shadow-soft);}
.cg-rev-top{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.cg-rev-av{width:40px;height:40px;border-radius:50%;background:var(--blue-soft);color:var(--blue-ink);font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
.cg-rev-meta{flex:1;min-width:0;line-height:1.2;}
.cg-rev-meta b{display:block;font-size:14.5px;color:var(--ink);}
.cg-rev-date{font-size:12px;color:var(--faint);text-transform:capitalize;}
.cg-rev .cg-rev-stars{font-size:14px;}
.cg-rev p{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0;}
@media(max-width:900px){.cg-rev-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.cg-rev-grid{grid-template-columns:1fr;}}

/* ════════ CG2-004 · Responsive móvil (FAQ, tablas, rejillas) ════════ */
@media (max-width: 680px) {
  .faq-wrap { grid-template-columns: 1fr !important; }
  .faq-aside { position: static !important; }
  .faq-q { font-size: 15px; }
  .split, .split.rev, .pdp-grid, .include-grid, .tick-list,
  .usecase-grid, .treat-cards, .process, .pdp-thumbs { grid-template-columns: 1fr !important; }
  .final-cta h2, .cta-band h2 { font-size: 24px; }
}
/* Las tablas anchas (gamas, comparativas) hacen scroll en vez de desbordar */
.tbl-wrap, .pdp-page .tbl-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pdp-page, .pdp-page section, .pdp-page .wrap { max-width: 100%; }

/* ============================================================
   CAPA SEO — componentes del prototipo (banda de cifras, quiz, autor)
   Solo diseño; el contenido lo inyecta inc/seo-schema.php.
   ============================================================ */
.stats-band{background:var(--deep,#0b2740);color:#dfeaf2;border-radius:var(--card-radius,24px);padding:clamp(24px,3vw,34px);position:relative;overflow:hidden;margin:26px 0}
.stats-band::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-120px;top:-160px;background:radial-gradient(circle,color-mix(in srgb,var(--blue,#00c4cc) 26%,transparent),transparent 68%)}
.stats-row{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative}
.stats-band .stat{display:flex;flex-direction:column;gap:3px}
.stats-band .stat b{font-family:var(--font-display,inherit);font-weight:700;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.02em;color:#fff;line-height:1.08}
.stats-band .stat small{color:#a9bdcd;font-size:13px;line-height:1.35}
.stats-band .stat b.ic{display:inline-flex;align-items:center;gap:6px}
.stats-band .stat b.ic svg{width:18px;height:18px;color:#6fd3a3;flex:none}
.stats-def{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);color:#c4d6e4;font-size:15.5px;line-height:1.55;position:relative;max-width:92ch}
.stats-def b{color:#fff;font-weight:600}
@media(max-width:880px){.stats-row{grid-template-columns:repeat(2,1fr);gap:20px 16px}}
@media(max-width:480px){.stats-row{grid-template-columns:1fr 1fr}}

.cg-citable{font-size:clamp(17px,1.6vw,19px);line-height:1.6;color:var(--ink,#0d2233);font-weight:500;margin:0 0 6px}

.author-credit{display:flex;align-items:center;gap:14px;background:var(--bg,#f4f8fb);border:1px solid var(--line,#e4eef2);border-radius:18px;padding:16px 20px;max-width:760px;margin:0}
.author-credit .av{width:46px;height:46px;border-radius:50%;background:var(--blue,#00c4cc);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex:none}
.author-credit p{font-size:13.5px;color:var(--muted,#5c6f7c);line-height:1.5;margin:0}
.author-credit p b{color:var(--ink,#0d2233);font-weight:600}

.quiz{background:var(--paper,#fff);border:1px solid var(--line,#e4eef2);border-radius:var(--card-radius,24px);padding:clamp(24px,3vw,34px);box-shadow:0 18px 50px -34px rgba(13,34,51,.35);max-width:620px;margin:0 auto}
.quiz h3{font-size:21px;margin:0 0 6px}
.quiz .q-sub{color:var(--muted,#5c6f7c);font-size:14.5px;margin-bottom:22px}
.quiz .q-step{font-size:15.5px;font-weight:600;color:var(--ink,#0d2233);margin-bottom:14px;display:flex;gap:8px}
.quiz .q-step span{color:var(--blue,#00c4cc);font-weight:700}
.quiz .q-btns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.quiz .q-btns button{flex:1;min-width:78px;padding:13px;border-radius:13px;border:1.5px solid var(--line-strong,#cdd9e0);background:var(--paper,#fff);font-weight:600;font-size:15px;color:var(--ink,#0d2233);cursor:pointer;transition:.16s}
.quiz .q-btns button:hover{border-color:var(--blue,#00c4cc);color:var(--blue,#00c4cc)}
.quiz .q-result{display:none;align-items:flex-start;gap:13px;padding:18px;border-radius:14px;background:var(--green-soft,#e7f8ee);margin-top:6px;font-size:15px}
.quiz .q-result.show{display:flex}
.quiz .q-result b{display:block;margin-bottom:3px;font-family:var(--font-display,"Schibsted Grotesk",sans-serif);font-size:16px;color:#0d2233}
.quiz .q-result p{font-size:14px;color:#5c6f7c;margin:0}
.quiz .q-result--no{background:#f4ecdd}
.quiz .q-result .btn{margin-top:12px;display:inline-flex;align-items:center;gap:8px}
.quiz .q-result .btn svg{width:18px;height:18px}
.quiz .q-result p{font-size:14px;color:var(--muted,#5c6f7c);margin:0}
.quiz .q-result a{color:#0f8b91;font-weight:700}

/* Buy-box del configurador de lentes: oculta el selector de cantidad y deja el
   botón del plugin (.cg-open-configurator) a ancho completo. Lo usan las fichas
   zeiss/ocupacionales/bifocales/sol/progresivos/varilux/monofocales. */
.pdp-cta--wc .quantity{display:none}
.pdp-cta--wc .button,
.pdp-cta--wc .cg-open-configurator{width:100%;justify-content:center;margin:0}

/* Cabecera de tabla: la 1.ª columna heredaba el color oscuro de td/th:first-child y quedaba invisible sobre el fondo oscuro del thead. */
table.tbl thead th:first-child{color:#fff;}