/* ============================================================
   PORTAFOLIO RENOVABLE — Formato "página de producto" (landing-producto.css)
   Se carga DESPUÉS de landing.css. Es el formato de tienda que más
   vende en campañas de Facebook en Colombia: franja de anuncios,
   galería, precio con oferta, cantidad, botón grande "Pagas al
   recibir" y descripción larga centrada. Colores de la marca.
   Reutilizable para las páginas de otros productos.
   ============================================================ */

.pdp{ background:var(--white); }

/* ---------- Franja de anuncios ---------- */
.pdp-announce{
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(90deg, var(--teal) 0%, var(--teal-mid) 100%);
  color:var(--white);
  min-height:42px;
}
.pdp-announce__nav{
  flex:none; width:44px; height:42px; border:0; background:transparent;
  color:rgba(255,255,255,.85); font-size:26px; line-height:1;
}
.pdp-announce__track{ position:relative; flex:1; height:42px; overflow:hidden; text-align:center; }
.pdp-announce__track p{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:0 6px;
  font-family:var(--font-h); font-weight:700; font-size:16px; letter-spacing:.04em; text-transform:uppercase;
  opacity:0; transform:translateY(8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.pdp-announce__track p.is-on{ opacity:1; transform:none; }

/* ---------- Encabezado ---------- */
.pdp-head{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(13,92,85,.12);
}
.pdp-head__in{ display:grid; grid-template-columns:44px 1fr 44px; align-items:center; min-height:70px; }
.pdp-head__brand{ justify-self:center; display:flex; align-items:center; gap:8px; }
.pdp-head__brand img:last-child{ height:32px; width:auto; }
.pdp-head__call,.pdp-head__wa{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
}
.pdp-head__call svg{ width:24px; height:24px; fill:none; stroke:var(--teal); stroke-width:1.9; stroke-linejoin:round; }
.pdp-head__wa{ background:rgba(23,156,82,.1); }
.pdp-head__wa svg{ width:24px; height:24px; fill:var(--wa); }

/* ---------- Producto ---------- */
.pdp-product{ padding:18px 0 34px; }
.pdp-product__grid{ display:grid; gap:22px; }
@media (min-width:960px){
  .pdp-product{ padding:40px 0 64px; }
  .pdp-product__grid{ grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr); gap:56px; align-items:start; }
  .pdp-info{ position:sticky; top:96px; }
}
@media (max-width:959px){
  .pdp-product .lp-wrap{ width:100%; }
  .pdp-info{ padding:0 var(--gutter); }
}

/* Galería */
.pdp-gallery__main{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  border-radius:0; background:var(--bg2);
}
.pdp-gallery__main::-webkit-scrollbar{ display:none; }
.pdp-gallery__main figure{ flex:0 0 100%; margin:0; scroll-snap-align:center; }
.pdp-gallery__main img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
@media (min-width:960px){ .pdp-gallery__main{ border-radius:var(--r); } }
.pdp-gallery__thumbs{ display:flex; align-items:center; gap:6px; margin-top:12px; padding:0 6px; }
.pdp-gallery__arrow{
  flex:none; width:32px; height:32px; border-radius:50%;
  border:0; background:transparent; color:var(--muted); font-size:26px; line-height:1;
}
.pdp-gallery__arrow:hover{ color:var(--teal); background:var(--bg2); }
.pdp-gallery__list{
  flex:1; display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding:3px;
}
.pdp-gallery__list::-webkit-scrollbar{ display:none; }
.pdp-gallery__list button{
  flex:0 0 calc(25% - 7.5px); padding:0; border:2px solid transparent; border-radius:10px;
  background:none; overflow:hidden; opacity:.7;
  transition:opacity .2s, border-color .2s;
}
.pdp-gallery__list button img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.pdp-gallery__list button.is-on{ border-color:var(--teal); opacity:1; }
.pdp-gallery__list button:hover{ opacity:1; }

/* Información */
.pdp-brand{ display:block; font-size:12px; font-weight:800; letter-spacing:.14em; color:var(--teal-lt); margin-bottom:8px; }
.pdp-info h1{
  font-family:var(--font-h); font-weight:700; letter-spacing:0;
  font-size:clamp(32px, 4.4vw, 44px); line-height:1.05; color:var(--dark);
}
.pdp-price{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin-top:16px; }
.pdp-price__old{ font-size:18px; color:var(--muted); }
.pdp-price__now{ font-family:var(--font-h); font-weight:800; font-size:34px; line-height:1; color:var(--teal); }
.pdp-price__badge{
  padding:6px 14px; border-radius:999px;
  background:var(--teal); color:var(--white);
  font-size:14px; font-weight:800; letter-spacing:.02em;
}
.pdp-promo{ margin-top:10px; font-size:17px; color:var(--text); }
.pdp-ship{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px;
  margin-top:14px; font-size:16.5px; color:var(--teal-lt); font-weight:600;
}
.pdp-ship svg{ width:22px; height:22px; fill:none; stroke:var(--teal-lt); stroke-width:1.8; stroke-linejoin:round; }
.pdp-ship b{ font-style:italic; font-weight:900; color:var(--accent); letter-spacing:.02em; }
.pdp-stock{ color:var(--teal); }

.pdp-qty-label{ display:block; margin-top:18px; font-size:15px; color:var(--muted); }
.pdp-qty{
  display:inline-grid; grid-template-columns:52px 64px 52px; margin-top:6px;
  border:1.5px solid var(--dark); border-radius:6px; overflow:hidden;
}
.pdp-qty button{ border:0; background:var(--white); font-size:22px; color:var(--dark); height:50px; }
.pdp-qty button:hover{ background:var(--bg2); }
.pdp-qty input{
  width:100%; border:0; text-align:center; font:inherit; font-size:18px; color:var(--dark);
  -moz-appearance:textfield; appearance:textfield;
}
.pdp-qty input::-webkit-outer-spin-button,.pdp-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.pdp-note{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:18px; padding:11px 16px;
  background:var(--white); border-radius:10px;
  box-shadow:0 3px 0 rgba(13,92,85,.12), 0 6px 18px rgba(13,92,85,.10);
  font-size:15px; color:var(--text);
}
.pdp-note svg{ width:22px; height:22px; fill:var(--accent); flex:none; }
.pdp-note b{ color:var(--teal); }

/* Botones */
.pdp-btn{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; margin-top:14px; padding:15px 20px;
  border-radius:12px; text-decoration:none; text-align:center;
  font-size:17px; line-height:1.15;
  transition:transform .15s var(--ease), box-shadow .25s var(--ease), background .2s;
}
.pdp-btn:active{ transform:scale(.985); }
.pdp-btn--ghost{
  margin-top:24px;
  border:1.5px solid var(--dark); color:var(--dark); background:var(--white); font-weight:600;
}
.pdp-btn--ghost:hover{ background:var(--bg2); }
.pdp-btn--buy{
  color:var(--white);
  background:linear-gradient(100deg, var(--dark2) 0%, var(--teal) 55%, var(--teal-lt) 100%);
  box-shadow:0 12px 26px rgba(13,92,85,.35);
  padding:13px 20px;
}
.pdp-btn--buy:hover{ box-shadow:0 16px 34px rgba(13,92,85,.45); transform:translateY(-1px); }
.pdp-btn--buy svg{ width:28px; height:28px; fill:currentColor; flex:none; }
.pdp-btn--buy > span{ display:flex; flex-direction:column; align-items:center; }
.pdp-btn--buy b{ font-size:20px; font-weight:800; letter-spacing:.03em; }
.pdp-btn--buy small{ font-size:15.5px; font-weight:600; opacity:.95; }

/* Confianza */
.pdp-trust{ margin-top:26px; }
.pdp-trust__bar{ display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; margin-bottom:18px; }
.pdp-trust__bar i{ height:12px; border-radius:2px; }
.pdp-trust__bar i:nth-child(1){ background:#d9eee8; }
.pdp-trust__bar i:nth-child(2){ background:#b6e0d4; }
.pdp-trust__bar i:nth-child(3){ background:#7fcbb6; }
.pdp-trust__bar i:nth-child(4){ background:var(--accent); }
.pdp-trust__bar i:nth-child(5){ background:var(--teal); }
.pdp-trust__row{
  display:grid; grid-template-columns:repeat(3, 1fr);
  background:var(--white); border-radius:12px;
  box-shadow:0 6px 18px rgba(13,92,85,.08);
  padding:14px 6px;
}
.pdp-trust__row > div{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:0 8px; text-align:center; font-size:14px; line-height:1.25; color:var(--text);
}
.pdp-trust__row > div + div{ border-left:1px solid var(--border); }
.pdp-trust__row strong{ font-family:var(--font-h); font-size:24px; font-weight:800; color:var(--teal); line-height:1.1; }
.pdp-trust__row svg{ width:30px; height:30px; fill:none; stroke:var(--teal); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Descripción larga ---------- */
.pdp-desc{ padding:18px 0 40px; }
.pdp-col{ width:min(100% - var(--gutter) * 2, 720px); margin-inline:auto; }
.pdp-h{
  margin:44px 0 16px;
  font-family:var(--font-h); font-weight:700; text-transform:uppercase;
  font-size:clamp(30px, 5vw, 42px); line-height:1.1; letter-spacing:.005em;
  text-align:center; color:var(--teal);
}
.pdp-desc .pdp-col > .pdp-h:first-child{ margin-top:10px; }
.pdp-h--ico{ font-size:clamp(24px, 3.6vw, 32px); }
.pdp-h--dark{ color:var(--dark); text-transform:none; font-size:clamp(28px, 4vw, 38px); }
.pdp-h--faq{ margin-top:48px; }
.pdp-p{ text-align:center; font-size:18px; line-height:1.75; color:var(--teal-mid); }
.pdp-p b{ color:var(--dark); }
.pdp-p--small{ margin-top:18px; font-size:15.5px; line-height:1.6; color:var(--muted); }

.pdp-video{
  position:relative; width:min(420px, 100%); margin:28px auto 0;
  aspect-ratio:478/850; border-radius:18px; overflow:hidden; background:#060f0b;
  box-shadow:var(--shadow-lg);
}
.pdp-video video{ width:100%; height:100%; object-fit:cover; }
.pdp-video__tag{
  position:absolute; left:12px; top:12px;
  padding:6px 11px; border-radius:999px;
  background:rgba(14,32,24,.75); color:var(--white); font-size:13px; font-weight:700;
}

.pdp-img{ margin:24px 0 0; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-md); }
.pdp-img img{ width:100%; }
.pdp-img--white{ background:var(--white); }

.pdp-grid2{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-top:10px; }
.pdp-grid2 figure{ position:relative; margin:0; border-radius:14px; overflow:hidden; }
.pdp-grid2 img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.pdp-grid2 figcaption{
  position:absolute; left:8px; right:8px; bottom:8px;
  padding:7px 10px; border-radius:10px;
  background:rgba(14,32,24,.72); color:var(--white);
  font-size:14px; font-weight:700; text-align:center; line-height:1.2;
}

.pdp-box{
  margin-top:8px; padding:24px 22px;
  border:1px solid var(--border); border-radius:6px; background:var(--white);
}
.pdp-box h3{ font-size:17px; letter-spacing:.04em; color:var(--teal); }
.pdp-box__lead{ margin-top:12px; font-weight:700; color:var(--teal-lt); font-size:17px; }
.pdp-box ul{ margin:12px 0 0; padding-left:22px; display:grid; gap:9px; color:var(--text); font-size:16.5px; }
.pdp-box ul li::marker{ color:var(--accent); }
.pdp-box__warn{
  margin-top:16px; padding:12px 14px; border-radius:10px;
  background:var(--bg2); color:var(--muted); font-size:15px;
}

.pdp-board{ margin-top:22px; }
.pdp-board .wb-grid{ grid-template-columns:1fr; gap:14px; }
.pdp-board .wb-step{ text-align:left; }

.pdp-kit{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; }
.pdp-kit li{
  position:relative; padding:12px 14px 12px 50px;
  background:var(--bg2); border-radius:12px; font-size:16.5px; color:var(--text);
}
.pdp-kit li::before{
  content:""; position:absolute; left:14px; top:50%; margin-top:-12px;
  width:24px; height:24px; border-radius:50%;
  background:var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5l4 4 8-9'/></svg>") center/15px no-repeat;
}
.pdp-kit b{ color:var(--teal); }

.pdp-offer{
  margin-top:40px; padding:28px 22px;
  border-radius:var(--r); text-align:center;
  background:linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
  border:1px dashed var(--accent);
}
.pdp-offer p{ font-size:17px; color:var(--text); }
.pdp-offer p + p{ margin-top:8px; }
.pdp-offer__tag{ font-family:var(--font-h); font-weight:800; font-size:24px !important; color:var(--dark) !important; }
.pdp-offer__green{ color:var(--teal) !important; font-weight:700; }
.pdp-offer .pdp-btn{ margin-top:20px; }

.pdp-why{
  margin-top:40px; padding:28px 22px 22px;
  background:var(--white); border-radius:var(--r);
  box-shadow:var(--shadow-md); text-align:center;
}
.pdp-why__logo img{ margin:0 auto 10px; }
.pdp-why h3{ font-size:21px; }
.pdp-why ul{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px; font-size:16px; color:var(--muted); }
.pdp-why ul li::before{ content:"✔ "; color:var(--accent); font-weight:800; }
.pdp-why__pics{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:18px; }
.pdp-why__pics img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; }

/* ---------- Más información / FAQ ---------- */
.pdp-more{ padding:24px 0 56px; }
.pdp-table{ margin:0 20px 18px; width:calc(100% - 40px); box-shadow:none; }
.pdp-table th,.pdp-table td{ font-size:15px; padding:11px 14px; }

/* ---------- Opiniones ---------- */
.pdp-reviews{ padding:10px 0 56px; background:var(--bg); }
.pdp-reviews[hidden]{ display:none; }
.pdp-reviews__list{ display:grid; gap:14px; }
.pdp-reviews article{
  background:var(--white); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow-sm);
  display:block;
}
.pdp-stars{ color:#f2b200; letter-spacing:2px; font-size:18px; }
.pdp-reviews p{ margin:8px 0; font-size:16px; color:var(--text); }
.pdp-reviews b{ font-size:14px; color:var(--muted); }

/* ---------- Botón fijo ---------- */
.pdp-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transform:translateY(120%); transition:transform .35s var(--ease);
}
.pdp-sticky.is-on{ transform:none; }
.pdp-sticky .pdp-btn{ margin:0 auto; max-width:560px; }
body.pdp{ padding-bottom:0; }
@media (max-width:899px){ body.pdp{ padding-bottom:84px; } }

/* Modo revisión: la barra no tapa el encabezado */
.pdp .lp-revisar-bar{ top:auto; bottom:92px; }
@media (max-width:520px){
  .pdp-announce__track p{ font-size:14px; letter-spacing:.02em; white-space:nowrap; }
}