/* ========================================================= GALERÍA AUTOMÁTICA DE PLANTILLAS — te-invito (SPEC 0009) UI de producto/landing (azul/blanco/negro RiosTec). Sirve dos shortcodes: [ti_galeria_plantillas] (.ti-gal) y [ti_incluye] (.ti-incluye). Comparten el motor de carrusel (.ti-gal-carousel) y sus tokens. Mobile-first · BEM · color/tipografía solo por variables CSS. ========================================================= */ /* --------------------------------------------------------- TOKENS (auto-contenidos en las raíces de ambos shortcodes) --------------------------------------------------------- */ .ti-gal, .ti-incluye { --ti-gal-azul: #1b4db1; --ti-gal-azul-d: #0b1b3a; --ti-gal-azul-soft: #c6d6f2; --ti-gal-azul-tint: #dce7fa; --ti-gal-sel: #eaf1fc; --ti-gal-page: #f4f7fc; --ti-gal-card: #ffffff; --ti-gal-blanco: #ffffff; --ti-gal-ink: #111827; --ti-gal-ink-2: #475569; --ti-gal-line: #d6e0f0; --ti-gal-wa: #0c8642; --ti-gal-wa-hover: #0a6f38; --ti-gal-wa-glow: #25d366; --ti-gal-foco: #5b8def; --ti-gal-halo: rgba(27, 77, 177, .18); --ti-gal-font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --ti-gal-fs-h2: clamp(1.25rem, 3.4vw, 1.75rem); --ti-gal-fs-occ: clamp(1.05rem, 2.8vw, 1.35rem); --ti-gal-fs-name: 1.075rem; --ti-gal-fs-meta: .82rem; --ti-gal-fs-btn: .95rem; --ti-gal-s1: 4px; --ti-gal-s2: 8px; --ti-gal-s3: 12px; --ti-gal-s4: 16px; --ti-gal-s5: 24px; --ti-gal-s6: 32px; --ti-gal-s7: 48px; --ti-gal-s8: 72px; /* separación grande entre carruseles (desktop) */ --ti-gal-r-card: 18px; --ti-gal-r-thumb: 12px; --ti-gal-r-btn: 999px; --ti-gal-r-chip: 999px; --ti-gal-sh-card: 0 6px 22px rgba(11, 27, 58, .08); --ti-gal-sh-hover: 0 18px 44px rgba(11, 27, 58, .16); --ti-gal-sh-ctrl: 0 4px 14px rgba(11, 27, 58, .14); --ti-gal-slide: 80%; --ti-gal-gap: 12px; --ti-gal-vpad: 4px; --ti-gal-arrow: 44px; --ti-gal-dot: 8px; --ti-gal-dot-on: 22px; --ti-gal-autoplay: 5000ms; --ti-gal-slide-dur: 480ms; --ti-gal-ease: cubic-bezier(.22, .61, .36, 1); --ti-gal-lift: 240ms; } @media (min-width: 600px) { .ti-gal, .ti-incluye { --ti-gal-slide: 46%; } } @media (min-width: 900px) { .ti-gal, .ti-incluye { --ti-gal-slide: 31%; --ti-gal-gap: 20px; --ti-gal-arrow: 48px; --ti-gal-vpad: 8px; } } @media (min-width: 1200px) { .ti-gal, .ti-incluye { --ti-gal-slide: 23.5%; } } /* Con la sección full-bleed, en pantallas anchas caben 5 tarjetas + peek sin inflar cada tarjeta (el carrusel llega hasta 1560px). */ @media (min-width: 1500px) { .ti-gal, .ti-incluye { --ti-gal-slide: 19%; } } /* --------------------------------------------------------- AUTOCONTENCIÓN DEL FULL-BLEED (spec 0009 §8.5) El patrón 100vw incluye el ancho de la scrollbar vertical, lo que puede dejar un "pelo" de scroll horizontal en . Este guard lo recorta DESDE ESTE MISMO CSS: la galería ya no depende del overflow-x global del sitio-madre. Solo aplica cuando la galería está presente en la página (:has); en navegadores sin :has() la regla se descarta sin romper nada y el CSS global del sitio queda como red de seguridad. --------------------------------------------------------- */ html:has(.ti-gal), html:has(.ti-incluye) { overflow-x: clip; } /* --------------------------------------------------------- CONTENEDOR --------------------------------------------------------- */ .ti-gal, .ti-incluye { box-sizing: border-box; font-family: var(--ti-gal-font); color: var(--ti-gal-ink); background: var(--ti-gal-page); padding: var(--ti-gal-s7) var(--ti-gal-s4); /* FULL-BLEED: la página 336 envuelve el contenido en un contenedor angosto (.rt-inv max-width:1140px). La sección ROMPE ese wrapper y ocupa el viewport completo (patrón 100vw + margen negativo simétrico), para que los carruseles se sientan de pantalla completa y el "peek" llegue al borde real. El posible pelo de scrollbar de 100vw lo recorta el guard html:has() de arriba (autocontenido: ya NO depende del CSS del sitio-madre). */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); /* El desborde de los carruseles vive dentro del viewport; la sección nunca provoca scroll horizontal en . */ overflow-x: clip; } .ti-gal *, .ti-gal *::before, .ti-gal *::after, .ti-incluye *, .ti-incluye *::before, .ti-incluye *::after { box-sizing: border-box; } .ti-gal__titulo, .ti-incluye__titulo { font-size: var(--ti-gal-fs-h2); font-weight: 800; line-height: 1.2; color: var(--ti-gal-azul-d); text-align: center; margin: 0 auto var(--ti-gal-s5); max-width: 40ch; } .ti-gal__intro, .ti-incluye__intro { font-size: var(--ti-gal-fs-meta); color: var(--ti-gal-ink-2); text-align: center; margin: calc(var(--ti-gal-s5) * -1 + var(--ti-gal-s2)) auto var(--ti-gal-s6); max-width: 60ch; } /* Separación entre carruseles: 48px móvil / 72px desktop */ .ti-gal-carousel + .ti-gal-carousel { margin-top: var(--ti-gal-s7); } @media (min-width: 900px) { .ti-gal-carousel + .ti-gal-carousel { margin-top: var(--ti-gal-s8); } } /* --------------------------------------------------------- CARRUSEL (motor común a ambos shortcodes) --------------------------------------------------------- */ .ti-gal-carousel { position: relative; margin-inline: auto; /* Ancho generoso ahora que la sección es full-bleed: el carrusel aprovecha la pantalla; el tope evita tarjetas infladas en monitores ultra anchos. */ max-width: 1560px; } .ti-gal-carousel__head { display: flex; align-items: baseline; gap: var(--ti-gal-s2); margin: 0 0 var(--ti-gal-s4); padding-inline: var(--ti-gal-s1); } .ti-gal-carousel__emoji { font-size: var(--ti-gal-fs-occ); line-height: 1; } .ti-gal-carousel__title { font-size: var(--ti-gal-fs-occ); font-weight: 700; color: var(--ti-gal-azul-d); margin: 0; } .ti-gal-carousel__count { font-size: var(--ti-gal-fs-meta); font-weight: 500; color: var(--ti-gal-ink-2); margin-left: auto; } /* Viewport: recorta el desborde del track (anti-overflow) */ .ti-gal-carousel__viewport { overflow: clip; padding-inline: var(--ti-gal-vpad); padding-block: var(--ti-gal-vpad); } /* Track: fila flex desplazable por transform (con JS) o por scroll (sin JS) */ .ti-gal-carousel__track { display: flex; gap: var(--ti-gal-gap); transition: transform var(--ti-gal-slide-dur) var(--ti-gal-ease); will-change: transform; } .ti-gal-carousel__slide { flex: 0 0 var(--ti-gal-slide); min-width: 0; } /* --- Degradación sin JS: scroll horizontal nativo con snap --- El motor JS marca [data-ti-carousel] como "montado" añadiendo la clase is-js; sin ella (sin JS) el track se comporta como carril con scroll. */ .ti-gal-carousel:not(.is-js) .ti-gal-carousel__track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ti-gal-carousel:not(.is-js) .ti-gal-carousel__track::-webkit-scrollbar { display: none; } .ti-gal-carousel:not(.is-js) .ti-gal-carousel__slide { scroll-snap-align: start; } /* Sin JS no hay controles que operar: se ocultan (el scroll nativo basta) */ .ti-gal-carousel:not(.is-js) .ti-gal-carousel__controls, .ti-gal-carousel:not(.is-js) .ti-gal-carousel__arrow { display: none; } /* --------------------------------------------------------- CONTROLES: flechas + dots --------------------------------------------------------- */ .ti-gal-carousel__arrow { position: absolute; top: 50%; z-index: 3; display: none; /* móvil: van en la barra inferior */ align-items: center; justify-content: center; width: var(--ti-gal-arrow); height: var(--ti-gal-arrow); padding: 0; border: 1px solid var(--ti-gal-line); border-radius: 999px; background: var(--ti-gal-card); color: var(--ti-gal-azul); box-shadow: var(--ti-gal-sh-ctrl); cursor: pointer; transform: translateY(-50%); transition: background var(--ti-gal-lift), border-color var(--ti-gal-lift); } .ti-gal-carousel__arrow:hover { background: var(--ti-gal-sel); border-color: var(--ti-gal-azul); } .ti-gal-carousel__arrow:focus-visible { outline: 3px solid var(--ti-gal-foco); outline-offset: 2px; } .ti-gal-carousel__arrow svg { width: 45%; height: 45%; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .ti-gal-carousel__arrow--prev { left: calc(var(--ti-gal-arrow) * -0.3); } .ti-gal-carousel__arrow--next { right: calc(var(--ti-gal-arrow) * -0.3); } /* Desktop: flechas flotantes laterales */ @media (min-width: 900px) { .ti-gal-carousel__arrow { display: flex; } .ti-gal-carousel__arrow--prev { left: -8px; } .ti-gal-carousel__arrow--next { right: -8px; } } /* Barra de controles (móvil): flecha + dots + flecha */ .ti-gal-carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--ti-gal-s4); margin-top: var(--ti-gal-s4); } .ti-gal-carousel__ctrl-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ti-gal-line); border-radius: 999px; background: var(--ti-gal-card); color: var(--ti-gal-azul); box-shadow: var(--ti-gal-sh-ctrl); cursor: pointer; flex: 0 0 auto; } .ti-gal-carousel__ctrl-arrow:focus-visible { outline: 3px solid var(--ti-gal-foco); outline-offset: 2px; } .ti-gal-carousel__ctrl-arrow svg { width: 40%; height: 40%; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } /* Desktop: la barra móvil de flechas sobra (hay flechas flotantes), pero los dots permanecen. */ @media (min-width: 900px) { .ti-gal-carousel__ctrl-arrow { display: none; } } .ti-gal-carousel__dots { display: flex; align-items: center; justify-content: center; gap: var(--ti-gal-s2); flex-wrap: wrap; } .ti-gal-carousel__dot { position: relative; width: var(--ti-gal-dot); height: var(--ti-gal-dot); padding: 0; border: 0; border-radius: 999px; background: var(--ti-gal-azul-soft); cursor: pointer; transition: width var(--ti-gal-lift), background var(--ti-gal-lift); } /* Área táctil ≥44px sin agrandar el punto visible */ .ti-gal-carousel__dot::before { content: ""; position: absolute; inset: -18px; } .ti-gal-carousel__dot[aria-current="true"] { width: var(--ti-gal-dot-on); background: var(--ti-gal-azul); } .ti-gal-carousel__dot:focus-visible { outline: 3px solid var(--ti-gal-foco); outline-offset: 3px; } /* --------------------------------------------------------- TARJETA DE PLANTILLA (.ti-gal-card) --------------------------------------------------------- */ .ti-gal-card { display: flex; flex-direction: column; height: 100%; background: var(--ti-gal-card); border: 1px solid var(--ti-gal-line); border-radius: var(--ti-gal-r-card); box-shadow: var(--ti-gal-sh-card); overflow: hidden; transition: box-shadow var(--ti-gal-lift), transform var(--ti-gal-lift); } .ti-gal-card:hover { box-shadow: var(--ti-gal-sh-hover); transform: translateY(-2px); } .ti-gal-card__media { position: relative; aspect-ratio: 320 / 427; background: var(--ti-gal-azul-tint); overflow: hidden; } .ti-gal-card__img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Placeholder on-brand cuando falta el thumbnail */ .ti-gal-card__media--ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ti-gal-s2); padding: var(--ti-gal-s4); text-align: center; background: linear-gradient(160deg, var(--ti-gal-azul-tint), var(--ti-gal-blanco)); } .ti-gal-card__ph-name { font-size: 1.35rem; font-weight: 800; line-height: 1.15; color: var(--ti-gal-azul-d); } .ti-gal-card__ph-meta { font-size: var(--ti-gal-fs-meta); font-weight: 500; color: var(--ti-gal-ink-2); } /* Chip de ocasión sobre la imagen */ .ti-gal-card__chip { position: absolute; top: var(--ti-gal-s2); left: var(--ti-gal-s2); display: inline-flex; align-items: center; gap: var(--ti-gal-s1); padding: 4px 10px; border-radius: var(--ti-gal-r-chip); background: var(--ti-gal-azul-tint); color: var(--ti-gal-azul-d); font-size: .72rem; font-weight: 700; line-height: 1; } .ti-gal-card__body { display: flex; flex-direction: column; gap: var(--ti-gal-s1); padding: var(--ti-gal-s4); } .ti-gal-card__name { font-size: var(--ti-gal-fs-name); font-weight: 700; line-height: 1.2; color: var(--ti-gal-ink); margin: 0; } .ti-gal-card__meta { font-size: var(--ti-gal-fs-meta); font-weight: 500; color: var(--ti-gal-ink-2); margin: 0 0 var(--ti-gal-s2); } .ti-gal-card__actions { display: flex; flex-direction: column; gap: var(--ti-gal-s2); margin-top: auto; } /* CTAs lado a lado en desktop si caben */ @media (min-width: 900px) { .ti-gal-card__actions { flex-direction: row; flex-wrap: wrap; } .ti-gal-card__actions .ti-gal-card__btn { flex: 1 1 auto; } } .ti-gal-card__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ti-gal-s2); min-height: 44px; padding: 10px 16px; border-radius: var(--ti-gal-r-btn); font-family: inherit; font-size: var(--ti-gal-fs-btn); font-weight: 700; text-decoration: none; cursor: pointer; transition: background var(--ti-gal-lift), border-color var(--ti-gal-lift), transform var(--ti-gal-lift); } .ti-gal-card__btn:focus-visible { outline: 3px solid var(--ti-gal-foco); outline-offset: 2px; } .ti-gal-card__btn svg { width: 18px; height: 18px; flex: 0 0 auto; } /* CTA primario: WhatsApp (verde AA) */ .ti-gal-card__btn--wa { background: var(--ti-gal-wa); border: 1.5px solid var(--ti-gal-wa); color: var(--ti-gal-blanco); } .ti-gal-card__btn--wa:hover { background: var(--ti-gal-wa-hover); border-color: var(--ti-gal-wa-hover); transform: translateY(-1px); } .ti-gal-card__btn--wa svg { fill: var(--ti-gal-blanco); } /* CTA secundario: Ver demo (contorno azul) */ .ti-gal-card__btn--demo { background: transparent; border: 1.5px solid var(--ti-gal-line); color: var(--ti-gal-azul); } .ti-gal-card__btn--demo:hover { border-color: var(--ti-gal-azul); background: var(--ti-gal-sel); } .ti-gal-card__btn--demo svg { fill: currentColor; } /* --------------------------------------------------------- TARJETA DE BENEFICIO (.ti-inc-card) — [ti_incluye] --------------------------------------------------------- */ .ti-incluye .ti-gal-carousel { --ti-gal-slide: 62%; --ti-gal-autoplay: 4000ms; } @media (min-width: 600px) { .ti-incluye .ti-gal-carousel { --ti-gal-slide: 33%; } } @media (min-width: 900px) { .ti-incluye .ti-gal-carousel { --ti-gal-slide: 22%; } } .ti-inc-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--ti-gal-s2); height: 100%; min-height: 180px; padding: var(--ti-gal-s5) var(--ti-gal-s4); text-align: center; background: var(--ti-gal-card); border: 1px solid var(--ti-gal-line); border-radius: var(--ti-gal-r-card); box-shadow: var(--ti-gal-sh-card); } .ti-inc-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: var(--ti-gal-azul-tint); color: var(--ti-gal-azul); flex: 0 0 auto; } .ti-inc-card__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ti-inc-card__title { font-size: var(--ti-gal-fs-name); font-weight: 700; line-height: 1.2; color: var(--ti-gal-ink); margin: 0; } .ti-inc-card__desc { font-size: var(--ti-gal-fs-meta); font-weight: 500; color: var(--ti-gal-ink-2); margin: 0; } /* --------------------------------------------------------- GUARDS OBLIGATORIOS --------------------------------------------------------- */ [hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { .ti-gal *, .ti-gal *::before, .ti-gal *::after, .ti-incluye *, .ti-incluye *::before, .ti-incluye *::after { animation: none !important; transition: none !important; } }