/* ==========================================================================
   Bolsas termoencogibles — dirección de arte propia
   Idea: transformación. La película pasa de holgada a "segunda piel" con calor.
   Fondos cálidos (el brillo dorado es calor, no decoración), formas orgánicas
   (contornos) en lugar de las cotas rectas de pouch, y una escena oscura fijada
   que cuenta el proceso con el scroll.
   CACHÉ: se sirve "immutable"; si lo editas, sube su ?v= en la página.
   ========================================================================== */

/* ===== 1. HERO (espejo: la pieza a la izquierda, sangrando) ===== */
.phero--termo{padding-block:clamp(1.75rem,1rem + 2.4vw,3.25rem) clamp(3.5rem,2.4rem + 4vw,6rem);}
.phero--termo .phero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s5);row-gap:var(--s7);align-items:center;}
.phero--termo .phero__fig{grid-column:1 / span 6;grid-row:1;margin:0;}
.phero--termo .phero__copy{grid-column:7 / -1;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5);padding-left:var(--s5);}
.phero--termo .phero__title{font-size:clamp(2.25rem,1.3rem + 3vw,3.75rem);margin-block:var(--s2) var(--s1);}
.phero__title em{font-style:normal;}
.phero--termo .specline{margin-top:var(--s2);padding-top:var(--s5);border-top:1px solid var(--linea);align-self:stretch;}
/* Bahía cálida: sangra a la izquierda; el brillo de abajo es la fuente de calor */
.tm-bahia{--bleed:max(var(--gutter), calc((100vw - var(--maxw)) / 2));position:relative;margin-left:calc(var(--bleed) * -1);padding:clamp(1.25rem,.6rem + 2vw,3rem) clamp(1rem,.4rem + 2vw,2.5rem) clamp(1.25rem,.6rem + 2vw,3rem) var(--bleed);background:radial-gradient(ellipse 70% 55% at 55% 100%, color-mix(in srgb, var(--jenn-dorado) 26%, transparent), transparent 70%), var(--jenn-plate);border-right:1px solid var(--linea);border-block:1px solid var(--linea);overflow:hidden;}
.tm-foto{position:relative;max-width:600px;margin-inline:auto;aspect-ratio:1;}
/* La foto viene sobre gris #F7F7F7: un 3% de brillo lo lleva a blanco y el multiply lo funde */
.tm-foto > img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.045);}
.tm-capas{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.tm-film{fill:none;stroke:var(--jenn-dorado);stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
.tm-guia{fill:none;stroke:var(--jenn-dorado-tinta);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:1;}
.tm-calor{opacity:0;}
.tm-etq{position:absolute;right:2%;top:30.5%;transform:translateY(-100%);font-size:.8125rem;font-weight:600;color:var(--jenn-dorado-tinta);background:var(--jenn-plate);padding:3px 8px;white-space:nowrap;}
@media (prefers-reduced-motion: no-preference){
  .intro-pending .tm-guia{stroke-dashoffset:1;}
  .intro-pending .tm-etq{opacity:0;}
}

/* ===== 2. QUÉ ES — la definición como frase ===== */
.tm-que__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s5);row-gap:var(--s6);align-items:start;}
.tm-que__t{grid-column:1 / span 4;font-size:clamp(1.75rem,1.3rem + 1.5vw,2.5rem);position:sticky;top:calc(var(--subnav-h) + 40px);}
.tm-que__frase{grid-column:5 / -1;font-size:clamp(1.75rem,1.15rem + 2.3vw,3.25rem);line-height:1.18;}
.tm-que__prose{grid-column:5 / span 6;}
.tm-que__ficha{grid-column:1 / -1;margin-top:var(--s5);}

/* ===== 3. PROCESO (oscura; fijada en escritorio) ===== */
.tm-proceso{padding-block:clamp(3.5rem,2.5rem + 3vw,5.5rem);overflow:clip;}
/* Escritorio con escena ligada al scroll: la sección mide una pantalla más el recorrido
   y su contenido se queda fijo con sticky (sin pin de GSAP: no hay saltos de layout) */
.tm-proceso.is-scroll{padding-block:0;height:calc(100vh + 180vh);}
.tm-proceso.is-scroll .tm-proceso__sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:var(--subnav-h);}
.tm-proceso__marco{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s5);row-gap:var(--s5);align-items:center;}
.tm-proceso__head{grid-column:1 / span 4;grid-row:1;align-self:end;display:flex;flex-direction:column;gap:var(--s3);}
.tm-escena{grid-column:5 / -1;grid-row:1 / span 2;margin:0;border:1px solid var(--linea-oscura);background:var(--jenn-onix-2);}
.tm-escena__svg{display:block;width:100%;height:auto;max-height:calc(100vh - var(--subnav-h) - 120px);}
.tm-pasos{grid-column:1 / span 4;grid-row:2;align-self:start;border-top:1px solid var(--linea-oscura);}
.tp{border-bottom:1px solid var(--linea-oscura);padding:var(--s4) 0;}
.tp__btn{display:flex;align-items:baseline;gap:var(--s4);width:100%;padding:0;background:none;border:0;cursor:pointer;text-align:left;color:inherit;}
.tp__n{font-family:var(--jenn-font-heading);font-size:1.75rem;line-height:1;color:var(--jenn-gris-perla);transition:color var(--dur-panel) ease;min-width:2.2ch;}
.tp__t{font-weight:600;font-size:1.0625rem;color:var(--jenn-gris-perla);transition:color var(--dur-panel) ease;}
.tp__d{margin:8px 0 0 calc(2.2ch * 1.75 + var(--s4));font-size:.9375rem;line-height:1.55;color:var(--jenn-gris-perla);text-wrap:pretty;}
.tp[aria-current="step"] .tp__n{color:var(--jenn-dorado);}
.tp[aria-current="step"] .tp__t{color:var(--jenn-blanco-marfil);}
.tp[aria-current="step"] .tp__d{color:var(--jenn-blanco-marfil);}
/* Capas de la escena: el estado final ya está dibujado (contorno, calor apagado) */
.pr-tunel,.pr-calor,.pr-glow{opacity:0;}
.pr-forma{visibility:hidden;}

/* ===== 4. COMPARAR ===== */
.tm-comp__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s5);row-gap:var(--s6);align-items:start;}
.versus-fig{grid-column:1 / span 7;margin:0;}
.versus__leyenda{display:flex;justify-content:space-between;margin-bottom:var(--s3);font-size:.875rem;font-weight:600;}
.versus__leyenda span:last-child{color:var(--jenn-dorado-tinta);}
.versus{position:relative;aspect-ratio:600 / 380;overflow:hidden;border:1px solid var(--linea);background:var(--jenn-blanco-marfil);user-select:none;-webkit-user-select:none;}
.versus__a,.versus__b{position:absolute;inset:0;}
.versus__a svg,.versus__b svg{width:100%;height:100%;}
.versus__b{background:#FFFFFF;clip-path:inset(0 0 0 50%);}
.vs-rot{position:absolute;display:inline-flex;align-items:center;gap:7px;font-size:.75rem;font-weight:600;line-height:1.3;padding:4px 9px;background:var(--jenn-blanco-marfil);border:1px solid var(--linea);color:var(--jenn-gris-grafito);white-space:nowrap;pointer-events:none;}
.vs-rot::before{content:"";width:6px;height:6px;border-radius:50%;border:1.5px solid currentColor;}
.vs-rot--b{background:#FFFFFF;color:var(--jenn-dorado-tinta);}
.vs-rot--b::before{border-radius:0;transform:rotate(45deg);background:currentColor;border:0;}
.versus__handle{position:absolute;top:0;bottom:0;left:50%;width:0;pointer-events:none;}
.versus__handle::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--jenn-negro-onix);}
.versus__knob{position:absolute;top:50%;left:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--jenn-negro-onix);color:var(--jenn-blanco-marfil);box-shadow:0 6px 16px -6px rgba(10,10,10,.5);transform:translate(-50%,-50%);transition:transform var(--dur-press) var(--ease-out);}
.versus__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;touch-action:pan-y;}
.versus:active .versus__knob{transform:translate(-50%,-50%) scale(.94);}
.versus:has(.versus__range:focus-visible) .versus__knob{outline:2px solid var(--jenn-dorado);outline-offset:3px;}
.tm-benef{grid-column:9 / -1;display:flex;flex-direction:column;gap:var(--s4);}
.tm-benef__frase{font-family:var(--jenn-font-heading);font-weight:500;font-size:clamp(1.625rem,1.25rem + 1.2vw,2.25rem);line-height:1.12;}
.tm-benef__d{color:var(--jenn-gris-grafito);font-size:.9375rem;text-wrap:pretty;}
.tm-benef__lista{border-top:1px solid var(--jenn-negro-onix);}
.tm-benef__lista li{padding:var(--s4) 0;border-bottom:1px solid var(--linea);}
.tm-benef__lista .h3{font-size:1.0625rem;}
.tm-benef__lista p{margin-top:4px;font-size:.9375rem;color:var(--jenn-gris-grafito);text-wrap:pretty;}
.tabla-wrap{margin-top:var(--s8);}
.tabla{width:100%;border-collapse:collapse;font-size:1rem;}
.tabla th,.tabla td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--linea);text-wrap:pretty;}
.tabla thead th{font-size:.9375rem;font-weight:600;color:var(--jenn-gris-grafito);border-bottom-color:var(--jenn-negro-onix);}
.tabla thead th:last-child{color:var(--jenn-dorado-tinta);}
.tabla tbody th{font-weight:600;width:20%;}
.tabla td{color:var(--jenn-gris-grafito);}
.tabla td:last-child,.tabla thead th:last-child{background:color-mix(in srgb, var(--jenn-dorado) 9%, transparent);color:var(--jenn-negro-onix);}
.tabla__nota{margin-top:var(--s3);font-size:.9375rem;color:var(--jenn-gris-grafito);}
.comp__nota{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s7);margin-top:var(--s6);}

/* ===== 5. APLICACIONES — contornos sobre una misma base ===== */
.tm-apl__fila{display:grid;grid-template-columns:1.35fr 1fr 1.1fr;column-gap:clamp(1.5rem,1rem + 2.5vw,4rem);align-items:start;}
.tm-apl__item{display:flex;flex-direction:column;gap:var(--s3);}
.tm-apl__ilu{display:block;width:auto;max-width:100%;height:clamp(130px,7rem + 6vw,200px);margin-bottom:var(--s3);}
.tm-apl__film{stroke-dasharray:1;stroke-dashoffset:0;}
.tm-apl__item p{color:var(--jenn-gris-grafito);text-wrap:pretty;}
.tm-apl__item p,.tm-apl__item .h3{min-height:0;}
.tm-apl__pie{margin-top:clamp(3rem,2rem + 3vw,5rem);}
.tm-apl__pie .quienes{font-size:.9375rem;color:var(--jenn-gris-grafito);}
.tm-apl__pie .quienes .etq{margin-bottom:4px;}

/* ===== 6. PLANTA (banda de confianza) ===== */
.tm-planta{padding-block:0 var(--sec);}
.tm-planta__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s5);row-gap:var(--s6);align-items:center;}
.tm-planta__copy{grid-column:1 / span 5;display:flex;flex-direction:column;gap:var(--s4);}
.tm-planta__foto{--bleed:max(var(--gutter), calc((100vw - var(--maxw)) / 2));grid-column:7 / -1;position:relative;margin-right:calc(var(--bleed) * -1);aspect-ratio:16 / 9;overflow:hidden;background:#D9D6D0;}
.tm-planta__foto img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;object-position:40% 45%;}

/* ===== 7. COTIZAR — mini formulario ===== */
.tm-cot__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s5);row-gap:var(--s6);align-items:start;}
.tm-cot__copy{grid-column:1 / span 5;display:flex;flex-direction:column;gap:var(--s4);position:sticky;top:calc(var(--subnav-h) + 40px);}
.tm-cot__tip{margin-top:var(--s3);padding-top:var(--s4);border-top:1px solid var(--linea);color:var(--jenn-gris-grafito);font-size:.9375rem;text-wrap:pretty;}
.tm-form{grid-column:7 / -1;display:flex;flex-direction:column;border-top:1px solid var(--jenn-negro-onix);margin:0;}
.tf{position:relative;display:grid;grid-template-columns:2.25rem 1fr;column-gap:var(--s4);row-gap:4px;padding:var(--s5) 0;border:0;border-bottom:1px solid var(--linea);margin:0;min-width:0;}
.tf > *{grid-column:2;}
.tf__n{grid-column:1;grid-row:1 / span 3;font-family:var(--jenn-font-heading);font-size:1.75rem;line-height:1;color:var(--jenn-dorado-tinta);}
fieldset.tf{display:block;padding-left:calc(2.25rem + var(--s4));}
fieldset.tf .tf__n{position:absolute;left:0;top:var(--s5);}
fieldset.tf legend{float:left;width:100%;margin-bottom:4px;}
fieldset.tf .tf__h{display:block;clear:both;}
.tf__l{font-weight:600;font-size:1.0625rem;padding:0;float:none;}
.tf__h{font-size:.9375rem;color:var(--jenn-gris-grafito);}
.tf input[type="text"]{margin-top:var(--s3);width:100%;padding:12px 0;border:0;border-bottom:1.5px solid var(--linea-fuerte);background:transparent;font-size:1.0625rem;color:var(--jenn-negro-onix);transition:border-color var(--dur-hover) ease;}
.tf input[type="text"]::placeholder{color:color-mix(in srgb, var(--jenn-gris-grafito) 80%, transparent);}
.tf input[type="text"]:focus{outline:none;border-bottom-color:var(--jenn-dorado-tinta);}
.tf .opciones{margin-top:var(--s3);}
.tm-form__envio{display:flex;flex-direction:column;gap:var(--s4);padding-top:var(--s5);}
.tm-form__preview{padding:var(--s4);border:1px dashed var(--linea-fuerte);background:var(--jenn-plate);}
.tm-form__preview p{margin-top:6px;white-space:pre-line;font-size:.875rem;line-height:1.6;color:var(--jenn-gris-grafito);}

/* ===== 9. CIERRE (variante termo): esquinas de visor alrededor de la fórmula ===== */
.cierre--termo .cierre__formula{position:relative;padding:clamp(1rem,.6rem + 1.4vw,2rem) clamp(1rem,.6rem + 1.4vw,2rem) clamp(.75rem,.4rem + 1vw,1.5rem);justify-self:start;}
.cierre--termo .cierre__formula::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(var(--jenn-dorado),var(--jenn-dorado)) 0 0 / 26px 1.5px no-repeat,
  linear-gradient(var(--jenn-dorado),var(--jenn-dorado)) 0 0 / 1.5px 26px no-repeat,
  linear-gradient(var(--jenn-dorado),var(--jenn-dorado)) 100% 0 / 26px 1.5px no-repeat,
  linear-gradient(var(--jenn-dorado),var(--jenn-dorado)) 100% 0 / 1.5px 26px no-repeat,
  linear-gradient(var(--jenn-dorado),var(--jenn-dorado)) 0 100% / 26px 1.5px no-repeat,
  linear-gradient(var(--jenn-dorado),var(--jenn-dorado)) 0 100% / 1.5px 26px no-repeat,
  linear-gradient(var(--jenn-dorado),var(--jenn-dorado)) 100% 100% / 26px 1.5px no-repeat,
  linear-gradient(var(--jenn-dorado),var(--jenn-dorado)) 100% 100% / 1.5px 26px no-repeat;}

@media (hover:hover) and (pointer:fine){
  .tp__btn:hover .tp__t{color:var(--jenn-blanco-marfil);}
  .tp__btn:hover .tp__n{color:var(--jenn-dorado);}
}
@media (max-width:960px){
  /* Móvil: título → foto → texto (el producto aparece en el primer pantallazo) */
  .phero--termo .phero__grid{display:flex;flex-direction:column;align-items:stretch;gap:var(--s5);}
  .phero--termo .phero__copy{display:contents;}
  .phero--termo .crumbs{order:1;align-self:flex-start;}
  .phero--termo .phero__title{order:2;margin:0;}
  .phero--termo .phero__fig{order:3;}
  .phero--termo .phero__lede{order:4;}
  .phero--termo .phero__actions{order:5;}
  .phero--termo .specline{order:6;}
  .tm-bahia{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);border-right:0;}
  .tm-que__t,.tm-que__frase,.tm-que__prose{grid-column:1 / -1;}
  .tm-que__t{position:static;}
  /* Proceso en móvil: sin fijar; escena, luego un selector de 4 pasos y el texto del activo */
  .tm-proceso__head,.tm-escena,.tm-pasos{grid-column:1 / -1;grid-row:auto;}
  .tm-escena__svg{max-height:none;}
  .tm-proceso.is-live .tm-pasos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:0;}
  .tm-proceso.is-live .tp{display:contents;}
  .tm-proceso.is-live .tp__btn{grid-row:1;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 8px 12px 0;min-height:64px;border-top:2px solid var(--linea-oscura);transition:border-color var(--dur-panel) ease;}
  .tm-proceso.is-live .tp[aria-current="step"] .tp__btn{border-top-color:var(--jenn-dorado);}
  .tm-proceso.is-live .tp__n{font-size:1.25rem;}
  .tm-proceso.is-live .tp__t{font-size:.8125rem;line-height:1.25;}
  .tm-proceso.is-live .tp__d{grid-row:2;grid-column:1 / -1;margin:var(--s3) 0 0;font-size:1rem;color:var(--jenn-blanco-marfil);visibility:hidden;}
  .tm-proceso.is-live .tp[aria-current="step"] .tp__d{visibility:visible;}
  .versus-fig,.tm-benef{grid-column:1 / -1;}
  .tm-apl__fila{grid-template-columns:1fr;row-gap:var(--s7);max-width:560px;}
  .tm-apl__ilu{max-width:340px;}
  .tm-planta__copy{grid-column:1 / -1;}
  .tm-planta__foto{grid-column:1 / -1;margin-inline:calc(var(--gutter) * -1);}
  .tm-cot__copy,.tm-form{grid-column:1 / -1;}
  .tm-cot__copy{position:static;}
}
@media (max-width:560px){
  .tm-etq{font-size:.6875rem;right:0;}
  .vs-rot{font-size:.625rem;padding:3px 6px;}
  .versus{aspect-ratio:4 / 3;}
  .versus__a svg,.versus__b svg{transform:scale(1.18);transform-origin:50% 54%;}
  .tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
  .tabla,.tabla tbody,.tabla tr,.tabla th,.tabla td{display:block;width:100%;}
  .tabla tr{padding:var(--s4) 0;border-bottom:1px solid var(--linea);}
  .tabla th,.tabla td{padding:4px 0;border:0;}
  .tabla tbody th{width:auto;margin-bottom:6px;}
  .tabla td{display:grid;grid-template-columns:7.5rem 1fr;gap:var(--s3);}
  .tabla td::before{content:attr(data-label);font-size:.8125rem;font-weight:600;color:var(--jenn-gris-grafito);padding-top:1px;}
  .tabla td:last-child{background:none;}
  .tabla td:last-child::before{color:var(--jenn-dorado-tinta);}
  .tf{grid-template-columns:1.75rem 1fr;column-gap:var(--s3);}
  fieldset.tf{padding-left:calc(1.75rem + var(--s3));}
  .tf__n{font-size:1.375rem;}
}
@media (prefers-reduced-motion: reduce){
  .pr-tunel,.pr-calor,.pr-glow{opacity:0;}
}