/** Shopify CDN: Minification failed Line 1029:175 Unexpected "}" **/ /* cauce · rediseño de la landing, el inicio y el catálogo (2026-10-11). Va después de cauce-pdp.css y usa sus variables. Fondo salvia (decisión conjunta del 2026-10-11), movimiento como el agua: entra, se asienta y se queda quieto (brand book §3.7). Maquetas aprobadas: 06-ecommerce-ventas/tema-shopify/revisiones/2026-10-11-landing-maquetas/. */ .cpdp { --fondo: var(--cauce-fondo, #E4E9DD); --fondo-alt: var(--cauce-fondo-alt, #EEF2E8); --texto2: #4F5B52; --hondo: #142116; --bebida: #EBCFAE; --sombra: 0 8px 24px rgba(32, 64, 46, .10); } .cpdp.clara { background: var(--fondo-alt); } /* Fondos fotográficos (Codex, 2026-10-11, tanda «fondos-carrusel»): pared salvia con luz de ventana en las secciones normales, lino hueso en las claras y papel verde hondo en las oscuras. Se alternan para que el separador de colinas se lea. */ .cpdp.cpdp-sec { background: var(--fondo); } .cpdp.cpdp-sec.clara { background: #F4EFE4; } .cpdp.mitad.mitad { background: var(--hondo); } .cpdp.ini-heroe.ini-heroe { background: #E9EDE2; } .cpdp.ini-heroe .colinas { display: none; } .cpdp .tarjeta { background: var(--blanco); border-radius: 18px; box-shadow: var(--sombra); } .cpdp .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ===== entradas al hacer scroll ===== */ /* Solo se esconde lo que va a entrar cuando el script ya cargó (clase cl-js en ): sin script, todo se ve. */ .cl-js .cpdp [data-revela] { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--entrada), transform .5s var(--entrada); } .cl-js .cpdp [data-revela].visto { opacity: 1; transform: none; } .cpdp [data-revela="2"] { transition-delay: .08s; } .cpdp [data-revela="3"] { transition-delay: .16s; } .cpdp [data-revela="4"] { transition-delay: .24s; } /* ===== portada del carrusel: foto con el titular y las etiquetas por código ===== */ .cpdp .carrusel > .portada { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 5; position: relative; scroll-snap-align: start; overflow: hidden; background: var(--fondo); } .cpdp .portada > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; } .cpdp .portada .p-titulo { position: absolute; left: 0; right: 0; top: 5%; text-align: center; font: 400 clamp(28px, 8vw, 42px)/1.05 var(--serif); color: var(--verde); padding: 0 18px; text-wrap: balance; } .cpdp .portada .p-titulo em { font-style: normal; color: var(--cta); } .cpdp .portada .p-chips { position: absolute; left: 0; right: 0; top: 19.5%; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 0 12px; } .cpdp .portada .p-chip { background: rgba(255, 253, 248, .94); color: var(--verde); font: 600 13px/1.2 var(--sans); padding: 6px 10px; border-radius: 99px; box-shadow: 0 3px 10px rgba(32, 64, 46, .12); white-space: nowrap; opacity: 0; transform: translateY(8px); animation: cl-entra .6s var(--entrada) forwards; } .cpdp .portada .p-chip b { color: var(--terra-txt); } .cpdp .portada .c1 { animation-delay: .4s; } .cpdp .portada .c2 { animation-delay: .55s; } .cpdp .portada .c3 { animation-delay: .7s; } @keyframes cl-entra { to { opacity: 1; transform: none; } } /* ===== botón que lleva al checkout ===== */ .cpdp a.btn { color: var(--hueso); } .cpdp a.btn, .cpdp a.btn-sec, .cpdp a.btn-o, .cpdp a.b2 { text-decoration: none !important; } .cpdp .btn .flecha-ir { width: 18px; height: 18px; transition: transform .2s var(--entrada); } .cpdp .btn:hover .flecha-ir { transform: translateX(3px); } /* ===== la cuenta: un vaso que se llena ===== */ /* Foto real (Codex, 2026-10-11): el vaso vacío abajo y el lleno encima, recortado con clip-path. En la foto, la bebida va del 17,2 % al 88 % del alto; el corte entre 17,9 g y 6,6 g cae en el 36,3 % (17,9 de 24,5 g). */ .cpdp .vaso-cuenta { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: end; margin: 6px 0 4px; } .cpdp .vaso-foto { position: relative; width: 150px; aspect-ratio: 420 / 801; border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); } .cpdp .vaso-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cpdp .vaso-foto .lleno.a { clip-path: inset(36.3% 0 0 0); } .cpdp .vaso-foto .lleno.b { clip-path: inset(17.2% 0 63.7% 0); } .cl-js .cpdp .vaso-foto .lleno.a { clip-path: inset(88% 0 0 0); transition: clip-path 1.1s var(--entrada); } .cl-js .cpdp .vaso-foto .lleno.b { clip-path: inset(36.3% 0 63.7% 0); transition: clip-path .8s var(--entrada) 1s; } .cpdp .vaso-cuenta.visto .lleno.a { clip-path: inset(36.3% 0 0 0); } .cpdp .vaso-cuenta.visto .lleno.b { clip-path: inset(17.2% 0 63.7% 0); } .cpdp .vaso-foto .meta { position: absolute; left: 0; right: 0; top: 15.2%; border-top: 2px dashed var(--verde); font: 700 11px/1 var(--sans); color: var(--verde); text-align: right; padding: 3px 6px 0 0; } .cpdp .vaso-foto .corte { position: absolute; left: 9%; right: 9%; top: 36.3%; border-top: 2px solid var(--terra); } .cpdp .vaso-foto .cifra { position: absolute; left: 0; right: 0; text-align: center; font: 400 26px/1 var(--serif); color: var(--verde); } .cpdp .vaso-foto .cifra.a { top: 58%; } .cpdp .vaso-foto .cifra.b { top: 23%; font-size: 21px; color: var(--terra-txt); } .cl-js .cpdp .vaso-foto .cifra, .cl-js .cpdp .vaso-foto .corte { opacity: 0; transition: opacity .4s linear .8s; } .cl-js .cpdp .vaso-foto .cifra.b, .cl-js .cpdp .vaso-foto .corte { transition-delay: 1.6s; } .cpdp .vaso-cuenta.visto .cifra, .cpdp .vaso-cuenta.visto .corte { opacity: 1; } .cpdp .et { display: grid; gap: 22px; padding-bottom: 6px; } .cpdp .et > div { border-left: 3px solid var(--verde); padding-left: 10px; font-size: 15px; line-height: 1.32; color: var(--texto2); } .cpdp .et b { display: block; font: 400 32px/1 var(--serif); color: var(--verde); margin-bottom: 3px; } .cpdp .et .t { border-color: var(--terra); } .cpdp .et .t b { color: var(--terra-txt); } .cpdp .et .m { border-left-style: dashed; } .cpdp .cuenta2 .base { background: var(--blanco); border: 0; box-shadow: var(--sombra); } /* ===== por qué esta vez sí ===== */ .cpdp .razones { display: grid; gap: 14px; } .cpdp .razon { display: grid; grid-template-columns: 112px 1fr; overflow: hidden; } .cpdp .razon .ilu { background: #F3EBDD; position: relative; overflow: hidden; min-height: 132px; } .cpdp .razon .ilu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--entrada); } .cpdp .razon.visto .ilu img { transform: none; } .cpdp .razon .ilu .n { position: absolute; z-index: 1; top: 8px; left: 8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 253, 248, .94); font: 400 19px/1 var(--serif); color: var(--terra-txt); box-shadow: 0 2px 8px rgba(32, 64, 46, .15); } .cpdp .razon .ilu .sello { position: absolute; z-index: 1; right: 8px; bottom: 8px; background: var(--verde); color: var(--hueso); font: 400 18px/1 var(--serif); padding: 7px 10px; border-radius: 99px; box-shadow: 0 4px 12px rgba(20, 33, 22, .25); } .cpdp .razon .tx { padding: 15px 15px 16px; } .cpdp .razon .antes { font-size: 14px; color: var(--texto2); position: relative; display: inline-block; } .cpdp .razon .antes::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 2px; background: var(--terra); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--entrada) .3s; } .cpdp .razon.visto .antes::after { transform: none; } .cpdp .razon h3 { font: 400 25px/1.1 var(--serif); margin: 3px 0 4px; color: var(--verde); } .cpdp .razon p { font-size: 16px; color: var(--texto2); line-height: 1.4; } .cpdp .razon .anillo { stroke-dasharray: 176; stroke-dashoffset: 176; transition: stroke-dashoffset 1.2s var(--entrada) .3s; } .cpdp .razon.visto .anillo { stroke-dashoffset: 44; } /* ===== qué hay en el tarro: el despiece ===== */ .cpdp .despiece { position: relative; height: 440px; margin: 8px 0 10px; } .cpdp .despiece .jar { position: absolute; left: 50%; top: 108px; width: 128px; transform: translateX(-50%); filter: drop-shadow(0 14px 18px rgba(32, 64, 46, .22)); } .cpdp .despiece svg.lineas { position: absolute; inset: 0; width: 100%; height: 100%; } .cl-js .cpdp .despiece .lin { stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1s var(--entrada); } .cpdp .despiece.visto .lin { stroke-dashoffset: 0; } .cpdp .ing { position: absolute; width: 46%; max-width: 230px; padding: 10px 11px; display: grid; grid-template-columns: 52px 1fr; gap: 9px; align-items: center; } .cl-js .cpdp .ing { opacity: 0; transform: scale(.94); transition: opacity .45s var(--entrada), transform .45s var(--entrada); } .cpdp .despiece.visto .ing { opacity: 1; transform: none; } .cpdp .despiece.visto .i2 { transition-delay: .15s; } .cpdp .despiece.visto .i3 { transition-delay: .3s; } .cpdp .despiece.visto .i4 { transition-delay: .45s; } .cpdp .ing svg { width: 38px; height: 38px; } .cpdp .ing .ing-ilu { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; } .cpdp .ing b { font: 700 15px/1.15 var(--sans); display: block; color: var(--verde); } .cpdp .ing em { font: 700 15px var(--sans); color: var(--terra-txt); font-style: normal; display: block; } .cpdp .ing span { font-size: 13px; color: var(--texto2); line-height: 1.28; display: block; } .cpdp .i1 { left: 0; top: 0; } .cpdp .i2 { right: 0; top: 24px; } .cpdp .i3 { left: 0; bottom: 18px; } .cpdp .i4 { right: 0; bottom: 0; } .cpdp .ficha2 { background: var(--blanco); border-radius: 16px; padding: 14px 16px; border: 2px solid var(--verde); } .cpdp .ficha2 h3 { font: 800 19px var(--sans); border-bottom: 6px solid var(--verde); padding-bottom: 4px; margin-bottom: 4px; color: var(--verde); } .cpdp .ficha2 .porc { font-size: 13.5px; display: flex; justify-content: space-between; border-bottom: 2px solid var(--verde); padding: 3px 0 5px; } .cpdp .ficha2 table { width: 100%; border-collapse: collapse; font-size: 14px; } .cpdp .ficha2 th, .cpdp .ficha2 td { padding: 6px 2px; border-bottom: 1px solid var(--linea); text-align: left; font-weight: 400; } .cpdp .ficha2 td { text-align: right; white-space: nowrap; } .cpdp .ficha2 thead th { font-size: 13px; font-weight: 700; color: var(--texto2); } .cpdp .ficha2 thead th:not(:first-child) { text-align: right; } .cpdp .ficha2 tr.f th, .cpdp .ficha2 tr.f td { background: #FBE9E2; font-weight: 700; color: var(--terra-txt); } .cpdp .ficha2 tr.f th { border-radius: 8px 0 0 8px; padding-left: 8px; } .cpdp .ficha2 tr.f td:last-child { border-radius: 0 8px 8px 0; padding-right: 8px; } .cpdp .ficha2 details { border-top: 0; } .cpdp .ficha2 summary { color: var(--terra-txt); font-size: 14.5px; padding: 10px 0 2px; } .cpdp .ficha2 .ficha-img { display: block; width: 100%; max-width: 460px; height: auto; margin: 10px auto 2px; border-radius: 4px; } .cpdp .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .cpdp .chips span { font-size: 13px; background: var(--blanco); border-radius: 99px; padding: 4px 10px; color: var(--texto2); } .cpdp .chips span.e { background: var(--verde); color: var(--hueso); font-weight: 600; } .cpdp .alerg { display: flex; gap: 10px; align-items: flex-start; background: var(--hueso); border-radius: 12px; padding: 11px 13px; margin-top: 10px; font-size: 14px; line-height: 1.4; } .cpdp .alerg svg { flex: 0 0 20px; width: 20px; height: 20px; } /* ===== hábito: ver «Etapa 2 · el hábito», al final ===== */ /* ===== botón a mitad de página ===== */ .cpdp.mitad { background: var(--hondo); color: var(--crema); padding: 26px 0; } .cpdp.mitad .mt-fila { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; margin-bottom: 14px; } .cpdp.mitad .mt-fila img { width: 64px; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); } .cpdp.mitad .kicker { color: var(--terra-claro); margin: 0; } .cpdp.mitad .mt-t { display: block; font: 400 25px/1.1 var(--serif); color: var(--hueso); } .cpdp.mitad .mt-p { font-size: 15px; } .cpdp .cambiar { margin-left: 8px; text-decoration: underline; text-underline-offset: 3px; background: none !important; border: 0 !important; box-shadow: none !important; padding: 10px 4px; min-height: 44px; cursor: pointer; font: 700 14.5px/1 var(--sans) !important; text-transform: none !important; letter-spacing: 0 !important; } .cpdp.mitad .cambiar { color: var(--hueso) !important; } .cpdp.mitad .btn.btn { background-color: var(--hueso) !important; color: var(--verde) !important; } .cpdp.mitad .btn.btn:hover { background-color: var(--crema) !important; } .cpdp.mitad .confianza { display: flex; justify-content: center; gap: 6px 16px; flex-wrap: wrap; font-size: 13px; margin-top: 10px; } /* ===== cuándo se toma: la corriente del día ===== */ .cpdp-dia { --p: 0; background: color-mix(in srgb, #F2EEE0 calc((1 - var(--p)) * 100%), #E2E8DB); } .cpdp .cdia-lista { position: relative; padding-left: 72px; } .cpdp .cdia-cor { position: absolute; left: 0; top: 0; width: 72px; height: 100%; overflow: visible; pointer-events: none; } .cpdp .cdia-cor .base { stroke: rgba(32, 64, 46, .14); } .cpdp .cdia-cor .tinta { stroke: var(--terra); } .cpdp .cdia-gota { transition: opacity .3s linear; } .cpdp .cdia-lista.llego .cdia-gota { opacity: 0; } .cpdp .parada { position: relative; padding: 2px 0 34px; } .cpdp .parada .ilu { position: absolute; left: -72px; top: -6px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(32, 64, 46, .12); overflow: hidden; } .cl-js .cpdp .parada .ilu { transform: scale(.72); opacity: .35; transition: transform .5s var(--entrada), opacity .5s var(--entrada); } .cpdp .parada .ilu svg { width: 100%; height: 100%; } .cl-js .cpdp .parada .tx { opacity: .3; transform: translateY(10px); transition: opacity .45s var(--entrada), transform .45s var(--entrada); } .cpdp .parada.on .ilu { transform: none; opacity: 1; } .cpdp .parada.on .tx { opacity: 1; transform: none; } .cpdp .parada .cuando { font: 700 13px var(--sans); letter-spacing: .5px; text-transform: uppercase; color: #5E6960; } .cpdp .parada h3 { font: 400 27px/1.08 var(--serif); margin: 3px 0 5px; color: var(--verde); } .cpdp .parada p { font-size: 16px; color: var(--texto2); line-height: 1.45; } .cpdp .parada.prin .tx { background: var(--blanco); border-radius: 18px; padding: 14px 15px 16px; margin-left: -6px; box-shadow: 0 10px 26px rgba(32, 64, 46, .10); } .cpdp .parada.prin .ilu { width: 64px; height: 64px; left: -76px; top: 6px; } .cpdp .parada.prin h3 { font-size: 31px; } .cpdp .parada.fin { padding-bottom: 0; } .cpdp .parada.fin h3 { color: var(--terra-txt); font-size: 26px; } /* Foto real de cada momento (Codex, 2026-10-11) en la tarjeta; el círculo lleva un dibujo (2026-10-14, ver «Etapa 2 · cuándo se toma»). */ .cpdp .parada .foto-g { display: block; width: 100%; max-width: 460px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; margin: 0 0 12px; box-shadow: var(--sombra); } .cpdp .sol { transform: translateY(14px); transition: transform .9s var(--entrada) .15s; } .cpdp .on .sol { transform: none; } .cpdp .vapor path { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .8s var(--entrada) .4s; } .cpdp .on .vapor path { stroke-dashoffset: 0; } .cpdp .fruta { transform: translateY(-22px); opacity: 0; transition: transform .7s var(--entrada) .2s, opacity .3s linear .2s; } .cpdp .on .fruta { transform: none; opacity: 1; } .cpdp .llena { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 1s var(--entrada) .4s; } .cpdp .on .llena { transform: none; } .cpdp .luna { opacity: 0; transform: translate(-6px, 6px); transition: opacity .6s linear .1s, transform .9s var(--entrada) .1s; } .cpdp .on .luna { opacity: 1; transform: none; } .cpdp .gota-fin { transform-box: fill-box; transform: translateY(-16px); opacity: 0; transition: transform .7s cubic-bezier(.55, 0, .2, 1), opacity .2s linear; } .cpdp .on .gota-fin { transform: none; opacity: 1; } .cpdp .onda { opacity: 0; transform-box: fill-box; transform-origin: center; } .cpdp .on .onda { animation: cl-onda 1.4s var(--entrada) .2s 1 both; } @keyframes cl-onda { 0% { opacity: .7; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } } /* ===== comparación: dos vasos (cauce a la izquierda) ===== */ .cpdp .vasos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; max-width: 640px; margin: 22px auto 0; text-align: left; } .cpdp .vasos .v { border-radius: 20px; padding: 16px 12px 18px; display: grid; align-content: start; gap: 8px; } .cpdp .vasos .v.c { background: var(--verde); color: var(--crema); box-shadow: 0 14px 30px rgba(32, 64, 46, .25); transform: translateY(-8px); } .cpdp .vasos .v.s { background: #E9E6DC; color: var(--texto2); } .cpdp .vasos .ilu { display: grid; place-items: center; height: 124px; } .cpdp .vasos .ilu img { height: 118px; width: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .3)); } .cpdp .vasos .ilu svg { height: 104px; width: auto; } .cpdp .vasos .ilu.foto { position: relative; height: auto; aspect-ratio: 1; border-radius: 14px; overflow: hidden; margin-bottom: 4px; } .cpdp .vasos .ilu.foto img { width: 100%; height: 100%; object-fit: cover; filter: none; } .cpdp .vasos .ilu.foto .tarro { position: absolute; right: 6px; bottom: 6px; width: 23%; height: auto; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); } .cpdp .vasos .v.s .ilu.foto img { filter: saturate(.85); } .cpdp .vasos h3 { font: 400 25px/1.1 var(--serif); text-align: center; } .cpdp .vasos .v.c h3 { color: var(--hueso) !important; } .cpdp .vasos ul { list-style: none; display: grid; gap: 6px; font-size: 15px; line-height: 1.3; margin: 0; padding: 0; } .cpdp .vasos li { border-top: 1px solid rgba(32, 64, 46, .2); padding-top: 7px; } .cpdp .vasos .v.c li { border-color: rgba(232, 228, 216, .22); } .cpdp .vasos .fin { font: 400 24px/1.08 var(--serif); margin-top: 6px; } .cpdp .vasos .v.c .fin { color: var(--terra-claro); } .cpdp .vasos .gel { animation: cl-gel 3.5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; } @keyframes cl-gel { to { transform: scaleY(1.12); } } /* ===== cierre: colinas en movimiento, la elección y el botón ===== */ .cpdp.final2 { position: relative; overflow: hidden; text-align: center; padding: 56px 0 170px; background: linear-gradient(var(--fondo-alt), var(--fondo)); } .cpdp.final2 h2 { font-size: 36px; line-height: 1.06; margin-bottom: 8px; } .cpdp.final2 .sub { font-size: 17px; color: var(--texto2); margin-bottom: 18px; } .cpdp .eleccion { display: flex; gap: 10px; align-items: baseline; justify-content: center; flex-wrap: wrap; background: var(--blanco); border-radius: 12px; padding: 12px; margin: 0 auto 10px; max-width: 460px; font-size: 14.5px; color: var(--texto2); } .cpdp .eleccion b { font-size: 16px; color: var(--verde); } .cpdp.final2 .cambiar { color: var(--terra-txt) !important; } .cpdp.final2 .btn { max-width: 460px; margin: 0 auto; } .cpdp.final2 .confianza { display: flex; justify-content: center; gap: 6px 16px; flex-wrap: wrap; font-size: 13px; color: var(--texto2); margin-top: 12px; } .cpdp.final2 .wrap { position: relative; z-index: 1; } .cpdp .colinas { position: absolute; left: 0; right: 0; bottom: 0; height: 190px; pointer-events: none; overflow: hidden; } .cpdp .colinas svg { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; } .cpdp .colinas .c1 { animation: cl-deriva 90s linear infinite; } .cpdp .colinas .c2 { animation: cl-deriva 60s linear infinite; } .cpdp .colinas .c3 { animation: cl-deriva 40s linear infinite; } @keyframes cl-deriva { to { transform: translateX(-50%); } } /* ===== inicio ===== */ .cpdp.ini-heroe { position: relative; overflow: hidden; text-align: center; padding: 56px 0 0; background: radial-gradient(70% 45% at 50% 22%, #F4F6EE, var(--fondo) 80%); } .cpdp.ini-heroe .wrap { position: relative; z-index: 1; } .cpdp .marca { width: min(300px, 76%); margin: 0 auto; } .cpdp .marca svg { width: 100%; height: auto; } .cpdp .marca .gota-logo { transform-box: fill-box; transform: translateY(-120px); opacity: 0; animation: cl-cae 1s cubic-bezier(.55, 0, .2, 1) .6s forwards; } @keyframes cl-cae { 60% { opacity: 1; } to { opacity: 1; transform: none; } } .cpdp.ini-heroe h1 { font-size: 30px; margin: 14px 0 6px; } .cpdp.ini-heroe .s { font-size: 17px; color: var(--texto2); max-width: 34em; margin: 0 auto 20px; line-height: 1.45; } .cpdp .btn-o { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border: 1.5px solid var(--verde); color: var(--verde); font: 700 16px var(--sans); padding: 12px 24px; border-radius: 10px; background: rgba(255, 253, 248, .6); text-decoration: none; transition: background-color .15s var(--entrada); } .cpdp .btn-o:hover { background: var(--blanco); } .cpdp.ini-heroe .escena { position: relative; height: 330px; margin-top: 22px; } .cpdp.ini-heroe .escena img { position: absolute; left: 50%; bottom: 70px; width: 150px; transform: translateX(-50%); z-index: 1; filter: drop-shadow(0 18px 20px rgba(32, 64, 46, .25)); } .cpdp.ini-heroe .colinas { height: 200px; } .cpdp .historia { position: relative; padding-left: 28px; } .cpdp .historia > svg { position: absolute; left: 0; top: 6px; height: calc(100% - 24px); width: 16px; } .cpdp .hito { padding: 0 0 20px; } .cpdp .hito b { font: 400 25px/1.1 var(--serif); display: block; margin-bottom: 4px; color: var(--verde); } .cpdp .hito p { font-size: 16px; color: var(--texto2); line-height: 1.5; } .cpdp .ingr4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cpdp .ingr4 > div { padding: 16px 14px; overflow: hidden; } .cpdp .ingr4 .ing-ilu { display: block; width: calc(100% + 28px); max-width: none; margin: -16px -14px 10px; aspect-ratio: 4 / 3; object-fit: cover; } .cpdp .ingr4 svg { width: 42px; height: 42px; } .cpdp .ingr4 b { font: 400 25px/1.1 var(--serif); display: block; margin-top: 6px; color: var(--verde); } .cpdp .ingr4 span { font-size: 14.5px; color: var(--texto2); line-height: 1.38; display: block; margin-top: 3px; } .cpdp .sino { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cpdp .sino > div { border-radius: 16px; padding: 16px 14px; font-size: 15.5px; line-height: 1.4; } .cpdp .sino .si { background: var(--verde); color: var(--crema); } .cpdp .sino .si h3 { color: var(--hueso) !important; } .cpdp .sino .no { background: var(--blanco); color: var(--texto2); } .cpdp .sino h3 { font: 400 25px var(--serif); margin-bottom: 6px; } .cpdp .sino ul { list-style: none; margin: 0; padding: 0; } .cpdp .sino li { padding: 6px 0; border-top: 1px solid rgba(32, 64, 46, .2); } .cpdp .conf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cpdp .conf > div { padding: 13px; font-size: 14px; color: var(--texto2); line-height: 1.35; } .cpdp .conf b { display: block; color: var(--verde); font-size: 15px; } .cpdp .banda { background: var(--verde); color: var(--crema); border-radius: 20px; padding: 18px; display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: center; margin-top: 18px; } .cpdp .banda img { width: 90px; height: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); } .cpdp .banda h3 { font: 400 25px/1.1 var(--serif); color: var(--hueso) !important; } .cpdp .banda .b2 { display: inline-flex; margin-top: 10px; background: var(--hueso); color: var(--verde); font: 700 15px var(--sans); padding: 11px 18px; border-radius: 10px; text-decoration: none; min-height: 44px; align-items: center; } /* ===== catálogo: el tarro sobre el paisaje ===== */ .cpdp .cat-img.escena { aspect-ratio: 4 / 4.2; background: radial-gradient(60% 50% at 50% 40%, #F4F6EE, var(--fondo)); } .cpdp .cat-img.escena img { position: absolute; left: 50%; bottom: 44px; width: 40%; max-width: 220px; height: auto !important; transform: translateX(-50%); z-index: 1; filter: drop-shadow(0 16px 18px rgba(32, 64, 46, .25)); object-fit: contain; background: none !important; max-height: none !important; } .cpdp .cat-img.escena:hover img { transform: translateX(-50%) scale(1.03); } .cpdp .cat-img.escena .colinas { height: 46%; } /* ===== computador ===== */ @media (min-width: 900px) { .cpdp .vaso-cuenta { grid-template-columns: 200px 1fr; gap: 28px; } .cpdp .vaso-foto { width: 200px; } .cpdp .vaso-foto .cifra { font-size: 32px; } .cpdp .vaso-foto .cifra.b { font-size: 26px; } .cpdp .et b { font-size: 44px; } .cpdp .et > div { font-size: 16.5px; } .cpdp .razones { grid-template-columns: repeat(3, 1fr); gap: 18px; } .cpdp .razon { grid-template-columns: 1fr; } .cpdp .razon .ilu { height: 220px; } .cpdp .razon .ilu .sello { font-size: 22px; right: 12px; bottom: 12px; } .cpdp .razon .tx { padding: 20px 22px 24px; } .cpdp .razon h3 { font-size: 28px; } .cpdp .lleva2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; } .cpdp .despiece { height: 520px; } .cpdp .despiece .jar { width: 170px; top: 120px; } .cpdp .ing { width: 44%; } .cpdp.mitad { padding: 30px 0; } .cpdp.mitad .wrap { display: grid; grid-template-columns: auto 1fr minmax(280px, 360px); gap: 28px; align-items: center; } .cpdp.mitad .mt-fila { margin: 0; } .cpdp.mitad .confianza { grid-column: 3; margin-top: -14px; } .cpdp-dia .wrap { max-width: 720px; } .cpdp .parada h3 { font-size: 32px; } .cpdp .parada.prin h3 { font-size: 38px; } .cpdp .parada:not(.fin) .tx { display: grid; grid-template-columns: 260px 1fr; column-gap: 26px; align-content: center; } .cpdp .parada .foto-g { grid-row: 1 / span 3; margin: 0; } .cpdp .vasos { gap: 20px; } .cpdp .vasos .v { padding: 24px 24px 28px; } .cpdp .vasos ul { font-size: 16.5px; } .cpdp .vasos h3 { font-size: 30px; } .cpdp.final2 { padding: 96px 0 230px; } .cpdp.final2 h2 { font-size: 56px; } .cpdp .colinas { height: 240px; } .cpdp.ini-heroe { padding-top: 72px; } .cpdp.ini-heroe h1 { font-size: 44px; } .cpdp.ini-heroe .escena { height: 420px; } .cpdp.ini-heroe .escena img { width: 190px; } .cpdp .ingr4 { grid-template-columns: repeat(4, 1fr); gap: 18px; } .cpdp .sino, .cpdp .conf { max-width: 760px; } .cpdp .conf { grid-template-columns: repeat(4, 1fr); max-width: none; } .cpdp .historia { max-width: 640px; } .cpdp .banda { grid-template-columns: 110px 1fr; max-width: 640px; padding: 24px; } .cpdp .banda img { width: 110px; } } @media (prefers-reduced-motion: reduce) { .cpdp [data-revela], .cpdp .portada .p-chip, .cpdp .vaso-cuenta .capa, .cpdp .vaso-cuenta .cifra, .cpdp .ing, .cpdp .despiece .lin, .cpdp .parada .ilu, .cpdp .parada .tx, .cpdp .sol, .cpdp .fruta, .cpdp .llena, .cpdp .luna, .cpdp .gota-fin, .cpdp .marca .gota-logo { opacity: 1 !important; transform: none !important; animation: none !important; transition: opacity .2s linear !important; stroke-dashoffset: 0 !important; } .cpdp .vapor path, .cpdp .razon .anillo { stroke-dashoffset: 0 !important; transition: none !important; } .cpdp .razon .antes::after { transform: none !important; } .cpdp .onda, .cpdp .cdia-gota { display: none; } .cpdp .colinas svg, .cpdp .vasos .gel { animation: none !important; } .cpdp-dia { --p: 1 !important; } } /* ===== separador: el borde de cada sección es la colina de la etiqueta (2026-10-11, pedido por Juan Camilo) ===== Misma curva que el paisaje grabado de la etiqueta (snippets/cauce-colinas.liquid, capa c1), para que todo rime. La sección sube sobre la anterior y una máscara recorta su borde con esa curva; encima, tres líneas grabadas la siguen. */ .shopify-section + .shopify-section > .cpdp.cpdp-sec, .shopify-section + .shopify-section > .cpdp.mitad, .shopify-section + .shopify-section > .cpdp.final2 { --ola: 46px; position: relative; margin-top: calc(var(--ola) * -1); padding-top: calc(44px + var(--ola)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 40' preserveAspectRatio='none'%3E%3Cpath d='M0 13.4 L40 11.8 L80 9.3 L120 6.1 L160 3.5 L200 3.0 L240 5.6 L280 10.9 L320 17.0 L360 21.6 L400 23.0 L440 21.0 L480 17.0 L520 13.6 L560 13.2 L600 16.7 L640 23.2 L680 30.3 L720 35.4 L760 36.6 L800 33.9 L840 28.5 L880 22.6 L920 17.9 L960 15.1 L1000 13.4 L1040 11.8 L1080 9.3 L1120 6.1 L1160 3.5 L1200 3.0 L1240 5.6 L1280 10.9 L1320 17.0 L1360 21.6 L1400 23.0 L1440 21.0 L1480 17.0 L1520 13.6 L1560 13.2 L1600 16.7 L1640 23.2 L1680 30.3 L1720 35.4 L1760 36.6 L1800 33.9 L1840 28.5 L1880 22.6 L1920 17.9 L1960 15.1 L2000 13.4 L2000 40 L0 40 Z'/%3E%3C/svg%3E") top / 100% var(--ola) no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - var(--ola) + 1px) no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 40' preserveAspectRatio='none'%3E%3Cpath d='M0 13.4 L40 11.8 L80 9.3 L120 6.1 L160 3.5 L200 3.0 L240 5.6 L280 10.9 L320 17.0 L360 21.6 L400 23.0 L440 21.0 L480 17.0 L520 13.6 L560 13.2 L600 16.7 L640 23.2 L680 30.3 L720 35.4 L760 36.6 L800 33.9 L840 28.5 L880 22.6 L920 17.9 L960 15.1 L1000 13.4 L1040 11.8 L1080 9.3 L1120 6.1 L1160 3.5 L1200 3.0 L1240 5.6 L1280 10.9 L1320 17.0 L1360 21.6 L1400 23.0 L1440 21.0 L1480 17.0 L1520 13.6 L1560 13.2 L1600 16.7 L1640 23.2 L1680 30.3 L1720 35.4 L1760 36.6 L1800 33.9 L1840 28.5 L1880 22.6 L1920 17.9 L1960 15.1 L2000 13.4 L2000 40 L0 40 Z'/%3E%3C/svg%3E") top / 100% var(--ola) no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - var(--ola) + 1px) no-repeat; } .shopify-section + .shopify-section > .cpdp.cpdp-sec::before, .shopify-section + .shopify-section > .cpdp.mitad::before, .shopify-section + .shopify-section > .cpdp.final2::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--ola) * 1.65); pointer-events: none; z-index: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 66' preserveAspectRatio='none' fill='none' stroke='%2320402E' stroke-width='1.3' stroke-linecap='round' vector-effect='non-scaling-stroke'%3E%3Cpath stroke-opacity='.18' d='M0 21.4 L40 19.8 L80 17.3 L120 14.1 L160 11.5 L200 11.0 L240 13.6 L280 18.9 L320 25.0 L360 29.6 L400 31.0 L440 29.0 L480 25.0 L520 21.6 L560 21.2 L600 24.7 L640 31.2 L680 38.3 L720 43.4 L760 44.6 L800 41.9 L840 36.5 L880 30.6 L920 25.9 L960 23.1 L1000 21.4 L1040 19.8 L1080 17.3 L1120 14.1 L1160 11.5 L1200 11.0 L1240 13.6 L1280 18.9 L1320 25.0 L1360 29.6 L1400 31.0 L1440 29.0 L1480 25.0 L1520 21.6 L1560 21.2 L1600 24.7 L1640 31.2 L1680 38.3 L1720 43.4 L1760 44.6 L1800 41.9 L1840 36.5 L1880 30.6 L1920 25.9 L1960 23.1 L2000 21.4'/%3E%3Cpath stroke-opacity='.12' d='M0 29.4 L40 27.8 L80 25.3 L120 22.1 L160 19.5 L200 19.0 L240 21.6 L280 26.9 L320 33.0 L360 37.6 L400 39.0 L440 37.0 L480 33.0 L520 29.6 L560 29.2 L600 32.7 L640 39.2 L680 46.3 L720 51.4 L760 52.6 L800 49.9 L840 44.5 L880 38.6 L920 33.9 L960 31.1 L1000 29.4 L1040 27.8 L1080 25.3 L1120 22.1 L1160 19.5 L1200 19.0 L1240 21.6 L1280 26.9 L1320 33.0 L1360 37.6 L1400 39.0 L1440 37.0 L1480 33.0 L1520 29.6 L1560 29.2 L1600 32.7 L1640 39.2 L1680 46.3 L1720 51.4 L1760 52.6 L1800 49.9 L1840 44.5 L1880 38.6 L1920 33.9 L1960 31.1 L2000 29.4'/%3E%3Cpath stroke-opacity='.07' d='M0 39.4 L40 37.8 L80 35.3 L120 32.1 L160 29.5 L200 29.0 L240 31.6 L280 36.9 L320 43.0 L360 47.6 L400 49.0 L440 47.0 L480 43.0 L520 39.6 L560 39.2 L600 42.7 L640 49.2 L680 56.3 L720 61.4 L760 62.6 L800 59.9 L840 54.5 L880 48.6 L920 43.9 L960 41.1 L1000 39.4 L1040 37.8 L1080 35.3 L1120 32.1 L1160 29.5 L1200 29.0 L1240 31.6 L1280 36.9 L1320 43.0 L1360 47.6 L1400 49.0 L1440 47.0 L1480 43.0 L1520 39.6 L1560 39.2 L1600 42.7 L1640 49.2 L1680 56.3 L1720 61.4 L1760 62.6 L1800 59.9 L1840 54.5 L1880 48.6 L1920 43.9 L1960 41.1 L2000 39.4'/%3E%3C/svg%3E") top / 100% 100% no-repeat; } .shopify-section + .shopify-section > .cpdp.mitad::before { filter: invert(1); opacity: .7; } .cpdp.cpdp-sec > .wrap, .cpdp.mitad > *, .cpdp.final2 > * { position: relative; z-index: 1; } @media (min-width: 900px) { .shopify-section + .shopify-section > .cpdp.cpdp-sec, .shopify-section + .shopify-section > .cpdp.mitad, .shopify-section + .shopify-section > .cpdp.final2 { --ola: 72px; padding-top: calc(80px + var(--ola)); } } /* ===== disponibilidad: nivel real del inventario, de verde a rojo, sin el número (2026-10-11) ===== */ .cpdp .stock { margin: 12px 0 0; padding: 10px 14px 12px; border-radius: 14px; background: var(--blanco); box-shadow: var(--sombra); --c: #2F7A4A; } .cpdp .stock--medio { --c: #B7861A; } .cpdp .stock--bajo { --c: #CF5B22; } .cpdp .stock--minimo { --c: #B13B1B; } .cpdp .stock-t { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--texto2); } .cpdp .stock-t b { color: var(--c); } .cpdp .stock-t i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0 var(--c); animation: cl-pulso 2.4s ease-out infinite; } @keyframes cl-pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } } .cpdp .stock-barra { display: block; height: 7px; margin-top: 8px; border-radius: 99px; background: rgba(32, 64, 46, .10); position: relative; overflow: hidden; } .cpdp .stock-barra > span { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--c); transition: width .8s var(--entrada); } .cpdp .pack .antes { display: block; font-size: 13px; color: var(--texto2); font-weight: 400; } /* era 12,5 px (etapa 4) */ @media (prefers-reduced-motion: reduce) { .cpdp .stock-t i { animation: none; } } /* ===== el dolor (2026-10-11): foto de la alacena con la gelatina encima y la lista de lo que pasaba ===== */ .cpdp .dolor2 { display: grid; gap: 22px; } .cpdp .d-foto { position: relative; margin: 0 0 18px; } .cpdp .d-foto img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: var(--sombra); } .cpdp .d-foto > img:first-child { aspect-ratio: 4 / 5; object-fit: cover; max-height: 520px; } .cpdp .d-foto .d-foto2 { position: absolute; right: -6px; bottom: -18px; width: 38%; aspect-ratio: 1; object-fit: cover; border: 5px solid var(--blanco); border-radius: 16px; transform: rotate(3deg); } .cpdp .d-lista { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; } .cpdp .d-lista li { background: var(--blanco); border-radius: 14px; padding: 12px 16px; box-shadow: var(--sombra); border-left: 4px solid var(--terra); } .cpdp .d-lista b { display: block; font: 400 21px/1.15 var(--serif); color: var(--verde); } .cpdp .d-lista span { font-size: 15.5px; color: var(--texto2); line-height: 1.4; } .cpdp .d-cierre { margin-top: 16px; font: 400 22px/1.2 var(--serif); color: var(--terra-txt); } /* ===== comparación fuerte en tabla (2026-10-11) ===== */ .cpdp .c3 { margin: 22px auto 0; max-width: 820px; background: var(--blanco); border-radius: 22px; box-shadow: 0 16px 40px rgba(32, 64, 46, .14); overflow: hidden; } .cpdp .c3-fila { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; align-items: stretch; border-top: 1px solid rgba(32, 64, 46, .10); } .cpdp .c3-fila:first-child { border-top: 0; } .cpdp .c3-q { padding: 14px 12px 14px 16px; font: 600 14.5px/1.3 var(--sans); color: var(--verde); display: flex; align-items: center; } .cpdp .c3-col, .cpdp .c3-m { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px 6px; gap: 4px; } .cpdp .c3 .c3-c { background: var(--verde); color: var(--hueso); } .cpdp .c3-cab .c3-col { padding: 12px 6px 14px; gap: 8px; } .cpdp .c3-cab b { font: 400 18px/1.1 var(--serif); } .cpdp .c3-cab .c3-c b { color: var(--hueso); font-size: 22px; } .cpdp .c3-foto { position: relative; width: 74px; height: 74px; border-radius: 50%; overflow: hidden; box-shadow: 0 6px 14px rgba(0, 0, 0, .16); background: #F4EFE4; } .cpdp .c3-foto img { width: 100%; height: 100%; object-fit: cover; } .cpdp .c3-foto .tarro { position: absolute; right: 4px; bottom: 4px; width: 30%; height: auto; object-fit: contain; } .cpdp .c3-c .c3-foto { width: 88px; height: 88px; border: 3px solid var(--terra-claro); } .cpdp .c3-m i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; } .cpdp .c3-m i::after { font: 700 15px/1 var(--sans); } .cpdp .c3-si i { background: #2F7A4A; } .cpdp .c3-si i::after { content: "✓"; color: #fff; } .cpdp .c3-c.c3-si i { background: var(--terra-claro); width: 30px; height: 30px; } .cpdp .c3-c.c3-si i::after { color: var(--hondo); font-size: 17px; } .cpdp .c3-no i { background: rgba(177, 59, 27, .12); } .cpdp .c3-no i::after { content: "✕"; color: #B13B1B; } .cpdp .c3-medio i { background: rgba(183, 134, 26, .16); } .cpdp .c3-medio i::after { content: "~"; color: #8A6512; font-size: 19px; } .cpdp .c3-m small { font-size: 12px; line-height: 1.25; color: var(--texto2); max-width: 15ch; } .cpdp .c3-c small { color: var(--crema); opacity: .9; } .cpdp .c3-remate { text-align: center; margin-top: 18px; font: 400 22px/1.2 var(--serif); color: var(--verde); } @media (max-width: 520px) { .cpdp .c3-fila { grid-template-columns: 1.1fr .95fr .95fr .95fr; } .cpdp .c3-q { font-size: 13px; padding-left: 12px; } .cpdp .c3-foto { width: 52px; height: 52px; } .cpdp .c3-c .c3-foto { width: 60px; height: 60px; } .cpdp .c3-cab b { font-size: 14.5px; } .cpdp .c3-cab .c3-c b { font-size: 18px; } .cpdp .c3-m small { font-size: 11px; } } @media (min-width: 900px) { .cpdp .dolor2 { grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; } .cpdp .c3-q { font-size: 16px; padding-left: 24px; } .cpdp .c3-foto { width: 96px; height: 96px; } .cpdp .c3-c .c3-foto { width: 112px; height: 112px; } .cpdp .c3-m small { font-size: 13px; } } /* Elixir fuerza la fuente de los

con !important: los remates en serif lo necesitan también. */ .cpdp .d-cierre, .cpdp .c3-remate { font-family: var(--serif) !important; } /* ===== portada del inicio con foto (2026-10-11 noche) ===== La escena es una foto de Codex con el tarro real sobre las colinas grabadas. El fondo de la sección es el color del cielo de la foto (#DFE5D9, medido) y el borde de arriba de la foto se funde con él. */ .cpdp.ini-heroe.ini-heroe.con-foto { background: #DFE5D9; padding-bottom: 0; } .cpdp.ini-heroe.con-foto .escena-foto { display: block; margin-top: 8px; } .cpdp.ini-heroe.con-foto .escena-foto img { display: block; width: 100%; height: auto; -webkit-mask: linear-gradient(to bottom, transparent, #000 14%); mask: linear-gradient(to bottom, transparent, #000 14%); } @media (min-width: 750px) { /* En computador la foto no va a todo el ancho (el tarro quedaba bajo el pliegue): va a 1100 px como máximo, con los bordes fundidos sobre las colinas grabadas del fondo, que son las mismas de la foto. */ .cpdp.ini-heroe.ini-heroe.con-foto { background: #DFE5D9; } .cpdp.ini-heroe.con-foto .escena-foto { margin-top: 0; } .cpdp.ini-heroe.con-foto .escena-foto img { max-width: 1100px; margin: 0 auto; -webkit-mask: linear-gradient(to bottom, transparent, #000 14%), linear-gradient(to right, transparent, #000 16%, #000 84%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(to bottom, transparent, #000 14%), linear-gradient(to right, transparent, #000 16%, #000 84%, transparent); mask-composite: intersect; } } /* ===== el dolor con su solución (etapa 2, 2026-10-13): cada motivo, tachado, con lo que cambia con cauce y su foto ===== */ .cpdp .d-foto picture { display: block; } .cpdp.con-pares .d-foto > picture img { aspect-ratio: 4 / 5; object-fit: cover; max-height: 600px; width: 100%; display: block; border-radius: 18px; } .cpdp .d-pares { list-style: none; margin: 18px 0 0; padding: 0; } .cpdp .d-pares li { display: grid; grid-template-columns: 68px 1fr; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(236, 232, 224, .22); } .cpdp .d-pares li:last-child { border-bottom: 1px solid rgba(236, 232, 224, .22); } .cpdp .d-mini { width: 68px; height: 68px; border-radius: 14px; object-fit: cover; } .cpdp .d-antes { display: block; font-size: 15px; line-height: 1.3; text-decoration-color: #DF532C; text-decoration-thickness: 2px; } .cpdp .d-ahora { display: block; font: 400 23px/1.15 var(--serif); margin: 2px 0 3px; } .cpdp .d-tx { display: block; font-size: 15.5px; line-height: 1.4; } html.cauce-mezcla .cpdp-dolor.fondo-oscuro .d-antes { color: rgba(236, 232, 224, .76) !important; } /* a .66 daba 4,4:1 sobre la foto (etapa 4) */ html.cauce-mezcla .cpdp-dolor.fondo-oscuro .d-tx { color: rgba(236, 232, 224, .86) !important; } @media (max-width: 899px) { /* En celular la foto va más baja (1:1), para que el problema y su solución entren antes en pantalla. */ .cpdp.con-pares .d-foto > picture img { aspect-ratio: 1 / 1; } .cpdp.con-pares .d-foto { margin-bottom: 4px; } } @media (min-width: 900px) { .cpdp.cpdp-dolor.con-pares .dolor2 { grid-template-columns: .85fr 1.15fr; gap: 64px; } .cpdp .d-mini { width: 76px; height: 76px; } .cpdp .d-pares li { grid-template-columns: 76px 1fr; gap: 20px; } .cpdp .d-ahora { font-size: 25px; } } /* La foto del dolor es vertical (2:3): se recorta a 4:5 en computador y a 1:1 en celular sin perder la cuchara ni el vaso. */ .cpdp.con-pares .d-foto > picture img { object-position: 50% 60%; } /* La etiqueta «Antes · Psyllium solo» sobre la foto del dolor: que nadie la lea como la bebida de cauce. */ .cpdp .d-etiqueta { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 9px; background: rgba(250, 247, 240, .95); color: var(--verde); font: 600 15px/1.2 var(--sans); padding: 6px 14px 6px 6px; border-radius: 99px; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); } .cpdp .d-etiqueta b { background: var(--cta); color: var(--hueso); font-weight: 700; font-size: 13px; letter-spacing: .02em; padding: 4px 10px; border-radius: 99px; } html.cauce-mezcla .cpdp-dolor .d-etiqueta, html.cauce-mezcla .cpdp-dolor .d-etiqueta * { color: var(--verde) !important; } html.cauce-mezcla .cpdp-dolor .d-etiqueta b { color: var(--hueso) !important; } @media (min-width: 900px) { .cpdp .d-etiqueta { top: 20px; left: 20px; font-size: 18px; padding: 7px 16px 7px 7px; } .cpdp .d-etiqueta b { font-size: 15px; padding: 5px 12px; } } /* ===== la cuenta como una suma, centrada (etapa 2, 2026-10-13) ===== */ .cpdp.cuenta3 .c-cab { text-align: center; max-width: 680px; margin: 0 auto; } .cpdp.cuenta3 .c-cab .lead { margin-left: auto; margin-right: auto; } .cpdp.cuenta3 .c-cuerpo { max-width: 600px; margin: 26px auto 0; } .cpdp.cuenta3 .vaso-cuenta { grid-template-columns: 128px 1fr; gap: 20px; align-items: center; } .cpdp.cuenta3 .vaso-foto { width: 128px; } .cpdp.cuenta3 .et { gap: 14px; } .cpdp.cuenta3 .et > div { border-left: 0; padding-left: 0; } .cpdp.cuenta3 .et b { font-size: 34px; } .cpdp.cuenta3 .et .r { border-top: 1.5px solid rgba(236, 232, 224, .45); padding-top: 12px; } .cpdp.cuenta3 .et .r b { font-size: 40px; } .cpdp.cuenta3 .base { margin-top: 22px; } .cpdp.cuenta3 .fuente { text-align: center; } @media (min-width: 900px) { .cpdp.cuenta3 .c-cuerpo { margin-top: 36px; } .cpdp.cuenta3 .vaso-cuenta { grid-template-columns: 200px 1fr; gap: 40px; } .cpdp.cuenta3 .vaso-foto { width: 200px; } .cpdp.cuenta3 .et b { font-size: 46px; } .cpdp.cuenta3 .et .r b { font-size: 56px; } } html.cauce-mezcla #cuenta.cuenta3.fondo-oscuro .et > div { color: rgba(236, 232, 224, .88) !important; } html.cauce-mezcla .cpdp#cuenta.cuenta3.fondo-oscuro .et .t b { color: #DF532C !important; } /* La suma aparece al ritmo del vaso: 17,9 con la base, + 6,6 con la capa de cauce y el resultado al final. Sin JS o con «reducir movimiento» se ve todo de una (cl-js y la clase visto las pone cauce-landing.js). */ .cl-js .cpdp.cuenta3 .et > div { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--entrada) .7s, transform .45s var(--entrada) .7s; } .cl-js .cpdp.cuenta3 .et > div:nth-child(2) { transition-delay: 1.5s; } .cl-js .cpdp.cuenta3 .et > .r { transition-delay: 2.2s; } .cpdp.cuenta3 .vaso-cuenta.visto .et > div { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .cl-js .cpdp.cuenta3 .et > div { opacity: 1; transform: none; transition: none; } } .cpdp.cuenta3 .c-cab :is(.lead, h2) { text-wrap: balance; } /* ===== la cuenta con la Res. 3803 y la ENSIN 2005 (2026-10-13): 16,2 g + 6,6 g = 22,8 g, con la línea de los 25 g ===== Mujeres de 19 a 50 años en las dos fuentes. En la foto la bebida va del 88 % (0 g) al 17,2 % (24,5 g): 2,89 % del alto por gramo. Corte 16,2 g → 41,2 %; tope 22,8 g → 22,1 %; línea de 25 g → 15,75 %. Si cambian las cifras, se recalcula. */ .cpdp.cuenta3 .vaso-foto .lleno.a { clip-path: inset(41.2% 0 0 0); } .cpdp.cuenta3 .vaso-foto .lleno.b { clip-path: inset(22.1% 0 58.8% 0); } .cl-js .cpdp.cuenta3 .vaso-foto .lleno.a { clip-path: inset(88% 0 0 0); } .cl-js .cpdp.cuenta3 .vaso-foto .lleno.b { clip-path: inset(41.2% 0 58.8% 0); } .cpdp.cuenta3 .vaso-cuenta.visto .lleno.a { clip-path: inset(41.2% 0 0 0); } .cpdp.cuenta3 .vaso-cuenta.visto .lleno.b { clip-path: inset(22.1% 0 58.8% 0); } .cpdp.cuenta3 .vaso-foto .meta { top: 15.75%; } .cpdp.cuenta3 .vaso-foto .corte { top: 41.2%; } .cpdp.cuenta3 .vaso-foto .cifra.a { top: 60%; } .cpdp.cuenta3 .vaso-foto .cifra.b { top: 28%; } .cpdp.cuenta3 .et .aviso { font-size: 13px; line-height: 1.35; margin: -4px 0 0; opacity: .8; } .cl-js .cpdp.cuenta3 .et > .aviso { transition-delay: 2.4s; } /* ===== la cuenta: el vaso dibujado por código (2026-10-14) ===== Transparente (se ve la foto de fondo); dos capas: la comida en un tono neutro y cauce en el crema de la bebida, con la línea terracota entre las dos. cauce-landing.js calcula las alturas y lo llena con una ola que se aquieta. */ .cpdp.cuenta3 .vaso-cuenta { grid-template-columns: 136px 1fr; } .cpdp.cuenta3 .vaso3 { width: 100%; height: auto; display: block; overflow: visible; } .cpdp .vaso3 .capa { transition: transform 1.4s cubic-bezier(.22, .8, .3, 1); } .cpdp .vaso3 .capa.c { transition-duration: 1s; transition-delay: 1.35s; } .cpdp .vaso3 .ola { animation: cauce-ola 1.6s linear infinite; } .cpdp .vaso3 .ola-amp { transition: transform 1.2s ease-out; transform-box: fill-box; transform-origin: 50% 100%; } .cpdp .vaso3 .quieto .ola-amp { transform: scaleY(.04); } .cpdp .vaso3 .corte, .cpdp .vaso3 .cifra, .cpdp .vaso3 .superficie { opacity: 0; transition: opacity .4s linear; } .cpdp .vaso3 .cifra.a { transition-delay: 1s; } .cpdp .vaso3 .corte, .cpdp .vaso3 .cifra.b { transition-delay: 1.9s; } .cpdp .vaso3.lleno .corte, .cpdp .vaso3.lleno .cifra { opacity: 1; } .cpdp .vaso3 .quieto .superficie { opacity: 1; transition-duration: .8s; } /* «25 g», la meta (etapa 4, 2026-10-14): en unidades del dibujo, para que salga a 13 px (el vaso mide 136 px en el celular, donde salía a 8 px, y 210 px en computador). Termina en x = 170 (cauce-pdp-cuenta.liquid), a la izquierda del brillo del vidrio (x 174 a 188): encima del brillo daba 3:1. */ .cpdp .vaso3 .meta-t { font-size: 21px; } @media (min-width: 900px) { .cpdp .vaso3 .meta-t { font-size: 14px; } } @keyframes cauce-ola { to { transform: translateX(-60px); } } @media (prefers-reduced-motion: reduce) { .cpdp .vaso3 .capa, .cpdp .vaso3 .corte, .cpdp .vaso3 .cifra, .cpdp .vaso3 .superficie, .cpdp .vaso3 .ola-amp { transition: none !important; } .cpdp .vaso3 .ola { animation: none; } } /* Fuentes con número (2026-10-14): el número es un enlace simple a #fuente- (los campos de Shopify no aceptan ) y aquí se vuelve superíndice. cauce-landing.js (numerarFuentes) pone el número según el orden de aparición. */ .cpdp a[href^="#fuente-"] { font-size: .72em; line-height: 0; vertical-align: super; margin-left: 1px; color: inherit; text-decoration: none; font-weight: inherit; } .cpdp a[href^="#fuente-"]:hover, .cpdp a[href^="#fuente-"]:focus-visible { text-decoration: underline; } .cpdp sup a[href^="#fuente-"] { font-size: inherit; vertical-align: baseline; margin-left: 0; } /* «La comida sigue siendo la base. cauce la complementa.»: sin recuadro, solo texto con buen contraste sobre el fondo. */ .cpdp.cuenta3 .c-base { text-align: center; margin: 26px auto 0; max-width: 560px; font-size: 18px; line-height: 1.45; } .cpdp.cuenta3 .c-base em { font-style: normal; font-weight: 700; } html.cauce-mezcla .cpdp#cuenta.cuenta3.fondo-oscuro .c-cuerpo p.c-base { color: #ECE8E0 !important; } html.cauce-mezcla .cpdp#cuenta.cuenta3.fondo-oscuro .c-cuerpo p.c-base b { color: #fff !important; } html.cauce-mezcla .cpdp#cuenta.cuenta3.fondo-oscuro .c-cuerpo p.c-base em { color: #DF532C !important; } @media (min-width: 900px) { .cpdp.cuenta3 .vaso-cuenta { grid-template-columns: 210px 1fr; } .cpdp.cuenta3 .c-base { font-size: 20px; margin-top: 34px; } } /* ===== fuentes de la página, al final y con número (2026-10-14) ===== */ .cpdp.cpdp-fuentes { padding: 36px 0 44px; background: var(--base, #F4E9D8); } .cpdp-fuentes .f-tit { font: 600 14px/1.3 var(--sans); letter-spacing: 0; color: var(--texto2); margin: 0 0 8px; } .cpdp-fuentes .f-nota { font-size: 13px; color: var(--texto2); margin: -4px 0 8px; } .cpdp-fuentes .f-lista { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.45; color: var(--texto2); max-width: 900px; } .cpdp-fuentes .f-lista li:target { color: var(--verde); } .cpdp-fuentes .f-volver { margin-left: 6px; color: inherit; text-decoration: none; } .cpdp-fuentes .f-volver:hover, .cpdp-fuentes .f-volver:focus-visible { color: var(--verde); } /* cerradas con un «+» junto al título (2026-10-14); se abren solas al tocar un número del texto */ .cpdp-fuentes .f-caja summary { justify-content: flex-start; gap: 10px; padding: 6px 0; width: max-content; max-width: 100%; } .cpdp-fuentes .f-caja summary .f-tit { margin: 0; } .cpdp-fuentes .f-caja summary::after { font-size: 20px; } .cpdp-fuentes .f-cuantas { font-weight: 400; } .cpdp-fuentes .f-caja[open] .f-nota { margin: 2px 0 10px; } .cpdp-fuentes .f-caja[open] .f-lista { animation: f-abre .35s var(--entrada); } @keyframes f-abre { from { opacity: 0; transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { .cpdp-fuentes .f-caja[open] .f-lista { animation: none; } } /* al saltar a una fuente o volver al texto, que no quede debajo del encabezado fijo */ .cpdp [id^="cita-"], .cpdp-fuentes li { scroll-margin-top: 96px; } /* ===== Etapa 2 · los ingredientes (2026-10-14): foto del tarro con sus cuatro fuentes de fibra y debajo cada una con un recorte de la misma foto, su nombre y un «+» que abre qué es y qué hace. Al lado, la etiqueta: tabla, las fibras de la lista a la vista (el resto en un «+»), alérgenos y notificación sanitaria. ===== */ .cpdp.ingr3 .i3-cuerpo { display: grid; gap: 26px; margin-top: 22px; } .cpdp.ingr3 .i3-foto { display: block; border-radius: 18px; overflow: hidden; } .cpdp.ingr3 .i3-foto img { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 733; object-fit: cover; } .cpdp.ingr3 .i3-fibras { margin: 12px 0 0; display: grid; gap: 8px; align-items: start; } .cpdp.ingr3 .i3-fibra { margin: 0; border-radius: 14px; background: rgba(255, 253, 248, .74); border: 1px solid var(--linea); } .cpdp.ingr3 .i3-fibra summary { padding: 8px 14px 8px 8px; justify-content: flex-start; gap: 12px; } .cpdp.ingr3 .i3-fibra summary::after { margin-left: auto; } .cpdp.ingr3 .i3-nombre { font: 700 16px/1.25 var(--sans); color: var(--verde); } .cpdp.ingr3 .i3-fibra p { margin: 0; padding: 0 14px 14px 64px; font-size: 15px; line-height: 1.5; color: var(--texto2); } .cpdp.ingr3 .i3-fibra p b { color: var(--verde); font-weight: 700; } /* El recorte sale de la misma foto: --x y --y (0 a 100) son el centro del ingrediente; --z, cuánto se acerca. */ .cpdp.ingr3 .i3-mini { --z: 5.4; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background-image: var(--i3-foto-movil); background-repeat: no-repeat; background-size: calc(var(--z) * 100%) auto; background-position: calc((var(--x) / 100 * var(--z) - .5) / (var(--z) - 1) * 100%) calc((var(--y) / 100 * var(--z) * .5727 - .5) / (var(--z) * .5727 - 1) * 100%); box-shadow: 0 0 0 2px var(--blanco), 0 0 0 3px var(--linea); } .cpdp.ingr3 .i3-prueba { font-size: 16.5px; line-height: 1.45; margin: 0 0 14px; color: var(--hondo); background: #EFCDBE; border-radius: 12px; padding: 12px 15px; } .cpdp.ingr3 .i3-prueba b { color: var(--hondo); font-weight: 800; } .cpdp.ingr3 .i3-ingr { margin-top: 14px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); } .cpdp.ingr3 .i3-ingr summary { font: 700 16px/1.3 var(--sans); color: var(--verde); padding: 12px 0; } .cpdp.ingr3 .i3-ingr p { font-size: 15px; line-height: 1.55; color: var(--texto); margin: 0; padding: 0 0 14px; } .cpdp.ingr3 .i3-ingr p b { color: var(--terra-txt); font-weight: 700; } .cpdp.ingr3 .alerg { margin-top: 14px; } .cpdp.ingr3 .i3-pie { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 12px 16px; background: var(--blanco); border: 2px solid var(--verde); border-radius: 12px; font: 600 14px/1.3 var(--sans); color: var(--verde); } .cpdp.ingr3 .i3-pie svg { flex: 0 0 30px; width: 30px; height: 30px; } .cpdp.ingr3 .i3-pie span { font-size: 14px; font-weight: 600; } .cpdp.ingr3 .i3-pie strong { display: block; font: 800 21px/1.15 var(--sans); letter-spacing: .01em; white-space: nowrap; } .cpdp.ingr3 .i3-orgullo { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 0 2px; font: 700 15.5px/1.3 var(--sans); color: var(--verde); } .cpdp.ingr3 .i3-orgullo svg { flex: 0 0 30px; width: 30px; height: 20px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(20, 33, 22, .15); } @media (min-width: 700px) { .cpdp.ingr3 .i3-fibras { grid-template-columns: 1fr 1fr; } .cpdp.ingr3 .i3-mini { background-image: var(--i3-foto); } } @media (min-width: 900px) { .cpdp.ingr3 .i3-cuerpo { grid-template-columns: 1.12fr 1fr; gap: 48px; align-items: start; margin-top: 28px; } } /* ===== Etapa 2 · el hábito (2026-10-14): «Mezcla · Toma · Repite.» con los pasos en filas y los 66 días a lo ancho ===== Movimiento, solo el que cuenta algo (se ve cuando cauce-landing.js pone la clase visto; sin script o con «reducir movimiento», el estado final): una línea fina baja del paso 1 al 3, cada número se llena cuando la línea llega y en «Repite» una flecha da la vuelta: el método es un ciclo. Los 66 puntos se llenan con un contador de días y uno queda vacío, el día que se pasó, mientras la cuenta sigue. Entra, se asienta y se queda quieto (brand book §3.7). */ .cpdp.habito3 .h3-cuerpo { display: grid; gap: 22px; } .cpdp.habito3 .h3-foto img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; } .cpdp.habito3 .lead { margin: 6px 0 0; text-wrap: pretty; } .cpdp.habito3 .h3-pasos { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; } .cpdp.habito3 .h3-paso { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; margin: 0; } .cpdp.habito3 .h3-paso b { display: block; font: 700 16px/1.3 var(--sans); color: var(--verde); } .cpdp.habito3 .h3-paso span:not(.h3-n) { display: block; margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--texto2); } .cpdp.habito3 .h3-n { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; background: var(--cta); color: var(--hueso); font: 400 20px/36px var(--serif); text-align: center; } /* la línea que une los pasos: un tramo debajo de cada número, hasta el siguiente */ .cpdp.habito3 .h3-paso:not(:last-child)::after { content: ""; position: absolute; left: 17.25px; top: 40px; bottom: -14px; width: 1.5px; background: var(--cta); opacity: .45; transform-origin: top; } .cpdp.habito3 .h3-vuelta { position: absolute; left: -11px; top: -11px; width: 58px; height: 58px; stroke: var(--cta); stroke-width: 1.6; pointer-events: none; } .cpdp.habito3 .h3-vuelta .arco { stroke-dasharray: 1; stroke-dashoffset: 0; } /* con script: arranca vacío y se arma al entrar en pantalla */ .cl-js .cpdp.habito3 .h3-n { background: transparent; color: var(--terra-txt); box-shadow: inset 0 0 0 1.5px var(--cta); transition: background-color .35s var(--entrada), color .35s var(--entrada); } .cl-js .cpdp.habito3 .h3-paso:not(:last-child)::after { transform: scaleY(0); transition: transform .4s var(--entrada); } .cl-js .cpdp.habito3 .h3-vuelta .arco { stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--entrada); } .cl-js .cpdp.habito3 .h3-vuelta .punta { opacity: 0; transition: opacity .2s linear; } .cl-js .cpdp.habito3 .visto .h3-n { background: var(--cta); color: var(--hueso); } .cl-js .cpdp.habito3 .visto .h3-paso:nth-child(2) .h3-n { transition-delay: .5s; } .cl-js .cpdp.habito3 .visto .h3-paso:nth-child(3) .h3-n { transition-delay: 1s; } .cl-js .cpdp.habito3 .visto .h3-paso:not(:last-child)::after { transform: none; } .cl-js .cpdp.habito3 .visto .h3-paso:nth-child(1)::after { transition-delay: .15s; } .cl-js .cpdp.habito3 .visto .h3-paso:nth-child(2)::after { transition-delay: .65s; } .cl-js .cpdp.habito3 .visto .h3-vuelta .arco { stroke-dashoffset: 0; transition-delay: 1.15s; } .cl-js .cpdp.habito3 .visto .h3-vuelta .punta { opacity: 1; transition-delay: 1.9s; } @media (prefers-reduced-motion: reduce) { .cl-js .cpdp.habito3 .h3-n, .cl-js .cpdp.habito3 .h3-paso::after, .cl-js .cpdp.habito3 .h3-vuelta * { transition: none !important; } } @media (min-width: 900px) { .cpdp.habito3 .h3-cuerpo { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .cpdp.habito3 .h3-foto img { aspect-ratio: 4 / 3; } .cpdp.habito3 .h3-pasos { margin-top: 22px; gap: 18px; } .cpdp.habito3 .h3-paso:not(:last-child)::after { bottom: -16px; } } /* ===== Etapa 2 · la franja de mitad (2026-10-14): «Tu plan» con «Cambiar», que abre ahí mismo las opciones ===== Las opciones las arma cauce-pdp.js con los packs de la compra. Movimiento que cuenta algo: al escoger, el plan sale hacia arriba y entra el nuevo desde abajo, y una pastilla clara se desliza a la opción escogida. Sin precio por porción (Juan Camilo, 2026-10-14); con 2 o 3 tarros, el ahorro. Con «reducir movimiento», sin transiciones. */ .cpdp.mitad [data-mt-anima] { display: inline-block; transition: opacity .28s var(--entrada), transform .28s var(--entrada); } .cpdp.mitad .mt-t[data-mt-anima] { display: block; } .cpdp.mitad [data-mt-anima].sale { opacity: 0; transform: translateY(-8px); transition: opacity .18s ease-in, transform .18s ease-in; } .cpdp.mitad [data-mt-anima].entra { opacity: 0; transform: translateY(10px); transition: none; } .cpdp.mitad .mt-p { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; } .cpdp.mitad .mt-ahorro { color: var(--terra-claro); font-weight: 700; } .cpdp.mitad .mt-ahorro::before { content: "·"; margin: 0 6px; color: var(--crema); font-weight: 400; } .cpdp.mitad .cambiar { margin: 0; } .cpdp.mitad .mt-opciones { display: grid; grid-template-rows: 0fr; margin: 0; transition: grid-template-rows .32s var(--entrada), margin .32s var(--entrada); } .cpdp.mitad.abierta .mt-opciones { grid-template-rows: 1fr; margin: 2px 0 16px; } .cpdp.mitad .mt-ops { --n: 3; --i: 0; position: relative; min-height: 0; overflow: hidden; display: grid; grid-template-columns: repeat(var(--n), 1fr); border-radius: 14px; background: rgba(245, 242, 234, .08); box-shadow: inset 0 0 0 1px rgba(245, 242, 234, .24); max-width: 440px; } .cpdp.mitad .mt-ops::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); border-radius: 10px; background: var(--hueso); transform: translateX(calc(var(--i) * 100%)); transition: transform .32s var(--entrada); } .cpdp.mitad .mt-op.mt-op { position: relative; z-index: 1; display: grid; gap: 1px; justify-items: center; align-content: center; min-height: 64px; padding: 10px 6px; background: none !important; border: 0 !important; box-shadow: none !important; color: var(--crema); font: inherit; cursor: pointer; text-align: center; } .cpdp.mitad .mt-op b { font: 700 15px/1.2 var(--sans); color: var(--hueso); transition: color .2s linear; } .cpdp.mitad .mt-op span { font-size: 14px; line-height: 1.3; transition: color .2s linear; } .cpdp.mitad .mt-op small { font-size: 11.5px; line-height: 1.2; color: var(--terra-claro); transition: color .2s linear; } .cpdp.mitad .mt-op[aria-pressed="true"] :is(b, span) { color: var(--verde); } .cpdp.mitad .mt-op[aria-pressed="true"] small { color: var(--terra-txt); } .cpdp.mitad .mt-op small.pum { margin: 0; font-size: 11px; color: rgba(232, 228, 216, .8); } .cpdp.mitad .mt-op[aria-pressed="true"] small.pum { color: var(--texto2); } @media (min-width: 900px) { .cpdp.mitad .wrap { transform: translateY(calc(var(--sube, 0px) * -1)); transition: transform .32s var(--entrada); } } .cpdp.mitad .mt-op:focus-visible { outline: 2px solid var(--terra-claro); outline-offset: -3px; border-radius: 12px; } @media (prefers-reduced-motion: reduce) { .cpdp.mitad :is([data-mt-anima], .mt-opciones, .mt-op b, .mt-op span, .mt-op small) { transition: none !important; } .cpdp.mitad .mt-ops::before, .cpdp.mitad .wrap { transition: none !important; } } /* ===== PUM (2026-10-14): precio por gramo, obligatorio en la venta en línea (Circular Única de la SIC, num. 2.3.3; ver 08-legal-regulatorio/precio-por-unidad-de-medida-2026-10-14.md). Va pegado a cada precio total y con al menos la mitad de su altura. Lo más discreto que permite la norma (Juan Camilo): gris, sin negrilla y con un mínimo legible de 11 px. El precio grande de la compra y del catálogo baja de 34/40 px a 30/32 px para que el PUM quede en 15/16 px. ===== */ .cpdp .pum { font-weight: 400; color: var(--texto2); white-space: nowrap; } .cpdp .precio .p { font-size: 30px; } .cpdp .precio .pp { font-size: 15px; } @media (min-width: 900px) { .cpdp .precio .p { font-size: 32px; } .cpdp .precio .pp { font-size: 16px; } } .cpdp .pack .pr small.pum, .cpdp-fija .pr small.pum { font-size: 11px; } .cpdp .eleccion .pum { font-size: 11px; align-self: center; } .cpdp.mitad .pum { font-size: 11px; color: rgba(232, 228, 216, .8); margin-left: 6px; } /* ===== Etapa 2 · cuándo se toma (2026-10-14): la corriente del día, con el cielo que pasa de la mañana a la noche ===== Juan Camilo escogió la corriente (opción B) y pidió que el fondo sea claro en la mañana y se oscurezca al llegar la noche, y que todo vuelva atrás al subir. El cielo son dos capas (atardecer y noche) encima de la mañana: cauce-landing.js les da la opacidad según dónde va la gota y pone de-noche cuando el texto tiene que pasar a claro. La noche termina en el verde hondo de la comparación, que sigue. Sin script o con «reducir movimiento», el cielo va de arriba abajo y no se mueve: mañana arriba, atardecer en medio y noche abajo. Los textos ya no esperan apagados a la gota: solo el círculo se enciende. */ html.cauce-mezcla .cpdp.cpdp-sec.cpdp-dia.cdia2, .cpdp.cpdp-sec.cpdp-dia.cdia2 { position: relative; overflow: hidden; background: radial-gradient(60% 40% at 6% 4%, rgba(255, 224, 186, .95), rgba(255, 224, 186, 0) 70%), radial-gradient(45% 35% at 100% 22%, rgba(201, 216, 182, .55), rgba(201, 216, 182, 0) 70%), #F4E9D8; } .cpdp.cdia2 .cdia-cielo, .cpdp.cdia2 .cdia-cielo i { position: absolute; inset: 0; pointer-events: none; } .cpdp.cdia2 .cdia-cielo { z-index: 0; } .cpdp.cdia2 .cdia-cielo .tarde { background: radial-gradient(85% 55% at 50% 100%, rgba(235, 128, 88, .7), rgba(235, 128, 88, 0) 72%), linear-gradient(#F7DDC6, #F0BC9B); } .cpdp.cdia2 .cdia-cielo .noche { background: radial-gradient(42% 26% at var(--lx, 62%) var(--ly, 66%), rgba(240, 150, 100, .30), rgba(240, 150, 100, 0) 70%), linear-gradient(#1D2E23, #142116 55%); } .cpdp.cdia2:not(.cielo-vivo) .cdia-cielo .tarde { -webkit-mask: linear-gradient(transparent 20%, #000 40%, #000 56%, transparent 72%); mask: linear-gradient(transparent 20%, #000 40%, #000 56%, transparent 72%); } .cpdp.cdia2:not(.cielo-vivo) .cdia-cielo .noche { -webkit-mask: linear-gradient(transparent 60%, #000 80%); mask: linear-gradient(transparent 60%, #000 80%); } .cpdp.cdia2.cielo-vivo .cdia-cielo i { opacity: 0; } .cpdp.cdia2 .wrap { position: relative; z-index: 1; } /* el texto, claro de noche (la tarjeta de la cena es blanca y se queda oscura) */ .cpdp.cdia2 :is(.kicker, h2, .lead, .cdia-o, .parada h3, .parada p) { transition: color .35s linear; } .cpdp.cdia2.de-noche .kicker { color: var(--terra-claro); } .cpdp.cdia2.de-noche .parada.fin h3, .cpdp.cdia2:not(.cielo-vivo) .parada.fin h3 { color: var(--terra-claro) !important; } /* .cpdp h3 hereda con !important (cauce-pdp.css) */ .cpdp.cdia2.de-noche h2 { color: var(--hueso) !important; } .cpdp.cdia2.de-noche .parada:not(.prin, .fin) h3 { color: var(--hueso) !important; } .cpdp.cdia2.de-noche :is(.lead, .cdia-o), .cpdp.cdia2.de-noche .parada:not(.prin) p { color: #D9D6CA; } .cpdp.cdia2 .cdia-cor .base { transition: stroke .35s linear; } .cpdp.cdia2.de-noche .cdia-cor .base { stroke: rgba(245, 242, 234, .22); } /* Velo detrás del texto (etapa 4, 2026-10-14): a mitad del cambio, el cielo pasa por tonos medios donde ni el texto claro ni el oscuro llegan a 4,5:1 (bajaba a 2,3:1 en el celular durante unos 70 px de scroll). Solo en ese tramo aparece detrás del encabezado y del texto de cada momento una nube suave del color de la mañana (si el texto es oscuro) o de la noche (si es claro). --velo sale de corriente() en cauce-landing.js y vale 0 con el cielo claro o ya de noche. De noche el antetítulo va en el coral claro de las secciones oscuras (#F4A288), que deja más margen que el terracota claro. */ .cpdp.cdia2.cielo-vivo { --velo-c: 244, 233, 216; } .cpdp.cdia2.cielo-vivo.de-noche { --velo-c: 20, 33, 22; } .cpdp.cdia2.cielo-vivo.de-noche .kicker { color: #DF532C; } .cpdp.cdia2.cielo-vivo :is(.cdia-cab, .cdia-o, .parada:not(.prin) .tx-t) { position: relative; width: fit-content; max-width: 100%; } .cpdp.cdia2.cielo-vivo :is(.cdia-cab, .cdia-o, .parada:not(.prin) .tx-t)::before { content: ""; position: absolute; inset: -26px -34px; z-index: -1; border-radius: 60px; background: rgba(var(--velo-c), calc(var(--velo, 0) * .92)); filter: blur(22px); pointer-events: none; } @media (min-width: 900px) { .cpdp .parada:not(.fin) .tx-t { grid-column: 2; grid-row: 1 / span 3; align-self: start; } } /* los momentos: el texto siempre a la vista; el círculo, con su dibujo, se enciende con una onda cuando llega la gota */ .cl-js .cpdp.cdia2 .parada .tx { opacity: 1; transform: none; } .cl-js .cpdp.cdia2 .parada .ilu { transform: scale(.8); opacity: .6; } .cl-js .cpdp.cdia2 .parada.on .ilu { transform: none; opacity: 1; } .cpdp.cdia2 .parada .ilu { overflow: visible; background: var(--blanco); color: rgba(32, 64, 46, .5); box-shadow: inset 0 0 0 1.5px rgba(32, 64, 46, .2), 0 4px 14px rgba(32, 64, 46, .12); transition: transform .5s var(--entrada), opacity .5s var(--entrada), color .35s linear, background-color .35s linear, box-shadow .35s linear; } .cpdp.cdia2 .parada .ilu svg.ico { width: 54%; height: 54%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .cpdp.cdia2 .parada.on .ilu { color: var(--terra-txt); box-shadow: inset 0 0 0 1.5px var(--terra), 0 4px 14px rgba(32, 64, 46, .12); } .cpdp.cdia2 .parada.prin.on .ilu { background: var(--terra); color: var(--blanco); } .cpdp.cdia2 .parada:not(.fin) .ilu::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--terra); opacity: 0; pointer-events: none; } .cl-js .cpdp.cdia2 .parada.on:not(.fin) .ilu::after { animation: cdia-onda 1s cubic-bezier(.2, .6, .3, 1) 1 both; } @keyframes cdia-onda { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8); } } .cpdp.cdia2 .parada .tx p { margin: 0; text-wrap: pretty; } /* la cena: la mesa con la luz encendida (de noche, un halo cálido detrás de la tarjeta) */ .cpdp.cdia2 .parada.prin .tx { box-shadow: none; border: 1.5px solid rgba(32, 64, 46, .12); transition: border-color .5s var(--entrada), box-shadow .6s var(--entrada); } .cpdp.cdia2 .parada.prin.on .tx { border-color: var(--terra); } .cpdp.cdia2.de-noche .parada.prin .tx, .cpdp.cdia2:not(.cielo-vivo) .parada.prin .tx { box-shadow: 0 22px 70px rgba(240, 140, 90, .30); } .cpdp.cdia2 .cdia-o { margin: -14px 0 20px; font: italic 400 24px/1 var(--serif); color: var(--texto2); } .cpdp.cdia2 .parada.fin h3 { margin-top: 10px; } /* la comparación, que sigue, ya no se funde desde la arena: sigue la noche */ html.cauce-mezcla .shopify-section:has(> .cdia2) + .shopify-section > .cpdp.cpdp-sec.cpdp-comp3 { --fundido: linear-gradient(#142116 0, rgba(20, 33, 22, 0) 120px, rgba(244, 233, 216, 0) calc(100% - 180px), rgba(244, 233, 216, .07) calc(100% - 158px), rgba(244, 233, 216, .22) calc(100% - 124px), rgba(244, 233, 216, .45) calc(100% - 84px), rgba(244, 233, 216, .7) calc(100% - 50px), rgba(244, 233, 216, .9) calc(100% - 22px), var(--base) 100%); } @media (min-width: 900px) { .cpdp.cdia2 .wrap { max-width: 760px; } .cpdp.cdia2 .parada.fin h3 { font-size: 30px; } } @media (prefers-reduced-motion: reduce) { .cpdp.cdia2 .parada .ilu::after { display: none; } } /* ===== Etapa 2 · comparación (2026-10-14; Juan Camilo escogió «la columna se llena», opción A) ===== Las marcas son dibujos (SVG) para poder trazarlas. La pregunta de cada fila va a la izquierda y, en el celular, en su propia línea a todo el ancho, con las tres marcas debajo (antes se partía en cuatro o cinco líneas en una columna estrecha). La columna de cauce se llena de verde hasta la línea de lectura (--f, por celda) y cada ✓ se marca cuando el verde pasa por su centro (c3-lleno); el texto se tiñe justo hasta la línea del verde; al subir, vuelve atrás (cauce-landing.js, comparar()). Sin script o con «reducir movimiento», llena. */ .cpdp.comp4 .comp-wrap { max-width: 820px; } .cpdp.comp4 .c3 { max-width: 860px; } .cpdp.comp4 .c3-q { position: relative; text-align: left; } .cpdp.comp4 .c3-m small { font-size: 13px; max-width: 17ch; } .cpdp.comp4 .c3-m i { position: relative; width: 30px; height: 30px; } .cpdp.comp4 .c3-m i::after { content: none; } .cpdp.comp4 .c3-m i svg { width: 17px; height: 17px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .cpdp.comp4 .c3-m i path { stroke-dasharray: 1; stroke-dashoffset: 0; } .cpdp.comp4 .c3-si i { color: #fff; } .cpdp.comp4 .c3-no i { color: #B13B1B; } .cpdp.comp4 .c3-medio i { color: #8A6512; } .cpdp.comp4 .c3 .c3-c.c3-si i { width: 34px; height: 34px; color: var(--hondo); } .cpdp.comp4 .c3 .c3-c.c3-si i svg { width: 19px; height: 19px; stroke-width: 2.8; } /* la columna que se llena: verde hasta --f, con una línea más clara en el borde mientras sube (--m) */ .cpdp.comp4 [data-mov="llena"] .c3-c { --f: 1; --m: 0; background: linear-gradient(var(--verde) 0, var(--verde) calc(var(--f) * 100% - 3px * var(--m)), #3F6B50 calc(var(--f) * 100% - 3px * var(--m)), #3F6B50 calc(var(--f) * 100%), #E5EBE0 calc(var(--f) * 100%)); } .cpdp.comp4 [data-mov="llena"] .c3-c i { transition: background-color .3s var(--entrada), box-shadow .3s var(--entrada); } .cpdp.comp4 [data-mov="llena"] .c3-c i path { transition: stroke-dashoffset .45s var(--entrada) .06s; } /* el texto se tiñe de claro justo hasta la línea del verde (--ft, desde el script) */ .cpdp.comp4.c3-vivo [data-mov="llena"] .c3-c small { --claro: var(--crema); --oscuro: var(--texto2); } .cpdp.comp4.c3-vivo [data-mov="llena"] .c3-c b { --claro: var(--hueso); --oscuro: var(--verde); } .cpdp.comp4.c3-vivo [data-mov="llena"] .c3-c :is(small, b) { --ft: 1; color: transparent; transition: none; background: linear-gradient(var(--claro) calc(var(--ft) * 100%), var(--oscuro) calc(var(--ft) * 100%)); -webkit-background-clip: text; background-clip: text; } .cpdp.comp4.c3-vivo [data-mov="llena"] .c3-c.c3-si:not(.c3-lleno) i { background: transparent; box-shadow: inset 0 0 0 2px rgba(223, 83, 44, .5); } .cpdp.comp4.c3-vivo [data-mov="llena"] .c3-c.c3-si:not(.c3-lleno) i path { stroke-dashoffset: 1; transition-delay: 0s; } .cpdp.comp4.c3-vivo [data-mov="llena"] .c3-c.c3-lleno i { animation: c3-pop .5s var(--entrada); } .cpdp.comp4 [data-mov="llena"] .c3-c .c3-foto { transition: box-shadow .6s var(--entrada); } .cpdp.comp4.c3-vivo [data-mov="llena"].c3-completa .c3-c .c3-foto { box-shadow: 0 6px 14px rgba(0, 0, 0, .16), 0 0 0 7px rgba(240, 136, 107, .28); } @keyframes c3-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.16); } 100% { transform: none; } } /* después de la noche de «Cuándo se toma», menos noche vacía antes del antetítulo (eran ~280 px) */ html.cauce-mezcla .shopify-section:has(> .cdia2) + .shopify-section > .cpdp.cpdp-sec.cpdp-comp3:not(#z) { padding-top: 64px !important; } @media (max-width: 600px) { .cpdp.comp4 .c3-fila { grid-template-columns: repeat(3, 1fr); } .cpdp.comp4 .c3-cab .c3-q { display: none; } .cpdp.comp4 .c3-fila:not(.c3-cab) .c3-q { grid-column: 1 / -1; padding: 14px 16px 2px; font-size: 15px; } .cpdp.comp4 .c3-cab .c3-col { padding-bottom: 12px; } .cpdp.comp4 .c3-m { padding: 8px 4px 14px; } .cpdp.comp4 .c3-m small { font-size: 13px; max-width: 14ch; } /* 13 px como mínimo (brand book §3.3; etapa 4, 2026-10-14) */ .cpdp.comp4 .c3-fila:not(.c3-cab) .c3-c { margin: 4px 6px 10px; border-radius: 14px; padding-top: 10px; } .cpdp.comp4 .c3-cab .c3-c { border-radius: 0 0 14px 14px; margin: 0 6px; } } @media (max-width: 899px) { html.cauce-mezcla .shopify-section:has(> .cdia2) + .shopify-section > .cpdp.cpdp-sec.cpdp-comp3:not(#z) { padding-top: 40px !important; } } @media (prefers-reduced-motion: reduce) { .cpdp.comp4 .c3 * { animation: none !important; transition: none !important; } } /* ===== Etapa 2 · el cierre (2026-10-14): «Cambiar» abre ahí mismo las opciones, como en la franja de mitad ===== Versión clara del selector de la franja (cauce-pdp.js arma los botones con los packs de la compra). La caja muestra «Tu elección» arriba, el plan con su PUM pegado al precio debajo y «Cambiar» a la derecha (antes se caía a otra línea). La línea de confianza, en el celular, en dos columnas con una marca pequeña. */ .cpdp.final2 .eleccion { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 14px; text-align: left; padding: 12px 16px; margin-bottom: 10px; } .cpdp.final2 .eleccion .el-t { grid-column: 1; font-size: 13px; color: var(--texto2); } .cpdp.final2 .eleccion .el-plan { grid-column: 1; font-size: 14px; color: var(--texto2); } .cpdp.final2 .eleccion .el-plan .pum { margin-left: 4px; } .cpdp.final2 .eleccion .cambiar { grid-column: 2; grid-row: 1 / span 2; margin: 0; } .cpdp.final2 .mt-ahorro { color: var(--terra-txt); font-weight: 700; font-size: 13px; } .cpdp.final2 .mt-ahorro::before { content: "·"; margin: 0 6px; color: var(--texto2); font-weight: 400; } .cpdp.final2 [data-mt-anima] { display: inline-block; transition: opacity .28s var(--entrada), transform .28s var(--entrada); } .cpdp.final2 [data-mt-anima].sale { opacity: 0; transform: translateY(-8px); transition: opacity .18s ease-in, transform .18s ease-in; } .cpdp.final2 [data-mt-anima].entra { opacity: 0; transform: translateY(10px); transition: none; } .cpdp.final2 .mt-opciones { display: grid; grid-template-rows: 0fr; max-width: 460px; margin: 0 auto; transition: grid-template-rows .32s var(--entrada), margin .32s var(--entrada); } .cpdp.final2.abierta .mt-opciones { grid-template-rows: 1fr; margin: 0 auto 10px; } .cpdp.final2 .mt-ops { --n: 3; --i: 0; position: relative; min-height: 0; overflow: hidden; display: grid; grid-template-columns: repeat(var(--n), 1fr); border-radius: 14px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); } .cpdp.final2 .mt-ops::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); border-radius: 10px; background: var(--verde); transform: translateX(calc(var(--i) * 100%)); transition: transform .32s var(--entrada); } .cpdp.final2 .mt-op.mt-op { position: relative; z-index: 1; display: grid; gap: 1px; justify-items: center; align-content: center; min-height: 64px; padding: 10px 6px; background: none !important; border: 0 !important; box-shadow: none !important; color: var(--texto2); font: inherit; cursor: pointer; text-align: center; } .cpdp.final2 .mt-op b { font: 700 15px/1.2 var(--sans); color: var(--verde); transition: color .2s linear; } .cpdp.final2 .mt-op span { font-size: 14px; line-height: 1.3; transition: color .2s linear; } .cpdp.final2 .mt-op small { font-size: 11.5px; line-height: 1.2; color: var(--terra-txt); transition: color .2s linear; } .cpdp.final2 .mt-op small.pum { margin: 0; font-size: 11px; color: var(--texto2); } .cpdp.final2 .mt-op[aria-pressed="true"] :is(b, span) { color: var(--hueso); } .cpdp.final2 .mt-op[aria-pressed="true"] small { color: var(--terra-claro); } .cpdp.final2 .mt-op[aria-pressed="true"] small.pum { color: rgba(232, 228, 216, .85); } .cpdp.final2 .mt-op:focus-visible { outline: 2px solid var(--terra); outline-offset: -3px; border-radius: 12px; } @media (max-width: 600px) { .cpdp.final2 .confianza { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; text-align: left; max-width: 460px; margin-left: auto; margin-right: auto; } .cpdp.final2 .confianza span:last-child { grid-column: 1 / -1; } .cpdp.final2 .confianza span::before { content: "✓"; margin-right: 6px; color: var(--terra-txt); font-weight: 700; } } @media (prefers-reduced-motion: reduce) { .cpdp.final2 :is([data-mt-anima], .mt-opciones, .mt-op b, .mt-op span, .mt-op small), .cpdp.final2 .mt-ops::before { transition: none !important; } } /* la mesa del cierre se acerca con el scroll (--z, desde el script; prueba del 2026-10-14): el tamaño de la foto ya lleva --z en cauce-fondos.css (4 · el cierre). */ /* ===== Etapa 2 · preguntas (2026-10-14): grupos con título ===== */ .cpdp .faq-grupos .faq-grupo { font: 600 13px/1.3 var(--sans); color: var(--terra-txt); margin: 22px 0 4px; } .cpdp .faq-grupos .acord > .faq-grupo:first-child { margin-top: 0; } .cpdp .faq-grupos .faq-grupo + details { border-top: 1px solid var(--linea); } .cpdp .faq-grupos .acord details:has(+ .faq-grupo) { border-bottom: 1px solid var(--linea); } @media (max-width: 899px) { /* en el celular las dos columnas van una debajo de la otra: el grupo que abre la segunda lleva el mismo aire que los demás */ .cpdp .faq-grupos .acord + .acord > .faq-grupo:first-child { margin-top: 22px; } } /* ===== Etapa 2 · el inicio (2026-10-14) ===== */ /* portada: en el celular, el logo más pequeño para que el tarro entre en la primera pantalla; el botón, lleno */ @media (max-width: 600px) { .cpdp.ini-heroe .marca { width: min(200px, 56%); } .cpdp.ini-heroe { padding-top: 40px; } } .cpdp.ini-heroe .btn.sec { width: auto; } /* historia: la corriente se dibuja con el scroll y cada paso se marca al llegar (trazarHistoria) */ .cpdp .historia > svg .base { stroke: rgba(223, 83, 44, .22); } .cpdp .historia > svg .tinta { stroke-dasharray: 1; stroke-dashoffset: 0; } .cpdp .historia.traza-viva > svg .tinta { stroke-dashoffset: calc(1 - var(--t, 1)); } .cpdp .historia .hito { position: relative; } .cpdp .historia .hito::before { content: ""; position: absolute; left: -26px; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--terra); box-shadow: 0 0 0 4px rgba(223, 83, 44, .16); } .cpdp .historia.traza-viva .hito::before { transform: scale(.4); opacity: .35; transition: transform .35s var(--entrada), opacity .35s var(--entrada); } .cpdp .historia.traza-viva .hito.hito-on::before { transform: none; opacity: 1; animation: hito-pop .45s var(--entrada); } @keyframes hito-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: none; } } @media (prefers-reduced-motion: reduce) { .cpdp .historia .hito::before { animation: none !important; transition: none !important; } } /* ingredientes del inicio: recortes de la foto de la PDP (1280 × 734), en tarjetas 4:3. --x y --y, el centro; --z, cuánto se acerca */ .cpdp .ingr4 .ing-recorte { --z: 4.4; background-image: var(--foto-ing); background-repeat: no-repeat; background-size: calc(var(--z) * 100%) auto; background-position: calc((var(--x) / 100 * var(--z) - .5) / (var(--z) - 1) * 100%) calc((var(--y) / 100 * var(--z) * .5734 - .375) / (var(--z) * .5734 - .75) * 100%); } .cpdp .ing-mas { margin: 16px 0 0; font-weight: 700; } .cpdp .ing-mas a { color: var(--terra-txt); } .cpdp .ing-mas a::after { content: " →"; } /* Las capas de las colinas se llaman c1, c2 y c3, y la tabla de la comparación también usa .c3 (fondo blanco, bordes redondeados): sin esto, la capa del frente salía como un rectángulo blanco (portada del inicio y catálogo). */ .cpdp .colinas svg.c3 { background: none; border-radius: 0; box-shadow: none; margin: 0; max-width: none; overflow: visible; } /* ===== Etapa 2 · portada oscura del inicio (2026-10-14, pedida por Juan Camilo; segunda vuelta) ===== Toda la portada sobre el verde hondo de la franja de arriba (#142116), así no hay corte con el encabezado. Detrás, el paisaje grabado de la etiqueta, tono sobre tono (Codex, copia de la etiqueta: cauce-portada-paisaje*.webp), que se desliza despacio, siempre (60 s ida y vuelta). Detrás del tarro, una luz cálida en dos capas que respiran en bucle (6 y 9 s) y aclaran el paisaje que tienen detrás. Abajo, el mismo fundido largo de toda la tienda hacia la arena. */ html.cauce-mezcla .cpdp.ini-heroe.ini-heroe.oscura, .cpdp.ini-heroe.ini-heroe.oscura { position: relative; overflow: hidden; background: #142116; color: var(--hueso); padding: 44px 0 0; } .cpdp.ini-heroe.oscura::before { content: ""; position: absolute; inset: -2% -4%; z-index: 0; pointer-events: none; background: url('cauce-portada-paisaje-movil.webp') center bottom / cover no-repeat; animation: ini-paisaje 60s ease-in-out infinite alternate; will-change: transform; } @keyframes ini-paisaje { from { transform: translateX(-2.5%) scale(1.03); } to { transform: translateX(2.5%) scale(1.06); } } .cpdp.ini-heroe.oscura::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: 3; pointer-events: none; background: linear-gradient(rgba(244, 233, 216, 0), rgba(244, 233, 216, .07) 22px, rgba(244, 233, 216, .22) 56px, rgba(244, 233, 216, .45) 96px, rgba(244, 233, 216, .7) 130px, rgba(244, 233, 216, .9) 158px, var(--base, #F4E9D8)); } .cpdp.ini-heroe.oscura .wrap { position: relative; z-index: 2; } .cpdp.ini-heroe.oscura h1 { color: var(--hueso) !important; margin-top: 8px; } .cpdp.ini-heroe.oscura .s { color: rgba(245, 242, 234, .84) !important; } .cpdp.ini-heroe.oscura .marca svg g:not(.gota-logo) { fill: var(--hueso); } .cpdp.ini-heroe.oscura .escena-oscura { position: relative; z-index: 1; height: 380px; margin-top: 8px; } /* la luz de atrás: dos capas cálidas que respiran desfasadas, sobre el paisaje y detrás del tarro */ .cpdp.ini-heroe.oscura .luz { position: absolute; left: 50%; bottom: 70px; width: 420px; height: 420px; margin-left: -210px; pointer-events: none; mix-blend-mode: screen; } .cpdp.ini-heroe.oscura .luz i { position: absolute; inset: 0; border-radius: 50%; will-change: transform, opacity; } .cpdp.ini-heroe.oscura .luz i:first-child { background: radial-gradient(closest-side, rgba(255, 226, 196, .8), rgba(255, 186, 140, .46) 30%, rgba(240, 136, 107, .18) 58%, rgba(223, 83, 44, 0) 80%); animation: ini-respira 6s ease-in-out infinite alternate; } .cpdp.ini-heroe.oscura .luz i:last-child { inset: -18%; background: radial-gradient(closest-side, rgba(240, 160, 110, .24), rgba(223, 110, 60, .09) 55%, rgba(223, 83, 44, 0)); animation: ini-respira-b 9s ease-in-out infinite alternate; animation-delay: -3s; } @keyframes ini-respira { from { opacity: .42; transform: scale(.86); } to { opacity: 1; transform: scale(1.08); } } @keyframes ini-respira-b { from { opacity: .35; transform: scale(1.06); } to { opacity: 1; transform: scale(.92); } } /* el tarro, de pie sobre el paisaje, con un borde de luz cálida y su sombra */ .cpdp.ini-heroe.oscura .tarro { position: absolute; left: 50%; bottom: 96px; width: 160px; height: auto; transform: translateX(-50%); z-index: 2; filter: drop-shadow(0 0 18px rgba(255, 190, 150, .26)) drop-shadow(0 22px 22px rgba(0, 0, 0, .5)); } @media (min-width: 900px) { html.cauce-mezcla .cpdp.ini-heroe.ini-heroe.oscura, .cpdp.ini-heroe.ini-heroe.oscura { padding-top: 64px; } .cpdp.ini-heroe.oscura::before { background-image: url('cauce-portada-paisaje.webp'); } .cpdp.ini-heroe.oscura .escena-oscura { height: 480px; margin-top: 14px; } .cpdp.ini-heroe.oscura .tarro { width: 220px; bottom: 120px; } .cpdp.ini-heroe.oscura .luz { width: 560px; height: 560px; margin-left: -280px; bottom: 80px; } } @media (prefers-reduced-motion: reduce) { .cpdp.ini-heroe.oscura::before, .cpdp.ini-heroe.oscura .luz i { animation: none !important; } } /* ===== Etapa 2 · el catálogo (2026-10-14) ===== El tachado de «Por qué esta vez sí» con el scroll (tacharConScroll() en cauce-landing.js): --tx es la raya y --ta lo de ahora, que se enciende cuando la raya termina. Al subir, vuelve atrás. */ .cpdp .tacha-viva .razon.razon .antes::after { transform: scaleX(var(--tx, 0)); transition: none; } .cpdp .tacha-viva .razon .antes { opacity: calc(1 - .3 * var(--tx, 0)); } .cpdp .tacha-viva .razon h3 { opacity: calc(.25 + .75 * var(--ta, 0)); transform: translateY(calc((1 - var(--ta, 0)) * 8px)); } .cpdp .tacha-viva .razon .tx p { opacity: calc(.45 + .55 * var(--ta, 0)); } /* El tarro del catálogo sobre el paisaje oscuro de la portada del inicio (el mismo paisaje, la misma luz que respira). */ .cpdp .cat-img.escena.oscura { background: #142116; isolation: isolate; } .cpdp .cat-img.escena.oscura::before { content: ""; position: absolute; inset: -2% -4%; z-index: 0; pointer-events: none; background: url('cauce-portada-paisaje.webp') center bottom / cover no-repeat; animation: ini-paisaje 60s ease-in-out infinite alternate; will-change: transform; } .cpdp .cat-img.escena.oscura .luz { position: absolute; left: 50%; bottom: 8%; width: 86%; aspect-ratio: 1; transform: translateX(-50%); z-index: 1; pointer-events: none; mix-blend-mode: screen; } .cpdp .cat-img.escena.oscura .luz i { position: absolute; inset: 0; border-radius: 50%; will-change: transform, opacity; } .cpdp .cat-img.escena.oscura .luz i:first-child { background: radial-gradient(closest-side, rgba(255, 226, 196, .8), rgba(255, 186, 140, .46) 30%, rgba(240, 136, 107, .18) 58%, rgba(223, 83, 44, 0) 80%); animation: ini-respira 6s ease-in-out infinite alternate; } .cpdp .cat-img.escena.oscura .luz i:last-child { inset: -18%; background: radial-gradient(closest-side, rgba(240, 160, 110, .24), rgba(223, 110, 60, .09) 55%, rgba(223, 83, 44, 0)); animation: ini-respira-b 9s ease-in-out infinite alternate; animation-delay: -3s; } .cpdp .cat-img.escena.oscura img { z-index: 2; bottom: 15%; filter: drop-shadow(0 0 18px rgba(255, 190, 150, .26)) drop-shadow(0 22px 22px rgba(0, 0, 0, .5)); } @media (prefers-reduced-motion: reduce) { .cpdp .cat-img.escena.oscura::before, .cpdp .cat-img.escena.oscura .luz i { animation: none !important; } } /* Un solo botón en la tarjeta del catálogo (Juan Camilo, 2026-10-14): a la PDP, donde están los packs. */ @media (min-width: 900px) { .cpdp .cat-acciones.uno { grid-template-columns: minmax(0, 340px); } } .cpdp .razones + .d-cierre { margin-top: 26px; } /* Etapa 3 (2026-10-14): el botón al final de las tres tarjetas del catálogo, debajo del remate. */ .cpdp .m-accion { margin-top: 18px; } .cpdp .m-accion .btn { width: 100%; } @media (min-width: 900px) { .cpdp .m-accion .btn { display: inline-flex; width: auto; min-width: 320px; padding-left: 32px; padding-right: 32px; } } /* ===== cauce v2 (2026-10-14): lo que antes ponía Liquid con forloop y ahora pone el CSS, porque cada pieza es un bloque ===== */ /* Hábito: el número de cada paso y la flecha que da la vuelta solo en el último (y no si hay uno solo). */ .cpdp.habito3 .h3-pasos { counter-reset: paso; } .cpdp.habito3 .h3-paso { counter-increment: paso; } .cpdp.habito3 .h3-n::before { content: counter(paso); } .cpdp.habito3 .h3-paso:not(:last-child) .h3-vuelta, .cpdp.habito3 .h3-paso:only-child .h3-vuelta { display: none; } /* Galería: cada miniatura tiene su lugar antes de que el script le ponga la foto (así nada salta). */ @media (min-width: 900px) { .cpdp .miniaturas button:empty { width: 64px; aspect-ratio: 1 / 1; background: rgba(32, 64, 46, .06); } } /* cuadrada como la miniatura (2026-10-30) */ /* Fuentes al final (2026-10-29): en el texto no se ve ningún número de fuente; cada sección que cita algo termina con una sola línea «Ver fuentes al final», pequeña y de poco contraste (la pone cauce-landing.js, numerarFuentes). */ .cpdp a[href^="#fuente-"]:not(.f-volver) { display: none; } .cpdp .ver-fuentes { margin: 28px 0 0; font-size: 12px; line-height: 1.4; opacity: .55; text-align: inherit; } .cpdp .ver-fuentes a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 400; } /* Fuentes después del cierre oscuro (Juan Camilo, 2026-10-29: «aplica un degradado al final, quita ese color blanco»): en la PDP la franja ya no es arena; baja del verde casi negro del cierre (.ci3) al color del pie, y el texto pasa a claro. En el catálogo, donde viene después de una sección clara, sigue igual. */ /* 2026-10-29 (noche): el pie pasa al color de la barra de anuncio (#142116), así que el degradado ahora sigue la luz del cierre (verde más claro al centro, arriba) y se apaga en el color del pie. */ /* la nota de fuentes después de las preguntas (2026-10-30): el mismo fondo de las preguntas, para que se lea como nota al pie y no como otra franja */ .shopify-section:has(.cpdp-f2) + .shopify-section #fuentes.cpdp-fuentes { background: #F5F2EA; padding: 4px 0 36px; } .shopify-section:has(.ci3) + .shopify-section #fuentes.cpdp-fuentes { background: radial-gradient(120% 90% at 50% 0%, #1C2B1E 0%, rgba(28, 43, 30, 0) 70%), linear-gradient(180deg, #0F1610 0%, #142116 100%); } .shopify-section:has(.ci3) + .shopify-section #fuentes .f-caja { border-top-color: rgba(245, 242, 234, .12); } .shopify-section:has(.ci3) + .shopify-section #fuentes :is(summary, .f-tit, .f-nota, .f-lista, .f-cuantas) { color: rgba(245, 242, 234, .72); } .shopify-section:has(.ci3) + .shopify-section #fuentes .f-lista li:target, .shopify-section:has(.ci3) + .shopify-section #fuentes .f-volver:hover { color: #F5F2EA; } .shopify-section:has(.ci3) + .shopify-section #fuentes a { color: inherit; } .shopify-section:has(.ci3) + .shopify-section #fuentes .f-tit { color: rgba(245, 242, 234, .85) !important; } /* .cpdp h2 trae !important */ /* ===== «La noche 21» (2026-10-29, Juan Camilo escogió la A): pasada de la maqueta (revisiones/2026-10-29-habito-66/maqueta/lab-dia-21-ab.js, vA). El tema le gana el color a los

, por eso los !important. Colores del cierre «Tu plan de fibra» (Juan Camilo, 2026-10-29, noche: «que se parezcan más a este»): franja casi negra a todo el ancho, crema y terracota vivo. La luz de fondo cuenta la historia: verde con el tarro, terracota en el corte (noche 21 y la espera) y verde más viva con el segundo tarro (data-fase, que pone el JS). ===== */ .cpdp.noche21 .h21 { --h21-fondo: #142116; --h21-tx: #F3ECDD; --h21-tx2: #A9A59B; --h21-acento: #E8643A; overflow-x: clip; } /* Sección propia desde el 2026-10-29 (Juan Camilo: «ese tablero ahora es una nueva sección independiente»). La franja es el fondo de la sección, que ya va a todo el ancho: entra en degradado desde la arena en --n21-entrada («ajusta la transición aquí»: antes era un corte seco que tapaba la última línea de «Repite») y vuelve a la arena en --n21-salida, porque en el resto de la página las uniones caen sobre la arena. Un linear-gradient simple: el border-image con outset de la primera versión no se pintaba en el Safari del iPhone. --n21 es el color de la franja en RGB (cambia con la fase) y los !important le ganan al fondo y al relleno comunes de cauce-fondos.css. */ /* Fondo del color del banner y del pie, #142116 (Juan Camilo, 2026-10-29, noche: «el fondo que sea del mismo color que en el banner»). En el corte (noche 21 y la espera) se calienta hacia el terracota, para que el fondo siga contando el cambio. */ .cpdp.noche21 { --n21: 20, 33, 22; --n21-entrada: 64px; --n21-salida: 64px; } .cpdp.noche21:has(.h21:is([data-fase="2"], [data-fase="3"])) { --n21: 34, 22, 15; } html .cpdp.noche21.cpdp-sec { padding: var(--n21-entrada) 0 var(--n21-salida) !important; background: linear-gradient(to bottom, rgba(var(--n21), 0) 0, rgba(var(--n21), .04) calc(var(--n21-entrada) * .15), rgba(var(--n21), .14) calc(var(--n21-entrada) * .3), rgba(var(--n21), .32) calc(var(--n21-entrada) * .48), rgba(var(--n21), .56) calc(var(--n21-entrada) * .66), rgba(var(--n21), .8) calc(var(--n21-entrada) * .83), rgb(var(--n21)) var(--n21-entrada), rgb(var(--n21)) calc(100% - var(--n21-salida)), rgba(var(--n21), .8) calc(100% - var(--n21-salida) * .83), rgba(var(--n21), .56) calc(100% - var(--n21-salida) * .66), rgba(var(--n21), .32) calc(100% - var(--n21-salida) * .48), rgba(var(--n21), .14) calc(100% - var(--n21-salida) * .3), rgba(var(--n21), .04) calc(100% - var(--n21-salida) * .15), rgba(var(--n21), 0) 100%), var(--base, #F4E9D8) !important; } .cpdp.noche21 .h21:is([data-fase="2"], [data-fase="3"]) { --h21-fondo: #22160F; } .cpdp.noche21 .h21-card { position: relative; display: flex; flex-direction: column; isolation: isolate; color: var(--h21-tx); padding: 18px 2px; } .cpdp.noche21 .h21-card::before, .cpdp.noche21 .h21-card::after { content: ""; position: absolute; z-index: -1; inset: -40px -16px; pointer-events: none; transition: opacity .6s ease; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-composite: intersect; }} .cpdp.noche21 .h21-card::before { background: radial-gradient(70% 45% at 88% 4%, #1E2A18, rgba(30, 42, 24, 0) 72%), radial-gradient(70% 40% at 8% 100%, #1E2A18, rgba(30, 42, 24, 0) 72%); opacity: .85; } .cpdp.noche21 .h21-card::after { background: radial-gradient(70% 45% at 88% 4%, rgba(232, 100, 58, .26), rgba(232, 100, 58, 0) 72%), radial-gradient(70% 40% at 8% 100%, rgba(150, 46, 20, .34), rgba(150, 46, 20, 0) 72%); opacity: 0; } .cpdp.noche21 .h21:is([data-fase="2"], [data-fase="3"]) .h21-card::before { opacity: 0; } .cpdp.noche21 .h21:is([data-fase="2"], [data-fase="3"]) .h21-card::after { opacity: 1; } .cpdp.noche21 .h21[data-fase="5"] .h21-card::before { opacity: 1; background: radial-gradient(70% 45% at 88% 4%, #2A3A1F, rgba(42, 58, 31, 0) 72%), radial-gradient(70% 40% at 8% 100%, #262A15, rgba(38, 42, 21, 0) 72%); } .cpdp.noche21 .h21-card p { margin: 0; color: var(--h21-tx) !important; } .cpdp.noche21 .h21 .h21-ey { display: flex; align-items: center; gap: 10px; margin: 0 0 8px !important; font: 600 12px/1.2 var(--sans); color: var(--h21-acento) !important; } .cpdp.noche21 .h21 .h21-ey::before { content: ""; flex: none; width: 40px; height: 2px; background: currentColor; } .cpdp.noche21 .h21 .h21-t { margin: 0 0 8px !important; font: 700 28px/1.06 var(--serif); color: var(--h21-tx) !important; text-wrap: balance; } .cpdp.noche21 .h21 .h21-t span { color: var(--h21-acento); } .cpdp.noche21 .h21 .h21-baj { font-size: 14px; line-height: 1.45; color: var(--h21-tx2) !important; text-wrap: pretty; } .cpdp.noche21 .h21 .h21-cap { margin-top: 12px !important; min-height: 4.4em; font: 600 15px/1.45 var(--sans); color: var(--h21-tx) !important; text-wrap: pretty; transition: color .2s; } .cpdp.noche21 .h21 .h21-cap.mal { color: var(--h21-acento) !important; } .cpdp.noche21 .h21 .h21-cap :is(b, strong) { font-weight: 700; color: inherit; } .cpdp.noche21 .h21 .h21-fin { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; } .cpdp.noche21 .h21 .h21-fin a.h21-btn { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 14px; background: var(--h21-acento) !important; color: #fff !important; font: 700 17px/1.2 var(--sans); text-decoration: none !important; box-shadow: 0 10px 34px -6px rgba(232, 100, 58, .55); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .35s; } .cpdp.noche21 .h21 .h21-fin.on a.h21-btn { transform: scale(1.03); box-shadow: 0 10px 34px -6px rgba(232, 100, 58, .55), 0 0 0 4px rgba(232, 100, 58, .28); } .cpdp.noche21 .h21 .h21-apoyo { font-size: 13px; line-height: 1.35; text-align: center; color: var(--h21-tx2) !important; } .cpdp.noche21 .h21 .h21-src { margin-top: 8px !important; font-size: 11px; line-height: 1.35; color: rgba(169, 165, 155, .7) !important; } .cpdp.noche21 .h21 .h21-vis { margin-top: 14px; } .cpdp.noche21 .h21 .h21-esc { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .cpdp.noche21 .h21 .h21-tarros { display: flex; align-items: flex-end; gap: 10px; height: 118px; } .cpdp.noche21 .h21 .h21-tar { width: 78px; height: 104px; overflow: visible; transition: transform .5s cubic-bezier(.3, 1.3, .5, 1), opacity .4s; } .cpdp.noche21 .h21 .h21-tar .cu { fill: none; stroke: rgba(243, 236, 221, .7); stroke-width: 2; } .cpdp.noche21 .h21 .h21-tar .ta { fill: rgba(243, 236, 221, .7); transition: transform .35s; transform-origin: 62px 14px; } .cpdp.noche21 .h21 .h21-tar .po { fill: var(--h21-acento); } .cpdp.noche21 .h21 .h21-tar.t2 .po { fill: var(--h21-tx); } .cpdp.noche21 .h21 .h21-tar.vac .cu { stroke-dasharray: 5 4; stroke: rgba(232, 100, 58, .95); } .cpdp.noche21 .h21 .h21-tar.vac .ta { transform: rotate(-38deg) translate(-6px, -4px); } .cpdp.noche21 .h21 .h21-tar.t2 { opacity: 0; transform: translateX(-30px) scale(.9); } .cpdp.noche21 .h21 .h21-tar.t2.in { opacity: 1; transform: none; } .cpdp.noche21 .h21 .h21-tar .cuch { opacity: 0; transition: opacity .2s; } .cpdp.noche21 .h21 .h21-tar.raspa .cuch { opacity: 1; animation: h21-raspa 1.1s ease-in-out 1; } @keyframes h21-raspa { 0% { transform: translate(0, -34px); } 30% { transform: translate(0, 0); } 45% { transform: translate(-7px, 0) rotate(-6deg); } 60% { transform: translate(7px, 0) rotate(6deg); } 75% { transform: translate(-5px, 0) rotate(-4deg); } 100% { transform: translate(0, -6px); } } .cpdp.noche21 .h21 .h21-rot { font: 600 11px/1.2 var(--sans); color: var(--h21-tx2) !important; text-align: center; margin-top: 4px !important; min-height: 1.2em; } .cpdp.noche21 .h21 .h21-rc { display: flex; flex-direction: column; align-items: flex-end; color: var(--h21-tx2); font-size: 12px; line-height: 1.2; } .cpdp.noche21 .h21 .h21-rc strong { font: 700 54px/1 var(--serif); color: var(--h21-tx); font-variant-numeric: tabular-nums; transition: color .2s; } .cpdp.noche21 .h21 .h21-rc.cero strong { color: var(--h21-acento); animation: h21-sacude .45s; } @keyframes h21-sacude { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 80% { transform: translateX(-3px); } } .cpdp.noche21 .h21 .h21-tk { display: grid; grid-template-columns: repeat(40, minmax(0, 1fr)); gap: 2px; } .cpdp.noche21 .h21 .h21-tk i { height: 26px; border-radius: 2px; background: rgba(243, 236, 221, .1); transition: background-color .15s, box-shadow .15s; } .cpdp.noche21 .h21 .h21-tk i.a { background: var(--h21-acento); } .cpdp.noche21 .h21 .h21-tk i.b { background: var(--h21-tx); } .cpdp.noche21 .h21 .h21-tk i.g { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(232, 100, 58, .95); background-image: repeating-linear-gradient(135deg, rgba(232, 100, 58, .45) 0 2px, transparent 2px 5px); } .cpdp.noche21 .h21 .h21-tk i.lleg { background: #fff; } .cpdp.noche21 .h21 .h21-tl { display: grid; grid-template-columns: repeat(40, minmax(0, 1fr)); margin-top: 5px; font: 600 11px/1.2 var(--sans); color: var(--h21-tx2); } .cpdp.noche21 .h21 .h21-tl span { white-space: nowrap; } .cpdp.noche21 .h21 .h21-tl .c1 { grid-column: 1 / 10; } .cpdp.noche21 .h21 .h21-tl .c21 { grid-column: 21 / span 8; } .cpdp.noche21 .h21 .h21-tl .c40 { grid-column: 33 / 41; text-align: right; } @media (prefers-reduced-motion: reduce) { .cpdp.noche21 .h21, .cpdp.noche21 .h21-card::before, .cpdp.noche21 .h21-card::after, .cpdp.noche21 .h21 :is(.h21-tar, .h21-tar *, .h21-tk i, .h21-rc strong, .h21-cap, a.h21-btn) { transition: none !important; animation: none !important; } } @media (min-width: 900px) { .cpdp.noche21 { --n21-entrada: 120px; --n21-salida: 120px; } .cpdp.noche21 .h21-card::before, .cpdp.noche21 .h21-card::after { inset: -60px 0; } .cpdp.noche21 .h21-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "tx vis" "cap vis" "fb vis"; column-gap: 56px; align-content: center; padding: 34px 40px; } .cpdp.noche21 .h21 .h21-tx { grid-area: tx; } .cpdp.noche21 .h21 .h21-cap { grid-area: cap; font-size: 18px; min-height: 3.2em; margin-top: 18px !important; } .cpdp.noche21 .h21 .h21-fb { grid-area: fb; } .cpdp.noche21 .h21 .h21-vis { grid-area: vis; align-self: center; margin-top: 0; } .cpdp.noche21 .h21 .h21-ey { font-size: 14px; } .cpdp.noche21 .h21 .h21-t { font-size: 40px; margin-bottom: 12px !important; } .cpdp.noche21 .h21 .h21-baj { font-size: 16px; } .cpdp.noche21 .h21 .h21-fin { max-width: 420px; margin-top: 18px; } .cpdp.noche21 .h21 .h21-fin a.h21-btn { min-height: 56px; font-size: 18px; } .cpdp.noche21 .h21 .h21-tarros { height: 150px; } .cpdp.noche21 .h21 .h21-tar { width: 104px; height: 139px; } .cpdp.noche21 .h21 .h21-tk i { height: 34px; } .cpdp.noche21 .h21 .h21-rc strong { font-size: 64px; } } /* ---------- tres ideas del lienzo «PDP cauce · propuesta de venta» (Juan Camilo, 2026-10-30) ---------- 02 · la tarjeta del dato (bloque _dato-dia), 03 · «No fallaste tú» (los motivos del dolor) y 04 · la cuenta con el vaso plano (cuenta4). Medidas y colores, los del lienzo a 390 px. Los colores van con #z porque cauce-fondos.css pinta todo texto de las secciones oscuras con un selector de ID y !important. El movimiento va en cauce-landing.js (datoDia, filasConScroll y vasoPorCapas): solo existe con las clases *-vivo, así que sin script o con «reducir movimiento» todo queda en su estado final. */ /* títulos como en el lienzo: entrada y remate del título en terracota (en la cuenta, la entrada en claro), sin cursiva */ html.cauce-mezcla :is(#z, .cpdp).d4.d4 .dolor2 :is(h2, .lead b), html.cauce-mezcla #cuenta.cuenta4.cuenta4 .c-cab :is(h2, .kicker) { color: #F5F2EA !important; } html.cauce-mezcla :is(#z, .cpdp).d4.d4 .dolor2 :is(.kicker, h2 em), html.cauce-mezcla #cuenta.cuenta4.cuenta4 .c-cab h2 em { color: #DF532C !important; font-style: normal; } html.cauce-mezcla :is(#z, .cpdp).d4.d4 .dolor2 .lead, html.cauce-mezcla #cuenta.cuenta4.cuenta4 .c-cab .lead { color: #E8E4D8 !important; } @media (max-width: 989px) { .cpdp-dolor.d4 .dolor2 > div > h2 { font-size: 32px; line-height: 1.1; text-wrap: pretty; } .cpdp-dolor.d4 .dolor2 > div > .lead { font-size: 16px; line-height: 1.5; } .cpdp.cuenta4 .c-cab h2 { font-size: 32px; line-height: 1.1; } .cpdp.cuenta4 .c-cab .lead { font-size: 15px; line-height: 1.5; } } /* 02 · el dolor: textos a la izquierda, como en el lienzo */ .cpdp-dolor.d4 .dolor2 > div > :is(.kicker, h2, .lead, .t-parrafo) { text-align: left; margin-left: 0; } .cpdp-dolor.d4 .dolor2 > div > .kicker:not(:first-child) { margin-top: 64px; } /* la 03 abre como una sección nueva */ .cpdp .d4-dato { margin: 24px 0 0; padding: 20px 18px; border-radius: 18px; background: rgba(245, 242, 234, .06); border: 1px solid rgba(245, 242, 234, .14); display: flex; flex-direction: column; gap: 14px; text-align: left; } .cpdp .d4-dato + .tp { margin-top: 36px; } .cpdp .d4-cifra { margin: 0; display: flex; flex-direction: column; gap: 4px; } .cpdp .d4-num { font: 400 48px/1 var(--serif); } .cpdp .d4-etq { font-size: 13px; line-height: 1.4; } .cpdp .d4-barra { height: 10px; border-radius: 5px; background: rgba(245, 242, 234, .14); overflow: hidden; } .cpdp .d4-barra i { display: block; height: 100%; width: var(--d4-p); background: #DF532C; transform-origin: 0 50%; } .cpdp .d4-escala { margin: 0; display: flex; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 1.3; } .cpdp .d4-falta { margin: 0; font-size: 15px; line-height: 1.45; } .cpdp .d4-fuente { margin: 0; font-size: 11px; line-height: 1.4; } html.cauce-mezcla :is(#z, .cpdp) .d4-dato.d4-dato :is(.d4-num, .d4-num span) { color: #DF532C !important; } html.cauce-mezcla :is(#z, .cpdp) .d4-dato.d4-dato .d4-etq { color: #E8E4D8 !important; } html.cauce-mezcla :is(#z, .cpdp) .d4-dato.d4-dato :is(.d4-escala, .d4-escala span, .d4-fuente) { color: #C9D8B6 !important; } html.cauce-mezcla :is(#z, .cpdp) .d4-dato.d4-dato :is(.d4-falta, .d4-falta b) { color: #F5F2EA !important; } .cpdp .d4-vivo .d4-barra i { transform: scaleX(var(--d4-f, 0)); } .cpdp .d4-vivo .d4-falta { opacity: calc(.2 + .8 * var(--d4-t, 0)); transform: translateY(calc((1 - var(--d4-t, 0)) * 8px)); } /* 03 · «No fallaste tú»: tres filas, lo de antes tachado en terracota y lo de cauce grande */ /* :is(#z, …) le gana a las reglas del dolor sin foto que vienen con el bloque «¿Te pasa?» (raya punteada, 3 columnas) */ :is(#z, .cpdp-dolor).d4 .d-pares { max-width: none; margin: 22px 0 0; padding-top: 0; border-top: 0; } :is(#z, .cpdp-dolor).d4 .d-pares li { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px 0; border: 0; border-top: 1px solid rgba(245, 242, 234, .16); } :is(#z, .cpdp-dolor).d4 .d-pares li:last-child { border-bottom: 1px solid rgba(245, 242, 234, .16); } .cpdp-dolor.d4 .d-pares li > div { display: flex; flex-direction: column; gap: 4px; } .cpdp-dolor.d4 .d-mini { width: 72px; height: 72px; border-radius: 14px; } .cpdp-dolor.d4 .d-antes { font-size: 14px; line-height: 1.3; text-decoration-color: currentColor; text-decoration-thickness: 1.5px; } .cpdp-dolor.d4 .d-ahora { font: 400 24px/1.15 var(--serif); margin: 0; } .cpdp-dolor.d4 .d-tx { font-size: 14px; line-height: 1.4; } html.cauce-mezcla :is(#z, .cpdp) .d-pares.d-pares .d-antes { color: #DF532C !important; } html.cauce-mezcla :is(#z, .cpdp) .d-pares.d-pares .d-ahora { color: #F5F2EA !important; } html.cauce-mezcla :is(#z, .cpdp) .d-pares.d-pares .d-tx { color: #E8E4D8 !important; } :is(#z, .cpdp-dolor).d4 .filas-vivas > li { position: relative; border-top-color: transparent; } .cpdp .filas-vivas > li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: rgba(245, 242, 234, .16); transform: scaleX(var(--fe, 0)); transform-origin: 0 50%; } .cpdp .filas-vivas > li > * { opacity: var(--fe, 0); transform: translateY(calc((1 - var(--fe, 0)) * 18px)); } .cpdp .filas-vivas .d-antes { width: fit-content; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 56% / calc(var(--fx, 0) * 100%) 1.5px no-repeat; } .cpdp .filas-vivas .d-ahora { opacity: calc(.2 + .8 * var(--fa, 0)); transform: translateY(calc((1 - var(--fa, 0)) * 8px)); } .cpdp .filas-vivas .d-tx { opacity: calc(.3 + .7 * var(--fa, 0)); } /* 04 · la cuenta: el vaso plano y cada dato a la altura de su capa */ .cpdp.cuenta4 .c-cab { text-align: center; max-width: 680px; margin: 0 auto; } .cpdp.cuenta4 .c-cab :is(.kicker, h2, .lead) { text-align: center; margin-left: auto; margin-right: auto; text-wrap: balance; } .cpdp.cuenta4 .kicker::before { display: none; } /* sin la raya de la entrada (comentario de Juan Camilo en el lienzo) */ .cpdp.cuenta4 .c-cuerpo { max-width: 520px; margin: 26px auto 0; } .cpdp.cuenta4 .c4-fila { --alto: 320px; --hi: calc(var(--alto) - 3px); --lleno: calc(var(--hi) * .946); display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: end; } .cpdp.cuenta4 .c4-vaso { position: relative; height: var(--alto); box-sizing: border-box; border: 3px solid rgba(245, 242, 234, .7); border-top: 0; border-radius: 0 0 18px 18px; overflow: hidden; } .cpdp.cuenta4 .c4-capa { position: absolute; left: 0; right: 0; bottom: 0; transform-origin: 50% 100%; } .cpdp.cuenta4 .c4-comida { height: calc(var(--lleno) * var(--fb)); background: #C9D8B6; } .cpdp.cuenta4 .c4-cauce { bottom: calc(var(--lleno) * var(--fb)); height: calc(var(--lleno) * var(--fc)); background: #DF532C; } .cpdp.cuenta4 .c4-meta { position: absolute; left: 0; right: 0; bottom: calc(var(--lleno) + 1px); border-top: 2px dashed #F5F2EA; } .cpdp.cuenta4 .c4-meta-t { position: absolute; right: 8px; top: calc(var(--hi) - var(--lleno) + 3px); font: 700 13px/1 var(--sans); } .cpdp.cuenta4 .suma { display: contents; } .cpdp.cuenta4 .et .s-datos { position: relative; height: var(--alto); border: 0; padding: 0; } /* sin la raya verde de .et > div */ .cpdp.cuenta4 .s-datos > div { position: absolute; left: 0; right: 0; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; border: 0; padding: 0; font-size: 14px; line-height: 1.4; } .cpdp.cuenta4 .s-datos > div:not(.t) { top: calc(var(--hi) - var(--lleno) * var(--fb) / 2); } .cpdp.cuenta4 .s-datos > .t { top: calc(var(--hi) - var(--lleno) * (var(--fb) + var(--fc) / 2)); } .cpdp.cuenta4 .s-datos b { display: block; margin: 0; font: 400 28px/1.15 var(--serif); } .cpdp.cuenta4 .et .r { grid-column: 1 / -1; border: 0; margin: 0; padding: 16px; border-radius: 16px; background: rgba(245, 242, 234, .08); font-size: 15px; line-height: 1.4; } .cpdp.cuenta4 .et .r b { display: inline; margin: 0; font: inherit; font-weight: 700; } .cpdp.cuenta4 .et .aviso { grid-column: 1 / -1; margin: 0; } .cpdp.cuenta4 .c-base { text-align: center; margin: 22px auto 0; max-width: 480px; font-size: 16px; line-height: 1.45; text-wrap: balance; } .cpdp.cuenta4 .c-base :is(em, i) { font-style: normal; } .cpdp.cuenta4 .c4-fuente { text-align: center; margin: 18px auto 0; max-width: 480px; font-size: 11px; line-height: 1.4; } html.cauce-mezcla #cuenta.cuenta4.cuenta4 .c4-meta-t { color: #F5F2EA !important; } html.cauce-mezcla #cuenta.cuenta4.cuenta4 .s-datos > div { color: #F5F2EA !important; } html.cauce-mezcla #cuenta.cuenta4.cuenta4 .s-datos > div:not(.t) b { color: #C9D8B6 !important; } html.cauce-mezcla #cuenta.cuenta4.cuenta4 .s-datos > .t b { color: #DF532C !important; } html.cauce-mezcla #cuenta.cuenta4.cuenta4 .et .r, html.cauce-mezcla #cuenta.cuenta4.cuenta4 .et .r b { color: #F5F2EA !important; } html.cauce-mezcla #cuenta.cuenta4.cuenta4 .c-cuerpo p.c-base, html.cauce-mezcla #cuenta.cuenta4.cuenta4 .c-cuerpo p.c-base b { color: #F5F2EA !important; } html.cauce-mezcla #cuenta.cuenta4.cuenta4 .c-cuerpo p.c-base :is(em, i) { color: #DF532C !important; } html.cauce-mezcla #cuenta.cuenta4.cuenta4 .c-cuerpo p.c4-fuente { color: #C9D8B6 !important; } /* el vaso como líquido (la B con la gota de cauce, 2026-10-30): lo dibuja vasoPorCapas en un svg; las capas planas quedan para «reducir movimiento» y sin script */ .cpdp.cuenta4 .c4-liquido .c4-capa { display: none; } .cpdp.cuenta4 .c4-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .cpdp.cuenta4 .c4-l-comida { fill: #C9D8B6; } .cpdp.cuenta4 .c4-l-cauce, .cpdp.cuenta4 .c4-l-gota { fill: #DF532C; } .cpdp.cuenta4 .c4-l-brillo { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; } .cpdp.cuenta4 .c4-vivo .s-datos > div:not(.t) { opacity: var(--lb, 0); transform: translate(calc((1 - var(--lb, 0)) * -10px), -50%); } .cpdp.cuenta4 .c4-vivo .s-datos > .t { opacity: var(--lc, 0); transform: translate(calc((1 - var(--lc, 0)) * -10px), -50%); } .cpdp.cuenta4 .c4-vivo .r { opacity: calc(.25 + .75 * var(--vs, 0)); transform: translateY(calc((1 - var(--vs, 0)) * 10px)); } @media (min-width: 990px) { /* 02 en computador: el título a la izquierda y la tarjeta a la derecha, centrados entre sí. Lo que va antes de la tarjeta queda en la columna 1 (filas 2 a 4); las filas 1 y 5 se reparten lo que la tarjeta mide de más. */ .cpdp-dolor.d4 .dolor2 > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: 72px; } .cpdp-dolor.d4 .dolor2 > div > * { grid-column: 1 / -1; } .cpdp-dolor.d4 .dolor2 > div > :has(~ .d4-dato) { grid-column: 1; } .cpdp-dolor.d4 .dolor2 > div > :nth-child(1):has(~ .d4-dato) { grid-row: 2; } .cpdp-dolor.d4 .dolor2 > div > :nth-child(2):has(~ .d4-dato) { grid-row: 3; } .cpdp-dolor.d4 .dolor2 > div > :nth-child(3):has(~ .d4-dato) { grid-row: 4; } .cpdp-dolor.d4 .dolor2 > div > .d4-dato { grid-column: 2; grid-row: 1 / 6; align-self: center; margin: 0; padding: 30px 30px 26px; gap: 16px; } .cpdp-dolor.d4 .dolor2 > div > .kicker:not(:first-child) { margin-top: 96px; } .cpdp-dolor.d4 .dolor2 > div > :is(h2, .lead) { max-width: 760px; } .cpdp .d4-num { font-size: 72px; } .cpdp .d4-etq { font-size: 15px; } .cpdp .d4-barra { height: 12px; border-radius: 6px; } .cpdp .d4-escala { font-size: 13px; } .cpdp .d4-falta { font-size: 17px; } .cpdp .d4-fuente { font-size: 12px; } /* 03 en computador: las tres filas lado a lado, cada una con su raya arriba y abajo */ :is(#z, .cpdp-dolor).d4 .d-pares { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 36px; align-items: stretch; } :is(#z, .cpdp-dolor).d4 .d-pares li, :is(#z, .cpdp-dolor).d4 .d-pares li:last-child { grid-template-columns: 84px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px 0; border-bottom: 1px solid rgba(245, 242, 234, .16); } .cpdp-dolor.d4 .d-mini { width: 84px; height: 84px; } .cpdp-dolor.d4 .d-antes { font-size: 15px; } html.cauce-mezcla :is(#z, .cpdp-dolor).d4.d4.d4 .d-ahora { font-size: 27px; } .cpdp-dolor.d4 .d-tx { font-size: 15.5px; } .cpdp.cuenta4 .c-cuerpo { max-width: 620px; margin-top: 40px; } .cpdp.cuenta4 .c4-fila { --alto: 420px; grid-template-columns: 196px minmax(0, 1fr); column-gap: 36px; row-gap: 24px; } .cpdp.cuenta4 .c4-vaso { border-radius: 0 0 24px 24px; } .cpdp.cuenta4 .c4-meta-t { font-size: 15px; right: 10px; } .cpdp.cuenta4 .s-datos > div { font-size: 16.5px; } .cpdp.cuenta4 .s-datos b { font-size: 40px; } .cpdp.cuenta4 .et .r { padding: 20px 22px; font-size: 18px; text-align: center; } .cpdp.cuenta4 .c-base { font-size: 19px; max-width: 560px; margin-top: 30px; } .cpdp.cuenta4 .c4-fuente { font-size: 12px; max-width: 620px; } } /* ---------- el hábito, «Tres fotos, tres pasos» (Juan Camilo escogió la A, 2026-10-30) ---------- Cada paso con su foto y su número encima de la esquina; debajo, la flecha que vuelve del 3 al 1 («Y mañana, otra vez.») y «Para que se quede». En computador, los textos de arriba centrados y los pasos en fila, unidos por una línea. Movimiento: solo con h4-vivo, que pone habitoConScroll (cauce-landing.js); sin script o con «reducir movimiento», el estado final. */ .cpdp.habito4 .wrap > .lead { margin-top: 6px; text-wrap: pretty; } .cpdp.habito4 .h4-pasos { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 34px; counter-reset: paso; } .cpdp.habito4 .h4-paso { position: relative; margin: 0; counter-increment: paso; } .cpdp.habito4 .h4-foto { position: relative; margin: 0; } .cpdp.habito4 .h4-marco { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 18px; background: #E9DFCE; } .cpdp.habito4 .h4-marco img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; } .cpdp.habito4 .h4-n { position: absolute; left: 16px; bottom: -20px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--cta); color: var(--hueso); font: 400 21px/1 var(--serif); box-shadow: 0 0 0 4px #F5EBDD; } .cpdp.habito4 .h4-n::before { content: counter(paso); } .cpdp.habito4 .h4-foto.sin-foto .h4-n { position: static; } .cpdp.habito4 .h4-tx { margin-top: 30px; } .cpdp.habito4 .sin-foto + .h4-tx { margin-top: 10px; } .cpdp.habito4 .h4-tx b { display: block; font: 700 18px/1.3 var(--sans); color: var(--verde); } .cpdp.habito4 .h4-tx span { display: block; margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--texto2); text-wrap: pretty; } .cpdp.habito4 .h4-linea { display: none; } .cpdp.habito4 .h4-vuelta { position: relative; margin: 22px 0 0; display: flex; align-items: center; gap: 12px; color: var(--terra-txt); font: 600 17px/1.3 var(--sans); } .cpdp.habito4 .h4-vuelta p { margin: 0; } .cpdp.habito4 .h4-vuelta svg { flex: 0 0 auto; width: 44px; height: 44px; overflow: visible; stroke: var(--cta); stroke-width: 2; fill: none; } .cpdp.habito4 .h4-vuelta .u { display: none; } .cpdp.habito4 .h4-trucos { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(32, 64, 46, .14); } .cpdp.habito4 .h4-trucos-t { margin: 0 0 14px; font: 700 13px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--verde); } .cpdp.habito4 .h4-trucos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .cpdp.habito4 .h4-trucos li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; margin: 0; } .cpdp.habito4 .h4-trucos li > svg, .cpdp.habito4 .h4-trucos .sin-icono { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: rgba(223, 83, 44, .1); stroke: var(--terra-txt); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; } .cpdp.habito4 .h4-trucos b { display: block; font: 700 16px/1.3 var(--sans); color: var(--verde); } .cpdp.habito4 .h4-trucos span:not(.sin-icono) { display: block; margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--texto2); } @media (min-width: 990px) { .cpdp.habito4 .wrap > :is(.kicker, h2, .lead) { text-align: center; margin-left: auto; margin-right: auto; } .cpdp.habito4 .wrap > .lead { max-width: 600px; text-wrap: balance; } .cpdp.habito4 .h4-pasos { margin-top: 44px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .cpdp.habito4 .h4-marco { aspect-ratio: 4 / 5; } .cpdp.habito4 .h4-n { left: 20px; bottom: -22px; width: 46px; height: 46px; font-size: 23px; } .cpdp.habito4 .h4-tx { margin-top: 36px; padding-right: 8px; } .cpdp.habito4 .h4-tx b { font-size: 19px; } .cpdp.habito4 .h4-tx span { font-size: 16.5px; } .cpdp.habito4 .h4-linea { display: block; position: absolute; z-index: 1; left: 70px; bottom: -1px; width: calc(100% + 28px - 50px); height: 2px; background: var(--cta); transform-origin: 0 50%; } .cpdp.habito4 .h4-paso:last-child .h4-linea, .cpdp.habito4 .sin-foto .h4-linea { display: none; } .cpdp.habito4 .h4-vuelta { display: block; height: 104px; margin: 22px 0 0; } .cpdp.habito4 .h4-vuelta .u { display: block; position: absolute; left: calc(100% / 6); top: 0; width: calc(100% * 2 / 3); height: 72px; } .cpdp.habito4 .h4-vuelta .chico { display: none; } .cpdp.habito4 .h4-vuelta p { position: absolute; left: 0; right: 0; top: 64px; text-align: center; } .cpdp.habito4 .h4-trucos { margin-top: 30px; padding-top: 30px; } .cpdp.habito4 .h4-trucos-t { text-align: center; margin-bottom: 20px; } .cpdp.habito4 .h4-trucos ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } } .cpdp.habito4.h4-vivo .h4-marco { clip-path: inset(calc((1 - var(--t, 0)) * 9%) round 18px); } .cpdp.habito4.h4-vivo .h4-marco img { transform: scale(calc(1.16 - .16 * var(--t, 0))); } .cpdp.habito4.h4-vivo .h4-n { background: color-mix(in srgb, var(--cta) calc(var(--n, 0) * 100%), #F5EBDD); color: color-mix(in srgb, var(--hueso) calc(var(--n, 0) * 100%), var(--terra-txt)); box-shadow: 0 0 0 4px #F5EBDD, inset 0 0 0 1.5px var(--cta); transform: scale(calc(.85 + .15 * var(--n, 0))); } .cpdp.habito4.h4-vivo .h4-tx { opacity: calc(.2 + .8 * var(--t, 0)); transform: translateY(calc((1 - var(--t, 0)) * 16px)); } .cpdp.habito4.h4-vivo .h4-linea { transform: scaleX(var(--l, 0)); } .cpdp.habito4.h4-vivo .h4-vuelta .arco { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--v, 0)); } .cpdp.habito4.h4-vivo .h4-vuelta .punta { opacity: calc((var(--v, 0) - .9) * 10); } .cpdp.habito4.h4-vivo .h4-vuelta p { opacity: var(--v, 0); } .cpdp.habito4.h4-vivo .h4-trucos li { opacity: var(--t, 0); transform: translateY(calc((1 - var(--t, 0)) * 18px)); }