/* ============================================================
   "Novedades" — copia fiel de prototipo-seccciones/novedades/
   (conversión de cronos-product-experience-main). Prefijado bajo
   .pe — reset acotado (el original tenía reset global, aquí se
   escopa a .pe para no romper el resto del sitio).
   ============================================================ */

:root{
  --pe-navy:          #000000;
  --pe-navy-deep:      #1A1A1A;
  --pe-crimson:        #000000;
  --pe-crimson-dark:   #1A1A1A;
  --pe-lavender:       #F0F0F0;
  --pe-lavender-soft:  #F7F8FA;
  --pe-neutral-1:      #F7F8FA;
  --pe-neutral-2:      #F3F4F7;
  --pe-slate-1:        #7A8494;
  --pe-slate-2:        #8C96A6;
}

.pe, .pe *, .pe *::before, .pe *::after{ box-sizing:border-box; }
.pe{ margin:0; padding:0; font-family:'Montserrat', ui-sans-serif, system-ui, sans-serif; background:#fff; color:var(--pe-navy-deep); -webkit-font-smoothing:antialiased; }
.pe *{ margin:0; padding:0; }
.pe img{ max-width:100%; }
.pe a{ color:inherit; }
.pe button{ font:inherit; }

.pe .label-tech{ font-size:.6875rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--pe-slate-1); }
.pe .num-mono{ font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:-.02em; }
.pe .text-crimson{ color:var(--pe-crimson); }

/* ---------- Reveal ---------- */
.pe .reveal{ opacity:0; transform:translateY(22px); transition:opacity 700ms cubic-bezier(.22,1,.36,1), transform 700ms cubic-bezier(.22,1,.36,1); }
.pe .reveal.reveal-in{ opacity:1; transform:none; }
.pe .reveal-clip{ opacity:0; clip-path:inset(0 0 100% 0); transform:scale(1.04); transition:opacity 800ms cubic-bezier(.22,1,.36,1), clip-path 900ms cubic-bezier(.22,1,.36,1), transform 900ms cubic-bezier(.22,1,.36,1); }
.pe .reveal-clip.reveal-clip-in{ opacity:1; clip-path:inset(0 0 0 0); transform:scale(1); }
@media (prefers-reduced-motion: reduce){
  .pe .reveal, .pe .reveal-clip{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; }
}

/* ---------- Blueprint textures ---------- */
.pe .pe-blueprint-grid{ position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(to right,var(--pe-lavender) 1px,transparent 1px),linear-gradient(to bottom,var(--pe-lavender) 1px,transparent 1px); background-size:72px 72px; opacity:.5; }
.pe .pe-blueprint-grid--soft{ opacity:.4; }
.pe .pe-blueprint-dots{ position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(var(--pe-lavender) 1.25px, transparent 1.25px); background-size:26px 26px; }
.pe .pe-blueprint-dots--band{ opacity:.08; }

/* ============================================================ HERO */
.pe-hero{ position:relative; overflow:hidden; background:#fff; }
.pe-hero-topline{ position:absolute; inset-inline:0; top:0; height:1px; background:rgba(15,56,121,.15); }
.pe-hero-inner{ position:relative; max-width:1400px; margin:0 auto; padding:3.5rem 1.25rem 0; }
@media (min-width:640px){ .pe-hero-inner{ padding-inline:2rem; } }
@media (min-width:1024px){ .pe-hero-inner{ padding-inline:3rem; } }

.pe-hero-grid{ display:grid; gap:2.5rem; align-items:end; }
@media (min-width:1024px){ .pe-hero-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:3.5rem; } }
/* Variante con la imagen a la izquierda y el texto a la derecha */
.pe-hero-grid--reverse .pe-hero-text{ order:2; }
.pe-hero-grid--reverse .pe-hero-stage{ order:1; }
@media (min-width:1024px){ .pe-hero-grid--reverse{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); } }
.pe-hero-text{ padding-bottom:1rem; }
@media (min-width:1024px){ .pe-hero-text{ padding-bottom:4rem; } }
.pe-hero-eyebrow{ display:flex; align-items:center; gap:.75rem; }
.pe-eyebrow-bar{ height:1px; width:2.5rem; background:var(--pe-crimson-dark); display:inline-block; }
.pe-hero-title{
  margin-top:1.5rem; font-size:2.75rem; font-weight:800; line-height:.94; letter-spacing:-.03em;
  background: linear-gradient(135deg, #C9971F 0%, #F4C430 45%, #000000 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
@media (min-width:640px){ .pe-hero-title{ font-size:3.75rem; } }
@media (min-width:1024px){ .pe-hero-title{ font-size:4.6rem; } }
.pe-hero-title-line{ display:block; }
.pe-hero-title-brand{ margin-top:.5rem; display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.pe-hero-title-tag{ display:none; }
@media (min-width:640px){ .pe-hero-title-tag{ display:inline; } }
.pe-hero-lead{ margin-top:1.75rem; max-width:28rem; font-size:1rem; line-height:1.65; color:var(--pe-slate-1); text-align:justify; }
.pe-hero-actions{ margin-top:2.25rem; display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; }

.pe-btn-quote{ display:inline-flex; align-items:center; gap:.75rem; background:var(--pe-crimson-dark); color:#fff; padding:.9rem 1.5rem; font-size:.72rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; border:none; cursor:pointer; font-family:inherit; transition:all .3s; }
.pe-btn-quote:hover{ background:var(--pe-crimson); transform:translateY(-2px); box-shadow:0 10px 24px -12px var(--pe-crimson); }
.pe-btn-quote i{ font-size:.75rem; transition:transform .3s; }
.pe-btn-quote:hover i{ transform:translateX(3px); }
.pe-link-secondary{ font-size:.6875rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--pe-navy); border-bottom:1px solid rgba(15,56,121,.25); padding-bottom:.25rem; text-decoration:none; transition:all .3s; }
.pe-link-secondary:hover{ color:var(--pe-crimson); border-color:var(--pe-crimson-dark); }

.pe-hero-stage{ position:relative; }
.pe-hero-numeral{ position:absolute; top:-1.5rem; left:-1.5rem; z-index:0; display:none; font-size:8rem; line-height:1; color:var(--pe-lavender); }
@media (min-width:1024px){ .pe-hero-numeral{ display:block; } }
.pe-stage-box{ position:relative; z-index:1; overflow:hidden; border:1px solid var(--pe-lavender); background:linear-gradient(to bottom, var(--pe-neutral-2), var(--pe-lavender-soft)); }
.pe-stage-tag{ position:absolute; top:1rem; left:1rem; z-index:10; display:flex; flex-direction:column; gap:.25rem; }
.pe-stage-divider{ position:absolute; inset-block:0; left:50%; width:1px; background:rgba(15,56,121,.05); }
.pe-stage-img{ display:block; margin-inline:auto; height:420px; width:100%; object-fit:contain; padding:2rem; transition:transform 650ms ease-out; }
@media (min-width:640px){ .pe-stage-img{ height:540px; } }
@media (min-width:1024px){ .pe-stage-img{ height:600px; } }
.pe-stage-box:hover .pe-stage-img{ transform:scale(1.04); }
.pe-stage-hover-tag{ position:absolute; right:1rem; bottom:1rem; display:flex; align-items:center; gap:.5rem; opacity:0; transform:translateY(.5rem); transition:all .5s; }
.pe-stage-box:hover .pe-stage-hover-tag{ opacity:1; transform:none; }
.pe-stage-dot{ width:.375rem; height:.375rem; border-radius:50%; background:var(--pe-crimson-dark); }

.pe-spec-strip{ margin-top:3rem; display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--pe-lavender); border-left:1px solid var(--pe-lavender); }
@media (min-width:1024px){ .pe-spec-strip{ grid-template-columns:repeat(4,1fr); } }
.pe-spec{ border-right:1px solid var(--pe-lavender); border-bottom:1px solid var(--pe-lavender); background:var(--pe-lavender-soft); padding:1.5rem 1.25rem; transition:background .3s; }
.pe-spec:hover{ background:var(--pe-lavender); }
.pe-spec dd{ margin-top:.5rem; font-size:1rem; font-weight:800; letter-spacing:-.01em; text-transform:uppercase; color:var(--pe-navy-deep); transition:color .3s; }
@media (min-width:640px){ .pe-spec dd{ font-size:1.125rem; } }
.pe-spec:hover dd{ color:var(--pe-crimson); }

/* ============================================================ Section shells */
.pe-section{ position:relative; max-width:1400px; margin:0 auto; padding:5rem 1.25rem; }
@media (min-width:640px){ .pe-section{ padding-inline:2rem; } }
@media (min-width:1024px){ .pe-section{ padding:7rem 3rem; } }
.pe-section--tinted{ max-width:none; background:var(--pe-neutral-1); padding:0; overflow:hidden; }
.pe-section--tinted .pe-container{ position:relative; max-width:1400px; margin:0 auto; padding:5rem 1.25rem; }
@media (min-width:640px){ .pe-section--tinted .pe-container{ padding-inline:2rem; } }
@media (min-width:1024px){ .pe-section--tinted .pe-container{ padding:7rem 3rem; } }

/* ============================================================ Características técnicas */
.pe-tech-grid{ display:grid; gap:2.5rem; }
@media (min-width:1024px){ .pe-tech-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:4rem; } }
@media (min-width:1024px){ .pe-tech-side{ position:sticky; top:6rem; align-self:start; } }
.pe-tech-heading{ margin-top:1rem; display:flex; align-items:flex-start; gap:1.25rem; }
.pe-tech-num{ font-size:3.75rem; line-height:1; color:var(--pe-lavender); }
@media (min-width:640px){ .pe-tech-num{ font-size:4.5rem; } }
.pe-tech-title{ margin-top:.25rem; font-size:1.875rem; font-weight:800; line-height:1.05; letter-spacing:-.02em; color:var(--pe-navy-deep); }
@media (min-width:640px){ .pe-tech-title{ font-size:2.25rem; } }
.pe-tech-title-line{ display:block; color:var(--pe-slate-1); }
.pe-tech-desc{ margin-top:1.5rem; max-width:24rem; font-size:.875rem; line-height:1.65; color:var(--pe-slate-1); }

.pe-tech-progress{ margin-top:2rem; display:flex; flex-direction:column; gap:.5rem; }
.pe-tech-progress-row{ display:flex; align-items:center; gap:.75rem; }
.pe-tech-progress-num{ font-size:.6875rem; color:var(--pe-slate-2); transition:color .3s; }
.pe-tech-progress-num.is-active{ color:var(--pe-crimson-dark); }
.pe-tech-progress-track{ position:relative; flex:1; height:1px; background:var(--pe-lavender); }
.pe-tech-progress-fill{ position:absolute; inset-block:0; left:0; width:0%; background:var(--pe-crimson-dark); transition:width .5s ease-out; }
.pe-tech-progress-fill.is-active{ width:100%; }

.pe-tech-list{ list-style:none; border-top:1px solid var(--pe-lavender); }
.pe-tech-item-wrap{ border-bottom:1px solid var(--pe-lavender); }
.pe-tech-item{ width:100%; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:1.25rem; padding:1.75rem 0; text-align:left; background:transparent; border:none; cursor:pointer; transition:background .3s; color:inherit; }
@media (min-width:640px){ .pe-tech-item{ gap:2rem; padding-block:2rem; } }
.pe-tech-item.is-active{ background:rgba(232,238,248,.6); }
.pe-tech-item-icon-col{ display:flex; flex-shrink:0; align-items:center; gap:.75rem; padding-left:.75rem; }
@media (min-width:640px){ .pe-tech-item-icon-col{ padding-left:1.25rem; } }
.pe-tech-item-num{ font-size:1.25rem; color:rgba(15,56,121,.35); transition:color .3s; }
@media (min-width:640px){ .pe-tech-item-num{ font-size:1.5rem; } }
.pe-tech-item.is-active .pe-tech-item-num{ color:var(--pe-crimson-dark); }
.pe-icon{ width:1.5rem; text-align:center; font-size:1.1rem; display:inline-flex; align-items:center; justify-content:center; color:var(--pe-navy); transition:all .3s; }
.pe-tech-item.is-active .pe-icon{ color:var(--pe-crimson-dark); transform:scale(1.1); }
.pe-tech-item-body{ min-width:0; padding-right:.75rem; }
@media (min-width:640px){ .pe-tech-item-body{ padding-right:1.5rem; } }
.pe-tech-item-lead-row{ display:flex; align-items:center; gap:.75rem; }
.pe-tech-item-rule{ height:1px; width:0; background:var(--pe-crimson-dark); opacity:0; transition:all .3s; }
.pe-tech-item.is-active .pe-tech-item-rule{ width:2rem; opacity:1; }
.pe-tech-item-title{ margin-top:.5rem; display:block; font-size:1.125rem; font-weight:700; letter-spacing:-.01em; color:var(--pe-navy-deep); transition:all .3s; }
@media (min-width:640px){ .pe-tech-item-title{ font-size:1.25rem; } }
.pe-tech-item.is-active .pe-tech-item-title{ color:var(--pe-crimson); transform:translateX(.25rem); }
.pe-tech-item-text{ margin-top:.5rem; display:block; max-width:36rem; font-size:.875rem; line-height:1.65; color:var(--pe-slate-1); transition:color .3s; }
.pe-tech-item.is-active .pe-tech-item-text{ color:var(--pe-navy-deep); }

/* ============================================================ Tipos de polipastos */
.pe-hoist-head{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; }
.pe-hoist-title{ margin-top:.75rem; font-size:1.875rem; font-weight:800; line-height:1.05; letter-spacing:-.02em; color:var(--pe-navy-deep); }
@media (min-width:640px){ .pe-hoist-title{ font-size:3rem; } }
.pe-hoist-title-line{ display:block; color:var(--pe-slate-1); }
.pe-hoist-numeral{ display:none; flex-shrink:0; font-size:7rem; line-height:1; color:var(--pe-lavender); }
@media (min-width:640px){ .pe-hoist-numeral{ display:block; } }
@media (min-width:1024px){ .pe-hoist-numeral{ font-size:10rem; } }

.pe-hoist-grid{ margin-top:3rem; display:grid; gap:2rem; }
@media (min-width:1024px){ .pe-hoist-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:3.5rem; } }

.pe-hoist-stage{ order:2; }
@media (min-width:1024px){ .pe-hoist-stage{ order:1; } }
.pe-hoist-box{ position:relative; overflow:hidden; border:1px solid var(--pe-lavender); background:var(--pe-neutral-1); }
.pe-hoist-tag{ position:absolute; top:0; left:0; z-index:10; display:flex; align-items:center; gap:.75rem; background:var(--pe-navy); padding:.5rem 1rem; }
.pe-hoist-tag-idx{ font-size:.6875rem; color:rgba(255,255,255,.6); }
.pe-hoist-corner{ position:absolute; z-index:10; width:2.5rem; height:2.5rem; }
.pe-hoist-corner--tr{ top:1.5rem; right:1.5rem; border-top:1px solid rgba(15,56,121,.25); border-right:1px solid rgba(15,56,121,.25); }
.pe-hoist-corner--bl{ bottom:1.5rem; left:1.5rem; border-bottom:1px solid rgba(15,56,121,.25); border-left:1px solid rgba(15,56,121,.25); }
.pe-hoist-img{ display:block; margin-inline:auto; height:400px; width:100%; object-fit:contain; padding:2rem; transition:all 600ms ease-out; opacity:0; position:absolute; inset:0; pointer-events:none; }
@media (min-width:640px){ .pe-hoist-img{ height:520px; } }
.pe-hoist-img.is-active{ position:relative; opacity:1; pointer-events:auto; }
.pe-hoist-box:hover .pe-hoist-img.is-active{ transform:scale(1.04); }
.pe-hoist-foot{ position:relative; z-index:10; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--pe-lavender); background:rgba(255,255,255,.8); padding:.75rem 1rem; }

.pe-hoist-selector{ order:1; }
@media (min-width:1024px){ .pe-hoist-selector{ order:2; padding-top:1rem; } }
.pe-hoist-list{ margin-top:1.25rem; list-style:none; }
.pe-hoist-item-wrap{ border-top:1px solid var(--pe-lavender); }
.pe-hoist-item-wrap:last-child{ border-bottom:1px solid var(--pe-lavender); }
.pe-hoist-item{ width:100%; padding-block:1.5rem; text-align:left; background:transparent; border:none; cursor:pointer; color:inherit; }
.pe-hoist-item-row{ display:flex; align-items:center; gap:1rem; }
.pe-hoist-item-num{ font-size:.875rem; color:var(--pe-slate-2); transition:color .3s; }
.pe-hoist-item.is-active .pe-hoist-item-num{ color:var(--pe-crimson-dark); }
.pe-hoist-item-rule{ height:1px; width:.75rem; opacity:.3; background:var(--pe-crimson-dark); transition:all 400ms; display:inline-block; }
.pe-hoist-item.is-active .pe-hoist-item-rule{ width:2.5rem; opacity:1; }
.pe-hoist-item-name{ font-size:1.25rem; font-weight:800; letter-spacing:-.01em; text-transform:uppercase; color:var(--pe-navy-deep); transition:all 400ms; }
@media (min-width:640px){ .pe-hoist-item-name{ font-size:1.5rem; } }
.pe-hoist-item.is-active .pe-hoist-item-name{ color:var(--pe-crimson); transform:translateX(.25rem); }
.pe-hoist-item-arrow{ margin-left:auto; font-size:.85rem; color:var(--pe-slate-2); opacity:0; transform:translateX(-.5rem); transition:all .3s; }
.pe-hoist-item.is-active .pe-hoist-item-arrow{ opacity:1; transform:none; color:var(--pe-crimson-dark); }
.pe-hoist-item-detail{ display:grid; grid-template-rows:0fr; opacity:0; margin-top:0; transition:all 450ms ease-out; }
.pe-hoist-item.is-active .pe-hoist-item-detail{ grid-template-rows:1fr; opacity:1; margin-top:.75rem; }
.pe-hoist-item-detail-inner{ overflow:hidden; }
.pe-hoist-item-detail-text{ display:block; max-width:28rem; padding-left:2.5rem; font-size:.875rem; line-height:1.65; color:var(--pe-navy-deep); }

/* ============================================================ Banda de cotización */
.pe-quote-band{ position:relative; overflow:hidden; background:var(--pe-neutral-1); }
.pe-quote-inner{ position:relative; max-width:1400px; margin:0 auto; display:grid; gap:2rem; padding:4rem 1.25rem; }
@media (min-width:640px){ .pe-quote-inner{ padding-inline:2rem; } }
@media (min-width:1024px){ .pe-quote-inner{ grid-template-columns:minmax(0,1fr) auto; align-items:center; padding:5rem 3rem; } }
.pe-quote-headline{ margin-top:1rem; max-width:42rem; font-size:1.5rem; font-weight:900; line-height:1.25; letter-spacing:-.01em; color:var(--pe-navy-deep); }
@media (min-width:640px){ .pe-quote-headline{ font-size:1.875rem; } }
.pe-quote-headline--gradient{
  background: linear-gradient(135deg, #C9971F 0%, #F4C430 45%, #000000 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}