{"id":107,"date":"2026-06-11T15:41:37","date_gmt":"2026-06-11T20:41:37","guid":{"rendered":"https:\/\/cdzvit.com.co\/?page_id=107"},"modified":"2026-09-21T15:01:18","modified_gmt":"2026-09-21T20:01:18","slug":"inicio","status":"publish","type":"page","link":"https:\/\/cdzvit.com.co\/","title":{"rendered":"Inicio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"107\" class=\"elementor elementor-107\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4e0f633 e-con-full e-flex e-con e-parent\" data-id=\"4e0f633\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-98f6218 elementor-widget elementor-widget-html\" data-id=\"98f6218\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"inicio\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     CDZ VIT \u00b7 HERO\r\n     Sistema tipogr\u00e1fico calcado de la referencia.\r\n     CAMBIA: la URL del GLB (marcada abajo) y los 5 colores.\r\n     ============================================================ -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Archivo:wdth,wght@62..125,400..700&family=Caveat:wght@500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* =====================================================================\r\n   PALETA \u00b7 cinco valores, misma estructura de roles que la referencia\r\n   (ellos: bg-pale, bg-light, dark-green, light-green, white)\r\n   ===================================================================== *\/\r\n:root{\r\n  \/* Paleta derivada del azul de marca CDZ: #007AFF (matiz 211\u00b0).\r\n     Todos los azules comparten ese matiz, solo cambia la luminosidad. *\/\r\n  --cdz-blanco:       #FFFFFF;  \/* el aro grande *\/\r\n  --cdz-burbuja:      #D9EAFF;  \/* relleno de los c\u00edrculos de info *\/\r\n  \/* Fondo del hero. El valor de marca es #7AB2F6, pero se usa #80B3F4:\r\n     es exactamente el color al que el navegador DECODIFICA el fondo del\r\n     MP4 del logo. H.264 guarda en YUV con rango limitado, as\u00ed que el\r\n     color exportado y el mostrado nunca coinciden, por mucho que se\r\n     ajuste en el exportador. Igualando la p\u00e1gina al valor decodificado,\r\n     la costura desaparece. Soluci\u00f3n definitiva: WebM con alfa. *\/\r\n  --cdz-fondo-claro:  #80B3F4;\r\n  --cdz-oscuro:       #0A3C75;  \/* texto \u2014 4.69:1 sobre el fondo *\/\r\n  --cdz-acento:       #F4701F;  \/* naranja, solo para resaltar *\/\r\n  --cdz-marca:        #007AFF;  \/* azul de marca puro, para acentos *\/\r\n\r\n  \/* Escalado: dise\u00f1as a 1440px y todo se ajusta solo *\/\r\n  --cdz-unit: 16;\r\n  --cdz-ideal: 1440;\r\n  --cdz-min: 992px;\r\n  --cdz-max: 2560px;\r\n  --cdz-cont: clamp(var(--cdz-min), 100vw, var(--cdz-max));\r\n  --cdz-cols: 12;\r\n  --cdz-margin: 2.5em;\r\n  --cdz-gutter: 1.25em;\r\n  --cdz-ease: cubic-bezier(.32,.72,0,1);\r\n}\r\n@media (max-width:991px){ :root{ --cdz-ideal:640; --cdz-min:768px; --cdz-max:991px; --cdz-cols:6; --cdz-margin:1.25em; } }\r\n@media (max-width:767px){ :root{ --cdz-ideal:550; --cdz-min:480px; --cdz-max:767px; } }\r\n@media (max-width:479px){ :root{ --cdz-ideal:390; --cdz-min:320px; --cdz-max:479px; } }\r\n\r\n\/* =====================================================================\r\n   TIPOGRAF\u00cdA\r\n   Una sola familia, condensada, tracking negativo, interlineado bajo 100%.\r\n   Archivo tiene eje de ancho variable: wdth 78 \u2248 el condensado de la ref.\r\n   ===================================================================== *\/\r\n.cdz-stage{\r\n  font-size: calc(var(--cdz-cont) \/ (var(--cdz-ideal) \/ var(--cdz-unit)));\r\n  font-family: 'Archivo', Arial, sans-serif;\r\n  font-variation-settings: 'wdth' 78;\r\n  font-weight: 400;\r\n  letter-spacing: -.03em;\r\n  color: var(--cdz-oscuro);\r\n  background-color: var(--cdz-fondo-claro);\r\n  padding-top: 3.5em;\r\n  \/* Este espacio no es aire decorativo: alarga el fondo azul del hero\r\n     hacia abajo para que no quede una cu\u00f1a sin pintar entre su borde y\r\n     la curva de la banda, que en los extremos baja mucho.\r\n     Va emparejado con el margin-top de .cdz-marquee: si cambias uno,\r\n     cambia el otro en la misma cantidad o la banda se desplaza. *\/\r\n  padding-bottom: 17em;\r\n  position: relative;\r\n  \/* El hero NO recorta: el aro tiene que poder salirse por abajo hasta la\r\n     banda. El recorte horizontal lo hace .cdz-bloque, que envuelve a las\r\n     dos secciones. Si se recorta aqu\u00ed, el arco queda cortado en seco. *\/\r\n  overflow: visible;\r\n}\r\n.cdz-stage *,.cdz-stage *::before,.cdz-stage *::after{ box-sizing:border-box; }\r\n.cdz-stage h1{ margin:0; font-weight:600; }\r\n.cdz-stage p{ margin:0; }\r\n\r\n\/* Escalas exactas de la referencia *\/\r\n\/* El bloque de texto va CENTRADO \u2014 en la referencia el contenedor\r\n   lleva text-align:center, titular y p\u00e1rrafo incluidos. *\/\r\n.cdz-heading   { font-size:6.25em;  line-height:80%; color:var(--cdz-blanco); }\r\n\/* La l\u00ednea de acento del titular y el p\u00e1rrafo comparten color, igual\r\n   que en la referencia. Azul oscuro: 6.32:1 sobre el fondo. *\/\r\n.cdz-resalte   { color: var(--cdz-oscuro); }\r\n\/* Ojo: el selector lleva .cdz-stage delante a prop\u00f3sito. Sin eso, la regla\r\n   base .cdz-stage p{margin:0} le gana por especificidad y el margen se pierde. *\/\r\n.cdz-stage .cdz-paragraph{\r\n  font-size:1.875em; line-height:92%;\r\n  margin-top:1.5em;              \/* separaci\u00f3n con el titular \u2014 valor fijado por Vanessa *\/\r\n  max-width:17em; color:var(--cdz-oscuro);\r\n}\r\n\r\n\/* Trazo manuscrito bajo la \u00faltima l\u00ednea del p\u00e1rrafo.\r\n   margin-top separa el trazo del texto \u00b7 width lo hace m\u00e1s corto o largo *\/\r\n.cdz-subrayado{ position:relative; display:inline-block; }\r\n.cdz-trazo{\r\n  position:absolute; top:100%; left:50%;\r\n  width:80%; height:auto;\r\n  transform:translateX(-50%);\r\n  margin-top:.35em;\r\n  color:var(--cdz-oscuro);\r\n  pointer-events:none;\r\n  opacity:.9;\r\n}\r\n.cdz-trazo path{ stroke:currentColor; }\r\n.cdz-fact-num  { font-size:3.25em;  line-height:70%; font-weight:600; }\r\n.cdz-fact-unit { font-size:1.5em;   line-height:70%; font-weight:600; }\r\n.cdz-fact-text { font-size:1.25em;  line-height:92%; font-weight:500; margin-top:.3em; }\r\n.cdz-boton-txt { font-size:2em;     line-height:80%; font-weight:500; text-decoration:none !important; }\r\n\r\n\/* =====================================================================\r\n   ESTRUCTURA \u00b7 grilla de 12, visual en 7 columnas, titular en 5\r\n   ===================================================================== *\/\r\n.cdz-container{ max-width:var(--cdz-cont); margin-inline:auto; padding-inline:var(--cdz-margin); }\r\n.cdz-content{ display:flex; flex-direction:column; }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   LOGO ANIMADO\r\n   El MP4 no puede llevar transparencia, as\u00ed que trae un fondo cocido.\r\n   Seg\u00fan cu\u00e1l sea, descomenta UNA de las dos l\u00edneas de mix-blend-mode.\r\n   Lo ideal es servir un WebM con alfa (ver la fuente en el HTML).\r\n   --------------------------------------------------------------------- *\/\r\n\/* Tama\u00f1o del logo YA ASENTADO arriba. Durante la intro se muestra grande\r\n   (ANCHO_LOGO en el script) y al terminar viaja hasta este tama\u00f1o.\r\n   Cuanto m\u00e1s chico sea, m\u00e1s se nota el encogimiento al final. *\/\r\n.cdz-logo{ width:16em; margin-bottom:1.2em; margin-inline:auto; }\r\n.cdz-logo img,\r\n.cdz-logo video{ width:100%; display:block; }\r\n.cdz-logo video{\r\n  \/* Los bordes del video se desvanecen hacia el fondo. Sin borde duro,\r\n     cualquier diferencia residual de color deja de notarse.\r\n     Medido: hay 5.8% de margen libre a los lados y 11% arriba\/abajo\r\n     antes de tocar las letras, as\u00ed que estos valores no las recortan. *\/\r\n  --difumina-x: 4%;\r\n  --difumina-y: 8%;\r\n  -webkit-mask-image:\r\n    linear-gradient(to right,  transparent 0, #000 var(--difumina-x), #000 calc(100% - var(--difumina-x)), transparent 100%),\r\n    linear-gradient(to bottom, transparent 0, #000 var(--difumina-y), #000 calc(100% - var(--difumina-y)), transparent 100%);\r\n  -webkit-mask-composite: source-in;\r\n          mask-image:\r\n    linear-gradient(to right,  transparent 0, #000 var(--difumina-x), #000 calc(100% - var(--difumina-x)), transparent 100%),\r\n    linear-gradient(to bottom, transparent 0, #000 var(--difumina-y), #000 calc(100% - var(--difumina-y)), transparent 100%);\r\n          mask-composite: intersect;\r\n}\r\n.cdz-cta{ margin-bottom:3.2em; text-align:center; }\r\n\r\n.cdz-wrap{\r\n  grid-template-columns: repeat(var(--cdz-cols), minmax(0,1fr));\r\n  grid-gap: var(--cdz-gutter);\r\n  width:100%; display:grid;\r\n}\r\n.cdz-left{\r\n  grid-column:7 span; display:grid; position:relative;\r\n  \/* Cu\u00e1nto baja el conjunto aro + esferas para que el arco ENTRE en la\r\n     banda de la secci\u00f3n 2 y quede cortado por ella, como en la referencia.\r\n     El producto NO se mueve con ellos.\r\n     Si el aro queda flotando sobre la banda, sube este n\u00famero.\r\n     Si las esferas bajan demasiado, b\u00e1jalo y compensa subiendo la banda\r\n     con el margin-top negativo de la secci\u00f3n 2. *\/\r\n  --baja-aro: 13em;\r\n}\r\n\/* --sube-texto mueve titular, p\u00e1rrafo y trazo como un solo bloque *\/\r\n.cdz-right{\r\n  grid-column:5 span; align-self:center; text-align:center; padding-left:2em;\r\n  --sube-texto: 4em;\r\n  transform: translateY(calc(-1 * var(--sube-texto)));\r\n}\r\n.cdz-right .cdz-paragraph{ margin-inline:auto; }\r\n@media (max-width:991px){\r\n  .cdz-left,.cdz-right{ grid-column:6 span; }\r\n  .cdz-right{ order:-1; margin-bottom:1em; text-align:center; --sube-texto:0em; }\r\n  .cdz-paragraph{ margin-inline:auto; }\r\n}\r\n\r\n\/* Visual y cifras comparten celda: por eso las cifras flotan encima *\/\r\n.cdz-visual{ pointer-events:none; z-index:1; grid-area:1\/1; justify-content:center; align-items:flex-start; margin-left:auto; display:flex; width:100%; }\r\n.cdz-facts { grid-area:1\/1; z-index:2; position:relative; pointer-events:none; }\r\n\/* ---------------------------------------------------------------------\r\n   EL ARO\r\n   Aro blanco grueso. Se sale del encuadre a prop\u00f3sito, igual que la ref.\r\n   --RADIO define su tama\u00f1o y tambi\u00e9n d\u00f3nde se sientan las burbujas.\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-bg{ grid-area:1\/1; display:grid; place-items:center; z-index:0; position:relative;\r\n  transform: translateY(var(--baja-aro, 0)); }\r\n.cdz-aro{\r\n  --radio: 22em;              \/* 24.2% del ancho, medido en la referencia. Debe coincidir con .cdz-facts-centro *\/\r\n  width: calc(var(--radio) * 2);\r\n  height: calc(var(--radio) * 2);\r\n  position: relative;\r\n}\r\n\/* El aro es un SVG y no un borde CSS: un borde no se puede dibujar\r\n   progresivamente. El grosor se controla desde el atributo stroke-width\r\n   del path, en el marcado, donde est\u00e1 explicada la equivalencia. *\/\r\n.cdz-aro-svg{ width:100%; height:100%; display:block; overflow:visible; }\r\n.cdz-aro-svg path{ stroke:var(--cdz-blanco); }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   COLOCACI\u00d3N DEL PRODUCTO\r\n   En la referencia el envase no est\u00e1 centrado ni recto: va inclinado en\r\n   diagonal, corrido dentro del aro y desbord\u00e1ndolo por arriba y por abajo.\r\n   Estas cuatro perillas lo controlan todo:\r\n     --corre-x   negativo lo mueve a la izquierda, positivo a la derecha\r\n     --corre-y   negativo lo sube, positivo lo baja\r\n     --inclina   positivo inclina la parte de arriba hacia la derecha\r\n     --escala    m\u00e1s de 1 lo agranda y hace que desborde el aro\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-stage model-viewer{\r\n  width:100%; height:36em;\r\n  background:transparent; --poster-color:transparent;\r\n\r\n  --corre-x: 22%;    \/* medido: 14% dejaba la caja 50px dentro de la esfera *\/\r\n  --corre-y: -5%;    \/* un poco m\u00e1s abajo *\/\r\n  --inclina:  3deg;  \/* casi recto *\/\r\n  --escala:  1.08;\r\n\r\n  \/* Realce de color. 1 = sin cambio. Subir --satura da m\u00e1s viveza;\r\n     pasar de 1.35 empieza a quemar los naranjas del empaque. *\/\r\n  --satura:   1.18;\r\n  --contraste:1.05;\r\n  filter: saturate(var(--satura)) contrast(var(--contraste));\r\n\r\n  transform:\r\n    translate(var(--corre-x), var(--corre-y))\r\n    rotate(var(--inclina))\r\n    scale(var(--escala));\r\n  transform-origin: center center;\r\n}\r\n\/* model-viewer pinta una barra de progreso gris en su borde superior\r\n   mientras carga. Se anula por CSS y adem\u00e1s con un slot vac\u00edo en el HTML. *\/\r\n.cdz-stage model-viewer::part(default-progress-bar){ display:none; }\r\n@media (max-width:767px){\r\n  \/* En m\u00f3vil se endereza y se achica: inclinado no cabe *\/\r\n  .cdz-stage model-viewer{ height:24em; --inclina:2deg; --escala:1; --corre-x:0%; --corre-y:0%; }\r\n}\r\n\r\n\/* ---------------------------------------------------------------------\r\n   BURBUJAS DE INFO\r\n   Cada una se coloca por \u00c1NGULO sobre el aro, no por top\/left.\r\n   0deg = derecha \u00b7 90deg = abajo \u00b7 180deg = izquierda \u00b7 270deg = arriba\r\n   Para mover una burbuja, cambia solo su --ang.\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-facts{ grid-area:1\/1; z-index:2; position:relative; display:grid; place-items:center;\r\n  \/* El mismo desplazamiento que el aro: van solidarias o se despegan *\/\r\n  transform: translateY(var(--baja-aro, 0)); }\r\n.cdz-facts-centro{\r\n  --radio: 22em;              \/* debe coincidir con el del aro *\/\r\n  width: calc(var(--radio) * 2);\r\n  height: calc(var(--radio) * 2);\r\n  position: relative;\r\n}\r\n\/* El contenedor se encarga SOLO de la posici\u00f3n sobre el aro. La esfera va\r\n   suelta por dentro, as\u00ed el empuj\u00f3n del mouse puede moverla sin sacarla\r\n   del arco. Si el transform estuviera en la esfera, ambos se pisar\u00edan. *\/\r\n.cdz-fact-outer{\r\n  position:absolute; top:50%; left:50%;\r\n  transform:\r\n    translate(-50%,-50%)\r\n    rotate(var(--ang))\r\n    translate(var(--radio, 22em))\r\n    rotate(calc(-1 * var(--ang)));\r\n}\r\n.cdz-fact{\r\n  width:7.5em; height:7.5em;\r\n  border-radius:50%;\r\n  background:var(--cdz-burbuja);\r\n  display:grid; place-items:center; text-align:center;\r\n  padding:.7em;\r\n  pointer-events:auto;\r\n}\r\n\/* Posici\u00f3n sobre el aro. El grupo va desplazado hacia ARRIBA del c\u00edrculo\r\n   (centrado en 208\u00b0, no en 180\u00b0). Con esferas de 7.5em, 26\u00b0 entre una y\r\n   otra conserva 1.5em de aire. Si cambias el tama\u00f1o de la esfera, ajusta\r\n   tambi\u00e9n este \u00e1ngulo o el hueco se descuadra. *\/\r\n\/* Bajar los tres n\u00fameros las desliza hacia abajo por el arco.\r\n   Acercarlos entre s\u00ed las junta: 23\u00b0 deja 1.3em de aire con esferas\r\n   de 7.5em sobre un radio de 22em. Por debajo de 20\u00b0 se tocan. *\/\r\n.cdz-fact-outer.es-1{ --ang: 238deg; }   \/* la de m\u00e1s arriba *\/\r\n.cdz-fact-outer.es-2{ --ang: 215deg; }\r\n.cdz-fact-outer.es-3{ --ang: 192deg; }   \/* la de m\u00e1s abajo *\/\r\n\r\n.cdz-fact-txt{ font-size:1.45em; line-height:88%; font-weight:600; }\r\n.cdz-fact-sub{ font-size:.95em; line-height:92%; font-weight:500; margin-top:.25em; }\r\n.cdz-fact-num{ font-size:2.5em; line-height:70%; font-weight:600; }\r\n.cdz-fact-unit{ font-size:1.2em; font-weight:600; }\r\n\r\n\/* En m\u00f3vil el aro no cabe: las burbujas pasan a fila *\/\r\n@media (max-width:991px){\r\n  .cdz-left{ --baja-aro: 0em; }\r\n  .cdz-aro{ --radio:12em; }\r\n  .cdz-facts{ place-items:end center; }\r\n  .cdz-facts-centro{\r\n    width:100%; height:auto;\r\n    display:flex; justify-content:center; gap:.6em; flex-wrap:wrap;\r\n  }\r\n  .cdz-fact-outer{ position:static; transform:none; }\r\n  .cdz-fact{ width:8em; height:8em; }\r\n}\r\n\r\n\/* Bot\u00f3n *\/\r\n.cdz-boton{\r\n  position:relative; display:inline-flex; align-items:center; gap:.5em;\r\n  padding:.55em 1em .65em; border-radius:99em; overflow:hidden;\r\n  background:var(--cdz-acento); color:var(--cdz-blanco);\r\n  text-decoration:none !important; border:0; cursor:pointer;\r\n  letter-spacing:-.02em;\r\n  transition:background .3s var(--cdz-ease);\r\n}\r\n.cdz-boton:hover{ background:var(--cdz-oscuro); color:var(--cdz-blanco); }\r\n.cdz-boton:focus-visible{ outline:3px solid var(--cdz-oscuro); outline-offset:3px; }\r\n.cdz-flecha{ width:.85em; height:.85em; flex:none; overflow:hidden; position:relative; }\r\n.cdz-flecha svg{ width:100%; height:100%; display:block; fill:currentColor; transition:transform .45s var(--cdz-ease); }\r\n.cdz-flecha svg:nth-child(2){ position:absolute; inset:0; transform:translate(-100%,100%); }\r\n.cdz-boton:hover .cdz-flecha svg:nth-child(1){ transform:translate(100%,-100%); }\r\n.cdz-boton:hover .cdz-flecha svg:nth-child(2){ transform:translate(0,0); }\r\n\r\n\/* Hueco de asset pendiente *\/\r\n\/* ---------------------------------------------------------------------\r\n   BLOQUE MANUSCRITO\r\n   Texto a mano + flecha que apunta a la primera esfera.\r\n   Caveat es la tipograf\u00eda manuscrita gratuita m\u00e1s parecida a la de la\r\n   referencia: monolineal, inclinada y de trazo natural.\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-deco{ position:absolute; top:12%; left:9%; width:12.5em; z-index:3; }\r\n.cdz-manuscrito{\r\n  font-family:'Caveat', cursive;\r\n  \/* Corta la herencia del eje de ancho que .cdz-stage aplica a Archivo.\r\n     Caveat no tiene ese eje, y heredarlo puede anular el font-weight\r\n     y hacerla ver m\u00e1s delgada de lo declarado. *\/\r\n  font-variation-settings: normal;\r\n  font-weight:600;\r\n  font-size:1.55em;\r\n  line-height:100%;\r\n  letter-spacing:0;          \/* Caveat no necesita el tracking negativo *\/\r\n  color:var(--cdz-oscuro);\r\n  transform:rotate(-4deg);   \/* apenas torcido, como escrito a mano *\/\r\n  transform-origin:left top;\r\n}\r\n.cdz-manuscrito .sangria{ padding-left:.5em; display:block; }\r\n.cdz-flecha-deco{\r\n  width:4.2em; margin-left:1.2em; margin-top:.4em;\r\n  color:var(--cdz-blanco);\r\n  display:block;\r\n}\r\n.cdz-flecha-deco path{ stroke:currentColor; }\r\n\r\n@media (prefers-reduced-motion: no-preference){\r\n  .cdz-stage .es-wiggle{ animation:cdzWiggle .8s steps(7,end) infinite; }\r\n}\r\n@keyframes cdzWiggle{\r\n  0%{transform:translateY(1px)} 20%{transform:translate(-1px,-1px)} 32%{transform:translate(0)}\r\n  48%{transform:translate(1px,1px)} 64%{transform:translate(-1px,0)} 80%{transform:translate(0,-1px)}\r\n  100%{transform:translateY(1px)}\r\n}\r\n.cdz-anim{ opacity:0; }\r\n\r\n\/* EL LOGO TAMBI\u00c9N ARRANCA INVISIBLE, Y ESTO ARREGLA EL DESTELLO.\r\n\r\n   Antes solo lo escond\u00eda GSAP, dentro de centraLogo(). Pero el\r\n   navegador pinta la p\u00e1gina en cuanto la tiene, y GSAP llega despu\u00e9s:\r\n   en ese intervalo \u2014medido en v\u00eddeo, unos 0.6 segundos\u2014 el logo se ve\u00eda\r\n   peque\u00f1o y arriba, en su sitio de maquetaci\u00f3n. Luego desaparec\u00eda de\r\n   golpe y arrancaba la intro con \u00e9l grande en el centro. Ese era el\r\n   parpadeo.\r\n\r\n   Escondi\u00e9ndolo desde el CSS no hay intervalo posible: nace invisible y\r\n   lo enciende la intro cuando ya est\u00e1 colocado en el centro.\r\n\r\n   OJO: esto obliga a encenderlo en TODOS los caminos posibles. Si alg\u00fan\r\n   d\u00eda se a\u00f1ade una salida temprana al script \u2014como la de movimiento\r\n   reducido\u2014 hay que acordarse de darle opacidad ah\u00ed tambi\u00e9n, o el logo\r\n   no aparece nunca. *\/\r\n[data-cdz-logo]{ opacity:0; }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   PANTALLA DE CARGA\r\n   Cubre todo con el color del hero mientras cargan fuentes y video.\r\n   Se retira sola y deja el logo anim\u00e1ndose en una pantalla vac\u00eda.\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-loader{\r\n  position:fixed; inset:0; z-index:9998;\r\n  background:var(--cdz-fondo-claro);\r\n  display:grid; place-content:end end;\r\n  padding:2.5em;\r\n  transition:opacity .5s ease, visibility .5s ease;\r\n}\r\n.cdz-loader::after{\r\n  content:\"\"; width:1.25em; height:1.25em;\r\n  border:.125em solid var(--cdz-oscuro);\r\n  border-bottom-color:transparent; border-radius:50%;\r\n  display:inline-block; box-sizing:border-box;\r\n  animation:cdzGira 1s linear infinite;\r\n}\r\n@keyframes cdzGira{ to{ transform:rotate(360deg); } }\r\n\r\n\/* Cuando el documento queda listo, el loader desaparece *\/\r\nhtml.cdz-listo .cdz-loader{ opacity:0; visibility:hidden; pointer-events:none; }\r\n\r\n\/* RED DE SEGURIDAD. Todo el contenido de la portada arranca en\r\n   opacity:0 esperando que GSAP lo encienda. Si GSAP no llega, quitar la\r\n   cortina no bastar\u00eda: quedar\u00eda una pantalla del color del fondo y nada\r\n   m\u00e1s.\r\n\r\n   Con esta clase se enciende todo de golpe, sin animaci\u00f3n. Es el plan B:\r\n   se pierde la entrada, no la p\u00e1gina. *\/\r\nhtml.cdz-rendido .cdz-anim{ opacity:1 !important; }\r\nhtml.cdz-rendido [data-cdz-logo]{ opacity:1 !important; transform:none !important; }\r\n\r\n\/* Durante la intro el logo se desplaza al centro de la pantalla y el\r\n   overflow:clip del hero lo cortar\u00eda. Se libera solo mientras dura. *\/\r\n.cdz-stage.cdz-intro{ overflow:visible; }\r\n\r\n\/* Sin esto, liberar el recorte deja que el producto (desplazado 9% y\r\n   escalado 1.12) ensanche el documento y aparezca una barra horizontal,\r\n   que es la franja blanca del borde derecho. *\/\r\nhtml, body{ overflow-x:clip; }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   Las secciones 1 y 2 van dentro de este \u00fanico bloque, en un solo widget\r\n   de Elementor. Separarlas en dos contenedores hace que el contenedor\r\n   recorte el aro justo en el borde entre ambas.\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-bloque{ position:relative; overflow-x:clip; }\r\n\r\n\/* El logo va por encima del loader para que se vea anim\u00e1ndose solo *\/\r\n.cdz-logo{ position:relative; z-index:9999; }\r\n\r\n.cdz-marquee{\r\n  --cdz-unit: 16;\r\n  --cdz-ideal: 1440;\r\n  --cdz-min: 992px;\r\n  --cdz-max: 2560px;\r\n  --cdz-cont: clamp(var(--cdz-min), 100vw, var(--cdz-max));\r\n\r\n  \/* Mismos colores que la secci\u00f3n 1 *\/\r\n  --cdz-blanco:       #FFFFFF;\r\n  --cdz-burbuja:      #D9EAFF;\r\n  --cdz-fondo-claro:  #80B3F4;   \/* debe ser id\u00e9ntico al de la secci\u00f3n 1 *\/\r\n  --cdz-palido:       #A7C9F9;   \/* fondo de la secci\u00f3n siguiente *\/\r\n  --cdz-oscuro:       #0A3C75;   \/* color de la banda *\/\r\n\r\n  font-size: calc(var(--cdz-cont) \/ (var(--cdz-ideal) \/ var(--cdz-unit)));\r\n  font-family: 'Archivo', Arial, sans-serif;\r\n  \/* SIN fondo propio: este bloque sube 10em sobre el hero, y un fondo\r\n     opaco pintar\u00eda un rect\u00e1ngulo encima del aro y lo cortar\u00eda en seco.\r\n     Solo debe pintar el SVG; encima de la curva queda transparente\r\n     y se ve el aro de la secci\u00f3n 1 pasando por detr\u00e1s. *\/\r\n  background-color: transparent;\r\n\r\n  \/* Sube sobre el hero para que la banda corte el aro por encima.\r\n     Junto con --baja-aro de la secci\u00f3n 1, controla cu\u00e1nto del arco\r\n     queda tapado. M\u00e1s negativo = la banda sube y tapa m\u00e1s. *\/\r\n  \/* -22em = los -10em de solape original mas los 12em que creci\u00f3 el\r\n     padding inferior del hero. As\u00ed la banda no se mueve de sitio. *\/\r\n  margin-top: -25em;\r\n  position: relative;\r\n  z-index: 2;\r\n  line-height: 0;              \/* elimina el hueco bajo el SVG *\/\r\n  overflow: clip;\r\n}\r\n@media (max-width:991px){ .cdz-marquee{ --cdz-ideal:640; --cdz-min:768px; --cdz-max:991px; margin-top:-5em; } }\r\n@media (max-width:767px){ .cdz-marquee{ --cdz-ideal:550; --cdz-min:480px; --cdz-max:767px; } }\r\n@media (max-width:479px){ .cdz-marquee{ --cdz-ideal:390; --cdz-min:320px; --cdz-max:479px; } }\r\n\r\n.cdz-marquee-svg{ width:100%; height:auto; display:block; }\r\n\r\n\/* El texto de la banda. May\u00fasculas y condensado, como el resto del sitio. *\/\r\n.cdz-marquee-texto{\r\n  font-family: 'Archivo', Arial, sans-serif;\r\n  font-variation-settings: 'wdth' 78;\r\n  font-weight: 600;\r\n  font-size: 105px;             \/* en unidades del viewBox, no de pantalla.\r\n                                   Proporcional a la banda de 190. *\/\r\n  letter-spacing: 4px;\r\n  text-transform: uppercase;\r\n  fill: var(--cdz-burbuja);\r\n}\r\n\r\n\/* Zona de la secci\u00f3n siguiente, para que la curva tenga contra qu\u00e9 recortarse *\/\r\n.cdz-marquee-abajo{ background: var(--cdz-palido); height:4em; }\r\n\r\n<\/style>\r\n\r\n<div class=\"cdz-bloque\">\r\n\r\n<div class=\"cdz-loader\" data-cdz-loader><\/div>\r\n<script>\r\n\/* \u00daLTIMO CERROJO DE LA CORTINA, y va aqu\u00ed a prop\u00f3sito: pegado al loader,\r\n   sin depender de GSAP ni de ninguna librer\u00eda externa.\r\n\r\n   Los dos cerrojos anteriores viven dentro del script principal. Si ese\r\n   script no llegara a ejecutarse \u2014un error de sintaxis al editarlo, un\r\n   bloqueo del navegador, un plugin de seguridad que lo filtre\u2014 la\r\n   cortina se quedar\u00eda puesta y no habr\u00eda nada que la quitara.\r\n\r\n   Este no puede fallar por eso: son diez l\u00edneas sueltas que corren\r\n   solas. Espera a que la p\u00e1gina termine de cargar y, pase lo que pase,\r\n   a los 10 segundos la retira. Si la intro ya arranc\u00f3, no hace nada:\r\n   'cdz-listo' ya estar\u00e1 puesta y a\u00f1adirla otra vez no cambia nada. *\/\r\n(function(){\r\n  var raiz = document.documentElement;\r\n  function abre(){\r\n    if(raiz.classList.contains('cdz-listo')) return;\r\n    console.warn('CDZ \u00b7 la intro no arranc\u00f3 a tiempo; se retira la pantalla de carga');\r\n    raiz.classList.add('cdz-listo');\r\n    raiz.classList.add('cdz-rendido');\r\n  }\r\n  setTimeout(abre, 10000);\r\n  window.addEventListener('load', function(){ setTimeout(abre, 4000); });\r\n})();\r\n<\/script>\r\n\r\n<section class=\"cdz-stage\" id=\"cdz-inicio\" data-cdz-stage data-cdz-inercia>\r\n  <div class=\"cdz-container\">\r\n    <div class=\"cdz-content\">\r\n\r\n      <div class=\"cdz-logo\" data-cdz-logo>\r\n        <video\r\n          data-cdz-logo-video\r\n          muted playsinline preload=\"auto\"\r\n          poster=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/06\/CDZ-VIT.webp\"\r\n          aria-label=\"CDZ Vit\">\r\n          <!-- Cuando tengas el WebM con alfa, va PRIMERO: el navegador toma\r\n               la primera fuente que soporte, y as\u00ed Chrome usa el transparente\r\n               y Safari cae al MP4. -->\r\n          <!-- <source src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/logo-cdz.webm\" type=\"video\/webm\"> -->\r\n          <source src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/LETTERS-ANIMATION-CDZ-BLU2.mp4\" type=\"video\/mp4\">\r\n        <\/video>\r\n      <\/div>\r\n\r\n      <div class=\"cdz-cta cdz-anim\" data-cdz-cta>\r\n        <a href=\"#donde-comprarlo\" class=\"cdz-boton\" onclick=\"try{sessionStorage.setItem('cdz-origen','inicio')}catch(e){}\">\r\n          <span class=\"cdz-flecha\">\r\n            <svg viewBox=\"0 0 10 10\"><path fill-rule=\"evenodd\" d=\"M0 1.827 1.71 0H10v8.22L8.11 10V5.93c0-.992.009-1.89.03-2.695l-6.642 6.58-1.316-1.44 6.641-6.58c-.787.022-1.67.032-2.647.032H0Z\" clip-rule=\"evenodd\"\/><\/svg>\r\n            <svg viewBox=\"0 0 10 10\"><path fill-rule=\"evenodd\" d=\"M0 1.827 1.71 0H10v8.22L8.11 10V5.93c0-.992.009-1.89.03-2.695l-6.642 6.58-1.316-1.44 6.641-6.58c-.787.022-1.67.032-2.647.032H0Z\" clip-rule=\"evenodd\"\/><\/svg>\r\n          <\/span>\r\n          <span class=\"cdz-boton-txt\">\u00bfD\u00f3nde comprarlo?<\/span>\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <div class=\"cdz-wrap\">\r\n        <div class=\"cdz-left\">\r\n\r\n          <div class=\"cdz-bg\">\r\n            <div class=\"cdz-aro cdz-anim\" data-cdz-aro>\r\n              <svg class=\"cdz-aro-svg\" viewBox=\"0 0 200 200\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n                <!-- Empieza en el punto IZQUIERDO (0,100) y va en sentido\r\n                     horario: sube, cruza por arriba hacia la derecha y cierra. -->\r\n                <!-- Grosor: stroke-width 7.5 equivale a 1.5em sobre un radio de\r\n                     20em. El radio del arco (96.25) es 100 menos la mitad del\r\n                     grosor, para que el borde exterior no se mueva al engrosar.\r\n                     Si cambias uno, recalcula el otro: r = 100 - grosor\/2 -->\r\n                <!-- Arranca en el punto INFERIOR, donde el aro se encuentra\r\n                     con la banda de la secci\u00f3n 2, y sube por el lado\r\n                     IZQUIERDO hasta cerrar por la derecha.\r\n                     La bandera de barrido (el 1 antes de cada destino) es\r\n                     la que manda el sentido: con 0 girar\u00eda al rev\u00e9s. -->\r\n                <path data-cdz-aro-trazo\r\n                      d=\"M 100,196.25\r\n                         A 96.25,96.25 0 0 1 3.75,100\r\n                         A 96.25,96.25 0 0 1 100,3.75\r\n                         A 96.25,96.25 0 0 1 196.25,100\r\n                         A 96.25,96.25 0 0 1 100,196.25\"\r\n                      stroke=\"currentColor\" stroke-width=\"7.5\"\r\n                      stroke-linecap=\"round\" fill=\"none\"\r\n                      style=\"color:var(--cdz-blanco)\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"cdz-visual cdz-anim\" data-cdz-visual>\r\n            <!-- \u2193\u2193\u2193 CAMBIA ESTA URL POR LA DE TU BIBLIOTECA DE MEDIOS \u2193\u2193\u2193 -->\r\n            <model-viewer\r\n              id=\"cdzCaja\"\r\n              src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/07\/NEW-CAJA-X-10-CDZ.glb\"\r\n              alt=\"Caja de CDZ Vit por 10 sobres\"\r\n              camera-orbit=\"20deg 78deg 0.32m\"\r\n              field-of-view=\"26deg\"\r\n              interaction-prompt=\"none\"\r\n              disable-zoom disable-pan\r\n              shadow-intensity=\"1.1\" shadow-softness=\"0.9\"\r\n              exposure=\"1.0\" environment-image=\"neutral\"\r\n              tone-mapping=\"commerce\"\r\n              loading=\"eager\" reveal=\"auto\">\r\n              <div slot=\"progress-bar\"><\/div>\r\n            <\/model-viewer>\r\n          <\/div>\r\n\r\n          <div class=\"cdz-facts\">\r\n            <div class=\"cdz-facts-centro\">\r\n\r\n              <div class=\"cdz-fact-outer es-1\" data-cdz-inercia-item>\r\n                <div class=\"cdz-fact cdz-anim\" data-cdz-fact data-cdz-inercia-hijo>\r\n                  <div class=\"cdz-fact-txt\">Sin<br>az\u00facar<\/div>\r\n                <\/div>\r\n              <\/div>\r\n\r\n              <div class=\"cdz-fact-outer es-2\" data-cdz-inercia-item>\r\n                <div class=\"cdz-fact cdz-anim\" data-cdz-fact data-cdz-inercia-hijo>\r\n                  <div class=\"cdz-fact-txt\">Sabor<br>naranja<\/div>\r\n                <\/div>\r\n              <\/div>\r\n\r\n              <div class=\"cdz-fact-outer es-3\" data-cdz-inercia-item>\r\n                <div class=\"cdz-fact cdz-anim\" data-cdz-fact data-cdz-inercia-hijo>\r\n                  <div class=\"cdz-fact-txt\">Sobre<\/div>\r\n                  <div><span class=\"cdz-fact-num\">3<\/span><span class=\"cdz-fact-unit\">g<\/span><\/div>\r\n                <\/div>\r\n              <\/div>\r\n\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"cdz-deco cdz-anim\" data-cdz-deco>\r\n            <div class=\"cdz-manuscrito\">\r\n              F\u00f3rmula combinada<span class=\"sangria\">en un solo sobre<\/span>\r\n            <\/div>\r\n            <svg class=\"cdz-flecha-deco\" viewBox=\"0 0 120 100\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n              <path data-cdz-flecha d=\"M10,6 C4,42 12,74 46,88\"\r\n                    stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\r\n              <path data-cdz-flecha-punta d=\"M46,88 L30,86 M46,88 L40,72\"\r\n                    stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"cdz-right\">\r\n          <h1 class=\"cdz-heading cdz-anim\" data-cdz-titulo>\r\n            Dos vitaminas y un mineral,<br><span class=\"cdz-resalte\">en un solo sobre<\/span>\r\n          <\/h1>\r\n          <p class=\"cdz-paragraph cdz-anim\" data-cdz-parrafo>\r\n            Vitamina C (1000mg), Vitamina D (1000UI) y Zinc (40mg) en una sola toma diaria.<br>\r\n            <span class=\"cdz-subrayado\">Sin az\u00facar, sabor naranja.<!--\r\n           --><svg class=\"cdz-trazo\" viewBox=\"0 0 420 26\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n                <!-- Para cambiar de trazo, reemplaza el valor de d por una de estas:\r\n                     onda amplia   M6,14 C70,6 130,20 200,13 C270,6 330,20 414,11\r\n                     arco simple   M8,9 C120,24 300,24 412,9\r\n                     pluma tenue   M6,15 C80,11 160,10 240,12 C300,13.5 350,16 392,13   -->\r\n                <path data-cdz-trazo\r\n                      d=\"M8,14 C90,10 200,9 300,11 C350,12 386,14 404,10 C410,8.5 411,6 406,6\"\r\n                      stroke=\"currentColor\" stroke-width=\"2.6\"\r\n                      stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n              <\/svg><!--\r\n         --><\/span>\r\n          <\/p>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<section class=\"cdz-marquee\" data-cdz-marquee>\r\n  <svg class=\"cdz-marquee-svg\" viewBox=\"0 0 1440 500\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n\r\n    <!-- 1. Relleno p\u00e1lido bajo la curva: es el fondo de lo que sigue.\r\n            Es la misma curva desplazada hacia abajo la mitad del grosor. -->\r\n    <path d=\"M -120 535 C 340 345, 660 245, 920 243 C 1180 241, 1400 305, 1580 395 L 1580 620 L -120 620 Z\" fill=\"var(--cdz-palido)\"\/>\r\n\r\n    <!-- 2. La banda: trazo muy grueso sobre la curva.\r\n            190 sobre un viewBox de 1440 = 13% del ancho. -->\r\n    <path d=\"M -120 440 C 340 250, 660 150, 920 148 C 1180 146, 1400 210, 1580 300\" fill=\"none\" stroke=\"var(--cdz-oscuro)\" stroke-width=\"190\"\/>\r\n\r\n    <!-- 3. La misma curva, invisible, sirve de riel al texto -->\r\n    <path id=\"cdzRiel\" d=\"M -120 440 C 340 250, 660 150, 920 148 C 1180 146, 1400 210, 1580 300\" fill=\"none\"\/>\r\n\r\n    <text class=\"cdz-marquee-texto\" dominant-baseline=\"middle\">\r\n      <textPath data-cdz-marquee-texto href=\"#cdzRiel\" startOffset=\"-22%\">\r\n        Suplemento dietario \u00b7 Suplemento dietario \u00b7 Suplemento dietario \u00b7 Suplemento dietario \u00b7 Suplemento dietario<\/textPath>\r\n    <\/text>\r\n  <\/svg>\r\n\r\n  <div class=\"cdz-marquee-abajo\"><\/div>\r\n<\/section>\r\n\r\n<\/div>\r\n\r\n\r\n<script type=\"module\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/model-viewer\/3.5.0\/model-viewer.min.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/@lottiefiles\/lottie-player@2.0.8\/dist\/lottie-player.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/ScrollTrigger.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/DrawSVGPlugin.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/SplitText.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/InertiaPlugin.min.js\"><\/script>\r\n<script>\r\n(function(){\r\n  \/* ------------------------------------------------------------------\r\n     EL GUARDI\u00c1N COMPRUEBA TODAS LAS LIBRER\u00cdAS QUE VA A USAR, no solo dos.\r\n\r\n     Aqu\u00ed estaba el fallo de la intro que se quedaba pegada a veces. La\r\n     condici\u00f3n esperaba a gsap y ScrollTrigger, pero la l\u00ednea siguiente\r\n     registraba adem\u00e1s DrawSVGPlugin y SplitText, que llegan en archivos\r\n     APARTE. Si ScrollTrigger terminaba de bajar antes que ellos \u2014cosa\r\n     que depende de la red, y por eso pasaba solo a ratos\u2014 la condici\u00f3n\r\n     daba v\u00eda libre, la l\u00ednea de registro encontraba DrawSVGPlugin sin\r\n     definir y lanzaba un error.\r\n\r\n     Al morir ah\u00ed ya no se ejecutaba nada m\u00e1s: ni se retiraba la cortina\r\n     de carga, ni arrancaba el logo, ni entraba el resto. Pantalla fija\r\n     con el girador dando vueltas para siempre.\r\n\r\n     Ahora se esperan las cuatro, y cada plugin se registra solo si de\r\n     verdad est\u00e1: si alguno no llegara, la p\u00e1gina funciona sin \u00e9l en vez\r\n     de no funcionar en absoluto.\r\n\r\n     ESPERA_LIBS pone un techo a esa espera. Sin \u00e9l, una librer\u00eda que no\r\n     llega nunca deja el bucle corriendo indefinidamente y la cortina\r\n     puesta.\r\n     ------------------------------------------------------------------ *\/\r\n  var ESPERA_LIBS = 8000;\r\n  var t0 = Date.now();\r\n\r\n  function rendirse(){\r\n    \/* Sin librer\u00edas no hay animaci\u00f3n posible, pero la p\u00e1gina tiene que\r\n       poder leerse igual: se quita la cortina y se enciende todo lo que\r\n       estaba esperando una entrada que ya no va a llegar. *\/\r\n    console.warn('CDZ \u00b7 las librer\u00edas de animaci\u00f3n no cargaron; se muestra la p\u00e1gina sin animar');\r\n    document.documentElement.classList.add('cdz-listo');\r\n    document.documentElement.classList.add('cdz-rendido');\r\n  }\r\n\r\n  function arranca(){\r\n    if(!window.gsap || !window.ScrollTrigger || !window.DrawSVGPlugin || !window.SplitText){\r\n      if(Date.now() - t0 > ESPERA_LIBS) return rendirse();\r\n      return setTimeout(arranca, 60);\r\n    }\r\n    gsap.registerPlugin(ScrollTrigger);\r\n    if(window.DrawSVGPlugin) gsap.registerPlugin(DrawSVGPlugin);\r\n    if(window.SplitText)     gsap.registerPlugin(SplitText);\r\n    if(window.InertiaPlugin) gsap.registerPlugin(InertiaPlugin);\r\n\r\n    var quieto = matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n    var caja = document.getElementById('cdzCaja');\r\n\r\n    \/* El GLB viene met\u00e1lico y pulido; el cart\u00f3n debe ser mate *\/\r\n    if(caja){\r\n      caja.addEventListener('load', function(){\r\n        console.log('CDZ \u00b7 modelo cargado');\r\n        caja.model.materials.forEach(function(m){\r\n          m.pbrMetallicRoughness.setMetallicFactor(0);\r\n          m.pbrMetallicRoughness.setRoughnessFactor(0.6);\r\n        });\r\n      });\r\n      caja.addEventListener('error', function(e){\r\n        console.error('CDZ \u00b7 el modelo NO carg\u00f3:', e.detail);\r\n      });\r\n    }\r\n\r\n    if(quieto){\r\n      \/* Sin animaci\u00f3n no hay intro, as\u00ed que hay que hacer a mano lo que\r\n         ella har\u00eda: encender el contenido, encender el logo \u2014que ahora\r\n         nace invisible por CSS\u2014 y retirar la cortina de carga. *\/\r\n      gsap.set('.cdz-anim', {opacity:1});\r\n      gsap.set('[data-cdz-logo]', {opacity:1});\r\n      document.documentElement.classList.add('cdz-listo');\r\n      return;\r\n    }\r\n\r\n\r\n    \/* ---------------------------------------------------------------\r\n       SECCI\u00d3N 2 \u00b7 el texto de la banda se desplaza con el scroll\r\n       --------------------------------------------------------------- *\/\r\n    (function(){\r\n      var INICIO    = -22;\r\n      var RECORRIDO = -30;   \/* m\u00e1s negativo = el texto viaja m\u00e1s *\/\r\n      document.querySelectorAll('[data-cdz-marquee]').forEach(function(zona){\r\n        var texto = zona.querySelector('[data-cdz-marquee-texto]');\r\n        if(!texto) return;\r\n        gsap.fromTo(texto,\r\n          { attr:{ startOffset: INICIO + '%' } },\r\n          { attr:{ startOffset: (INICIO + RECORRIDO) + '%' },\r\n            ease:'none',\r\n            scrollTrigger:{ trigger: zona, start:'top bottom', end:'bottom top', scrub:true } });\r\n      });\r\n    })();\r\n\r\n    var logoVid = document.querySelector('[data-cdz-logo-video]');\r\n\r\n    \/* ---------------------------------------------------------------\r\n       SECUENCIA DE ENTRADA, en tres tiempos:\r\n         1. loader tapando todo\r\n         2. cae el loader y la animaci\u00f3n del logo corre SOLA\r\n         3. al terminar el logo, entra el resto de la p\u00e1gina\r\n       --------------------------------------------------------------- *\/\r\n    function entraElResto(){\r\n      if(entraElResto.hecho) return;   \/* que no se dispare dos veces *\/\r\n      entraElResto.hecho = true;\r\n\r\n      var tl = gsap.timeline({ defaults:{ ease:'power3.out' } });\r\n\r\n      \/* ---------------------------------------------------------------\r\n         ORDEN DE ENTRADA, en segundos desde que el logo llega arriba.\r\n         Cada constante es el momento en que arranca ese elemento, as\u00ed que\r\n         para reordenar basta cambiar n\u00fameros, sin tocar las animaciones.\r\n\r\n           1. el aro\r\n           2. el producto\r\n           3. las esferas, el manuscrito y la flecha\r\n           4. el titular y el cuerpo de texto\r\n           5. el bot\u00f3n\r\n         --------------------------------------------------------------- *\/\r\n      var T_ARO     = 0.00;\r\n      var T_GLB     = 1.15;   \/* el aro termina en 1.0s; entra despu\u00e9s *\/\r\n      var T_ESFERAS = 1.95;\r\n      var T_TEXTO   = 2.55;\r\n      var T_BOTON   = 3.35;\r\n\r\n      \/* El aro se dibuja desde abajo. Su duraci\u00f3n es corta a prop\u00f3sito:\r\n         con power2.in casi todo el trazo se dibuja al final, as\u00ed que si\r\n         dura mucho parece que llega de \u00faltimas. *\/\r\n      var DURACION_ARO = 1.0;\r\n      var EASE_ARO     = 'power2.in';\r\n\r\n      \/* 1 \u00b7 EL ARO *\/\r\n      gsap.set('[data-cdz-aro]', {opacity:1});\r\n      tl.fromTo('[data-cdz-aro-trazo]',\r\n        {drawSVG:'0% 0%'},\r\n        {drawSVG:'0% 100%', duration:DURACION_ARO, ease:EASE_ARO}, T_ARO);\r\n\r\n      \/* 2 \u00b7 EL PRODUCTO *\/\r\n      tl.fromTo('[data-cdz-visual]',\r\n        {opacity:0, y:70, scale:.93},\r\n        {opacity:1, y:0, scale:1, duration:1.1}, T_GLB);\r\n\r\n      \/* 3 \u00b7 ESFERAS, MANUSCRITO Y FLECHA *\/\r\n      tl.fromTo('[data-cdz-fact]',\r\n        {opacity:0, scale:.5},\r\n        {opacity:1, scale:1, duration:.7, stagger:.12, ease:'back.out(1.7)'}, T_ESFERAS);\r\n      tl.fromTo('[data-cdz-deco]',\r\n        {opacity:0, y:14}, {opacity:1, y:0, duration:.6}, T_ESFERAS + .15);\r\n      tl.fromTo('[data-cdz-flecha]',\r\n        {drawSVG:'0% 0%'}, {drawSVG:'0% 100%', duration:.7, ease:'power2.inOut'}, T_ESFERAS + .35);\r\n      tl.fromTo('[data-cdz-flecha-punta]',\r\n        {opacity:0}, {opacity:1, duration:.25}, T_ESFERAS + 1.0);\r\n\r\n      \/* 4 \u00b7 TITULAR Y CUERPO DE TEXTO *\/\r\n      var lineas = new SplitText('[data-cdz-titulo]', {type:'lines', linesClass:'cdz-linea'});\r\n      gsap.set('[data-cdz-titulo]', {opacity:1});\r\n      tl.from(lineas.lines,\r\n        {yPercent:110, opacity:0, duration:.9, stagger:.09}, T_TEXTO);\r\n      tl.fromTo('[data-cdz-parrafo]',\r\n        {opacity:0, y:18}, {opacity:1, y:0, duration:.7}, T_TEXTO + .35);\r\n      tl.fromTo('[data-cdz-trazo]',\r\n        {drawSVG:'0% 0%'}, {drawSVG:'0% 100%', duration:.8, ease:'power2.inOut'}, T_TEXTO + .70);\r\n\r\n      \/* 5 \u00b7 EL BOT\u00d3N *\/\r\n      tl.fromTo('[data-cdz-cta]',\r\n        {opacity:0, y:18}, {opacity:1, y:0, duration:.7}, T_BOTON);\r\n\r\n      arrancaRotacion();\r\n      arrancaInercia();\r\n    }\r\n\r\n    \/* ---------------------------------------------------------------\r\n       EMPUJ\u00d3N CON INERCIA EN LAS ESFERAS\r\n       Al entrar el cursor, la esfera sale despedida en la direcci\u00f3n en\r\n       que se mov\u00eda el mouse, con un giro proporcional al componente\r\n       angular, y vuelve a su sitio con inercia.\r\n\r\n       Perillas:\r\n         FUERZA      multiplica el impulso lineal\r\n         GIRO        multiplica el giro\r\n         RESISTENCIA m\u00e1s alto = vuelve m\u00e1s r\u00e1pido y con menos rebote\r\n       --------------------------------------------------------------- *\/\r\n    function arrancaInercia(){\r\n      \/* Solo con puntero fino: en t\u00e1ctiles no hay hover y estorbar\u00eda *\/\r\n      if(!window.matchMedia('(hover: hover) and (pointer: fine)').matches) return;\r\n      if(typeof InertiaPlugin === 'undefined') return;\r\n\r\n      var FUERZA      = 30;\r\n      var GIRO        = 15;\r\n      var RESISTENCIA = 180;\r\n\r\n      var topeMov  = gsap.utils.clamp(-1080, 1080);\r\n      var topeGiro = gsap.utils.clamp(-60, 60);\r\n\r\n      document.querySelectorAll('[data-cdz-inercia]').forEach(function(zona){\r\n        var px = 0, py = 0, vx = 0, vy = 0, pendiente = null;\r\n\r\n        \/* La velocidad del mouse se mide una vez por frame, no en cada\r\n           evento: mousemove se dispara decenas de veces por segundo. *\/\r\n        zona.addEventListener('mousemove', function(ev){\r\n          if(pendiente) return;\r\n          pendiente = requestAnimationFrame(function(){\r\n            vx = ev.clientX - px;  vy = ev.clientY - py;\r\n            px = ev.clientX;       py = ev.clientY;\r\n            pendiente = null;\r\n          });\r\n        });\r\n\r\n        zona.querySelectorAll('[data-cdz-inercia-item]').forEach(function(item){\r\n          item.addEventListener('mouseenter', function(ev){\r\n            var hijo = item.querySelector('[data-cdz-inercia-hijo]');\r\n            if(!hijo) return;\r\n\r\n            var r  = hijo.getBoundingClientRect();\r\n            var dx = ev.clientX - (r.left + r.width\/2);\r\n            var dy = ev.clientY - (r.top  + r.height\/2);\r\n\r\n            \/* Producto cruzado: cu\u00e1nto \"de lado\" entr\u00f3 el cursor.\r\n               De ah\u00ed sale el giro, no de un valor fijo. *\/\r\n            var angular = (dx*vy - dy*vx) \/ (Math.hypot(dx,dy) || 1);\r\n\r\n            gsap.to(hijo, {\r\n              inertia:{\r\n                x:        { velocity: topeMov(FUERZA * vx), end: 0 },\r\n                y:        { velocity: topeMov(FUERZA * vy), end: 0 },\r\n                rotation: { velocity: topeGiro(GIRO * angular), end: 0 },\r\n                resistance: RESISTENCIA\r\n              }\r\n            });\r\n          });\r\n        });\r\n      });\r\n    }\r\n\r\n    \/* ---------------------------------------------------------------\r\n       AJUSTES DE LA INTRO\r\n         PAUSA_INICIAL  segundos de fondo solo, antes de que aparezca el logo\r\n         ANCHO_LOGO     qu\u00e9 porci\u00f3n del ancho de pantalla ocupa el logo grande\r\n         VIAJE          cu\u00e1nto tarda el logo en subir a su sitio\r\n       --------------------------------------------------------------- *\/\r\n    var PAUSA_INICIAL = 0.5;\r\n    var ANCHO_LOGO    = 0.42;\r\n    var VIAJE         = 1.1;\r\n    \/* Segundo del VIDEO en el que se corta y el logo empieza a subir.\r\n       No espera a que el archivo termine: en cuanto la reproducci\u00f3n llega\r\n       a este punto, arranca el movimiento. Medido en tiempo del video. *\/\r\n    var CORTE_EN = 3.6;\r\n    \/* Velocidad de reproducci\u00f3n. 1 = normal. *\/\r\n    var VELOCIDAD_LOGO = 1.3;\r\n\r\n    \/* Todo lo que no sea el logo arranca invisible: durante la intro\r\n       la pantalla debe tener solo el fondo y el logo. *\/\r\n    gsap.set('.cdz-anim', {opacity:0});\r\n\r\n    var logoEl = document.querySelector('[data-cdz-logo]');\r\n    var stageEl = document.querySelector('[data-cdz-stage]');\r\n\r\n    \/* Coloca el logo grande y centrado en la PANTALLA, calculando la\r\n       distancia desde donde vive en el layout hasta el centro del viewport. *\/\r\n    function centraLogo(){\r\n      gsap.set(logoEl, {x:0, y:0, scale:1});          \/* medir sin transformar *\/\r\n      var r  = logoEl.getBoundingClientRect();\r\n      var dx = window.innerWidth\/2  - (r.left + r.width\/2);\r\n      var dy = window.innerHeight\/2 - (r.top  + r.height\/2);\r\n      var escala = (window.innerWidth * ANCHO_LOGO) \/ r.width;\r\n      gsap.set(logoEl, {x:dx, y:dy, scale:escala, opacity:0, transformOrigin:'center center'});\r\n    }\r\n\r\n    \/* Paso 3: el logo viaja a su posici\u00f3n final y reci\u00e9n ah\u00ed entra todo *\/\r\n    function subeLogo(){\r\n      if(subeLogo.hecho) return;\r\n      subeLogo.hecho = true;\r\n\r\n      gsap.to(logoEl, {\r\n        x:0, y:0, scale:1,\r\n        duration: VIAJE,\r\n        ease:'power3.inOut',\r\n        onComplete:function(){\r\n          if(stageEl) stageEl.classList.remove('cdz-intro');  \/* restaurar el recorte *\/\r\n          entraElResto();\r\n        }\r\n      });\r\n    }\r\n\r\n    \/* Paso 2: fondo solo, luego aparece el logo grande y corre su animaci\u00f3n *\/\r\n    function arrancaLogo(){\r\n      \/* Cerrojo: esta funci\u00f3n la disparan el evento de carga, el temporizador\r\n         de respaldo y el manejador de error. Sin esto la intro corre dos veces. *\/\r\n      if(arrancaLogo.hecho) return;\r\n      arrancaLogo.hecho = true;\r\n\r\n      document.documentElement.classList.add('cdz-listo');\r\n      if(stageEl) stageEl.classList.add('cdz-intro');\r\n\r\n      centraLogo();\r\n\r\n      gsap.to(logoEl, {\r\n        opacity:1, duration:.45, delay:PAUSA_INICIAL,\r\n        onStart:function(){\r\n          if(!logoVid) return;\r\n          logoVid.playbackRate = VELOCIDAD_LOGO;\r\n          logoVid.currentTime = 0;\r\n          var pr = logoVid.play();\r\n          if(pr && pr.catch){ pr.catch(function(){}); }\r\n        }\r\n      });\r\n\r\n      if(!logoVid){ gsap.delayedCall(PAUSA_INICIAL + 1.2, subeLogo); return; }\r\n\r\n      var esperaReal = CORTE_EN \/ VELOCIDAD_LOGO;   \/* el video corre acelerado *\/\r\n      console.log('CDZ \u00b7 video del logo: ' + logoVid.duration.toFixed(2) + 's totales \u00b7 ' +\r\n                  'se corta en el segundo ' + CORTE_EN + ' del video, o sea ' +\r\n                  esperaReal.toFixed(2) + 's reales a ' + VELOCIDAD_LOGO + 'x');\r\n\r\n      \/* Disparador principal: temporizador exacto. timeupdate solo se emite\r\n         unas 4 veces por segundo, as\u00ed que por s\u00ed solo a\u00f1adir\u00eda hasta 250ms. *\/\r\n      gsap.delayedCall(PAUSA_INICIAL + esperaReal, subeLogo);\r\n\r\n      \/* Respaldos *\/\r\n      logoVid.addEventListener('timeupdate', function(){\r\n        if(logoVid.currentTime >= CORTE_EN){ subeLogo(); }\r\n      });\r\n      logoVid.addEventListener('ended', subeLogo);\r\n    }\r\n\r\n    if(logoVid){\r\n      logoVid.pause();\r\n      logoVid.addEventListener('error', function(){\r\n        console.warn('CDZ \u00b7 el video del logo no carg\u00f3, queda el poster');\r\n        arrancaLogo();\r\n      });\r\n      if(logoVid.readyState >= 3){ arrancaLogo(); }\r\n      else{\r\n        logoVid.addEventListener('canplaythrough', arrancaLogo, {once:true});\r\n        setTimeout(arrancaLogo, 3000);   \/* no esperar para siempre *\/\r\n      }\r\n    }else{\r\n      arrancaLogo();\r\n    }\r\n\r\n    \/* ---------------------------------------------------------------\r\n       Rotaci\u00f3n del producto\r\n       No da vueltas completas: oscila un poco hacia un lado y hacia el\r\n       otro, en bucle. El scroll suma su propio giro por encima.\r\n\r\n       Para calibrar solo tocas estos tres n\u00fameros:\r\n         CENTRO    \u00b7 el \u00e1ngulo donde queda la cara frontal\r\n         AMPLITUD  \u00b7 cu\u00e1ntos grados se va a cada lado (prueba 6 a 15)\r\n         SEGUNDOS  \u00b7 lo que tarda en ir de un extremo al otro\r\n       --------------------------------------------------------------- *\/\r\n    function arrancaRotacion(){\r\n    if(caja){\r\n      var CENTRO   = 20;\r\n      var AMPLITUD = 10;\r\n      var SEGUNDOS = 4;\r\n      var DISTANCIA = '0.32m';   \/* m\u00e1s alto = producto m\u00e1s lejos *\/\r\n\r\n      var vaiven = { ang: CENTRO - AMPLITUD };\r\n      var scroll = { extra: 0 };\r\n\r\n      function pintar(){\r\n        caja.cameraOrbit = (vaiven.ang + scroll.extra) + 'deg 78deg ' + DISTANCIA;\r\n      }\r\n\r\n      \/* Va y vuelve entre CENTRO-AMPLITUD y CENTRO+AMPLITUD, sin parar.\r\n         El ease sine.inOut hace que frene suave en los extremos en vez\r\n         de rebotar de golpe. *\/\r\n      gsap.to(vaiven, {\r\n        ang: CENTRO + AMPLITUD,\r\n        duration: SEGUNDOS,\r\n        ease: 'sine.inOut',\r\n        yoyo: true,\r\n        repeat: -1,\r\n        onUpdate: pintar\r\n      });\r\n\r\n      \/* El scroll adelanta el giro por encima del vaiv\u00e9n *\/\r\n      gsap.to(scroll, {\r\n        extra: 120,\r\n        ease: 'none',\r\n        scrollTrigger:{ trigger:'[data-cdz-stage]', start:'top top', end:'bottom top', scrub:1 },\r\n        onUpdate: pintar\r\n      });\r\n    }\r\n    }\r\n  }\r\n  if(document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', arranca); }\r\n  else{ arranca(); }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ac01c9a elementor-widget elementor-widget-html\" data-id=\"ac01c9a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     CDZ VIT \u00b7 SECCI\u00d3N 3 \u2014 REELS\r\n     Va en un widget HTML APARTE, dentro del mismo contenedor que la\r\n     secci\u00f3n 1+2 y sin padding entre ellos (usa margen negativo para\r\n     subir sobre la banda azul).\r\n     NO vuelve a cargar GSAP: reutiliza el que ya carga la secci\u00f3n 1.\r\n     ============================================================ -->\r\n\r\n<!-- Caveat: la misma manuscrita que usa el \"Una buena combinaci\u00f3n...\" de\r\n     la secci\u00f3n 1. Se carga aqu\u00ed tambi\u00e9n porque este widget es un archivo\r\n     aparte; si el navegador ya la tiene en cach\u00e9 por la secci\u00f3n 1, esta\r\n     l\u00ednea no vuelve a descargarla. -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Caveat:wght@500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n.cdz-reels{\r\n  --cdz-unit: 16;\r\n  --cdz-ideal: 1440;\r\n  --cdz-min: 992px;\r\n  --cdz-max: 2560px;\r\n  --cdz-cont: clamp(var(--cdz-min), 100vw, var(--cdz-max));\r\n  --cdz-cols: 12;\r\n  --cdz-margin: 2.5em;\r\n  --cdz-gutter: 1.25em;\r\n\r\n  font-size: calc(var(--cdz-cont) \/ (var(--cdz-ideal) \/ var(--cdz-unit)));\r\n  font-family: 'Archivo', Arial, sans-serif;\r\n  font-variation-settings: 'wdth' 78;\r\n  font-weight: 400;\r\n  letter-spacing: -.03em;\r\n  color: var(--cdz-oscuro, #0A3C75);\r\n  \/* #A7C9F9: #66A4F4 (el mismo azul del hero\/banda) result\u00f3 demasiado\r\n     fuerte\/saturado para esta secci\u00f3n. Este es un punto intermedio entre\r\n     ese valor y el p\u00e1lido original (#EAF2FE) \u2014 m\u00e1s presencia que el\r\n     p\u00e1lido, pero sin la saturaci\u00f3n del azul de la banda. Se sobreescribe\r\n     la variable AQU\u00cd, dentro de .cdz-reels, para que solo afecte a esta\r\n     secci\u00f3n \u2014 la secci\u00f3n 4 y otras partes que tambi\u00e9n usan --cdz-palido\r\n     no se tocan, porque las custom properties de CSS quedan acotadas a\r\n     este bloque y sus descendientes. *\/\r\n  --cdz-palido: #A7C9F9;\r\n  background: var(--cdz-palido, #EAF2FE);\r\n\r\n  \/* Sube sobre la banda, igual que la banda sube sobre el hero *\/\r\n  margin-top: -3.75em;\r\n  position: relative;\r\n  z-index: 3;\r\n  padding-bottom: 0.5em;\r\n  overflow-x: clip;\r\n}\r\n@media (max-width:991px){ .cdz-reels{ --cdz-ideal:640; --cdz-min:768px; --cdz-max:991px; --cdz-cols:6; --cdz-margin:1.25em; } }\r\n@media (max-width:767px){ .cdz-reels{ --cdz-ideal:550; --cdz-min:480px; --cdz-max:767px; } }\r\n@media (max-width:479px){ .cdz-reels{ --cdz-ideal:390; --cdz-min:320px; --cdz-max:479px; } }\r\n\r\n.cdz-reels *,.cdz-reels *::before,.cdz-reels *::after{ box-sizing:border-box; }\r\n.cdz-reels h2,.cdz-reels h3{ margin:0; font-weight:600; }\r\n.cdz-reels p{ margin:0; }\r\n\r\n.cdz-reels-container{ max-width:var(--cdz-cont); margin-inline:auto; padding-inline:var(--cdz-margin); }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   TITULAR \u00b7 mismo tama\u00f1o e interlineado que el del hero\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-reels-heading{\r\n  font-size:6.25em; line-height:80%; text-align:center;\r\n  color:var(--cdz-oscuro, #0A3C75);\r\n}\r\n\/* La tercera l\u00ednea baja un poco respecto a las de arriba.\r\n   Se usa transform y no margin porque el titular tiene line-height:80%:\r\n   en una l\u00ednea de texto los m\u00e1rgenes verticales no separan nada, y un\r\n   display:block romper\u00eda el reparto de l\u00edneas que hace SplitText. *\/\r\n.cdz-reels-heading .claro{\r\n  color:#FF8333;   \/* antes #FF7122 *\/\r\n  display:inline-block;\r\n  transform:translateY(.22em);\r\n}\r\n\r\n\/* ---------------------------------------------------------------------\r\n   EL LOGOTIPO SUSTITUYE AL TEXTO \"CDZ Vit\u00ae\"\r\n\r\n   Va por ALTO y en em del titular, as\u00ed que se escala solo en cada\r\n   breakpoint sin tener que repetir medidas: donde el titular baja de\r\n   6.25 a 3.6em, el logotipo baja en la misma proporci\u00f3n.\r\n\r\n   OJO CON --logo-alto: es el alto de la CAJA de la imagen, no el del\r\n   dibujo. Cada PNG trae su propio margen transparente alrededor, as\u00ed que\r\n   este n\u00famero NO se puede comparar con el de otros logotipos del sitio\r\n   ni heredar de ellos. Si alg\u00fan d\u00eda se cambia el archivo, hay que volver\r\n   a mirarlo en pantalla.\r\n\r\n   El alt lleva el nombre completo con el s\u00edmbolo: el titular tiene que\r\n   seguir ley\u00e9ndose entero \u2014\"Suplementa tu alimentaci\u00f3n con CDZ Vit\u00ae\"\u2014\r\n   para buscadores y lectores de pantalla, y eso ahora solo puede salir\r\n   de aqu\u00ed.\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-reels-heading .cdz-logo{\r\n  height: var(--logo-alto, 1em);\r\n  width:auto; display:inline-block;\r\n  \/* vertical-align:middle y no baseline: una imagen apoyada en la l\u00ednea\r\n     base cuelga por debajo de ella, y con un interlineado del 80% eso se\r\n     come el espacio de la l\u00ednea siguiente. *\/\r\n  vertical-align:middle;\r\n  user-select:none; -webkit-user-drag:none;\r\n}\r\n@media (max-width:767px){ .cdz-reels-heading{ font-size:3.6em; } }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   GRILLA \u00b7 videos a la izquierda, texto a la derecha\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-reels-wrap{\r\n  grid-template-columns: repeat(var(--cdz-cols), minmax(0,1fr));\r\n  grid-gap: var(--cdz-gutter);\r\n  \/* La separaci\u00f3n con el titular. Baj\u00f3 de 7.5 a 3.5 y de ah\u00ed a 1em.\r\n\r\n     OJO: parte del hueco que se ve NO sale de aqu\u00ed, sino del propio\r\n     archivo del logotipo. Un PNG suele traer margen transparente\r\n     alrededor del dibujo, y ese margen ocupa espacio real aunque no se\r\n     vea. Si despu\u00e9s de este ajuste el hueco sigue pareciendo grande, el\r\n     que sobra est\u00e1 dentro de la imagen y solo se quita reexport\u00e1ndola\r\n     m\u00e1s ajustada. *\/\r\n  width:100%; display:grid; margin-top:1em;\r\n}\r\n.cdz-reels-media{ grid-column:7 span; }\r\n\/* El padding-left era lo que separaba el texto de la columna de videos y\r\n   lo que lo mov\u00eda de lado dentro de su celda. Se agot\u00f3: de 2 a .6em y de\r\n   ah\u00ed a cero.\r\n\r\n   Para seguir corri\u00e9ndolo hace falta MARGEN NEGATIVO, que es otra cosa:\r\n   el relleno lo mueve dentro de su celda, el margen saca la celda entera\r\n   de su columna. Por eso a partir de aqu\u00ed el texto invade el espacio de\r\n   los videos \u2014 sin consecuencias, porque las tarjetas van en posici\u00f3n\r\n   absoluta y ocupan solo la parte izquierda de su columna. *\/\r\n.cdz-reels-texto{\r\n  grid-column:5 span; align-self:center;\r\n  padding-left:0; margin-left:-.82em;\r\n}\r\n@media (max-width:991px){\r\n  .cdz-reels-media,.cdz-reels-texto{ grid-column:6 span; }\r\n  .cdz-reels-texto{ padding-left:0; margin-top:3em; }\r\n  .cdz-reels-wrap{ margin-top:1.5em; }\r\n}\r\n\r\n\/* ---------------------------------------------------------------------\r\n   TARJETAS DE VIDEO\r\n   Cada una tiene su propia rotaci\u00f3n y desplazamiento, como la referencia.\r\n   El contenedor exterior lleva la posici\u00f3n; la tarjeta va suelta dentro\r\n   para que el empuj\u00f3n del mouse pueda moverla sin sacarla de sitio.\r\n   --------------------------------------------------------------------- *\/\r\n\/* Las tarjetas van en posici\u00f3n ABSOLUTA, no en flujo. Es lo que permite\r\n   que roten entre las tres posiciones: si dependieran de su hueco en la\r\n   fila, cambiarles la posici\u00f3n las devolver\u00eda a su sitio original.\r\n   El alto de la fila es fijo porque nada la sostiene desde dentro: son\r\n   el alto de la tarjeta m\u00e1s el desplazamiento vertical m\u00e1ximo de la\r\n   tabla de posiciones.\r\n\r\n   TODO SALE DEL ANCHO DE LA TARJETA, as\u00ed que reducirla obliga a mover\r\n   cuatro n\u00fameros a la vez o la composici\u00f3n se descuadra:\r\n\r\n     ancho de la tarjeta ...... 21 -> 18em\r\n     alto de esta fila ........ 40.5 -> 34.5em\r\n     las dos x de POSICIONES .. escaladas por 18\/21 y recentradas\r\n     el desnivel (y) .......... 4.5 -> 3.9em\r\n\r\n   El alto de la tarjeta no se escribe en ninguna parte: sale del ancho\r\n   menos su relleno, por la proporci\u00f3n 9\/16 del video, m\u00e1s el relleno\r\n   otra vez. Con 18em son 30.6em. *\/\r\n.cdz-reels-fila{ position:relative; height:34.5em; }\r\n.cdz-reel-outer{\r\n  position:absolute; top:0; left:0;\r\n  width:18em;\r\n  will-change:transform;\r\n}\r\n\r\n.cdz-reel{\r\n  width:100%;\r\n  background:#FFFFFF;\r\n  border-radius:.375em;\r\n  padding:.875em;\r\n  box-shadow:0 .6em 2em rgba(10,60,117,.10);\r\n  position:relative;\r\n}\r\n.cdz-reel-video{\r\n  position:relative;\r\n  border-radius:.2em;\r\n  overflow:hidden;\r\n  aspect-ratio: 9 \/ 16;\r\n  background:#DCE8F9;\r\n}\r\n.cdz-reel-video video{\r\n  width:100%; height:100%; object-fit:cover; display:block;\r\n}\r\n\r\n\/* Bot\u00f3n de sonido *\/\r\n.cdz-reel-sonido{\r\n  position:absolute; right:.7em; bottom:.7em;\r\n  width:2.6em; height:2.6em; border-radius:50%; border:0;\r\n  background:rgba(10,60,117,.55);\r\n  display:grid; place-items:center; cursor:pointer;\r\n  transition:background .25s ease, transform .25s ease;\r\n  padding:0;\r\n}\r\n.cdz-reel-sonido:hover{ background:rgba(10,60,117,.8); transform:scale(1.06); }\r\n.cdz-reel-sonido:focus-visible{ outline:3px solid var(--cdz-marca,#007AFF); outline-offset:3px; }\r\n.cdz-reel-sonido svg{ width:1.35em; height:1.35em; fill:#fff; color:#fff; display:block; overflow:visible; }\r\n\/* Con sonido activo se muestra el otro icono *\/\r\n.cdz-reel-sonido .icono-off{ display:none; }\r\n.cdz-reel-sonido.suena .icono-on{ display:none; }\r\n.cdz-reel-sonido.suena .icono-off{ display:block; }\r\n\r\n@media (max-width:991px){\r\n  \/* En m\u00f3vil vuelven al flujo normal, en columna y sin rotar *\/\r\n  .cdz-reels-fila{ position:static; height:auto; display:flex;\r\n                   justify-content:center; flex-wrap:wrap; gap:1em; }\r\n  .cdz-reel-outer{ position:static; width:14em; transform:none !important; }\r\n}\r\n\r\n\/* ---------------------------------------------------------------------\r\n   COLUMNA DE TEXTO\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-reels-sub{ font-size:2.5em; line-height:85%; font-weight:500; }\r\n\/* Ojo: el selector lleva .cdz-reels delante a prop\u00f3sito. Sin eso, la regla\r\n   base .cdz-reels p{margin:0} le gana por especificidad y la separaci\u00f3n\r\n   con el subt\u00edtulo se pierde. *\/\r\n.cdz-reels .cdz-reels-p{\r\n  font-size:1.74em; line-height:120%;\r\n  margin-top:1.4em;          \/* separaci\u00f3n con el texto de arriba *\/\r\n  max-width:24em;\r\n}\r\n.cdz-reels-cta{ margin-top:2em; }\r\n\r\n\/* Bot\u00f3n, mismo componente que en el hero *\/\r\n.cdz-reels .cdz-boton{\r\n  position:relative; display:inline-flex; align-items:center; gap:.5em;\r\n  padding:.55em 1em .65em; border-radius:99em; overflow:hidden;\r\n  background:var(--cdz-acento,#F4701F); color:#fff;\r\n  text-decoration:none !important; border:0; cursor:pointer;\r\n  letter-spacing:-.02em;\r\n  transition:background .3s cubic-bezier(.32,.72,0,1);\r\n}\r\n.cdz-reels .cdz-boton:hover{ background:var(--cdz-oscuro,#0A3C75); color:#fff; }\r\n.cdz-reels .cdz-boton-txt{ font-size:2em; line-height:80%; font-weight:500; text-decoration:none !important; }\r\n.cdz-reels .cdz-flecha{ width:.85em; height:.85em; flex:none; overflow:hidden; position:relative; }\r\n.cdz-reels .cdz-flecha svg{ width:100%; height:100%; display:block; fill:currentColor; transition:transform .45s cubic-bezier(.32,.72,0,1); }\r\n.cdz-reels .cdz-flecha svg:nth-child(2){ position:absolute; inset:0; transform:translate(-100%,100%); }\r\n.cdz-reels .cdz-boton:hover .cdz-flecha svg:nth-child(1){ transform:translate(100%,-100%); }\r\n.cdz-reels .cdz-boton:hover .cdz-flecha svg:nth-child(2){ transform:translate(0,0); }\r\n\r\n.cdz-reels .cdz-anim3{ opacity:0; }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   MANUSCRITO \"Por qu\u00e9 CDZ Vit\u00ae\" con flecha, debajo de las tarjetas.\r\n   Mismo tratamiento que el de la secci\u00f3n 1: Caveat, ligeramente torcido.\r\n   --------------------------------------------------------------------- *\/\r\n\/* Contenedor que ubica el manuscrito al fondo de TODA la secci\u00f3n, no\r\n   solo debajo del bot\u00f3n. margin-top grande: empuja el bloque hacia abajo\r\n   con margen de sobra sobre la columna de videos (46.5em de alto), que\r\n   es la m\u00e1s alta de las dos columnas de arriba. padding-left reutiliza\r\n   la misma proporci\u00f3n de columna (7 de 12) que ten\u00eda la columna de\r\n   texto, para que el manuscrito quede alineado en el mismo lugar\r\n   horizontal que antes, ahora como fila propia debajo de todo. *\/\r\n.cdz-reels-abajo{\r\n  margin-top:4em;\r\n  padding-left:calc(100% * 7 \/ var(--cdz-cols));\r\n}\r\n@media (max-width:991px){\r\n  .cdz-reels-abajo{ padding-left:0; margin-top:3em; text-align:center; }\r\n}\r\n.cdz-reels-porque{ display:inline-block; }\r\n.cdz-reels-manuscrito{\r\n  font-family:'Caveat', cursive;\r\n  font-variation-settings: normal;\r\n  font-weight:600;\r\n  \/* 3em, antes 1.8em: pedido expl\u00edcito de darle m\u00e1s peso visual a la\r\n     frase \u2014 al fondo de la secci\u00f3n, con el tama\u00f1o chico pasaba\r\n     desapercibida. *\/\r\n  font-size:3em;\r\n  line-height:100%;\r\n  letter-spacing:0;\r\n  color:var(--cdz-oscuro,#0A3C75);\r\n  transform:rotate(-3deg);\r\n  transform-origin:left top;\r\n}\r\n.cdz-reels-flecha{\r\n  \/* 5.3em, antes 3.2em: escalada en la misma proporci\u00f3n que el texto\r\n     (3em\/1.8em \u2248 1.67x), para que la flecha siga vi\u00e9ndose del mismo\r\n     tama\u00f1o relativo respecto a la frase, no desproporcionada. *\/\r\n  width:5.3em;\r\n  \/* Nace pegada al texto, no separada: por eso el margen es negativo\r\n     arriba (se monta bajo la letra) y casi nulo a la izquierda. *\/\r\n  margin-top:-.5em; margin-left:.3em;\r\n  color:var(--cdz-oscuro,#0A3C75);\r\n}\r\n.cdz-reels-flecha path{ stroke:currentColor; }\r\n<\/style>\r\n\r\n<section class=\"cdz-reels\" id=\"cdz-reels\" data-cdz-reels data-cdz-inercia>\r\n  <div class=\"cdz-reels-container\">\r\n\r\n    <h2 class=\"cdz-reels-heading cdz-anim3\" data-cdz-reels-titulo>\r\n      Suplementa tu alimentaci\u00f3n con<br>\r\n      <span class=\"claro\">\r\n        <img class=\"cdz-logo\" style=\"--logo-alto:1.15em\"\r\n             src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/06\/CDZ-VIT.webp\"\r\n             alt=\"CDZ Vit\u00ae\" loading=\"eager\" decoding=\"async\">\r\n      <\/span>\r\n    <\/h2>\r\n\r\n    <div class=\"cdz-reels-wrap\">\r\n\r\n      <div class=\"cdz-reels-media\">\r\n        <div class=\"cdz-reels-fila\">\r\n\r\n          <div class=\"cdz-reel-outer\" data-cdz-reel-outer data-cdz-inercia-item>\r\n            <div class=\"cdz-reel cdz-anim3\" data-cdz-reel data-cdz-inercia-hijo>\r\n              <div class=\"cdz-reel-video\">\r\n                <video data-cdz-video muted playsinline preload=\"metadata\"\r\n                       disablepictureinpicture controlslist=\"nodownload noremoteplayback\">\r\n                  <source src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/REEL-NEW-PRODUCT-CDZ-PR.mp4\" type=\"video\/mp4\">\r\n                <\/video>\r\n                <button type=\"button\" class=\"cdz-reel-sonido\" data-cdz-sonido aria-label=\"Activar o desactivar sonido\">\r\n                  <svg class=\"icono-on\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 9.5h3.6L12.4 5.4a.7.7 0 0 1 1.15.53v12.14a.7.7 0 0 1-1.15.53L7.6 14.5H4a.9.9 0 0 1-.9-.9v-3.2a.9.9 0 0 1 .9-.9Z\"\/><path d=\"M16.6 8.9a4.4 4.4 0 0 1 0 6.2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"\/><path d=\"M19.1 6.4a7.9 7.9 0 0 1 0 11.2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"\/><\/svg>\r\n                  <svg class=\"icono-off\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 9.5h3.6L12.4 5.4a.7.7 0 0 1 1.15.53v12.14a.7.7 0 0 1-1.15.53L7.6 14.5H4a.9.9 0 0 1-.9-.9v-3.2a.9.9 0 0 1 .9-.9Z\"\/><path d=\"M17.2 9.6l5 4.8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"\/><path d=\"M22.2 9.6l-5 4.8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"\/><\/svg>\r\n                <\/button>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"cdz-reel-outer\" data-cdz-reel-outer data-cdz-inercia-item>\r\n            <div class=\"cdz-reel cdz-anim3\" data-cdz-reel data-cdz-inercia-hijo>\r\n              <div class=\"cdz-reel-video\">\r\n                <video data-cdz-video muted playsinline preload=\"metadata\"\r\n                       disablepictureinpicture controlslist=\"nodownload noremoteplayback\">\r\n                  <source src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/REEL-2-PRESENTACIONES-CDZ-PR1.mp4\" type=\"video\/mp4\">\r\n                <\/video>\r\n                <button type=\"button\" class=\"cdz-reel-sonido\" data-cdz-sonido aria-label=\"Activar o desactivar sonido\">\r\n                  <svg class=\"icono-on\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 9.5h3.6L12.4 5.4a.7.7 0 0 1 1.15.53v12.14a.7.7 0 0 1-1.15.53L7.6 14.5H4a.9.9 0 0 1-.9-.9v-3.2a.9.9 0 0 1 .9-.9Z\"\/><path d=\"M16.6 8.9a4.4 4.4 0 0 1 0 6.2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"\/><path d=\"M19.1 6.4a7.9 7.9 0 0 1 0 11.2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"\/><\/svg>\r\n                  <svg class=\"icono-off\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 9.5h3.6L12.4 5.4a.7.7 0 0 1 1.15.53v12.14a.7.7 0 0 1-1.15.53L7.6 14.5H4a.9.9 0 0 1-.9-.9v-3.2a.9.9 0 0 1 .9-.9Z\"\/><path d=\"M17.2 9.6l5 4.8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"\/><path d=\"M22.2 9.6l-5 4.8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"\/><\/svg>\r\n                <\/button>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cdz-reels-texto\">\r\n        <h3 class=\"cdz-reels-sub cdz-anim3\" data-cdz-reels-sub>Ayuda a cuidar tus defensas y tu sistema inmune: En un solo sobre,<br> una toma al d\u00eda, sin az\u00facar y con <br>sabor a naranja.\r\n        <\/h3>\r\n        <p class=\"cdz-reels-p cdz-anim3\" data-cdz-reels-p>\r\n          Vitamina C, Vitamina D y Zinc reunidos en un solo<br> sobre de 3 g. F\u00e1cil de preparar, f\u00e1cil de llevar.\r\n        <\/p>\r\n        <div class=\"cdz-reels-cta cdz-anim3\" data-cdz-reels-cta>\r\n          <a href=\"#donde-comprarlo\" class=\"cdz-boton\" onclick=\"try{sessionStorage.setItem('cdz-origen','reels')}catch(e){}\">\r\n            <span class=\"cdz-flecha\">\r\n              <svg viewBox=\"0 0 10 10\"><path fill-rule=\"evenodd\" d=\"M0 1.827 1.71 0H10v8.22L8.11 10V5.93c0-.992.009-1.89.03-2.695l-6.642 6.58-1.316-1.44 6.641-6.58c-.787.022-1.67.032-2.647.032H0Z\" clip-rule=\"evenodd\"\/><\/svg>\r\n              <svg viewBox=\"0 0 10 10\"><path fill-rule=\"evenodd\" d=\"M0 1.827 1.71 0H10v8.22L8.11 10V5.93c0-.992.009-1.89.03-2.695l-6.642 6.58-1.316-1.44 6.641-6.58c-.787.022-1.67.032-2.647.032H0Z\" clip-rule=\"evenodd\"\/><\/svg>\r\n            <\/span>\r\n            <span class=\"cdz-boton-txt\">\u00bfD\u00f3nde comprarlo?<\/span>\r\n          <\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- El manuscrito ya no vive dentro de la columna de texto: se sac\u00f3\r\n         para que quede pegado al borde inferior de TODA la secci\u00f3n,\r\n         debajo tambi\u00e9n de la columna de videos (que es m\u00e1s alta que la\r\n         de texto). Reutiliza el mismo desplazamiento de columna (7 span\r\n         de 12) que ten\u00eda la columna de texto, para seguir alineado en\r\n         el mismo lugar horizontal de antes. -->\r\n    <div class=\"cdz-reels-abajo\">\r\n      <div class=\"cdz-reels-porque cdz-anim3\" data-cdz-reels-porque>\r\n        <div class=\"cdz-reels-manuscrito\" data-cdz-reels-manuscrito-stroke>Por qu\u00e9 CDZ Vit\u00ae<\/div>\r\n        <svg class=\"cdz-reels-flecha\" viewBox=\"-30 0 60 100\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n          <path data-cdz-reels-flecha-linea d=\"M10,6 C16,40 8,70 -12,86\"\r\n                stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\r\n          <path data-cdz-reels-flecha-punta d=\"M-12,86 L2,80 M-12,86 L-6,70\"\r\n                stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\r\n        <\/svg>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  \/* Espera a que la secci\u00f3n 1 haya cargado GSAP. NO se vuelve a incluir\r\n     la librer\u00eda aqu\u00ed: cargarla dos veces duplica los ScrollTrigger. *\/\r\n  function arranca(){\r\n    if(!window.gsap || !window.ScrollTrigger){ return setTimeout(arranca, 60); }\r\n\r\n    var quieto = matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n    \/* -----------------------------------------------------------------\r\n       BARAJA DE VIDEOS\r\n       Las tarjetas ocupan posiciones fijas y todos los videos se\r\n       reproducen siempre en bucle. Solo suena el del frente.\r\n       Cuando el video del frente completa una vuelta, la baraja avanza una\r\n       posici\u00f3n. Y si se pulsa una tarjeta de atr\u00e1s, esa pasa al frente de\r\n       inmediato. El video nunca cambia de tarjeta: lo que se mueve es la\r\n       tarjeta entera, as\u00ed que no se corta ni pierde el b\u00fafer.\r\n\r\n       Para reubicar las posiciones basta editar esta tabla.\r\n       ----------------------------------------------------------------- *\/\r\n    \/* DOS POSICIONES, no tres: quedan dos reels. El resto del mecanismo\r\n       no cambia \u2014todo se calcula con POSICIONES.length\u2014 as\u00ed que quitar\r\n       una fila de esta tabla basta para que la baraja funcione con dos.\r\n\r\n       SE CONSERVAN LAS DOS CONTIGUAS \u2014la del medio y la del frente\u2014 y no\r\n       las dos extremas. Con las extremas el par quedaba separado por el\r\n       hueco de la que se quit\u00f3: las tres estaban a 16.4em una de otra, y\r\n       saltarse la del medio dejaba 32.8em entre las dos que quedaban.\r\n\r\n       Con estas, la separaci\u00f3n sigue siendo esos 16.4em y el solape se ve\r\n       igual que antes. Adem\u00e1s el par queda centrado en su columna casi\r\n       por casualidad: ocupa 32.1em de los 49 que mide la columna, as\u00ed que\r\n       empezar en 8.5 lo deja centrado.\r\n\r\n       EL DESNIVEL ENTRE LAS DOS BAJ\u00d3 de 10.5 a 3.9em. Con tres tarjetas\r\n       ese escal\u00f3n ten\u00eda sentido porque dibujaba una diagonal de tres\r\n       pelda\u00f1os; con dos se le\u00eda como que una se hab\u00eda ca\u00eddo. As\u00ed se nota\r\n       que est\u00e1n escalonadas sin que parezcan descolgadas.\r\n\r\n       Si se toca este n\u00famero hay que tocar tambi\u00e9n el alto de\r\n       .cdz-reels-fila, que es 36em de tarjeta m\u00e1s este desnivel. *\/\r\n    var POSICIONES = [\r\n      { x:  8.5, y:  3.9, rot: -2.5, z:1 },   \/* 0 \u00b7 fondo  *\/\r\n      { x: 22.6, y:  0.0, rot:  5.5, z:2 }    \/* 1 \u00b7 frente *\/\r\n    ];\r\n    var VIAJE_CARTA = 0.9;      \/* segundos que tarda el desplazamiento *\/\r\n\r\n    var tarjetas = Array.prototype.slice.call(document.querySelectorAll('[data-cdz-reel-outer]'));\r\n    var videos   = tarjetas.map(function(t){ return t.querySelector('[data-cdz-video]'); });\r\n    var enPos    = tarjetas.map(function(_, i){ return i; });   \/* posici\u00f3n de cada tarjeta *\/\r\n    var sonido   = false;       \/* estado de sonido de toda la baraja *\/\r\n    var visible  = false;\r\n    var girando  = false;\r\n    var ultimoT  = [];          \/* para detectar cu\u00e1ndo el video del frente da la vuelta *\/\r\n\r\n    function coloca(i, animar){\r\n      var P = POSICIONES[enPos[i]];\r\n      tarjetas[i].style.zIndex = P.z;\r\n      gsap.to(tarjetas[i], {\r\n        x: P.x + 'em', y: P.y + 'em', rotation: P.rot,\r\n        duration: animar ? VIAJE_CARTA : 0,\r\n        ease: 'power3.inOut'\r\n      });\r\n    }\r\n\r\n    function frente(){ return enPos.indexOf(POSICIONES.length - 1); }\r\n\r\n    \/* TODOS los videos corren siempre. Solo cambia qui\u00e9n suena y el cursor:\r\n       la tarjeta del frente ya no se puede pulsar porque ya est\u00e1 delante. *\/\r\n    function aplicaEstado(){\r\n      var f = frente();\r\n      videos.forEach(function(v, i){\r\n        if(!v) return;\r\n        v.muted = !(sonido && i === f);\r\n        if(visible){\r\n          var pr = v.play();\r\n          if(pr && pr.catch){ pr.catch(function(){}); }\r\n        }\r\n        tarjetas[i].style.cursor = (i === f) ? 'default' : 'pointer';\r\n      });\r\n      ultimoT[f] = videos[f] ? videos[f].currentTime : 0;\r\n      pintaBotones();\r\n    }\r\n\r\n    \/* Gira la baraja tantos pasos como haga falta. Sin argumento avanza uno;\r\n       con una tarjeta, la trae al frente por el camino m\u00e1s corto. *\/\r\n    function gira(traer){\r\n      if(girando) return;\r\n      var pasos = 1;\r\n      if(typeof traer === 'number'){\r\n        pasos = (POSICIONES.length - 1 - enPos[traer] + POSICIONES.length) % POSICIONES.length;\r\n        if(pasos === 0) return;      \/* ya est\u00e1 al frente *\/\r\n      }\r\n      girando = true;\r\n      enPos = enPos.map(function(p){ return (p + pasos) % POSICIONES.length; });\r\n      tarjetas.forEach(function(_, i){ coloca(i, true); });\r\n      gsap.delayedCall(VIAJE_CARTA, function(){\r\n        girando = false;\r\n        aplicaEstado();\r\n      });\r\n    }\r\n\r\n    \/* Colocaci\u00f3n inicial, sin animar *\/\r\n    tarjetas.forEach(function(_, i){ coloca(i, false); });\r\n\r\n    videos.forEach(function(v, i){\r\n      if(!v) return;\r\n      v.loop = true;            \/* nunca se detienen *\/\r\n      v.muted = true;\r\n      ultimoT[i] = 0;\r\n\r\n      \/* Con loop activo el evento 'ended' no se dispara nunca, as\u00ed que la\r\n         vuelta se detecta viendo cu\u00e1ndo el tiempo retrocede de golpe. *\/\r\n      v.addEventListener('timeupdate', function(){\r\n        var t = v.currentTime;\r\n        if(i === frente() && ultimoT[i] - t > 0.5 && !girando){ gira(); }\r\n        ultimoT[i] = t;\r\n      });\r\n    });\r\n\r\n    \/* Pulsar una tarjeta que no est\u00e1 al frente la trae adelante:\r\n       si el usuario la eligi\u00f3, no tiene por qu\u00e9 esperar el turno. *\/\r\n    tarjetas.forEach(function(t, i){\r\n      t.setAttribute('tabindex', '0');\r\n      t.addEventListener('click', function(){ gira(i); });\r\n      t.addEventListener('keydown', function(ev){\r\n        if(ev.key === 'Enter' || ev.key === ' '){ ev.preventDefault(); gira(i); }\r\n      });\r\n    });\r\n\r\n    \/* Solo corre mientras la secci\u00f3n est\u00e1 a la vista *\/\r\n    ScrollTrigger.create({\r\n      trigger: '[data-cdz-reels]',\r\n      start: 'top bottom',\r\n      end: 'bottom top',\r\n      onEnter:     function(){ visible = true;  aplicaEstado(); },\r\n      onEnterBack: function(){ visible = true;  aplicaEstado(); },\r\n      onLeave:     function(){ visible = false; videos.forEach(function(v){ v && v.pause(); }); },\r\n      onLeaveBack: function(){ visible = false; videos.forEach(function(v){ v && v.pause(); }); }\r\n    });\r\n\r\n    \/* Sonido: uno solo para toda la baraja, aplicado a la del frente *\/\r\n    function pintaBotones(){\r\n      document.querySelectorAll('[data-cdz-sonido]').forEach(function(b){\r\n        b.classList.toggle('suena', sonido);\r\n      });\r\n    }\r\n    document.querySelectorAll('[data-cdz-sonido]').forEach(function(btn){\r\n      btn.addEventListener('click', function(ev){\r\n        ev.stopPropagation();   \/* que no cuente tambi\u00e9n como clic en la tarjeta *\/\r\n        sonido = !sonido;\r\n        aplicaEstado();\r\n      });\r\n    });\r\n\r\n    \/* -----------------------------------------------------------------\r\n       ENTRADA\r\n       ----------------------------------------------------------------- *\/\r\n    if(quieto){ gsap.set('.cdz-anim3', {opacity:1}); return; }\r\n\r\n    gsap.set('.cdz-anim3', {opacity:0});\r\n\r\n    var tl = gsap.timeline({\r\n      defaults:{ ease:'power3.out' },\r\n      scrollTrigger:{ trigger:'[data-cdz-reels]', start:'top 70%', once:true }\r\n    });\r\n\r\n    \/* SplitText parte el titular en L\u00cdNEAS, y el logotipo entra en ese\r\n       reparto como una palabra m\u00e1s: al ser inline-block forma parte de la\r\n       l\u00ednea y sube con ella. No hace falta animarlo por separado. *\/\r\n    var lineas = new SplitText('[data-cdz-reels-titulo]', {type:'lines', linesClass:'cdz-linea3'});\r\n    gsap.set('[data-cdz-reels-titulo]', {opacity:1});\r\n    tl.from(lineas.lines, {yPercent:110, opacity:0, duration:.9, stagger:.09}, 0);\r\n\r\n    \/* Letras sueltas del manuscrito \"Por qu\u00e9 CDZ Vit\u00ae\" \u2014 mismo mecanismo\r\n       que \"Tu aliado de cada d\u00eda\" en la secci\u00f3n 4: SplitText parte el\r\n       texto en caracteres, cada uno arranca en opacity:0 y se van\r\n       revelando uno detr\u00e1s de otro con un peque\u00f1o escalonado. *\/\r\n    var letrasPorque = new SplitText('[data-cdz-reels-manuscrito-stroke]', {type:'chars'});\r\n    gsap.set('[data-cdz-reels-manuscrito-stroke]', {opacity:1});\r\n    gsap.set(letrasPorque.chars, {opacity:0});\r\n\r\n    tl.fromTo('[data-cdz-reel]',\r\n      {opacity:0, y:60}, {opacity:1, y:0, duration:.9, stagger:.12}, .35);\r\n    tl.fromTo('[data-cdz-reels-sub]',\r\n      {opacity:0, y:20}, {opacity:1, y:0, duration:.7}, .6);\r\n    tl.fromTo('[data-cdz-reels-p]',\r\n      {opacity:0, y:20}, {opacity:1, y:0, duration:.7}, .75);\r\n    tl.fromTo('[data-cdz-reels-cta]',\r\n      {opacity:0, y:20}, {opacity:1, y:0, duration:.7}, .9);\r\n\r\n    tl.fromTo('[data-cdz-reels-porque]',\r\n      {opacity:0, y:14}, {opacity:1, y:0, duration:.6}, 1.05);\r\n    tl.to(letrasPorque.chars,\r\n      {opacity:1, duration:.02, stagger:.008, ease:'none'}, 1.1);\r\n    tl.fromTo('[data-cdz-reels-flecha-linea]',\r\n      {drawSVG:'0% 0%'}, {drawSVG:'0% 100%', duration:.7, ease:'power2.inOut'}, 1.25);\r\n    tl.fromTo('[data-cdz-reels-flecha-punta]',\r\n      {opacity:0}, {opacity:1, duration:.25}, 1.85);\r\n  }\r\n\r\n  if(document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', arranca); }\r\n  else{ arranca(); }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6043e81 elementor-widget elementor-widget-html\" data-id=\"6043e81\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"porque\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     CDZ VIT \u00b7 SECCI\u00d3N 4 \u2014 \"POR QU\u00c9 CDZ VIT\" (secuencia con scroll)\r\n     Va en su propio widget HTML, dentro del mismo contenedor que las\r\n     secciones anteriores, sin padding entre widgets.\r\n     NO vuelve a cargar GSAP, ScrollTrigger ni model-viewer: reutiliza lo\r\n     que ya carga la secci\u00f3n 1.\r\n\r\n     A diferencia de la referencia (More Nutrition), que usa una secuencia\r\n     de 200 fotogramas WebP, aqu\u00ed se reutiliza el GLB de la caja ya\r\n     calibrado en el hero. Es ~10x m\u00e1s liviano (1.2 MB vs 8-16 MB de una\r\n     secuencia de frames) y el giro se hace rotando la c\u00e1mara del modelo,\r\n     atado al progreso del scroll dentro de esta secci\u00f3n con ScrollTrigger\r\n     + pin. Solo corre en escritorio: en m\u00f3vil, \"pinnear\" 2.5 pantallas de\r\n     scroll para una animaci\u00f3n 3D no compensa el costo, as\u00ed que se muestra\r\n     una versi\u00f3n est\u00e1tica con las tarjetas apiladas.\r\n\r\n     EL COMERCIAL vive en el cierre, a la izquierda, y se abre en una\r\n     ventana emergente. Su c\u00f3digo va agrupado y marcado con \"cdz-seq-video\"\r\n     y \"cdz-seq-modal\": no toca la l\u00ednea de tiempo del scroll, que est\u00e1\r\n     calibrada pieza por pieza y donde mover una corre a todas las dem\u00e1s.\r\n     ============================================================ -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Caveat:wght@500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n.cdz-seq{\r\n  --cdz-unit: 16;\r\n  --cdz-ideal: 1440;\r\n  --cdz-min: 992px;\r\n  --cdz-max: 2560px;\r\n  --cdz-cont: clamp(var(--cdz-min), 100vw, var(--cdz-max));\r\n\r\n  font-size: calc(var(--cdz-cont) \/ (var(--cdz-ideal) \/ var(--cdz-unit)));\r\n  font-family: 'Archivo', Arial, sans-serif;\r\n  font-variation-settings: 'wdth' 78;\r\n  font-weight: 400;\r\n  letter-spacing: -.03em;\r\n  color: var(--cdz-oscuro, #0A3C75);\r\n  background: var(--cdz-palido, #A7C9F9);\r\n  position: relative;\r\n  overflow-x: clip;\r\n}\r\n@media (max-width:991px){ .cdz-seq{ --cdz-ideal:640; --cdz-min:768px; --cdz-max:991px; } }\r\n@media (max-width:767px){ .cdz-seq{ --cdz-ideal:550; --cdz-min:480px; --cdz-max:767px; } }\r\n@media (max-width:479px){ .cdz-seq{ --cdz-ideal:390; --cdz-min:320px; --cdz-max:479px; } }\r\n\r\n.cdz-seq *,.cdz-seq *::before,.cdz-seq *::after{ box-sizing:border-box; }\r\n.cdz-seq h2,.cdz-seq h3{ margin:0; font-weight:600; }\r\n.cdz-seq p{ margin:0; }\r\n\r\n.cdz-seq-container{ max-width:var(--cdz-cont); margin-inline:auto; padding-inline:2.5em; }\r\n@media (max-width:991px){ .cdz-seq-container{ padding-inline:1.25em; } }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   ESCENARIO FIJO (pin)\r\n   El wrapper es alto (le da \"distancia\" al scroll); el stage de adentro\r\n   se fija en pantalla mientras se recorre esa distancia.\r\n   --------------------------------------------------------------------- *\/\r\n\/* 540vh, antes 340vh: se alarg\u00f3 el scroll total para poder darle a\r\n     Zinc y a Sin az\u00facar la misma sostenida real que ya ten\u00edan Vitamina\r\n     D y C, sin sacrificar a ninguna. Con 340vh no alcanzaba el\r\n     presupuesto de proporciones para las cuatro por igual. *\/\r\n\/* 810vh. El alto de este contenedor ES la duraci\u00f3n de la secci\u00f3n: el\r\n   timeline se reparte sobre \u00e9l en fracciones, as\u00ed que subirlo le da m\u00e1s\r\n   scroll a todo sin cambiar las proporciones entre piezas.\r\n\r\n   ZINC RECIBE ADEM\u00c1S UNA TAJADA MAYOR, no solo el reparto general: su\r\n   salida se corri\u00f3 de 0.5856 a 0.6456 y TODO lo que ven\u00eda despu\u00e9s se\r\n   desplaz\u00f3 esos mismos 0.06 \u2014Sin az\u00facar, el borrado de la l\u00ednea, el\r\n   cierre, las notas y las frutas\u2014, de modo que ninguna otra pieza pierde\r\n   su tramo.\r\n\r\n   Ese corrimiento estira el timeline hasta 1.055, y por eso el\r\n   contenedor sube de 760 a 810vh: 810\/760 es justo 1.065, as\u00ed que cada\r\n   pieza conserva los mismos vh de scroll que ten\u00eda y lo \u00fanico que crece\r\n   de verdad es el turno de Zinc.\r\n\r\n   En n\u00fameros: su manuscrito est\u00e1 en pantalla de 0.4759 a 0.6456, que\r\n   sobre este total son 130vh de recorrido, contra los 84vh de antes.\r\n\r\n   Cuidado al tocar esto: si se le da m\u00e1s a una tarjeta sin correr las\r\n   siguientes ni ajustar el alto, lo que pasa es que la de al lado pierde\r\n   exactamente lo mismo. Las cuatro encadenan sin holgura. *\/\r\n.cdz-seq-wrap{ position:relative; height:810vh; }\r\n@media (max-width:991px){ .cdz-seq-wrap{ height:auto; } }\r\n\r\n.cdz-seq-sticky{\r\n  position:sticky; top:0; height:100vh;\r\n  \/* width:100% se queda aunque ya no haya pin. Con position:sticky el\r\n     navegador estira el elemento al ancho completo solo, as\u00ed que hoy es\r\n     redundante; pero es la l\u00ednea que evitaba que el escenario colapsara\r\n     al ancho de su contenido si algo vuelve a ponerlo en \"fixed\", y\r\n     cuesta cero dejarla. *\/\r\n  width:100%;\r\n  display:flex; align-items:center; justify-content:center;\r\n  overflow:hidden;\r\n}\r\n@media (max-width:991px){ .cdz-seq-sticky{ position:static; height:auto; padding-block:4em; } }\r\n\r\n\/* 25em de ancho (~25% de pantalla). El TAMA\u00d1O se controla desde aqu\u00ed\r\n   (ancho y alto del contenedor), NO acercando la c\u00e1mara: model-viewer\r\n   siempre encuadra el objeto COMPLETO dentro de su lienzo por defecto,\r\n   as\u00ed que agrandar el lienzo simplemente dibuja el mismo objeto entero\r\n   m\u00e1s grande. Acercar demasiado la c\u00e1mara (como se hizo antes, a\r\n   0.15m\/15\u00b0) fue el error: con la caja real, de proporciones distintas\r\n   al cubo de prueba, la c\u00e1mara qued\u00f3 tan cerca que solo entraba un\r\n   fragmento de una cara en el lienzo, cortado por los bordes. *\/\r\n.cdz-seq-visual{ width:30em; position:relative; z-index:3; }   \/* por encima de las tarjetas (z-index:2) *\/\r\n.cdz-seq-visual model-viewer{\r\n  \/* 44em: 46em dejaba solo 25px de margen contra el l\u00edmite de 100vh\r\n     (verificado en el navegador) \u2014 demasiado justo. Con 44em queda\r\n     un colch\u00f3n m\u00e1s c\u00f3modo sin perder tama\u00f1o real. *\/\r\n  width:100%; height:44em; background:transparent; --poster-color:transparent;\r\n}\r\n.cdz-seq-visual model-viewer::part(default-progress-bar){ display:none; }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   TARJETAS DE BENEFICIO\r\n   Cuatro, en posici\u00f3n absoluta alrededor del producto. Entran y salen\r\n   seg\u00fan el progreso del scroll (las controla el JS, no CSS puro).\r\n   --------------------------------------------------------------------- *\/\r\n\/* ---------------------------------------------------------------------\r\n   Solo hay dos \"asientos\": izquierda y derecha, a la altura del centro\r\n   del producto. Las cuatro tarjetas van rotando por esos dos asientos\r\n   \u2014izquierda, derecha, izquierda, derecha\u2014 una a la vez: la que sale\r\n   sube y se desvanece, la que entra sube desde abajo hacia el asiento.\r\n   Nunca hay m\u00e1s de una tarjeta visible al mismo tiempo.\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-seq-asiento{\r\n  \/* 35em de ancho: medido directamente sobre la referencia (587px de\r\n     587px en una captura de 1512px de ancho = 34.9em). Antes ten\u00eda 24em,\r\n     un tercio m\u00e1s chica de lo que deb\u00eda ser. *\/\r\n  position:absolute; top:50%; width:35em;\r\n  transform:translateY(-50%);\r\n  z-index:2;\r\n  \/* display:grid, no un simple contenedor: las dos tarjetas de este\r\n     asiento se apilan como celdas de una misma grilla (grid-area:1\/1\r\n     en .cdz-seq-card), en vez de position:absolute. Con position:absolute\r\n     los hijos no cuentan para el alto del padre, as\u00ed que este asiento\r\n     med\u00eda 0px y las tarjetas (ancladas con inset:0 a esos 0px) quedaban\r\n     sin espacio real: el texto se desbordaba por fuera de la caja\r\n     blanca. Grid s\u00ed respeta el contenido real al calcular el alto. *\/\r\n  display:grid;\r\n}\r\n.cdz-seq-asiento.izq{ left:3%; }\r\n.cdz-seq-asiento.der{ right:3%; }\r\n\r\n.cdz-seq-card{\r\n  \/* grid-area:1\/1, no position:absolute: las dos tarjetas de un mismo\r\n     asiento se apilan en la misma celda de la grilla, ocupando el\r\n     mismo lugar, PERO esta vez s\u00ed cuentan para el alto real del\r\n     asiento (ver comentario en .cdz-seq-asiento). position:relative\r\n     es necesario para que z-index (usado por la animaci\u00f3n de salida\/\r\n     entrada) tenga efecto. *\/\r\n  grid-area:1\/1; position:relative;\r\n  \/* align-self:center \u2014 sin esto, un item de grilla se ESTIRA al alto de\r\n     la celda, y la celda mide lo que mide la tarjeta m\u00e1s alta del\r\n     asiento. En el asiento izquierdo conviven Vitamina C y Sin az\u00facar, y\r\n     esta \u00faltima es bastante m\u00e1s alta por su bloque de tres iconos en dos\r\n     filas: Vitamina C se estiraba hasta ese alto y le sobraba blanco.\r\n\r\n     Centr\u00e1ndola, cada tarjeta conserva su propio alto \u2014el que le pide su\r\n     contenido\u2014 y queda centrada en el asiento, que a su vez est\u00e1\r\n     centrado en pantalla. Resuelve las dos cosas a la vez: se va el\r\n     blanco de sobra y baja la altura. *\/\r\n  align-self:center;\r\n  background:#FFFFFF;\r\n  border-radius:1.2em;\r\n  padding:2.4em 2.8em 2.6em;\r\n  box-shadow:0 .8em 2.4em rgba(10,60,117,.14);\r\n  opacity:0;\r\n  \/* La inclinaci\u00f3n NO va aqu\u00ed por CSS: se le indica a GSAP en el JS\r\n     (propiedad \"rotation\" en los gsap.set() de m\u00e1s abajo). GSAP toma\r\n     control total de \"transform\" en cuanto anima y\/opacity sobre un\r\n     elemento, y al hacerlo normaliza a 0 cualquier \"rotate\" puesto por\r\n     hoja de estilos \u2014 quedaba pisado en cuanto arrancaba el timeline. *\/\r\n}\r\n\r\n.cdz-seq-card-icono{\r\n  width:3.2em; height:3.2em; border-radius:50%;\r\n  display:grid; place-items:center;\r\n  font-family:'Archivo', Arial, sans-serif; font-variation-settings:'wdth' 78;\r\n  font-weight:600; font-size:1.2em; color:#fff;\r\n  margin-bottom:.7em;\r\n}\r\n.cdz-seq-card[data-cdz-icono=\"c\"]  .cdz-seq-card-icono{ background:var(--cdz-acento, #F4701F); }\r\n.cdz-seq-card[data-cdz-icono=\"d\"]  .cdz-seq-card-icono{ background:var(--cdz-marca, #007AFF); }\r\n.cdz-seq-card[data-cdz-icono=\"zn\"] .cdz-seq-card-icono{ background:#7C3AED; }\r\n.cdz-seq-card[data-cdz-icono=\"0g\"] .cdz-seq-card-icono{ background:#0EA5A5; }\r\n\r\n\/* Icono de Vitamina D: la imagen reemplaza el color plano de fondo,\r\n   con la letra superpuesta encima. *\/\r\n.cdz-seq-card-icono-img{\r\n  position:relative; background:transparent !important; overflow:hidden;\r\n}\r\n.cdz-seq-card-icono-img img{\r\n  position:absolute; inset:0; width:100%; height:100%;\r\n  object-fit:cover; border-radius:50%;\r\n}\r\n.cdz-seq-card-icono-img span{\r\n  position:relative; z-index:1;\r\n}\r\n\/* Icono m\u00e1s grande: solo para la tarjeta de Vitamina D, ahora que el\r\n   t\u00edtulo va arriba y el icono queda como pieza central.\r\n   OJO: el font-size va en el <span> de adentro, NO en este mismo\r\n   elemento. Si width y font-size van juntos en em sobre el mismo\r\n   elemento, el ancho se calcula sobre el font-size YA agrandado (se\r\n   multiplican entre s\u00ed): 4.6em terminaba dando 166px en vez de 98px. *\/\r\n.cdz-seq-card-icono-grande{\r\n  width:4.6em; height:4.6em;   \/* antes 3.2em (heredado de .cdz-seq-card-icono) *\/\r\n  \/* font-size:1em resetea el heredado de 1.2em de .cdz-seq-card-icono:\r\n     si no, el ancho de arriba se segu\u00eda calculando sobre esa base\r\n     agrandada (1.2 \u00d7 21.33px = 25.6px), dando 117px en vez de 98px. *\/\r\n  font-size:1em;\r\n}\r\n.cdz-seq-card-icono-grande span{\r\n  font-size:3.2em;             \/* antes 1.7em, y 1.2em antes de eso *\/\r\n  \/* line-height:1 es lo que centra la letra de verdad. Sin esto, el\r\n     interlineado heredado deja m\u00e1s aire abajo que arriba del glifo\r\n     dentro de su caja de l\u00ednea, y aunque el contenedor centre esa\r\n     caja (grid + place-items:center), la letra se ve corrida hacia\r\n     arriba porque la caja es m\u00e1s alta que la letra misma. *\/\r\n  line-height:1;\r\n  display:block;\r\n}\r\n\r\n\/* Con el t\u00edtulo arriba ahora, necesita su propio margen inferior para\r\n   separarse del icono (antes esa separaci\u00f3n la daba el icono, que iba\r\n   primero). *\/\r\n.cdz-seq-card-centrada .cdz-seq-card-titulo{ margin-bottom:.6em; }\r\n\r\n\/* Tarjeta de Vitamina D: todo el texto centrado, icono incluido *\/\r\n.cdz-seq-card-centrada{ text-align:center; }\r\n.cdz-seq-card-centrada .cdz-seq-card-icono{ margin-inline:auto; }\r\n\/* El p\u00e1rrafo ocupa el 45% del ancho TOTAL de la tarjeta (35em), centrado.\r\n   53.6% y no 45% directo: mismo ajuste que antes por el padding lateral\r\n   de la tarjeta (ver c\u00e1lculo: 15.75em de 29.4em de contenido real). *\/\r\n.cdz-seq-card-centrada .cdz-seq-card-texto{\r\n  width:53.6%; margin-inline:auto;\r\n  \/* Mismo tama\u00f1o que el p\u00e1rrafo \"Vitamina C, Vitamina D y Zinc...\" de la\r\n     secci\u00f3n 3 (.cdz-reels-p). Las dos secciones comparten el mismo\r\n     sistema de escalado (--cdz-unit:16 \/ --cdz-ideal:1440), as\u00ed que\r\n     1.74em vale lo mismo en p\u00edxeles reales en ambas \u2014 no hace falta\r\n     convertir el valor. *\/\r\n  font-size:1.74em;\r\n}\r\n\/* Vitamina C tiene su PROPIO ancho de p\u00e1rrafo (50%, no 45% como D):\r\n   selector con m\u00e1s especificidad para no afectar a la regla compartida\r\n   de arriba, que sigue rigiendo para Vitamina D y cualquier otra\r\n   tarjeta centrada que se agregue despu\u00e9s.\r\n   Sin az\u00facar (la 4ta) va con este mismo ancho, no con el de D. *\/\r\n[data-cdz-seq-card=\"0\"] .cdz-seq-card-texto,\r\n[data-cdz-seq-card=\"3\"] .cdz-seq-card-texto{ width:59.52%; }\r\n\r\n\/* Fila de iconos de la tarjeta \"Sin az\u00facar\" (la 4ta). Reemplaza al\r\n   c\u00edrculo \"0g\" y al p\u00e1rrafo: tres piezas en fila, cada una con su\r\n   imagen y su texto debajo.\r\n\r\n   Los anchos van en % y no en em para que las tres columnas se repartan\r\n   siempre el ancho real de la tarjeta, sea cual sea el breakpoint (la\r\n   tarjeta mide 35em en escritorio y 24em por debajo de 1200px). El gap\r\n   en em s\u00ed, porque es separaci\u00f3n \u00f3ptica y debe escalar con la\r\n   tipograf\u00eda. *\/\r\n.cdz-seq-card-iconos{\r\n  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;\r\n  column-gap:6.2em; row-gap:0; margin-top:1.6em;\r\n  \/* Corrimiento leve hacia la izquierda del bloque completo de iconos.\r\n     Va como margin-right y no como transform: la tarjeta ya tiene un\r\n     rotate puesto por GSAP, y un transform ac\u00e1 no lo pisar\u00eda (son\r\n     elementos distintos) pero s\u00ed obligar\u00eda a una capa de composici\u00f3n\r\n     extra por cada icono durante el scroll. Con el margen, el bloque\r\n     sigue centrado por flex pero sobre un ancho disponible 1.6em menor,\r\n     as\u00ed que el centro se desplaza .8em a la izquierda. *\/\r\n  margin-right:1.6em;\r\n}\r\n\/* Cada pieza mide lo que mide su contenido (flex:0 0 auto), NO media\r\n   tarjeta. Con el reparto al 50% las dos de arriba quedaban pegadas a\r\n   los bordes y separad\u00edsimas entre s\u00ed: el ancho sobrante se repart\u00eda\r\n   dentro de cada columna. Midiendo por contenido, lo \u00fanico que las\r\n   separa es el column-gap, que es el n\u00famero a mover si se quieren m\u00e1s\r\n   juntas o m\u00e1s sueltas. *\/\r\n.cdz-seq-card-icono-item{\r\n  flex:0 0 auto; max-width:12em;   \/* 12em deja \"Sabor a naranja\" en\r\n                                     una sola l\u00ednea al tama\u00f1o nuevo *\/\r\n  display:flex; flex-direction:column; align-items:center; gap:.7em;\r\n}\r\n\/* El salto de l\u00ednea es expl\u00edcito y no depende de que el contenido\r\n   \"no quepa\": las tres piezas juntas s\u00ed caben en una sola fila (24em de\r\n   texto en 29.4em de tarjeta), as\u00ed que sin esto nunca bajar\u00eda la\r\n   tercera. Es un item de ancho completo y alto cero. *\/\r\n.cdz-seq-card-iconos-salto{ flex:0 0 100%; height:0; }\r\n\/* row-gap va en 0 y la separaci\u00f3n entre filas se da ac\u00e1: si fuera\r\n   row-gap, el salto contar\u00eda como una fila m\u00e1s y el hueco saldr\u00eda\r\n   doble (arriba y abajo de \u00e9l). *\/\r\n.cdz-seq-card-iconos-salto ~ .cdz-seq-card-icono-item{ margin-top:1.6em; }\r\n.cdz-seq-card-icono-item img{\r\n  width:5.4em; height:5.4em; object-fit:contain; display:block;\r\n}\r\n.cdz-seq-card-icono-item span{\r\n  \/* Mismo color y tama\u00f1o que el p\u00e1rrafo de Zinc \/ Vitamina C \/ D: el\r\n     1.74em y el #4A6FA5 salen de .cdz-seq-card-texto + la regla de\r\n     .cdz-seq-card-centrada. Se repiten ac\u00e1 en vez de reutilizar esa\r\n     clase porque estos textos no son p\u00e1rrafos de tarjeta: no llevan su\r\n     margen superior ni su ancho al 53.6%. *\/\r\n  font-size:1.74em; line-height:130%; color:#4A6FA5; font-weight:600;\r\n  text-align:center;\r\n}\r\n\r\n@media (max-width:1200px){\r\n  \/* El texto se queda en 1.74em tambi\u00e9n ac\u00e1 \u2014igual que el p\u00e1rrafo de las\r\n     otras tarjetas, que tampoco se achica en este breakpoint\u2014, as\u00ed que\r\n     la columna se angosta y el hueco se cierra para que las dos piezas\r\n     de arriba quepan en los 20.2em de contenido de la tarjeta de 24em.\r\n     Los textos pasan a dos l\u00edneas, que es lo mismo que hace el p\u00e1rrafo\r\n     de Zinc a este ancho. *\/\r\n  .cdz-seq-card-iconos{ column-gap:2em; margin-top:1.2em; margin-right:1.2em; }\r\n  .cdz-seq-card-icono-item{ max-width:7.6em; }\r\n  .cdz-seq-card-iconos-salto ~ .cdz-seq-card-icono-item{ margin-top:1.2em; }\r\n  .cdz-seq-card-icono-item img{ width:4.2em; height:4.2em; }\r\n}\r\n\r\n.cdz-seq-card-titulo{\r\n  font-size:2.6em; line-height:92%; font-weight:600;\r\n  text-transform:uppercase;\r\n}\r\n.cdz-seq-card-texto{ font-size:1.3em; line-height:130%; margin-top:.8em; color:#4A6FA5; }\r\n\r\n\/* Este rango (1200px hasta el corte a 992px donde entra la versi\u00f3n\r\n   m\u00f3vil) es angosto: se achican tarjeta y badge en la misma proporci\u00f3n\r\n   para que sigan sin pisar al producto ni salirse de la pantalla. *\/\r\n@media (max-width:1200px){\r\n  .cdz-seq-asiento{ width:24em; }\r\n  .cdz-seq-asiento.izq{ left:1%; } .cdz-seq-asiento.der{ right:1%; }\r\n  .cdz-seq-visual{ width:11em; }\r\n  .cdz-seq-card{ padding:2.2em 1.9em 1.8em; }\r\n  .cdz-seq-card-titulo{ font-size:1.9em; }\r\n  .cdz-seq-card-texto{ font-size:1.05em; }\r\n}\r\n\r\n\/* L\u00ednea ondulada decorativa detr\u00e1s del producto y las tarjetas *\/\r\n.cdz-seq-linea{\r\n  position:absolute; inset:0; z-index:0;\r\n  width:100%; height:100%;\r\n  color:#FFFFFF;\r\n  pointer-events:none;\r\n}\r\n.cdz-seq-linea path{ stroke:currentColor; }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   CIERRE \u00b7 aparece al final del recorrido, dentro del mismo escenario fijo\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-seq-final{\r\n  position:absolute; inset:0;\r\n  display:flex; align-items:flex-start; justify-content:center;\r\n  \/* Arriba, no centrado: si se superpone exacto con el producto (que\r\n     tambi\u00e9n est\u00e1 centrado en la misma caja), texto e imagen quedan\r\n     encimados aunque el producto est\u00e9 atenuado. *\/\r\n  padding-top:10vh;\r\n  text-align:center; opacity:0; pointer-events:none;\r\n  \/* z-index:2 y no 3: por debajo del producto, que va en 3. As\u00ed la caja\r\n     tapa el pie del titular, como en la referencia. Las tarjetas tambi\u00e9n\r\n     est\u00e1n en 2, pero a esta altura ya salieron de cuadro. *\/\r\n  z-index:2;\r\n}\r\n.cdz-seq-final-titulo{\r\n  font-size:4.2em; line-height:88%; color:var(--cdz-oscuro, #0A3C75);\r\n  max-width:14em;\r\n}\r\n.cdz-seq-final-titulo .claro{ color:var(--cdz-marca, #007AFF); }\r\n@media (max-width:767px){ .cdz-seq-final-titulo{ font-size:2.6em; } }\r\n\r\n\/* NOTAS MANUSCRITAS DEL CIERRE \u00b7 texto + flecha, se\u00f1alando una fruta.\r\n\r\n   Mismo papel que en la referencia: dos etiquetas a mano, una a cada\r\n   lado, apuntando a los objetos flotantes. Van en el mismo Caveat que\r\n   los manuscritos de las tarjetas, un punto m\u00e1s chicas, porque ac\u00e1 son\r\n   apostillas y no la frase principal.\r\n\r\n   Van justo DEBAJO DEL TITULAR, como en la referencia. Ojo: ah\u00ed las\r\n   notas caen al 52% de la altura, pero eso es porque su titular tiene\r\n   tres l\u00edneas enormes y termina justo en ese punto. El nuestro tiene\r\n   dos l\u00edneas y termina cerca del 28%, as\u00ed que copiar el 52% las dejaba\r\n   flotando en medio de la nada. Lo que se replica es la RELACI\u00d3N \u2014\r\n   pegadas al pie del titular\u2014, no el n\u00famero.\r\n\r\n   La flecha va debajo del texto y no llega a tocar la fruta: es un\r\n   gesto que se\u00f1ala, no una l\u00ednea de conexi\u00f3n.\r\n\r\n   Las dos flechas son la MISMA curva, espejada: la de la izquierda es\r\n   la de la derecha con las coordenadas en x invertidas (x' = 120 - x),\r\n   as\u00ed que nace arriba y cae hacia adentro, apuntando al centro. Antes\r\n   la izquierda serpenteaba y desentonaba con su par. *\/\r\n.cdz-seq-final-nota{\r\n  position:absolute; opacity:0; pointer-events:none;\r\n  display:flex; flex-direction:column; align-items:center;\r\n  color:var(--cdz-oscuro, #0A3C75);\r\n}\r\n\/* LAS DOS NOTAS VAN AHORA DEL MISMO LADO: el costado izquierdo lo ocupa\r\n   la miniatura del comercial. Para que no se pisen entre ellas, una va\r\n   arriba y la otra m\u00e1s abajo y algo m\u00e1s afuera.\r\n\r\n   La clase \"izq\" se queda aunque hoy no la use nadie: si el video se\r\n   quitara, la nota vuelve a su sitio cambiando una palabra. *\/\r\n\/* \"izq\" y \"der\" se quedan sin usar: la primera porque ese costado lo\r\n   ocupa el comercial, la segunda porque su nota se quit\u00f3. Se conservan\r\n   por si vuelve alguna \u2014 son dos l\u00edneas y ahorran volver a medir. *\/\r\n.cdz-seq-final-nota.izq{ left:23%; top:31%; }\r\n.cdz-seq-final-nota.der{ left:72%; top:29%; }\r\n\/* \"Caja x 10 sobres\" se acerca a la caja: su flecha tiene que se\u00f1alar\r\n   al producto, no a una naranja. A 80% apuntaba justo a la rebanada\r\n   chica, que estaba en su trayectoria. *\/\r\n.cdz-seq-final-nota.der-baja{ left:65%; top:50%; }\r\n\r\n.cdz-seq-final-nota-texto{\r\n  font-family:'Caveat', cursive;\r\n  font-variation-settings: normal;\r\n  font-weight:600;\r\n  \/* 1.9em, el mismo tama\u00f1o que los manuscritos de las tarjetas. *\/\r\n  font-size:1.9em;\r\n  line-height:112%;\r\n  display:inline-block;\r\n}\r\n.cdz-seq-final-nota.izq .cdz-seq-final-nota-texto{ transform:rotate(-2deg); }\r\n.cdz-seq-final-nota.der .cdz-seq-final-nota-texto{ transform:rotate(2deg);  }\r\n.cdz-seq-final-nota.der-baja .cdz-seq-final-nota-texto{ transform:rotate(2deg); }\r\n\r\n.cdz-seq-final-nota-flecha{\r\n  width:5.2em; height:auto; display:block; margin-top:.5em;\r\n  overflow:visible;\r\n}\r\n\/* La flecha cuelga CENTRADA bajo el texto, en las dos notas. Antes cada\r\n   una llevaba su propio margin-left para acomodarla a ojo, y el\r\n   resultado era que quedaba corrida a un costado en vez de justo\r\n   debajo. Con align-items:center en el bloque, el centro de la flecha\r\n   se alinea solo con el centro del texto \u2014que ya viene centrado por el\r\n   text-align del cierre\u2014 sin n\u00fameros que calibrar. *\/\r\n\r\n@media (max-width:1200px){ .cdz-seq-final-nota{ display:none; } }\r\n\r\n\/* NARANJAS DEL CIERRE \u00b7 cuatro piezas, dos de cada imagen.\r\n\r\n   Patr\u00f3n de la referencia: cada fruta aparece DOS veces, una grande\r\n   pegada al borde \u2014recortada y desenfocada, que hace de fondo\u2014 y otra\r\n   peque\u00f1a y n\u00edtida m\u00e1s hacia adentro. Cada imagen se queda en su lado:\r\n   la naranja entera a la izquierda, la rebanada a la derecha.\r\n\r\n   Las posiciones salen de medir la captura de la referencia (1910\u00d7905),\r\n   buscando en cada esquina qu\u00e9 p\u00edxeles NO son del fondo verde. Centros\r\n   medidos, en % del escenario:\r\n\r\n     galleta grande, izq. arriba ....  4.4% , 38.0%   ancho  8.8%\r\n     galleta chica,  izq. abajo .... 20.8% , 78.2%   ancho  5.5%\r\n     fresa chica,    der. medio  .... 70.9% , 58.5%   ancho 10.9%\r\n     fresa grande,   der. abajo  .... 95.1% , 75.1%   ancho  9.3%\r\n\r\n   Van en % y no en em para que el reparto sea el mismo a cualquier\r\n   ancho: son posiciones de composici\u00f3n, no medidas tipogr\u00e1ficas. El\r\n   escenario tiene overflow oculto, as\u00ed que lo que se sale se corta solo.\r\n\r\n   El desenfoque de las grandes no es adorno: sin \u00e9l, dos piezas de ese\r\n   tama\u00f1o en los bordes compiten con la caja. *\/\r\n.cdz-seq-final-fruta{\r\n  position:absolute; display:block; height:auto; opacity:0;\r\n  pointer-events:none; user-select:none;\r\n}\r\n\/* Las GRANDES miden el doble que su pareja chica y se salen del cuadro\r\n   por el borde: eso es lo que las pone \"cerca del ojo\". Con un tama\u00f1o\r\n   parecido al de las chicas no se leen como primer plano sino como otra\r\n   pieza igual, nada m\u00e1s que desenfocada \u2014 que era el error anterior: la\r\n   rebanada grande med\u00eda 11.5% contra el 10.5% de la chica.\r\n\r\n   Los valores negativos y los que pasan de 100% son a prop\u00f3sito: la\r\n   parte que sobra la recorta el overflow del escenario. *\/\r\n\/* Las dos GRANDES suben juntas: son el par de fondo, una a cada lado, y\r\n   moviendo solo una se rompe la simetr\u00eda del plano. *\/\r\n.cdz-seq-final-naranja-grande { width:14%;   left:-5%;  top:10%;   filter:blur(.22em); }\r\n\/* La naranja chica baja del 70% al 85% y encoge de 6.5 a 5.6% de ancho:\r\n   por encima quedaba a la altura del pie del comercial, y las dos piezas\r\n   compet\u00edan en el mismo rinc\u00f3n de la pantalla.\r\n\r\n   El ancho va en % del escenario, as\u00ed que el 5.6 se mantiene\r\n   proporcional en cualquier pantalla. *\/\r\n.cdz-seq-final-naranja-chica  { width:5.6%;  left:18%;  top:85%;   }\r\n\/* La rebanada chica se aparta hacia abajo y afuera: estaba justo donde\r\n   ahora cae la flecha de \"Caja x 10 sobres\". Del 56.5% pas\u00f3 a 68% y de\r\n   ah\u00ed a 76%. *\/\r\n.cdz-seq-final-rebanada-chica { width:9.4%;  left:80%;  top:76%;   }\r\n\/* La rebanada grande sube del 58% al 44%: al mover su pareja chica m\u00e1s\r\n   abajo, las dos quedaban apiladas en el mismo cuadrante y se le\u00edan como\r\n   una sola mancha. Separadas en vertical vuelven a ser dos planos.\r\n\r\n   Del 58% pas\u00f3 a 44%, de ah\u00ed a 28% y ahora a 19%. La pieza mide un 21%\r\n   de ancho y se sale por el borde derecho, as\u00ed que al subirla tambi\u00e9n\r\n   asoma menos por abajo: lo que se recorta ya es su parte inferior. *\/\r\n.cdz-seq-final-rebanada-grande{ width:21%;   left:90%;  top:19%;   filter:blur(.28em); }\r\n\r\n@media (max-width:1200px){\r\n  .cdz-seq-final-naranja-grande { width:17%; left:-6%; }\r\n  .cdz-seq-final-naranja-chica  { width:8%;  }\r\n  .cdz-seq-final-rebanada-chica { width:12%; }\r\n  .cdz-seq-final-rebanada-grande{ width:25%; left:88%; }\r\n}\r\n\r\n\/* ---------------------------------------------------------------------\r\n   EL COMERCIAL \u00b7 miniatura a la izquierda del cierre\r\n\r\n   Ocupa un 26% del escenario y no la pantalla entera: el video es una\r\n   invitaci\u00f3n, no el contenido principal de la secci\u00f3n.\r\n\r\n   Aparece SOLO en el cierre, junto con el titular y las frutas. Antes de\r\n   eso el costado izquierdo lo ocupan las tarjetas, as\u00ed que estar\u00eda\r\n   encima de ellas.\r\n   --------------------------------------------------------------------- *\/\r\n\/* INTEGRADA CON EL RESTO, no pegada encima. Lo que la hac\u00eda parecer un\r\n   elemento importado eran tres cosas, y ninguna es el tama\u00f1o:\r\n\r\n     \u00b7 iba perfectamente recta en una composici\u00f3n donde todo est\u00e1\r\n       ligeramente torcido \u2014las tarjetas, los manuscritos, las frutas\u2014,\r\n       as\u00ed que se le\u00eda como de otra pieza;\r\n     \u00b7 su sombra era el doble de densa que la de las tarjetas;\r\n     \u00b7 su pie iba en la tipograf\u00eda de los t\u00edtulos y no en la manuscrita\r\n       que usan las dem\u00e1s apostillas de este cierre.\r\n\r\n   Corregidas las tres, entra en la misma familia. *\/\r\n.cdz-seq-video{\r\n  position:absolute; z-index:4;\r\n  \/* El top es el que lo sube o lo baja. Va con translateY(-50%), as\u00ed que\r\n     el 50% deja el video centrado en la pantalla; subir el n\u00famero lo\r\n     baja. El segundo translateY, el de 6vh, no es posici\u00f3n: es el\r\n     desplazamiento de la entrada y vuelve a cero al aparecer. *\/\r\n  left:4%; top:57%;\r\n  \/* 27% y no m\u00e1s: el producto mide 30em y va centrado, o sea que ocupa\r\n     del 33% al 67% de la pantalla. Con el video empezando en el 4%, a\r\n     partir del 29% de ancho empezar\u00eda a tocarlo. *\/\r\n  width:27%;\r\n  transform:translateY(-50%) translateY(6vh);\r\n  opacity:0;\r\n  pointer-events:none;\r\n  transition:opacity .6s ease, transform .6s cubic-bezier(.32,.72,0,1);\r\n}\r\n\/* pointer-events:auto solo cuando est\u00e1 visible, y es imprescindible: el\r\n   contenedor del cierre los tiene desactivados para no robarle clics a\r\n   la escena, y la miniatura es lo \u00fanico de ah\u00ed dentro que s\u00ed hay que\r\n   poder pulsar. *\/\r\n.cdz-seq-video[data-visible]{\r\n  opacity:1;\r\n  transform:translateY(-50%) translateY(0);\r\n  pointer-events:auto;\r\n}\r\n@media (max-width:1200px){ .cdz-seq-video{ display:none; } }\r\n\r\n.cdz-seq-video-btn{\r\n  display:block; width:100%; padding:0; border:0; background:none;\r\n  cursor:pointer; position:relative;\r\n  \/* Mismo radio y MISMA SOMBRA que las tarjetas de la secci\u00f3n: es lo que\r\n     la hace pertenecer al conjunto. *\/\r\n  border-radius:1.2em; overflow:hidden;\r\n  box-shadow:0 .8em 2.4em rgba(10,60,117,.14);\r\n  \/* Torcida como todo lo dem\u00e1s del cierre. *\/\r\n  transform:rotate(-2.2deg);\r\n  transition:transform .3s cubic-bezier(.32,.72,0,1), box-shadow .3s ease;\r\n}\r\n.cdz-seq-video-btn:hover{\r\n  transform:rotate(-2.2deg) translateY(-.4em);\r\n  box-shadow:0 1.2em 3em rgba(10,60,117,.22);\r\n}\r\n\/* La miniatura es el PROPIO VIDEO parado en el segundo 1 \u2014el \"#t=1\" del\r\n   src\u2014, no una imagen aparte. Con preload=\"metadata\" el navegador baja\r\n   solo la cabecera y ese fotograma, no el archivo entero: son unas\r\n   decenas de KB, no los megas del comercial. *\/\r\n.cdz-seq-video-btn video{\r\n  display:block; width:100%; height:auto;\r\n  aspect-ratio:16\/9; object-fit:cover;\r\n  background:#0A3C75;\r\n  pointer-events:none;\r\n}\r\n\/* SIN VELO OSCURO. Llevaba una capa azul al 22% para dar contraste al\r\n   bot\u00f3n de reproducir, y lo que consegu\u00eda era que el comercial se viera\r\n   apagado hasta pasar el rat\u00f3n \u2014 justo lo contrario de invitar a verlo.\r\n\r\n   El contraste del bot\u00f3n lo da ahora su propia sombra, que es lo que lo\r\n   despega del fotograma sin ensuciar la imagen. *\/\r\n.cdz-seq-video-play{\r\n  position:absolute; inset:0;\r\n  display:grid; place-items:center;\r\n}\r\n.cdz-seq-video-play span{\r\n  width:3.6em; height:3.6em; border-radius:50%;\r\n  background:#FFFFFF; color:var(--cdz-marca, #007AFF);\r\n  display:grid; place-items:center; line-height:0;\r\n  box-shadow:0 .3em 1.4em rgba(0,0,0,.45);\r\n  transition:transform .3s cubic-bezier(.32,.72,0,1);\r\n}\r\n.cdz-seq-video-btn:hover .cdz-seq-video-play span{ transform:scale(1.08); }\r\n\/* El tri\u00e1ngulo va corrido a la derecha: su centro geom\u00e9trico no es su\r\n   centro \u00f3ptico, y centrado de verdad se ve desplazado a la izquierda. *\/\r\n.cdz-seq-video-play svg{ width:1.3em; height:1.3em; display:block; margin-left:.18em; }\r\n\r\n\/* El pie va en la MANUSCRITA de la secci\u00f3n, no en la tipograf\u00eda de los\r\n   t\u00edtulos: en este cierre lo que acompa\u00f1a \u2014\"Caja x 10 sobres\"\u2014 est\u00e1\r\n   escrito a mano, y un texto en Archivo aqu\u00ed se le\u00eda como una etiqueta\r\n   de interfaz. *\/\r\n.cdz-seq-video-pie{\r\n  \/* Va ENCIMA del video, no debajo: por eso el margen es inferior y no\r\n     superior. El orden en el HTML tambi\u00e9n cambi\u00f3 \u2014 el texto va antes que\r\n     el bot\u00f3n\u2014 porque aqu\u00ed no hay nada que reordene visualmente, el\r\n     bloque es un contenedor normal en flujo.\r\n\r\n     SE DESTACA CON TAMA\u00d1O Y MOVIMIENTO, NO CON COLOR, y eso est\u00e1 medido:\r\n     sobre el azul claro de esta secci\u00f3n el blanco da 1.70:1 de contraste\r\n     y el naranja de marca 1.72 \u2014 los dos ilegibles. El azul oscuro que\r\n     lleva da 6.45, as\u00ed que es el \u00fanico que se puede usar aqu\u00ed.\r\n\r\n     Lo que s\u00ed se puede es agrandarlo y hacerlo respirar. La animaci\u00f3n\r\n     repite el rotate en cada fotograma porque transform es una sola\r\n     propiedad: animar la escala sin \u00e9l enderezar\u00eda el texto. *\/\r\n  display:block; margin-bottom:.35em; text-align:center;\r\n  font-family:'Caveat', cursive;\r\n  font-variation-settings: normal;\r\n  font-size:2.5em; font-weight:600; line-height:112%;\r\n  color:var(--cdz-oscuro, #0A3C75);\r\n  transform:rotate(-2.2deg);\r\n  \/* 4.5s por ciclo. A 2.6 el texto se le\u00eda como un parpadeo nervioso;\r\n     a este ritmo se percibe como una respiraci\u00f3n. *\/\r\n  animation:cdz-seq-video-late 4.5s ease-in-out infinite;\r\n}\r\n@keyframes cdz-seq-video-late{\r\n  0%,100%{ transform:rotate(-2.2deg) scale(1);    }\r\n  50%    { transform:rotate(-2.2deg) scale(1.05); }\r\n}\r\n@media (prefers-reduced-motion: reduce){\r\n  .cdz-seq-video-pie{ animation:none; }\r\n}\r\n\r\n\/* La miniatura de la versi\u00f3n m\u00f3vil va en el flujo normal, bajo el cierre\r\n   de esa versi\u00f3n. Comparte la misma ventana emergente. *\/\r\n.cdz-seq-video-movil{ display:none; }\r\n@media (max-width:991px){\r\n  .cdz-seq-video-movil{ display:block; margin:2.5em auto 0; max-width:26em; }\r\n}\r\n\r\n\/* ---------------------------------------------------------------------\r\n   LA VENTANA EMERGENTE DEL COMERCIAL\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-seq-modal{\r\n  position:fixed; inset:0; z-index:9999;\r\n  display:grid; place-items:center;\r\n  background:rgba(6,26,52,.86);\r\n  backdrop-filter:blur(.3em);\r\n  opacity:0; pointer-events:none;\r\n  transition:opacity .3s ease;\r\n}\r\n.cdz-seq-modal[data-abierto]{ opacity:1; pointer-events:auto; }\r\n\r\n\/* 75% DE LA PANTALLA, CONTANDO LAS DOS DIMENSIONES. Con un 75vw a secas,\r\n   en una pantalla ancha y baja el video se saldr\u00eda por arriba y por\r\n   abajo: 75vw en 16:9 pide 42vh de alto en un monitor 16:9, pero mucho\r\n   m\u00e1s en uno panor\u00e1mico. El min() se queda con el que quepa. *\/\r\n.cdz-seq-modal-caja{\r\n  position:relative;\r\n  width:min(75vw, calc(75vh * 16 \/ 9));\r\n  transform:scale(.94);\r\n  transition:transform .3s cubic-bezier(.32,.72,0,1);\r\n}\r\n.cdz-seq-modal[data-abierto] .cdz-seq-modal-caja{ transform:scale(1); }\r\n.cdz-seq-modal-caja video{\r\n  display:block; width:100%; height:auto; aspect-ratio:16\/9;\r\n  border-radius:.8em; background:#000;\r\n  box-shadow:0 2em 5em rgba(0,0,0,.5);\r\n}\r\n\r\n\/* EL PADDING:0 ES LO QUE LO HACE REDONDO. El CSS de esta secci\u00f3n no\r\n   resetea los <button>, as\u00ed que el navegador le pone su propio relleno:\r\n   el elemento deja de ser cuadrado \u2014m\u00e1s ancho que alto\u2014 y un\r\n   border-radius del 50% sobre un rect\u00e1ngulo da un \u00f3valo, no un c\u00edrculo.\r\n\r\n   Mismo motivo por el que el bot\u00f3n de la miniatura ya lo llevaba. *\/\r\n.cdz-seq-modal-cerrar{\r\n  position:absolute; top:-3.2em; right:0;\r\n  width:2.6em; height:2.6em; border-radius:50%;\r\n  padding:0; border:0; cursor:pointer;\r\n  background:#FFFFFF; color:var(--cdz-oscuro, #0A3C75);\r\n  display:grid; place-items:center; line-height:0;\r\n  transition:background .25s ease, color .25s ease, transform .25s ease;\r\n}\r\n.cdz-seq-modal-cerrar:hover{\r\n  background:var(--cdz-acento, #F4701F); color:#FFFFFF; transform:scale(1.06);\r\n}\r\n.cdz-seq-modal-cerrar svg{ width:1.1em; height:1.1em; display:block; }\r\n\/* En pantallas bajas la X no cabe encima del video: se mete dentro. *\/\r\n@media (max-height:700px){\r\n  .cdz-seq-modal-cerrar{ top:.6em; right:.6em; }\r\n}\r\n\r\n\/* ---------------------------------------------------------------------\r\n   VERSI\u00d3N M\u00d3VIL \u00b7 sin pin, sin 3D: imagen est\u00e1tica + tarjetas apiladas\r\n   --------------------------------------------------------------------- *\/\r\n\/* ---------------------------------------------------------------------\r\n   MANUSCRITO decorativo, a la derecha del escenario \u2014 igual tratamiento\r\n   que en el hero y la secci\u00f3n 3: Caveat, ligeramente torcido.\r\n   --------------------------------------------------------------------- *\/\r\n\/* Dos capas separadas a prop\u00f3sito: esta exterior solo centra por CSS\r\n   y GSAP nunca la toca. Si GSAP animara \"y\" sobre el MISMO elemento\r\n   que tiene el translateY(-50%) de centrado, lo pisar\u00eda igual que pis\u00f3\r\n   el rotate de las tarjetas \u2014 misma causa, mismo arreglo. *\/\r\n.cdz-seq-firma{\r\n  position:absolute; top:50%; z-index:4;\r\n  transform:translateY(-50%);\r\n  text-align:center; pointer-events:none;\r\n}\r\n\/* Cada manuscrito va del lado CONTRARIO a su tarjeta, en el hueco que\r\n   deja libre el asiento vac\u00edo: Vitamina D y Zinc se sientan a la\r\n   derecha, as\u00ed que su frase va a la izquierda, y al rev\u00e9s con Vitamina C\r\n   y Sin az\u00facar. Por eso nunca se pisan con una tarjeta. *\/\r\n.cdz-seq-firma.der{ right:22%; }\r\n.cdz-seq-firma.izq{ left:14%;  }   \/* m\u00e1s afuera que su par de la derecha: de ese lado el hueco es mayor *\/\r\n.cdz-seq-firma-anim{ display:block; }   \/* esta interior es la que GSAP anima *\/\r\n.cdz-seq-firma-texto{\r\n  font-family:'Caveat', cursive;\r\n  font-variation-settings: normal;\r\n  font-weight:600;\r\n  \/* 1.9em (antes 1.7em): unos 3 puntos m\u00e1s en pantalla. *\/\r\n  font-size:1.9em;\r\n  line-height:110%;\r\n  color:var(--cdz-oscuro, #0A3C75);\r\n  transform:rotate(-3deg);\r\n  display:inline-block;\r\n}\r\n\/* La inclinaci\u00f3n se invierte seg\u00fan el lado, para que las cuatro frases\r\n   no se vean calcadas unas de otras. *\/\r\n.cdz-seq-firma.izq .cdz-seq-firma-texto{ transform:rotate(3deg); }\r\n@media (max-width:1200px){ .cdz-seq-firma{ display:none; } }   \/* no cabe con las tarjetas mas juntas *\/\r\n\r\n.cdz-seq-mobile{ display:none; }\r\n@media (max-width:991px){\r\n  .cdz-seq-mobile{\r\n    display:block; padding:3em 1.25em 4em;\r\n  }\r\n  .cdz-seq-mobile-img{ width:70%; max-width:16em; margin:0 auto 2em; display:block; }\r\n  .cdz-seq-mobile-cards{ display:grid; gap:1em; }\r\n  .cdz-seq-mobile .cdz-seq-card{\r\n    \/* relative, no static: el badge se posiciona absoluto respecto a\r\n       la tarjeta, y con static perder\u00eda esa referencia *\/\r\n    position:relative; opacity:1; width:100%;\r\n  }\r\n  .cdz-seq-mobile-final{ text-align:center; margin-top:2.5em; }\r\n  .cdz-seq-mobile-final h2{ font-size:2.4em; line-height:90%; color:var(--cdz-oscuro,#0A3C75); }\r\n  .cdz-seq-mobile-final .claro{ color:var(--cdz-marca,#007AFF); }\r\n}\r\n\r\n.cdz-seq .cdz-anim4{ opacity:0; }\r\n<\/style>\r\n\r\n<section class=\"cdz-seq\" id=\"cdz-nutricion\" data-cdz-seq>\r\n\r\n  <!-- Escenario fijo: solo en escritorio (min-width:992px), controlado por JS -->\r\n  <div class=\"cdz-seq-wrap\" data-cdz-seq-wrap>\r\n    <div class=\"cdz-seq-sticky\" data-cdz-seq-sticky>\r\n\r\n      <!-- L\u00ednea ondulada decorativa, detr\u00e1s de todo.\r\n\r\n           La ONDA es la misma de siempre, sin tocar un solo n\u00famero: entra\r\n           en (-20,128), hace su hondonada en (470,330) y sale por arriba a\r\n           la derecha en (1060,-10).\r\n\r\n           Lo \u00daNICO agregado es la continuaci\u00f3n, que va ANTES de ella en el\r\n           path (drawSVG dibuja del final hacia el inicio, as\u00ed que en\r\n           pantalla se ve despu\u00e9s): al llegar arriba a la izquierda la\r\n           l\u00ednea sigue de largo y SE SALE de cuadro \u2014los puntos de control\r\n           llegan a x=-116 y el viewBox corta en x=-30\u2014, y vuelve a\r\n           aparecer m\u00e1s abajo formando la U de costado que baja hasta el\r\n           fondo, da la vuelta y se va otra vez por el borde izquierdo.\r\n\r\n           Esa U est\u00e1 calcada de la referencia: se midi\u00f3 su captura p\u00edxel a\r\n           p\u00edxel y se ajustaron las B\u00e9zier por m\u00ednimos cuadrados sobre el\r\n           centro del trazo real (error m\u00e1ximo ~1 unidad de viewBox). -->\r\n      <svg class=\"cdz-seq-linea\" viewBox=\"-30 -30 1060 760\" fill=\"none\" preserveAspectRatio=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n        <path data-cdz-seq-linea-trazo\r\n              d=\"M-55,652 C-47,657 -39,665 -30,672 C3,701 86,737 114,685 C143,633 144,615 114,533 C85,451 19,394 -30,325 C-88,242 -116,186 -20,128 C60,80 180,140 300,320 C340,390 420,390 470,330 C600,170 750,60 1060,-10\"\r\n              stroke=\"currentColor\" stroke-width=\"30\" stroke-linecap=\"butt\"\/>\r\n      <\/svg>\r\n\r\n      <div class=\"cdz-seq-visual\" data-cdz-seq-visual>\r\n        <model-viewer\r\n          id=\"cdzSeqCaja\"\r\n          src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/07\/NEW-CAJA-X-10-CDZ.glb\"\r\n          alt=\"Caja de CDZ Vit por 10 sobres\"\r\n          camera-orbit=\"0deg 78deg 0.32m\"\r\n          field-of-view=\"26deg\"\r\n          interaction-prompt=\"none\"\r\n          interpolation-decay=\"0\"\r\n          disable-zoom disable-pan\r\n          shadow-intensity=\"1.1\" shadow-softness=\"0.9\"\r\n          exposure=\"1.0\" environment-image=\"neutral\"\r\n          tone-mapping=\"commerce\"\r\n          loading=\"eager\" reveal=\"auto\">\r\n          <div slot=\"progress-bar\"><\/div>\r\n        <\/model-viewer>\r\n      <\/div>\r\n\r\n      <!-- Asiento IZQUIERDO: la tarjeta 1 (Vitamina C) y la tarjeta 3 (Zinc)\r\n           viven apiladas una sobre otra, en el mismo lugar. El script\r\n           alterna cu\u00e1l se ve; nunca se mueven de asiento. -->\r\n      <div class=\"cdz-seq-asiento izq\" data-cdz-seq-asiento=\"izq\">\r\n        <!-- Tarjeta de Vitamina C: mismo patr\u00f3n que Vitamina D \u2014 icono\r\n             con imagen propia, t\u00edtulo \"Vitamina\" solo, texto centrado. -->\r\n        <div class=\"cdz-seq-card cdz-seq-card-centrada\" data-cdz-seq-card=\"0\" data-cdz-icono=\"c\">\r\n          <div class=\"cdz-seq-card-titulo\">Vitamina<\/div>\r\n          <div class=\"cdz-seq-card-icono cdz-seq-card-icono-img cdz-seq-card-icono-grande\">\r\n            <img decoding=\"async\" src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/06\/Esfera-azul.png\" alt=\"\">\r\n            <span>D<\/span>\r\n          <\/div>\r\n          <div class=\"cdz-seq-card-texto\"> Contribuye al funcionamiento normal del sistema inmune.<\/div>\r\n        <\/div>\r\n        <!-- Sin az\u00facar reemplaza ahora a Vitamina C (antes era Zinc quien\r\n             iba en este asiento) \u2014 pidi\u00f3 que Zinc pasara a ser la 3ra en\r\n             aparecer en vez de la 4ta; para eso, las dos intercambiaron\r\n             de asiento.\r\n\r\n             Ahora sigue el MISMO patr\u00f3n que Vitamina C: clase -centrada,\r\n             t\u00edtulo arriba, icono grande debajo como pieza central y\r\n             p\u00e1rrafo al mismo ancho. La \u00fanica diferencia es el icono: las\r\n             otras tres tarjetas usan una esfera en PNG y para \"0g\" no hay\r\n             imagen, as\u00ed que conserva el c\u00edrculo de color plano (#0EA5A5,\r\n             que ya ven\u00eda de data-cdz-icono=\"0g\") pero al tama\u00f1o grande.\r\n\r\n             Los tres iconos (Sin az\u00facar, Sabor a naranja, Sobre de 3g)\r\n             pasaron de PNG est\u00e1tico a GIF animado. Cada <img> lleva\r\n             data-cdz-seq-gif para que el script pueda relanzar los tres\r\n             a la vez y en bucle propio \u2014 ver el bloque de los GIF en el\r\n             JavaScript. -->\r\n        <div class=\"cdz-seq-card cdz-seq-card-centrada\" data-cdz-seq-card=\"3\" data-cdz-icono=\"0g\">\r\n          <div class=\"cdz-seq-card-iconos\">\r\n            <div class=\"cdz-seq-card-icono-item\">\r\n              <img decoding=\"async\" data-cdz-seq-gif src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/ICONOS-WEB-SIN-AZUCAR.gif\" alt=\"Sin az\u00facar\">\r\n              <span>Sin az\u00facar<\/span>\r\n            <\/div>\r\n            <div class=\"cdz-seq-card-icono-item\">\r\n              <img decoding=\"async\" data-cdz-seq-gif src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/ICONOS-WEB-SABOR-NARANJA.gif\" alt=\"Sabor a naranja\">\r\n              <span>Sabor a naranja<\/span>\r\n            <\/div>\r\n            <div class=\"cdz-seq-card-iconos-salto\"><\/div>\r\n            <div class=\"cdz-seq-card-icono-item\">\r\n              <img decoding=\"async\" data-cdz-seq-gif src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/ICONOS-WEB-EN-SOBRES.gif\" alt=\"Sobre de 3 g\">\r\n              <span>Sobre de 3 g<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Asiento DERECHO: Vitamina D, y ahora Zinc (antes Sin az\u00facar) -->\r\n      <div class=\"cdz-seq-asiento der\" data-cdz-seq-asiento=\"der\">\r\n        <!-- Tarjeta de Vitamina D: icono con imagen propia y texto centrado -->\r\n        <div class=\"cdz-seq-card cdz-seq-card-centrada\" data-cdz-seq-card=\"1\" data-cdz-icono=\"d\">\r\n          <div class=\"cdz-seq-card-titulo\">Vitamina<\/div>\r\n          <div class=\"cdz-seq-card-icono cdz-seq-card-icono-img cdz-seq-card-icono-grande\">\r\n            <img decoding=\"async\" src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/06\/Esfera-naranja.png\" alt=\"\">\r\n            <span>C<\/span>\r\n          <\/div>\r\n          <div class=\"cdz-seq-card-texto\">1000 mg por sobre. Refuerza tus defensas todos los d\u00edas, en una sola toma.<\/div>\r\n        <\/div>\r\n        <!-- Tarjeta de Zinc: mismo patr\u00f3n que Vitamina D y Vitamina C \u2014\r\n             icono con imagen propia, t\u00edtulo primero, texto centrado. -->\r\n        <div class=\"cdz-seq-card cdz-seq-card-centrada\" data-cdz-seq-card=\"2\" data-cdz-icono=\"zn\">\r\n          <div class=\"cdz-seq-card-titulo\">Zinc<\/div>\r\n          <div class=\"cdz-seq-card-icono cdz-seq-card-icono-img cdz-seq-card-icono-grande\">\r\n            <img decoding=\"async\" src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/06\/Esfera-morada.png\" alt=\"\">\r\n            <span>Zn<\/span>\r\n          <\/div>\r\n          <div class=\"cdz-seq-card-texto\">Una ingesta adecuada de zinc fortalece las defensas del organismo.<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Un manuscrito por tarjeta, cada uno del lado contrario a la\r\n           suya. Aparece y se va con ella; el n\u00famero del data- es el\r\n           \u00edndice de su tarjeta en el array \"tarjetas\" del JS. -->\r\n      <div class=\"cdz-seq-firma izq\">\r\n        <div class=\"cdz-seq-firma-anim\" data-cdz-seq-firma=\"1\">\r\n          <span class=\"cdz-seq-firma-texto\" data-cdz-seq-firma-stroke=\"1\">Tu aliado<br>cada d\u00eda \u2661<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"cdz-seq-firma der\">\r\n        <div class=\"cdz-seq-firma-anim\" data-cdz-seq-firma=\"0\">\r\n          <span class=\"cdz-seq-firma-texto\" data-cdz-seq-firma-stroke=\"0\">1000 UI <br>por sobre<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"cdz-seq-firma izq\">\r\n        <div class=\"cdz-seq-firma-anim\" data-cdz-seq-firma=\"2\">\r\n          <span class=\"cdz-seq-firma-texto\" data-cdz-seq-firma-stroke=\"2\">40 mg<br>de zinc<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"cdz-seq-firma der\">\r\n        <div class=\"cdz-seq-firma-anim\" data-cdz-seq-firma=\"3\">\r\n          <span class=\"cdz-seq-firma-texto\" data-cdz-seq-firma-stroke=\"3\">Todo en un<br>mismo sobre<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n\r\n      <div class=\"cdz-seq-final\" data-cdz-seq-final>\r\n\r\n        <!-- EL COMERCIAL, a la izquierda. Va primero en el marcado para\r\n             quedar por debajo del resto en orden de lectura; su z-index\r\n             lo pone por encima. -->\r\n        <div class=\"cdz-seq-video\" data-cdz-seq-video>\r\n          <span class=\"cdz-seq-video-pie\">Ver comercial<\/span>\r\n          <button type=\"button\" class=\"cdz-seq-video-btn\" data-cdz-seq-video-abrir\r\n                  aria-label=\"Reproducir el comercial de CDZ Vit\">\r\n            <video src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/06\/COMERCIAL-CDZ-2025-20S-WEB.mp4#t=1\"\r\n                   preload=\"metadata\" muted playsinline\r\n                   tabindex=\"-1\" aria-hidden=\"true\"><\/video>\r\n            <span class=\"cdz-seq-video-play\">\r\n              <span>\r\n                <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\r\n                  <path d=\"M8 5.2v13.6L19 12z\"\/>\r\n                <\/svg>\r\n              <\/span>\r\n            <\/span>\r\n          <\/button>\r\n        <\/div>\r\n\r\n        <!-- Dos de cada fruta: la grande pegada al borde y desenfocada,\r\n             la chica n\u00edtida hacia adentro. Van antes del titular en el\r\n             marcado para quedar por debajo de \u00e9l. -->\r\n        <img decoding=\"async\" class=\"cdz-seq-final-fruta cdz-seq-final-naranja-grande\" data-cdz-seq-fruta=\"1\"\r\n             src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/NARANJA-FONDO-01.png\"\r\n             alt=\"\" aria-hidden=\"true\">\r\n        <img decoding=\"async\" class=\"cdz-seq-final-fruta cdz-seq-final-naranja-chica\" data-cdz-seq-fruta=\"2\"\r\n             src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/NARANJA-FONDO-01.png\"\r\n             alt=\"\" aria-hidden=\"true\">\r\n        <img decoding=\"async\" class=\"cdz-seq-final-fruta cdz-seq-final-rebanada-chica\" data-cdz-seq-fruta=\"3\"\r\n             src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/NARANJA-FONDO-02.png\"\r\n             alt=\"\" aria-hidden=\"true\">\r\n        <img decoding=\"async\" class=\"cdz-seq-final-fruta cdz-seq-final-rebanada-grande\" data-cdz-seq-fruta=\"4\"\r\n             src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/NARANJA-FONDO-02.png\"\r\n             alt=\"\" aria-hidden=\"true\">\r\n        <!-- Notas manuscritas: cada una se\u00f1ala una fruta, como en la\r\n             referencia. Entran junto con ellas.\r\n\r\n             \"Caja x 10 sobres\" pas\u00f3 al lado derecho, m\u00e1s abajo que su\r\n             compa\u00f1era, porque el izquierdo lo ocupa ahora el comercial.\r\n             Con el lado cambia la FLECHA: lleva la curva espejada, que\r\n             nace arriba a la derecha y cae hacia dentro. Con la de antes\r\n             se\u00f1alar\u00eda hacia fuera de la pantalla. -->\r\n        <div class=\"cdz-seq-final-nota der-baja\" data-cdz-seq-nota=\"1\">\r\n          <span class=\"cdz-seq-final-nota-texto\">Caja x 10<br>sobres<\/span>\r\n          <svg class=\"cdz-seq-final-nota-flecha\" viewBox=\"0 0 120 88\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M104 6c4 30-8 54-34 68\"\/><path d=\"M70 74l14-1\"\/><path d=\"M70 74l6-13\"\/><\/svg>\r\n        <\/div>\r\n        <h2 class=\"cdz-seq-final-titulo\" data-cdz-seq-final-titulo>\r\n          Tus defensas,<br>\r\n          en <span class=\"claro\">una sola toma.<\/span>\r\n        <\/h2>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Versi\u00f3n m\u00f3vil: est\u00e1tica, sin pin, sin 3D -->\r\n  <div class=\"cdz-seq-mobile\">\r\n    <img decoding=\"async\" class=\"cdz-seq-mobile-img cdz-anim4\" data-cdz-seq-mobile-anim\r\n         src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/06\/CDZ-VIT.webp\" alt=\"CDZ Vit\">\r\n    <div class=\"cdz-seq-mobile-cards\">\r\n      <div class=\"cdz-seq-card cdz-anim4\" data-cdz-seq-mobile-anim data-cdz-icono=\"c\">\r\n        <div class=\"cdz-seq-card-icono\">C<\/div>\r\n        <div class=\"cdz-seq-card-titulo\">Vitamina C \u00b7 1000 mg<\/div>\r\n        <div class=\"cdz-seq-card-texto\">Refuerza tus defensas todos los d\u00edas, en una sola toma.<\/div>\r\n      <\/div>\r\n      <div class=\"cdz-seq-card cdz-anim4\" data-cdz-seq-mobile-anim data-cdz-icono=\"d\">\r\n        <div class=\"cdz-seq-card-icono\">D<\/div>\r\n        <div class=\"cdz-seq-card-titulo\">Vitamina D \u00b7 1000 UI<\/div>\r\n        <div class=\"cdz-seq-card-texto\">1000 UI por sobre. Contribuye al funcionamiento normal del sistema inmune.<\/div>\r\n      <\/div>\r\n      <div class=\"cdz-seq-card cdz-anim4\" data-cdz-seq-mobile-anim data-cdz-icono=\"zn\">\r\n        <div class=\"cdz-seq-card-icono\">Zn<\/div>\r\n        <div class=\"cdz-seq-card-titulo\">Una ingesta adecuada de zinc fortalece<\/div>\r\n        <div class=\"cdz-seq-card-texto\">las defensas del organismo.<\/div>\r\n      <\/div>\r\n      <div class=\"cdz-seq-card cdz-anim4\" data-cdz-seq-mobile-anim data-cdz-icono=\"0g\">\r\n        <div class=\"cdz-seq-card-icono\">0g<\/div>\r\n        <div class=\"cdz-seq-card-titulo\">Sin az\u00facar<\/div>\r\n        <div class=\"cdz-seq-card-texto\">Todo el sabor a naranja, sin culpas.<\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"cdz-seq-mobile-final cdz-anim4\" data-cdz-seq-mobile-anim>\r\n      <h2>Todo lo que necesitas,<br>en <span class=\"claro\">un solo sobre.<\/span><\/h2>\r\n    <\/div>\r\n\r\n    <!-- El comercial tambi\u00e9n en m\u00f3vil, donde no existe el escenario fijo.\r\n         Abre la MISMA ventana emergente. -->\r\n    <div class=\"cdz-seq-video-movil cdz-anim4\" data-cdz-seq-mobile-anim>\r\n      <span class=\"cdz-seq-video-pie\">Ver comercial<\/span>\r\n      <button type=\"button\" class=\"cdz-seq-video-btn\" data-cdz-seq-video-abrir\r\n              aria-label=\"Reproducir el comercial de CDZ Vit\">\r\n        <video src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/06\/COMERCIAL-CDZ-2025-20S-WEB.mp4#t=1\"\r\n               preload=\"metadata\" muted playsinline\r\n               tabindex=\"-1\" aria-hidden=\"true\"><\/video>\r\n        <span class=\"cdz-seq-video-play\">\r\n          <span>\r\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\r\n              <path d=\"M8 5.2v13.6L19 12z\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/span>\r\n      <\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- LA VENTANA EMERGENTE DEL COMERCIAL. Va al final de la secci\u00f3n y\r\n       fuera del escenario fijo: es position:fixed y tiene que cubrir la\r\n       pantalla entera, no quedar encerrada en un contenedor con\r\n       overflow oculto. -->\r\n  <div class=\"cdz-seq-modal\" data-cdz-seq-modal role=\"dialog\" aria-modal=\"true\"\r\n       aria-label=\"Comercial de CDZ Vit\">\r\n    <div class=\"cdz-seq-modal-caja\">\r\n      <button type=\"button\" class=\"cdz-seq-modal-cerrar\" data-cdz-seq-video-cerrar\r\n              aria-label=\"Cerrar el video\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\"\r\n             stroke-linecap=\"round\" aria-hidden=\"true\">\r\n          <path d=\"M6 6l12 12M18 6L6 18\"\/>\r\n        <\/svg>\r\n      <\/button>\r\n      <video data-cdz-seq-modal-video\r\n             src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/06\/COMERCIAL-CDZ-2025-20S-WEB.mp4\"\r\n             controls playsinline preload=\"none\"><\/video>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  \/* Espera a que la secci\u00f3n 1 haya cargado GSAP y model-viewer.\r\n     NO se vuelven a incluir aqu\u00ed: cargarlos dos veces duplica los\r\n     ScrollTrigger y puede romper el registro del custom element. *\/\r\n  function arranca(){\r\n    if(!window.gsap || !window.ScrollTrigger || !customElements.get('model-viewer')){\r\n      return setTimeout(arranca, 60);\r\n    }\r\n    gsap.registerPlugin(ScrollTrigger);\r\n\r\n    var quieto = matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n    if(quieto){\r\n      gsap.set('.cdz-anim4', {opacity:1});\r\n    }else{\r\n      \/* Versi\u00f3n m\u00f3vil: cada bloque entra al hacer scroll hasta \u00e9l *\/\r\n      gsap.utils.toArray('[data-cdz-seq-mobile-anim]').forEach(function(el){\r\n        gsap.fromTo(el, {opacity:0,y:24}, {\r\n          opacity:1, y:0, duration:.7,\r\n          scrollTrigger:{ trigger: el, start:'top 85%', once:true }\r\n        });\r\n      });\r\n    }\r\n\r\n    \/* -----------------------------------------------------------------\r\n       ESCENARIO FIJO \u00b7 SOLO EN ESCRITORIO\r\n       gsap.matchMedia crea y destruye el ScrollTrigger autom\u00e1ticamente\r\n       si la ventana cruza el punto de quiebre, as\u00ed que no hace falta\r\n       gestionarlo a mano.\r\n       ----------------------------------------------------------------- *\/\r\n    var mm = gsap.matchMedia();\r\n\r\n    mm.add('(min-width: 992px)', function(){\r\n      var caja = document.getElementById('cdzSeqCaja');\r\n\r\n      \/* Cart\u00f3n mate, no met\u00e1lico: mismo ajuste que en el hero *\/\r\n      if(caja){\r\n        caja.addEventListener('load', function(){\r\n          caja.model.materials.forEach(function(m){\r\n            m.pbrMetallicRoughness.setMetallicFactor(0);\r\n            m.pbrMetallicRoughness.setRoughnessFactor(0.6);\r\n          });\r\n        });\r\n      }\r\n\r\n      if(quieto){\r\n        \/* Sin animaci\u00f3n: el producto queda de frente y se ve el primer\r\n           turno de tarjetas (una por asiento); las otras dos quedan\r\n           ocultas, ya que est\u00e1n apiladas exactamente en el mismo lugar. *\/\r\n        gsap.set('[data-cdz-seq-card=\"0\"]', {opacity:1});\r\n        gsap.set('[data-cdz-seq-card=\"1\"]', {opacity:1});\r\n        gsap.set('[data-cdz-seq-card=\"2\"]', {opacity:0});\r\n        gsap.set('[data-cdz-seq-card=\"3\"]', {opacity:0});\r\n        gsap.set('[data-cdz-seq-final]', {opacity:1});\r\n        \/* Sin animaci\u00f3n la miniatura del comercial se queda visible: si\r\n           no, no habr\u00eda forma de llegar a ella. *\/\r\n        var miniQuieta = document.querySelector('[data-cdz-seq-video]');\r\n        if(miniQuieta) miniQuieta.setAttribute('data-visible', '');\r\n        return function(){};\r\n      }\r\n\r\n      var estado = { angulo: 0 };\r\n      function pintaGiro(){\r\n        if(!caja) return;\r\n        caja.cameraOrbit = estado.angulo + 'deg 78deg 0.32m';\r\n        \/* model-viewer NO salta al valor que se le asigna: lo persigue con\r\n           una suavizaci\u00f3n propia (interpolation-decay, 50ms por defecto).\r\n           Con el scrub eso hace que la c\u00e1mara vaya siempre un poco\r\n           atrasada respecto al \u00e1ngulo real, y cuando el scroll se detiene\r\n           la c\u00e1mara sigue acomod\u00e1ndose sola esos \u00faltimos grados: la caja\r\n           termina de girar DESPU\u00c9S de que uno dej\u00f3 de mover, y ah\u00ed se\r\n           congela. Ese es el saltito del final.\r\n\r\n           jumpCameraToGoal() la lleva de una al valor pedido, sin\r\n           perseguirlo. Junto con interpolation-decay=\"0\" en el elemento,\r\n           el giro queda pegado al scroll fotograma a fotograma y no\r\n           queda nada por acomodar al soltar. *\/\r\n        if(caja.jumpCameraToGoal) caja.jumpCameraToGoal();\r\n      }\r\n\r\n      \/* ---------------------------------------------------------------\r\n         LOS TRES GIF DE \"SIN AZ\u00daCAR\"\r\n\r\n         Duran 1.33 s cada uno (00:00:01:08) y est\u00e1n exportados para\r\n         REPRODUCIRSE UNA VEZ, no en bucle. Eso es lo que permite la\r\n         pausa: al terminar se congelan en su \u00faltimo fotograma y ah\u00ed se\r\n         quedan hasta que este script los relanza.\r\n\r\n         La pausa NO se puede programar desde aqu\u00ed \u2014 el bucle va grabado\r\n         dentro del archivo GIF y ni CSS ni JavaScript pueden decirle\r\n         \"espera dos segundos antes de repetir\". Lo que s\u00ed hace el script\r\n         es la otra mitad: relanzar los tres EN EL MISMO FOTOGRAMA cada\r\n         CICLO milisegundos, de modo que nunca se desfasen.\r\n\r\n         CICLO = duraci\u00f3n de la animaci\u00f3n + la pausa deseada.\r\n         1350 + 8000 = 9350. Los 1350 son un pelo m\u00e1s que los 1330 reales\r\n         a prop\u00f3sito: si el ciclo fuera exacto, en algunos equipos el\r\n         relanzamiento caer\u00eda justo encima del \u00faltimo fotograma y se\r\n         ver\u00eda un corte en vez de una pausa limpia.\r\n           pausa de 4 s \u2192 5350  \u00b7  6 s \u2192 7350  \u00b7  8 s \u2192 9350  \u00b7  10 s \u2192 11350\r\n\r\n         El mecanismo del reinicio est\u00e1 explicado justo abajo, en\r\n         precargaGifs\/relanzaGifs: no es tan simple como reasignar el src.\r\n         --------------------------------------------------------------- *\/\r\n      var CICLO = 9350;\r\n      var gifs  = [].slice.call(document.querySelectorAll('[data-cdz-seq-gif]'));\r\n      var relojGifs = null;\r\n      var bytes = {};   \/* los archivos ya descargados, en memoria *\/\r\n\r\n      \/* C\u00d3MO SE REINICIA UN GIF, Y POR QU\u00c9 NO ES OBVIO.\r\n\r\n         Volver a asignar la MISMA url no reinicia nada: el navegador\r\n         reutiliza la imagen que ya tiene decodificada y la animaci\u00f3n\r\n         sigue donde iba. Da igual pasar por un src vac\u00edo en medio \u2014fue\r\n         el intento anterior\u2014 porque al volver a la url de siempre\r\n         recupera ese mismo objeto. De ah\u00ed ven\u00eda el desfase.\r\n\r\n         Lo \u00fanico que reinicia de verdad es que la url sea NUEVA. Antes\r\n         se consegu\u00eda con \"?r=\" + la fecha, pero eso obliga a descargar\r\n         los tres archivos otra vez en cada vuelta.\r\n\r\n         Ac\u00e1 se descargan UNA SOLA VEZ y se guardan como Blob. En cada\r\n         ciclo se crea una url nueva a partir de esos mismos bytes con\r\n         createObjectURL: para el navegador es un recurso distinto \u2014as\u00ed\r\n         que arranca en el fotograma 1\u2014 pero no sale ni un byte a la red.\r\n         La url anterior se revoca para no acumular memoria. *\/\r\n      function precargaGifs(){\r\n        return Promise.all(gifs.map(function(img){\r\n          if(!img.dataset.origen) img.dataset.origen = img.src;\r\n          var url = img.dataset.origen;\r\n          if(bytes[url]) return Promise.resolve();\r\n          return fetch(url)\r\n            .then(function(r){ return r.blob(); })\r\n            .then(function(b){ bytes[url] = b; })\r\n            .catch(function(){ \/* si falla, m\u00e1s abajo hay plan B *\/ });\r\n        }));\r\n      }\r\n\r\n      function relanzaGifs(){\r\n        \/* Los tres src se asignan en el MISMO bloque s\u00edncrono, o sea en\r\n           el mismo fotograma: es lo que garantiza que arranquen juntos. *\/\r\n        gifs.forEach(function(img){\r\n          var url = img.dataset.origen;\r\n          if(img.dataset.objeto) URL.revokeObjectURL(img.dataset.objeto);\r\n          \/* Plan B si la descarga previa fall\u00f3: la url con par\u00e1metro\r\n             variable de siempre. Reinicia igual, solo que descargando. *\/\r\n          var nueva = bytes[url] ? URL.createObjectURL(bytes[url])\r\n                                 : url + '?r=' + Date.now();\r\n          img.dataset.objeto = nueva;\r\n          img.src = nueva;\r\n        });\r\n      }\r\n\r\n      function arrancaGifs(){\r\n        \/* La primera vez espera a tener los bytes; a partir de ah\u00ed el\r\n           relanzamiento es instant\u00e1neo. *\/\r\n        precargaGifs().then(function(){\r\n          relanzaGifs();\r\n          if(relojGifs) clearInterval(relojGifs);\r\n          relojGifs = setInterval(relanzaGifs, CICLO);\r\n        });\r\n      }\r\n      \/* Se detiene cuando la tarjeta se va: no tiene sentido seguir\r\n         relanzando im\u00e1genes que nadie est\u00e1 viendo. *\/\r\n      function paraGifs(){ if(relojGifs){ clearInterval(relojGifs); relojGifs = null; } }\r\n\r\n      var tl = gsap.timeline({\r\n        scrollTrigger:{\r\n          trigger: '[data-cdz-seq-wrap]',\r\n          start: 'top top',\r\n          end: 'bottom bottom',\r\n          scrub: 1\r\n          \/* SIN pin. El escenario ya se queda quieto solo: es\r\n             position:sticky con top:0 dentro de un contenedor de 540vh,\r\n             que es exactamente el mismo efecto y lo resuelve el navegador\r\n             en el layout, no en JavaScript.\r\n\r\n             Antes iba sticky en el CSS Y ADEM\u00c1S pin ac\u00e1: dos mecanismos\r\n             de fijado peleando por el mismo elemento. Mientras duraba el\r\n             pin, ScrollTrigger lo pasaba a \"fixed\" y mandaba \u00e9l; al\r\n             soltarlo, el elemento volv\u00eda a sticky pero dentro del\r\n             pin-spacer que ScrollTrigger hab\u00eda insertado, con otro\r\n             offset. Medido sobre el video: el escenario ca\u00eda 98px en un\r\n             solo fotograma y rebotaba 22px. Ese era el salto del final.\r\n\r\n             Quitando el pin, ScrollTrigger se limita a lo que s\u00ed le toca\r\n             \u2014leer el progreso del scroll y mover el timeline\u2014 y el\r\n             fijado queda enteramente en manos del CSS. El rango calza\r\n             solo: 'top top' a 'bottom bottom' del contenedor es\r\n             justamente el tramo en que el sticky est\u00e1 pegado. *\/\r\n        }\r\n      });\r\n\r\n      var tarjetas = [0,1,2,3].map(function(n){\r\n        return document.querySelector('[data-cdz-seq-card=\"'+n+'\"]');\r\n      });\r\n      var DUR = 0.05;\r\n\r\n      \/* ---------------------------------------------------------------\r\n         ESTADO INICIAL \u2014 todo arranca oculto, incluida la l\u00ednea y el\r\n         producto. La entrada se construye en 3 pasos separados, cada\r\n         uno con su propio tramo del scroll:\r\n\r\n           1. la l\u00ednea se dibuja de derecha a izquierda, y AL MISMO\r\n              TIEMPO entra la primera tarjeta (Vitamina D, asiento\r\n              derecho) \u2014 es la primera en aparecer\r\n           2. el producto se desvanece\/crece hasta quedar completo\r\n           3. reci\u00e9n ah\u00ed entra la segunda tarjeta (Vitamina C,\r\n              asiento izquierdo)\r\n\r\n         Despu\u00e9s de esto sigue el relevo normal de tarjetas.\r\n         --------------------------------------------------------------- *\/\r\n      gsap.set('[data-cdz-seq-linea-trazo]', {drawSVG:'100% 100%'});\r\n      gsap.set('[data-cdz-seq-visual]', {opacity:0, scale:.7});\r\n      \/* El contenedor del cierre pasa a estar SIEMPRE visible: ahora cada\r\n         pieza de adentro (titular y frutas) tiene su propia entrada desde\r\n         abajo, as\u00ed que ya no hace falta el fundido del bloque completo.\r\n         Sus hijos arrancan invisibles, de modo que no se ve nada hasta\r\n         que les toque. *\/\r\n      gsap.set('[data-cdz-seq-final]', {opacity:1});\r\n      gsap.set('[data-cdz-seq-final-titulo]', {opacity:0, y:'115vh'});\r\n      gsap.set('[data-cdz-seq-fruta]', {opacity:0, y:'95vh'});\r\n      gsap.set('[data-cdz-seq-nota]',  {opacity:0, y:'95vh'});\r\n      \/* Los cuatro manuscritos se preparan igual: ocultos, un pelo\r\n         abajo, y partidos en letras sueltas con SplitText para poder\r\n         encenderlas una por una, como si se escribieran a mano.\r\n\r\n         letrasFirma guarda los caracteres de cada uno por separado\r\n         \u2014indexados por el n\u00famero de su tarjeta\u2014 porque cada frase se\r\n         escribe en su propio momento del recorrido. *\/\r\n      gsap.set('[data-cdz-seq-firma]', {opacity:0, y:'1em'});\r\n      var letrasFirma = {};\r\n      [0,1,2,3].forEach(function(n){\r\n        var sel = '[data-cdz-seq-firma-stroke=\"' + n + '\"]';\r\n        letrasFirma[n] = new SplitText(sel, {type:'chars'}).chars;\r\n        gsap.set(sel, {opacity:1});\r\n        gsap.set(letrasFirma[n], {opacity:0});\r\n      });\r\n      \/* La inclinaci\u00f3n va aqu\u00ed, no en el CSS: una vez que GSAP anima\r\n         y\/opacity sobre un elemento, toma control de todo su\r\n         \"transform\" y normaliza a 0 cualquier rotate puesto por hoja\r\n         de estilos. Puesta aqu\u00ed en el gsap.set() inicial, GSAP la\r\n         respeta durante el resto del timeline sin que haga falta\r\n         repetirla en cada .to()\/.fromTo() posterior.\r\n         Vitamina C tiene medici\u00f3n real (-1.08\u00b0, sobre la referencia).\r\n         Sin az\u00facar lleva ese mismo valor: comparte asiento con ella \u2014las\r\n         dos se alternan en el izquierdo\u2014 as\u00ed que si tuvieran inclinaci\u00f3n\r\n         distinta se ver\u00eda el salto al relevarse. Vitamina D y Zinc, que\r\n         van en el asiento derecho, se quedan con el 2.3\u00b0 de antes. *\/\r\n      \/* ENTRADAS SUAVES.\r\n\r\n         Lo que las hac\u00eda agresivas era la relaci\u00f3n entre distancia y\r\n         scroll: 85vh de recorrido en .055, que sobre 620vh son 34vh \u2014\r\n         la tarjeta se mov\u00eda dos veces y media m\u00e1s r\u00e1pido que el dedo.\r\n         Ahora duran .09 (56vh), o sea 1.5 veces el scroll, un ritmo que\r\n         se lee como acompa\u00f1amiento y no como salto.\r\n\r\n         Para que ese tiempo extra no le coma el reposo a la tarjeta, las\r\n         tres \u00faltimas arrancan .035 antes que su marca vieja. Eso hace\r\n         que la entrante se cruce con la que va saliendo \u2014las dos en el\r\n         aire un instante\u2014, que es justamente lo que hace la referencia.\r\n         Vitamina D no se puede adelantar porque ya arranca en 0.00, as\u00ed\r\n         que lleva .075 en vez de .09.\r\n\r\n         Y el ease pas\u00f3 de power2.out a sine.out: power2 arranca a toda\r\n         velocidad y frena de golpe: ese perfil es el que se sent\u00eda como\r\n         un tir\u00f3n. sine.out sale m\u00e1s contenido.\r\n\r\n         Arrancan ocultas y ya colocadas por debajo del borde inferior.\r\n         El fromTo de cada entrada las pone en opacity:1 al empezar su\r\n         turno; como en ese instante est\u00e1n fuera de cuadro, el cambio no\r\n         se ve, y a partir de ah\u00ed la tarjeta simplemente sube.\r\n\r\n         85vh no es un n\u00famero al azar: la tarjeta ocupa del 22% al 75%\r\n         de la altura, as\u00ed que desplaz\u00e1ndola 85vh su borde superior\r\n         queda por debajo del borde inferior de la pantalla. Y es el\r\n         mismo valor con el que sale por arriba (-85vh), as\u00ed que entrada\r\n         y salida son sim\u00e9tricas. *\/\r\n      gsap.set(tarjetas[0], {opacity:0, y:'85vh', rotation:-1.08});   \/* Vitamina C \u00b7 medida *\/\r\n      gsap.set(tarjetas[1], {opacity:0, y:'85vh', rotation:2.3});\r\n      gsap.set(tarjetas[2], {opacity:0, y:'85vh', rotation:2.3});\r\n      gsap.set(tarjetas[3], {opacity:0, y:'85vh', rotation:-1.08});   \/* Sin az\u00facar \u00b7 igual que Vitamina C *\/\r\n\r\n      \/* Paso 1: l\u00ednea (derecha a izquierda) + primera tarjeta, a la vez.\r\n         Las duraciones de este bloque est\u00e1n reescaladas: eran fracciones\r\n         de un total de 340vh, ahora el total es 540vh. Para que D siga\r\n         tardando lo MISMO en vh reales (no m\u00e1s r\u00e1pido ni m\u00e1s lento que\r\n         antes), cada duraci\u00f3n se multiplic\u00f3 por 340\/540 = 0.6296. *\/\r\n      \/* .778 en vez de .4722: el path pas\u00f3 de 1307 a 2153 unidades al\r\n         agregarle la continuaci\u00f3n de la izquierda. .4722 \u00d7 2153\/1307 =\r\n         .778, o sea que el trazo se dibuja a EXACTAMENTE la misma\r\n         velocidad que antes \u2014 arranca igual, cruza la onda igual, y lo\r\n         \u00fanico que cambia es que despu\u00e9s sigue un rato m\u00e1s con la U. *\/\r\n      tl.to('[data-cdz-seq-linea-trazo]', {drawSVG:'0% 100%', duration:.778, ease:'none'}, 0.00);\r\n      tl.fromTo(tarjetas[1], {opacity:1, y:'85vh'}, {opacity:1, y:'0vh', duration:.075, ease:'sine.out'}, 0.00);\r\n\r\n      \/* Paso 2: el producto se revela \u2014 arranca en 0.00, junto con la\r\n         l\u00ednea y la primera tarjeta. *\/\r\n      tl.fromTo('[data-cdz-seq-visual]',\r\n        {opacity:0, scale:.7}, {opacity:1, scale:1, duration:.0756, ease:'power2.out'}, 0.00);\r\n      \/* DOS VUELTAS EXACTAS, hasta 0.94.\r\n\r\n         720\u00b0 y no 597\u00b0: al ser m\u00faltiplo de 360 la caja termina en la\r\n         misma cara con la que empez\u00f3, o sea de frente, y ah\u00ed se queda\r\n         quieta el resto de la secci\u00f3n. Con 597 remataba en 237\u00b0, de\r\n         costado.\r\n\r\n         El precio es que gira un 20% m\u00e1s r\u00e1pido que antes (766 grados\r\n         por unidad de timeline contra los 635 de siempre). Es el \u00fanico\r\n         ajuste posible: la velocidad, el n\u00famero de vueltas y la\r\n         duraci\u00f3n son tres caras del mismo n\u00famero, y al fijar dos \u2014cerrar\r\n         de frente y llegar hasta el cierre\u2014 la tercera queda determinada. *\/\r\n      tl.to(estado, {angulo:720, duration:.94, ease:'none', onUpdate:pintaGiro}, 0.00);\r\n\r\n      \/* ---------------------------------------------------------------\r\n         TIMELINE COMPLETO, recalculado sobre 540vh (antes 340vh).\r\n         Se alarg\u00f3 el scroll para poder darle a las CUATRO tarjetas la\r\n         misma sostenida real en pantalla \u2014 antes, con 340vh, Zinc y\r\n         Sin az\u00facar quedaban sin sostenida porque no alcanzaba el\r\n         presupuesto de proporciones. Ahora las cuatro comparten el\r\n         mismo patr\u00f3n: 0.0378 de entrada, 0.0819 de sostenida, 0.0881\r\n         de salida, con 0.0220 de colch\u00f3n entre cada una \u2014 nunca hay\r\n         dos tarjetas visibles a la vez.\r\n         --------------------------------------------------------------- *\/\r\n\r\n      \/* Vitamina D sale *\/\r\n      tl.to(tarjetas[1], {y:'-85vh', duration:.0881, ease:'power1.in'}, 0.1259);\r\n\r\n      \/* Vitamina C entra *\/\r\n      tl.fromTo(tarjetas[0], {opacity:1, y:'85vh'}, {opacity:1, y:'0vh', duration:.09, ease:'sine.out'}, 0.2011);\r\n\r\n      \/* Vitamina C sale *\/\r\n      tl.to(tarjetas[0], {y:'-85vh', duration:.0881, ease:'power1.in'}, 0.3557);\r\n\r\n      \/* Zinc entra \u2014 ahora con la MISMA sostenida real que Vitamina C *\/\r\n      tl.fromTo(tarjetas[2], {opacity:1, y:'85vh'}, {opacity:1, y:'0vh', duration:.09, ease:'sine.out'}, 0.4309);\r\n      tl.to(tarjetas[2], {y:'-85vh', duration:.0881, ease:'power1.in'}, 0.6456);\r\n\r\n      \/* LOS CUATRO MANUSCRITOS.\r\n\r\n         Cada uno entra y sale con su tarjeta, con exactamente la misma\r\n         animaci\u00f3n que ya ten\u00eda el de Vitamina C: el bloque sube 1em\r\n         mientras aparece, y las letras se van encendiendo una tras otra\r\n         con un stagger m\u00ednimo, que es lo que da la sensaci\u00f3n de estar\r\n         escribi\u00e9ndose. La salida es id\u00e9ntica a la de la tarjeta: -85vh\r\n         con power1.in, as\u00ed que se van juntos.\r\n\r\n         La entrada arranca .045 despu\u00e9s que su tarjeta, no a la vez:\r\n         primero llega la tarjeta y despu\u00e9s se escribe la frase al lado.\r\n         Si salieran en el mismo fotograma competir\u00edan por la mirada.\r\n\r\n         Los tiempos de salida son los mismos de cada tarjeta. *\/\r\n      [ [1, 0.045,  0.1259],\r\n        [0, 0.2461, 0.3557],\r\n        [2, 0.4759, 0.6456],\r\n        [3, 0.7657, 0.8754] ]\r\n      .forEach(function(f){\r\n        var sel = '[data-cdz-seq-firma=\"' + f[0] + '\"]';\r\n        tl.fromTo(sel,\r\n          {opacity:0, y:'1em'}, {opacity:1, y:'0em', duration:.0378, ease:'power2.out'}, f[1]);\r\n        tl.to(letrasFirma[f[0]],\r\n          {opacity:1, duration:.02, stagger:.004, ease:'none'}, f[1]);\r\n        tl.to(sel, {y:'-85vh', duration:.0881, ease:'power1.in'}, f[2]);\r\n      });\r\n\r\n      \/* Sin az\u00facar entra, con la misma sostenida tambi\u00e9n.\r\n         onStart lanza el ciclo de los tres GIF justo cuando la tarjeta\r\n         empieza a subir desde abajo, para que el usuario vea la\r\n         animaci\u00f3n desde su primer fotograma; y la salida lo detiene. *\/\r\n      tl.fromTo(tarjetas[3], {opacity:1, y:'85vh'}, {opacity:1, y:'0vh', duration:.09, ease:'sine.out', onStart:arrancaGifs}, 0.7207);\r\n      tl.to(tarjetas[3], {y:'-85vh', duration:.0881, ease:'power1.in', onStart:paraGifs}, 0.8754);\r\n\r\n      \/* La l\u00ednea se va CON la \u00faltima tarjeta, exactamente a la par.\r\n\r\n         Arranca en 0.842, ya con el trazo dibujado (termina en 0.778),\r\n         y cierra en 0.965, justo antes de que empiece el cierre. Ocupa\r\n         todo el hueco disponible: no puede empezar antes, porque\r\n         chocar\u00eda con el tween que lo est\u00e1 dibujando sobre la misma\r\n         propiedad, ni terminar despu\u00e9s, porque la l\u00ednea se cruzar\u00eda con\r\n         el titular y las naranjas.\r\n\r\n         En scroll real son 76vh contra los 48vh de antes: un 59% m\u00e1s\r\n         despacio. Eso sale de dos sitios \u2014 la duraci\u00f3n pas\u00f3 de .0881 a\r\n         .123, y la secci\u00f3n se estir\u00f3 de 540vh a 620vh.\r\n\r\n         Sin az\u00facar sale en 0.8754 y la l\u00ednea ya viene retir\u00e1ndose desde\r\n         antes, as\u00ed que igual se van casi a la par.\r\n\r\n         El trazado va al rev\u00e9s que el dibujado. Al dibujar se anim\u00f3 el\r\n         PRIMER valor de drawSVG (de '100% 100%' a '0% 100%'): el extremo\r\n         de la esquina superior derecha queda clavado y el trazo crece\r\n         hacia atr\u00e1s. Para borrarla se anima el SEGUNDO: ahora el que se\r\n         mueve es ese extremo derecho, que se retira siguiendo el mismo\r\n         camino y en el mismo sentido en que avanz\u00f3. Lo \u00faltimo en\r\n         desaparecer es el remate de abajo a la izquierda, igual que fue\r\n         lo \u00faltimo en dibujarse. *\/\r\n      tl.to('[data-cdz-seq-linea-trazo]', {drawSVG:'0% 0%', duration:.123, ease:'none'}, 0.842);\r\n\r\n      \/* Cierre.\r\n\r\n         La caja no se toca: ni se aten\u00faa, ni se achica, ni se mueve. Se\r\n         queda a plena vista, de frente y quieta, exactamente del tama\u00f1o\r\n         que trae. El cruce con el titular se resuelve por capas, no\r\n         moviendo la caja \u2014 ver el z-index de .cdz-seq-final: el texto\r\n         pasa POR DETR\u00c1S del producto, igual que en la referencia, donde\r\n         los envases tapan el pie de la \u00faltima l\u00ednea. *\/\r\n      \/* EL TITULAR SUBE DESDE ABAJO.\r\n\r\n         Entra por el borde inferior del escenario y trepa hasta su sitio.\r\n         Arranca en 0.905, apenas la l\u00ednea termina de borrarse, y aterriza\r\n         en 0.995. Dura .09 en vez de .11, pero como la secci\u00f3n se estir\u00f3\r\n         a 620vh el recorrido real es pr\u00e1cticamente el mismo de antes\r\n         (56vh contra 59vh): se ve igual de pausado.\r\n\r\n         El ease power2.out hace el grueso del camino al principio y\r\n         frena al llegar: sube r\u00e1pido desde fuera de cuadro y se posa. *\/\r\n      tl.to('[data-cdz-seq-final-titulo]',\r\n        {opacity:1, y:'0vh', duration:.09, ease:'power2.out'}, 0.965);\r\n\r\n      \/* LA CAJA BAJA para dejarle sitio al titular.\r\n\r\n         Queda de frente y quieta 14vh m\u00e1s abajo \u2014 como en la referencia,\r\n         donde el producto se apoya en el borde inferior y el texto ocupa\r\n         la franja de arriba. No cambia de tama\u00f1o: solo se desplaza.\r\n\r\n         Dos cosas lo hac\u00edan brusco y las dos est\u00e1n corregidas:\r\n\r\n         \u00b7 Duraba .045, que sobre 540vh son 24vh de scroll. Con la rueda\r\n           del mouse eso se cruza en muy pocos fotogramas, as\u00ed que el\r\n           desplazamiento se com\u00eda de golpe. Ahora dura .085 sobre una\r\n           secci\u00f3n de 620vh, o sea 53vh de scroll, m\u00e1s del doble.\r\n           Arranca en 0.910 y termina en 0.995, junto con el titular.\r\n\r\n         \u00b7 Iba con power2.out, que arranca a toda velocidad y frena al\r\n           final: justo el perfil que se siente como un tir\u00f3n inicial.\r\n           sine.inOut sale despacio, acelera en el medio y vuelve a\r\n           frenar, sin bordes en ninguno de los dos extremos. *\/\r\n      tl.to('[data-cdz-seq-visual]',\r\n        {y:'14vh', duration:.085, ease:'sine.inOut'}, 0.970);\r\n\r\n      \/* LAS NOTAS MANUSCRITAS suben junto con las frutas.\r\n\r\n         Comparten arranque y duraci\u00f3n con la pieza que se\u00f1alan \u2014la nota\r\n         izquierda con la naranja chica, la derecha con la rebanada\r\n         chica\u2014 as\u00ed que texto y objeto llegan como una sola cosa y no\r\n         como una etiqueta que aparece despu\u00e9s sobre algo ya puesto. *\/\r\n      \/* Queda UNA sola nota. \"Una toma al d\u00eda\" se quit\u00f3; su entrada\r\n         estaba aqu\u00ed y se fue con ella. *\/\r\n      [ ['1', .058, 1.000] ]\r\n      .forEach(function(n){\r\n        tl.to('[data-cdz-seq-nota=\"' + n[0] + '\"]',\r\n          {opacity:1, y:'0vh', duration:n[1], ease:'sine.out'}, n[2]);\r\n      });\r\n\r\n      \/* LAS FRUTAS, tambi\u00e9n desde abajo, pero DESPU\u00c9S del titular.\r\n\r\n         El titular arranca en 0.965 y las frutas ahora en 0.985 la\r\n         primera: dos cent\u00e9simas de retraso, suficientes para que el\r\n         texto se lea como lo que llega primero y las frutas como lo que\r\n         lo acompa\u00f1a. Antes sal\u00edan todas a la vez y compet\u00edan.\r\n\r\n         Suben en abanico, cada una con su tiempo y su duraci\u00f3n: las\r\n         grandes salen antes y tardan m\u00e1s \u2014est\u00e1n m\u00e1s lejos\u2014 y las chicas\r\n         llegan despu\u00e9s y m\u00e1s sueltas. Ese desfase es lo que impide que\r\n         se lean como un bloque que se mueve junto.\r\n\r\n         El recorrido baj\u00f3 de 105vh a 95vh y el ease pas\u00f3 a sine.out: al\r\n         entrar m\u00e1s tarde queda menos scroll por delante, y sin esos dos\r\n         ajustes el tramo restante las obligar\u00eda a moverse a tirones.\r\n\r\n         El giro es leve y termina en 0: entran ladeadas y se enderezan. *\/\r\n      [ ['1', .075, 0.985, -14],\r\n        ['2', .058, 1.000,  10],\r\n        ['3', .064, 0.994, -12],\r\n        ['4', .072, 0.988,  13] ]\r\n      .forEach(function(f){\r\n        tl.to('[data-cdz-seq-fruta=\"' + f[0] + '\"]',\r\n          {opacity:1, y:'0vh', rotation:0, duration:f[1], ease:'sine.out'}, f[2]);\r\n        gsap.set('[data-cdz-seq-fruta=\"' + f[0] + '\"]', {rotation:f[3]});\r\n      });\r\n\r\n      \/* LA MINIATURA DEL COMERCIAL aparece con el cierre, y lo hace con\r\n         su PROPIO disparador en vez de entrar en esta l\u00ednea de tiempo.\r\n\r\n         El motivo: los tiempos de arriba est\u00e1n encadenados sin holgura\r\n         \u2014cada tarjeta empalma con la siguiente\u2014 y meter una pieza m\u00e1s\r\n         obligar\u00eda a recalcular todas. Con un ScrollTrigger aparte, el\r\n         video se cuelga del mismo recorrido sin tocar ni un n\u00famero.\r\n\r\n         El umbral es 0.93, cuando el titular ya est\u00e1 subiendo. Antes de\r\n         eso el costado izquierdo lo ocupan las tarjetas. *\/\r\n      var mini = document.querySelector('[data-cdz-seq-video]');\r\n      var vigiaVideo = null;\r\n      if(mini){\r\n        vigiaVideo = ScrollTrigger.create({\r\n          trigger: '[data-cdz-seq-wrap]', start:'top top', end:'bottom bottom',\r\n          onUpdate: function(self){\r\n            if(self.progress > .93) mini.setAttribute('data-visible', '');\r\n            else mini.removeAttribute('data-visible');\r\n          }\r\n        });\r\n      }\r\n\r\n      return function(){\r\n        \/* Limpieza al salir de escritorio: deja el modelo de frente\r\n           y sin atenuar, por si qued\u00f3 a mitad del cierre. Y detiene el\r\n           ciclo de los GIF, que si no seguir\u00eda corriendo con el\r\n           escenario ya desmontado. *\/\r\n        paraGifs();\r\n        if(vigiaVideo) vigiaVideo.kill();\r\n        if(mini) mini.removeAttribute('data-visible');\r\n        estado.angulo = 0; pintaGiro();\r\n        gsap.set('[data-cdz-seq-visual]', {opacity:1, y:0});\r\n      };\r\n    });\r\n  }\r\n\r\n  if(document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', arranca); }\r\n  else{ arranca(); }\r\n})();\r\n<\/script>\r\n\r\n<script>\r\n\/* ============================================================\r\n   EL COMERCIAL \u00b7 abrir y cerrar la ventana emergente\r\n\r\n   Va en su propio bloque y no depende de GSAP: si por lo que fuera la\r\n   animaci\u00f3n de la secci\u00f3n no arrancara, el video se sigue pudiendo ver.\r\n   ============================================================ *\/\r\n(function(){\r\n  var raiz = document.querySelector('[data-cdz-seq]');\r\n  if(!raiz) return;\r\n  var modal  = raiz.querySelector('[data-cdz-seq-modal]');\r\n  var video  = raiz.querySelector('[data-cdz-seq-modal-video]');\r\n  var cerrar = raiz.querySelector('[data-cdz-seq-video-cerrar]');\r\n  if(!modal || !video) return;\r\n\r\n  var abridores = [].slice.call(raiz.querySelectorAll('[data-cdz-seq-video-abrir]'));\r\n  var ultimo = null;\r\n\r\n  function abre(desde){\r\n    ultimo = desde || null;\r\n    modal.setAttribute('data-abierto', '');\r\n    \/* La p\u00e1gina se bloquea mientras el video est\u00e1 abierto: con el fondo\r\n       movi\u00e9ndose detr\u00e1s, la secci\u00f3n sigue corriendo su animaci\u00f3n de\r\n       scroll y se ve por los bordes del video. *\/\r\n    document.documentElement.style.overflow = 'hidden';\r\n    var r = video.play();\r\n    \/* El navegador puede rechazar la reproducci\u00f3n por su pol\u00edtica de\r\n       autoplay; si pasa, el video se queda con sus controles a la vista\r\n       y basta con darle al play. *\/\r\n    if(r && r.catch) r.catch(function(){});\r\n    if(cerrar) cerrar.focus();\r\n  }\r\n\r\n  function cierra(){\r\n    if(!modal.hasAttribute('data-abierto')) return;\r\n    modal.removeAttribute('data-abierto');\r\n    document.documentElement.style.overflow = '';\r\n    video.pause();\r\n    \/* Vuelve al principio: si se reabre, empieza de nuevo y no a mitad. *\/\r\n    try{ video.currentTime = 0; }catch(e){}\r\n    \/* El foco regresa al bot\u00f3n desde el que se abri\u00f3, que es lo que\r\n       espera quien navega con teclado. *\/\r\n    if(ultimo) ultimo.focus();\r\n  }\r\n\r\n  abridores.forEach(function(b){\r\n    b.addEventListener('click', function(){ abre(b); });\r\n  });\r\n  if(cerrar) cerrar.addEventListener('click', cierra);\r\n\r\n  \/* Pulsar FUERA del video cierra. Se comprueba que el clic haya ca\u00eddo\r\n     en el fondo y no dentro de la caja: sin esa comprobaci\u00f3n, cualquier\r\n     clic sobre los controles del propio video lo cerrar\u00eda. *\/\r\n  modal.addEventListener('click', function(e){\r\n    if(e.target === modal) cierra();\r\n  });\r\n\r\n  document.addEventListener('keydown', function(e){\r\n    if(e.key === 'Escape') cierra();\r\n  });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-354a289 elementor-widget elementor-widget-html\" data-id=\"354a289\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"quees\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     CDZ VIT \u00b7 SECCI\u00d3N 5 \u2014 \"EL PRODUCTO\"\r\n     Widget HTML propio, en el mismo contenedor que las secciones\r\n     anteriores. NO vuelve a cargar GSAP, ScrollTrigger, DrawSVG ni\r\n     model-viewer: reutiliza lo que ya carga la secci\u00f3n 1.\r\n\r\n     Estructura calcada de la secci\u00f3n \"benefits\" de la referencia:\r\n     panel de color a la izquierda con el producto y una l\u00ednea blanca\r\n     dibuj\u00e1ndose por detr\u00e1s, y panel blanco a la derecha con titular a\r\n     dos tonos y una tabla de filas con divisorias.\r\n\r\n     La diferencia est\u00e1 en la tabla: la referencia compara su producto\r\n     contra un rival con checks y equis. Ac\u00e1 NO hay columna rival \u2014para\r\n     un suplemento con registro sanitario la publicidad comparativa es\r\n     terreno delicado\u2014 as\u00ed que la segunda columna muestra el valor real\r\n     de cada fila. Se conserva la jerarqu\u00eda y el ritmo visual, cambia\r\n     lo que dice.\r\n     ============================================================ -->\r\n\r\n<style>\r\n.cdz-prod{\r\n  \/* Mismo sistema de escalado del resto del sitio: el tama\u00f1o base sale\r\n     del ancho de pantalla, as\u00ed que todo lo que est\u00e9 en em escala junto.\r\n     Los breakpoints solo cambian el ancho de referencia del dise\u00f1o. *\/\r\n  --cdz-unit: 16;\r\n  --cdz-ideal: 1440;\r\n  --cdz-min: 992px;\r\n  --cdz-max: 2560px;\r\n  --cdz-cont: clamp(var(--cdz-min), 100vw, var(--cdz-max));\r\n\r\n  --cdz-oscuro: #0A3C75;\r\n  --cdz-marca:  #007AFF;\r\n  --cdz-acento: #F4701F;\r\n  --cdz-palido: #EAF2FE;\r\n  --cdz-panel:  #DCE9FB;   \/* el bloque de la izquierda, un tono m\u00e1s abajo *\/\r\n  --cdz-linea:  #DCE6F5;   \/* divisorias de la tabla *\/\r\n\r\n  font-size: calc(var(--cdz-cont) \/ (var(--cdz-ideal) \/ var(--cdz-unit)));\r\n  font-family: 'Archivo', Arial, sans-serif;\r\n  font-variation-settings: 'wdth' 78;\r\n  font-weight: 400;\r\n  letter-spacing: -.03em;\r\n  color: var(--cdz-oscuro);\r\n  background: #A7C9F9;\r\n  position: relative;\r\n  overflow-x: clip;\r\n}\r\n@media (max-width:991px){ .cdz-prod{ --cdz-ideal:640; --cdz-min:768px; --cdz-max:991px; } }\r\n@media (max-width:767px){ .cdz-prod{ --cdz-ideal:550; --cdz-min:480px; --cdz-max:767px; } }\r\n@media (max-width:479px){ .cdz-prod{ --cdz-ideal:390; --cdz-min:320px; --cdz-max:479px; } }\r\n\r\n.cdz-prod *,.cdz-prod *::before,.cdz-prod *::after{ box-sizing:border-box; }\r\n\/* Reset de m\u00e1rgenes del navegador. OJO con la especificidad: estos\r\n   selectores valen 0-1-1 (una clase + un elemento), m\u00e1s que una clase\r\n   suelta como .cdz-prod-titulo (0-1-0). Cualquier regla que quiera\r\n   ponerle margen a un h2 o a un p de esta secci\u00f3n tiene que empatarles\r\n   o superarlos, por eso las de abajo van escritas como\r\n   \".cdz-prod .cdz-prod-titulo\" (0-2-0) y no solo \".cdz-prod-titulo\".\r\n   Sin eso el margin:0 de ac\u00e1 gana y el margen simplemente no aparece. *\/\r\n.cdz-prod h2{ margin:0; font-weight:600; }\r\n.cdz-prod p{ margin:0; }\r\n\r\n.cdz-prod-container{\r\n  max-width:var(--cdz-cont); margin-inline:auto;\r\n  padding:3.4em 1.5em 3.8em;\r\n}\r\n@media (max-width:991px){ .cdz-prod-container{ padding:2.6em 1em 3em; } }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   REJILLA \u00b7 dos paneles pegados, como en la referencia\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-prod-grid{\r\n  display:grid;\r\n  \/* 42\/58: el panel de la izquierda solo tiene que sostener el sobre,\r\n     mientras que el de la derecha carga titular, p\u00e1rrafo y seis filas.\r\n     align-items:stretch hace que los dos midan lo mismo de alto aunque\r\n     su contenido sea muy distinto \u2014 es lo que hace que se lean como dos\r\n     bloques de una misma pieza y no como dos cosas sueltas. *\/\r\n  grid-template-columns:37fr 63fr;\r\n  gap:1.2em;\r\n  align-items:stretch;\r\n}\r\n@media (max-width:991px){\r\n  .cdz-prod-grid{ grid-template-columns:1fr; gap:1em; }\r\n}\r\n\r\n\/* ---------------------------------------------------------------------\r\n   PANEL IZQUIERDO \u00b7 el sobre en 3D sobre bloque de color\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-prod-visual{\r\n  position:relative; overflow:hidden;\r\n  background:var(--cdz-panel);\r\n  border-radius:1.6em;\r\n  \/* place-items:stretch y no center: el model-viewer es el \u00fanico hijo\r\n     en flujo \u2014la onda y el aviso van en absoluto\u2014 as\u00ed que estir\u00e1ndolo\r\n     llena el panel entero. Con \"center\" conservaba su alto fijo de 18em\r\n     mientras el panel crec\u00eda con el contenido de la columna de al lado,\r\n     y todo ese sobrante quedaba vac\u00edo. *\/\r\n  display:grid; place-items:stretch;\r\n  padding:2em;\r\n  min-height:24em;\r\n}\r\n@media (max-width:991px){ .cdz-prod-visual{ min-height:18em; padding:1.6em; } }\r\n\r\n\/* La l\u00ednea blanca cruza POR DETR\u00c1S del sobre y se sale del panel por\r\n   los dos lados. El overflow:hidden del panel la recorta, que es\r\n   justamente el efecto de la referencia: un trazo que viene de fuera. *\/\r\n.cdz-prod-linea{\r\n  position:absolute; inset:0; width:100%; height:100%;\r\n  z-index:0; color:#FFFFFF; pointer-events:none;\r\n}\r\n.cdz-prod-linea path{\r\n  stroke:currentColor;\r\n  \/* El SVG usa preserveAspectRatio=\"none\" para que la onda llene el\r\n     panel sea cual sea su proporci\u00f3n. El costo es que el lienzo se\r\n     estira distinto a lo ancho que a lo alto, y el grosor se deforma\r\n     con la geometr\u00eda: engorda en los tramos empinados, adelgaza en los\r\n     planos y las curvas se ven retorcidas, con un borde abultado y el\r\n     otro chupado.\r\n\r\n     vector-effect:non-scaling-stroke aplica el grosor DESPU\u00c9S del\r\n     estiramiento, ya en pantalla: perpendicular al trazo y constante en\r\n     todo el recorrido. El stroke-width del atributo queda de respaldo\r\n     por si el navegador no soportara la propiedad. *\/\r\n  stroke-width:1.8em;\r\n  vector-effect:non-scaling-stroke;\r\n}\r\n\r\n.cdz-prod-pista{\r\n  position:absolute; z-index:2; bottom:.8em; left:0; right:0;\r\n  text-align:center;\r\n  font-size:.92em; letter-spacing:.02em;\r\n  color:#7089AE;\r\n  pointer-events:none; user-select:none;\r\n}\r\n@media (max-width:991px){ .cdz-prod-pista{ font-size:.85em; bottom:.6em; } }\r\n\r\n.cdz-prod-visual model-viewer{\r\n  position:relative; z-index:1;\r\n  \/* Alto al 100% del panel, con un m\u00ednimo por si la columna de texto\r\n     quedara muy corta. *\/\r\n  width:100%; height:100%; min-height:20em;\r\n  background:transparent; --poster-color:transparent;\r\n}\r\n\/* La barra gris que asoma arriba del modelo al cargar la p\u00e1gina es la\r\n   barra de progreso propia de model-viewer, que dibuja mientras\r\n   descarga el GLB y luego retira sola. Va dentro de su shadow DOM, as\u00ed\r\n   que no se puede alcanzar con un selector normal: hay que apuntarle\r\n   con ::part. En la secci\u00f3n 4 ya estaba oculta; ac\u00e1 se hab\u00eda quedado\r\n   fuera. *\/\r\n.cdz-prod-visual model-viewer::part(default-progress-bar){ display:none; }\r\n@media (max-width:991px){ .cdz-prod-visual model-viewer{ min-height:15em; } }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   NARANJAS DESENFOCADAS \u00b7 dan color detr\u00e1s de la informaci\u00f3n\r\n\r\n   Van SOLO en el panel blanco, detr\u00e1s del texto. En el panel de color\r\n   no: ah\u00ed est\u00e1 el sobre girando y la l\u00ednea, y la fruta le robaba\r\n   protagonismo al producto.\r\n\r\n   VAN AL 45% Y EL TEXTO SE OSCURECI\u00d3 PARA AGUANTARLO. A esa opacidad\r\n   el fondo local de la zona con fruta queda en #FACD99, y encima de ese\r\n   tono los colores originales no llegaban ni de lejos al m\u00ednimo de\r\n   4.5:1 que necesita un texto normal:\r\n\r\n                          sobre blanco   con la fruta al 45%\r\n     el p\u00e1rrafo original      5.11:1           3.02:1\r\n     el pie original          3.57:1           2.11:1\r\n\r\n   Por eso los dos se oscurecieron: el p\u00e1rrafo de #4A6FA5 a #35548B\r\n   (5.13:1 sobre la fruta) y el pie de #7089AE a #3F587A (4.96:1). A\r\n   simple vista son los mismos azules, y ahora se leen igual de bien\r\n   encima de la fruta que sobre el blanco.\r\n\r\n   Ojo con el pie: llev\u00f3 un tiempo #55708F, que NO cumpl\u00eda \u20143.98:1\r\n   encima de la fruta al 30%\u2014 y se dio por bueno sin medirlo.\r\n\r\n   El titular y las etiquetas no se tocaron: con 8.51:1 encima de la\r\n   fruta les sobra margen.\r\n\r\n   SI SE SUBE LA OPACIDAD POR ENCIMA DEL 45%, hay que volver a medir y\r\n   volver a oscurecer. No es un n\u00famero libre. Y para que se noten m\u00e1s\r\n   sin pagar contraste, lo primero que hay que probar es AGRANDARLAS:\r\n   el tono local no cambia con el tama\u00f1o.\r\n\r\n   El desenfoque es alto a prop\u00f3sito: una fruta n\u00edtida detr\u00e1s de una\r\n   tabla compite con los n\u00fameros; muy desenfocada se lee como un halo\r\n   de color y no como un objeto.\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-prod-fruta{\r\n  position:absolute; z-index:0;\r\n  display:block; height:auto;\r\n  pointer-events:none; user-select:none;\r\n}\r\n\r\n\/* --- Las del panel blanco ---\r\n   EL TEXTO TIENE QUE SUBIR DE CAPA, y esta es la regla clave: las\r\n   frutas van en posici\u00f3n absoluta, y un elemento posicionado se pinta\r\n   POR ENCIMA del contenido normal aunque su z-index sea 0. Sin poner el\r\n   contenido en z-index:1, las naranjas tapar\u00edan la tabla entera. *\/\r\n.cdz-prod-texto > *:not(.cdz-prod-fruta){ position:relative; z-index:1; }\r\n\r\n\/* Arriba a la derecha y abajo, en las zonas que el texto deja libres:\r\n   el titular ocupa la izquierda, y las pastillas son opacas y tapan lo\r\n   que quede detr\u00e1s de ellas. *\/\r\n\/* SE NOTAN M\u00c1S POR TRES V\u00cdAS, y solo una cuesta contraste:\r\n\r\n     \u00b7 M\u00c1S GRANDES. Es la que sale gratis: al crecer, el tono local es\r\n       exactamente el mismo, as\u00ed que el texto encima no pierde ni un\r\n       punto de contraste. Solo cubren m\u00e1s superficie.\r\n     \u00b7 MENOS DESENFOQUE. Tambi\u00e9n gratis, y es lo que las devuelve a\r\n       parecer fruta en vez de una mancha de color.\r\n     \u00b7 M\u00c1S OPACIDAD, del 30 al 45%. Esta s\u00ed cuesta, y por eso el pie del\r\n       registro tuvo que oscurecerse otra vez (ver su regla). *\/\r\n.cdz-prod-texto .cdz-prod-fruta{ opacity:.45; }\r\n\/* EN ESQUINAS OPUESTAS, no las dos a la derecha. Juntas se le\u00edan como\r\n   una sola mancha y tapaban media tabla; en diagonal cada una ocupa un\r\n   rinc\u00f3n y el centro del panel \u2014donde est\u00e1 el grueso del texto\u2014 queda\r\n   limpio.\r\n\r\n   Y m\u00e1s chicas: a 64% y 40% invad\u00edan las pastillas de valores. *\/\r\n.cdz-prod-texto .cdz-prod-fruta-a{ width:40%; left:74%;  top:-26%; filter:blur(.5em);  }\r\n.cdz-prod-texto .cdz-prod-fruta-b{ width:26%; left:-9%;  top:68%;  filter:blur(.38em); }\r\n\r\n@media (max-width:767px){\r\n  \/* En m\u00f3vil el panel blanco es mucho m\u00e1s estrecho y el texto ocupa\r\n     todo el ancho: las frutas se van m\u00e1s a los bordes. *\/\r\n  .cdz-prod-texto .cdz-prod-fruta-a{ width:50%; left:66%; top:-16%; }\r\n  .cdz-prod-texto .cdz-prod-fruta-b{ width:34%; left:-10%; top:80%; }\r\n}\r\n\r\n\/* ---------------------------------------------------------------------\r\n   PANEL DERECHO \u00b7 texto y tabla\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-prod-texto{\r\n  background:#FFFFFF;\r\n  border-radius:1.6em;\r\n  padding:2.6em 2.8em 2.4em;\r\n  display:flex; flex-direction:column; justify-content:center;\r\n  \/* Referencia de posici\u00f3n para las frutas, y recorte: el overflow es\r\n     lo que hace que se corten siguiendo la curva de las esquinas. *\/\r\n  position:relative; overflow:hidden;\r\n}\r\n@media (max-width:767px){ .cdz-prod-texto{ padding:2em 1.4em 1.8em; } }\r\n\r\n.cdz-prod-eyebrow{\r\n  display:block;\r\n  font-size:1.02em; font-weight:600;\r\n  letter-spacing:.07em; text-transform:uppercase;\r\n  color:var(--cdz-marca);\r\n  margin-bottom:.75em;\r\n}\r\n\r\n\/* Titular a dos tonos, igual tratamiento que la referencia: la primera\r\n   l\u00ednea en el color de marca y la segunda en el oscuro. El contraste\r\n   entre las dos es lo que arma la jerarqu\u00eda sin necesidad de cambiar\r\n   tama\u00f1os. *\/\r\n.cdz-prod .cdz-prod-titulo{\r\n  font-size:2.8em; line-height:96%;\r\n  \/* .75em \u2248 33px. Dos avisos para cuando haya que retocarlo:\r\n\r\n     \u00b7 El margen se mide en la em del propio h2, que es de 2.8em, as\u00ed\r\n       que un valor que suena holgado ac\u00e1 es chico comparado con el\r\n       cuerpo de texto, que es con lo que el ojo lo contrasta.\r\n     \u00b7 El panel centra su contenido en vertical, as\u00ed que al cambiar\r\n       este margen el bloque entero se reacomoda y el desplazamiento\r\n       que se percibe es la MITAD de lo que se quit\u00f3. Pasos de menos de\r\n       .2em no se notan. *\/\r\n  margin-bottom:.75em;\r\n}\r\n.cdz-prod-titulo .claro{ color:var(--cdz-marca); }\r\n@media (max-width:767px){ .cdz-prod .cdz-prod-titulo{ font-size:2em; } }\r\n\r\n.cdz-prod .cdz-prod-p{\r\n  font-size:1.16em; line-height:152%;\r\n  \/* Un punto m\u00e1s hondo que el #4A6FA5 de antes: encima de la fruta al\r\n     30% aquel ca\u00eda a 3.97:1, por debajo del m\u00ednimo. Este da 5.84. *\/\r\n  color:#35548B; max-width:40em;\r\n}\r\n.cdz-prod-p b{ font-weight:600; color:var(--cdz-oscuro); }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   TABLA \u00b7 dos columnas\r\n   --------------------------------------------------------------------- *\/\r\n\/* Las seis filas van repartidas en dos columnas de tres. Apiladas en una\r\n   sola columna eran lo que m\u00e1s alto le daba a la secci\u00f3n: seis filas\r\n   m\u00e1s su cabecera, cada una con su padding y su divisoria. En dos\r\n   columnas ocupan la mitad, y como la secci\u00f3n ahora es m\u00e1s ancha entran\r\n   sin apretarse.\r\n\r\n   Al partirlas se cay\u00f3 la cabecera \"Composici\u00f3n \/ Por sobre\": con dos\r\n   columnas habr\u00eda que repetirla o dejarla coja. En su lugar va un\r\n   r\u00f3tulo \u00fanico encima, que dice lo mismo en menos espacio. *\/\r\n.cdz-prod-tabla{ margin-top:1.3em; }\r\n\r\n\/* Dos r\u00f3tulos, uno por columna, en una rejilla igual a la de las\r\n   celdas para que caigan alineados con ellas. Con un solo r\u00f3tulo\r\n   centrado arriba, \"Composici\u00f3n por sobre\" quedaba tambi\u00e9n sobre la\r\n   columna de sabor y presentaci\u00f3n, que no son composici\u00f3n. *\/\r\n.cdz-prod-rotulos{\r\n  display:grid; grid-template-columns:1fr 1fr;\r\n  column-gap:2.6em;\r\n  margin-bottom:.35em;\r\n}\r\n.cdz-prod-tabla-titulo{\r\n  display:block;\r\n  font-size:1em; font-weight:600;\r\n  letter-spacing:.06em; text-transform:uppercase;\r\n  color:var(--cdz-marca);\r\n}\r\n@media (max-width:767px){\r\n  .cdz-prod-rotulos{ grid-template-columns:1fr; column-gap:0; row-gap:.35em; }\r\n}\r\n\r\n\/* RELLENO POR COLUMNAS, no por filas.\r\n\r\n   Por defecto una rejilla coloca los elementos de izquierda a derecha:\r\n   con seis celdas quedaban 1-2 en la primera fila, 3-4 en la segunda...\r\n   y por columnas sal\u00eda C, Zinc, Sabor a la izquierda y D, Az\u00facar,\r\n   Presentaci\u00f3n a la derecha \u2014 mezclados.\r\n\r\n   grid-auto-flow:column con tres filas declaradas invierte el orden de\r\n   llenado: baja por la primera columna y despu\u00e9s sigue por la segunda.\r\n   As\u00ed los tres componentes quedan juntos a la izquierda y el resto a la\r\n   derecha, SIN tocar el orden del HTML \u2014 que importa, porque en m\u00f3vil\r\n   todo se apila en una sola columna y ah\u00ed el orden de lectura vuelve a\r\n   ser el del documento. *\/\r\n.cdz-prod-celdas{\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr;\r\n  grid-template-rows:repeat(3, auto);\r\n  grid-auto-flow:column;\r\n  column-gap:2.6em;\r\n}\r\n@media (max-width:767px){\r\n  .cdz-prod-celdas{ grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row; column-gap:0; }\r\n}\r\n\r\n\/* La celda es una columna flexible y su divisoria se empuja al fondo.\r\n   Hace falta porque la fila de presentaci\u00f3n lleva tres renglones y es\r\n   m\u00e1s alta que su vecina: sin esto, la divisoria de al lado quedar\u00eda a\r\n   media altura y la tabla se ver\u00eda descuadrada. *\/\r\n.cdz-prod-celda{ display:flex; flex-direction:column; }\r\n.cdz-prod-celda .cdz-prod-div{ margin-top:auto; }\r\n\r\n\/* Etiqueta y valor comparten rejilla dentro de cada celda para que la\r\n   columna de pastillas quede alineada dentro de su mitad.\r\n\r\n   11em y no 8.2em: la pastilla m\u00e1s larga es la de presentaci\u00f3n, \"Caja\r\n   x10, x20 y x30\", que pide unos 9.5em. Si la columna se queda corta,\r\n   ese texto se parte en dos l\u00edneas y esa fila crece de alto \u2014 con lo\r\n   que su divisoria deja de estar a la misma altura que la de la fila\r\n   de al lado y la tabla se ve desalineada. La columna se dimensiona\r\n   por el valor m\u00e1s largo, no por el promedio. *\/\r\n.cdz-prod-fila{\r\n  display:grid; grid-template-columns:1fr 11em;\r\n  align-items:center; gap:.9em;\r\n  padding:.55em 0;\r\n}\r\n@media (max-width:767px){ .cdz-prod-fila{ grid-template-columns:1fr 9.5em; gap:.6em; } }\r\n\r\n.cdz-prod-etiqueta{ font-size:1.14em; line-height:130%; }\r\n\r\n\/* El valor va en pastilla, como el recuadro del check en la referencia:\r\n   es lo que convierte una lista en una tabla legible de un vistazo.\r\n\r\n   Y es OPACA, cosa que ahora importa: las frutas del fondo pasan por\r\n   detr\u00e1s de ella y si fuera transl\u00facida se ver\u00edan a trav\u00e9s, justo\r\n   encima de las cifras. *\/\r\n.cdz-prod-valor{\r\n  background:var(--cdz-palido);\r\n  border-radius:.55em;\r\n  padding:.45em .55em;\r\n  text-align:center;\r\n  font-size:1.08em; font-weight:600; line-height:135%;\r\n  color:var(--cdz-oscuro);\r\n}\r\n\r\n\/* \"Naranja\" va en naranja, y EL TAMA\u00d1O ES PARTE DE LA SOLUCI\u00d3N, no un\r\n   adorno.\r\n\r\n   El problema: el naranja de la marca tiene una luminosidad intermedia,\r\n   as\u00ed que contrasta mal tanto con blanco como con el azul p\u00e1lido de la\r\n   pastilla. Sobre ella, el #F4701F da 2.59:1.\r\n\r\n   A 1.08em en negrita son unos 17px, y por debajo de 18.66px el m\u00ednimo\r\n   exigible es 4.5:1 \u2014 ah\u00ed el naranja m\u00e1s vivo que llega es #B84C06, que\r\n   se ve\u00eda apagado. Subiendo la palabra a 1.25em pasa a 20px, entra en\r\n   la categor\u00eda de texto grande y el m\u00ednimo baja a 3:1. Con ese list\u00f3n\r\n   cabe el #D2590B, dos puntos m\u00e1s claro, que da 3.60:1.\r\n\r\n   O sea: la palabra es m\u00e1s grande PARA PODER SER m\u00e1s naranja. Si\r\n   alguien la devuelve a su tama\u00f1o anterior sin tocar el color, vuelve a\r\n   incumplir.\r\n\r\n   M\u00e1s claro que este ya no entra: el siguiente escal\u00f3n, #E2620F, se\r\n   queda en 3.11 y el de la marca ni siquiera llega a 3. *\/\r\n.cdz-prod-valor .sabor{ color:#D2590B; font-size:1.16em; }\r\n\r\n\/* Divisoria: se dibuja de izquierda a derecha al entrar en pantalla.\r\n   transform-origin:left es lo que hace que crezca desde ese lado en vez\r\n   de expandirse desde el centro. *\/\r\n.cdz-prod-div{\r\n  height:1px; background:var(--cdz-linea);\r\n  transform-origin:left center;\r\n}\r\n\r\n.cdz-prod .cdz-prod-pie{\r\n  margin-top:1.1em;\r\n  \/* ESTE COLOR SE CORRIGI\u00d3 DOS VECES, y la primera mal: con #55708F\r\n     encima de la fruta al 30% daba 3.98:1, todav\u00eda por debajo del\r\n     m\u00ednimo de 4.5 \u2014 se dio por bueno sin medirlo.\r\n\r\n     Con la fruta ahora al 45%, #3F587A da 4.96:1 sobre ella y 7.27\r\n     sobre el blanco limpio. Este s\u00ed cumple en las dos zonas. *\/\r\n  font-size:1em; line-height:140%; color:#3F587A;\r\n}\r\n.cdz-prod-pie b{ font-weight:600; color:#35548B; }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   ESTADOS INICIALES sin JavaScript\r\n   Si GSAP no llegara a cargar, el atributo nunca se pone y todo queda\r\n   visible: las animaciones son una mejora, no un requisito para leer.\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-prod[data-cdz-prod-listo] .cdz-prod-anim{ opacity:0; }\r\n.cdz-prod[data-cdz-prod-listo] .cdz-prod-div{ transform:scaleX(0); }\r\n<\/style>\r\n\r\n<section class=\"cdz-prod\" data-cdz-prod>\r\n  <div class=\"cdz-prod-container\">\r\n    <div class=\"cdz-prod-grid\">\r\n\r\n      <!-- \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 Panel izquierdo \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 -->\r\n      <div class=\"cdz-prod-visual\">\r\n\r\n        <svg class=\"cdz-prod-linea\" viewBox=\"0 0 600 620\" fill=\"none\"\r\n             preserveAspectRatio=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n          <path data-cdz-prod-trazo\r\n                d=\"M-40 470C60 520 150 470 170 380C190 290 90 240 130 150C165 70 300 60 420 105C520 142 570 120 640 60\"\r\n                stroke-width=\"34\" stroke-linecap=\"butt\"\/>\r\n        <\/svg>\r\n\r\n        <!-- Gira solo y adem\u00e1s se puede manipular:\r\n\r\n             \u00b7 auto-rotate + rotation-per-second: el giro continuo.\r\n               auto-rotate-delay=\"0\" para que arranque de una, sin la\r\n               espera de 3 segundos que trae por defecto.\r\n             \u00b7 camera-controls: habilita arrastrar para girar y rueda o\r\n               pellizco para acercar.\r\n             \u00b7 touch-action=\"pan-y\" es CLAVE en m\u00f3vil. Con\r\n               camera-controls, model-viewer se queda por defecto con\r\n               todos los gestos t\u00e1ctiles, as\u00ed que el dedo sobre el\r\n               modelo gira la pieza pero YA NO desplaza la p\u00e1gina: el\r\n               usuario queda atrapado y no puede seguir bajando. Con\r\n               pan-y, el arrastre vertical se lo deja al scroll y el\r\n               horizontal lo usa para girar.\r\n             \u00b7 disable-pan se queda: el paneo mueve el modelo fuera del\r\n               encuadre y no hay forma de devolverlo a su sitio.\r\n             \u00b7 El radio de la \u00f3rbita baj\u00f3 de 0.42m a 0.255m: es el\r\n               acercamiento de la c\u00e1mara. Un lienzo m\u00e1s grande por s\u00ed\r\n               solo no agranda el sobre \u2014solo le deja m\u00e1s aire\r\n               alrededor\u2014, as\u00ed que hay que mover tambi\u00e9n la c\u00e1mara.\r\n             \u00b7 Se quit\u00f3 interpolation-decay=\"0\": esa suavizaci\u00f3n estorba\r\n               cuando el giro va atado al scroll, pero ac\u00e1 es justo lo\r\n               que hace que el arrastre se sienta con inercia. -->\r\n        <model-viewer\r\n          id=\"cdzProdSobre\"\r\n          src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/09\/NUEVO-SOBRE-CDZ-VIT.glb\"\r\n          alt=\"Sobre de CDZ Vit de 3 gramos. Arr\u00e1stralo para girarlo.\"\r\n          camera-orbit=\"0deg 80deg 0.255m\"\r\n          field-of-view=\"28deg\"\r\n          camera-controls\r\n          touch-action=\"pan-y\"\r\n          disable-pan\r\n          auto-rotate auto-rotate-delay=\"0\" rotation-per-second=\"18deg\"\r\n          interaction-prompt=\"none\"\r\n          shadow-intensity=\"1.1\" shadow-softness=\"0.9\"\r\n          exposure=\"1.0\" environment-image=\"neutral\"\r\n          tone-mapping=\"commerce\"\r\n          loading=\"lazy\" reveal=\"auto\">\r\n        <\/model-viewer>\r\n\r\n        <!-- Sin este aviso nadie descubre que el modelo es manipulable:\r\n             no hay ning\u00fan indicio visual de que se pueda arrastrar. -->\r\n        <span class=\"cdz-prod-pista\">Arrastra para girar \u00b7 acerca con la rueda<\/span>\r\n      <\/div>\r\n\r\n      <!-- \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 Panel derecho \u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 -->\r\n      <div class=\"cdz-prod-texto\">\r\n\r\n        <!-- Las frutas van primero y muy tenues: quedan por debajo de\r\n             todo el texto, que sube a z-index:1 por CSS. -->\r\n        <img decoding=\"async\" class=\"cdz-prod-fruta cdz-prod-fruta-a\"\r\n             src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/NARANJA-FONDO-01.png\"\r\n             alt=\"\" aria-hidden=\"true\" loading=\"lazy\">\r\n        <img decoding=\"async\" class=\"cdz-prod-fruta cdz-prod-fruta-b\"\r\n             src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/NARANJA-FONDO-02.png\"\r\n             alt=\"\" aria-hidden=\"true\" loading=\"lazy\">\r\n\r\n        <span class=\"cdz-prod-eyebrow cdz-prod-anim\" data-cdz-prod-item>El producto<\/span>\r\n\r\n        <h2 class=\"cdz-prod-titulo cdz-prod-anim\" data-cdz-prod-item>\r\n          <span class=\"claro\">\u00bfQu\u00e9 es CDZ Vit?<\/span>\r\n        <\/h2>\r\n\r\n        <p class=\"cdz-prod-p cdz-prod-anim\" data-cdz-prod-item>\r\n          Un <b>suplemento dietario<\/b> que re\u00fane en una sola toma diaria Vitamina C,\r\n          Vitamina D y Zinc, en polvo con sabor a naranja. <b>F\u00e1cil, pr\u00e1ctico y listo<\/b>\r\n          para disolver y tomar.\r\n        <\/p>\r\n\r\n        <div class=\"cdz-prod-tabla\">\r\n          <div class=\"cdz-prod-rotulos\">\r\n            <span class=\"cdz-prod-tabla-titulo cdz-prod-anim\" data-cdz-prod-item>Composici\u00f3n por sobre<\/span>\r\n            <span class=\"cdz-prod-tabla-titulo cdz-prod-anim\" data-cdz-prod-item>Sabor y presentaci\u00f3n<\/span>\r\n          <\/div>\r\n          <div class=\"cdz-prod-celdas\">\r\n            <div class=\"cdz-prod-celda cdz-prod-anim\" data-cdz-prod-item>\r\n              <div class=\"cdz-prod-fila\">\r\n                <div class=\"cdz-prod-etiqueta\">Vitamina C<\/div>\r\n                <div class=\"cdz-prod-valor\">1000 mg<\/div>\r\n              <\/div>\r\n              <div class=\"cdz-prod-div\" data-cdz-prod-div><\/div>\r\n            <\/div>\r\n            <div class=\"cdz-prod-celda cdz-prod-anim\" data-cdz-prod-item>\r\n              <div class=\"cdz-prod-fila\">\r\n                <div class=\"cdz-prod-etiqueta\">Vitamina D<\/div>\r\n                <div class=\"cdz-prod-valor\">1000 UI<\/div>\r\n              <\/div>\r\n              <div class=\"cdz-prod-div\" data-cdz-prod-div><\/div>\r\n            <\/div>\r\n            <div class=\"cdz-prod-celda cdz-prod-anim\" data-cdz-prod-item>\r\n              <div class=\"cdz-prod-fila\">\r\n                <div class=\"cdz-prod-etiqueta\">Zinc<\/div>\r\n                <div class=\"cdz-prod-valor\">40 mg<\/div>\r\n              <\/div>\r\n              <div class=\"cdz-prod-div\" data-cdz-prod-div><\/div>\r\n            <\/div>\r\n            <div class=\"cdz-prod-celda cdz-prod-anim\" data-cdz-prod-item>\r\n              <div class=\"cdz-prod-fila\">\r\n                <div class=\"cdz-prod-etiqueta\">Sabor<\/div>\r\n                <div class=\"cdz-prod-valor\"><span class=\"sabor\">Naranja<\/span><\/div>\r\n              <\/div>\r\n              <div class=\"cdz-prod-div\" data-cdz-prod-div><\/div>\r\n            <\/div>\r\n            <div class=\"cdz-prod-celda cdz-prod-anim\" data-cdz-prod-item>\r\n              <div class=\"cdz-prod-fila\">\r\n                <div class=\"cdz-prod-etiqueta\">Az\u00facar a\u00f1adida<\/div>\r\n                <div class=\"cdz-prod-valor\">0 g<\/div>\r\n              <\/div>\r\n              <div class=\"cdz-prod-div\" data-cdz-prod-div><\/div>\r\n            <\/div>\r\n            <div class=\"cdz-prod-celda cdz-prod-anim\" data-cdz-prod-item>\r\n              <div class=\"cdz-prod-fila\">\r\n                <div class=\"cdz-prod-etiqueta\">Presentaci\u00f3n<\/div>\r\n                <div class=\"cdz-prod-valor\">\r\n                  Caja x 10 sobres<br>\r\n                  Caja x 20 sobres<br>\r\n                  Caja x 30 sobres\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"cdz-prod-div\" data-cdz-prod-div><\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <p class=\"cdz-prod-pie cdz-prod-anim\" data-cdz-prod-item>\r\n          <b>Registro Sanitario<\/b> SD2025-0004878\r\n        <\/p>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  function arranca(){\r\n    \/* Mismo guardi\u00e1n que las otras secciones: este widget no carga\r\n       librer\u00edas, las toma de la secci\u00f3n 1. Si a\u00fan no est\u00e1n, reintenta. *\/\r\n    if(!window.gsap || !window.ScrollTrigger || !customElements.get('model-viewer')){\r\n      return setTimeout(arranca, 60);\r\n    }\r\n    gsap.registerPlugin(ScrollTrigger);\r\n\r\n    var seccion = document.querySelector('[data-cdz-prod]');\r\n    var trazo   = document.querySelector('[data-cdz-prod-trazo]');\r\n    if(!seccion) return;\r\n\r\n    \/* Reci\u00e9n ac\u00e1 el CSS esconde lo animable. Si GSAP no cargara, el\r\n       atributo no se pone y la secci\u00f3n se lee igual. *\/\r\n    seccion.setAttribute('data-cdz-prod-listo', '');\r\n\r\n    \/* --- Entrada del texto --------------------------------------------\r\n       Cada pieza sube desde abajo, escalonada, con el mismo sine.out de\r\n       las tarjetas de la secci\u00f3n 4 para que las dos se sientan de la\r\n       misma familia. once:true porque es una entrada, no algo atado al\r\n       scroll: se dispara una vez y ScrollTrigger se retira.\r\n\r\n       Las frutas del fondo NO entran ac\u00e1: no llevan data-cdz-prod-item\r\n       a prop\u00f3sito. Son fondo, y el panel donde viven ya est\u00e1 a la vista\r\n       desde que carga la secci\u00f3n \u2014 una entrada propia llamar\u00eda la\r\n       atenci\u00f3n sobre algo que no la pide. *\/\r\n    gsap.fromTo('[data-cdz-prod-item]',\r\n      {opacity:0, y:'2em'},\r\n      {opacity:1, y:'0em', duration:.65, ease:'sine.out', stagger:.06,\r\n       scrollTrigger:{ trigger: seccion, start:'top 72%', once:true }});\r\n\r\n    \/* --- Divisorias ---------------------------------------------------\r\n       Se dibujan de izquierda a derecha, un pelo despu\u00e9s que su fila,\r\n       con el mismo escalonado. scaleX y no width: scaleX lo resuelve la\r\n       GPU sin recalcular el layout en cada fotograma. *\/\r\n    gsap.fromTo('[data-cdz-prod-div]',\r\n      {scaleX:0},\r\n      {scaleX:1, duration:.55, ease:'power2.out', stagger:.06, delay:.12,\r\n       scrollTrigger:{ trigger: seccion, start:'top 72%', once:true }});\r\n\r\n    \/* --- L\u00ednea blanca del panel ---------------------------------------\r\n       Se dibuja sola al entrar la secci\u00f3n. Si DrawSVGPlugin no estuviera\r\n       cargado, el trazo queda dibujado desde el principio en vez de\r\n       romperse: por eso el estado inicial se pone solo cuando el plugin\r\n       existe de verdad. *\/\r\n    if(trazo && window.DrawSVGPlugin){\r\n      gsap.registerPlugin(DrawSVGPlugin);\r\n      \/* '100% 100%' y no '0% 0%': con drawSVG, el par de valores es\r\n         \"desde d\u00f3nde\" y \"hasta d\u00f3nde\" del trazo, medidos sobre su\r\n         longitud. Arrancando en '0% 0%' el trazo nace en el INICIO del\r\n         path \u2014el extremo de abajo a la izquierda\u2014 y crece hacia el\r\n         otro; como el recorrido serpentea, eso se lee como si el trazo\r\n         brotara del medio y se abriera hacia los dos lados.\r\n\r\n         Arrancando en '100% 100%' nace en el FINAL del path, que es el\r\n         extremo de arriba a la derecha, y al animar el primer valor\r\n         hacia 0% el trazo crece hacia atr\u00e1s, en un solo sentido y desde\r\n         un solo extremo. *\/\r\n      gsap.set(trazo, {drawSVG:'100% 100%'});\r\n      gsap.to(trazo, {\r\n        drawSVG:'0% 100%', duration:1.4, ease:'power2.out',\r\n        scrollTrigger:{ trigger: seccion, start:'top 78%', once:true }\r\n      });\r\n    }\r\n\r\n    \/* El giro ya no va atado al scroll: ahora lo maneja el propio\r\n       model-viewer con auto-rotate, y el usuario puede tomar el control\r\n       arrastrando. Las dos cosas no pueden convivir \u2014 si el scroll\r\n       siguiera fijando cameraOrbit en cada fotograma, pisar\u00eda tanto la\r\n       rotaci\u00f3n autom\u00e1tica como cualquier movimiento del usuario. *\/\r\n\r\n  }\r\n\r\n  if(document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', arranca); }\r\n  else{ arranca(); }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e6a387d elementor-widget elementor-widget-html\" data-id=\"e6a387d\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"uso\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     CDZ VIT \u00b7 SECCI\u00d3N 6 \u2014 MODO DE USO\r\n     Estructura calcada de la secci\u00f3n \"Chunky Flavour\" de la referencia:\r\n\r\n       \u00b7 cabecera centrada: titular, subt\u00edtulo y p\u00e1rrafo\r\n       \u00b7 manuscrito con flecha, arriba a la izquierda\r\n       \u00b7 producto base a la izquierda  +  slider a la derecha,\r\n         separados por un signo \"+\"\r\n       \u00b7 el slider va montado sobre un c\u00edrculo dibujado que asoma\r\n       \u00b7 debajo, el texto del paso activo con su bot\u00f3n\r\n       \u00b7 dos flechas redondas de navegaci\u00f3n\r\n\r\n     La equivalencia con la referencia es directa: all\u00e1 el \"+\" une el\r\n     producto base con el sabor que se le agrega; ac\u00e1 une el sobre con\r\n     el paso que se le est\u00e1 haciendo.\r\n\r\n     Widget HTML propio. NO vuelve a cargar GSAP ni ScrollTrigger: los\r\n     toma de la secci\u00f3n 1. El slider es propio, en\r\n     unas pocas l\u00edneas, porque el sitio no carga Swiper y no vale la\r\n     pena sumar una librer\u00eda entera para tres slides.\r\n\r\n     \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n     \u2502 v31 \u00b7 QU\u00c9 CAMBI\u00d3                                             \u2502\r\n     \u2502 \u00b7 El chevron se centra de una forma que no depende del        \u2502\r\n     \u2502   relleno del bot\u00f3n. Medido en captura, estaba 7.5px a la     \u2502\r\n     \u2502   derecha sobre un c\u00edrculo de 84.                             \u2502\r\n     \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\r\n\r\n     \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n     \u2502 v30 \u00b7 QU\u00c9 CAMBI\u00d3                                             \u2502\r\n     \u2502 \u00b7 Los chevrones vuelven a su tama\u00f1o de siempre. Al cambiar     \u2502\r\n     \u2502   de viewBox se hab\u00edan encogido: la tinta ocupa distinta       \u2502\r\n     \u2502   proporci\u00f3n de la caja y el mismo \"1.3em\" no es lo mismo.     \u2502\r\n     \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\r\n\r\n     \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n     \u2502 v29 \u00b7 QU\u00c9 CAMBI\u00d3                                             \u2502\r\n     \u2502 \u00b7 Los chevrones de las flechas, centrados de verdad: viewBox  \u2502\r\n     \u2502   cuadrado, tinta centrada y compensaci\u00f3n \u00f3ptica.             \u2502\r\n     \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\r\n\r\n     \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n     \u2502 v28 \u00b7 QU\u00c9 CAMBI\u00d3                                             \u2502\r\n     \u2502 \u00b7 Otro empuj\u00f3n hacia abajo del video, el texto y las flechas.  \u2502\r\n     \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\r\n\r\n     \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n     \u2502 v27 \u00b7 QU\u00c9 CAMBI\u00d3                                             \u2502\r\n     \u2502 \u00b7 El video y las flechas, un poco m\u00e1s abajo dentro del        \u2502\r\n     \u2502   c\u00edrculo. El texto del paso baja con ellos: su posici\u00f3n      \u2502\r\n     \u2502   est\u00e1 atada a la del video.                                  \u2502\r\n     \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\r\n\r\n     \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n     \u2502 v26 \u00b7 QU\u00c9 CAMBI\u00d3                                             \u2502\r\n     \u2502 \u00b7 La imagen del sobre, la definitiva.                         \u2502\r\n     \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\r\n\r\n     \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n     \u2502 v25 \u00b7 QU\u00c9 CAMBI\u00d3                                             \u2502\r\n     \u2502 \u00b7 Las flechas, un poco m\u00e1s a la izquierda.                    \u2502\r\n     \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\r\n\r\n     \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n     \u2502 v24 \u00b7 QU\u00c9 CAMBI\u00d3                                             \u2502\r\n     \u2502 \u00b7 El slider queda CONC\u00c9NTRICO con el c\u00edrculo. Estaba          \u2502\r\n     \u2502   centrado en su columna mientras el c\u00edrculo iba corrido a    \u2502\r\n     \u2502   la derecha, y por eso la esquina superior izquierda del     \u2502\r\n     \u2502   video se montaba sobre el trazo.                            \u2502\r\n     \u2502 \u00b7 Las flechas se corren lo mismo que el slider, o dejar\u00edan    \u2502\r\n     \u2502   de estar centradas debajo de \u00e9l.                            \u2502\r\n     \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\r\n     ============================================================ -->\r\n\r\n<style>\r\n.cdz-uso{\r\n  --cdz-unit: 16;\r\n  --cdz-ideal: 1440;\r\n  --cdz-min: 992px;\r\n  --cdz-max: 2560px;\r\n  --cdz-cont: clamp(var(--cdz-min), 100vw, var(--cdz-max));\r\n\r\n  --cdz-oscuro: #0A3C75;\r\n  --cdz-marca:  #007AFF;\r\n  --cdz-acento: #F4701F;\r\n  --cdz-palido: #EAF2FE;\r\n  --cdz-panel:  #DCE9FB;\r\n\r\n  font-size: calc(var(--cdz-cont) \/ (var(--cdz-ideal) \/ var(--cdz-unit)));\r\n  font-family: 'Archivo', Arial, sans-serif;\r\n  font-variation-settings: 'wdth' 78;\r\n  font-weight: 400;\r\n  letter-spacing: -.03em;\r\n  color: var(--cdz-oscuro);\r\n  background: #A7C9F9;\r\n  position: relative;\r\n  overflow-x: clip;\r\n}\r\n@media (max-width:991px){ .cdz-uso{ --cdz-ideal:640; --cdz-min:768px; --cdz-max:991px; } }\r\n@media (max-width:767px){ .cdz-uso{ --cdz-ideal:550; --cdz-min:480px; --cdz-max:767px; } }\r\n@media (max-width:479px){ .cdz-uso{ --cdz-ideal:390; --cdz-min:320px; --cdz-max:479px; } }\r\n\r\n.cdz-uso *,.cdz-uso *::before,.cdz-uso *::after{ box-sizing:border-box; }\r\n\/* Reset de m\u00e1rgenes. Estos selectores valen 0-1-1, as\u00ed que las reglas\r\n   que dan margen se escriben como \".cdz-uso .clase\" (0-2-0) \u2014 si no, el\r\n   margin:0 gana y el margen simplemente no aparece. *\/\r\n.cdz-uso h2,.cdz-uso h3{ margin:0; font-weight:600; }\r\n.cdz-uso p{ margin:0; }\r\n\/* El \"padding:0\" NO es de adorno. Quitar el borde y el fondo es lo que\r\n   uno recuerda hacer, pero los navegadores y los temas de WordPress\r\n   tambi\u00e9n le ponen relleno propio a los <button>, y ese relleno mueve el\r\n   contenido dentro del bot\u00f3n. Es la causa de que un icono aparezca\r\n   descentrado sin que nada en el CSS propio lo explique. *\/\r\n.cdz-uso button{ font:inherit; color:inherit; border:0; background:none;\r\n                 padding:0; cursor:pointer; }\r\n.cdz-uso a{ text-decoration:none; color:inherit; }\r\n\r\n.cdz-uso-container{\r\n  max-width:var(--cdz-cont); margin-inline:auto;\r\n  \/* El padding de abajo es 11em y no 4em por el c\u00edrculo. Mide 125% del\r\n     ancho de su columna, o sea 1.76 veces el alto del video, as\u00ed que\r\n     desborda su celda unos 152px por arriba y otros tantos por abajo.\r\n     Arriba no molesta \u2014se mete detr\u00e1s del p\u00e1rrafo de la cabecera, que\r\n     es justo el efecto buscado\u2014, pero por abajo se sal\u00eda de la secci\u00f3n\r\n     y lo tapaba el fondo de la secci\u00f3n siguiente, que va despu\u00e9s en el\r\n     documento y pinta encima. No es un recorte: es otro elemento\r\n     encima.\r\n\r\n     Descontando lo que ya ocupan las flechas, hac\u00edan falta 6.4em m\u00e1s.\r\n     La otra salida ser\u00eda achicar el c\u00edrculo, pero perder\u00eda la presencia\r\n     que tiene ahora. *\/\r\n  padding:5.4em 1.5em 11em;\r\n}\r\n@media (max-width:991px){ .cdz-uso-container{ padding:3.8em 1em 3.2em; } }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   CABECERA \u00b7 titular, subt\u00edtulo y p\u00e1rrafo, centrados\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-uso-cabecera{ text-align:center; margin-bottom:1.2em; }\r\n\r\n\/* Los tres tama\u00f1os salen del CSS de la referencia, no de una\r\n   estimaci\u00f3n: .flavour-title va en 15em con line-height .76,\r\n   .flavour-subline en 3.75em con peso 500 y line-height .8, y\r\n   .flavour-paragraph en 1.875em. Como su sistema de escalado es el\r\n   mismo que el nuestro \u2014la em base es el ancho dividido 90\u2014 los\r\n   n\u00fameros se pueden copiar tal cual.\r\n\r\n   15em son unos 240px a 1440 de ancho. \"Modo de uso\" ocupa ah\u00ed cerca\r\n   de 1100px, as\u00ed que entra holgado; y como todo est\u00e1 en em, la\r\n   proporci\u00f3n se mantiene a cualquier ancho.\r\n\r\n   Los m\u00e1rgenes tambi\u00e9n son los suyos: 3.125em entre titular y\r\n   subt\u00edtulo y 2.5em entre subt\u00edtulo y p\u00e1rrafo, medidos en la em base.\r\n   Ac\u00e1 van divididos por el tama\u00f1o de cada elemento, porque un margin\r\n   en em se cuenta sobre la fuente del propio elemento: 3.125\/15 = .21\r\n   y 2.5\/3.75 = .667. *\/\r\n.cdz-uso .cdz-uso-titulo{\r\n  font-size:11.6em; line-height:.76;\r\n  color:var(--cdz-oscuro);   \/* #0A3C75 *\/\r\n  margin-bottom:.21em;\r\n}\r\n@media (max-width:991px){ .cdz-uso .cdz-uso-titulo{ font-size:6.6em; } }\r\n\r\n.cdz-uso .cdz-uso-subtitulo{\r\n  font-size:3.75em; line-height:.8; font-weight:500;\r\n  color:var(--cdz-marca);\r\n  margin-bottom:.667em;\r\n}\r\n@media (max-width:991px){ .cdz-uso .cdz-uso-subtitulo{ font-size:2.5em; } }\r\n.cdz-uso .cdz-uso-bajada{\r\n  \/* 1.74em y line-height 130%: exactamente el mismo tama\u00f1o que el\r\n     p\u00e1rrafo de las tarjetas de la secci\u00f3n 4 (\"40 mg por sobre...\").\r\n\r\n     El max-width baja de 26em a 17em aunque el bloque se vea m\u00e1s ancho:\r\n     esa medida se cuenta en la em del propio p\u00e1rrafo, que ahora es\r\n     mucho mayor. 17 \u00d7 1.74 = 29.6em del tama\u00f1o base \u2014 m\u00e1s ancho real\r\n     que antes, pero suficientemente contenido para que el texto caiga\r\n     en tres renglones, como en la referencia. *\/\r\n  font-size:1.74em; line-height:130%; color:#4A6FA5;\r\n  max-width:17em; margin-inline:auto;\r\n}\r\n\r\n\/* ---------------------------------------------------------------------\r\n   CONTENIDO \u00b7 rejilla de 12 columnas, la misma de la referencia\r\n\r\n   Los tramos salen de su CSS, no de una estimaci\u00f3n:\r\n     .flavour-left       grid-column: 1 \/ span 5\r\n     .flavour-plus       grid-column: 6 \/ span 2\r\n     .flavour-right      grid-column: 8 \/ span 5\r\n     .flavour-center     grid-column: 5 \/ span 4   margin-top:-5em\r\n     .flavour-navigation grid-column: 8 \/ span 5   margin-top:-5em\r\n                         justify-content:flex-end; padding-right:6.25em\r\n\r\n   El texto del paso queda a caballo entre las tres zonas \u2014arranca en la\r\n   columna 5 y termina en la 8\u2014 y por eso se ve centrado bajo el \"+\"\r\n   aunque no est\u00e9 en su misma columna. Y las flechas van pegadas a la\r\n   derecha del bloque del slider, no debajo del texto.\r\n\r\n   Los dos margin-top negativos son los que hacen que texto y flechas\r\n   suban y se metan por encima de los productos, en vez de quedar\r\n   colgando debajo.\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-uso-contenido{\r\n  display:grid;\r\n  grid-template-columns:repeat(12, 1fr);\r\n  column-gap:1.5em;\r\n  align-items:center;\r\n  padding-top:5em;   \/* la referencia usa 9.375em, con una cabecera m\u00e1s alta *\/\r\n}\r\n@media (max-width:991px){\r\n  .cdz-uso-contenido{ grid-template-columns:1fr; row-gap:1.5em; padding-top:2em; text-align:center; }\r\n}\r\n\r\n\/* --- Izquierda: el sobre --- *\/\r\n\/* grid-row expl\u00edcito en los TRES items de esta fila. Si solo lo lleva\r\n   el texto \u2014que se solapa con la columna 5 del sobre y la 8 del\r\n   slider\u2014, pasa a ser el \u00fanico con posici\u00f3n definida y se coloca\r\n   primero; entonces el sobre y el slider encuentran esas columnas\r\n   ocupadas y el algoritmo los empuja a la fila siguiente. El texto\r\n   quedaba solo arriba y los otros dos debajo. Declarando la fila en\r\n   los tres, el solapamiento es intencional y comparten fila. *\/\r\n.cdz-uso-base{\r\n  grid-column:1 \/ span 5;\r\n  grid-row:1;\r\n  position:relative;\r\n  display:grid; place-items:center;\r\n}\r\n.cdz-uso-base img{\r\n  \/* El sobre es ACOMPA\u00d1AMIENTO, no protagonista: el protagonista es el\r\n     video. Antes compet\u00edan \u2014 dos rect\u00e1ngulos del mismo tama\u00f1o, con la\r\n     misma saturaci\u00f3n naranja y a la misma altura. Tres cosas lo\r\n     resuelven:\r\n\r\n     \u00b7 52% en vez de 70%. La jerarqu\u00eda la marca el tama\u00f1o antes que\r\n       cualquier otra cosa.\r\n     \u00b7 Inclinado 8\u00b0. Es lo que hace la referencia con su producto base\r\n       \u2014bote a 7.7\u00b0, sobres detr\u00e1s a -13\u00b0 y -25\u00b0\u2014 y sirve para que la\r\n       pieza deje de leerse como una imagen enmarcada y pase a leerse\r\n       como un objeto suelto sobre el fondo.\r\n     \u00b7 Sombra proyectada. Al ir sobre el PNG recortado sigue la silueta\r\n       real del sobre, no una caja, y eso lo despega del fondo plano.\r\n\r\n     El translateX lo corre hacia el centro de la secci\u00f3n. Va en % del\r\n     propio ancho de la imagen, as\u00ed que el desplazamiento crece y se\r\n     encoge con ella y la proporci\u00f3n se mantiene a cualquier ancho. *\/\r\n  width:52%; height:auto; display:block;\r\n  transform:translateX(14%) rotate(-8deg);\r\n  filter:drop-shadow(0 1.2em 1.6em rgba(10,60,117,.18));\r\n  pointer-events:none; user-select:none;\r\n}\r\n@media (max-width:991px){ .cdz-uso-base{ grid-column:auto; grid-row:auto; } .cdz-uso-base img{ max-width:16em; margin-inline:auto; } }\r\n\r\n\/* --- Manuscrito: dentro del bloque del sobre, arriba a la izquierda,\r\n       montado sobre \u00e9l como en la referencia --- *\/\r\n.cdz-uso-firma{\r\n  position:absolute; z-index:2;\r\n  top:-1em; left:4%;\r\n  display:flex; flex-direction:column; align-items:center;\r\n  width:max-content;\r\n  color:var(--cdz-oscuro);\r\n}\r\n.cdz-uso-firma-texto{\r\n  font-family:'Caveat', cursive;\r\n  font-variation-settings: normal;\r\n  font-weight:600;\r\n  font-size:1.9em; line-height:112%;\r\n  transform:rotate(-2deg);\r\n  text-align:center;\r\n}\r\n.cdz-uso-firma-flecha{ width:5.2em; height:auto; margin-top:.4em; overflow:visible; }\r\n@media (max-width:991px){ .cdz-uso-firma{ display:none; } }\r\n\r\n\/* El signo \"+\" de la referencia se quit\u00f3 a pedido. Su columna (la 6 y\r\n   la 7) queda vac\u00eda y act\u00faa como separaci\u00f3n entre el sobre y el\r\n   slider \u2014 por eso la rejilla sigue siendo de 12 y los otros tramos no\r\n   se tocaron. *\/\r\n\r\n\/* --- Derecha: el c\u00edrculo y el slider --- *\/\r\n.cdz-uso-escena{\r\n  grid-column:8 \/ span 5;\r\n  grid-row:1;\r\n  position:relative;\r\n  display:grid; place-items:center;\r\n}\r\n\/* El c\u00edrculo mide M\u00c1S que su columna \u2014igual que en la referencia, donde\r\n   va al 135%\u2014 para que el trazo salga de cuadro por la derecha en vez\r\n   de quedar contenido y parecer un marco. *\/\r\n.cdz-uso-circulo{\r\n  position:absolute; z-index:0;\r\n  width:125%; aspect-ratio:1\/1;\r\n  \/* Corrido hacia la derecha: place-items:center del contenedor lo\r\n     dejaba centrado en su columna, y el translateX lo empuja desde ah\u00ed.\r\n     En % se cuenta sobre el ancho del propio c\u00edrculo, as\u00ed que un 9% son\r\n     unos 9% de 125% de la columna \u2014 se mantiene proporcional a\r\n     cualquier ancho de pantalla. *\/\r\n  transform:translateX(9%);\r\n  color:#FFFFFF; pointer-events:none;\r\n}\r\n.cdz-uso-circulo path{\r\n  stroke:currentColor; fill:none;\r\n  stroke-width:1.6em;\r\n  vector-effect:non-scaling-stroke;\r\n}\r\n\r\n.cdz-uso-slider{\r\n  position:relative; z-index:1;\r\n  width:71%;\r\n  \/* CONC\u00c9NTRICO CON EL C\u00cdRCULO, y de ah\u00ed sale el 15.85%.\r\n\r\n     El c\u00edrculo mide 125% de la columna y lleva translateX(9%) sobre su\r\n     PROPIO ancho, as\u00ed que acaba corrido unos 64px a la derecha respecto\r\n     al centro de la columna. El slider, en cambio, estaba centrado en la\r\n     columna a secas: quedaba desplazado a la izquierda respecto al\r\n     c\u00edrculo, y por eso su esquina superior izquierda se montaba sobre el\r\n     trazo en vez de quedar limpiamente dentro.\r\n\r\n     Esos mismos 64px, expresados sobre el ancho del slider \u2014que es el\r\n     71% de la columna\u2014 son 15.85%. Al ir en porcentaje, la relaci\u00f3n se\r\n     mantiene a cualquier ancho de pantalla.\r\n\r\n     SI SE TOCA EL 9% DEL C\u00cdRCULO O EL 71% DEL SLIDER, este n\u00famero hay\r\n     que recalcularlo. La cuenta es 9 \u00d7 1.25 \u00f7 0.71.\r\n\r\n     El translateY sube el slider dentro del c\u00edrculo. En la referencia el\r\n     producto ocupa la mitad ALTA y la mitad baja queda libre: ese hueco\r\n     es el que ocupan las flechas, por eso nunca se pisan. Con el slider\r\n     centrado en el c\u00edrculo, las flechas ca\u00edan encima.\r\n\r\n     Pas\u00f3 de -9% a -5% y de ah\u00ed a -2.5%: unos 26px m\u00e1s abajo en total.\r\n     Al tocarlo hay que mover tambi\u00e9n el translateY del texto del paso y\r\n     el margin-top de las flechas: los tres est\u00e1n atados y si se mueve\r\n     uno solo, dejan de estar alineados entre s\u00ed. *\/\r\n  transform:translate(15.85%, -2.5%);\r\n  border-radius:1.5em; overflow:hidden;\r\n  background:var(--cdz-panel);\r\n  \/* Proporci\u00f3n fija: los tres videos ocupan el mismo hueco aunque vengan\r\n     en formatos distintos, as\u00ed que el slider no cambia de alto al pasar\r\n     de uno a otro. Si tus videos son verticales, este es el n\u00famero a\r\n     mover \u20144\/5 o 9\/16\u2014 y todo se ajusta solo. *\/\r\n  aspect-ratio:1\/1;\r\n}\r\n@media (max-width:991px){ .cdz-uso-escena{ grid-column:auto; grid-row:auto; } .cdz-uso-slider{ width:64%; } }\r\n\r\n\/* La pista es una fila de tres slides al 100% cada una; moverla en\r\n   m\u00faltiplos de -100% es todo el mecanismo. transform y no \"left\":\r\n   lo resuelve la GPU sin recalcular layout en cada fotograma. *\/\r\n.cdz-uso-track{\r\n  display:flex; height:100%;\r\n  transition:transform .6s cubic-bezier(.4,0,.2,1);\r\n  will-change:transform;\r\n}\r\n.cdz-uso-slide{ flex:0 0 100%; height:100%; }\r\n.cdz-uso-slide video{ width:100%; height:100%; display:block; object-fit:cover; }\r\n\r\n\/* --- Texto del paso activo: columnas 5 a 8, subido --- *\/\r\n\/* El texto del paso pasa a la PRIMERA fila de la rejilla, no a la\r\n   segunda: as\u00ed align-self:center lo alinea con el centro vertical del\r\n   slider en vez de colgar debajo de \u00e9l.\r\n\r\n   Ocupa las columnas 5 a 8, que se solapan con la \u00faltima del sobre y la\r\n   primera del slider. La rejilla lo permite sin problema cuando los\r\n   tramos se declaran expl\u00edcitamente, y visualmente no choca con nada:\r\n   el sobre mide 52% de sus columnas y el video 71% de las suyas, as\u00ed\r\n   que las columnas del medio est\u00e1n libres.\r\n\r\n   El translateY compensa que el video no est\u00e1 centrado en su celda \u2014\r\n   lleva un translateY(-9%) para dejarle sitio a las flechas\u2014. Sin esta\r\n   correcci\u00f3n, el texto quedar\u00eda alineado al centro de la celda y el\r\n   video un poco m\u00e1s arriba. Si se cambia aquel -9%, hay que mover este\r\n   n\u00famero en la misma proporci\u00f3n. *\/\r\n.cdz-uso-info{\r\n  grid-column:5 \/ span 4;\r\n  grid-row:1;\r\n  align-self:center;\r\n  \/* Baja con el video: eran -2.2em cuando el slider sub\u00eda un 9%, y con\r\n     el 2.5% de ahora le corresponden 26px menos. *\/\r\n  transform:translateY(-.6em);\r\n  text-align:center;\r\n  display:grid;   \/* los tres apilados en la misma celda *\/\r\n}\r\n@media (max-width:991px){\r\n  .cdz-uso-info{ grid-column:auto; grid-row:auto; transform:none; }\r\n}\r\n\r\n\/* Solo uno tiene opacidad: as\u00ed el bloque mide siempre lo que mide el\r\n   paso m\u00e1s alto y el pie no da saltos al cambiar de slide. *\/\r\n.cdz-uso-info-item{\r\n  grid-area:1\/1;\r\n  opacity:0; visibility:hidden;\r\n  transition:opacity .4s ease;\r\n  display:flex; flex-direction:column; align-items:center;\r\n}\r\n.cdz-uso-info-item[data-activo]{ opacity:1; visibility:visible; }\r\n\r\n.cdz-uso-paso-cab{ display:flex; flex-direction:column; align-items:center; gap:.35em; }\r\n.cdz-uso .cdz-uso-paso-sub{\r\n  font-size:1.375em; line-height:.8; letter-spacing:-.02em;\r\n  color:var(--cdz-marca);\r\n}\r\n.cdz-uso .cdz-uso-paso-titulo{\r\n  font-size:3em; font-weight:600; line-height:.75;\r\n  text-transform:uppercase;\r\n}\r\n\r\n\r\n\/* --- Flechas: columnas 8 a 12, pegadas a la derecha y subidas --- *\/\r\n\/* Las flechas quedan en el hueco bajo el slider, dentro del c\u00edrculo.\r\n\r\n   El margin-top pas\u00f3 de -5em a -1.6em: en la referencia ese -5em\r\n   funciona porque su grupo de producto es alto y desborda bastante por\r\n   abajo, as\u00ed que las flechas suben hasta el hueco. El nuestro es un\r\n   cuadrado m\u00e1s compacto, y con -5em las flechas se met\u00edan encima del\r\n   video.\r\n\r\n   El padding-right es lo que las mueve de lado, y va AL REV\u00c9S de lo que\r\n   uno espera: como el bloque est\u00e1 alineado a la derecha, SUBIR el n\u00famero\r\n   las corre hacia la IZQUIERDA. Pas\u00f3 de 11 a 7em al correr el slider\r\n   \u2014hab\u00eda que moverlas los mismos 64px que el video\u2014 y de ah\u00ed a 9.5em\r\n   para dejarlas un poco m\u00e1s a la izquierda.\r\n\r\n   Tama\u00f1o: 4em en vez de los 5em de la referencia, con el icono en\r\n   1.05em. Sus botones conviven con un producto grande; los nuestros,\r\n   con un video m\u00e1s compacto, y al mismo tama\u00f1o pesaban demasiado en la\r\n   composici\u00f3n. *\/\r\n.cdz-uso-nav{\r\n  grid-column:8 \/ span 5;\r\n  grid-row:2;\r\n  margin-top:.25em;\r\n  display:flex; gap:.5em;\r\n  justify-content:flex-end; align-items:flex-start;\r\n  padding-right:9.5em;\r\n}\r\n@media (max-width:991px){\r\n  .cdz-uso-nav{ grid-column:auto; grid-row:auto; margin-top:0; padding-right:0; justify-content:center; }\r\n}\r\n\/* \".cdz-uso .cdz-uso-flecha\" y no \".cdz-uso-flecha\" a secas: el reset\r\n   de arriba, \".cdz-uso button{ background:none }\", vale 0-1-1 y le\r\n   ganaba a una clase suelta (0-1-0). El fondo blanco nunca se estaba\r\n   aplicando \u2014 los botones se ve\u00edan transparentes sobre el c\u00edrculo. *\/\r\n.cdz-uso .cdz-uso-flecha{\r\n  width:4em; height:4em; border-radius:50%;\r\n  background:#FFFFFF; color:var(--cdz-oscuro);\r\n  display:grid; place-items:center;\r\n  \/* line-height:0 en el bot\u00f3n y display:block en el svg. Sin las dos\r\n     cosas, el navegador reserva el espacio de una l\u00ednea de texto\r\n     alrededor del icono \u2014incluido el hueco del descendente\u2014 y ese\r\n     sobrante empuja el dibujo hacia arriba unos p\u00edxeles. Es la causa\r\n     habitual de un icono que \"no queda centrado\" aunque el contenedor\r\n     s\u00ed lo est\u00e9 centrando. *\/\r\n  line-height:0;\r\n  \/* Referencia de posici\u00f3n para el icono, que va centrado en absoluto. *\/\r\n  position:relative;\r\n  box-shadow:0 .35em 1.2em rgba(10,60,117,.10);\r\n  transition:background .25s ease, color .25s ease, transform .25s ease;\r\n}\r\n.cdz-uso .cdz-uso-flecha:hover{ background:var(--cdz-marca); color:#FFFFFF; transform:translateY(-.12em); }\r\n\/* CHEVRON CENTRADO, y hay dos correcciones distintas metidas ah\u00ed.\r\n\r\n   La primera: la TINTA no coincide con las coordenadas. El trazo lleva\r\n   remates y uni\u00f3n redondos, que sobresalen del recorrido \u2014 la punta se\r\n   pasa el grosor entero y los extremos, al ir en diagonal, solo su\r\n   proyecci\u00f3n. Medido en el icono anterior, la tinta quedaba a 5.87 de un\r\n   viewBox de 12, o sea descentrada. El nuevo tiene la punta en 9.78 y\r\n   los extremos en 14.58 de un viewBox de 24, y con eso la tinta cae\r\n   exactamente en 12.\r\n\r\n   La segunda que prob\u00e9 \u2014desplazarlo 0.45 unidades hacia la punta como\r\n   compensaci\u00f3n \u00f3ptica\u2014 est\u00e1 QUITADA. Con el descuadre real de 7.5px sin\r\n   corregir, esa correcci\u00f3n de menos de un p\u00edxel no arreglaba nada y solo\r\n   a\u00f1ad\u00eda una variable m\u00e1s. El chevron va ahora en su centro medido: la\r\n   punta en 9.78 y los extremos en 14.58. Si con todo lo dem\u00e1s resuelto\r\n   siguiera pareciendo corrido, ENTONCES s\u00ed es \u00f3ptico y este es el sitio\r\n   donde tocarlo.\r\n\r\n   Y el viewBox pasa a ser cuadrado, con el svg cuadrado tambi\u00e9n: con un\r\n   viewBox de 12\u00d716 y medidas distintas en cada eje, cualquier retoque\r\n   futuro obliga a recalcular las dos.\r\n\r\n   EL TAMA\u00d1O NO SE MIDE EN \"em DEL SVG\" SINO EN TINTA. Al cambiar de\r\n   viewBox el icono se encogi\u00f3 aunque el n\u00famero pareciera parecido: la\r\n   tinta ocupaba otra proporci\u00f3n de la caja. Medido, el chevron anterior\r\n   dibujaba 0.905em de alto y 0.175em de grosor; con 1.95em de svg y\r\n   grosor 2.2 el nuevo da 0.906em y 0.179em \u2014 el mismo icono.\r\n\r\n   Y SE CENTRA EN ABSOLUTO, no con la rejilla del bot\u00f3n. Medido sobre una\r\n   captura, el icono aparec\u00eda 7.5px a la derecha en un c\u00edrculo de 84 \u2014\r\n   demasiado para que lo explicara ning\u00fan ajuste del dibujo. La causa era\r\n   relleno ajeno dentro del bot\u00f3n, que corre su caja de contenido.\r\n\r\n   Con position:absolute los porcentajes se cuentan sobre la caja de\r\n   RELLENO del bot\u00f3n, no sobre su contenido, as\u00ed que el icono queda\r\n   centrado aunque alguien vuelva a meterle padding desde fuera. *\/\r\n.cdz-uso-flecha svg{\r\n  width:1.95em; height:1.95em; display:block;\r\n  position:absolute; top:50%; left:50%;\r\n  transform:translate(-50%,-50%);\r\n}\r\n\r\n\/* ---------------------------------------------------------------------\r\n   ESTADOS INICIALES sin JavaScript\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-uso[data-cdz-uso-listo] .cdz-uso-anim{ opacity:0; }\r\n<\/style>\r\n\r\n<section class=\"cdz-uso\" data-cdz-uso>\r\n  <div class=\"cdz-uso-container\">\r\n\r\n    <!-- \u00b7\u00b7\u00b7 Cabecera \u00b7\u00b7\u00b7 -->\r\n    <div class=\"cdz-uso-cabecera\">\r\n      <h2 class=\"cdz-uso-titulo cdz-uso-anim\" data-cdz-uso-item>Modo de uso<\/h2>\r\n      <p class=\"cdz-uso-subtitulo cdz-uso-anim\" data-cdz-uso-item>Listo en tres pasos<\/p>\r\n      <p class=\"cdz-uso-bajada cdz-uso-anim\" data-cdz-uso-item>\r\n        Disuelve un sobre de 3 g en un vaso con agua y t\u00f3malo. Sin batidora,\r\n        sin medidas, sin complicaciones.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- \u00b7\u00b7\u00b7 Contenido: sobre + slider, en 12 columnas \u00b7\u00b7\u00b7 -->\r\n    <div class=\"cdz-uso-contenido\">\r\n\r\n      <div class=\"cdz-uso-base cdz-uso-anim\" data-cdz-uso-item>\r\n        <div class=\"cdz-uso-firma\">\r\n          <span class=\"cdz-uso-firma-texto\" data-cdz-uso-firma-stroke>R\u00e1pido<br>y sin grumos<\/span>\r\n          <svg class=\"cdz-uso-firma-flecha\" viewBox=\"0 0 120 88\" fill=\"none\"\r\n               stroke=\"currentColor\" stroke-width=\"3.4\" stroke-linecap=\"round\"\r\n               stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n            <path data-cdz-uso-flecha-trazo d=\"M16 6c-4 30 8 54 34 68\"\/>\r\n            <path data-cdz-uso-flecha-trazo d=\"M50 74l-14-1\"\/><path data-cdz-uso-flecha-trazo d=\"M50 74l-6-13\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <img decoding=\"async\" src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/09\/Sobre.png\"\r\n             alt=\"Sobre de CDZ Vit de 3 gramos\" loading=\"lazy\">\r\n      <\/div>\r\n\r\n      <div class=\"cdz-uso-escena cdz-uso-anim\" data-cdz-uso-item>\r\n        <svg class=\"cdz-uso-circulo\" viewBox=\"0 0 600 600\" fill=\"none\"\r\n             xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n          <path d=\"M300 22C452 22 578 150 578 302C578 452 452 578 300 578C148 578 22 452 22 302C22 150 148 22 300 22Z\"\/>\r\n        <\/svg>\r\n\r\n        <div class=\"cdz-uso-slider\">\r\n          <div class=\"cdz-uso-track\" data-cdz-uso-track>\r\n            <div class=\"cdz-uso-slide\">\r\n              <video data-cdz-uso-video\r\n                     src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/CDZ-VIERTE.mp4\"\r\n                     muted loop playsinline preload=\"metadata\"\r\n                     disablepictureinpicture aria-label=\"Vierte el sobre en un vaso con agua\"><\/video>\r\n            <\/div>\r\n            <div class=\"cdz-uso-slide\">\r\n              <video data-cdz-uso-video\r\n                     src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/CDZ-MEZCLA.mp4\"\r\n                     muted loop playsinline preload=\"metadata\"\r\n                     disablepictureinpicture aria-label=\"Mezcla hasta disolver por completo\"><\/video>\r\n            <\/div>\r\n            <div class=\"cdz-uso-slide\">\r\n              <video data-cdz-uso-video\r\n                     src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/CDZ-TOMA.mp4\"\r\n                     muted loop playsinline preload=\"metadata\"\r\n                     disablepictureinpicture aria-label=\"Toma tu CDZ Vit\"><\/video>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cdz-uso-info cdz-uso-anim\" data-cdz-uso-item>\r\n        <div class=\"cdz-uso-info-item\" data-cdz-uso-info data-activo>\r\n          <div class=\"cdz-uso-paso-cab\">\r\n            <p class=\"cdz-uso-paso-sub\">Paso 1 de 3<\/p>\r\n            <h3 class=\"cdz-uso-paso-titulo\">Vierte<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"cdz-uso-info-item\" data-cdz-uso-info>\r\n          <div class=\"cdz-uso-paso-cab\">\r\n            <p class=\"cdz-uso-paso-sub\">Paso 2 de 3<\/p>\r\n            <h3 class=\"cdz-uso-paso-titulo\">Mezcla<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"cdz-uso-info-item\" data-cdz-uso-info>\r\n          <div class=\"cdz-uso-paso-cab\">\r\n            <p class=\"cdz-uso-paso-sub\">Paso 3 de 3<\/p>\r\n            <h3 class=\"cdz-uso-paso-titulo\">Toma<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cdz-uso-nav cdz-uso-anim\" data-cdz-uso-item>\r\n        <button type=\"button\" class=\"cdz-uso-flecha\" data-cdz-uso-prev aria-label=\"Paso anterior\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"\r\n               stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n            <path d=\"M14.58 7.2L9.78 12l4.8 4.8\"\/>\r\n          <\/svg>\r\n        <\/button>\r\n        <button type=\"button\" class=\"cdz-uso-flecha\" data-cdz-uso-next aria-label=\"Paso siguiente\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"\r\n               stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n            <path d=\"M9.42 7.2L14.22 12l-4.8 4.8\"\/>\r\n          <\/svg>\r\n        <\/button>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  function arranca(){\r\n    if(!window.gsap || !window.ScrollTrigger){ return setTimeout(arranca, 60); }\r\n    gsap.registerPlugin(ScrollTrigger);\r\n\r\n    var seccion = document.querySelector('[data-cdz-uso]');\r\n    if(!seccion) return;\r\n    seccion.setAttribute('data-cdz-uso-listo', '');\r\n\r\n    var track  = seccion.querySelector('[data-cdz-uso-track]');\r\n    var videos = [].slice.call(seccion.querySelectorAll('[data-cdz-uso-video]'));\r\n    var infos  = [].slice.call(seccion.querySelectorAll('[data-cdz-uso-info]'));\r\n    var total  = videos.length;\r\n    var activo = 0, auto = null, visible = false, tomado = false;\r\n\r\n    \/* --- Entrada escalonada -------------------------------------------\r\n       Mismo sine.out que las tarjetas de la secci\u00f3n 4 y el texto de la\r\n       5, para que las tres se sientan de la misma familia. *\/\r\n    gsap.fromTo('[data-cdz-uso-item]',\r\n      {opacity:0, y:'2em'},\r\n      {opacity:1, y:'0em', duration:.65, ease:'sine.out', stagger:.07,\r\n       scrollTrigger:{ trigger: seccion, start:'top 75%', once:true }});\r\n\r\n    \/* --- El manuscrito se escribe letra por letra ----------------------\r\n       Misma animaci\u00f3n que los manuscritos de la secci\u00f3n 4: SplitText\r\n       parte la frase en caracteres sueltos y se encienden uno tras otro\r\n       con un desfase m\u00ednimo, que es lo que da la sensaci\u00f3n de trazo a\r\n       mano. El bloque entero, adem\u00e1s, sube con la entrada general.\r\n\r\n       Va dentro de un if: SplitText lo carga la secci\u00f3n 1, y si por lo\r\n       que sea no estuviera, el texto se queda visible y solo se pierde\r\n       el efecto \u2014 nunca desaparece. *\/\r\n    if(window.SplitText){\r\n      var trazoFirma = seccion.querySelector('[data-cdz-uso-firma-stroke]');\r\n      if(trazoFirma){\r\n        var letras = new SplitText(trazoFirma, {type:'chars'}).chars;\r\n        gsap.set(letras, {opacity:0});\r\n        gsap.to(letras, {\r\n          opacity:1, duration:.5, stagger:.045, ease:'none',\r\n          \/* El disparador es EL PROPIO MANUSCRITO, no la secci\u00f3n. Con la\r\n             secci\u00f3n como referencia, la animaci\u00f3n se lanzaba cuando su\r\n             borde superior llegaba al 72% de la pantalla \u2014 pero el\r\n             manuscrito est\u00e1 bastante m\u00e1s abajo, as\u00ed que para cuando uno\r\n             lo ten\u00eda a la vista ya hab\u00eda terminado. Apuntando al\r\n             elemento, arranca justo cuando asoma.\r\n\r\n             El stagger subi\u00f3 de .026 a .045 por segundo y la duraci\u00f3n de\r\n             cada letra de .35 a .5: la frase completa pasa de tardar\r\n             medio segundo a m\u00e1s de un segundo. *\/\r\n          scrollTrigger:{ trigger: trazoFirma, start:'top 92%', once:true }\r\n        });\r\n      }\r\n    }\r\n\r\n    \/* --- La flecha se dibuja sola --------------------------------------\r\n       drawSVG revela el trazo a lo largo de su recorrido, en vez de\r\n       hacerlo aparecer de golpe.\r\n\r\n       La flecha son tres trazos \u2014la curva y las dos barbas de la punta\u2014\r\n       y van escalonados, para que la punta se cierre al final como si\r\n       se hubiera dibujado de un tir\u00f3n.\r\n\r\n       Todo dentro del if del plugin: si DrawSVG no estuviera cargado, el\r\n       estado inicial nunca se aplica y la flecha se ve completa desde el\r\n       principio, en vez de quedar invisible para siempre. *\/\r\n    if(window.DrawSVGPlugin){\r\n      gsap.registerPlugin(DrawSVGPlugin);\r\n\r\n      var flechas = seccion.querySelectorAll('[data-cdz-uso-flecha-trazo]');\r\n      if(flechas.length){\r\n        gsap.set(flechas, {drawSVG:'0% 0%'});\r\n        gsap.to(flechas, {\r\n          drawSVG:'0% 100%', duration:.6, stagger:.14, ease:'power2.out',\r\n          \/* Se dispara con el manuscrito, no con la secci\u00f3n, y con un\r\n             peque\u00f1o retraso para que la flecha salga despu\u00e9s del texto:\r\n             primero se escribe la frase y despu\u00e9s se traza la flecha que\r\n             se\u00f1ala. *\/\r\n          delay:.5,\r\n          scrollTrigger:{ trigger: seccion.querySelector('[data-cdz-uso-firma-stroke]'),\r\n                          start:'top 92%', once:true }\r\n        });\r\n      }\r\n\r\n    }\r\n\r\n    \/* --- Slider --------------------------------------------------------\r\n       Solo el video activo se reproduce; los otros se pausan y se\r\n       rebobinan. Adem\u00e1s de ahorrar CPU y datos, as\u00ed el paso siempre\r\n       empieza desde el principio cuando uno llega a \u00e9l, en vez de\r\n       aparecer a mitad de la acci\u00f3n. *\/\r\n    function pinta(){\r\n      track.style.transform = 'translateX(' + (-100 * activo) + '%)';\r\n\r\n      infos.forEach(function(el, i){\r\n        if(i === activo) el.setAttribute('data-activo', '');\r\n        else el.removeAttribute('data-activo');\r\n      });\r\n\r\n      videos.forEach(function(v, i){\r\n        if(i === activo && visible){\r\n          var r = v.play();\r\n          \/* El navegador puede rechazar la reproducci\u00f3n por su pol\u00edtica\r\n             de autoplay; si pasa, el video se queda en su primer\r\n             fotograma y el slider sigue funcionando igual. *\/\r\n          if(r && r.catch) r.catch(function(){});\r\n        }else{\r\n          v.pause();\r\n          if(i !== activo) v.currentTime = 0;\r\n        }\r\n      });\r\n    }\r\n\r\n    function ir(n){ activo = (n + total) % total; pinta(); }\r\n\r\n    seccion.querySelector('[data-cdz-uso-prev]').addEventListener('click', function(){\r\n      tomado = true; paraAuto(); ir(activo - 1);\r\n    });\r\n    seccion.querySelector('[data-cdz-uso-next]').addEventListener('click', function(){\r\n      tomado = true; paraAuto(); ir(activo + 1);\r\n    });\r\n\r\n    \/* --- Avance autom\u00e1tico ---------------------------------------------\r\n       Los tres pasos son una secuencia, as\u00ed que tiene sentido que\r\n       avancen solos: quien no toque nada igual ve el proceso completo.\r\n\r\n       \"tomado\" lo apaga definitivamente en cuanto el usuario usa una\r\n       flecha. Un avance que sigue corriendo despu\u00e9s de que alguien tom\u00f3\r\n       el control es de las cosas m\u00e1s molestas de un slider: uno vuelve\r\n       atr\u00e1s y la m\u00e1quina lo lleva adelante otra vez. *\/\r\n    \/* EL AVANCE VA POR TIEMPO, no por el video. Se prob\u00f3 contando las\r\n       vueltas de cada clip \u2014avanzar tras tres repeticiones\u2014 y se volvi\u00f3\r\n       a esto: con el conteo, cada paso duraba lo que durase su video por\r\n       tres, y los tres clips no miden lo mismo, as\u00ed que el ritmo sal\u00eda\r\n       irregular.\r\n\r\n       Con el temporizador los tres pasos duran exactamente igual, que es\r\n       lo que hace que se lean como una secuencia de tres tiempos.\r\n\r\n       El precio: si un clip dura m\u00e1s de estos 3 segundos, se corta a\r\n       medias y vuelve a empezar en el paso siguiente. Vale la pena\r\n       comprobar cu\u00e1nto miden los tres archivos \u2014 si alguno pasa de 3s,\r\n       este n\u00famero se le queda corto. *\/\r\n    function arrancaAuto(){\r\n      if(auto || tomado) return;\r\n      auto = setInterval(function(){ ir(activo + 1); }, 3000);\r\n    }\r\n    function paraAuto(){ if(auto){ clearInterval(auto); auto = null; } }\r\n\r\n    \/* --- Todo se pausa fuera de pantalla -------------------------------\r\n       Sin esto el video corre y el temporizador avanza aunque la secci\u00f3n\r\n       est\u00e9 a tres pantallas de distancia. *\/\r\n    if('IntersectionObserver' in window){\r\n      new IntersectionObserver(function(entradas){\r\n        entradas.forEach(function(e){\r\n          visible = e.isIntersecting;\r\n          if(visible){ pinta(); arrancaAuto(); }\r\n          else{ videos.forEach(function(v){ v.pause(); }); paraAuto(); }\r\n        });\r\n      }, { threshold: .25 }).observe(seccion);\r\n    }else{\r\n      visible = true; arrancaAuto();\r\n    }\r\n\r\n    pinta();\r\n  }\r\n\r\n  if(document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', arranca); }\r\n  else{ arranca(); }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4b83a19 elementor-widget elementor-widget-html\" data-id=\"4b83a19\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"comprar\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     CDZ VIT \u00b7 SECCI\u00d3N 7 \u2014 \u00bfD\u00d3NDE COMPRARLO?\r\n     Titular grande a dos tonos, dos manuscritos en esquinas opuestas y,\r\n     por debajo, una cinta blanca ondulada que cruza de lado a lado con\r\n     los logos recorri\u00e9ndola en bucle.\r\n\r\n     La cinta es un trazo SVG grueso. Los logos NO est\u00e1n dentro del SVG:\r\n     van en una capa aparte, colocados con JavaScript sobre la curva\r\n     usando getPointAtLength. Es la \u00fanica forma de que sigan la\r\n     ondulaci\u00f3n \u2014subiendo, bajando e inclin\u00e1ndose con la pendiente\u2014 en\r\n     vez de desplazarse en l\u00ednea recta por encima de un fondo curvo.\r\n\r\n     Widget HTML propio. NO vuelve a cargar GSAP ni ScrollTrigger.\r\n     ============================================================ -->\r\n\r\n<style>\r\n.cdz-compra{\r\n  --cdz-unit: 16;\r\n  --cdz-ideal: 1440;\r\n  --cdz-min: 992px;\r\n  --cdz-max: 2560px;\r\n  --cdz-cont: clamp(var(--cdz-min), 100vw, var(--cdz-max));\r\n\r\n  --cdz-oscuro: #0A3C75;\r\n  --cdz-marca:  #007AFF;\r\n  --cdz-acento: #F4701F;\r\n  --cdz-palido: #EAF2FE;\r\n\r\n  font-size: calc(var(--cdz-cont) \/ (var(--cdz-ideal) \/ var(--cdz-unit)));\r\n  font-family: 'Archivo', Arial, sans-serif;\r\n  font-variation-settings: 'wdth' 78;\r\n  font-weight: 400;\r\n  letter-spacing: -.03em;\r\n  color: var(--cdz-oscuro);\r\n  background: #A7C9F9;\r\n  position: relative;\r\n  \/* clip y no hidden: la cinta y sus logos se salen por los lados a\r\n     prop\u00f3sito, pero un overflow oculto en los dos ejes romper\u00eda el\r\n     position:sticky de la secci\u00f3n 4. clip solo corta en horizontal. *\/\r\n  overflow-x: clip;\r\n}\r\n@media (max-width:991px){ .cdz-compra{ --cdz-ideal:640; --cdz-min:768px; --cdz-max:991px; } }\r\n@media (max-width:767px){ .cdz-compra{ --cdz-ideal:550; --cdz-min:480px; --cdz-max:767px; } }\r\n@media (max-width:479px){ .cdz-compra{ --cdz-ideal:390; --cdz-min:320px; --cdz-max:479px; } }\r\n\r\n.cdz-compra *,.cdz-compra *::before,.cdz-compra *::after{ box-sizing:border-box; }\r\n\/* Reset de m\u00e1rgenes. Vale 0-1-1, as\u00ed que las reglas que dan margen se\r\n   escriben como \".cdz-compra .clase\" (0-2-0) o el margin:0 gana. *\/\r\n.cdz-compra h2{ margin:0; font-weight:600; }\r\n.cdz-compra p{ margin:0; }\r\n.cdz-compra a{ text-decoration:none; color:inherit; }\r\n\r\n.cdz-compra-container{\r\n  max-width:var(--cdz-cont); margin-inline:auto;\r\n  padding:5em 1.5em 3em;\r\n  position:relative;\r\n}\r\n@media (max-width:991px){ .cdz-compra-container{ padding:3.4em 1em 2.4em; } }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   VOLVER AL INICIO\r\n   Antes no hab\u00eda forma de regresar al hero despu\u00e9s de llegar ac\u00e1 desde\r\n   el bot\u00f3n \"\u00bfD\u00f3nde comprarlo?\" \u2014 apunta al ancla id=\"cdz-inicio\" que se\r\n   agreg\u00f3 en el archivo del hero (cdz-secciones-1y2). Esquina opuesta a\r\n   la firma \"En las principales cadenas\", para no pisarla.\r\n\r\n   Antes era solo texto con una flecha, a media opacidad: pasaba\r\n   desapercibido. Ahora es un bot\u00f3n real \u2014 p\u00edldora blanca s\u00f3lida, con\r\n   sombra, del mismo lenguaje visual que .cdz-boton en el resto del\r\n   sitio, para que se lea claramente como algo clickeable. *\/\r\n.cdz-compra-volver{\r\n  position:absolute; z-index:3; top:3.5em; right:7%;\r\n  display:inline-flex; align-items:center; gap:.5em;\r\n  padding:.6em 1.1em .65em;\r\n  border-radius:99em;\r\n  background:#FFFFFF;\r\n  box-shadow:0 .4em 1.2em rgba(10,60,117,.18);\r\n  font-size:1.05em; font-weight:600;\r\n  color:var(--cdz-oscuro);\r\n  \/* !important: la regla general \".cdz-compra a{text-decoration:none}\"\r\n     no bastaba \u2014 el tema de WordPress o Elementor debe estar cargando\r\n     su propio subrayado de enlaces por encima. Mismo problema que ya\r\n     ten\u00eda .cdz-boton-txt en otras secciones, resuelto de la misma\r\n     manera. *\/\r\n  text-decoration:none !important;\r\n  transition:transform .2s ease, box-shadow .2s ease;\r\n}\r\n.cdz-compra-volver:hover{\r\n  transform:translateY(-.15em);\r\n  box-shadow:0 .6em 1.6em rgba(10,60,117,.24);\r\n}\r\n.cdz-compra-volver svg{ width:.85em; height:.85em; transform:rotate(90deg); flex:none; }\r\n@media (max-width:991px){ .cdz-compra-volver{ position:static; display:flex; width:max-content; margin-inline:auto; margin-bottom:1.5em; } }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   TITULAR\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-compra-cabecera{ text-align:center; position:relative; z-index:2; }\r\n.cdz-compra .cdz-compra-titulo{\r\n  font-size:5.2em; line-height:.94;\r\n  color:var(--cdz-oscuro);\r\n}\r\n.cdz-compra-titulo .claro{ color:var(--cdz-marca); }\r\n@media (max-width:767px){ .cdz-compra .cdz-compra-titulo{ font-size:3em; } }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   LA CINTA\r\n   --------------------------------------------------------------------- *\/\r\n\/* El alto va atado al ancho a prop\u00f3sito: 26.25em son exactamente\r\n   420\/1600 del ancho de referencia, la misma proporci\u00f3n del viewBox.\r\n   Como la em base es el ancho de pantalla dividido 90, la relaci\u00f3n se\r\n   mantiene sola a cualquier tama\u00f1o y el SVG nunca queda recortado ni\r\n   con franjas vac\u00edas. *\/\r\n.cdz-compra-onda{\r\n  position:relative;\r\n  \/* A sangre completa: 100vw con un margen que compensa el padding del\r\n     contenedor. La cinta tiene que tocar los dos bordes de la pantalla;\r\n     si se quedara dentro del contenedor, se cortar\u00eda 1.5em antes y se\r\n     ver\u00eda como una pieza suelta en vez de algo que cruza. *\/\r\n  width:100vw; margin-left:calc(50% - 50vw);\r\n  height:23.6em;\r\n  margin-top:-4.5em;\r\n  \/* Recorta lo que sube por encima: en los extremos la curva se sale\r\n     del viewBox por arriba, igual que en la referencia. *\/\r\n  overflow:hidden;\r\n}\r\n@media (max-width:767px){ .cdz-compra-onda{ height:18.5em; margin-top:0; } }\r\n\r\n.cdz-compra-onda svg{\r\n  position:absolute; inset:0;\r\n  width:100%; height:100%;\r\n  display:block; overflow:visible;\r\n}\r\n.cdz-compra-onda path{\r\n  fill:none; stroke:#FFFFFF;\r\n  \/* 178 unidades del viewBox. El n\u00famero sale de una cuenta, no del ojo:\r\n     con los logos horizontales, sus extremos se separan del eje de la\r\n     curva tanto como la pendiente los aleje. La pendiente m\u00e1xima de\r\n     este trazo es 0.283 (15.8\u00b0), y un logo de 11.6 \u00d7 5.7em mide 206 \u00d7\r\n     101 unidades del viewBox, as\u00ed que su esquina m\u00e1s lejana queda a\r\n     (206\/2)\u00d70.283 + 101\/2 = 80 unidades del eje.\r\n\r\n     La banda ofrece (grosor\/2) \u00d7 \u221a(1+pendiente\u00b2) de semialtura\r\n     vertical. Con 148 daba 77 \u2014se sal\u00eda por poco\u2014 y con 178 da 88, que\r\n     deja margen. Como el SVG escala uniformemente, el grosor crece\r\n     igual a lo ancho que a lo alto y la banda no se deforma. *\/\r\n  stroke-width:178;\r\n  stroke-linecap:butt;\r\n}\r\n\r\n\/* Los logos van en su propia capa, por encima del trazo. pointer-events\r\n   se apaga en la capa y se enciende en cada logo: as\u00ed el hueco entre\r\n   ellos no intercepta clics ni bloquea el hover de la secci\u00f3n. *\/\r\n.cdz-compra-logos{\r\n  position:absolute; inset:0;\r\n  pointer-events:none;\r\n}\r\n.cdz-compra-logo{\r\n  position:absolute; top:0; left:0;\r\n  pointer-events:auto;\r\n  display:flex; align-items:center; justify-content:center;\r\n  \/* 12.8 \u00d7 6.3em es pr\u00e1cticamente el m\u00e1ximo que cabe. Con la cuenta del\r\n     grosor: la banda ofrece 92.5 unidades de semialtura vertical, y un\r\n     logo de este tama\u00f1o necesita 88.3. A partir de 13.6em ya se sale por\r\n     las esquinas en los tramos m\u00e1s inclinados. Si se quisiera m\u00e1s\r\n     grande, primero hay que engrosar la banda. *\/\r\n  width:12.8em; height:6.3em;\r\n  \/* La posici\u00f3n la escribe el JS en el transform, no ac\u00e1. El\r\n     will-change avisa al navegador de que este elemento va a cambiar de\r\n     transform en cada fotograma y lo promueve a su propia capa. *\/\r\n  will-change:transform;\r\n  transition:filter .25s ease;\r\n}\r\n.cdz-compra-logo img{\r\n  max-width:100%; max-height:100%;\r\n  object-fit:contain; display:block;\r\n  user-select:none; -webkit-user-drag:none;\r\n}\r\n.cdz-compra-logo:hover img{ filter:saturate(1.15); }\r\n\r\n@media (max-width:767px){ .cdz-compra-logo{ width:9em; height:4.4em; } }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   MANUSCRITOS \u00b7 en esquinas opuestas, como en la referencia\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-compra-firma{\r\n  position:absolute; z-index:3;\r\n  display:flex; flex-direction:column; align-items:center;\r\n  width:max-content;\r\n  color:var(--cdz-oscuro);\r\n  pointer-events:none;\r\n}\r\n.cdz-compra-firma.arriba{ top:3.5em;   left:7%;  }\r\n.cdz-compra-firma.abajo { bottom:1.5em; right:7%; }\r\n.cdz-compra-firma-texto{\r\n  font-family:'Caveat', cursive;\r\n  font-variation-settings: normal;\r\n  font-weight:600;\r\n  font-size:1.9em; line-height:112%;\r\n  text-align:center;\r\n}\r\n.cdz-compra-firma.arriba .cdz-compra-firma-texto{ transform:rotate(-3deg); }\r\n.cdz-compra-firma.abajo  .cdz-compra-firma-texto{ transform:rotate(2deg);  }\r\n@media (max-width:991px){ .cdz-compra-firma{ display:none; } }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   ESTADOS INICIALES sin JavaScript\r\n   Los logos arrancan invisibles porque hasta que el JS no los coloca\r\n   est\u00e1n todos amontonados en la esquina superior izquierda.\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-compra[data-cdz-compra-listo] .cdz-compra-anim{ opacity:0; }\r\n.cdz-compra-logo{ opacity:0; transition:opacity .5s ease, filter .25s ease; }\r\n.cdz-compra-logo[data-colocado]{ opacity:1; }\r\n<\/style>\r\n\r\n<section class=\"cdz-compra\" id=\"donde-comprarlo\" data-cdz-compra>\r\n  <div class=\"cdz-compra-container\">\r\n\r\n    <!-- Ahora hay DOS lugares desde donde se puede llegar ac\u00e1: el bot\u00f3n\r\n         del hero y el de la secci\u00f3n 3 (reels) \u2014 cada uno con su propio\r\n         \"\u00bfD\u00f3nde comprarlo?\". Un destino fijo (siempre al hero) no\r\n         devuelve a quien vino desde la secci\u00f3n 3 a donde estaba.\r\n\r\n         Antes esto usaba history.back(), pero no es confiable: si el\r\n         sitio tiene alg\u00fan script de scroll suave (com\u00fan en WordPress\/\r\n         Elementor) que intercepta el clic en el ancla y mueve el scroll\r\n         a mano, nunca se crea la entrada de historial que history.back()\r\n         necesita, y el bot\u00f3n termina sin hacer nada \u00fatil \u2014 justo lo que\r\n         pas\u00f3.\r\n\r\n         Ahora es expl\u00edcito: cada bot\u00f3n de \"\u00bfD\u00f3nde comprarlo?\" guarda su\r\n         propio origen en sessionStorage ANTES de navegar ('inicio' en\r\n         el hero, 'reels' en la secci\u00f3n 3). Este bot\u00f3n lee ese valor al\r\n         hacer clic y decide su destino \u00e9l mismo, sin depender de nada\r\n         del navegador. Si no hay nada guardado (por ejemplo, alguien\r\n         entra directo a esta URL), cae al ancla del hero por defecto. -->\r\n    <a href=\"#cdz-inicio\" class=\"cdz-compra-volver cdz-compra-anim\" data-cdz-compra-item\r\n       onclick=\"var o=null; try{o=sessionStorage.getItem('cdz-origen')}catch(e){}\r\n                var destino = (o==='reels') ? '#cdz-reels' : '#cdz-inicio';\r\n                window.location.hash = destino; return false;\">\r\n      <svg viewBox=\"0 0 10 10\" fill=\"currentColor\" aria-hidden=\"true\">\r\n        <path fill-rule=\"evenodd\" d=\"M0 1.827 1.71 0H10v8.22L8.11 10V5.93c0-.992.009-1.89.03-2.695l-6.642 6.58-1.316-1.44 6.641-6.58c-.787.022-1.67.032-2.647.032H0Z\" clip-rule=\"evenodd\"\/>\r\n      <\/svg>\r\n      Volver atr\u00e1s\r\n    <\/a>\r\n\r\n    <div class=\"cdz-compra-firma arriba cdz-compra-anim\" data-cdz-compra-item>\r\n      <span class=\"cdz-compra-firma-texto\">En las principales<br>cadenas<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"cdz-compra-cabecera\">\r\n      <h2 class=\"cdz-compra-titulo cdz-compra-anim\" data-cdz-compra-item>\r\n        \u00bfD\u00f3nde<br><span class=\"claro\">comprarlo?<\/span>\r\n      <\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"cdz-compra-onda\" data-cdz-onda>\r\n      <!-- La curva sale de medir la referencia. Los centros de sus\r\n           c\u00edrculos dibujan una par\u00e1bola sim\u00e9trica: bajan desde los dos\r\n           bordes hasta el punto m\u00e1s hondo en el centro y vuelven a\r\n           subir. Medido sobre su captura de 1910px de ancho:\r\n\r\n             x   140  345  650  955  1258  1565  1855\r\n             y   156  263  356  436   356   263   156\r\n\r\n           El detalle que hay que respetar es el RITMO de la ca\u00edda. Los\r\n           saltos entre c\u00edrculo y c\u00edrculo, yendo del borde al centro, son\r\n           107, 93 y 80 p\u00edxeles: la curva baja fuerte en los extremos y\r\n           se va aplanando hacia el fondo. Una U de fondo plano \u2014que fue\r\n           mi primer intento\u2014 hace exactamente lo contrario.\r\n\r\n           Por eso los puntos de control van en (260,130) y (1340,130):\r\n           tiran de la curva hacia abajo enseguida, cerca de los bordes,\r\n           y la dejan llegar mansa al punto m\u00e1s hondo (x=800, la mitad\r\n           exacta).\r\n\r\n           La cinta sale por los LADOS, no por arriba: en los bordes de\r\n           pantalla el eje queda dentro del viewBox y la banda llega\r\n           entera hasta el filo, donde se corta contra el borde vertical.\r\n           Si los extremos treparan por encima del techo, el contenedor\r\n           los cortar\u00eda en recto y se ver\u00edan las esquinas tijereteadas.\r\n\r\n           La ca\u00edda total es de 190 unidades (de 105 en los bordes a 295\r\n           en el fondo). Con 270 la curva se sent\u00eda demasiado pronunciada.\r\n           Al achatarla sobraba espacio abajo, as\u00ed que el viewBox baj\u00f3 de\r\n           440 a 380 de alto y el contenedor de 24.75 a 21.4em \u2014 los dos\r\n           tienen que moverse juntos o la proporci\u00f3n se rompe y el SVG\r\n           empieza a recortar.\r\n\r\n           El path arranca en x=-320 y termina en x=1920, bastante m\u00e1s\r\n           all\u00e1 de los bordes del viewBox (0 a 1600). Ese sobrante es lo\r\n           que hace que el bucle no se note: los logos aparecen y\r\n           desaparecen fuera de cuadro, nunca en mitad de la pantalla. -->\r\n      <svg viewBox=\"0 0 1600 420\" preserveAspectRatio=\"xMidYMid slice\"\r\n           xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n        <path data-cdz-onda-trazo\r\n              d=\"M-300 110 C 180 110, 430 300, 800 300 C 1170 300, 1420 110, 1900 110\"\/>\r\n      <\/svg>\r\n\r\n      <div class=\"cdz-compra-logos\" data-cdz-onda-logos>\r\n        <!-- Las marcas van DUPLICADAS. Con una sola tanda de cuatro, el\r\n             espacio entre logo y logo ser\u00eda tan grande que la cinta se\r\n             ver\u00eda vac\u00eda casi siempre; con dos tandas el recorrido queda\r\n             poblado de punta a punta y el bucle es continuo. -->\r\n        <a class=\"cdz-compra-logo\" data-cdz-onda-logo\r\n           href=\"https:\/\/www.farmatodo.com.co\/buscar?product=cdz&departamento=Todos&filtros=\"\r\n           target=\"_blank\" rel=\"noopener\" aria-label=\"Comprar CDZ Vit en Farmatodo\">\r\n          <img decoding=\"async\" src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/06\/LOGOS-MARCAS-02.webp\" alt=\"Farmatodo\" loading=\"lazy\">\r\n        <\/a>\r\n        <a class=\"cdz-compra-logo\" data-cdz-onda-logo\r\n           href=\"https:\/\/www.droguerialaeconomia.com\/search?name=cdz\"\r\n           target=\"_blank\" rel=\"noopener\" aria-label=\"Comprar CDZ Vit en Droguer\u00eda La Econom\u00eda\">\r\n          <img decoding=\"async\" src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/06\/LOGOS-MARCAS-07.webp\" alt=\"Droguer\u00eda La Econom\u00eda\" loading=\"lazy\">\r\n        <\/a>\r\n        <a class=\"cdz-compra-logo\" data-cdz-onda-logo\r\n           href=\"https:\/\/www.larebajavirtual.com\/cdz?_q=cdz&map=ft\"\r\n           target=\"_blank\" rel=\"noopener\" aria-label=\"Comprar CDZ Vit en La Rebaja Virtual\">\r\n          <img decoding=\"async\" src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/06\/LOGOS-MARCAS-03.webp\" alt=\"La Rebaja\" loading=\"lazy\">\r\n        <\/a>\r\n        <a class=\"cdz-compra-logo\" data-cdz-onda-logo\r\n           href=\"https:\/\/www.drogueriascolsubsidio.com\/cdz?_q=cdz&map=ft\"\r\n           target=\"_blank\" rel=\"noopener\" aria-label=\"Comprar CDZ Vit en Droguer\u00edas Colsubsidio\">\r\n          <img decoding=\"async\" src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/06\/LOGOS-MARCAS-06.webp\" alt=\"Droguer\u00edas Colsubsidio\" loading=\"lazy\">\r\n        <\/a>\r\n\r\n        <a class=\"cdz-compra-logo\" data-cdz-onda-logo aria-hidden=\"true\" tabindex=\"-1\"\r\n           href=\"https:\/\/www.farmatodo.com.co\/buscar?product=cdz&departamento=Todos&filtros=\"\r\n           target=\"_blank\" rel=\"noopener\">\r\n          <img decoding=\"async\" src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/06\/LOGOS-MARCAS-02.webp\" alt=\"\" loading=\"lazy\">\r\n        <\/a>\r\n        <a class=\"cdz-compra-logo\" data-cdz-onda-logo aria-hidden=\"true\" tabindex=\"-1\"\r\n           href=\"https:\/\/www.droguerialaeconomia.com\/search?name=cdz\"\r\n           target=\"_blank\" rel=\"noopener\">\r\n          <img decoding=\"async\" src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/06\/LOGOS-MARCAS-07.webp\" alt=\"\" loading=\"lazy\">\r\n        <\/a>\r\n        <a class=\"cdz-compra-logo\" data-cdz-onda-logo aria-hidden=\"true\" tabindex=\"-1\"\r\n           href=\"https:\/\/www.larebajavirtual.com\/cdz?_q=cdz&map=ft\"\r\n           target=\"_blank\" rel=\"noopener\">\r\n          <img decoding=\"async\" src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/06\/LOGOS-MARCAS-03.webp\" alt=\"\" loading=\"lazy\">\r\n        <\/a>\r\n        <a class=\"cdz-compra-logo\" data-cdz-onda-logo aria-hidden=\"true\" tabindex=\"-1\"\r\n           href=\"https:\/\/www.drogueriascolsubsidio.com\/cdz?_q=cdz&map=ft\"\r\n           target=\"_blank\" rel=\"noopener\">\r\n          <img decoding=\"async\" src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/06\/LOGOS-MARCAS-06.webp\" alt=\"\" loading=\"lazy\">\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"cdz-compra-firma abajo cdz-compra-anim\" data-cdz-compra-item>\r\n      <span class=\"cdz-compra-firma-texto\">B\u00fascalo como<br>CDZ Vit<\/span>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  function arranca(){\r\n    if(!window.gsap || !window.ScrollTrigger){ return setTimeout(arranca, 60); }\r\n    gsap.registerPlugin(ScrollTrigger);\r\n\r\n    var seccion = document.querySelector('[data-cdz-compra]');\r\n    if(!seccion) return;\r\n    seccion.setAttribute('data-cdz-compra-listo', '');\r\n\r\n    gsap.fromTo('[data-cdz-compra-item]',\r\n      {opacity:0, y:'2em'},\r\n      {opacity:1, y:'0em', duration:.65, ease:'sine.out', stagger:.07,\r\n       scrollTrigger:{ trigger: seccion, start:'top 75%', once:true }});\r\n\r\n    var onda  = seccion.querySelector('[data-cdz-onda]');\r\n    var trazo = seccion.querySelector('[data-cdz-onda-trazo]');\r\n    var logos = [].slice.call(seccion.querySelectorAll('[data-cdz-onda-logo]'));\r\n    if(!onda || !trazo || !logos.length) return;\r\n\r\n    var largo = 0;        \/* largo del path, en unidades del viewBox *\/\r\n    var escala = 1, dx = 0, dy = 0;\r\n    var avance = 0;       \/* cu\u00e1nto lleva recorrido el carrusel *\/\r\n    var paso = 0;         \/* separaci\u00f3n entre logo y logo *\/\r\n\r\n    \/* Unidades del viewBox por segundo. El recorrido completo mide unas\r\n       2400 unidades, as\u00ed que a 34 un logo tarda cerca de 70 segundos en\r\n       darle la vuelta entera. Es el \u00fanico n\u00famero que hay que tocar para\r\n       cambiar el ritmo del carrusel. *\/\r\n    var VELOCIDAD = 34;\r\n\r\n    \/* --- Correspondencia entre el viewBox y la pantalla ----------------\r\n       getScreenCTM devuelve la matriz que el navegador aplica al SVG,\r\n       sea cual sea el preserveAspectRatio. Se resuelve una sola vez y se\r\n       guardan escala y desplazamiento, en vez de consultarla en cada\r\n       fotograma: es una llamada cara y el resultado no cambia mientras\r\n       no cambie el tama\u00f1o de la ventana.\r\n\r\n       La resta de getBoundingClientRect convierte coordenadas de\r\n       pantalla en coordenadas relativas al contenedor. Ambas incluyen el\r\n       scroll de la p\u00e1gina, as\u00ed que la diferencia entre las dos es\r\n       constante y sirve aunque el usuario siga desplaz\u00e1ndose. *\/\r\n    function mide(){\r\n      var ctm = trazo.getScreenCTM();\r\n      if(!ctm) return false;\r\n      var caja = onda.getBoundingClientRect();\r\n      escala = ctm.a;\r\n      dx = ctm.e - caja.left;\r\n      dy = ctm.f - caja.top;\r\n      largo = trazo.getTotalLength();\r\n      paso = largo \/ logos.length;\r\n      return largo > 0;\r\n    }\r\n\r\n    \/* --- Colocar un logo en su punto del recorrido ---------------------\r\n       El logo va SIEMPRE horizontal: sigue la curva subiendo y bajando,\r\n       pero no se inclina con ella. Antes se calculaba el \u00e1ngulo de la\r\n       tangente y se rotaba; ahora solo se traslada.\r\n\r\n       El translate(-50%,-50%) va despu\u00e9s del posicionamiento para que\r\n       el punto de la curva quede en el centro del logo y no en su\r\n       esquina superior izquierda. *\/\r\n    function coloca(el, distancia){\r\n      var p = trazo.getPointAtLength(distancia);\r\n      var x = p.x * escala + dx;\r\n      var y = p.y * escala + dy;\r\n      el.style.transform =\r\n        'translate(' + x + 'px,' + y + 'px) translate(-50%,-50%)';\r\n    }\r\n\r\n    function pinta(){\r\n      for(var i = 0; i < logos.length; i++){\r\n        \/* El m\u00f3dulo es lo que hace infinito el bucle: al pasarse del\r\n           final del recorrido, la distancia vuelve a empezar desde cero\r\n           sin que haya que reordenar ni clonar nada. *\/\r\n        var d = (i * paso + avance) % largo;\r\n        coloca(logos[i], d);\r\n        if(!logos[i].hasAttribute('data-colocado')) logos[i].setAttribute('data-colocado','');\r\n      }\r\n    }\r\n\r\n    var corriendo = false, pausado = false;\r\n    var ultimo = 0;\r\n\r\n    function marco(tiempo){\r\n      if(!corriendo) return;\r\n      var delta = ultimo ? (tiempo - ultimo) \/ 1000 : 0;\r\n      ultimo = tiempo;\r\n      if(!pausado){ avance = (avance + VELOCIDAD * delta) % largo; pinta(); }\r\n      requestAnimationFrame(marco);\r\n    }\r\n\r\n    function enciende(){\r\n      if(corriendo || !mide()) return;\r\n      corriendo = true; ultimo = 0;\r\n      requestAnimationFrame(marco);\r\n    }\r\n    function apaga(){ corriendo = false; }\r\n\r\n    \/* Solo se mueve cuando la secci\u00f3n est\u00e1 a la vista. Sin esto el bucle\r\n       consume un fotograma cada 16ms aunque nadie lo est\u00e9 viendo. *\/\r\n    if('IntersectionObserver' in window){\r\n      new IntersectionObserver(function(entradas){\r\n        entradas.forEach(function(e){ e.isIntersecting ? enciende() : apaga(); });\r\n      }, { threshold: 0 }).observe(seccion);\r\n    }else{\r\n      enciende();\r\n    }\r\n\r\n    \/* Se detiene al pasar el puntero por encima. Son enlaces: si siguen\r\n       movi\u00e9ndose, apuntarles es una loter\u00eda. *\/\r\n    seccion.addEventListener('mouseenter', function(){ pausado = true; });\r\n    seccion.addEventListener('mouseleave', function(){ pausado = false; });\r\n\r\n    \/* Al cambiar el tama\u00f1o de la ventana cambia la escala del SVG y hay\r\n       que rehacer la correspondencia. Con un respiro de 150ms para no\r\n       recalcular en cada p\u00edxel del arrastre. *\/\r\n    var espera;\r\n    window.addEventListener('resize', function(){\r\n      clearTimeout(espera);\r\n      espera = setTimeout(function(){ if(mide()) pinta(); }, 150);\r\n    });\r\n\r\n    \/* Primera colocaci\u00f3n: si el SVG todav\u00eda no tiene medidas \u2014puede\r\n       pasar si la secci\u00f3n arranca oculta\u2014 se reintenta en el pr\u00f3ximo\r\n       fotograma en vez de dejar los logos amontonados en la esquina. *\/\r\n    (function intenta(){\r\n      if(mide()) pinta();\r\n      else requestAnimationFrame(intenta);\r\n    })();\r\n  }\r\n\r\n  if(document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', arranca); }\r\n  else{ arranca(); }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-95ce548 elementor-widget elementor-widget-html\" data-id=\"95ce548\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     CDZ VIT \u00b7 SECCI\u00d3N 8 \u2014 PREGUNTAS FRECUENTES\r\n\r\n     Estructura propia, distinta a la de la secci\u00f3n 5: en vez de dos\r\n     paneles enfrentados, ac\u00e1 el titular va grande y centrado arriba y\r\n     el acorde\u00f3n ocupa TODO el ancho del contenedor, con filas largas\r\n     separadas por l\u00edneas finas. La imagen no vive dentro de un panel:\r\n     es una pieza suelta anclada al borde izquierdo, recortada por \u00e9l,\r\n     como las naranjas del cierre de la secci\u00f3n 4.\r\n\r\n     La imagen del sobre lleva data-cdz-faq-imagen: para cambiarla basta\r\n     con el src, el resto del bloque no se toca.\r\n\r\n     Widget HTML propio. NO vuelve a cargar GSAP ni ScrollTrigger.\r\n     ============================================================ -->\r\n\r\n<style>\r\n.cdz-faq{\r\n  --cdz-unit: 16;\r\n  --cdz-ideal: 1440;\r\n  --cdz-min: 992px;\r\n  --cdz-max: 2560px;\r\n  --cdz-cont: clamp(var(--cdz-min), 100vw, var(--cdz-max));\r\n\r\n  --cdz-oscuro: #0A3C75;\r\n  --cdz-marca:  #007AFF;\r\n  --cdz-acento: #F4701F;\r\n  --cdz-palido: #EAF2FE;\r\n  --cdz-linea:  #C9DAF2;\r\n\r\n  font-size: calc(var(--cdz-cont) \/ (var(--cdz-ideal) \/ var(--cdz-unit)));\r\n  font-family: 'Archivo', Arial, sans-serif;\r\n  font-variation-settings: 'wdth' 78;\r\n  font-weight: 400;\r\n  letter-spacing: -.03em;\r\n  color: var(--cdz-oscuro);\r\n  background: #A7C9F9;\r\n  position: relative;\r\n  overflow-x: clip;\r\n}\r\n@media (max-width:991px){ .cdz-faq{ --cdz-ideal:640; --cdz-min:768px; --cdz-max:991px; } }\r\n@media (max-width:767px){ .cdz-faq{ --cdz-ideal:550; --cdz-min:480px; --cdz-max:767px; } }\r\n@media (max-width:479px){ .cdz-faq{ --cdz-ideal:390; --cdz-min:320px; --cdz-max:479px; } }\r\n\r\n.cdz-faq *,.cdz-faq *::before,.cdz-faq *::after{ box-sizing:border-box; }\r\n\/* Reset de m\u00e1rgenes. Vale 0-1-1, as\u00ed que las reglas que dan margen se\r\n   escriben como \".cdz-faq .clase\" (0-2-0) o el margin:0 gana. *\/\r\n.cdz-faq h2,.cdz-faq h3{ margin:0; font-weight:600; }\r\n.cdz-faq p{ margin:0; }\r\n\/* OJO con este reset: \"font:inherit\" es un atajo que incluye\r\n   font-size, y el selector vale 0-1-1 (una clase + un elemento). Una\r\n   clase suelta como .cdz-faq-pregunta vale 0-1-0 y pierde, as\u00ed que su\r\n   font-size nunca se aplicaba y las preguntas se ve\u00edan al tama\u00f1o\r\n   heredado del contenedor. Por eso la regla de abajo va escrita como\r\n   \".cdz-faq .cdz-faq-pregunta\" (0-2-0). *\/\r\n.cdz-faq button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }\r\n.cdz-faq a{ color:var(--cdz-marca); text-decoration:none; font-weight:600; }\r\n.cdz-faq a:hover{ text-decoration:underline; }\r\n\r\n.cdz-faq-container{\r\n  max-width:var(--cdz-cont); margin-inline:auto;\r\n  padding:4.6em 1.5em 4.6em;\r\n  position:relative;\r\n}\r\n@media (max-width:991px){ .cdz-faq-container{ padding:3.2em 1em 3.4em; } }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   CABECERA \u00b7 centrada\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-faq-cabecera{ text-align:center; margin-bottom:2.4em; position:relative; z-index:2; }\r\n\r\n.cdz-faq-eyebrow{\r\n  display:block;\r\n  font-size:1.02em; font-weight:600;\r\n  letter-spacing:.07em; text-transform:uppercase;\r\n  color:var(--cdz-marca);\r\n  margin-bottom:.8em;\r\n}\r\n.cdz-faq .cdz-faq-titulo{\r\n  font-size:4.6em; line-height:.94;\r\n}\r\n.cdz-faq-titulo .claro{ color:var(--cdz-marca); }\r\n@media (max-width:767px){ .cdz-faq .cdz-faq-titulo{ font-size:2.6em; } }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   IMAGEN \u00b7 pieza suelta pegada al borde, recortada por \u00e9l\r\n   --------------------------------------------------------------------- *\/\r\n\/* No va dentro de un panel: se ancla al borde izquierdo y se sale de\r\n   cuadro, igual que las naranjas del cierre de la secci\u00f3n 4. El\r\n   overflow-x:clip de la secci\u00f3n la recorta. Va detr\u00e1s de todo y con\r\n   opacidad baja para no competir con la lectura. *\/\r\n.cdz-faq-imagen{\r\n  position:absolute; z-index:0;\r\n  left:-7%; bottom:-4%;\r\n  width:26%; height:auto;\r\n  opacity:.55;\r\n  pointer-events:none; user-select:none;\r\n  transform:rotate(-9deg);\r\n}\r\n@media (max-width:991px){ .cdz-faq-imagen{ display:none; } }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   ACORDE\u00d3N \u00b7 a ancho completo\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-faq-lista{\r\n  position:relative; z-index:1;\r\n  max-width:64em; margin-inline:auto;\r\n}\r\n\r\n.cdz-faq-item{ border-top:1px solid var(--cdz-linea); }\r\n.cdz-faq-item:last-child{ border-bottom:1px solid var(--cdz-linea); }\r\n\r\n.cdz-faq .cdz-faq-pregunta{\r\n  width:100%; text-align:left;\r\n  display:flex; align-items:center; gap:1.5em;\r\n  padding:1.35em .2em;\r\n  font-size:1.45em; line-height:130%; font-weight:600;\r\n  transition:color .2s ease;\r\n}\r\n.cdz-faq .cdz-faq-pregunta:hover{ color:var(--cdz-marca); }\r\n.cdz-faq-pregunta span:first-child{ flex:1; }\r\n@media (max-width:767px){ .cdz-faq .cdz-faq-pregunta{ font-size:1.2em; gap:1em; padding:1.05em 0; } }\r\n\r\n\/* El signo se dibuja con dos trazos y la barra vertical se esconde al\r\n   abrir: as\u00ed el \"+\" se vuelve \"\u2212\" con una rotaci\u00f3n, sin cambiar de\r\n   icono ni cargar dos SVG. *\/\r\n.cdz-faq-signo{\r\n  flex:none; width:1.5em; height:1.5em; border-radius:50%;\r\n  background:#FFFFFF; color:var(--cdz-marca);\r\n  display:grid; place-items:center;\r\n  line-height:0;\r\n  transition:background .25s ease, color .25s ease, transform .35s ease;\r\n}\r\n.cdz-faq-pregunta[aria-expanded=\"true\"] .cdz-faq-signo{\r\n  background:var(--cdz-marca); color:#FFFFFF;\r\n  transform:rotate(180deg);\r\n}\r\n.cdz-faq-signo svg{ width:.78em; height:.78em; display:block; }\r\n.cdz-faq-signo .barra{ transition:opacity .25s ease; }\r\n.cdz-faq-pregunta[aria-expanded=\"true\"] .cdz-faq-signo .barra{ opacity:0; }\r\n\r\n\/* El panel arranca cerrado con alto 0. El overflow oculto es lo que\r\n   permite animarlo: sin \u00e9l, el texto asomar\u00eda fuera mientras se\r\n   despliega. *\/\r\n.cdz-faq-panel{ height:0; overflow:hidden; }\r\n.cdz-faq-panel-inner{ padding:0 5em 1.6em .2em; }\r\n.cdz-faq .cdz-faq-respuesta{\r\n  \/* La respuesta se queda corta a prop\u00f3sito aunque la fila sea ancha:\r\n     un rengl\u00f3n de 64em de largo es inc\u00f3modo de leer, la vista pierde el\r\n     salto de l\u00ednea. La pregunta s\u00ed ocupa todo el ancho, porque es corta\r\n     y funciona como t\u00edtulo de la fila. *\/\r\n  \/* 1.22em: un escal\u00f3n por debajo del 1.45em de la pregunta. La\r\n     diferencia tiene que notarse para que se lea la jerarqu\u00eda \u2014una es\r\n     t\u00edtulo de la fila y la otra su desarrollo\u2014 pero sin caer en letra\r\n     chica. *\/\r\n  font-size:1.22em; line-height:152%; color:#4A6FA5;\r\n  \/* El ancho m\u00e1ximo se cuenta en la em del propio p\u00e1rrafo, no en la\r\n     base: 40 \u00d7 1.22 = 49em del tama\u00f1o base, que es el largo de rengl\u00f3n\r\n     c\u00f3modo para leer. *\/\r\n  max-width:40em;\r\n}\r\n@media (max-width:767px){ .cdz-faq-panel-inner{ padding:0 1em 1.2em 0; } }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   MANUSCRITO \u00b7 al final, junto al cierre de la lista\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-faq-firma{\r\n  position:relative; z-index:1;\r\n  max-width:64em; margin:1.6em auto 0;\r\n  display:flex; align-items:center; gap:.9em;\r\n  color:var(--cdz-oscuro);\r\n}\r\n.cdz-faq-firma-texto{\r\n  font-family:'Caveat', cursive;\r\n  font-variation-settings: normal;\r\n  font-weight:600;\r\n  font-size:1.9em; line-height:112%;\r\n  transform:rotate(-1.5deg);\r\n}\r\n.cdz-faq-firma-flecha{ width:4.4em; height:auto; overflow:visible; color:var(--cdz-oscuro); }\r\n@media (max-width:767px){ .cdz-faq-firma{ justify-content:center; } .cdz-faq-firma-flecha{ display:none; } }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   ESTADOS INICIALES sin JavaScript\r\n   Si GSAP no cargara, el atributo no se pone: el contenido queda\r\n   visible y el acorde\u00f3n, abierto. Se pierde el efecto, no el contenido.\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-faq[data-cdz-faq-listo] .cdz-faq-anim{ opacity:0; }\r\n.cdz-faq:not([data-cdz-faq-listo]) .cdz-faq-panel{ height:auto; }\r\n<\/style>\r\n\r\n<section class=\"cdz-faq\" id=\"preguntas-frecuentes\" data-cdz-faq>\r\n  <div class=\"cdz-faq-container\">\r\n\r\n    <!-- La imagen del sobre. Para cambiarla basta el src; su tama\u00f1o y\r\n         posici\u00f3n salen de .cdz-faq-imagen. -->\r\n    <img decoding=\"async\" class=\"cdz-faq-imagen\" data-cdz-faq-imagen\r\n         src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/09\/Sobre.png\"\r\n         alt=\"\" aria-hidden=\"true\" loading=\"lazy\">\r\n\r\n    <div class=\"cdz-faq-cabecera\">\r\n      <span class=\"cdz-faq-eyebrow cdz-faq-anim\" data-cdz-faq-item>Preguntas frecuentes<\/span>\r\n      <h2 class=\"cdz-faq-titulo cdz-faq-anim\" data-cdz-faq-item>\r\n        Lo que m\u00e1s <span class=\"claro\">nos preguntan.<\/span>\r\n      <\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"cdz-faq-lista\" data-cdz-faq-lista>\r\n\r\n      <div class=\"cdz-faq-item cdz-faq-anim\" data-cdz-faq-item>\r\n        <button class=\"cdz-faq-pregunta\" type=\"button\" aria-expanded=\"false\" aria-controls=\"cdz-faq-r1\">\r\n          <span>\u00bfQu\u00e9 contiene CDZ VIT\u00ae?<\/span>\r\n          <span class=\"cdz-faq-signo\">\r\n            <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\"\r\n                 stroke-linecap=\"round\" aria-hidden=\"true\">\r\n              <path d=\"M3 8h10\"\/><path class=\"barra\" d=\"M8 3v10\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/button>\r\n        <div class=\"cdz-faq-panel\" id=\"cdz-faq-r1\" role=\"region\">\r\n          <div class=\"cdz-faq-panel-inner\">\r\n            <p class=\"cdz-faq-respuesta\">\r\n              CDZ VIT\u00ae es un suplemento dietario que contiene vitamina C, vitamina D3 y zinc. Cada sobre aporta 1.000 mg de vitamina C, 1.000 UI de vitamina D3 y 40 mg de zinc.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cdz-faq-item cdz-faq-anim\" data-cdz-faq-item>\r\n        <button class=\"cdz-faq-pregunta\" type=\"button\" aria-expanded=\"false\" aria-controls=\"cdz-faq-r2\">\r\n          <span>\u00bfCDZ VIT\u00ae es un medicamento?<\/span>\r\n          <span class=\"cdz-faq-signo\">\r\n            <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\"\r\n                 stroke-linecap=\"round\" aria-hidden=\"true\">\r\n              <path d=\"M3 8h10\"\/><path class=\"barra\" d=\"M8 3v10\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/button>\r\n        <div class=\"cdz-faq-panel\" id=\"cdz-faq-r2\" role=\"region\">\r\n          <div class=\"cdz-faq-panel-inner\">\r\n            <p class=\"cdz-faq-respuesta\">\r\n              No. CDZ VIT\u00ae es un suplemento dietario, no es un medicamento y no suple una alimentaci\u00f3n equilibrada.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cdz-faq-item cdz-faq-anim\" data-cdz-faq-item>\r\n        <button class=\"cdz-faq-pregunta\" type=\"button\" aria-expanded=\"false\" aria-controls=\"cdz-faq-r3\">\r\n          <span>\u00bfQu\u00e9 declaraci\u00f3n de propiedad tiene la vitamina C?<\/span>\r\n          <span class=\"cdz-faq-signo\">\r\n            <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\"\r\n                 stroke-linecap=\"round\" aria-hidden=\"true\">\r\n              <path d=\"M3 8h10\"\/><path class=\"barra\" d=\"M8 3v10\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/button>\r\n        <div class=\"cdz-faq-panel\" id=\"cdz-faq-r3\" role=\"region\">\r\n          <div class=\"cdz-faq-panel-inner\">\r\n            <p class=\"cdz-faq-respuesta\">\r\n              La vitamina C contribuye al funcionamiento normal del sistema inmune. CDZ VIT\u00ae contiene 1.000 mg de vitamina C.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cdz-faq-item cdz-faq-anim\" data-cdz-faq-item>\r\n        <button class=\"cdz-faq-pregunta\" type=\"button\" aria-expanded=\"false\" aria-controls=\"cdz-faq-r4\">\r\n          <span>\u00bfQu\u00e9 declaraci\u00f3n de propiedad tiene la vitamina C en relaci\u00f3n con el ejercicio f\u00edsico intenso?<\/span>\r\n          <span class=\"cdz-faq-signo\">\r\n            <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\"\r\n                 stroke-linecap=\"round\" aria-hidden=\"true\">\r\n              <path d=\"M3 8h10\"\/><path class=\"barra\" d=\"M8 3v10\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/button>\r\n        <div class=\"cdz-faq-panel\" id=\"cdz-faq-r4\" role=\"region\">\r\n          <div class=\"cdz-faq-panel-inner\">\r\n            <p class=\"cdz-faq-respuesta\">\r\n              La vitamina C contribuye al funcionamiento normal del sistema inmune durante y despu\u00e9s del ejercicio f\u00edsico intenso. CDZ VIT\u00ae contiene 1.000 mg de vitamina C.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cdz-faq-item cdz-faq-anim\" data-cdz-faq-item>\r\n        <button class=\"cdz-faq-pregunta\" type=\"button\" aria-expanded=\"false\" aria-controls=\"cdz-faq-r5\">\r\n          <span>\u00bfQu\u00e9 declaraci\u00f3n de propiedad tiene la vitamina D?<\/span>\r\n          <span class=\"cdz-faq-signo\">\r\n            <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\"\r\n                 stroke-linecap=\"round\" aria-hidden=\"true\">\r\n              <path d=\"M3 8h10\"\/><path class=\"barra\" d=\"M8 3v10\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/button>\r\n        <div class=\"cdz-faq-panel\" id=\"cdz-faq-r5\" role=\"region\">\r\n          <div class=\"cdz-faq-panel-inner\">\r\n            <p class=\"cdz-faq-respuesta\">\r\n              La vitamina D contribuye al funcionamiento normal del sistema inmune. CDZ VIT\u00ae contiene 1.000 UI de vitamina D.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cdz-faq-item cdz-faq-anim\" data-cdz-faq-item>\r\n        <button class=\"cdz-faq-pregunta\" type=\"button\" aria-expanded=\"false\" aria-controls=\"cdz-faq-r6\">\r\n          <span>\u00bfQu\u00e9 declaraci\u00f3n de propiedad tiene el zinc?<\/span>\r\n          <span class=\"cdz-faq-signo\">\r\n            <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\"\r\n                 stroke-linecap=\"round\" aria-hidden=\"true\">\r\n              <path d=\"M3 8h10\"\/><path class=\"barra\" d=\"M8 3v10\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/button>\r\n        <div class=\"cdz-faq-panel\" id=\"cdz-faq-r6\" role=\"region\">\r\n          <div class=\"cdz-faq-panel-inner\">\r\n            <p class=\"cdz-faq-respuesta\">\r\n              El zinc contribuye al funcionamiento normal del sistema inmune. CDZ VIT\u00ae contiene 40 mg de zinc.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cdz-faq-item cdz-faq-anim\" data-cdz-faq-item>\r\n        <button class=\"cdz-faq-pregunta\" type=\"button\" aria-expanded=\"false\" aria-controls=\"cdz-faq-r7\">\r\n          <span>\u00bfQu\u00e9 otra declaraci\u00f3n se ha aceptado para el zinc?<\/span>\r\n          <span class=\"cdz-faq-signo\">\r\n            <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\"\r\n                 stroke-linecap=\"round\" aria-hidden=\"true\">\r\n              <path d=\"M3 8h10\"\/><path class=\"barra\" d=\"M8 3v10\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/button>\r\n        <div class=\"cdz-faq-panel\" id=\"cdz-faq-r7\" role=\"region\">\r\n          <div class=\"cdz-faq-panel-inner\">\r\n            <p class=\"cdz-faq-respuesta\">\r\n              Una ingesta adecuada de zinc ayuda a fortalecer las defensas del organismo. CDZ VIT\u00ae contiene 40 mg de zinc.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cdz-faq-item cdz-faq-anim\" data-cdz-faq-item>\r\n        <button class=\"cdz-faq-pregunta\" type=\"button\" aria-expanded=\"false\" aria-controls=\"cdz-faq-r8\">\r\n          <span>\u00bfC\u00f3mo debo consumir CDZ VIT\u00ae?<\/span>\r\n          <span class=\"cdz-faq-signo\">\r\n            <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\"\r\n                 stroke-linecap=\"round\" aria-hidden=\"true\">\r\n              <path d=\"M3 8h10\"\/><path class=\"barra\" d=\"M8 3v10\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/button>\r\n        <div class=\"cdz-faq-panel\" id=\"cdz-faq-r8\" role=\"region\">\r\n          <div class=\"cdz-faq-panel-inner\">\r\n            <p class=\"cdz-faq-respuesta\">\r\n              Consuma el producto seg\u00fan el modo de uso, la porci\u00f3n recomendada y las advertencias indicadas en la etiqueta aprobada.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cdz-faq-item cdz-faq-anim\" data-cdz-faq-item>\r\n        <button class=\"cdz-faq-pregunta\" type=\"button\" aria-expanded=\"false\" aria-controls=\"cdz-faq-r9\">\r\n          <span>\u00bfPuedo consumir otros suplementos al mismo tiempo?<\/span>\r\n          <span class=\"cdz-faq-signo\">\r\n            <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\"\r\n                 stroke-linecap=\"round\" aria-hidden=\"true\">\r\n              <path d=\"M3 8h10\"\/><path class=\"barra\" d=\"M8 3v10\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/button>\r\n        <div class=\"cdz-faq-panel\" id=\"cdz-faq-r9\" role=\"region\">\r\n          <div class=\"cdz-faq-panel-inner\">\r\n            <p class=\"cdz-faq-respuesta\">\r\n              Si consume otros suplementos dietarios, consulte a un profesional de la salud para elegir la opci\u00f3n m\u00e1s adecuada para usted.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"cdz-faq-firma cdz-faq-anim\" data-cdz-faq-item>\r\n      <svg class=\"cdz-faq-firma-flecha\" viewBox=\"0 0 120 70\" fill=\"none\"\r\n           stroke=\"currentColor\" stroke-width=\"3.4\" stroke-linecap=\"round\"\r\n           stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <path d=\"M112 12c-34-6-70 6-96 40\"\/>\r\n        <path d=\"M16 52l2-14\"\/><path d=\"M16 52l14 3\"\/>\r\n      <\/svg>\r\n      <span class=\"cdz-faq-firma-texto\">Todo en un mismo<br>sobre<\/span>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  function arranca(){\r\n    if(!window.gsap || !window.ScrollTrigger){ return setTimeout(arranca, 60); }\r\n    gsap.registerPlugin(ScrollTrigger);\r\n\r\n    var seccion = document.querySelector('[data-cdz-faq]');\r\n    if(!seccion) return;\r\n    seccion.setAttribute('data-cdz-faq-listo', '');\r\n\r\n    gsap.fromTo('[data-cdz-faq-item]',\r\n      {opacity:0, y:'2em'},\r\n      {opacity:1, y:'0em', duration:.65, ease:'sine.out', stagger:.06,\r\n       scrollTrigger:{ trigger: seccion, start:'top 78%', once:true }});\r\n\r\n    \/* --- Acorde\u00f3n -------------------------------------------------------\r\n       Se anima la ALTURA real y no una clase con max-height. El truco\r\n       del max-height obliga a inventar un valor grande, y con \u00e9l la\r\n       transici\u00f3n corre a destiempo: tarda lo mismo en abrir una\r\n       respuesta de dos l\u00edneas que una de seis, y al cerrar arranca con\r\n       un tramo muerto. gsap.to(panel, {height:'auto'}) mide el alto en\r\n       el momento, as\u00ed que cada respuesta tarda lo que le corresponde.\r\n\r\n       Al terminar de abrir, la altura queda en 'auto' y no en p\u00edxeles:\r\n       si el usuario cambia el ancho de la ventana y la respuesta gana un\r\n       rengl\u00f3n, el panel se adapta solo. Con un valor fijo, el texto\r\n       quedar\u00eda cortado. *\/\r\n    var abierto = null;\r\n\r\n    function cierra(item){\r\n      if(!item) return;\r\n      item.querySelector('.cdz-faq-pregunta').setAttribute('aria-expanded', 'false');\r\n      gsap.to(item.querySelector('.cdz-faq-panel'), {height:0, duration:.4, ease:'power2.inOut'});\r\n    }\r\n\r\n    function abre(item){\r\n      var panel = item.querySelector('.cdz-faq-panel');\r\n      item.querySelector('.cdz-faq-pregunta').setAttribute('aria-expanded', 'true');\r\n      gsap.to(panel, {\r\n        height:'auto', duration:.45, ease:'power2.inOut',\r\n        onComplete:function(){ panel.style.height = 'auto'; }\r\n      });\r\n    }\r\n\r\n    [].slice.call(seccion.querySelectorAll('.cdz-faq-item')).forEach(function(item){\r\n      gsap.set(item.querySelector('.cdz-faq-panel'), {height:0});\r\n\r\n      item.querySelector('.cdz-faq-pregunta').addEventListener('click', function(){\r\n        var estaAbierto = (abierto === item);\r\n\r\n        \/* Una sola respuesta abierta a la vez: con nueve preguntas, dejar\r\n           varias abiertas obliga a hacer scroll para volver a la lista y\r\n           se pierde la vista de conjunto. *\/\r\n        if(abierto && !estaAbierto) cierra(abierto);\r\n\r\n        if(estaAbierto){ cierra(item); abierto = null; }\r\n        else{ abre(item); abierto = item; }\r\n      });\r\n    });\r\n  }\r\n\r\n  if(document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', arranca); }\r\n  else{ arranca(); }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-366070a elementor-widget elementor-widget-html\" data-id=\"366070a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- CDZ VIT \u00b7 SECCI\u00d3N 9 \u2014 VICITRA \/ VICITRA Z\r\n     Los dos productos lado a lado: se cambia tocando el atenuado.\r\n     Widget suelto; toma GSAP de la secci\u00f3n 1.\r\n\r\n     NO ROMPER:\r\n     1. Las dos leyendas no pueden verse a la vez ni un fotograma \u2014\r\n        ViCitra es medicamento y ViCitra Z suplemento. Por eso el texto\r\n        hace relevo secuencial y las im\u00e1genes s\u00ed se cruzan.\r\n     2. Ning\u00fan atributo se copia de una ficha a la otra.\r\n     3. El sello vegano es solo de ViCitra: Z no es apto. Se aten\u00faa con\r\n        su caja, y en la capa de Z no se menciona el tema.\r\n\r\n     N\u00fameros a ojo: \u00b7\u00b7\u00b7molde-escala (tama\u00f1o de la caja de polvo),\r\n     \u00b7\u00b7\u00b7alto\/\u00b7\u00b7\u00b7ancho, \u00b7\u00b7\u00b7apagado, \u00b7\u00b7\u00b7flecha-x\/y, \u00b7\u00b7\u00b7cdz-base(-z), y en el JS\r\n     META, RUGOSIDAD, DESTELLO, QUITA_OCLUSION, MATE_TOTAL. -->\r\n\r\n<style>\r\n\/* El \u00e1ngulo del arco de ne\u00f3n del r\u00f3tulo. Va declarado con @property y no\r\n   como una variable normal porque las variables corrientes NO SE PUEDEN\r\n   ANIMAR: el navegador no sabe que su contenido es un \u00e1ngulo y salta del\r\n   valor inicial al final sin pasar por el medio. Declarando su tipo, se\r\n   interpola y el arco gira de verdad.\r\n\r\n   Si un navegador no lo soporta, no pasa nada grave: el arco se queda\r\n   quieto en su posici\u00f3n inicial y el r\u00f3tulo mantiene su borde luminoso. *\/\r\n@property --cdz-arco{ syntax:'<angle>'; initial-value:0deg; inherits:false; }\r\n\r\n.cdz-vic{\r\n  --cdz-unit: 16;\r\n  --cdz-ideal: 1440;\r\n  --cdz-min: 992px;\r\n  --cdz-max: 2560px;\r\n  --cdz-cont: clamp(var(--cdz-min), 100vw, var(--cdz-max));\r\n\r\n  --cdz-oscuro: #23503A;\r\n  --cdz-medio:  #5E7F6B;\r\n  --cdz-naranja:#F4701F;\r\n\r\n  \/* Fondo y luz. La luz es blanco C\u00c1LIDO: el fr\u00edo parece un foco. *\/\r\n  \/* Un color por producto: el cambio de tono es lo que hace sentir que\r\n     cambiaste de producto.\r\n\r\n     EL NARANJA EST\u00c1 EN SU TECHO. Fue subiendo de #6B2B05 a #A64705 y de\r\n     ah\u00ed a #B85005, que es pr\u00e1cticamente lo m\u00e1ximo que admite: el blanco\r\n     queda en 5.0:1 de contraste.\r\n\r\n     Medido, para no volver a probarlo: #BF5306 da 4.7:1 \u2014justo\u2014, #C25A0A\r\n     ya baja de 4.5:1, que es el m\u00ednimo para texto normal, y #C85D06 se\r\n     queda en 4.2:1. La leyenda legal es obligatoria y va en blanco, as\u00ed\r\n     que ese es un techo real y no una preferencia. Si hace falta un\r\n     naranja m\u00e1s encendido, habr\u00eda que oscurecer la leyenda o ponerle un\r\n     fondo propio \u2014 no basta con subir este n\u00famero.\r\n\r\n     Lo que se pierde al subir: el naranja de la marca (#F4701F) se\r\n     acerca al fondo, de 2.6:1 a 2.0:1. Nada de ese color puede ir suelto\r\n     encima. Hoy no lo hay \u2014 los iconos van sobre tarjetas oscuras y el\r\n     sello sobre un c\u00edrculo blanco. *\/\r\n  --cdz-base:   #16382A;   \/* ViCitra   \u00b7 verde profundo *\/\r\n  \/* ViCitra Z pasa a DOS naranjas en degradado, el claro arriba. *\/\r\n  --cdz-base-z:  #FC7A22;\r\n  --cdz-base-z2: #E56A17;\r\n\r\n  --cdz-luz:  255, 248, 235;\r\n\r\n  \/* Cu\u00e1nto se apaga la caja no elegida. Vive aqu\u00ed porque la usan dos\r\n     elementos \u2014el modelo y el PNG\u2014 y no se ve entre hermanos. *\/\r\n  \/* Con la pantalla partida ya no hay producto elegido ni apagado: los\r\n     dos se ven enteros. La variable se queda en 1 y no en cero decimales\r\n     porque la usan el sello, la flecha y las listas, que la heredan. *\/\r\n  --apagado: 1;\r\n\r\n  font-size: calc(var(--cdz-cont) \/ (var(--cdz-ideal) \/ var(--cdz-unit)));\r\n  font-family: 'Archivo', Arial, sans-serif;\r\n  font-variation-settings: 'wdth' 78;\r\n  font-weight: 400;\r\n  letter-spacing: -.03em;\r\n  position: relative;\r\n}\r\n@media (max-width:991px){ .cdz-vic{ --cdz-ideal:640; --cdz-min:768px; --cdz-max:991px; } }\r\n@media (max-width:767px){ .cdz-vic{ --cdz-ideal:550; --cdz-min:480px; --cdz-max:767px; } }\r\n@media (max-width:479px){ .cdz-vic{ --cdz-ideal:390; --cdz-min:320px; --cdz-max:479px; } }\r\n\r\n.cdz-vic *,.cdz-vic *::before,.cdz-vic *::after{ box-sizing:border-box; }\r\n\/* Reset. Vale 0-1-1, as\u00ed que las reglas de tama\u00f1o o margen se escriben\r\n   como \".cdz-vic .clase\" (0-2-0) o pierden. *\/\r\n.cdz-vic h2,.cdz-vic h3{ margin:0; font-weight:600; }\r\n.cdz-vic p{ margin:0; }\r\n.cdz-vic button{\r\n  font:inherit; color:inherit; border:0; background:none; cursor:pointer;\r\n  padding:0; margin:0; -webkit-appearance:none; appearance:none;\r\n}\r\n\r\n\/* ESCENARIO \u00b7 fondo y polvo en z0 (el orden lo decide el DOM), los dos\r\n   productos en z1, el texto y las tarjetas en z2. *\/\r\n.cdz-vic-escena{\r\n  position:relative; overflow:hidden;\r\n  background: var(--cdz-base);\r\n  \/* En pantallas chicas el alto SUBE: el mismo contenido en menos ancho\r\n     ocupa m\u00e1s alto. *\/\r\n  \/* Una pantalla exacta en escritorio. En pantallas angostas SUBE, y no\r\n     es capricho: el contenido es el mismo \u2014dos cajas, cabecera, tarjetas\r\n     y leyenda\u2014 pero repartido en menos ancho ocupa m\u00e1s alto. Poniendo\r\n     100vh en todas, en m\u00f3vil el pie se saldr\u00eda de la secci\u00f3n. *\/\r\n  \/* PASA DE 100 A 118vh. Los productos crecieron de 26 a 40vh y ya no\r\n     caben en una pantalla exacta sin comerse el aire de la cabecera y el\r\n     de los beneficios. Se acord\u00f3 que puede sobrepasar el alto de la\r\n     pantalla: es preferible a tener el producto peque\u00f1o.\r\n\r\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n     POR QU\u00c9 140vh Y NO MENOS\r\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n     Es el n\u00famero que separa la primera fila de beneficios del r\u00f3tulo\r\n     \"Ver ViCitra Z\", que cuelga del producto. Los dos elementos se\r\n     mueven a velocidades distintas cuando cambia este alto: los\r\n     productos van anclados con un porcentaje \u2014top:40%\u2014, as\u00ed que bajan\r\n     un 40% de lo que crezca la secci\u00f3n, mientras que las listas van\r\n     ancladas al pie y bajan el 100%. La diferencia es lo que abre el\r\n     hueco entre ellos.\r\n\r\n     Medido, con el r\u00f3tulo y la lista de hoy:\r\n       124vh -> 63 px de hueco   (se tocaban a la vista)\r\n       132vh -> 108 px\r\n       140vh -> 153 px\r\n       146vh -> 187 px\r\n       156vh -> 243 px   (qued\u00f3 vac\u00edo)\r\n     Cada vh a\u00f1ade unos 5.6 px de hueco.\r\n\r\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n     RECORTE DE 146 A 123vh \u00b7 POR QU\u00c9 VAN CUATRO N\u00daMEROS JUNTOS\r\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n     Bajo la leyenda quedaban 287px de color liso, y ese vac\u00edo NO era\r\n     holgura: era el padding-bottom de la leyenda, que la empujaba hacia\r\n     arriba dentro de una secci\u00f3n que no hab\u00eda encogido. Recortar solo el\r\n     alto no lo habr\u00eda quitado \u2014 la leyenda va anclada al pie, as\u00ed que\r\n     habr\u00eda subido con el borde y el vac\u00edo seguir\u00eda igual.\r\n\r\n     As\u00ed que se recortan 244px y se compensa para que nada se mueva de\r\n     sitio en pantalla:\r\n       min-height       146 -> 123 -> 119vh\r\n       padding-bottom   13.45 -> 2 -> 1.6em   (la leyenda baja lo\r\n                                               recortado cada vez)\r\n       bottom de listas 18.3 -> 6.85 -> 6.95em (los beneficios, igual)\r\n       top de productos 43 -> 51 -> 53%       (van en %, as\u00ed que al\r\n                                               encoger la secci\u00f3n\r\n                                               subir\u00edan solos)\r\n\r\n     Con 1.6em bajo la leyenda se acab\u00f3 el margen: por debajo de eso el\r\n     aviso legal queda pegado al filo de la secci\u00f3n y la siguiente\r\n     arranca justo encima de \u00e9l.\r\n     Si se vuelve a tocar el alto, esos cuatro se mueven juntos o la\r\n     composici\u00f3n se descuadra. *\/\r\n  \/* De 119 a 125 y de ah\u00ed a 131vh. El bot\u00f3n del vadem\u00e9cum pas\u00f3 de ir\r\n     entre los productos y los beneficios a ir DEBAJO de los beneficios,\r\n     y ah\u00ed no cab\u00eda: entre la \u00faltima fila y la leyenda legal solo hab\u00eda\r\n     54px.\r\n\r\n     Los cuatro anclajes se movieron juntos, como siempre en esta\r\n     secci\u00f3n:\r\n       min-height       125 -> 131vh\r\n       top de productos 50 -> 48%      (para no moverse del sitio)\r\n       bottom de listas 6.95 -> 9.5em  (suben para dejar el hueco)\r\n       bottom del bot\u00f3n                (nuevo, a 6.2em del pie)\r\n     La leyenda se queda en su 1.6em de siempre. *\/\r\n  min-height:131vh;\r\n}\r\n@media (max-width:991px){ .cdz-vic-escena{ min-height:133vh; } }\r\n@media (max-width:767px){ .cdz-vic-escena{ min-height:153vh; } }\r\n\r\n\/* Plano 0 \u00b7 resplandor. *\/\r\n.cdz-vic-fondo{\r\n  position:absolute; inset:0; z-index:0;\r\n  width:100%; height:100%;\r\n  \/* El color va en background-color y el resplandor en background-image, por\r\n     separado: as\u00ed cada capa lleva su tono y el degradado se escribe una sola\r\n     vez para las dos. *\/\r\n  background-color: var(--fondo, var(--cdz-base));\r\n  background-image:\r\n    radial-gradient(ellipse 62% 46% at 50% 36%,\r\n      rgba(var(--cdz-luz), .26) 0%,\r\n      rgba(var(--cdz-luz), .11) 38%,\r\n      rgba(var(--cdz-luz), .03) 62%,\r\n      rgba(var(--cdz-luz), 0)   78%);\r\n  pointer-events:none; user-select:none;\r\n  opacity:0; transition:none;\r\n}\r\n\/* PANTALLA PARTIDA EN DOS. Los dos fondos ya no se cruzan: cada uno\r\n   ocupa su mitad y los dos est\u00e1n encendidos siempre. El verde es ViCitra\r\n   y el naranja ViCitra Z, y esa l\u00ednea vertical en medio es la que\r\n   organiza toda la secci\u00f3n \u2014 cada mitad es un producto completo, con su\r\n   titular, su empaque, sus beneficios y su leyenda.\r\n\r\n   El resplandor de cada fondo se centra en SU mitad, no en la pantalla,\r\n   porque cada uno ilumina su propio producto. *\/\r\n.cdz-vic-fondo{ opacity:1; }\r\n.cdz-vic-fondo[data-cdz-vic-fondo=\"0\"]{ --fondo: var(--cdz-base);   right:50%; }\r\n\/* La mitad naranja lleva degradado de dos tonos y no color plano: el\r\n   claro arriba y el oscuro abajo, en la misma diagonal que el resplandor.\r\n   Va como segunda capa de background-image, por DEBAJO del resplandor\r\n   \u2014las capas se apilan de arriba abajo en la lista\u2014 para que la luz siga\r\n   vi\u00e9ndose encima. *\/\r\n.cdz-vic-fondo[data-cdz-vic-fondo=\"1\"]{\r\n  --fondo: var(--cdz-base-z2);\r\n  left:50%;\r\n  background-image:\r\n    radial-gradient(ellipse 62% 46% at 50% 36%,\r\n      rgba(var(--cdz-luz), .26) 0%,\r\n      rgba(var(--cdz-luz), .11) 38%,\r\n      rgba(var(--cdz-luz), .03) 62%,\r\n      rgba(var(--cdz-luz), 0)   78%),\r\n    linear-gradient(160deg, var(--cdz-base-z) 0%, var(--cdz-base-z2) 100%);\r\n}\r\n\r\n\/* Plano 0 \u00b7 polvo. *\/\r\n.cdz-vic-polvo{\r\n  position:absolute; inset:0; z-index:0;\r\n  width:100%; height:100%;\r\n  pointer-events:none; user-select:none;\r\n  display:block;\r\n}\r\n\r\n\/* Plano 1 \u00b7 los dos productos.\r\n   El top es lo que sube o baja las dos cajas a la vez. Bajarlo las sube. *\/\r\n.cdz-vic-piezas{\r\n  position:absolute; z-index:1;\r\n  left:50%; top:48%;\r\n  transform:translate(-50%,-50%);\r\n  \/* Un producto por mitad, centrado en la suya. Con space-around cada\r\n     opci\u00f3n recibe el mismo espacio a los lados, o sea que sus centros\r\n     caen al 25% y al 75% de la pantalla: justo el centro de cada mitad.\r\n\r\n     NO SE LE DA width:50% A LA OPCI\u00d3N, y es importante. Con ese ancho el\r\n     bot\u00f3n ocupaba la mitad entera y su borde izquierdo coincid\u00eda con el\r\n     de la pantalla; como el sello vegano se ancla a la IZQUIERDA del\r\n     bot\u00f3n, quedaba fuera de cuadro y el overflow:hidden de la escena lo\r\n     recortaba. Dejando que la opci\u00f3n mida lo que mide su producto, el\r\n     sello vuelve a tener sitio. *\/\r\n  display:flex; align-items:center; justify-content:space-around;\r\n  width:100%;\r\n}\r\n@media (max-width:991px){ .cdz-vic .cdz-vic-opcion{ --alto:33vh; } }\r\n@media (max-width:767px){\r\n  .cdz-vic .cdz-vic-opcion{ --alto:23vh; }\r\n  .cdz-vic-piezas{ gap:1.4em; top:30%; }\r\n}\r\n\r\n\/* Cada producto es un <button> de verdad: el teclado y los lectores de\r\n   pantalla lo reconocen sin simular nada con tabindex. *\/\r\n.cdz-vic .cdz-vic-opcion{\r\n  \/* EL TAMA\u00d1O DEL PRODUCTO VIVE AQU\u00cd y no en el style de cada bot\u00f3n. Al\r\n     estar en el CSS puede cambiar por breakpoint, que es imprescindible:\r\n     los dos empaques van uno al lado del otro, as\u00ed que su ALTO decide su\r\n     ANCHO, y dos productos a 40vh en una pantalla de 390px no caben \u2014se\r\n     saldr\u00edan por los lados. *\/\r\n  --alto:44vh;\r\n  \/* El bot\u00f3n es la referencia de posici\u00f3n del r\u00f3tulo y del sello, y mide\r\n     lo que mide el producto: ver la nota de .cdz-vic-piezas. *\/\r\n  position:relative;\r\n  display:flex; align-items:center; justify-content:center;\r\n  transition:transform .35s cubic-bezier(.32,.72,0,1);\r\n}\r\n\/* EL PRODUCTO DE VICITRA VA CORRIDO HACIA EL CENTRO DE SU MITAD, y la\r\n   asimetr\u00eda es a prop\u00f3sito: es el \u00fanico que lleva sello colgando a la\r\n   izquierda, y sin este desplazamiento el sello queda pegado al borde de\r\n   la pantalla \u2014 medido, le quedaban 12px.\r\n\r\n   No se mueve el sello sino el producto, porque el sello ya est\u00e1 lo m\u00e1s\r\n   cerca de la caja que permite el paso de la flecha. Lo que se corre es\r\n   el conjunto entero.\r\n\r\n   En m\u00f3vil vuelve a cero: all\u00ed el sello se pasa arriba de la caja y no\r\n   necesita hueco lateral. *\/\r\n.cdz-vic-opcion[data-cdz-vic-opcion=\"0\"]{ margin-left:3em; }\r\n@media (max-width:767px){ .cdz-vic-opcion[data-cdz-vic-opcion=\"0\"]{ margin-left:0; } }\r\n\r\n.cdz-vic .cdz-vic-opcion:not([data-activa]):hover{ transform:translateY(-.4em); }\r\n.cdz-vic .cdz-vic-opcion[data-activa]{ cursor:default; pointer-events:none; }\r\n\r\n\/* EL R\u00d3TULO YA NO SE USA. Serv\u00eda para cambiar de producto cuando los dos\r\n   compart\u00edan el centro y uno estaba atenuado; con la pantalla partida no\r\n   hay nada que elegir. Se deja el bloque \u2014marcado con \"hidden\" en el\r\n   HTML\u2014 por si alguna vez se vuelve a la composici\u00f3n anterior. *\/\r\n.cdz-vic-aviso[hidden]{ display:none; }\r\n\r\n\/* EL R\u00d3TULO NO PUEDE TAPAR EL PRODUCTO NUNCA. Cuelga por debajo del\r\n   borde inferior del elemento, que ya queda holgado bajo el empaque.\r\n\r\n   Hubo una versi\u00f3n que lo ataba a --molde-escala para subirlo hasta el\r\n   pie del producto. Fue un error: ese valor est\u00e1 calibrado para el polvo\r\n   y da un 55%, pero el empaque ocupa cerca del 70% del elemento, as\u00ed que\r\n   la correcci\u00f3n lo empujaba unos 66px hacia arriba y lo met\u00eda encima de\r\n   la caja. Y no hac\u00eda falta \u2014 entre el pie del producto y la primera\r\n   tarjeta hay unos 90px libres.\r\n\r\n   --rotulo-y es el n\u00famero, en negativo para colgar hacia abajo. Menos\r\n   negativo lo sube hacia el producto; m\u00e1s negativo lo acerca a las\r\n   tarjetas. *\/\r\n.cdz-vic-aviso{\r\n  position:absolute; z-index:2;\r\n  left:50%;\r\n  bottom: var(--rotulo-y, -2.6em);\r\n  transform:translateX(-50%);\r\n  \/* PARECE LO QUE ES: una llamada a la acci\u00f3n. Antes era una etiqueta\r\n     blanca y plana que no invitaba a nada.\r\n\r\n     Lo que la cambia son cuatro cosas y ninguna es el color: el chevron\r\n     pasa a un disco naranja al final \u2014el elemento que dice \"esto lleva a\r\n     otro sitio\"\u2014, el texto crece y se aprieta, la sombra se abre para\r\n     despegarla del fondo, y al pasar el puntero el disco se desplaza\r\n     mientras la p\u00edldora entera se levanta.\r\n\r\n     Sigue siendo blanca a prop\u00f3sito. Rellenarla de naranja la habr\u00eda\r\n     puesto a competir con el sello, que ya usa ese color y es el\r\n     elemento que m\u00e1s tiene que destacar de la secci\u00f3n. *\/\r\n  display:inline-flex; align-items:center; gap:.7em;\r\n  padding:.5em .6em .5em 1.35em;\r\n  border-radius:99em;\r\n  font-size:1.12em; font-weight:600; line-height:1;\r\n  letter-spacing:-.01em;\r\n  \/* OSCURO, NO BLANCO. Era blanco y el arco de ne\u00f3n naranja encima no\r\n     combinaba, pero la causa no era el naranja: un resplandor necesita\r\n     oscuridad donde brillar. Sobre blanco no hay luz posible, solo un\r\n     borde de color.\r\n\r\n     De paso resuelve otras dos cosas: deja de parecerse al sello, que s\u00ed\r\n     es blanco y redondo, y hace juego con las tarjetas de abajo, que son\r\n     oscuras con el icono naranja. El bot\u00f3n repite ese mismo par.\r\n\r\n     BLANCO CON LA LETRA NARANJA. Se prob\u00f3 oscuro y sobre el fondo\r\n     naranja de ViCitra Z no funcionaba. En blanco se despega de los dos\r\n     fondos con holgura: 12.9:1 contra el verde y 5.0:1 contra el\r\n     naranja.\r\n\r\n     EL NARANJA DEL TEXTO NO ES EL DE LA MARCA, y no es un descuido. El\r\n     #F4701F sobre blanco da 2.92:1, por debajo del 3:1 que necesita un\r\n     texto de este tama\u00f1o. Un punto m\u00e1s hondo llega a 3.51:1 y a simple\r\n     vista es el mismo naranja. Si alguien lo devuelve al de marca, el\r\n     r\u00f3tulo pasa a ser dif\u00edcil de leer para bastante gente.\r\n\r\n     Aviso sobre el arco de ne\u00f3n: sobre blanco pierde casi todo su\r\n     efecto. Un resplandor necesita oscuridad donde brillar, as\u00ed que\r\n     ahora se lee m\u00e1s como un contorno de color que como luz. Se queda\r\n     porque sigue aportando movimiento, pero no es el efecto de las\r\n     referencias. *\/\r\n  background:#FFFFFF;\r\n  color:#E2620F;\r\n  \/* El borde fino es lo que dibuja la p\u00edldora cuando el arco de ne\u00f3n est\u00e1\r\n     dando la vuelta por el lado opuesto. Sin \u00e9l, medio bot\u00f3n desaparece\r\n     durante media vuelta. *\/\r\n  border:1px solid rgba(244,112,31,.28);\r\n  box-shadow:0 .5em 1.5em rgba(0,0,0,.3);\r\n  white-space:nowrap;\r\n  transition:opacity .4s ease, transform .3s cubic-bezier(.32,.72,0,1),\r\n             box-shadow .3s ease, background .3s ease, border-color .3s ease;\r\n}\r\n\r\n\/* ---------------------------------------------------------------------\r\n   EL ARCO DE NE\u00d3N \u00b7 siempre encendido, dando la vuelta al borde\r\n\r\n   C\u00f3mo funciona: el pseudo-elemento se sale .16em por los cuatro lados y\r\n   se rellena con un degradado C\u00d3NICO \u2014uno que gira alrededor de un\r\n   centro\u2014 en el que casi todo es transparente y solo un tramo de unos 90\r\n   grados lleva color. Al animar el \u00e1ngulo de partida, ese tramo recorre\r\n   el contorno.\r\n\r\n   Y se recorta a un anillo con dos m\u00e1scaras superpuestas: una cubre la\r\n   caja entera y la otra solo su interior, y al restarlas queda\r\n   \u00fanicamente el marco. Sin eso, el degradado tapar\u00eda el r\u00f3tulo.\r\n\r\n   El resplandor va con drop-shadow y no con box-shadow, porque\r\n   drop-shadow sigue la forma ya recortada \u2014el anillo\u2014 mientras que\r\n   box-shadow seguir\u00eda la caja rectangular del pseudo-elemento.\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-vic-aviso::before{\r\n  content:'';\r\n  position:absolute; inset:-.16em;\r\n  border-radius:inherit;\r\n  padding:.16em;              \/* el grosor del anillo *\/\r\n  background:conic-gradient(from var(--cdz-arco),\r\n      rgba(244,112,31,0)   0deg,\r\n      rgba(244,112,31,0)   186deg,\r\n      rgba(244,112,31,.85) 258deg,\r\n      #FFF3E6              300deg,\r\n      rgba(244,112,31,.85) 342deg,\r\n      rgba(244,112,31,0)   360deg);\r\n  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n  -webkit-mask-composite:xor;\r\n          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n          mask-composite:exclude;\r\n  filter:drop-shadow(0 0 .3em rgba(244,112,31,.6));\r\n  \/* Lo que tarda el arco en dar una vuelta. Al bajarlo, el hover tiene\r\n     que bajar con \u00e9l o la diferencia entre reposo y puntero deja de\r\n     notarse: el salto es lo que hace que el bot\u00f3n responda. *\/\r\n  animation:cdz-vic-arco 2.5s linear infinite;\r\n  transition:filter .3s ease;\r\n  pointer-events:none;\r\n}\r\n@keyframes cdz-vic-arco{ to{ --cdz-arco:360deg; } }\r\n\r\n\/* AL PASAR EL PUNTERO todo sube de intensidad a la vez: el arco corre\r\n   casi tres veces m\u00e1s r\u00e1pido, su resplandor se abre, la p\u00edldora se\r\n   levanta y le cruza un destello. *\/\r\n.cdz-vic-opcion:hover .cdz-vic-aviso::before{\r\n  animation-duration:.95s;\r\n  filter:drop-shadow(0 0 .7em rgba(244,112,31,1))\r\n         drop-shadow(0 0 1.4em rgba(244,112,31,.55));\r\n}\r\n\r\n\/* El destello que cruza. Va por encima del texto a prop\u00f3sito \u2014como el\r\n   reflejo en un cristal\u2014 y por eso su opacidad es baja: m\u00e1s arriba, en\r\n   vez de brillo se leer\u00eda como una mancha sobre las letras.\r\n\r\n   Se anima la POSICI\u00d3N DEL FONDO y no un desplazamiento, para no tener\r\n   que recortar nada: el degradado viaja dentro del propio pseudo. *\/\r\n.cdz-vic-aviso::after{\r\n  content:'';\r\n  position:absolute; inset:0;\r\n  border-radius:inherit;\r\n  \/* Sobre un bot\u00f3n blanco un destello blanco no se ve: el que cruza es\r\n     de luz NARANJA, del color del acento. *\/\r\n  background:linear-gradient(105deg,\r\n      rgba(244,112,31,0) 38%,\r\n      rgba(244,112,31,.3) 50%,\r\n      rgba(244,112,31,0) 62%);\r\n  background-size:280% 100%;\r\n  background-position:130% 0;\r\n  opacity:0;\r\n  pointer-events:none;\r\n}\r\n.cdz-vic-opcion:hover .cdz-vic-aviso::after{\r\n  animation:cdz-vic-destello .9s ease-out;\r\n}\r\n@keyframes cdz-vic-destello{\r\n  0%  { opacity:0;  background-position:130% 0; }\r\n  15% { opacity:1; }\r\n  100%{ opacity:0;  background-position:-40% 0; }\r\n}\r\n\r\n\/* Sin movimiento: el arco se queda quieto en un punto y el destello no\r\n   aparece. El borde luminoso se conserva, que es lo que da car\u00e1cter. *\/\r\n@media (prefers-reduced-motion: reduce){\r\n  .cdz-vic-aviso::before{ animation:none; }\r\n  .cdz-vic-opcion:hover .cdz-vic-aviso::after{ animation:none; }\r\n}\r\n\/* El disco del chevron. Es el que hace que se lea como un control y no\r\n   como una etiqueta. *\/\r\n.cdz-vic-aviso i{\r\n  flex:none;\r\n  width:1.9em; height:1.9em; border-radius:50%;\r\n  background:var(--cdz-naranja); color:#FFFFFF;\r\n  display:grid; place-items:center; line-height:0;\r\n  transition:transform .3s cubic-bezier(.32,.72,0,1);\r\n}\r\n\/* Al pasar el puntero el fondo se aclara un punto, adem\u00e1s del arco y el\r\n   destello. Se quit\u00f3 el aro blanco que llevaba antes: con el ne\u00f3n\r\n   alrededor, dos anillos superpuestos se ve\u00edan sucios. *\/\r\n.cdz-vic-opcion:hover .cdz-vic-aviso{\r\n  transform:translateX(-50%) translateY(-.18em);\r\n  background:#FFFFFF;\r\n  border-color:rgba(244,112,31,.45);\r\n  box-shadow:0 .8em 2em rgba(0,0,0,.34);\r\n}\r\n\/* El disco se adelanta al pasar el puntero: el movimiento apunta hacia\r\n   donde lleva el clic. *\/\r\n.cdz-vic-opcion:hover .cdz-vic-aviso i{ transform:translateX(.18em); }\r\n\/* En la activa se apaga y adem\u00e1s deja de estorbar al puntero. *\/\r\n.cdz-vic-opcion[data-activa] .cdz-vic-aviso{ opacity:0; pointer-events:none; }\r\n.cdz-vic-aviso svg{ width:.9em; height:.9em; display:block; }\r\n\r\n\/* SELLO REDONDO, NO P\u00cdLDORA: como p\u00edldora ten\u00eda la misma forma, tama\u00f1o y\r\n   altura que el r\u00f3tulo de al lado y se le\u00edan como dos botones, con un clic\r\n   que no existe. *\/\r\n\/* El sello por encima de la flecha: la punta nace bajo su borde. *\/\r\n.cdz-vic-sello{\r\n  position:absolute; z-index:6;\r\n  right:100%; top:10%;\r\n  \/* La separaci\u00f3n con la caja no es est\u00e9tica: es el hueco por el que\r\n     pasa la flecha. Si se reduce, la flecha se monta sobre el sello.\r\n\r\n     Medido con la pantalla partida: a la izquierda del producto quedan\r\n     unos 286px libres y el sello ocupa 210, as\u00ed que 2.6em de separaci\u00f3n\r\n     es lo que cabe sin que lo recorte el borde. *\/\r\n  margin-right:2.6em;\r\n  \/* M\u00c1S GRANDE Y CON LUZ. El sello es el argumento diferencial del\r\n     producto, as\u00ed que pesa m\u00e1s que el resto: 10em de di\u00e1metro contra los\r\n     8 de antes.\r\n\r\n     La luz son dos sombras superpuestas, no una: la negra lo despega del\r\n     fondo y la naranja lo hace resplandecer. Y late despacio, porque un\r\n     resplandor fijo se lee como un borde y uno que respira se lee como\r\n     luz. *\/\r\n  width:10em; height:10em;\r\n  border-radius:50%;\r\n  display:flex; flex-direction:column;\r\n  align-items:center; justify-content:center; gap:.25em;\r\n  \/* EL RELLENO ES DESIGUAL A PROP\u00d3SITO: m\u00e1s abajo que arriba, para subir\r\n     el bloque entero dentro del c\u00edrculo.\r\n\r\n     El motivo es la forma. El texto es un rect\u00e1ngulo y el c\u00edrculo se\r\n     estrecha hacia los extremos, as\u00ed que el \u00faltimo rengl\u00f3n \u2014el m\u00e1s\r\n     largo\u2014 cae justo donde menos ancho hay y parece salirse. Arriba no\r\n     pasa lo mismo porque ah\u00ed va el icono, que es estrecho y tolera estar\r\n     m\u00e1s cerca del borde.\r\n\r\n     Subir el bloque cambia el problema de sitio: gana aire abajo, donde\r\n     hace falta, y lo pierde arriba, donde sobra. *\/\r\n  padding:.2em .4em 1.6em;\r\n  background:#FFFFFF; color:var(--cdz-oscuro);\r\n  \/* El anillo interior es lo que lo vuelve un sello y no un bot\u00f3n\r\n     redondo: los botones no llevan doble borde. *\/\r\n  border:.2em solid var(--cdz-naranja);\r\n  \/* LA LUZ VA EN TRES CAPAS, no en una. Con un solo resplandor naranja se\r\n     le\u00eda como un borde grueso; repartido en tres alcances se lee como\r\n     luz de verdad:\r\n\r\n       \u00b7 una cerrada y C\u00c1LIDA CASI BLANCA, que es la que hace parecer que\r\n         el propio c\u00edrculo est\u00e1 iluminado;\r\n       \u00b7 una media naranja, el cuerpo del resplandor;\r\n       \u00b7 una muy abierta y tenue, que ti\u00f1e el fondo alrededor y da la\r\n         sensaci\u00f3n de que la luz alcanza la escena.\r\n\r\n     La negra de abajo no es luz: despega el sello del fondo. Sin ella el\r\n     resplandor lo aplana. *\/\r\n  box-shadow:0 .6em 1.9em rgba(0,0,0,.42),\r\n             0 0 1.4em rgba(255,236,210,.6),\r\n             0 0 3.2em rgba(244,112,31,.65),\r\n             0 0 6.5em rgba(244,112,31,.3);\r\n  animation:cdz-vic-latido 3.2s ease-in-out infinite;\r\n  text-align:center;\r\n  \/* Girado apenas: un sello perfectamente recto parece un elemento de\r\n     interfaz; torcido parece estampado. *\/\r\n  transform:rotate(-8deg);\r\n  \/* Arranca al nivel de la caja apagada, no en cero. *\/\r\n  opacity: var(--apagado); pointer-events:none;\r\n  transition:opacity .45s ease;\r\n}\r\n\/* El latido va SOLO en la sombra, no en el tama\u00f1o ni en la opacidad:\r\n   moviendo el sello competir\u00eda con el producto, y moviendo la opacidad se\r\n   leer\u00eda como un parpadeo de error. *\/\r\n@keyframes cdz-vic-latido{\r\n  0%,100%{ box-shadow:0 .6em 1.9em rgba(0,0,0,.42),\r\n                      0 0 1.2em rgba(255,236,210,.5),\r\n                      0 0 2.8em rgba(244,112,31,.55),\r\n                      0 0 5.5em rgba(244,112,31,.24); }\r\n  50%    { box-shadow:0 .6em 1.9em rgba(0,0,0,.42),\r\n                      0 0 2em   rgba(255,236,210,.85),\r\n                      0 0 4.6em rgba(244,112,31,.95),\r\n                      0 0 9em   rgba(244,112,31,.48); }\r\n}\r\n@media (prefers-reduced-motion: reduce){\r\n  .cdz-vic-sello{ animation:none; }\r\n}\r\n.cdz-vic-sello span{\r\n  display:block;\r\n  font-size:1.06em; font-weight:600; line-height:1.16;\r\n  letter-spacing:.02em; text-transform:uppercase;\r\n}\r\n.cdz-vic-opcion[data-activa] .cdz-vic-sello{ opacity:1; }\r\n\/* La hoja en naranja: es el \u00fanico acento de color del sello y lo separa\r\n   del aviso, que es del mismo blanco y la misma forma. *\/\r\n\/* La hoja en naranja, igual que el anillo: es el \u00fanico color del sello\r\n   y lo amarra con el acento de la secci\u00f3n. *\/\r\n.cdz-vic-sello svg{ width:2.3em; height:2.3em; display:block; color:var(--cdz-naranja); }\r\n\/* En m\u00f3vil se encoge y se mete un poco m\u00e1s sobre la caja: con dos cajas\r\n   repartidas en 390px, un sello que sobresalga tres em se sale de la\r\n   pantalla. *\/\r\n@media (max-width:991px){ .cdz-vic-sello{ width:8.6em; height:8.6em; } }\r\n\/* En m\u00f3vil pasa ARRIBA de la caja: a los lados no hay hueco. *\/\r\n@media (max-width:767px){\r\n  .cdz-vic-sello{\r\n    width:7em; height:7em; border-width:.18em;\r\n    right:0; left:0; margin-right:0; margin-inline:auto;\r\n    top:auto; bottom:100%; margin-bottom:.5em;\r\n  }\r\n  .cdz-vic-sello span{ font-size:.9em; }\r\n  .cdz-vic-sello svg{ width:1.7em; height:1.7em; }\r\n}\r\n\r\n\/* La flecha, del sello a la caja. Va POR ENCIMA del producto: su punta se\r\n   mete sobre el empaque \u2014eso lo decide --flecha-x, en negativo\u2014 y si\r\n   quedara debajo se cortar\u00eda justo en el borde de la caja, que es como se\r\n   ve\u00eda.\r\n\r\n   El z-index tiene que ser mayor que el de la imagen, y por eso la imagen\r\n   lleva uno declarado: sin \u00e9l, el filtro de sombra que tiene la convierte\r\n   en un contexto de apilado propio y el orden deja de ser evidente. *\/\r\n.cdz-vic-flechita{\r\n  position:absolute; z-index:5;\r\n  right:100%; top: var(--flecha-y, 34%);\r\n  margin-right: var(--flecha-x, -1.4em);\r\n  \/* M\u00c1S CORTA PARA QUE NO NAZCA DEBAJO DEL SELLO. Con 5.4em de ancho y\r\n     el desplazamiento de --flecha-x, la cola arrancaba 4em a la izquierda\r\n     del producto, pero el sello termina a 2.6em: ese trozo quedaba tapado\r\n     por el c\u00edrculo y la flecha parec\u00eda salir de dentro.\r\n\r\n     Con 3.9em nace en 2.5em, justo fuera del sello. El alto baja en la\r\n     misma proporci\u00f3n para no deformar el dibujo \u2014 el SVG conserva su\r\n     recorrido y solo cambia de escala. *\/\r\n  width:3.9em; height:2.3em;\r\n  pointer-events:none;\r\n  color:var(--cdz-naranja);\r\n  opacity: var(--apagado);\r\n  transition:opacity .45s ease;\r\n}\r\n.cdz-vic-opcion[data-activa] .cdz-vic-flechita{ opacity:1; }\r\n.cdz-vic-flechita svg{ width:100%; height:100%; display:block; overflow:visible; }\r\n\/* pathLength=\"100\" permite animar el dibujado sin medir la curva ni\r\n   depender de DrawSVG. *\/\r\n.cdz-vic-flechita .trazo{ stroke-dasharray:100; stroke-dashoffset:100; }\r\n.cdz-vic-flechita .punta{ opacity:0; }\r\n\/* En m\u00f3vil no va: all\u00ed el sello se pasa arriba de la caja y la flecha\r\n   estar\u00eda apuntando a un costado vac\u00edo. *\/\r\n@media (max-width:767px){ .cdz-vic-flechita{ display:none; } }\r\n\r\n\/* EL PRODUCTO ES UNA IMAGEN. Antes era un modelo 3D con model-viewer;\r\n   se cambi\u00f3 por PNG y con eso desaparecieron el giro, el zoom, la\r\n   sincronizaci\u00f3n de c\u00e1maras y la correcci\u00f3n de materiales.\r\n\r\n   El !important es contra el \"img{ max-width:100%; height:auto }\" que\r\n   traen muchos temas de WordPress \u2014a veces con !important\u2014: ese\r\n   height:auto dibuja el PNG a su tama\u00f1o de archivo, que son varios\r\n   cientos de p\u00edxeles. Es la causa habitual de una imagen que sale enorme\r\n   aunque el CSS propio diga otra cosa.\r\n\r\n   OJO CON --alto AL VENIR DEL 3D: baj\u00f3 de 34 a 26vh y no es un capricho.\r\n   El <model-viewer> era una caja bastante m\u00e1s grande que el producto\r\n   dibujado dentro \u2014el empaque ocupaba cerca del 70%\u2014, mientras que el\r\n   PNG viene ajustado. Manteniendo 34vh, el producto se habr\u00eda visto un\r\n   40% m\u00e1s grande de golpe y habr\u00eda chocado con los beneficios. *\/\r\n.cdz-vic .cdz-vic-pieza{\r\n  display:block;\r\n  height: var(--alto, 29vh) !important;\r\n  width:auto !important;\r\n  max-width:none;\r\n  position:relative; z-index:1;\r\n  transform:translateY(var(--sube, 0px));\r\n  filter:drop-shadow(0 1.6em 2.4em rgba(0,0,0,.32));\r\n  user-select:none; -webkit-user-drag:none;\r\n  opacity: var(--apagado);\r\n  transition:opacity .5s ease;\r\n  pointer-events:none;\r\n}\r\n.cdz-vic-opcion[data-activa] .cdz-vic-pieza{ opacity:1; }\r\n\/* Al pasar el puntero, la atenuada se acerca a su estado final. *\/\r\n.cdz-vic-opcion:not([data-activa]):hover .cdz-vic-pieza{ opacity:.75; }\r\n\r\n\/* FORMACI\u00d3N \u00b7 mientras el polvo arma la caja, el producto sigue ah\u00ed\r\n   ocupando su sitio pero invisible: de su rect\u00e1ngulo salen las\r\n   coordenadas de destino de cada part\u00edcula, y un elemento sin caja no se\r\n   puede medir. *\/\r\n.cdz-vic .cdz-vic-opcion[data-formando] .cdz-vic-pieza{ opacity:0; }\r\n.cdz-vic-opcion[data-formando] .cdz-vic-aviso,\r\n.cdz-vic-opcion[data-formando] .cdz-vic-flechita,\r\n.cdz-vic-opcion[data-formando] .cdz-vic-sello{ opacity:0; }\r\n\r\n\/* --- Plano 2 \u00b7 texto y tarjetas --- *\/\r\n.cdz-vic-capa{\r\n  position:absolute; inset:0; z-index:2;\r\n  \/* EL COLOR DEL TEXTO ES POR CAPA. Hoy las dos van sobre el mismo\r\n     fondo oscuro, as\u00ed que las dos usan blanco. *\/\r\n  --texto: #FFFFFF;\r\n  --texto-suave: rgba(255,255,255,.75);\r\n  color: var(--texto);\r\n  opacity:0;\r\n  \/* La capa nunca intercepta clics, ni la visible: la oculta se los traga\r\n     aunque tenga opacity:0, y la visible se extiende sobre las cajas. *\/\r\n  pointer-events:none;\r\n}\r\n\/* Cada capa ocupa su mitad y las dos est\u00e1n visibles. Antes se cruzaban\r\n   en el mismo sitio y solo una estaba a la vista; ahora conviven, que es\r\n   lo que permite ver los dos productos a la vez.\r\n\r\n   LAS DOS LEYENDAS LEGALES SE VEN AL MISMO TIEMPO, y aqu\u00ed s\u00ed puede ser:\r\n   cada una vive dentro de la mitad de su producto, bajo su empaque y sus\r\n   beneficios, con su propio color de fondo. Lo que NO puede hacerse es\r\n   juntarlas en una sola l\u00ednea al pie de la secci\u00f3n: fundidas se leen como\r\n   una afirmaci\u00f3n \u00fanica, y una dice que el producto es un medicamento y la\r\n   otra que no lo es. *\/\r\n.cdz-vic-capa{ opacity:1; }\r\n.cdz-vic-capa[data-cdz-vic-capa=\"0\"]{ right:50%; }\r\n.cdz-vic-capa[data-cdz-vic-capa=\"1\"]{ left:50%; }\r\n.cdz-vic-capa[data-activa]{ opacity:1; }\r\n\/* Escape para un fondo claro: hoy ninguna capa lo usa. *\/\r\n.cdz-vic-capa[data-tono=\"claro\"]{\r\n  --texto: var(--cdz-oscuro);\r\n  --texto-suave: #1B3D2B;\r\n}\r\n@media (max-width:991px){\r\n  .cdz-vic-capa{ inset:0; }\r\n}\r\n\r\n\/* space-between: el hueco del medio \u2014donde va el producto\u2014 es lo que\r\n   sobra, y en una pantalla baja se encoge solo. *\/\r\n.cdz-vic-contenido{\r\n  height:100%;\r\n  display:flex; flex-direction:column; justify-content:space-between;\r\n  \/* Sin max-width: cada contenido ocupa su media pantalla completa.\r\n\r\n     El relleno de ARRIBA es el que baja los titulares, y ahora tiene que\r\n     ser bastante mayor: la frase de NOVAMED va suelta sobre las dos\r\n     mitades, a 2.2em del borde, y con 3.2em los titulares se le sub\u00edan\r\n     encima. *\/\r\n  \/* El relleno de ABAJO es lo que sube o baja la leyenda legal, y va al\r\n     rev\u00e9s de lo que uno espera: la leyenda est\u00e1 anclada al pie de su\r\n     mitad, as\u00ed que SUBIR este n\u00famero la sube. *\/\r\n  padding:7.5em 2em 1.6em;\r\n}\r\n@media (max-width:991px){\r\n  .cdz-vic-contenido{ padding:2.4em 1em 1.4em; }\r\n}\r\n\r\n\/* CABECERA *\/\r\n.cdz-vic-cabecera{ text-align:center; }\r\n\r\n\/* Ya no es manuscrita: Caveat sirve para tres palabras, no para una\r\n   frase. En m\u00f3vil pierde el nowrap: 92 caracteres no caben en 390px. *\/\r\n\/* Las copias que quedan dentro de cada mitad se apagan: el texto lo pone\r\n   ahora el elemento suelto de arriba. Se dejan en el HTML para que cada\r\n   capa siga siendo un bloque completo si alg\u00fan d\u00eda se separan. *\/\r\n.cdz-vic-capa .cdz-vic-intro{ display:none; }\r\n\r\n.cdz-vic-intro{\r\n  position:absolute; z-index:3;\r\n  left:0; right:0; top:2.2em;\r\n  text-align:center;\r\n  font-weight:500;\r\n  font-size:1.5em; line-height:136%;\r\n  letter-spacing:-.02em;\r\n  color:#FFFFFF;\r\n  margin:0 auto;\r\n  white-space:nowrap;\r\n}\r\n\/* En m\u00f3vil se le quita el nowrap: 92 caracteres no caben en 390px de\r\n   ancho de ninguna manera, y forzarlos desbordar\u00eda la pantalla. *\/\r\n@media (max-width:767px){\r\n  .cdz-vic-intro{ font-size:1.05em; white-space:normal; max-width:24em; }\r\n}\r\n\r\n\/* Una sola l\u00ednea. Es una fila flexible porque mezcla texto y logotipo:\r\n   si no, la imagen se apoyar\u00eda en la l\u00ednea base. *\/\r\n\/* El titular mezcla texto y logotipo, as\u00ed que es una fila flexible: sin\r\n   esto la imagen se apoyar\u00eda en la l\u00ednea base y quedar\u00eda descolgada. *\/\r\n\/* CADA TITULAR TIENE AHORA LA MITAD DEL ANCHO, as\u00ed que baja de 5 a\r\n   3.7em. A 5em \"Conoce ViCitra Z\" se sal\u00eda por el borde derecho y la \"Z\"\r\n   quedaba cortada: el logotipo es una imagen ancha y crece con la letra.\r\n\r\n   Los logotipos van en em del titular, as\u00ed que se ajustan solos. *\/\r\n.cdz-vic .cdz-vic-titulo{\r\n  font-size:3.7em; line-height:.9; color:var(--texto);\r\n  white-space:nowrap;\r\n  display:flex; align-items:center; justify-content:center; gap:.28em;\r\n  \/* ALTO FIJO, y es lo que alinea los dos titulares entre mitades.\r\n\r\n     Sin \u00e9l, la fila mide lo que mida su logotipo, y como las dos cajas de\r\n     logotipo son distintas \u20141.53em contra 0.90em\u2014 cada titular se\r\n     centraba a una altura y uno quedaba 9px m\u00e1s arriba que el otro.\r\n\r\n     Con el alto fijado, el logotipo puede medir lo que necesite sin mover\r\n     el texto. Tiene que ser mayor que la caja de logotipo m\u00e1s alta. *\/\r\n  min-height:1.75em;\r\n}\r\n\r\n\/* La bajada de cada mitad: qu\u00e9 es el producto, en una l\u00ednea. Va debajo\r\n   del titular y en un tono m\u00e1s suave, para que se lea como aclaraci\u00f3n y\r\n   no compita con el nombre.\r\n\r\n   OJO CON ESTE TEXTO: describe la naturaleza del producto \u2014medicamento\r\n   contra suplemento dietario\u2014 y para qu\u00e9 sirve. No es texto de dise\u00f1o:\r\n   tiene que salir de lo que autorice el registro sanitario de cada uno.\r\n   Si cambia el registro, cambia esta l\u00ednea. *\/\r\n.cdz-vic .cdz-vic-sub{\r\n  font-size:1.26em; line-height:132%; font-weight:500;\r\n  color:var(--texto-suave);\r\n  max-width:22em; margin:.7em auto 0;\r\n}\r\n@media (max-width:991px){ .cdz-vic .cdz-vic-sub{ font-size:1.05em; } }\r\n\r\n\/* ---------------------------------------------------------------------\r\n   EL BRILLO DE LA PALABRA \u00b7 \"Prueba\" \/ \"Conoce\"\r\n\r\n   Antes eran dos sombras blancas fijas. Se ve\u00eda limpio pero muerto: un\r\n   halo blanco sobre texto blanco casi no se distingue del propio texto,\r\n   as\u00ed que aportaba poco.\r\n\r\n   Ahora son TRES capas de distinto color y alcance, y respira:\r\n\r\n     \u00b7 una cerrad\u00edsima y blanca, que le da filo a la letra;\r\n     \u00b7 una media, \u00e1mbar c\u00e1lido, que es la que de verdad se ve como luz;\r\n     \u00b7 una abierta y naranja, del color del acento, que ti\u00f1e el aire\r\n       alrededor de la palabra.\r\n\r\n   La clave es que el halo NO sea blanco. Sobre texto blanco un halo\r\n   blanco es invisible; en c\u00e1lido se separa de la letra y se lee como\r\n   resplandor. Y como el naranja es el color del logo que va al lado, la\r\n   palabra y la marca quedan iluminadas por la misma luz.\r\n\r\n   Respira en cuatro segundos, el mismo orden que el latido del sello: si\r\n   uno pulsara r\u00e1pido y el otro lento, se leer\u00edan como dos cosas sin\r\n   relaci\u00f3n.\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-vic-brillo{\r\n  color:#FFFFFF;\r\n  animation:cdz-vic-respira 4s ease-in-out infinite;\r\n  text-shadow:0 0 .04em rgba(255,255,255,.9),\r\n              0 0 .24em rgba(255,222,170,.7),\r\n              0 0 .62em rgba(244,112,31,.42);\r\n}\r\n@keyframes cdz-vic-respira{\r\n  0%,100%{ text-shadow:0 0 .04em rgba(255,255,255,.85),\r\n                       0 0 .2em  rgba(255,222,170,.5),\r\n                       0 0 .5em  rgba(244,112,31,.28); }\r\n  50%    { text-shadow:0 0 .05em rgba(255,255,255,1),\r\n                       0 0 .34em rgba(255,222,170,.9),\r\n                       0 0 .95em rgba(244,112,31,.6); }\r\n}\r\n@media (prefers-reduced-motion: reduce){\r\n  .cdz-vic-brillo{ animation:none; }\r\n}\r\n\/* El logo va por ALTO y en em, as\u00ed crece con el titular en cada\r\n   breakpoint. --logo-alto por si cada archivo trae otra proporci\u00f3n. *\/\r\n.cdz-vic-titulo .logo{\r\n  \/* --logo-alto ES EL ALTO DE LA CAJA, NO EL DEL DIBUJO, y los dos no\r\n     coinciden: cada PNG trae su propio margen transparente alrededor.\r\n     Medido sobre una captura, la tinta ocupa el 58% de la caja en el\r\n     archivo de ViCitra y el 98% en el de ViCitra Z.\r\n\r\n     Por eso los dos n\u00fameros se ven tan distintos \u20141.53 y 0.90\u2014 aunque los\r\n     logotipos se dibujen del mismo tama\u00f1o: 52px de alto cada uno. Si\r\n     alguien cambia un archivo por otro, hay que volver a medir; igualar\r\n     los n\u00fameros a ojo descuadra los dos titulares. *\/\r\n  height: var(--logo-alto, .78em); width:auto; display:block;\r\n  \/* El logo no puede llevar text-shadow \u2014es una imagen\u2014, as\u00ed que su\r\n     resplandor va con drop-shadow, que sigue la silueta del PNG y no su\r\n     caja. M\u00e1s contenido que el del texto: el logo es naranja saturado y\r\n     un halo blanco fuerte le ensuciar\u00eda el color. *\/\r\n  filter:drop-shadow(0 0 .16em rgba(255,255,255,.4));\r\n  \/* El PNG viene con su propio color de marca, as\u00ed que no hereda el\r\n     tono de la capa: se queda igual sobre los dos fondos. *\/\r\n  user-select:none; -webkit-user-drag:none;\r\n}\r\n@media (max-width:767px){\r\n  .cdz-vic .cdz-vic-titulo{ gap:.22em; }\r\n  .cdz-vic-titulo .logo{ height:.7em; }\r\n}\r\n@media (max-width:991px){ .cdz-vic .cdz-vic-titulo{ font-size:2.7em; } }\r\n\/* En m\u00f3vil se le quita el nowrap: en 390px de ancho no cabe de ninguna\r\n   manera, y forzarlo desbordar\u00eda la pantalla. Ah\u00ed s\u00ed puede partirse. *\/\r\n@media (max-width:767px){\r\n  .cdz-vic .cdz-vic-titulo{ font-size:2.4em; white-space:normal; }\r\n}\r\n\r\n\/* ---------------------------------------------------------------------\r\n   BOT\u00d3N AL VADEM\u00c9CUM \u00b7 uno por mitad\r\n\r\n   Empez\u00f3 siendo uno solo, centrado y cruzando la divisi\u00f3n. No funcion\u00f3:\r\n   cada lista de beneficios mide 38em y llega casi hasta el centro de la\r\n   pantalla, as\u00ed que el bot\u00f3n se les montaba encima por los dos lados.\r\n\r\n   Con uno en cada mitad el problema desaparece: cada uno se centra en su\r\n   mitad, donde s\u00ed hay sitio.\r\n\r\n   Y van DEBAJO de los beneficios, no entre el producto y la lista:\r\n   cierran la ficha de cada producto en vez de partirla por la mitad.\r\n\r\n   Los dos llevan al mismo sitio. No es una duplicaci\u00f3n por descuido: el\r\n   vadem\u00e9cum es de Novamed y cubre los dos productos, y con la pantalla\r\n   partida un bot\u00f3n \u00fanico no pertenecer\u00eda a ninguna de las dos mitades.\r\n\r\n   Blanco con texto verde oscuro porque tiene que leerse igual de bien\r\n   sobre el verde y sobre el naranja: 12.9:1 contra uno y 5.0:1 contra\r\n   el otro.\r\n   --------------------------------------------------------------------- *\/\r\n.cdz-vic-vade{\r\n  position:absolute; z-index:4;\r\n  \/* Anclado al pie y no con un porcentaje desde arriba: as\u00ed se mantiene\r\n     a distancia fija de la leyenda legal, que es su vecina de abajo,\r\n     sea cual sea el alto de la secci\u00f3n. *\/\r\n  left:0; right:0; bottom:6.6em;\r\n  \/* space-around reparte igual que los productos y las listas: cada\r\n     bot\u00f3n queda centrado en su mitad. *\/\r\n  display:flex; justify-content:space-around;\r\n  pointer-events:none;   \/* solo los enlaces reciben clics *\/\r\n}\r\n.cdz-vic .cdz-vic-vade a{\r\n  pointer-events:auto;\r\n  \/* Referencia para el arco de ne\u00f3n que va en su ::before. *\/\r\n  position:relative;\r\n  display:inline-flex; align-items:center; gap:.55em;\r\n  padding:.45em .5em .45em 1.1em;\r\n  border-radius:99em;\r\n  background:#FFFFFF; color:var(--cdz-oscuro);\r\n  text-decoration:none;\r\n  font-size:.95em; font-weight:600; line-height:1;\r\n  letter-spacing:-.01em;\r\n  box-shadow:0 .4em 1.2em rgba(0,0,0,.28);\r\n  transition:transform .3s cubic-bezier(.32,.72,0,1), box-shadow .3s ease;\r\n}\r\n.cdz-vic .cdz-vic-vade a:hover{\r\n  transform:translateY(-.18em);\r\n  box-shadow:0 .7em 1.8em rgba(0,0,0,.34);\r\n}\r\n\/* EL ARCO DE NE\u00d3N, el mismo del antiguo r\u00f3tulo \"Ver ViCitra\". Se\r\n   reutiliza tal cual: un degradado c\u00f3nico en el que casi todo es\r\n   transparente y solo un tramo lleva color, recortado a un anillo con\r\n   dos m\u00e1scaras que se restan, y girando al animar su \u00e1ngulo de partida.\r\n\r\n   Aqu\u00ed el efecto es distinto que en aquel bot\u00f3n, y conviene saberlo: el\r\n   r\u00f3tulo era oscuro, as\u00ed que el arco se le\u00eda como luz sobre \u00e9l. Este es\r\n   blanco, y sobre blanco un resplandor no puede brillar \u2014 lo que se ve\r\n   es el anillo de color recorriendo el borde y su halo asomando sobre\r\n   el fondo de la secci\u00f3n, que s\u00ed es oscuro. *\/\r\n.cdz-vic-vade a::before{\r\n  content:'';\r\n  position:absolute; inset:-.14em;\r\n  border-radius:inherit;\r\n  padding:.14em;\r\n  \/* El color sale de variables, no est\u00e1 escrito aqu\u00ed: cada bot\u00f3n las\r\n     redefine seg\u00fan la mitad en la que est\u00e9 (ver debajo). *\/\r\n  background:conic-gradient(from var(--cdz-arco),\r\n      var(--arco-0)      0deg,\r\n      var(--arco-0)      186deg,\r\n      var(--arco-1)      258deg,\r\n      var(--arco-nucleo) 300deg,\r\n      var(--arco-1)      342deg,\r\n      var(--arco-0)      360deg);\r\n  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n  -webkit-mask-composite:xor;\r\n          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n          mask-composite:exclude;\r\n  filter:drop-shadow(0 0 .3em var(--arco-halo));\r\n  animation:cdz-vic-arco 2.5s linear infinite;\r\n  transition:filter .3s ease;\r\n  pointer-events:none;\r\n}\r\n.cdz-vic-vade a:hover::before{\r\n  animation-duration:.95s;\r\n  filter:drop-shadow(0 0 .7em var(--arco-halo))\r\n         drop-shadow(0 0 1.4em var(--arco-halo));\r\n}\r\n\r\n\/* CADA ARCO LLEVA EL COLOR CONTRARIO AL DE SU MITAD. El de la derecha\r\n   iba naranja sobre un fondo naranja y no se ve\u00eda: un arco solo se\r\n   distingue si contrasta con lo que tiene detr\u00e1s, y ah\u00ed lo que ten\u00eda\r\n   detr\u00e1s era su propio color.\r\n\r\n   El primero est\u00e1 en la mitad verde y lleva el arco naranja; el\r\n   segundo, en la naranja, lo lleva verde.\r\n\r\n   Los dos con un N\u00daCLEO CLARO, que es lo que da la sensaci\u00f3n de\r\n   destello: sin \u00e9l el arco se lee como una raya de color y no como luz\r\n   recorriendo el borde. Y en el verde importa m\u00e1s todav\u00eda, porque el\r\n   verde oscuro sobre naranja da 2.0:1 \u2014poco\u2014 mientras que su n\u00facleo\r\n   claro llega a 2.5 y es lo que de verdad se ve pasar. *\/\r\n.cdz-vic-vade a:first-child{\r\n  --arco-0: rgba(244,112,31,0);\r\n  --arco-1: rgba(244,112,31,.85);\r\n  --arco-nucleo: #FFF3E6;\r\n  --arco-halo: rgba(244,112,31,.75);\r\n}\r\n.cdz-vic-vade a:last-child{\r\n  --arco-0: rgba(31,122,84,0);\r\n  --arco-1: rgba(31,122,84,.95);\r\n  --arco-nucleo: #E4FFF1;\r\n  --arco-halo: rgba(31,122,84,.85);\r\n}\r\n@media (prefers-reduced-motion: reduce){\r\n  .cdz-vic-vade a::before{ animation:none; }\r\n}\r\n\r\n\/* El disco con la flecha: es lo que dice \"esto lleva a otro sitio\". *\/\r\n.cdz-vic-vade i{\r\n  flex:none;\r\n  width:1.6em; height:1.6em; border-radius:50%;\r\n  background:var(--cdz-naranja); color:#FFFFFF;\r\n  display:grid; place-items:center; line-height:0;\r\n  transition:transform .3s cubic-bezier(.32,.72,0,1);\r\n}\r\n.cdz-vic-vade a:hover i{ transform:translate(.12em,-.12em); }\r\n.cdz-vic-vade svg{ width:.78em; height:.78em; display:block; }\r\n\r\n@media (max-width:767px){\r\n  \/* En m\u00f3vil las mitades son muy estrechas: los dos botones se apilan\r\n     en el centro en vez de repartirse. *\/\r\n  .cdz-vic-vade{ bottom:5em; flex-direction:column; align-items:center; gap:.6em; }\r\n  .cdz-vic .cdz-vic-vade a{ font-size:.9em; }\r\n}\r\n\r\n\/* ---------------------------------------------------------------------\r\n   LAS DOS LISTAS DE BENEFICIOS \u00b7 una a cada lado, siempre visibles\r\n\r\n   Antes era una banda blanca al pie que cruzaba con el producto. Ahora\r\n   las dos listas est\u00e1n en pantalla a la vez: la de ViCitra a la\r\n   izquierda, la de ViCitra Z a la derecha y los productos en medio.\r\n\r\n   La del producto elegido va a plena opacidad y la otra atenuada, con el\r\n   mismo --apagado que usan las cajas. Es la misma idea que ya gobierna la\r\n   secci\u00f3n: se ve lo que hay del otro lado sin tener que cambiar, y el\r\n   cambio se lee como un traspaso de foco de un lado al otro.\r\n\r\n   Y por eso reparte mejor: en vez de acumular todo al pie, cada mitad de\r\n   la pantalla pertenece a un producto.\r\n   --------------------------------------------------------------------- *\/\r\n\/* ABAJO, NO A MEDIA ALTURA. Centradas verticalmente chocaban con el\r\n   sello de vegetarianos, que cuelga del costado izquierdo de la caja de\r\n   ViCitra. Alineadas al pie quedan por debajo de los productos y de sus\r\n   r\u00f3tulos, cada una en su mitad.\r\n\r\n   El relleno inferior es el que las separa de la leyenda legal. *\/\r\n\/* LAS DOS LISTAS MIDEN LO MISMO Y SE ALINEAN FILA A FILA.\r\n\r\n   El problema: la de la izquierda tiene t\u00edtulos y frases m\u00e1s largas, as\u00ed\r\n   que sus beneficios ocupan m\u00e1s alto y no coincid\u00edan con los de la\r\n   derecha. Se ve\u00eda como dos listas descuadradas.\r\n\r\n   La soluci\u00f3n no es igualar los textos sino el reparto: el contenedor se\r\n   ancla al pie y estira las dos columnas a la MISMA altura \u2014la del\r\n   contenido m\u00e1s alto\u2014, y dentro cada lista divide ese alto en cuatro\r\n   filas iguales. El primer beneficio de la izquierda queda entonces a la\r\n   misma altura que el primero de la derecha, tenga las palabras que\r\n   tenga.\r\n\r\n   Por eso el contenedor va anclado con bottom y no con inset:0: con\r\n   inset:0 ocupaba la escena entera y estirar las listas las habr\u00eda hecho\r\n   alt\u00edsimas. *\/\r\n.cdz-vic-listas{\r\n  position:absolute; z-index:2;\r\n  \/* El \"bottom\" es lo que las sube o las baja, y tiene un suelo: por\r\n     debajo de unos 3em la \u00faltima fila empieza a tocar la leyenda legal,\r\n     que va anclada al borde inferior de la secci\u00f3n. *\/\r\n  left:0; right:0; bottom:11.2em;\r\n  \/* LAS DOS LISTAS EMPIEZAN POR LA IZQUIERDA DE SU MITAD. Antes iban\r\n     pegadas a los bordes exteriores \u2014una a la izquierda del todo y la\r\n     otra a la derecha del todo\u2014 y la de ViCitra Z quedaba lej\u00edsimos de su\r\n     producto, contra el filo de la pantalla.\r\n\r\n     Ahora cada lista va CENTRADA en su mitad, con space-around: el mismo\r\n     reparto que usan los productos, as\u00ed que la lista queda bajo su\r\n     producto y no contra un borde. *\/\r\n  display:flex; align-items:stretch; justify-content:space-around;\r\n  max-width:var(--cdz-cont); margin-inline:auto;\r\n  padding:0;\r\n  \/* No intercepta clics: por debajo est\u00e1n las cajas, y un contenedor a\r\n     inset:0 se comer\u00eda cada pulsaci\u00f3n de la escena. *\/\r\n  pointer-events:none;\r\n}\r\n@media (max-width:991px){ .cdz-vic-listas{ bottom:2.6em; } }\r\n\r\n.cdz-vic-lista{\r\n  \/* DOS COLUMNAS DE DOS, no una de cuatro: la lista mide la mitad de alto\r\n     y la secci\u00f3n deja de ser tan larga.\r\n\r\n     El ancho fijo es lo que mantiene alineadas las dos mitades entre s\u00ed:\r\n     con su ancho natural, la de ViCitra Z \u2014de t\u00edtulos mucho m\u00e1s cortos\u2014\r\n     quedar\u00eda m\u00e1s estrecha y sus iconos caer\u00edan a otra distancia del\r\n     centro que los de la izquierda.\r\n\r\n     LOS 38em SALEN DE UNA CUENTA, no son a ojo. El beneficio m\u00e1s largo,\r\n     \"Libre de ingredientes de origen animal\", ocupa 17.5em con el icono y\r\n     su separaci\u00f3n; dos de esos m\u00e1s el hueco central son 36.8em, y media\r\n     pantalla son 45em. Si entra un t\u00edtulo m\u00e1s largo hay que rehacer la\r\n     cuenta: los t\u00edtulos van en una sola l\u00ednea y no se parten, as\u00ed que se\r\n     saldr\u00edan. *\/\r\n  width:38em;\r\n  display:grid;\r\n  grid-template-columns:repeat(2, 1fr);\r\n  grid-template-rows:repeat(2, 1fr);\r\n  column-gap:1.8em; row-gap:1.4em;\r\n  align-content:stretch;\r\n  opacity: var(--apagado);\r\n  transition:opacity .5s ease;\r\n}\r\n.cdz-vic-lista[data-activa]{ opacity:1; }\r\n\r\n\/* Cada beneficio es UNA SOLA L\u00cdNEA: icono y t\u00edtulo, y nada m\u00e1s. Al\r\n   quitar las descripciones ya no hay dos filas que alinear, as\u00ed que el\r\n   icono y el texto se centran entre s\u00ed en vez de colgar del borde\r\n   superior. *\/\r\n\/* CADA FILA CENTRADA POR SU PROPIO CENTRO, como un texto centrado: las\r\n   de t\u00edtulo corto quedan m\u00e1s estrechas y los iconos no forman una\r\n   columna recta. Es a prop\u00f3sito.\r\n\r\n   Las dos columnas van en \"auto\" y no en \"auto 1fr\": con 1fr el t\u00edtulo\r\n   se estiraba hasta llenar la lista y la fila ocupaba siempre todo el\r\n   ancho, as\u00ed que centrarla no cambiaba nada. En auto, la fila mide lo\r\n   que miden sus dos piezas y justify-content:center la coloca. *\/\r\n.cdz-vic-tarjeta{\r\n  display:grid;\r\n  grid-template-columns:auto auto;\r\n  justify-content:center;\r\n  column-gap:.7em;\r\n  align-items:center;\r\n  color:#FFFFFF;\r\n}\r\n\r\n.cdz-vic-icono{\r\n  \/* LA FILA VA DECLARADA, y no sobra. En la lista de la derecha el icono\r\n     ocupa la columna 2, pero en el HTML viene ANTES que el t\u00edtulo; sin\r\n     fila expl\u00edcita, la rejilla coloca el icono en la fila 1 columna 2 y\r\n     despu\u00e9s ya no le queda sitio al t\u00edtulo a su izquierda, as\u00ed que lo\r\n     manda a la fila 2. Era exactamente lo que descuadraba esa columna. *\/\r\n  grid-row:1; grid-column:1;\r\n  \/* Baja de 2.7 a 2.3em al pasar a dos columnas: cada fila tiene ahora\r\n     la mitad de ancho y el icono pesaba demasiado dentro de ella. *\/\r\n  width:2.3em; height:2.3em; flex:none; align-self:center;\r\n  border-radius:50%;\r\n  background:var(--cdz-naranja); color:#FFFFFF;\r\n  box-shadow:0 .3em .9em rgba(0,0,0,.3),\r\n             0 0 1.4em rgba(244,112,31,.55);\r\n  display:grid; place-items:center; line-height:0;\r\n}\r\n\/* LOS C\u00cdRCULOS DE VICITRA Z VAN EN BLANCO, porque sus iconos ya vienen\r\n   dibujados en naranja: un icono naranja sobre un c\u00edrculo naranja no se\r\n   ver\u00eda, y sobre blanco se recorta con holgura.\r\n\r\n   El resplandor tambi\u00e9n pasa a blanco c\u00e1lido. Si se hubiera quedado en\r\n   naranja, el halo saldr\u00eda del color del icono y no del c\u00edrculo, y eso\r\n   se lee como un borde sucio en vez de como luz.\r\n\r\n   Nota medida: el c\u00edrculo blanco contra el naranja del fondo da 2.6:1,\r\n   algo por debajo del 3:1 que se recomienda para una forma. Lo que lo\r\n   recorta de verdad es la sombra oscura de abajo, no la diferencia de\r\n   color \u2014 por eso esa sombra no se puede quitar. *\/\r\n.cdz-vic-lista[data-cdz-vic-lista=\"1\"] .cdz-vic-icono{\r\n  background:#FFFFFF;\r\n  box-shadow:0 .3em .9em rgba(0,0,0,.32),\r\n             0 0 1.4em rgba(255,240,220,.55);\r\n}\r\n\r\n\/* Alto y ancho acotados: los archivos vienen con proporciones distintas y\r\n   fijando solo una medida los alargados se saldr\u00edan del c\u00edrculo. *\/\r\n.cdz-vic-icono img{ width:1.45em; height:1.45em; object-fit:contain; display:block; user-select:none; }\r\n\r\n\/* Color declarado y no heredado: la herencia pierde contra cualquier\r\n   regla directa, incluido un \"h3{color:\u2026}\" del tema. *\/\r\n.cdz-vic .cdz-vic-tarjeta-titulo{\r\n  grid-column:2;\r\n  grid-row:1;\r\n  \/* Sin descripci\u00f3n debajo, el t\u00edtulo es todo el beneficio: crece.\r\n\r\n     UNA SOLA L\u00cdNEA SIEMPRE. El m\u00e1s largo \u2014\"Libre de ingredientes de\r\n     origen animal\", 38 caracteres\u2014 necesita unos 442px con la columna\r\n     entera, o sea un 23% de la pantalla. Como el tama\u00f1o de letra se\r\n     escala con el ancho de la ventana, esa proporci\u00f3n no cambia: lo que\r\n     entra en una l\u00ednea a 1920 entra igual a 1200.\r\n\r\n     Baja de 1.34 a 1.1em al pasar a dos columnas: a 1.34 los dos\r\n     beneficios m\u00e1s largos no cab\u00edan uno al lado del otro. *\/\r\n  font-size:1.1em; line-height:120%;\r\n  white-space:nowrap;\r\n  color:#FFFFFF;\r\n}\r\n\r\n\/* En pantallas estrechas las columnas laterales no caben: se apilan bajo\r\n   los productos, una detr\u00e1s de otra, y siguen atenu\u00e1ndose igual. *\/\r\n\/* En m\u00f3vil no hay dos columnas: se apilan, una tras otra, todav\u00eda\r\n   ancladas al pie. Siguen atenu\u00e1ndose igual, que es lo que conserva la\r\n   relaci\u00f3n entre cada lista y su producto. *\/\r\n@media (max-width:767px){\r\n  .cdz-vic-listas{\r\n    flex-direction:column; align-items:stretch;\r\n    gap:1.2em; padding:0 1.2em; bottom:2.6em;\r\n  }\r\n  \/* Apiladas no hay nada que casar, as\u00ed que vuelven a ajustarse al\r\n     contenido: cuatro filas iguales dejar\u00edan huecos raros. *\/\r\n  .cdz-vic-lista{ width:100%; padding-left:0; gap:.9em; display:flex; flex-direction:column; }\r\n  \/* Apiladas y a todo el ancho, el t\u00edtulo puede volver a partirse: en\r\n     390px de pantalla forzarlo a una l\u00ednea lo desbordar\u00eda. *\/\r\n  .cdz-vic .cdz-vic-tarjeta-titulo{ white-space:normal; }\r\n}\r\n\r\n\/* Las cajas se apagan DESDE EL CSS y no desde gsap: gsap se aplica al\r\n   arrancar el script y para entonces el navegador ya pint\u00f3, as\u00ed que se\r\n   ve\u00edan un instante antes de desaparecer para armarse.\r\n\r\n   El atributo lo pone un script m\u00ednimo pegado al marcado. Si el\r\n   JavaScript estuviera desactivado no corre, no se apaga nada y la\r\n   secci\u00f3n se ve completa \u2014 que es lo que tiene que pasar. *\/\r\n.cdz-vic[data-armando] .cdz-vic-opcion,\r\n.cdz-vic[data-armando] [data-cdz-vic-intro],\r\n.cdz-vic[data-armando] .cdz-vic-titulo,\r\n.cdz-vic[data-armando] [data-cdz-vic-sub],\r\n.cdz-vic[data-armando] [data-cdz-vic-pie]{ opacity:0; }\r\n\/* Las listas se apagan por el CONTENEDOR y no una a una: cada lista lleva\r\n   su propia opacidad seg\u00fan est\u00e9 activa o no, y animarla desde gsap la\r\n   dejar\u00eda fija en l\u00ednea y romper\u00eda el atenuado. *\/\r\n.cdz-vic[data-armando] .cdz-vic-listas,\r\n.cdz-vic[data-armando] [data-cdz-vic-vade]{ opacity:0; }\r\n\r\n\/* EL CARTEL DE LA ENTRADA \u00b7 los trozos de la frase, grandes y al centro.\r\n\r\n   Vive fuera de las capas de texto y desaparece en cuanto la frase pasa a\r\n   su sitio: es solo para la entrada.\r\n\r\n   El centrado va en el transform, as\u00ed que TODA animaci\u00f3n sobre \u00e9l tiene\r\n   que repetir xPercent:-50 e yPercent:-50 \u2014 gsap reescribe la\r\n   transformaci\u00f3n entera y sin eso el cartel se ir\u00eda a la esquina en\r\n   cuanto arrancara. *\/\r\n.cdz-vic-cartel{\r\n  position:absolute; z-index:2;\r\n  left:50%; top:40%;\r\n  transform:translate(-50%,-50%);\r\n  width:max-content; max-width:84%;\r\n  text-align:center;\r\n  font-size:4.6em; font-weight:600; line-height:1.08;\r\n  letter-spacing:-.02em; color:#FFFFFF;\r\n  pointer-events:none; opacity:0;\r\n  \/* Rejilla con los cuatro trozos apilados en la misma celda: el cartel\r\n     mide lo que mide el m\u00e1s largo y no da saltos de alto al cambiar. *\/\r\n  display:grid; place-items:center;\r\n}\r\n\/* Cada letra va dentro de su propia VENTANA con overflow oculto, y sube\r\n   desde debajo. No hay desenfoque ni rebote: la letra sencillamente no\r\n   est\u00e1 y aparece cruzando su l\u00ednea base.\r\n\r\n   El relleno y el margen negativo son obligatorios y valen lo mismo: sin\r\n   ellos, overflow:hidden recorta los acentos por arriba \u2014\"m\u00e1s\"\u2014 y los\r\n   rabos por abajo \u2014\"que\", \"refuerzan\"\u2014. Compens\u00e1ndolo con margen, la\r\n   ventana crece pero el texto ocupa exactamente lo mismo. *\/\r\n.cdz-vic-let{ display:inline-block; white-space:pre; }\r\n.cdz-vic-let > span{ display:inline-block; }\r\n\/* La perspectiva solo la usa el efecto \"giro\"; a los dem\u00e1s no les\r\n   estorba. *\/\r\n.cdz-vic-trozo{ grid-area:1\/1; perspective:700px; }\r\n@media (max-width:991px){ .cdz-vic-cartel{ font-size:3.2em; } }\r\n@media (max-width:767px){ .cdz-vic-cartel{ font-size:2.2em; max-width:90%; } }\r\n\r\n\/* Cada palabra es un inline-block: sin eso no admite transform, y el\r\n   desenfoque de entrada tampoco se aplicar\u00eda por separado. *\/\r\n.cdz-vic-pal{ display:inline-block; }\r\n\r\n\/* LEYENDA LEGAL \u00b7 una por producto, obligatoria *\/\r\n\/* Este margen hace dos cosas a la vez, y por eso es el que se toca para\r\n   bajar el carrusel y las flechas dejando la leyenda quieta: como el\r\n   bloque est\u00e1 anclado al borde inferior, encogerlo baja todo lo que tiene\r\n   encima. Lo que se paga es separaci\u00f3n entre las flechas y la leyenda.\r\n\r\n   Para bajar la leyenda TAMBI\u00c9N hay que reducir el padding-bottom del\r\n   contenido, que es otra cosa. *\/\r\n.cdz-vic .cdz-vic-legal{\r\n  \/* Queda DEBAJO de la banda, sobre el fondo de la secci\u00f3n, as\u00ed que\r\n     conserva el blanco: dentro de la banda habr\u00eda que oscurecerla y\r\n     dejar\u00eda de leerse como letra peque\u00f1a legal. *\/\r\n  margin-top:1.4em;\r\n  font-size:.92em; line-height:145%;\r\n  color:var(--texto-suave);\r\n  \/* EN UNA SOLA L\u00cdNEA. Se part\u00eda en dos por este tope, no por falta de\r\n     sitio: la leyenda de ViCitra mide 69em y el tope estaba en 56.\r\n\r\n     Cabe holgado en todos los anchos de escritorio \u2014 a 1920px necesita\r\n     1.359 de los 1.856 disponibles, y a 992px necesita 702 de 959 \u2014\r\n     porque el tama\u00f1o de letra se escala con el ancho de la ventana, as\u00ed\r\n     que la proporci\u00f3n entre lo que ocupa y lo que hay no cambia.\r\n\r\n     Ganar esa segunda l\u00ednea baja unos 28px el carrusel y las flechas,\r\n     porque el bloque est\u00e1 anclado al borde inferior y al encoger empuja\r\n     hacia abajo lo que tiene encima. *\/\r\n  max-width:74em; margin-inline:auto; text-align:center;\r\n}\r\n\/* Por debajo de 992px el sistema de escalado cambia y la letra crece\r\n   respecto al ancho, as\u00ed que ah\u00ed s\u00ed tiene que partirse. *\/\r\n@media (max-width:991px){ .cdz-vic .cdz-vic-legal{ max-width:56em; } }\r\n<\/style>\r\n\r\n<section class=\"cdz-vic\" id=\"vicitra\" data-cdz-vic>\r\n  <div class=\"cdz-vic-escena\" data-cdz-vic-escena>\r\n\r\n    <!-- \u00b7\u00b7\u00b7 Plano 0 \u00b7 resplandor \u00b7\u00b7\u00b7 -->\r\n    <div class=\"cdz-vic-fondo\" data-cdz-vic-fondo=\"0\" data-activo aria-hidden=\"true\"><\/div>\r\n    <div class=\"cdz-vic-fondo\" data-cdz-vic-fondo=\"1\" aria-hidden=\"true\"><\/div>\r\n\r\n    <!-- \u00b7\u00b7\u00b7 Plano 0 \u00b7 polvo \u00b7\u00b7\u00b7 -->\r\n    <canvas class=\"cdz-vic-polvo\" data-cdz-vic-polvo aria-hidden=\"true\"><\/canvas>\r\n\r\n    <div class=\"cdz-vic-cartel\" data-cdz-vic-cartel aria-hidden=\"true\"><\/div>\r\n\r\n    <!-- La frase de arriba va FUERA de las mitades y cruza las dos: es lo\r\n         \u00fanico que habla de los dos productos a la vez. Dentro de una\r\n         capa quedar\u00eda centrada en media pantalla y parecer\u00eda pertenecer\r\n         a ese producto. -->\r\n    <p class=\"cdz-vic-intro\" data-cdz-vic-intro>\r\n      En NOVAMED tenemos m\u00e1s presentaciones de VITAMINAS y MINERALES\r\n    <\/p>\r\n\r\n    <!-- Plano 1 \u00b7 los dos productos Van fuera de las capas de texto: tienen\r\n       que seguir visibles cuando la capa de al lado se apaga. -->\r\n    <div class=\"cdz-vic-piezas\">\r\n\r\n      <!-- \u00b7\u00b7\u00b7alto y \u00b7\u00b7\u00b7ancho iguales en las dos. \u00b7\u00b7\u00b7molde-escala da el tama\u00f1o de\r\n           la caja de polvo. -->\r\n      <button type=\"button\" class=\"cdz-vic-opcion\" data-cdz-vic-opcion=\"0\"\r\n data-activa>\r\n\r\n        <img class=\"cdz-vic-pieza\" data-cdz-vic-pieza\r\n             src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/09\/VICITRA-NUEVO.png\"\r\n             alt=\"ViCitra: vitamina C de 500 mg, caja por 30 c\u00e1psulas\"\r\n             loading=\"eager\" decoding=\"async\">\r\n\r\n        <span class=\"cdz-vic-aviso\" hidden>\r\n          Ver ViCitra\r\n          <i><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.8\"\r\n                  stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n               <path d=\"M9.6 6.5L15.1 12l-5.5 5.5\"\/>\r\n             <\/svg><\/i>\r\n        <\/span>\r\n\r\n        <!-- La flecha va DESPU\u00c9S del modelo y ANTES del sello en el documento,\r\n           solo por orden de lectura: los tres son hermanos absolutos y su\r\n           apilado lo decide el z-index. -->\r\n        <span class=\"cdz-vic-flechita\">\r\n          <svg viewBox=\"0 0 120 70\" fill=\"none\" stroke=\"currentColor\"\r\n               stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n               aria-hidden=\"true\">\r\n            <!-- La curva sale por abajo a la derecha \u2014el costado de la\r\n                 caja\u2014 y sube hacia la izquierda, donde est\u00e1 el sello. -->\r\n            <path class=\"trazo\" pathLength=\"100\" d=\"M114 60C82 66 44 58 22 26\"\/>\r\n            <!-- La punta, en dos trazos sueltos y no en un marker: los marker\r\n               heredan mal el grosor cuando el SVG se escala con la\r\n               tipograf\u00eda, y aqu\u00ed todo est\u00e1 en em. -->\r\n            <path class=\"punta\" d=\"M22 26L38 30\"\/>\r\n            <path class=\"punta\" d=\"M22 26L27 43\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n\r\n        <!-- SELLO \u00b7 SOLO EN VICITRA. Ver la nota de arriba: ViCitra Z no es\r\n           apto. -->\r\n        <span class=\"cdz-vic-sello\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\"\r\n               stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n            <path d=\"M20 4c0 8.2-4.3 12.4-11 12.4H5.6C5.6 9 10.6 4.6 20 4z\"\/>\r\n            <path d=\"M4.4 20c1.2-4.1 3.6-7 7.3-9.2\"\/>\r\n          <\/svg>\r\n          <!-- Saltos a mano: en un c\u00edrculo, el ajuste autom\u00e1tico deja renglones\r\n               de anchos muy distintos.\r\n\r\n               Cuatro renglones en vez de tres, y ninguno pasa de doce\r\n               caracteres \u2014\"vegetarianos\", que ya era el m\u00e1s largo antes\u2014.\r\n               As\u00ed el bloque sigue cabiendo en el c\u00edrculo sin tocar el\r\n               tama\u00f1o de letra.\r\n\r\n               El acento de \"Tambi\u00e9n\" se escribe aqu\u00ed aunque el texto se\r\n               vea en may\u00fasculas: lo pone el CSS, y guardarlo bien escrito\r\n               es lo que leen los lectores de pantalla. -->\r\n          <span>Tambi\u00e9n<br>apta para<br>veganos y<br>vegetarianos<\/span>\r\n        <\/span>\r\n      <\/button>\r\n\r\n      <button type=\"button\" class=\"cdz-vic-opcion\" data-cdz-vic-opcion=\"1\"\r\n>\r\n\r\n        <img class=\"cdz-vic-pieza\" data-cdz-vic-pieza\r\n             src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/09\/NUEVO-VICITRA-Z.png\"\r\n             alt=\"ViCitra Z: vitamina C de 500 mg m\u00e1s zinc, caja por 30 c\u00e1psulas\"\r\n             loading=\"eager\" decoding=\"async\">\r\n\r\n        <span class=\"cdz-vic-aviso\" hidden>\r\n          Ver ViCitra Z\r\n          <i><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.8\"\r\n                  stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n               <path d=\"M9.6 6.5L15.1 12l-5.5 5.5\"\/>\r\n             <\/svg><\/i>\r\n        <\/span>\r\n      <\/button>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- El vadem\u00e9cum es de Novamed y cubre los dos productos, as\u00ed que\r\n         los dos botones llevan al mismo sitio: uno por mitad, para que\r\n         cada producto tenga el suyo debajo.\r\n\r\n         target y rel: sale del sitio, as\u00ed que se abre aparte; y\r\n         noopener cierra el acceso que la p\u00e1gina de destino tendr\u00eda a\r\n         esta desde JavaScript, que es un agujero conocido. -->\r\n    <div class=\"cdz-vic-vade\" data-cdz-vic-vade>\r\n      <a href=\"https:\/\/www.novamedvademecum.com\/?wdt_search=Vicitra\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n        Conoce m\u00e1s\r\n        <i><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n             <path d=\"M8 16L16 8\"\/><path d=\"M9.5 8H16v6.5\"\/>\r\n           <\/svg><\/i>\r\n      <\/a>\r\n      <a href=\"https:\/\/www.novamedvademecum.com\/?wdt_search=Vicitra\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n        Conoce m\u00e1s\r\n        <i><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n             <path d=\"M8 16L16 8\"\/><path d=\"M9.5 8H16v6.5\"\/>\r\n           <\/svg><\/i>\r\n      <\/a>\r\n    <\/div>\r\n\r\n    <!-- ============ LAS DOS LISTAS DE BENEFICIOS ============\r\n         Viven FUERA de las capas de texto y las dos est\u00e1n siempre en\r\n         pantalla: la del producto elegido a plena opacidad y la otra\r\n         atenuada. Es la misma idea que las cajas \u2014 se ve lo que hay del\r\n         otro lado sin tener que cambiar.\r\n\r\n         La de ViCitra va a la izquierda y la de ViCitra Z a la derecha,\r\n         con los productos en el centro: la pantalla queda partida en dos\r\n         mitades que se corresponden con los dos empaques.\r\n\r\n         LA LEYENDA LEGAL NO EST\u00c1 AQU\u00cd, y no es un descuido: las dos\r\n         leyendas no pueden verse a la vez ni atenuada una, porque dicen\r\n         cosas opuestas \u2014\"es un medicamento\" contra \"no es un\r\n         medicamento\"\u2014. Se quedan dentro de su capa, que s\u00ed hace relevo. -->\r\n    <!-- LOS BENEFICIOS VAN ORDENADOS DEL T\u00cdTULO M\u00c1S CORTO AL M\u00c1S LARGO.\r\n         Con cada fila centrada por su propio centro, ese orden dibuja un\r\n         tri\u00e1ngulo limpio; en cualquier otro orden los anchos alternan y la\r\n         lista se ve dentada. Al a\u00f1adir o cambiar un beneficio hay que\r\n         recolocarlo donde le toque por largo. -->\r\n    <div class=\"cdz-vic-listas\">\r\n\r\n      <div class=\"cdz-vic-lista\" data-cdz-vic-lista=\"0\" data-activa>\r\n            <!-- CUATRO tarjetas: \"Apta para vegetarianos y veganos\" es el sello.\r\n            Si vuelve aqu\u00ed, quitar el sello. -->\r\n            <article class=\"cdz-vic-tarjeta\">\r\n            <span class=\"cdz-vic-icono\"><img decoding=\"async\" src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/ICONOS-VICITRA-04.png\" alt=\"\" loading=\"lazy\"><\/span>\r\n            <h3 class=\"cdz-vic-tarjeta-titulo\">0% az\u00facar<\/h3>\r\n            <\/article>\r\n            <article class=\"cdz-vic-tarjeta\">\r\n            <span class=\"cdz-vic-icono\"><img decoding=\"async\" src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/ICONOS-VICITRA-02.png\" alt=\"\" loading=\"lazy\"><\/span>\r\n            <h3 class=\"cdz-vic-tarjeta-titulo\">C\u00e1psula de origen vegetal<\/h3>\r\n            <\/article>\r\n            <article class=\"cdz-vic-tarjeta\">\r\n            <span class=\"cdz-vic-icono\"><img decoding=\"async\" src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/ICONOS-VICITRA-03.png\" alt=\"\" loading=\"lazy\"><\/span>\r\n            <h3 class=\"cdz-vic-tarjeta-titulo\">Sin transg\u00e9nicos ni conservantes<\/h3>\r\n            <\/article>\r\n            <article class=\"cdz-vic-tarjeta\">\r\n            <span class=\"cdz-vic-icono\"><img decoding=\"async\" src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/ICONOS-VICITRA-01.png\" alt=\"\" loading=\"lazy\"><\/span>\r\n            <h3 class=\"cdz-vic-tarjeta-titulo\">Libre de ingredientes de origen animal<\/h3>\r\n            <\/article>\r\n      <\/div>\r\n\r\n      <!-- Los textos de esta lista se reformularon para que cada uno tenga\r\n           el MISMO n\u00famero de palabras que el de su fila en la lista de la\r\n           izquierda: 8, 5, 6 y 6. As\u00ed las dos columnas pesan igual y\r\n           ninguna se ve m\u00e1s cargada que la otra.\r\n\r\n           Regla que se sigui\u00f3 al reescribirlos: no se a\u00f1adi\u00f3 ni un dato\r\n           nuevo, solo se dijo el mismo con m\u00e1s palabras. \"500 mg por\r\n           c\u00e1psula\" y \"Cada c\u00e1psula aporta 500 mg de vitamina C\" afirman\r\n           exactamente lo mismo. Cualquier cualidad que no estuviera antes\r\n           \u2014una dosis distinta, un beneficio, un adjetivo\u2014 ser\u00eda una\r\n           declaraci\u00f3n nueva sobre un producto sanitario y tendr\u00eda que\r\n           salir de su registro, no de aqu\u00ed. -->\r\n      <div class=\"cdz-vic-lista\" data-cdz-vic-lista=\"1\">\r\n            <article class=\"cdz-vic-tarjeta\">\r\n            <span class=\"cdz-vic-icono\">\r\n            <img decoding=\"async\" src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/09\/ICONOS-NARANJA-VICITRA-Z-01.png\" alt=\"Zinc\" loading=\"lazy\">\r\n            <\/span>\r\n            <h3 class=\"cdz-vic-tarjeta-titulo\">Zinc<\/h3>\r\n            <\/article>\r\n            <article class=\"cdz-vic-tarjeta\">\r\n            <span class=\"cdz-vic-icono\">\r\n            <img decoding=\"async\" src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/09\/ICONOS-NARANJA-VICITRA-Z-03.png\" alt=\"Vitamina C\" loading=\"lazy\">\r\n            <\/span>\r\n            <h3 class=\"cdz-vic-tarjeta-titulo\">Vitamina C<\/h3>\r\n            <\/article>\r\n            <article class=\"cdz-vic-tarjeta\">\r\n            <span class=\"cdz-vic-icono\"><img decoding=\"async\" src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/09\/ICONOS-NARANJA-VICITRA-Z-04.png\" alt=\"\" loading=\"lazy\"><\/span>\r\n            <h3 class=\"cdz-vic-tarjeta-titulo\">Sin az\u00facar<\/h3>\r\n            <\/article>\r\n            <article class=\"cdz-vic-tarjeta\">\r\n            <span class=\"cdz-vic-icono\">\r\n            <img decoding=\"async\" src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/09\/ICONOS-NARANJA-VICITRA-Z-02.png\" alt=\"Caja por 30 c\u00e1psulas\" loading=\"lazy\">\r\n            <\/span>\r\n            <h3 class=\"cdz-vic-tarjeta-titulo\">Caja por 30 c\u00e1psulas<\/h3>\r\n            <\/article>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- ============ CAPA 1 \u00b7 VICITRA ============ -->\r\n    <div class=\"cdz-vic-capa\" data-cdz-vic-capa=\"0\" data-tono=\"oscuro\">\r\n      <div class=\"cdz-vic-contenido\" data-cdz-vic-contenido>\r\n\r\n        <div class=\"cdz-vic-cabecera\">\r\n          <span class=\"cdz-vic-intro\">\r\n            En NOVAMED tenemos m\u00e1s presentaciones de VITAMINAS y MINERALES\r\n          <\/span>\r\n          <h2 class=\"cdz-vic-titulo\">\r\n            <span class=\"cdz-vic-brillo\">Prueba<\/span>\r\n            <img class=\"logo\" style=\"--logo-alto:1.53em\"\r\n                 src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/VICITRA-LOGO-scaled.png\"\r\n                 alt=\"ViCitra\" loading=\"eager\" decoding=\"async\">\r\n          <\/h2>\r\n          <p class=\"cdz-vic-sub\" data-cdz-vic-sub>\r\n            Medicamento para la deficiencia de la Vitamina C\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div data-cdz-vic-pie>\r\n          <p class=\"cdz-vic-legal\">\r\n            VICITRA\u00ae ES UN MEDICAMENTO, NO EXCEDER SU CONSUMO. REGISTRO SANITARIO NO. INVIMA 2015M-0003721-R1. LEER INDICACIONES Y CONTRAINDICACIONES EN LA ETIQUETA. SI LOS S\u00cdNTOMAS PERSISTEN, CONSULTAR AL M\u00c9DICO.\r\n          <\/p>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- CAPA 2 \u00b7 VICITRA Z Atributos de SU reel y SU empaque. -->\r\n    <div class=\"cdz-vic-capa\" data-cdz-vic-capa=\"1\" data-tono=\"oscuro\">\r\n      <div class=\"cdz-vic-contenido\" data-cdz-vic-contenido>\r\n\r\n        <div class=\"cdz-vic-cabecera\">\r\n          <span class=\"cdz-vic-intro\">\r\n            En NOVAMED tenemos m\u00e1s presentaciones de VITAMINAS y MINERALES\r\n          <\/span>\r\n          <h2 class=\"cdz-vic-titulo\">\r\n            <span class=\"cdz-vic-brillo\">Prueba<\/span>\r\n            <img class=\"logo\" style=\"--logo-alto:.9em\"\r\n                 src=\"https:\/\/cdzvit.com.co\/wp-content\/uploads\/2026\/08\/Sin-titulo-1-04-scaled.png\"\r\n                 alt=\"ViCitra Z\" loading=\"eager\" decoding=\"async\">\r\n          <\/h2>\r\n          <p class=\"cdz-vic-sub\" data-cdz-vic-sub>\r\n            Suplemento dietario para reforzar tu sistema inmune\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <!-- data-cdz-vic-pie: es lo que apaga esta leyenda antes del primer\r\n             pintado y lo que la hace entrar con la animaci\u00f3n. La mitad\r\n             izquierda lo ten\u00eda y esta no, as\u00ed que su leyenda se ve\u00eda desde\r\n             el primer fotograma, cuando todo lo dem\u00e1s a\u00fan no exist\u00eda. -->\r\n        <div data-cdz-vic-pie>\r\n          <!-- Leyenda de ViCitra Z, distinta de la de ViCitra. -->\r\n          <p class=\"cdz-vic-legal\">VICITRA\u00ae Z ES UN SUPLEMENTO DIETARIO, NO ES UN MEDICAMENTO Y NO SUPLE UNA ALIMENTACI\u00d3N EQUILIBRADA. ESTE PRODUCTO NO SIRVE PARA EL TRATAMIENTO, CURA O PREVENCI\u00d3N DE ALGUNA ENFERMEDAD. REGISTRO SANITARIO NO. SD2021-0004588. LEER INDICACIONES Y ADVERTENCIAS EN LA ETIQUETA\r\n          <\/p>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>(function(){var s=document.querySelector('[data-cdz-vic]');if(s)s.setAttribute('data-armando','');})();<\/script>\r\n\r\n<script>\r\n(function(){\r\n\r\n  function arranca(){\r\n    if(!window.gsap || !window.ScrollTrigger){ return setTimeout(arranca, 60); }\r\n    gsap.registerPlugin(ScrollTrigger);\r\n\r\n    var seccion = document.querySelector('[data-cdz-vic]');\r\n    if(!seccion) return;\r\n\r\n    var escena     = seccion.querySelector('[data-cdz-vic-escena]');\r\n    var capas      = [].slice.call(seccion.querySelectorAll('[data-cdz-vic-capa]'));\r\n    var contenidos = [].slice.call(seccion.querySelectorAll('[data-cdz-vic-contenido]'));\r\n    var fondos     = [].slice.call(seccion.querySelectorAll('[data-cdz-vic-fondo]'));\r\n    var opciones   = [].slice.call(seccion.querySelectorAll('[data-cdz-vic-opcion]'));\r\n    var listas     = [].slice.call(seccion.querySelectorAll('[data-cdz-vic-lista]'));\r\n    var listasEl   = seccion.querySelector('.cdz-vic-listas');\r\n    var vadeEl     = seccion.querySelector('[data-cdz-vic-vade]');\r\n    if(capas.length < 2 || opciones.length < 2) return;\r\n\r\n    var activa = 0;\r\n\r\n    \/* prefers-reduced-motion: sin polvo y sin giro. *\/\r\n    var quieto = window.matchMedia &&\r\n                 window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n    \/* Aqu\u00ed viv\u00eda todo lo del 3D: la carga de los materiales, el apagado de\r\n       sombras y oclusi\u00f3n, el zoom con la rueda, el giro sincronizado entre\r\n       las dos cajas y la vuelta al giro autom\u00e1tico. Se fue entero al pasar\r\n       los productos a PNG. *\/\r\n\r\n\r\n    \/* --- EL POLVO --- Arma la caja una vez al entrar y se queda de ambiente\r\n       despu\u00e9s. *\/\r\n    var polvo = (function(){\r\n      \/* Sin lienzo no hay efecto, pero las cajas TIENEN que aparecer igual:\r\n         por eso el sustituto suelta todos los avisos en cuanto lo llaman. *\/\r\n      var nulo = { activo:function(){}, forma:function(entradas, finTodo){\r\n        (entradas || []).forEach(function(e){ if(e.fin) e.fin(); });\r\n        if(finTodo) finTodo();\r\n      } };\r\n      var lienzo = seccion.querySelector('[data-cdz-vic-polvo]');\r\n      if(!lienzo) return nulo;\r\n      var ctx = lienzo.getContext('2d');\r\n      if(!ctx) return nulo;\r\n\r\n      var W = 0, H = 0, dpr = 1;\r\n      var granos = [], puntos = [];\r\n      var lazo = null, visible = false;\r\n      var ultimo = 0;\r\n\r\n      \/* B\u00fafer de p\u00edxeles: la caja se dibuja escribiendo en un ImageData y no\r\n         con fillRect. *\/\r\n      var lienzoBuf = null, datosBuf = null;\r\n      var bufX = 0, bufY = 0, bufW = 0, bufH = 0;\r\n      var sucios = null, nSucios = 0;\r\n\r\n      var modo = 'ambiente';     \/\/ 'ambiente' | 'formando'\r\n      var reloj = 0;             \/\/ segundos desde que arranc\u00f3 la formaci\u00f3n\r\n      var veloForma = 1;         \/\/ opacidad global de la formaci\u00f3n\r\n      var saliendo = false;\r\n      \/* Un conjunto por caja: cada una se revela cuando SU silueta est\u00e1\r\n         completa. *\/\r\n      var conjuntos = [];\r\n\r\n      \/* Tope duro adem\u00e1s del c\u00e1lculo por \u00e1rea: en un monitor muy ancho,\r\n         la densidad sola dar\u00eda varios cientos de part\u00edculas. *\/\r\n      var TOPE = 110;\r\n      \/* D\u00f3nde se apaga el ambiente: 0.62 empieza a desvanecerse y 0.80\r\n         ya no queda nada. Por debajo est\u00e1 el carrusel y la leyenda. *\/\r\n      var CORTE_INICIO = .62, CORTE_FIN = .80;\r\n\r\n      \/* N\u00fameros de la formaci\u00f3n. *\/\r\n      \/* Puntos por caja. Se arman dos, as\u00ed que se dibuja el doble: a 3400 por\r\n         caja eran unos 5.700 rect\u00e1ngulos. En pantallas angostas, la mitad. *\/\r\n      var META = 5600;\r\n      var VIAJE = 1.0;      \/\/ segundos que tarda una part\u00edcula en llegar\r\n      var ESCALON = .35;    \/\/ diferencia entre la primera y la \u00faltima\r\n      var SALIDA = .55;     \/\/ lo que tarda en desvanecerse al terminar\r\n      var DESTELLO = .32;   \/\/ lo que dura el fogonazo blanco al posarse\r\n\r\n      \/* DE D\u00d3NDE VIENE EL POLVO \u00b7 el alcance de la explosi\u00f3n.\r\n         Es la fracci\u00f3n del ANCHO DE LA ESCENA que abarca la nube antes de\r\n         cerrarse sobre la caja. En .55 las part\u00edculas salen de casi toda\r\n         la pantalla; baj\u00e1ndolo se ci\u00f1en a la caja como estaban antes.\r\n\r\n         Y no salen solo de abajo: se reparten en todas las direcciones\r\n         alrededor del producto, que es lo que hace que se lea como algo\r\n         que implosiona y no como humo subiendo.\r\n\r\n         OJO CON SUBIRLO: el b\u00fafer de p\u00edxeles se dimensiona con el\r\n         rect\u00e1ngulo que abarca salidas y llegadas, as\u00ed que cuanto m\u00e1s\r\n         lejos nacen, m\u00e1s memoria ocupa. A pantalla completa son unos\r\n         25 MB en un escritorio a doble densidad. *\/\r\n      var EXPLOSION = .62;\r\n      \/* Achatada: la nube se extiende m\u00e1s a lo ancho que a lo alto,\r\n         porque la escena tambi\u00e9n. Un c\u00edrculo perfecto se saldr\u00eda por\r\n         arriba y por abajo antes de llenar los lados. *\/\r\n      var ACHATADO = .72;\r\n\r\n      \/* CON CU\u00c1NTA LUZ NACE CADA PART\u00cdCULA, del 0 al 1.\r\n\r\n         Estaba en .10 y ese era el motivo real de que la explosi\u00f3n no se\r\n         viera: las part\u00edculas alcanzan su brillo pleno al POSARSE, as\u00ed\r\n         que justo cuando est\u00e1n repartidas por la pantalla eran casi\r\n         invisibles y solo aparec\u00edan al concentrarse sobre la caja. El\r\n         polvo s\u00ed se esparc\u00eda; no se ve\u00eda.\r\n\r\n         En .45 la nube se ve desde el principio. Subirlo m\u00e1s empieza a\r\n         tapar el fondo; bajarlo devuelve el efecto de \"aparece al\r\n         llegar\". *\/\r\n      var BRILLO_INICIAL = .45;\r\n\r\n      function mide(){\r\n        var r = escena.getBoundingClientRect();\r\n        var aW = Math.max(1, Math.round(r.width));\r\n        var aH = Math.max(1, Math.round(r.height));\r\n        \/* Sin cambio real no se hace nada: ResizeObserver dispara al\r\n           observar y por cosas que no mueven la escena. *\/\r\n        if(aW === W && aH === H && lienzo.width) return;\r\n        dpr = Math.min(window.devicePixelRatio || 1, 2);\r\n        W = aW;\r\n        H = aH;\r\n        lienzo.width  = Math.round(W * dpr);\r\n        lienzo.height = Math.round(H * dpr);\r\n        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\r\n        siembra();\r\n        \/* Si cambia el tama\u00f1o en mitad de la formaci\u00f3n, los destinos que se\r\n           midieron ya no valen. *\/\r\n        if(modo === 'formando') termina();\r\n      }\r\n\r\n      \/* ---------- AMBIENTE ---------- *\/\r\n      function grano(inicial){\r\n        return {\r\n          x: Math.random() * W,\r\n          y: inicial ? Math.random() * H * CORTE_FIN\r\n                     : H * (CORTE_FIN + Math.random() * .12),\r\n          r: .5 + Math.random() * 1.5,\r\n          a: .12 + Math.random() * .5,\r\n          vy: 5 + Math.random() * 13,\r\n          fase: Math.random() * Math.PI * 2,\r\n          amp: 3 + Math.random() * 9,\r\n          vel: .18 + Math.random() * .35\r\n        };\r\n      }\r\n\r\n      function siembra(){\r\n        var n = Math.min(TOPE, Math.round((W * H) \/ 26000));\r\n        granos = [];\r\n        for(var i = 0; i < n; i++) granos.push(grano(true));\r\n      }\r\n\r\n      function velo(y){\r\n        var p = y \/ H;\r\n        if(p < CORTE_INICIO) return 1;\r\n        if(p > CORTE_FIN) return 0;\r\n        return 1 - (p - CORTE_INICIO) \/ (CORTE_FIN - CORTE_INICIO);\r\n      }\r\n\r\n      function pintaAmbiente(dt){\r\n        for(var i = 0; i < granos.length; i++){\r\n          var g = granos[i];\r\n          g.y -= g.vy * dt;\r\n          g.fase += g.vel * dt;\r\n          if(g.y < -10) granos[i] = g = grano(false);\r\n\r\n          var op = g.a * velo(g.y);\r\n          if(op <= .01) continue;\r\n          ctx.beginPath();\r\n          ctx.arc(g.x + Math.sin(g.fase) * g.amp, g.y, g.r, 0, Math.PI * 2);\r\n          ctx.fillStyle = 'rgba(255,252,246,' + op.toFixed(3) + ')';\r\n          ctx.fill();\r\n        }\r\n      }\r\n\r\n      \/* FORMACI\u00d3N. Cada part\u00edcula es un cuadrado de uno o dos p\u00edxeles. *\/\r\n      function pintaForma(dt){\r\n        reloj += dt;\r\n        if(saliendo){\r\n          veloForma -= dt \/ SALIDA;\r\n          if(veloForma <= 0){ veloForma = 0; modo = 'ambiente'; apagaBuf(); return; }\r\n        }\r\n        if(!datosBuf) return;\r\n\r\n        \/* Apagar SOLO lo del fotograma anterior. Basta con poner el alfa\r\n           a cero: con alfa 0 el resto del p\u00edxel da igual. *\/\r\n        var q;\r\n        for(q = 0; q < nSucios; q++) datosBuf[sucios[q] + 3] = 0;\r\n        nSucios = 0;\r\n\r\n        var c, i;\r\n        for(c = 0; c < conjuntos.length; c++) conjuntos[c].llegados = 0;\r\n\r\n        for(i = 0; i < puntos.length; i++){\r\n          var p = puntos[i];\r\n          var e = (reloj - p.d) \/ VIAJE;\r\n          if(e < 0) e = 0;\r\n          if(e >= 1){ e = 1; conjuntos[p.set].llegados++; }\r\n\r\n          \/* easeOutCubic: salen r\u00e1pido y se posan despacio. *\/\r\n          var k = 1 - Math.pow(1 - e, 3);\r\n          var x = p.x0 + (p.tx - p.x0) * k;\r\n          var y = p.y0 + (p.ty - p.y0) * k;\r\n\r\n          \/* Temblor que se apaga a medida que llega: en el viaje se\r\n             mueve como polvo, al posarse queda quieto. *\/\r\n          var tem = (1 - k) * p.am;\r\n          if(tem > .01){\r\n            x += Math.sin(reloj * 2.4 + p.f) * tem;\r\n            y += Math.cos(reloj * 2.0 + p.f) * tem * .6;\r\n          }\r\n\r\n          var a = (BRILLO_INICIAL + (1 - BRILLO_INICIAL) * k) * veloForma * p.op;\r\n          if(a <= .012) continue;\r\n\r\n          \/* Destello al posarse: fogonazo blanco que se apaga al color en un\r\n             tercio de segundo. *\/\r\n          var fog = 0;\r\n          if(e >= 1){\r\n            fog = 1 - (reloj - (p.d + VIAJE)) \/ DESTELLO;\r\n            if(fog < 0) fog = 0;\r\n          }\r\n\r\n          var r, g, b;\r\n          if(k < .25 || fog >= .999){\r\n            r = 255; g = 252; b = 246;\r\n          }else{\r\n            \/* m es cu\u00e1nto color lleva ya. *\/\r\n            var m = (k - .25) \/ .75 * (1 - fog);\r\n            r = 255 + (p.r - 255) * m;\r\n            g = 252 + (p.g - 252) * m;\r\n            b = 246 + (p.b - 246) * m;\r\n          }\r\n\r\n          \/* A p\u00edxeles del dispositivo y enteros. El redondeo es aqu\u00ed: durante el\r\n             viaje la posici\u00f3n lleva decimales. *\/\r\n          var px = ((x - bufX) * dpr + .5) | 0;\r\n          var py = ((y - bufY) * dpr + .5) | 0;\r\n          var lado = p.sd;\r\n          if(px < 0 || py < 0 || px + lado > bufW || py + lado > bufH) continue;\r\n\r\n          var av = (a * 255) | 0;\r\n          var rr = r | 0, gg = g | 0, bb = b | 0;\r\n          for(var fy = 0; fy < lado; fy++){\r\n            var base = ((py + fy) * bufW + px) * 4;\r\n            for(var fx = 0; fx < lado; fx++){\r\n              var o = base + fx * 4;\r\n              datosBuf[o] = rr; datosBuf[o+1] = gg; datosBuf[o+2] = bb; datosBuf[o+3] = av;\r\n              sucios[nSucios++] = o;\r\n            }\r\n          }\r\n        }\r\n\r\n        ctx.putImageData(lienzoBuf, (bufX * dpr) | 0, (bufY * dpr) | 0);\r\n\r\n        \/* El producto entra MIENTRAS el polvo se apaga; si fuera despu\u00e9s se\r\n           ver\u00eda un fotograma con el hueco. *\/\r\n        var todos = true;\r\n        for(c = 0; c < conjuntos.length; c++){\r\n          var s = conjuntos[c];\r\n          if(!s.avisado && s.llegados >= s.total){\r\n            s.avisado = true;\r\n            if(s.fin) s.fin();\r\n          }\r\n          if(!s.avisado) todos = false;\r\n        }\r\n        if(!saliendo && todos) termina();\r\n      }\r\n\r\n      \/* El b\u00fafer se suelta al terminar: son varios MB. *\/\r\n      function apagaBuf(){\r\n        lienzoBuf = null; datosBuf = null; sucios = null; nSucios = 0;\r\n      }\r\n\r\n      \/* Solo apaga el polvo. Si se corta a la fuerza hay que soltar los\r\n         avisos pendientes o esa caja no aparecer\u00eda nunca. *\/\r\n      function termina(){\r\n        if(saliendo) return;\r\n        saliendo = true;\r\n        for(var c = 0; c < conjuntos.length; c++){\r\n          var s = conjuntos[c];\r\n          if(!s.avisado){ s.avisado = true; if(s.fin) s.fin(); }\r\n        }\r\n      }\r\n\r\n      function pinta(t){\r\n        var dt = ultimo ? Math.min((t - ultimo) \/ 1000, .05) : .016;\r\n        ultimo = t;\r\n        ctx.clearRect(0, 0, W, H);\r\n        if(modo === 'formando') pintaForma(dt);\r\n        else                    pintaAmbiente(dt);\r\n        lazo = requestAnimationFrame(pinta);\r\n      }\r\n\r\n      function enciende(){\r\n        if(lazo || quieto) return;\r\n        ultimo = 0;\r\n        lazo = requestAnimationFrame(pinta);\r\n      }\r\n      function apaga(){\r\n        if(lazo){ cancelAnimationFrame(lazo); lazo = null; }\r\n      }\r\n\r\n      \/* --- Muestreo de la imagen --- El PNG est\u00e1 en el mismo dominio que la\r\n         p\u00e1gina, as\u00ed que el lienzo no se marca y getImageData funciona. *\/\r\n      \/* Muestreo. Devuelve los puntos opacos y el recuadro de la silueta, o\r\n         null si el lienzo est\u00e1 marcado y no se puede leer. *\/\r\n      function muestrea(img, rect, meta){\r\n        try{\r\n          var w = Math.max(1, Math.round(rect.w));\r\n          var h = Math.max(1, Math.round(rect.h));\r\n          var oc = document.createElement('canvas');\r\n          oc.width = w; oc.height = h;\r\n          var oct = oc.getContext('2d', { willReadFrequently:true });\r\n          oct.drawImage(img, 0, 0, w, h);\r\n          var d = oct.getImageData(0, 0, w, h).data;\r\n\r\n          \/* El paso se calcula para acercarse a meta sin saber de antemano\r\n             cu\u00e1nta superficie del PNG es opaca. *\/\r\n          var paso = Math.max(1, Math.round(Math.sqrt((w * h) \/ (meta * 1.7))));\r\n          var brutos = [];\r\n          \/* El recuadro permite normalizar el tama\u00f1o despu\u00e9s: sin \u00e9l, el\r\n             molde queda del tama\u00f1o con que model-viewer encuadr\u00f3 el modelo\r\n             en ese instante. *\/\r\n          var ax = 1e9, ay = 1e9, bx = -1e9, by = -1e9;\r\n          for(var y = 0; y < h; y += paso){\r\n            for(var x = 0; x < w; x += paso){\r\n              var k = (y * w + x) * 4;\r\n              if(d[k + 3] > 70){\r\n                brutos.push([x, y, d[k], d[k+1], d[k+2]]);\r\n                if(x < ax) ax = x;\r\n                if(x > bx) bx = x;\r\n                if(y < ay) ay = y;\r\n                if(y > by) by = y;\r\n              }\r\n            }\r\n          }\r\n          if(brutos.length < 200) return null;\r\n          return { lista: brutos, ax: ax, ay: ay, bx: bx, by: by };\r\n        }catch(e){\r\n          return null;\r\n        }\r\n      }\r\n\r\n      \/* Armar las cajas. *\/\r\n      function forma(entradas, finTodo){\r\n        puntos = [];\r\n        conjuntos = [];\r\n\r\n        var meta = W < 820 ? Math.round(META * .5) : META;\r\n\r\n        for(var si = 0; si < entradas.length; si++){\r\n          var en = entradas[si] || {};\r\n          var muestra = en.img && en.rect ? muestrea(en.img, en.rect, meta) : null;\r\n          var brutos = muestra && muestra.lista;\r\n          var cj = { total:0, llegados:0, avisado:false, fin:en.fin || null };\r\n          conjuntos.push(cj);\r\n\r\n          if(!brutos){\r\n            \/* Esta caja no se pudo muestrear: se revela ya y las dem\u00e1s\r\n               siguen su camino. *\/\r\n            cj.avisado = true;\r\n            if(cj.fin) cj.fin();\r\n            continue;\r\n          }\r\n\r\n          \/* Si salieron de m\u00e1s se ralean al azar: quitar uno de cada N dejar\u00eda\r\n             una trama visible. *\/\r\n          var prob = Math.min(1, meta \/ brutos.length);\r\n          var retraso = en.retraso || 0;\r\n          var tope = (en.tope === undefined) ? 1 : en.tope;\r\n\r\n          \/* CON UNA IMAGEN EL MOLDE ES EXACTO. El lienzo muestreado ES el\r\n             producto, dibujado al tama\u00f1o en que se ve, as\u00ed que cada p\u00edxel\r\n             opaco va a su sitio uno a uno.\r\n\r\n             La normalizaci\u00f3n que hay debajo ven\u00eda de la \u00e9poca del 3D:\r\n             model-viewer encuadraba el modelo a su aire y hab\u00eda que\r\n             escalar la silueta a una fracci\u00f3n del elemento. Con un PNG\r\n             eso sobra y encima descuadrar\u00eda el resultado. *\/\r\n          var altoSil = Math.max(1, muestra.by - muestra.ay + 1);\r\n          var esc = en.exacto ? 1 : (en.rect.h * (en.frac || .55)) \/ altoSil;\r\n          var cxImg = (muestra.ax + muestra.bx) \/ 2;\r\n          var cyImg = (muestra.ay + muestra.by) \/ 2;\r\n          \/* Un \u00e1ngulo por part\u00edcula. Va con un giro \u00e1ureo en vez de al\r\n             azar puro: el azar deja huecos y grumos visibles, y esto\r\n             reparte los \u00e1ngulos de forma pareja sin que se note un patr\u00f3n. *\/\r\n          function angulo(i){ return i * 2.399963 + fase; }\r\n          var fase = Math.random() * Math.PI * 2;\r\n\r\n          var cxCaja = en.rect.x + en.rect.w \/ 2;\r\n          var cyCaja = en.rect.y + en.rect.h \/ 2;\r\n          \/* El alto real de la silueta ya escalada: es lo que manda en el\r\n             orden de armado, que va de abajo hacia arriba. *\/\r\n          var alto = en.exacto ? en.rect.h : altoSil * esc;\r\n          var arriba = en.exacto ? en.rect.y : cyCaja - alto \/ 2;\r\n\r\n          \/* El radio de la explosi\u00f3n, en p\u00edxeles. Sale del ancho de la\r\n             escena y no del tama\u00f1o de la caja: es lo que hace que la nube\r\n             ocupe la pantalla en vez de un palmo alrededor del producto. *\/\r\n          var radio = W * EXPLOSION;\r\n\r\n          for(var i = 0; i < brutos.length; i++){\r\n            if(prob < 1 && Math.random() > prob) continue;\r\n            var b = brutos[i];\r\n            \/* En modo exacto el lienzo ES el elemento, as\u00ed que el mapeo es\r\n               uno a uno. Centrar la silueta \u2014lo que hac\u00eda falta con los\r\n               modelos\u2014 descolocar\u00eda el producto. *\/\r\n            var tx = en.exacto ? en.rect.x + b[0] : cxCaja + (b[0] - cxImg) * esc;\r\n            var ty = en.exacto ? en.rect.y + b[1] : cyCaja + (b[1] - cyImg) * esc;\r\n            \/* ny: 0 arriba de la caja, 1 abajo. La caja se arma de abajo\r\n               hacia arriba, que se lee como que crece desde el suelo. *\/\r\n            var ny = (ty - arriba) \/ alto;\r\n            puntos.push({\r\n              set: si,\r\n              tx: tx, ty: ty,\r\n              \/* En todas las direcciones. La ra\u00edz cuadrada del azar en el\r\n                 radio reparte las part\u00edculas por igual en la superficie\r\n                 del c\u00edrculo: sin ella se amontonar\u00edan en el centro, que es\r\n                 justo donde no hacen falta. *\/\r\n              x0: cxCaja + Math.cos(angulo(i)) * radio * (.35 + Math.sqrt(Math.random()) * .65),\r\n              y0: cyCaja + Math.sin(angulo(i)) * radio * ACHATADO * (.35 + Math.sqrt(Math.random()) * .65),\r\n              r: b[2], g: b[3], b: b[4],\r\n              \/* Un p\u00edxel casi siempre y dos de vez en cuando: mezclar los dos\r\n                 tama\u00f1os evita que la nube se vea como una trama. *\/\r\n              s: Math.random() < .78 ? 1 : 2,\r\n              d: retraso + ESCALON * (1 - ny) + Math.random() * .12,\r\n              op: tope,\r\n              am: 6 + Math.random() * 14,\r\n              f: Math.random() * Math.PI * 2\r\n            });\r\n            cj.total++;\r\n          }\r\n        }\r\n\r\n        if(!puntos.length){ if(finTodo) finTodo(); return; }\r\n\r\n        \/* B\u00fafer ce\u00f1ido a lo que se dibuja: el rect\u00e1ngulo que abarca salidas y\r\n           llegadas m\u00e1s un margen por el temblor. *\/\r\n        var minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;\r\n        for(var j = 0; j < puntos.length; j++){\r\n          var q = puntos[j];\r\n          q.sd = Math.max(1, Math.round(q.s * dpr));   \/\/ lado en p\u00edxeles del dispositivo\r\n          var m = q.am + 3;\r\n          if(q.x0 - m < minX) minX = q.x0 - m;\r\n          if(q.tx - m < minX) minX = q.tx - m;\r\n          if(q.y0 - m < minY) minY = q.y0 - m;\r\n          if(q.ty - m < minY) minY = q.ty - m;\r\n          if(q.x0 + m > maxX) maxX = q.x0 + m;\r\n          if(q.tx + m > maxX) maxX = q.tx + m;\r\n          if(q.y0 + m > maxY) maxY = q.y0 + m;\r\n          if(q.ty + m > maxY) maxY = q.ty + m;\r\n        }\r\n        bufX = Math.max(0, Math.floor(minX));\r\n        bufY = Math.max(0, Math.floor(minY));\r\n        bufW = Math.min(Math.round(W * dpr) - ((bufX * dpr) | 0),\r\n                        Math.ceil((maxX - bufX) * dpr) + 2);\r\n        bufH = Math.min(Math.round(H * dpr) - ((bufY * dpr) | 0),\r\n                        Math.ceil((maxY - bufY) * dpr) + 2);\r\n        if(bufW < 2 || bufH < 2){ if(finTodo) finTodo(); return; }\r\n\r\n        try{\r\n          lienzoBuf = ctx.createImageData(bufW, bufH);\r\n          datosBuf = lienzoBuf.data;\r\n          \/* Espacio para los p\u00edxeles escritos en un fotograma: cada\r\n             part\u00edcula ocupa como mucho su lado al cuadrado. *\/\r\n          var tope = 0;\r\n          for(var t = 0; t < puntos.length; t++) tope += puntos[t].sd * puntos[t].sd;\r\n          sucios = new Int32Array(tope + 16);\r\n          nSucios = 0;\r\n        }catch(e){\r\n          apagaBuf();\r\n          if(finTodo) finTodo();\r\n          return;\r\n        }\r\n\r\n        reloj = 0; veloForma = 1; saliendo = false;\r\n        modo = 'formando';\r\n        enciende();\r\n      }\r\n\r\n      mide();\r\n      \/* ResizeObserver y no resize: el alto va en vh y cambia tambi\u00e9n cuando\r\n         se repliega la barra del navegador m\u00f3vil. *\/\r\n      if(window.ResizeObserver){\r\n        new ResizeObserver(function(){ mide(); }).observe(escena);\r\n      }else{\r\n        window.addEventListener('resize', mide);\r\n      }\r\n\r\n      \/* Nada se dibuja con la secci\u00f3n fuera de pantalla. *\/\r\n      if(window.IntersectionObserver){\r\n        new IntersectionObserver(function(e){\r\n          visible = e[0].isIntersecting;\r\n          visible ? enciende() : apaga();\r\n        }, { threshold: 0 }).observe(seccion);\r\n      }else{\r\n        enciende();\r\n      }\r\n\r\n      document.addEventListener('visibilitychange', function(){\r\n        document.hidden ? apaga() : (visible && enciende());\r\n      });\r\n\r\n      if(quieto){\r\n        ctx.clearRect(0,0,W,H);\r\n        granos.forEach(function(g){\r\n          var op = g.a * velo(g.y);\r\n          if(op <= .01) return;\r\n          ctx.beginPath();\r\n          ctx.arc(g.x, g.y, g.r, 0, Math.PI*2);\r\n          ctx.fillStyle = 'rgba(255,252,246,' + op.toFixed(3) + ')';\r\n          ctx.fill();\r\n        });\r\n      }\r\n\r\n      return {\r\n        activo: function(si){ si ? enciende() : apaga(); },\r\n        forma: forma\r\n      };\r\n    })();\r\n\r\n    \/* Aqu\u00ed viv\u00eda el carrusel: montaCarrusel, su bucle por rotaci\u00f3n del DOM,\r\n       el avance autom\u00e1tico y las flechas. Se fue entero al pasar los\r\n       beneficios a una rejilla de cuatro visibles a la vez. *\/\r\n\r\n\r\n    \/* El cambio de producto. *\/\r\n    var cambiando = false;\r\n\r\n    function muestra(n){\r\n      if(cambiando || n === activa) return;\r\n      cambiando = true;\r\n\r\n      var sale = activa;\r\n      activa = n;\r\n\r\n      \/* Un solo atributo mueve todo lo de las cajas: la imagen, la\r\n         opacidad, el r\u00f3tulo, el sello y el clic. Y lo mismo con las\r\n         listas: la del producto elegido pasa a plena opacidad y la otra\r\n         se aten\u00faa, sin que ninguna desaparezca. *\/\r\n      opciones.forEach(function(o, i){\r\n        if(i === n) o.setAttribute('data-activa', '');\r\n        else o.removeAttribute('data-activa');\r\n      });\r\n      listas.forEach(function(l, i){\r\n        if(i === n) l.setAttribute('data-activa', '');\r\n        else l.removeAttribute('data-activa');\r\n      });\r\n\r\n      var tl = gsap.timeline({ onComplete: function(){ cambiando = false; } });\r\n\r\n      \/* Los fondos se cruzan con la misma curva que el resto, para que\r\n         la luz acompa\u00f1e al movimiento en vez de ir por su cuenta. *\/\r\n      tl.to(fondos[sale], {opacity:0, duration:.7, ease:'power2.inOut'}, 0);\r\n      tl.to(fondos[n],    {opacity:1, duration:.7, ease:'power2.inOut'}, 0);\r\n\r\n      tl.to(contenidos[sale], {opacity:0, y:'-2em', duration:.28, ease:'power1.in'}, 0);\r\n      tl.add(function(){ capas[sale].removeAttribute('data-activa'); }, .28);\r\n      tl.to(capas[sale], {opacity:0, duration:.01}, .28);\r\n      tl.add(function(){ capas[n].setAttribute('data-activa',''); }, .42);\r\n      tl.set(capas[n], {opacity:1}, .42);\r\n      tl.fromTo(contenidos[n],\r\n        {opacity:0, y:'2em'}, {opacity:1, y:'0em', duration:.45, ease:'power2.out'}, .42);\r\n\r\n    }\r\n\r\n    \/* YA NO SE CAMBIA DE PRODUCTO. Con la pantalla partida los dos est\u00e1n\r\n       enteros y a la vez, as\u00ed que no hay nada que elegir: se marcan los\r\n       dos como activos de una vez y no se escucha ning\u00fan clic.\r\n\r\n       muestra() se queda en el archivo, sin llamadas, por si alguna vez\r\n       se vuelve a la composici\u00f3n de un producto cada vez. *\/\r\n    opciones.forEach(function(o){ o.setAttribute('data-activa',''); });\r\n    listas.forEach(function(l){ l.setAttribute('data-activa',''); });\r\n\r\n    \/* Una sola ruta para todos los tama\u00f1os: sin viaje de las cajas, la\r\n       misma interacci\u00f3n sirve con rat\u00f3n y con el pulgar. *\/\r\n    \/* Las dos mitades encendidas desde el principio. *\/\r\n    capas.forEach(function(c){ c.setAttribute('data-activa',''); });\r\n    fondos.forEach(function(f){ f.setAttribute('data-activo',''); });\r\n    gsap.set(capas, {opacity:1});\r\n    gsap.set(fondos, {opacity:1});\r\n    gsap.set(contenidos, {y:0, opacity:1});\r\n\r\n    \/* Las dos cajas arrancan invisibles desde el principio: si se vieran al\r\n       acercarse, al llegar desaparecer\u00edan para volver a armarse. *\/\r\n    \/* Sin armado el apagado del CSS sobra, o las cajas no aparecer\u00edan. *\/\r\n    if(quieto) seccion.removeAttribute('data-armando');\r\n\r\n    if(!quieto){\r\n      opciones.forEach(function(o){\r\n        o.setAttribute('data-formando','');\r\n        gsap.set(o, {opacity:0});\r\n      });\r\n    }\r\n\r\n    \/* =====================================================================\r\n       LOS MOLDES SE PREPARAN POR ADELANTADO\r\n\r\n       El molde de cada caja es una instant\u00e1nea del modelo 3D, y sacarla no\r\n       es instant\u00e1neo: hay que esperar a que el GLB cargue, asentar la\r\n       c\u00e1mara, dejar pasar dos fotogramas y decodificar la imagen. Antes\r\n       todo eso empezaba cuando le tocaba el turno a las cajas, as\u00ed que\r\n       entre el titular y el polvo hab\u00eda varios segundos en los que no\r\n       pasaba nada en pantalla.\r\n\r\n       Ahora arranca en cuanto la secci\u00f3n ASOMA \u2014con que se vea un poco\r\n       basta\u2014, mucho antes de que el cartel termine. Para cuando la l\u00ednea\r\n       de tiempo llega a las cajas, los moldes suelen estar listos y el\r\n       polvo empieza al instante.\r\n\r\n       No se puede adelantar m\u00e1s de la cuenta: el molde se saca del PNG ya\r\n       dibujado y medido en su sitio, as\u00ed que hace falta que la secci\u00f3n\r\n       tenga posici\u00f3n y tama\u00f1o definitivos.\r\n       ===================================================================== *\/\r\n    var ESPERA_IMG = 3000;\r\n    var moldes = [], pedidos = false;\r\n\r\n    function molde(op, listo){\r\n      var el = op.querySelector('.cdz-vic-pieza');\r\n      if(!el) return listo(null);\r\n\r\n      var resuelto = false;\r\n      function ya(){\r\n        if(resuelto) return; resuelto = true;\r\n\r\n        \/* Una COPIA de la imagen, no el <img> de la p\u00e1gina: el de la\r\n           p\u00e1gina puede venir de cach\u00e9 sin decodificar todav\u00eda, y\r\n           drawImage sobre eso devuelve un lienzo en blanco.\r\n\r\n           crossOrigin en an\u00f3nimo porque despu\u00e9s hay que LEER los p\u00edxeles:\r\n           un lienzo con una imagen de otro origen queda marcado y\r\n           getImageData lanza una excepci\u00f3n de seguridad. Aqu\u00ed la imagen\r\n           es del mismo dominio, as\u00ed que no hay problema \u2014 el atributo es\r\n           por si alg\u00fan d\u00eda se sirve desde un CDN. *\/\r\n        var img = new Image();\r\n        img.crossOrigin = 'anonymous';\r\n        \/* AQU\u00cd NO SE MIDE NADA. El molde guarda solo la imagen; el\r\n           rect\u00e1ngulo de destino se mide al lanzar el polvo, no ahora.\r\n\r\n           El motivo: los moldes se preparan en cuanto la secci\u00f3n asoma,\r\n           y en ese momento la otra imagen puede no haber cargado. Como\r\n           los productos van en width:auto, uno sin cargar mide cero, el\r\n           reparto de la fila cambia y el que s\u00ed carg\u00f3 aparece en otro\r\n           sitio del que va a ocupar al final. Con la medida tomada ah\u00ed,\r\n           el polvo se armaba desplazado. *\/\r\n        img.onload  = function(){\r\n          listo({ img: img, exacto: true, el: el });\r\n        };\r\n        img.onerror = function(){ listo(null); };\r\n        img.src = el.currentSrc || el.src;\r\n      }\r\n\r\n      if(el.complete && el.naturalWidth) ya();\r\n      else{\r\n        el.addEventListener('load', ya, {once:true});\r\n        el.addEventListener('error', function(){ if(!resuelto){ resuelto = true; listo(null); } }, {once:true});\r\n        setTimeout(function(){ if(!resuelto){ resuelto = true; listo(null); } }, ESPERA_IMG);\r\n      }\r\n    }\r\n\r\n    \/* Se pide una sola vez. Cada molde guarda su resultado y avisa por si\r\n       alguien lo estaba esperando. *\/\r\n    function preparaMoldes(){\r\n      if(pedidos || quieto) return;\r\n      pedidos = true;\r\n      opciones.forEach(function(op, i){\r\n        molde(op, function(m){\r\n          moldes[i] = { valor: m };\r\n          if(moldes.__avisa) moldes.__avisa();\r\n        });\r\n      });\r\n    }\r\n\r\n    \/* LA FORMACI\u00d3N. Una vez, al entrar, y las dos cajas a la vez \u2014\r\n       escalonadas parec\u00eda que solo se armaba una. *\/\r\n    var RETRASO_SEGUNDA = 0;\r\n\r\n    function formaCajas(){\r\n      \/* Relevo: se llama cuando SU silueta est\u00e1 armada, no cuando el polvo\r\n         termin\u00f3 de irse. Se anima el bot\u00f3n, no la imagen. *\/\r\n      function revela(op){\r\n        return function(){\r\n          op.removeAttribute('data-formando');\r\n          gsap.to(op, {opacity:1, duration:.55, ease:'power2.out'});\r\n        };\r\n      }\r\n\r\n      \/* El sello entra medio segundo despu\u00e9s de la caja: con todo lo dem\u00e1s\r\n         ser\u00eda un adorno; solo y despu\u00e9s, es el remate. *\/\r\n      function golpeSello(op){\r\n        var sello = op.querySelector('.cdz-vic-sello');\r\n        if(!sello) return;\r\n        \/* La opacidad se anima aqu\u00ed y SE BORRA al terminar: si quedara en\r\n           l\u00ednea, ese opacity:1 le ganar\u00eda a la regla que aten\u00faa el sello. *\/\r\n        gsap.fromTo(sello,\r\n          {opacity:0, scale:.6, rotation:-8},\r\n          {opacity:1, scale:1, rotation:-8, duration:.7, delay:.5,\r\n           ease:'back.out(2.2)', transformOrigin:'50% 50%',\r\n           onComplete:function(){ gsap.set(sello, {clearProps:'opacity'}); }});\r\n      }\r\n\r\n      \/* La punta aparece al final, con la l\u00ednea ya trazada. No se toca la\r\n         opacidad del contenedor: esa la maneja el CSS. *\/\r\n      function dibujaFlecha(op){\r\n        var f = op.querySelector('.cdz-vic-flechita');\r\n        if(!f) return;\r\n        gsap.to(f.querySelectorAll('.trazo'),\r\n          {strokeDashoffset:0, duration:.6, delay:1.2, ease:'power2.inOut'});\r\n        gsap.to(f.querySelectorAll('.punta'),\r\n          {opacity:1, duration:.22, delay:1.72});\r\n      }\r\n\r\n      if(quieto){\r\n        opciones.forEach(function(o){\r\n          revela(o)();\r\n          \/* Sin animaci\u00f3n, pero la flecha tiene que quedar dibujada:\r\n             si no, se queda invisible para siempre. *\/\r\n          var f = o.querySelector('.cdz-vic-flechita');\r\n          if(f){\r\n            gsap.set(f.querySelectorAll('.trazo'), {strokeDashoffset:0});\r\n            gsap.set(f.querySelectorAll('.punta'), {opacity:1});\r\n          }\r\n        });\r\n        return;\r\n      }\r\n\r\n      preparaMoldes();   \/\/ por si el observador no lleg\u00f3 a pedirlos\r\n\r\n      function lanza(){\r\n        \/* La escena y cada producto se miden AHORA, con la composici\u00f3n ya\r\n           asentada y las dos im\u00e1genes cargadas. *\/\r\n        var re = escena.getBoundingClientRect();\r\n\r\n        var entradas = opciones.map(function(op, i){\r\n          var m = moldes[i] && moldes[i].valor;\r\n          var rect = null;\r\n          if(m && m.el){\r\n            var ri = m.el.getBoundingClientRect();\r\n            if(ri.width && ri.height){\r\n              rect = { x: ri.left - re.left, y: ri.top - re.top,\r\n                       w: ri.width, h: ri.height };\r\n            }\r\n          }\r\n          return {\r\n            img: m && m.img,\r\n            rect: rect,\r\n            exacto: m && m.exacto,\r\n            retraso: i === 0 ? 0 : RETRASO_SEGUNDA,\r\n            \/* Las dos a opacidad plena, tambi\u00e9n la apagada: a media luz\r\n               sobre el verde su armado no se ve\u00eda. *\/\r\n            tope: 1,\r\n            fin: (function(){\r\n              var termina = revela(op);\r\n              \/* El sello solo existe en ViCitra; en la otra caja golpeSello\r\n                 no encuentra nada y no hace nada. *\/\r\n              return function(){ termina(); golpeSello(op); dibujaFlecha(op); };\r\n            })()\r\n          };\r\n        });\r\n        polvo.forma(entradas);\r\n      }\r\n\r\n      \/* Si los moldes ya est\u00e1n, el polvo empieza en el mismo fotograma. Si\r\n         no, se espera a que lleguen \u2014 pero esa espera ya no es la de la\r\n         captura entera, solo lo que le falte. *\/\r\n      function listos(){\r\n        for(var i = 0; i < opciones.length; i++) if(!moldes[i]) return false;\r\n        return true;\r\n      }\r\n      if(listos()){ moldes.__avisa = null; lanza(); }\r\n      else moldes.__avisa = function(){ if(listos()){ moldes.__avisa = null; lanza(); } };\r\n    }\r\n\r\n    \/* =====================================================================\r\n       ENTRADA EN CASCADA\r\n\r\n       Orden: la frase de arriba aparece EN EL CENTRO de la secci\u00f3n y sube\r\n       a su sitio; despu\u00e9s el titular con el logo hace lo mismo; despu\u00e9s se\r\n       arman las cajas; y por \u00faltimo el carrusel entra desde abajo.\r\n\r\n       Los textos entran PALABRA POR PALABRA con desenfoque, como en la\r\n       referencia: cada palabra llega borrosa y se resuelve, y la l\u00ednea se\r\n       va recomponiendo mientras llegan.\r\n\r\n       Los tiempos est\u00e1n todos en TIEMPOS, juntos, porque est\u00e1n encadenados\r\n       y mover uno solo desalinea el siguiente.\r\n       ===================================================================== *\/\r\n    \/* LOS TROZOS DE LA FRASE. Juntos reconstruyen EXACTAMENTE el texto del\r\n       <span class=\"cdz-vic-intro\">, y esa correspondencia es obligatoria:\r\n       si se cambia uno sin el otro, la entrada dice una cosa y lo que\r\n       queda escrito arriba dice otra.\r\n\r\n       Se quit\u00f3 \"que refuerzan tu sistema inmune\" de los dos sitios a la\r\n       vez, por eso mismo. Los tiempos no hay que recalcularlos: cada\r\n       trozo dura lo que necesita seg\u00fan sus letras y el resto de la\r\n       secuencia se cuelga del final del cartel. *\/\r\n    var TROZOS = [\r\n      'En NOVAMED',\r\n      'tenemos m\u00e1s presentaciones de',\r\n      'VITAMINAS y MINERALES'\r\n    ];\r\n\r\n    \/* =====================================================================\r\n       C\u00d3MO ENTRA CADA BLOQUE DEL CARTEL \u00b7 se cambia aqu\u00ed, en una palabra.\r\n\r\n         'foco'     el bloque entra entero, grande y desenfocado, y se\r\n                    asienta a su tama\u00f1o. Como una c\u00e1mara enfocando. No hay\r\n                    letra a letra: el bloque es una sola pieza.\r\n         'giro'     cada letra cae girando sobre su base, como una ficha\r\n                    que se voltea hasta quedar de frente.\r\n         'barrido'  las letras se resuelven de izquierda a derecha con un\r\n                    desfase muy corto, as\u00ed que no se lee como escritura\r\n                    sino como una onda que cruza el bloque.\r\n\r\n       Los tres comparten los tiempos de TIEMPOS y el orden de la\r\n       secuencia; solo cambia el gesto.\r\n       ===================================================================== *\/\r\n    var EFECTO = 'foco';\r\n\r\n    var EFECTOS = {\r\n      foco: {\r\n        prepara: function(chars, trozo){\r\n          gsap.set(trozo, {opacity:0, scale:1.4, filter:'blur(18px)'});\r\n          gsap.set(chars, {clearProps:'all'});\r\n        },\r\n        dura: function(){ return .8; },\r\n        entra: function(tl, chars, trozo, t){\r\n          tl.to(trozo, {opacity:1, scale:1, filter:'blur(0px)',\r\n                        duration:.8, ease:'power3.out'}, t);\r\n        },\r\n        sale: function(tl, chars, trozo, t){\r\n          tl.to(trozo, {opacity:0, scale:.9, filter:'blur(14px)',\r\n                        duration: TIEMPOS.trozoSale, ease:'power2.in'}, t);\r\n        }\r\n      },\r\n\r\n      giro: {\r\n        prepara: function(chars, trozo){\r\n          gsap.set(trozo, {opacity:1});\r\n          gsap.set(chars, {opacity:0, rotationX:-95, y:'.2em',\r\n                           transformOrigin:'50% 100%'});\r\n        },\r\n        dura: function(n){ return (n - 1) * TIEMPOS.entreLetra + TIEMPOS.letra; },\r\n        entra: function(tl, chars, trozo, t){\r\n          tl.to(chars, {opacity:1, rotationX:0, y:'0em',\r\n                        duration: TIEMPOS.letra, ease:'power3.out',\r\n                        stagger: TIEMPOS.entreLetra}, t);\r\n        },\r\n        sale: function(tl, chars, trozo, t){\r\n          tl.to(chars, {opacity:0, rotationX:75, duration: TIEMPOS.trozoSale,\r\n                        ease:'power2.in', stagger: TIEMPOS.entreLetra * .25}, t);\r\n        }\r\n      },\r\n\r\n      barrido: {\r\n        prepara: function(chars, trozo){\r\n          gsap.set(trozo, {opacity:1});\r\n          gsap.set(chars, {opacity:0, filter:'blur(12px)', x:'-.12em'});\r\n        },\r\n        \/* El desfase es un tercio del de escritura: las letras se pisan\r\n           unas a otras y el ojo lee una onda, no un tecleo. *\/\r\n        dura: function(n){ return (n - 1) * TIEMPOS.entreLetra * .34 + .45; },\r\n        entra: function(tl, chars, trozo, t){\r\n          tl.to(chars, {opacity:1, filter:'blur(0px)', x:'0em',\r\n                        duration:.45, ease:'power2.out',\r\n                        stagger: TIEMPOS.entreLetra * .34}, t);\r\n        },\r\n        sale: function(tl, chars, trozo, t){\r\n          tl.to(chars, {opacity:0, filter:'blur(12px)', x:'.12em',\r\n                        duration: TIEMPOS.trozoSale, ease:'power2.in',\r\n                        stagger: TIEMPOS.entreLetra * .18}, t);\r\n        }\r\n      }\r\n    };\r\n\r\n    var TIEMPOS = {\r\n      \/* --- El cartel del centro, letra a letra ---\r\n         No hay un \"paso entre trozos\" fijo: cada uno dura lo que necesita\r\n         seg\u00fan sus letras, y el siguiente arranca cuando el anterior se\r\n         va. Un tiempo fijo obligar\u00eda a medirlo por el trozo m\u00e1s largo y\r\n         \"En NOVAMED\" se quedar\u00eda esperando en pantalla sin motivo. *\/\r\n      letra:      .22,   \/\/ lo que tarda una letra en resolverse\r\n      entreLetra: .03,   \/\/ desfase entre letras \u2014 el ritmo de escritura\r\n      reposo:     .45,   \/\/ lo que se queda quieto el trozo ya escrito\r\n      trozoSale:  .3,\r\n\r\n      palabra:    .6,    \/\/ lo que tarda una palabra en resolverse\r\n      \/* EL DESFASE ENTRE PALABRAS ES LO QUE HACE QUE SE LEA PALABRA POR\r\n         PALABRA. Estaba en .045 y con catorce palabras la frase entraba\r\n         en poco m\u00e1s de un segundo: no se le\u00eda como una cascada sino como\r\n         un bloque que se enciende de golpe. A .13 la frase tarda 2.3\r\n         segundos y cada palabra tiene su momento.\r\n\r\n         Cuenta r\u00e1pida para recalcular lo dem\u00e1s si se toca:\r\n         la frase entera dura (palabras - 1) \u00d7 entrePal + palabra. *\/\r\n      entrePal:   .13,\r\n      viaje:      .9,    \/\/ lo que tarda un bloque en subir a su sitio\r\n\r\n      \/* Los arranques van encadenados: cada bloque empieza a subir justo\r\n         antes de que terminen de llegar sus palabras, y el siguiente\r\n         entra mientras el anterior todav\u00eda viaja. Sin ese solape la\r\n         secuencia se sentir\u00eda como una lista de esperas. *\/\r\n      \/* De aqu\u00ed en adelante los tiempos son RELATIVOS al final del\r\n         cartel, no absolutos: como el cartel dura lo que dicten sus\r\n         letras, unos n\u00fameros fijos se desincronizar\u00edan en cuanto se\r\n         cambie una palabra o el ritmo de escritura. *\/\r\n      intro:      -.35,  \/\/ la frase completa se asienta arriba, en su sitio\r\n      titulo:      .55,  \/\/ el titular con el logo, ya en su sitio\r\n      \/* Baj\u00f3 de 1.6 a 1.1: el titular termina de asentarse sobre 1.28 y\r\n         antes hab\u00eda que sumarle la captura de los moldes, que ahora ya\r\n         est\u00e1 hecha. El polvo entra pis\u00e1ndole los talones. *\/\r\n      cajas:      1.1,   \/\/ el armado con polvo\r\n      pie:        2.4    \/\/ el carrusel, desde abajo\r\n    };\r\n\r\n    \/* Parte un elemento en palabras. Los hijos que no son texto \u2014el logo\r\n       del titular\u2014 cuentan como una palabra m\u00e1s, as\u00ed entran en la misma\r\n       cascada sin tratarlos aparte. *\/\r\n    function partePalabras(el){\r\n      var salida = [];\r\n      [].slice.call(el.childNodes).forEach(function(nodo){\r\n        if(nodo.nodeType === 3){\r\n          if(!nodo.textContent.trim()) return;\r\n          var trozo = document.createDocumentFragment();\r\n          nodo.textContent.split(\/(\\s+)\/).forEach(function(t){\r\n            if(!t) return;\r\n            if(!t.trim()){ trozo.appendChild(document.createTextNode(t)); return; }\r\n            var sp = document.createElement('span');\r\n            sp.className = 'cdz-vic-pal';\r\n            sp.textContent = t;\r\n            trozo.appendChild(sp);\r\n            salida.push(sp);\r\n          });\r\n          el.replaceChild(trozo, nodo);\r\n        }else if(nodo.nodeType === 1){\r\n          nodo.classList.add('cdz-vic-pal');\r\n          salida.push(nodo);\r\n        }\r\n      });\r\n      return salida;\r\n    }\r\n\r\n    var introEl  = seccion.querySelector('[data-cdz-vic-intro]');\r\n    \/* Los DOS titulares entran juntos, uno por mitad. *\/\r\n    var titulos  = [].slice.call(seccion.querySelectorAll('.cdz-vic-titulo'));\r\n    var tituloEl = titulos[0];\r\n    \/* LOS DOS PIES, uno por mitad. Con la capa 0 sola, la leyenda de la\r\n       mitad derecha se quedaba apagada para siempre: el CSS la apaga antes\r\n       del primer pintado y nadie la volv\u00eda a encender. *\/\r\n    var pies     = [].slice.call(seccion.querySelectorAll('[data-cdz-vic-pie]'));\r\n    \/* Las dos bajadas entran justo despu\u00e9s de los titulares. *\/\r\n    var subs     = [].slice.call(seccion.querySelectorAll('[data-cdz-vic-sub]'));\r\n    \/* La frase ya NO se parte en palabras: el ritmo lo dan los cuatro\r\n       trozos del cartel, y encima una cascada de catorce palabras la\r\n       entrada se sent\u00eda entrecortada. Entra entera. El titular s\u00ed, que\r\n       son dos piezas \u2014la palabra y el logo\u2014 y ah\u00ed s\u00ed suma. *\/\r\n    var palTitulo = [];\r\n    titulos.forEach(function(t){ palTitulo = palTitulo.concat(partePalabras(t)); });\r\n\r\n    \/* Los contenedores pasan a visibles y la opacidad se traslada a las\r\n       palabras: el CSS ya los ten\u00eda apagados desde antes del primer\r\n       pintado, as\u00ed que no hay destello. *\/\r\n    if(!quieto){\r\n      gsap.set(titulos.concat(pies).filter(Boolean), {opacity:1});\r\n      gsap.set(subs, {opacity:0, y:'.5em'});\r\n      gsap.set(palTitulo, {opacity:0, filter:'blur(10px)', y:'.55em'});\r\n      gsap.set([introEl].concat(pies).filter(Boolean), {opacity:0});\r\n    }\r\n\r\n    \/* EL TITULAR APARECE YA EN SU SITIO, no en el centro para despu\u00e9s\r\n       subir. Aquel viaje se ve\u00eda raro por lo mismo que el de la frase: el\r\n       cartel del centro acababa de ocupar esa zona, y ver otro texto\r\n       aparecer ah\u00ed y marcharse enseguida se le\u00eda como un tropiezo.\r\n\r\n       Ahora solo se asienta: cada pieza \u2014la palabra y el logo\u2014 llega\r\n       desde un poco m\u00e1s abajo con un punto de desenfoque. *\/\r\n    function entraTexto(tl, palabras, el, cuando){\r\n      if(!el || !palabras.length) return;\r\n      tl.to(palabras, {\r\n        opacity:1, filter:'blur(0px)', y:'0em',\r\n        duration: TIEMPOS.palabra, ease:'power3.out',\r\n        stagger: TIEMPOS.entrePal\r\n      }, cuando);\r\n    }\r\n\r\n    \/* EL CARTEL \u00b7 los cuatro trozos, escritos letra a letra.\r\n\r\n       Los cuatro se construyen ANTES, apilados en la misma celda de la\r\n       rejilla y ocultos. No se cambia el texto de un elemento sobre la\r\n       marcha: para animar letra por letra hacen falta los spans ya\r\n       creados cuando se monta la l\u00ednea de tiempo, y cre\u00e1ndolos al vuelo\r\n       no existir\u00edan todav\u00eda. *\/\r\n    var cartelEl = seccion.querySelector('[data-cdz-vic-cartel]');\r\n    var trozos = [], letras = [];\r\n\r\n    if(cartelEl){\r\n      TROZOS.forEach(function(txt){\r\n        var t = document.createElement('span');\r\n        t.className = 'cdz-vic-trozo';\r\n        var suyas = [];\r\n        txt.split('').forEach(function(ch){\r\n          var l = document.createElement('span');\r\n          l.className = 'cdz-vic-let';\r\n          var dentro = document.createElement('span');\r\n          dentro.textContent = ch;\r\n          l.appendChild(dentro);\r\n          t.appendChild(l);\r\n          \/* Se anima el de DENTRO: el de fuera es la ventana y tiene que\r\n             quedarse quieto o no recortar\u00eda nada. *\/\r\n          suyas.push(dentro);\r\n        });\r\n        cartelEl.appendChild(t);\r\n        trozos.push(t); letras.push(suyas);\r\n      });\r\n      if(!quieto){\r\n        gsap.set(cartelEl, {opacity:1});\r\n        trozos.forEach(function(tr, i){ EFECTOS[EFECTO].prepara(letras[i], tr); });\r\n      }\r\n    }\r\n\r\n    \/* Escribe los cuatro y devuelve CU\u00c1NDO TERMINA, para que el resto de\r\n       la secuencia se cuelgue de ah\u00ed en vez de llevar tiempos fijos. *\/\r\n    function entranTrozos(tl){\r\n      var t = 0;\r\n      if(!cartelEl) return t;\r\n      var ef = EFECTOS[EFECTO];\r\n      TROZOS.forEach(function(txt, i){\r\n        var chars = letras[i];\r\n        var escribir = ef.dura(chars.length);\r\n        ef.entra(tl, chars, trozos[i], t);\r\n        var seVa = t + escribir + TIEMPOS.reposo;\r\n        ef.sale(tl, chars, trozos[i], seVa);\r\n        \/* El siguiente arranca antes de que el anterior termine de irse:\r\n           sin ese solape la sucesi\u00f3n se siente a tirones. *\/\r\n        t = seVa + TIEMPOS.trozoSale * .7;\r\n      });\r\n      \/* El cartel entero se apaga al final, por si quedara alg\u00fan resto. *\/\r\n      tl.set(cartelEl, {opacity:0}, t + TIEMPOS.trozoSale);\r\n      return t + TIEMPOS.trozoSale;\r\n    }\r\n\r\n    function entradaEnCascada(){\r\n      if(quieto){\r\n        gsap.set([introEl, listasEl, vadeEl].concat(titulos).concat(pies)\r\n                 .concat(subs).filter(Boolean), {opacity:1, y:0});\r\n        gsap.set(palTitulo, {opacity:1, filter:'none', y:0});\r\n        formaCajas();\r\n        return;\r\n      }\r\n      var tl = gsap.timeline();\r\n      var tras = entranTrozos(tl);\r\n\r\n      \/* LA FRASE COMPLETA APARECE YA EN SU SITIO, arriba, y no en el\r\n         centro para despu\u00e9s subir.\r\n\r\n         Aquel paso sobraba y se notaba: los cuatro trozos ya hab\u00edan\r\n         entregado la frase entera, as\u00ed que volver a mostrarla completa en\r\n         mitad de la pantalla era ense\u00f1ar lo mismo dos veces, a dos\r\n         tama\u00f1os y casi en el mismo lugar. Se le\u00eda como un tropiezo.\r\n\r\n         Ahora solo se asienta: llega desde un poco m\u00e1s abajo, con un\r\n         punto de desenfoque, mientras el \u00faltimo trozo se est\u00e1 yendo. *\/\r\n      if(introEl){\r\n        tl.fromTo(introEl,\r\n          {opacity:0, filter:'blur(9px)', y:'.7em'},\r\n          {opacity:1, filter:'blur(0px)', y:'0em',\r\n           duration: TIEMPOS.viaje, ease:'power3.out'},\r\n          tras + TIEMPOS.intro);\r\n      }\r\n\r\n      entraTexto(tl, palTitulo, tituloEl, tras + TIEMPOS.titulo);\r\n      \/* La bajada llega un poco despu\u00e9s del titular, no a la vez: primero\r\n         se lee el nombre y despu\u00e9s qu\u00e9 es. Con las dos juntas el ojo no\r\n         sabe cu\u00e1l leer primero. *\/\r\n      if(subs.length){\r\n        tl.to(subs, {opacity:1, y:'0em', duration:.6, ease:'power3.out'},\r\n              tras + TIEMPOS.titulo + .35);\r\n      }\r\n      tl.add(formaCajas, tras + TIEMPOS.cajas);\r\n      \/* El pie sube desde fuera del borde inferior. En % sobre su propio\r\n         alto, as\u00ed no hay que medirlo. *\/\r\n      if(pies.length){\r\n        tl.fromTo(pies, {opacity:0, yPercent:70},\r\n          {opacity:1, yPercent:0, duration: TIEMPOS.viaje, ease:'power3.out'},\r\n          tras + TIEMPOS.pie);\r\n      }\r\n      \/* Las listas entran con el pie, y se anima el CONTENEDOR: cada lista\r\n         tiene su propia opacidad seg\u00fan est\u00e9 activa, y tocarla aqu\u00ed la\r\n         dejar\u00eda fija. *\/\r\n      if(listasEl){\r\n        tl.fromTo(listasEl, {opacity:0, y:'1.4em'},\r\n          {opacity:1, y:'0em', duration: TIEMPOS.viaje, ease:'power3.out'},\r\n          tras + TIEMPOS.pie);\r\n      }\r\n      \/* El bot\u00f3n entra un pelo antes que las listas: est\u00e1 m\u00e1s arriba en\r\n         la pantalla y as\u00ed la secuencia baja en orden en vez de saltar. *\/\r\n      if(vadeEl){\r\n        tl.fromTo(vadeEl, {opacity:0, y:'1.2em'},\r\n          {opacity:1, y:'0em', duration: TIEMPOS.viaje, ease:'power3.out'},\r\n          tras + TIEMPOS.pie - .12);\r\n      }\r\n    }\r\n\r\n    \/* EL ARMADO SE DISPARA CON IntersectionObserver, no con ScrollTrigger.\r\n       ScrollTrigger calcula las posiciones al iniciar, y en una p\u00e1gina\r\n       larga donde lo de arriba cambia de alto despu\u00e9s \u2014im\u00e1genes, fuentes,\r\n       otras secciones\u2014 se queda con las medidas viejas y dispara donde ya\r\n       no corresponde: el armado empezaba con la secci\u00f3n a\u00fan fuera de\r\n       cuadro. IntersectionObserver no cachea nada.\r\n\r\n       VISIBLE_PARA_ARMAR es la fracci\u00f3n de la secci\u00f3n que tiene que verse.\r\n       El umbral se acota adem\u00e1s a lo que esa pantalla PUEDE ver: la\r\n       secci\u00f3n mide 120vh, as\u00ed que en una ventana baja nunca se ver\u00eda la\r\n       mitad y sin ese tope no se armar\u00eda nunca. Y por si acaso, a los seis\r\n       segundos de asomar se arma igual. *\/\r\n    var VISIBLE_PARA_ARMAR = .45;\r\n\r\n    if('IntersectionObserver' in window){\r\n      var alcance = seccion.offsetHeight\r\n        ? Math.min(1, window.innerHeight \/ seccion.offsetHeight) : 1;\r\n      var umbral = Math.min(VISIBLE_PARA_ARMAR, alcance * .85);\r\n      var armado = false, reserva = null, vigia;\r\n\r\n      function armaUnaVez(){\r\n        if(armado) return;\r\n        armado = true;\r\n        if(vigia) vigia.disconnect();\r\n        clearTimeout(reserva);\r\n        entradaEnCascada();\r\n      }\r\n\r\n      vigia = new IntersectionObserver(function(e){\r\n        var r = e[0];\r\n        if(!r.isIntersecting){ clearTimeout(reserva); reserva = null; return; }\r\n        \/* En cuanto asoma, aunque sea un poco, se empiezan a preparar los\r\n           moldes. Es lo que quita el hueco entre el titular y el polvo. *\/\r\n        preparaMoldes();\r\n        if(r.intersectionRatio >= umbral) return armaUnaVez();\r\n        if(!reserva) reserva = setTimeout(armaUnaVez, 6000);\r\n      }, { threshold: [0, .15, .3, umbral, .6, .8] });\r\n      vigia.observe(seccion);\r\n    }else{\r\n      ScrollTrigger.create({ trigger: seccion, start:'top 40%', once:true,\r\n                             onEnter: entradaEnCascada });\r\n    }\r\n\r\n    \/* Entrada al llegar la secci\u00f3n. *\/\r\n    \/* La entrada de antes \u2014todo sube y aparece a la vez\u2014 la sustituye la\r\n       cascada de arriba. *\/\r\n  }\r\n\r\n  if(document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', arranca); }\r\n  else{ arranca(); }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u00bfD\u00f3nde comprarlo? Sinaz\u00facar Sabornaranja Sobre 3g F\u00f3rmula combinadaen un solo sobre Dos vitaminas y un mineral,en un solo sobre Vitamina [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-107","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cdzvit.com.co\/index.php\/wp-json\/wp\/v2\/pages\/107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cdzvit.com.co\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cdzvit.com.co\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cdzvit.com.co\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cdzvit.com.co\/index.php\/wp-json\/wp\/v2\/comments?post=107"}],"version-history":[{"count":5,"href":"https:\/\/cdzvit.com.co\/index.php\/wp-json\/wp\/v2\/pages\/107\/revisions"}],"predecessor-version":[{"id":2809,"href":"https:\/\/cdzvit.com.co\/index.php\/wp-json\/wp\/v2\/pages\/107\/revisions\/2809"}],"wp:attachment":[{"href":"https:\/\/cdzvit.com.co\/index.php\/wp-json\/wp\/v2\/media?parent=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}