/* ──────────────── Página de detalle de ordenador (Kit Digital) ──────────────── */

/* Empuja contenido por debajo del nav fijo (topbar + nav 64px + air) */
/* Ancho unificado: secciones alineadas al contenedor .w (1440px) */
.od-highlights-grid{max-width:none}
.od-highlights-head{max-width:none}
.od-specs-head{max-width:none}
.od-product-grid .od-media{margin:0}
.od-product-grid .od-gallery{margin-left:0; margin-right:0}
.od-related-sec .od-related-head{
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:flex-end; justify-content:space-between;
  text-align:left; max-width:none; margin-bottom:2rem;
}
.od-related-sec .od-related-head h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.4rem, 2.4vw, 1.9rem);
  line-height:1.2; letter-spacing:-.02em;
  color:var(--bk);
}
.od-related-sec .od-related-head h2 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--p)}
.od-related-sec .od-related-head .lnk{
  font-family:var(--display); font-weight:600;
  color:var(--p); font-size:.9rem;
  display:inline-flex; align-items:center; gap:.25rem;
  white-space:nowrap;
}
.od-related-sec .od-related-head .lnk:hover{text-decoration:underline}
.od-related-sec .pts-card.is-current{border-color:var(--p); box-shadow:0 0 0 1px rgba(109,22,223,.15), 0 16px 36px -20px rgba(46,16,101,.18)}
.od-related-sec .pts-details.is-static{
  display:block; text-align:center; padding:.75rem 1rem;
  font-family:var(--display); font-weight:600; font-size:.88rem;
  color:var(--p); background:var(--p-soft); border-radius:999px;
  cursor:default;
}
.od-breadcrumb{
  padding:clamp(5.5rem, 9vw, 7rem) 0 clamp(1.75rem, 3.5vw, 2.75rem);
  font-size:.82rem; color:var(--g6);
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  position:relative; z-index:2;
}
.od-breadcrumb a{color:var(--g7); transition:color .15s}
.od-breadcrumb a:hover{color:var(--p)}
.od-breadcrumb .sep{opacity:.45}
.od-breadcrumb .current{color:var(--bk); font-weight:600}

/* ── Banda superior unificada (breadcrumb + hero + producto) ── */
.od-page-top{
  position:relative;
  background:var(--bg);
  padding-bottom:.5rem;
}
.od-page-top::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 90% 55% at 12% -5%, rgba(109,22,223,.08), transparent 58%),
    radial-gradient(ellipse 70% 45% at 98% 8%, rgba(207,255,101,.07), transparent 52%),
    linear-gradient(180deg, var(--bg) 0%, rgba(241,234,255,.45) 42%, var(--bg) 100%);
}
.od-page-top > *{position:relative; z-index:1}

/* ── Hero intro (título + formulario Kit Digital) ── */
.od-hero-intro{padding:1.25rem 0 2rem; position:relative; overflow:visible; background:transparent}
.od-hero-intro::before{display:none}
.od-hero-intro-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr 1fr; gap:2.5rem;
  align-items:center;
}
@media(max-width:880px){.od-hero-intro-grid{grid-template-columns:1fr; gap:2rem}}
.od-hero-intro-text h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2rem, 3.5vw, 2.85rem);
  line-height:1.1; letter-spacing:-.02em;
  color:var(--bk); margin:0 0 .8rem;
}
.od-hero-intro-text h1 em,
.od-hero-intro-text h1 .resaltado{
  font-family:var(--serif); font-style:italic; font-weight:400; color:var(--p);
}
.od-hero-intro-text > p.lead{
  font-size:1.02rem; line-height:1.55;
  color:var(--g7); margin:0 0 1.2rem;
  max-width:46ch;
}
.od-hero-form-card{
  background:var(--wh); border:1px solid var(--g2); border-radius:22px;
  padding:clamp(1.5rem, 2.5vw, 2rem);
  box-shadow:0 24px 48px -28px rgba(46,16,101,.18);
}
.od-hero-form-card .eyebrow{
  display:inline-block; color:var(--p);
  font-family:var(--display); font-weight:700;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:.65rem;
}
.od-hero-form-card .od-hero-form-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.15rem, 2vw, 1.45rem);
  line-height:1.2; letter-spacing:-.02em;
  color:var(--bk); margin:0 0 1.1rem;
}
.od-hero-form-card .btn{width:100%; justify-content:center}
.od-hero-form-card .od-solicita-mini{margin:.65rem 0 0; font-size:.78rem; color:var(--g6)}
.od-hero-mobile-cta{display:none; margin-top:.5rem}
@media(max-width:880px){
  .od-hero-form-card{display:none}
  .od-hero-mobile-cta{display:inline-flex}
}

/* ── Bloque producto (galería + ficha) ── */
.od-product{padding:0 0 2.5rem; background:transparent}
.od-product-grid{
  display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr); gap:clamp(1.25rem, 3vw, 2.5rem);
  align-items:start;
}
@media(max-width:880px){.od-product-grid{grid-template-columns:1fr; gap:1.75rem; align-items:start}}
.od-product-grid .od-media-col{gap:.45rem; width:100%; max-width:100%; min-width:0}
.od-product-grid .od-product-info{min-width:0}
.od-product-grid .od-media{
  aspect-ratio:1/1;
  width:100%;
  max-width:100%;
  margin:0;
  padding:1.15rem;
  border-radius:22px;
  box-shadow:0 20px 44px -28px rgba(46,16,101,.16);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.od-product-grid .od-media img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain;
  filter:drop-shadow(0 16px 28px rgba(46,16,101,.16));
}
.od-product-grid .od-gallery{
  width:100%;
  max-width:100%;
  margin-left:0; margin-right:0;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.35rem;
  margin-top:0;
}
.od-product-grid .od-gallery-thumb{
  width:100%; aspect-ratio:1; min-width:0; min-height:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  padding:.35rem;
  border-radius:8px;
  box-sizing:border-box;
}
.od-product-grid .od-gallery-thumb img{
  width:auto; height:auto;
  max-width:100%; max-height:100%;
  object-fit:contain;
}
.od-product-title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.45rem, 2.2vw, 2rem);
  line-height:1.15; letter-spacing:-.02em;
  color:var(--bk); margin:0 0 .65rem;
}
/* Brand name in product H1 (e.g. "Dell", "Lenovo") gets purple italic
   serif treatment, matching the live design. */
.od-product-title .serif-it{color:var(--p)}
.od-product-rating{
  display:flex; align-items:center; gap:.45rem;
  margin:0 0 1rem;
}
.od-product-rating .od-stars{
  display:inline-flex; align-items:center; gap:1px;
}
.od-product-rating .od-stars svg{
  width:17px; height:17px; fill:#FF6900;
}
.od-rating-link{
  display:inline-flex; align-items:center; color:var(--p);
  opacity:.9; transition:opacity .2s;
}
.od-rating-link:hover{opacity:1}
.od-rating-link svg{width:13px; height:13px; fill:currentColor}
/* Short positioning lead — sits between H1 and the long .od-product-desc.
   Slightly larger / less muted than the long-form description so it reads
   as a confident one-liner. */
.od-product-info .od-product-lead{
  color:var(--bk); font-size:1.02rem; line-height:1.55;
  font-weight:500; margin:0 0 .75rem;
}
.od-product-info .od-product-desc{
  color:var(--g7); font-size:.95rem; line-height:1.6; margin:0 0 .85rem;
}
/* Trustpilot rating block (ORBIDI-wide social proof, replaces the old
   generic 5-of-5 SVG bar). Static HTML/CSS — no third-party script. */
.od-trustpilot{
  display:inline-flex; align-items:center; flex-wrap:wrap;
  gap:.55rem .7rem; margin:0 0 1rem;
  font-size:.85rem; line-height:1.2;
}
.od-trustpilot-label{
  font-weight:700; color:var(--bk); font-size:.9rem;
}
.od-trustpilot-stars{
  display:inline-flex; gap:2px;
}
.od-trustpilot-stars .od-tp-tile{
  width:18px; height:18px; background:#00B67A;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:1px;
}
.od-trustpilot-stars .od-tp-tile.is-half{
  background:linear-gradient(90deg, #00B67A 50%, #d6e3df 50%);
}
.od-trustpilot-stars .od-tp-tile svg{
  width:14px; height:14px; fill:#fff;
}
.od-trustpilot-meta{
  color:var(--g7); display:inline-flex; align-items:center; gap:.35rem;
  text-decoration:none;
}
.od-trustpilot-meta:hover{color:var(--bk)}
.od-trustpilot-meta .od-tp-logo{
  display:inline-flex; align-items:center; gap:.25rem;
  font-weight:700; color:var(--bk);
}
.od-trustpilot-meta .od-tp-logo svg{
  width:14px; height:14px; fill:#00B67A;
}
.od-product-info .od-keyspecs-title{
  font-family:var(--display); font-weight:700;
  font-size:.95rem; color:var(--bk);
  margin:1.35rem 0 .75rem;
}
.od-product-info .od-keyspecs{margin-top:0}
.od-price-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.2rem;
}
.od-price-row .price-block{display:flex; align-items:baseline; gap:.6rem}
.od-price-row .price-old{
  font-size:.95rem; text-decoration:line-through;
  color:var(--g6); font-family:var(--display); font-weight:500;
}
.od-price-row .price-now{
  font-family:var(--display); font-weight:800; letter-spacing:-.02em;
  font-size:2rem; color:var(--p);
}

/* Banner Kit Digital: solo móvil/tablet (como orbidi elementor-hidden-desktop) */
.od-solicita--mobile-only{display:none}
@media(max-width:1024px){
  .od-solicita--mobile-only{display:block}
}

/* ── Hero legacy (mantener por si otras páginas lo usan) ── */
.od-hero{padding:2rem 0 4rem; position:relative; overflow:hidden}
.od-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(circle at 8% 0%, rgba(109,22,223,.05), transparent 55%),
    radial-gradient(circle at 100% 90%, rgba(207,255,101,.07), transparent 55%);
}
.od-hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.1fr 1fr; gap:3rem;
  align-items:center;
}
@media(max-width:880px){.od-hero-grid{grid-template-columns:1fr; gap:2rem}}

.od-media-col{display:flex; flex-direction:column; gap:1rem; min-width:0}

.od-media{
  position:relative; aspect-ratio:1/1; max-width:520px; margin:0 auto;
  border-radius:28px;
  background:linear-gradient(180deg, #FAFAFC 0%, #F4F4F8 100%);
  border:1px solid var(--g2);
  display:flex; align-items:center; justify-content:center;
  padding:2rem; box-sizing:border-box;
  box-shadow:0 30px 60px -30px rgba(46,16,101,.18);
  overflow:hidden;
}
.od-media::before{
  content:""; position:absolute; inset:auto 0 0 0; height:55%;
  background:radial-gradient(ellipse at center, rgba(109,22,223,.06), transparent 60%);
  pointer-events:none;
}
.od-media img{
  position:relative; z-index:1;
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain;
  filter:drop-shadow(0 30px 40px rgba(46,16,101,.2));
}
.od-media-badges{
  position:absolute; top:1rem; left:1rem; right:1rem;
  display:flex; flex-wrap:wrap; gap:.35rem; z-index:2;
}

.od-hero-info > .od-brand{
  font-family:var(--display); font-weight:600; color:var(--p);
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:.9rem; display:inline-flex; align-items:center; gap:.45rem;
  padding:.32rem .75rem; border-radius:999px;
  background:var(--p-soft); border:1px solid #E9D5FF;
}
.od-hero-info > .od-brand::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--p);
}
.od-hero-info h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2rem, 3.5vw, 2.85rem);
  line-height:1.1; letter-spacing:-.02em;
  color:var(--bk); margin:0 0 .8rem;
}
.od-hero-info h1 em{
  font-family:var(--serif); font-style:italic; font-weight:400; color:var(--p);
}
.od-hero-info > p.lead{
  font-size:1.02rem; line-height:1.55;
  color:var(--g7); margin:0 0 1.4rem;
  max-width:46ch;
}

.od-tags{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.4rem}
.od-tag{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.32rem .7rem; border-radius:999px;
  font-family:var(--display); font-weight:600;
  font-size:.72rem; letter-spacing:.02em;
  background:var(--g1); color:var(--bk);
  border:1px solid var(--g2);
  line-height:1.2;
}
.od-tag svg{width:12px; height:12px; flex-shrink:0}
.od-tag.is-bestseller{background:#FFF1E6; color:#C2410C; border-color:#FED7AA}
.od-tag.is-fast{background:#FEF3C7; color:#A16207; border-color:#FDE68A}
.od-tag.is-touch{background:#EDE9FE; color:#5B21B6; border-color:#DDD6FE}
.od-tag.is-aio{background:#E0F2FE; color:#075985; border-color:#BAE6FD}
.od-tag.is-light{background:#F0FDF4; color:#15803D; border-color:#BBF7D0}
.od-tag.is-deal{background:#FCE7F3; color:#9D174D; border-color:#FBCFE8}
.od-tag.is-kit{background:linear-gradient(135deg,#CFFF65,#B8EE3F); color:#1A0B2E; border-color:#A3D532}

.od-keyspecs{
  display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem .8rem;
  padding:1rem 1.1rem; margin:0 0 1.5rem;
  background:var(--wh); border:1px solid var(--g2); border-radius:14px;
  list-style:none;
}
.od-keyspecs li{
  font-size:.83rem; color:var(--g7); line-height:1.4;
  display:flex; gap:.5rem; align-items:flex-start;
}
.od-keyspecs li b{color:var(--bk); font-weight:600}
.od-keyspec-ico{
  flex-shrink:0; width:20px; height:20px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#A585DB; margin-top:.05rem;
}
.od-keyspec-ico svg{width:20px; height:20px; display:block}
@media(max-width:520px){.od-keyspecs{grid-template-columns:1fr}}

.od-price-card{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.2rem;
  padding:1.1rem 1.3rem;
  background:linear-gradient(135deg, #1A0B2E 0%, #2E1065 50%, #4C1D95 100%);
  color:#fff; border-radius:16px;
  box-shadow:0 20px 40px -18px rgba(46,16,101,.45);
}
.od-price-card .price-block{display:flex; align-items:baseline; gap:.6rem; flex:1; min-width:200px}
.od-price-card .price-old{
  font-size:.95rem; text-decoration:line-through;
  color:rgba(255,255,255,.55); font-family:var(--display); font-weight:500;
}
.od-price-card .price-now{
  font-family:var(--display); font-weight:800; letter-spacing:-.02em;
  font-size:2.1rem; color:#CFFF65;
}
.od-price-card .price-pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.32rem .7rem; border-radius:999px;
  background:rgba(207,255,101,.16); color:#CFFF65;
  font-family:var(--display); font-weight:700;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid rgba(207,255,101,.3);
}
.od-price-card .btn{flex-shrink:0}

.od-ctas{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem}

/* ── Highlights (3 columnas) ── */
.od-highlights{padding:4rem 0; background:linear-gradient(180deg, var(--wh) 0%, var(--g1) 100%)}
.od-highlights.od-tab-panel,
.od-specs-sec.od-tab-panel{padding:0; background:transparent}
.od-tabs-block .od-tab-panel > .w{padding-top:1.5rem; padding-bottom:2.5rem}
.od-tabs-block .od-video.od-tab-panel{padding:0; background:transparent}
.od-tabs-block .od-video.od-tab-panel > .w{padding-top:1.5rem; padding-bottom:2.5rem}
.od-ventajas-head{
  font-size:clamp(1.4rem,2.2vw,1.85rem);
  line-height:1.2;letter-spacing:-.02em;
  margin:0 0 1.5rem;color:var(--bk,#0A0A0F);
  text-align:left;font-weight:600;
}

/* ── Características: filas texto + imagen (alternadas) ── */
.od-feature-rows{display:flex; flex-direction:column; gap:clamp(1.5rem, 3vw, 2.25rem)}
.od-feature-row{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.25rem, 2.5vw, 2rem);
  align-items:center;
}
.od-feature-row--reverse .od-feature-copy{order:2}
.od-feature-row--reverse .od-feature-media{order:1}
.od-feature-copy h3{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.15rem, 1.8vw, 1.35rem);
  line-height:1.25; letter-spacing:-.02em;
  color:var(--bk); margin:0 0 .65rem;
}
.od-feature-copy p{
  font-size:.95rem; line-height:1.6; color:var(--g7); margin:0;
}
.od-feature-media{
  border-radius:20px; overflow:hidden;
  background:var(--wh); border:1px solid var(--g2);
  box-shadow:0 20px 44px -28px rgba(46,16,101,.14);
  display:flex; align-items:center; justify-content:center;
  max-height:clamp(11rem, 30vw, 16.5rem);
  padding:clamp(.5rem, 1.5vw, .85rem);
}
.od-feature-media img{
  display:block; width:100%; height:auto;
  max-height:clamp(10rem, 28vw, 15rem);
  object-fit:contain; object-position:center;
}
@media(max-width:880px){
  .od-feature-row,
  .od-feature-row--reverse{grid-template-columns:1fr}
  .od-feature-row--reverse .od-feature-copy,
  .od-feature-row--reverse .od-feature-media{order:unset}
}

.od-highlights--plain .od-highlights-grid{margin-top:0}
.od-tab-lead{
  color:var(--g7); font-size:1rem; line-height:1.6;
  margin:0 0 1.25rem;
}
.od-tab-panel .od-specs-head{margin-bottom:1.25rem}
.od-tab-panel .od-specs-head h2{margin:0}
.od-highlights-head{text-align:center; max-width:42rem; margin:0 auto 2.5rem}
.od-highlights-head .eyebrow{color:var(--p)}
.od-highlights-head h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.7rem, 2.6vw, 2.2rem);
  line-height:1.15; letter-spacing:-.02em;
  margin:.6rem 0 .7rem; color:var(--bk);
}
.od-highlights-head h2 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--p)}
.od-highlights-head p{color:var(--g7); font-size:1rem; line-height:1.55; margin:0}
.od-highlights-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;
  max-width:none; margin:0;
}
@media(max-width:880px){.od-highlights-grid{grid-template-columns:1fr; max-width:none}}
.od-hl{
  background:var(--wh); border:1px solid var(--g2); border-radius:18px;
  padding:1.6rem 1.4rem;
  display:flex; flex-direction:column; gap:.7rem;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.od-hl:hover{transform:translateY(-3px); box-shadow:0 20px 40px -20px rgba(46,16,101,.16); border-color:var(--g3)}
.od-hl-ico{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg, var(--p-soft) 0%, #fff 100%);
  border:1px solid var(--g2);
  display:grid; place-items:center; color:var(--p);
  flex-shrink:0;
}
.od-hl-ico svg{width:22px; height:22px}
.od-hl h3{
  font-family:var(--display); font-weight:700;
  font-size:1.02rem; color:var(--bk); margin:0;
  line-height:1.25;
}
.od-hl p{font-size:.9rem; line-height:1.5; color:var(--g7); margin:0}

/* ── Specs table ── */
.od-specs-sec{padding:4rem 0}
.od-specs-head{margin-bottom:2rem; max-width:none}
.od-specs-head .eyebrow{color:var(--p)}
.od-specs-head h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.7rem, 2.6vw, 2.2rem);
  line-height:1.15; letter-spacing:-.02em;
  margin:.6rem 0 0; color:var(--bk);
}
.od-specs-head h2 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--p)}
.od-specs-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--wh);
  border:1px solid var(--g2); border-radius:18px;
  overflow:hidden;
}
.od-specs-table tr + tr td, .od-specs-table tr + tr th{
  border-top:1px solid var(--g2);
}
.od-specs-table th, .od-specs-table td{
  padding:.95rem 1.1rem; text-align:left;
  font-size:.9rem; line-height:1.5; vertical-align:top;
}
.od-specs-table th{
  background:var(--g1); width:34%;
  font-family:var(--display); font-weight:600;
  color:var(--bk); white-space:normal;
}
.od-specs-table td{color:var(--g7)}
.od-specs-table td b, .od-specs-table td strong{color:var(--bk); font-weight:600}
@media(max-width:560px){
  .od-specs-table th, .od-specs-table td{padding:.8rem .9rem; font-size:.85rem}
  .od-specs-table th{width:42%}
}

/* ── Why ORBIDI ── */
.od-why{
  padding:4rem 0;
  background:linear-gradient(180deg, var(--g1) 0%, var(--wh) 100%);
}
.od-why-card{
  background:var(--wh);
  border:1px solid var(--g2); border-radius:22px;
  padding:clamp(1.75rem, 3vw, 2.75rem);
  display:grid; grid-template-columns:1fr 1.2fr; gap:2rem;
  align-items:center;
}
@media(max-width:840px){.od-why-card{grid-template-columns:1fr; gap:1.5rem}}
.od-why-text .eyebrow{color:var(--p)}
.od-why-text h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.6rem, 2.4vw, 2rem);
  line-height:1.15; letter-spacing:-.02em;
  margin:.55rem 0 .7rem; color:var(--bk);
}
.od-why-text h2 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--p)}
.od-why-text p{color:var(--g7); font-size:.98rem; line-height:1.6; margin:0 0 1.2rem}
.od-why-list{list-style:none; padding:0; margin:0 0 1.4rem; display:flex; flex-direction:column; gap:.6rem}
.od-why-list li{
  display:flex; gap:.55rem; align-items:flex-start;
  font-size:.92rem; color:var(--g7); line-height:1.5;
}
.od-why-list li::before{
  content:"✓"; flex-shrink:0; width:18px; height:18px;
  background:var(--p-soft); color:var(--p);
  border-radius:50%; display:grid; place-items:center;
  font-size:.7rem; font-weight:800; margin-top:.15rem;
}
.od-why-aside{
  position:relative;
  padding:1.5rem;
  background:linear-gradient(135deg,#F0FDF4 0%,#DCFCE7 100%);
  border:1px solid #86EFAC; border-radius:18px;
  display:flex; flex-direction:column; gap:.6rem;
  text-align:center;
}
.od-why-aside .badge-free{
  align-self:center;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .75rem; border-radius:999px;
  background:#15803D; color:#fff;
  font-family:var(--display); font-weight:700;
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
}
.od-why-aside h3{
  font-family:var(--display); font-weight:700;
  font-size:1.4rem; color:#14532D; margin:.2rem 0 0; line-height:1.2;
}
.od-why-aside p{color:#15532E; font-size:.92rem; line-height:1.5; margin:0}
.od-why-aside .btn{margin-top:.4rem; align-self:center}

/* ── Related models ── */
.od-related{padding:4rem 0; background:var(--g1)}
.od-related-head{
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:flex-end; justify-content:space-between;
  margin-bottom:1.75rem;
}
.od-related-head h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.4rem, 2.4vw, 1.9rem);
  line-height:1.2; letter-spacing:-.02em;
  margin:0; color:var(--bk);
}
.od-related-head h2 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--p)}
.od-related-head .lnk{
  font-family:var(--display); font-weight:600;
  color:var(--p); font-size:.9rem;
  display:inline-flex; align-items:center; gap:.25rem;
}
.od-related-head .lnk:hover{text-decoration:underline}

.od-related-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
}
@media(max-width:1080px){.od-related-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:840px){.od-related-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.od-related-grid{grid-template-columns:1fr}}

/* Reusa estilos de .pts-card de kit-digital.css; aquí ajustes opcionales */
.od-related-grid .pts-card{margin:0}

/* ── CTA final ── */
.od-cta-final{padding:5rem 0}
.od-cta-card{
  position:relative; overflow:hidden;
  border-radius:28px;
  background:linear-gradient(135deg, #1A0B2E 0%, #2E1065 50%, #4C1D95 100%);
  color:#fff; text-align:center;
  padding:clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 3rem);
  box-shadow:0 32px 70px -28px rgba(46,16,101,.45);
}
.od-cta-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(207,255,101,.18), transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(168,85,247,.35), transparent 60%);
}
.od-cta-card > *{position:relative; z-index:1}
.od-cta-card .eyebrow{
  display:inline-block; color:#CFFF65;
  background:rgba(207,255,101,.12); border:1px solid rgba(207,255,101,.3);
  padding:.4rem .85rem; border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:1rem;
}
.od-cta-card h2,
.od-cta-card .od-cta-title{
  display:block;
  color:#fff;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.9rem, 3.4vw, 2.6rem);
  line-height:1.15; letter-spacing:-.02em;
  margin:0 0 .85rem;
}
.od-cta-card h2 em,
.od-cta-card .od-cta-title em{font-family:var(--serif); font-style:italic; font-weight:400; color:#CFFF65}
.od-cta-card p{color:rgba(255,255,255,.78); font-size:1rem; line-height:1.55; margin:0 auto 1.5rem; max-width:46rem}
.od-cta-card .ctas{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center}

/* ──────────────── Galería de imágenes (placeholders) ──────────────── */
.od-gallery{
  margin-top:1rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem;
  max-width:520px; margin-left:auto; margin-right:auto;
}
.od-gallery-thumb{
  aspect-ratio:1/1; border-radius:12px;
  background:linear-gradient(180deg, #FAFAFC 0%, #F4F4F8 100%);
  border:1px solid var(--g2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:.5rem; box-sizing:border-box;
  cursor:pointer; transition:transform .2s var(--ease), border-color .2s, box-shadow .2s;
  position:relative;
}
.od-gallery-thumb:hover{transform:translateY(-2px); border-color:var(--p); box-shadow:0 12px 24px -14px rgba(46,16,101,.25)}
.od-gallery-thumb img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.od-gallery-thumb.is-empty{
  color:var(--g5); font-size:.65rem; font-family:var(--display);
  text-align:center; line-height:1.3;
}
.od-gallery-thumb.is-empty::before{
  content:""; width:24px; height:24px;
  background:var(--g2); border-radius:6px; margin-bottom:.3rem;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='8.5' cy='8.5' r='1.5'/><path d='M21 15l-5-5L5 21'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='8.5' cy='8.5' r='1.5'/><path d='M21 15l-5-5L5 21'/></svg>") center/contain no-repeat;
}
.od-gallery-thumb.is-empty{display:flex; flex-direction:column}
.od-gallery-thumb.is-active{border-color:var(--p); border-width:2px}

/* ──────────────── Descripción ampliada (debajo del hero) ──────────────── */
.od-overview{padding:3.5rem 0 0}
.od-overview-card{
  background:var(--wh); border:1px solid var(--g2); border-radius:22px;
  padding:clamp(1.75rem, 3vw, 2.5rem);
  display:grid; grid-template-columns:1fr 1.4fr; gap:2rem;
  align-items:center;
  box-shadow:0 18px 40px -28px rgba(46,16,101,.15);
}
@media(max-width:840px){.od-overview-card{grid-template-columns:1fr; gap:1.4rem}}
.od-overview-eyebrow{
  display:inline-block; color:var(--p);
  background:var(--p-soft); border:1px solid #E9D5FF;
  font-family:var(--display); font-weight:600;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.32rem .7rem; border-radius:999px; margin-bottom:.7rem;
}
.od-overview-card h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.5rem, 2.4vw, 2rem);
  line-height:1.15; letter-spacing:-.02em;
  color:var(--bk); margin:0 0 .5rem;
}
.od-overview-card h2 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--p)}
.od-overview-card p{color:var(--g7); font-size:1rem; line-height:1.6; margin:0}

/* ──────────────── Asesoría tecnológica ──────────────── */
.od-asesoria{padding:4rem 0; background:linear-gradient(180deg, var(--wh) 0%, var(--g1) 100%)}
.od-asesoria-card{
  display:grid; grid-template-columns:1fr 1fr; gap:2.5rem;
  align-items:center;
  background:var(--wh); border:1px solid var(--g2); border-radius:24px;
  padding:clamp(2rem, 3.5vw, 3rem);
  position:relative; overflow:hidden;
}
.od-asesoria-card::before{
  content:""; position:absolute; inset:auto -10% -40% auto;
  width:60%; height:120%;
  background:radial-gradient(ellipse, rgba(109,22,223,.08), transparent 60%);
  pointer-events:none;
}
@media(max-width:840px){.od-asesoria-card{grid-template-columns:1fr; gap:1.5rem}}
.od-asesoria-text{position:relative; z-index:1}
.od-asesoria-text .eyebrow{color:var(--p)}
.od-asesoria-text h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.7rem, 2.6vw, 2.2rem);
  line-height:1.15; letter-spacing:-.02em;
  color:var(--bk); margin:.6rem 0 .7rem;
}
.od-asesoria-text h2 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--p)}
.od-asesoria-text p{color:var(--g7); font-size:1rem; line-height:1.6; margin:0 0 1.3rem}
.od-asesoria-visual{
  position:relative; z-index:1;
  aspect-ratio:4/3; border-radius:18px;
  background:linear-gradient(135deg, var(--p-soft) 0%, #fff 100%);
  border:1px dashed var(--g3);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:.5rem;
  color:var(--g6); font-size:.78rem; font-family:var(--display); text-align:center;
  padding:1rem;
}
.od-asesoria-visual svg{width:42px; height:42px; opacity:.55}
.od-asesoria-visual img{max-width:100%; max-height:100%; object-fit:contain; border-radius:14px}

/* ──────────────── Banner "Solicita el Kit Digital + Ordenador" ──────────────── */
.od-solicita{padding:3rem 0}
.od-solicita-card{
  position:relative; overflow:hidden;
  border-radius:24px;
  background:linear-gradient(135deg, #1A0B2E 0%, #2E1065 50%, #4C1D95 100%);
  color:#fff;
  padding:clamp(2rem, 3.5vw, 2.75rem) clamp(1.25rem, 3vw, 2.5rem);
  display:grid; grid-template-columns:1.4fr 1fr; gap:2rem;
  align-items:center;
  box-shadow:0 24px 52px -24px rgba(46,16,101,.45);
}
.od-solicita-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 50% 60% at 100% 0%, rgba(207,255,101,.18), transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(168,85,247,.28), transparent 60%);
}
@media(max-width:840px){.od-solicita-card{grid-template-columns:1fr; gap:1.5rem}}
.od-solicita-card > *{position:relative; z-index:1}
.od-solicita-card .eyebrow{
  display:inline-block; color:#CFFF65;
  background:rgba(207,255,101,.12); border:1px solid rgba(207,255,101,.3);
  padding:.35rem .8rem; border-radius:999px;
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:.85rem;
}
.od-solicita-card h2{
  font-family:var(--display); font-weight:600; color:#fff;
  font-size:clamp(1.6rem, 2.6vw, 2.1rem); line-height:1.15;
  letter-spacing:-.02em; margin:0 0 .7rem;
}
.od-solicita-card h2 em{font-family:var(--serif); font-style:italic; font-weight:400; color:#CFFF65}
.od-solicita-card p{color:rgba(255,255,255,.78); font-size:.95rem; line-height:1.5; margin:0}
.od-solicita-action{display:flex; flex-direction:column; gap:.6rem; align-items:flex-start}
@media(max-width:840px){.od-solicita-action{align-items:stretch}}
.od-solicita-action .btn{width:100%; max-width:280px; justify-content:center}
.od-solicita-mini{font-size:.78rem; color:rgba(255,255,255,.6); margin:0}

/* ──────────────── Banner "¿No sabes qué ordenador elegir?" ──────────────── */
.od-nosabes{padding:3rem 0 4rem}
.od-solicita--after-specs{padding-top:2rem}
.od-nosabes-card{
  background:linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  border:1px solid #86EFAC;
  border-radius:22px;
  padding:clamp(1.5rem, 3vw, 2.25rem);
  display:grid; grid-template-columns:auto 1fr auto; gap:1.5rem;
  align-items:center;
  box-shadow:0 14px 32px -20px rgba(22,163,74,.25);
}
@media(max-width:760px){.od-nosabes-card{grid-template-columns:1fr; text-align:center}}
.od-nosabes-ico{
  width:60px; height:60px; border-radius:16px;
  background:#15803D; color:#fff;
  display:grid; place-items:center; flex-shrink:0;
  box-shadow:0 8px 18px -8px rgba(22,163,74,.4);
}
@media(max-width:760px){.od-nosabes-ico{justify-self:center}}
.od-nosabes-ico svg{width:28px; height:28px}
.od-nosabes-text{min-width:0}
.od-nosabes-text h3{
  font-family:var(--display); font-weight:700;
  font-size:1.2rem; line-height:1.25; color:#14532D;
  margin:0 0 .35rem;
}
.od-nosabes-text p{color:#15532E; font-size:.92rem; line-height:1.5; margin:0}
.od-nosabes-card .btn-tel{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; color:#14532D;
  padding:.85rem 1.2rem; border-radius:999px;
  font-family:var(--display); font-weight:700; font-size:.95rem;
  border:1px solid #BBF7D0; text-decoration:none;
  transition:transform .15s, box-shadow .15s, background .15s;
  white-space:nowrap;
}
.od-nosabes-card .btn-tel:hover{background:#15803D; color:#fff; transform:translateY(-2px); box-shadow:0 10px 20px -10px rgba(22,163,74,.4)}
.od-nosabes-card .btn-tel svg{width:16px; height:16px}

/* ──────────────── Tabs de detalle ──────────────── */
.od-tabs-block{
  background:var(--bg);
  padding:0 0 3.5rem;
}
.od-tabs-sec{padding:3rem 0 0; background:transparent}
.od-tabs-sec .od-tabs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem;
  padding:.35rem;
  background:rgba(255,255,255,.55);
  border:1px solid var(--g2);
  border-radius:16px;
  width:100%; max-width:none;
  margin:0;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.od-tab{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.72rem 1.1rem;
  border-radius:14px;
  font-family:var(--display); font-weight:700;
  font-size:.86rem; color:var(--g7);
  transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.od-tab:hover{color:var(--bk); background:var(--wh)}
.od-tab.is-active{
  color:var(--wh); background:var(--p);
  box-shadow:0 12px 26px -14px rgba(109,22,223,.65);
}
.od-tab-panel[hidden]{display:none}
@media(max-width:620px){
  .od-tabs-sec .od-tabs{grid-template-columns:1fr; border-radius:18px}
}

/* ──────────────── Sección de vídeo (Guías visuales) ──────────────── */
.od-video{padding:4rem 0; background:linear-gradient(180deg, var(--g1) 0%, var(--wh) 100%)}
.od-video-grid{
  display:grid; grid-template-columns:1fr 1.3fr; gap:2.5rem;
  align-items:center;
}
@media(max-width:880px){.od-video-grid{grid-template-columns:1fr; gap:1.5rem}}
.od-video-text .eyebrow{color:var(--p)}
.od-video-text h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.7rem, 2.6vw, 2.2rem);
  line-height:1.15; letter-spacing:-.02em;
  color:var(--bk); margin:.6rem 0 .7rem;
}
.od-video-text h2 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--p)}
.od-video-text p{color:var(--g7); font-size:1rem; line-height:1.6; margin:0 0 1.3rem}
.od-video-yt-btn{
  display:inline-flex; align-items:center; gap:.45rem;
}
.od-video-yt-btn svg{width:18px; height:18px; fill:currentColor}
.od-video-frame{
  position:relative; aspect-ratio:16/9; border-radius:20px;
  overflow:hidden; cursor:pointer; display:block;
  background:#1A0B2E;
  box-shadow:0 24px 60px -28px rgba(46,16,101,.55);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  text-decoration:none;
}
.od-video-frame:hover{transform:translateY(-3px); box-shadow:0 30px 70px -28px rgba(46,16,101,.65)}
.od-video-frame img, .od-video-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0;
}
.od-video-frame--embed{
  cursor:default; box-shadow:0 20px 44px -28px rgba(46,16,101,.2);
}
.od-video-frame--embed::after{display:none}
.od-video-frame--embed:hover{transform:none; box-shadow:0 20px 44px -28px rgba(46,16,101,.2)}
.od-video-frame--embed iframe{object-fit:contain; background:#000}
.od-video-frame--embed:not(.is-playing) iframe{display:none}
.od-video-frame--embed.is-playing .od-video-poster,
.od-video-frame--embed.is-playing .od-video-play-btn{display:none}
.od-video-poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.od-video-play-btn{
  position:absolute; inset:0; z-index:2; border:0; padding:0; margin:0;
  background:transparent; cursor:pointer; display:grid; place-items:center;
}
.od-video-play-btn span{
  width:78px; height:78px; border-radius:50%;
  background:#CFFF65; color:#1A0B2E;
  display:grid; place-items:center;
  box-shadow:0 18px 40px -10px rgba(207,255,101,.5);
  transition:transform .2s;
}
.od-video-play-btn:hover span{transform:scale(1.08)}
.od-video-play-btn svg{width:32px; height:32px; margin-left:4px}
.od-video-frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,11,46,.15) 0%, rgba(26,11,46,.55) 100%);
  pointer-events:none;
}
.od-video-play{
  position:absolute; inset:0; display:grid; place-items:center; z-index:2;
}
.od-video-play span{
  width:78px; height:78px; border-radius:50%;
  background:#CFFF65; color:#1A0B2E;
  display:grid; place-items:center;
  box-shadow:0 18px 40px -10px rgba(207,255,101,.5), 0 0 0 0 rgba(207,255,101,.55);
  transition:transform .2s, box-shadow .2s;
  animation:odPulse 2.6s ease-out infinite;
}
.od-video-frame:hover .od-video-play span{transform:scale(1.08)}
.od-video-play svg{width:32px; height:32px; margin-left:4px}
@keyframes odPulse{
  0%{box-shadow:0 18px 40px -10px rgba(207,255,101,.5), 0 0 0 0 rgba(207,255,101,.55)}
  100%{box-shadow:0 18px 40px -10px rgba(207,255,101,.5), 0 0 0 24px rgba(207,255,101,0)}
}
.od-video-frame .od-video-label{
  position:absolute; left:1rem; bottom:1rem; z-index:2;
  color:#fff; font-family:var(--display); font-weight:600;
  font-size:.85rem; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(0,0,0,.45); padding:.4rem .7rem; border-radius:999px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.od-video-frame .od-video-label svg{width:14px; height:14px}