/* ============================================================ VISERA · Textura & calidez — capa "anti-plano / anti-IA" ------------------------------------------------------------ 1) Grano film sutil sobre todo el sitio (calidez editorial). 2) Micro-profundidad en tarjetas y botones (sombras cálidas, no el típico gris sintético). Para QUITARLO: borra este archivo o quita su enqueue en functions.php. ============================================================ */ /* 1 · Grano global (feTurbulence inline, sin peticiones externas) */ body::after { content: ""; position: fixed; inset: 0; z-index: 2147483640; pointer-events: none; opacity: .045; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px 220px; } @media (prefers-reduced-motion: reduce) { body::after { opacity: .03; } } /* 2 · Profundidad cálida (sombra con tinte vino, no gris plano) */ :root { --v-shadow-warm: 0 10px 30px -12px rgba(126, 47, 62, .22), 0 2px 8px -4px rgba(126, 47, 62, .14); --v-shadow-warm-sm: 0 4px 14px -6px rgba(126, 47, 62, .18); } /* Tarjetas de objetivo / áreas — leve elevación + transición orgánica */ #viseraObiettivi .vo-card, #viseraAreas .visera-area-card, .vah-card, .vfc-card, .vb-card { transition: transform .5s var(--v-ease-soft, cubic-bezier(.22,1,.36,1)), box-shadow .5s var(--v-ease-soft, cubic-bezier(.22,1,.36,1)); will-change: transform; } #viseraObiettivi .vo-card:hover, #viseraAreas .visera-area-card:hover, .vah-card:hover, .vb-card:hover { transform: translateY(-4px); box-shadow: var(--v-shadow-warm); } /* Botones primarios — micro-profundidad cálida al reposo y al hover */ .visera-navbar__cta, .vah-btn, .vm-btn, .vpe-cta-btn, .vfc-submit { box-shadow: var(--v-shadow-warm-sm); } .visera-navbar__cta:hover, .vah-btn:hover, .vm-btn:hover, .vpe-cta-btn:hover, .vfc-submit:hover { box-shadow: var(--v-shadow-warm); } /* ============================================================ 3 · Smooth scroll (Lenis) — estilos requeridos ============================================================ */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ============================================================ 4 · Barra de scroll fina y on-brand (vino) ============================================================ */ html { scrollbar-width: thin; scrollbar-color: rgba(126,47,62,.42) transparent; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: rgba(126,47,62,.42); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(126,47,62,.72); } /* ============================================================ 5 · Títulos HERO optimizados en desktop (todas las páginas) Menos grande, más aire entre líneas, más ancho útil. ============================================================ */ @media (min-width: 1181px) { [id$="Hero"] h1 { max-width: 22ch !important; font-size: clamp(26px, .55rem + 1.5vw, 32px) !important; line-height: 1.2 !important; letter-spacing: -.4px !important; } } /* ============================================================ 6 · Fusión de imagen en HEROES con imagen (todas las páginas) La imagen se disuelve en el gradiente (sin línea/seam). ============================================================ */ @media (min-width: 1181px) { /* Heroes tipo overlay (idratazione, acne): img dentro de *-image-wrap */ [id$="Hero"] [class$="-image-wrap"] { background: transparent !important; } [id$="Hero"] [class$="-image-wrap"]::before { display: none !important; } [id$="Hero"] [class$="-image-wrap"] img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 22%, rgba(0,0,0,.55) 46%, #000 72%) !important; mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 22%, rgba(0,0,0,.55) 46%, #000 72%) !important; } /* Heroes 2 columnas (ciglia e PMU, trattamenti): borde izquierdo suave */ #viseraPmuHero .vph-image { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 9%, #000 24%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 9%, #000 24%); } } /* ============================================================ 7 · Box "pagamento dilazionato" destacado (global · sección Percorsi) ============================================================ */ #vPercorsi .vpe-paga { cursor: default; display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; opacity: 1; transform: none; background: linear-gradient(150deg, rgba(126,47,62,.07), rgba(255,255,255,.72)); border: 1px solid rgba(126,47,62,.20); border-radius: 16px; padding: clamp(20px,2.2vw,26px); } #vPercorsi .vpe-paga::before { display: none; } #vPercorsi .vpe-paga:hover { transform: none; box-shadow: 0 16px 38px rgba(126,47,62,.055); } #vPercorsi .vpe-paga-head { display: flex; align-items: center; gap: 12px; } #vPercorsi .vpe-paga-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 50%; color: var(--v-wine); background: rgba(255,255,255,.8); border: 1px solid rgba(126,47,62,.16); } #vPercorsi .vpe-paga-icon svg { width: 19px; height: 19px; display: block; } #vPercorsi .vpe-paga h3 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: clamp(.95rem,.82rem + .28vw,1.06rem); line-height: 1.28; font-weight: 600; letter-spacing: -.15px; color: var(--v-wine); max-width: 32ch; } #vPercorsi .vpe-paga-list { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; } #vPercorsi .vpe-paga-list li { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 9px; align-items: start; color: rgba(17,17,17,.74); font-size: 12.8px; line-height: 1.45; } #vPercorsi .vpe-paga-list li::before { content: "✓"; color: var(--v-wine); font-weight: 700; font-size: 13px; } /* Variante banner a todo el ancho (páginas con 4 tarjetas, debajo del grid) */ #vPercorsi .vpe-paga--banner { margin-top: 14px; } @media (min-width: 760px) { #vPercorsi .vpe-paga--banner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(20px,3vw,40px); align-items: center; } } /* ============================================================ 8 · Sección RISULTATI — comparador before/after deslizable ============================================================ */ #vResults { width: 100%; position: relative; overflow: hidden; font-family: 'Inter', sans-serif; background: transparent; } #vResults .inner { width: min(100%, 1240px); margin: 0 auto; padding: clamp(42px,5vw,72px) clamp(18px,4vw,52px); } #vResults .vrs-head { text-align: center; margin-bottom: clamp(28px,4vw,44px); } #vResults .vrs-kicker { display: inline-flex; align-items: center; gap: 12px; color: var(--v-wine); font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2.8px; text-transform: uppercase; margin-bottom: 14px; } #vResults .vrs-kicker::before, #vResults .vrs-kicker::after { content: ""; width: 28px; height: 1px; background: rgba(126,47,62,.28); } #vResults .vrs-head h2 { margin: 0 auto; max-width: 22ch; font-family: 'Montserrat', sans-serif; font-size: clamp(1.25rem,.8rem + 1.5vw,1.6rem); line-height: 1.2; font-weight: 700; letter-spacing: -.35px; color: var(--v-ink); } #vResults .vrs-sub { max-width: 60ch; margin: 14px auto 0; color: rgba(17,17,17,.66); font-size: clamp(13.5px,.8rem + .18vw,15px); line-height: 1.65; } #vResults .vrs-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px,2vw,24px); } #vResults .vrs-ba { --pos: 50%; position: relative; aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; border: 1px solid rgba(126,47,62,.12); box-shadow: 0 16px 38px rgba(126,47,62,.07); background: #f0e7e5; user-select: none; touch-action: pan-y; } #vResults .vrs-ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } #vResults .vrs-ba-top { clip-path: inset(0 calc(100% - var(--pos)) 0 0); } #vResults .vrs-ba-divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: rgba(255,255,255,.92); transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(126,47,62,.22); pointer-events: none; } #vResults .vrs-ba-divider::after { content: ""; position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; transform: translate(-50%,-50%); border-radius: 50%; background: #fff; border: 1px solid rgba(126,47,62,.20); box-shadow: 0 6px 18px rgba(126,47,62,.20); } #vResults .vrs-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; } #vResults .vrs-ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; cursor: ew-resize; } #vResults .vrs-ba-range::-moz-range-thumb { width: 44px; height: 999px; border: 0; background: transparent; cursor: ew-resize; } #vResults .vrs-ba-tag { position: absolute; top: 12px; z-index: 3; padding: 4px 11px; border-radius: 999px; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; pointer-events: none; } #vResults .vrs-ba-tag--prima { left: 12px; background: rgba(17,17,17,.5); color: #fff; } #vResults .vrs-ba-tag--dopo { right: 12px; background: rgba(126,47,62,.92); color: #fff; } #vResults .vrs-note { margin: clamp(20px,3vw,30px) auto 0; text-align: center; max-width: 52ch; color: rgba(17,17,17,.45); font-size: 11.5px; line-height: 1.5; } @media (max-width: 900px) { #vResults .vrs-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } } /* ============================================================ 9 · Carruseles en MÓVIL — swipe horizontal, menos scroll vertical (excluye los comparadores before/after, que tienen su propio drag) ============================================================ */ @media (max-width: 767px) { .vpe-cards, .vm-process, .vsp-grid, .vrp-grid { display: flex !important; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 18px; gap: 12px !important; margin: 0 -18px; padding: 4px 18px 18px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .vpe-cards::-webkit-scrollbar, .vm-process::-webkit-scrollbar, .vsp-grid::-webkit-scrollbar, .vrp-grid::-webkit-scrollbar { display: none; } .vpe-cards > *, .vm-process > *, .vsp-grid > *, .vrp-grid > * { flex: 0 0 84%; scroll-snap-align: center; min-width: 0; } /* pista visual de que hay más tarjetas (degradado sutil al borde) */ #vPercorsi .vpe-main, #vMetodo .inner, #vSensitiveProtocol .inner, #vRugheProtocol .inner { position: relative; } } /* ============================================================ 10 · Homecare — layout idratazione (copy + lista | imagen) en todas ============================================================ */ #vHomeCare .vhc-banner { grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr) !important; align-items: stretch; } #vHomeCare .vhc-copy .vhc-list { padding: 0 !important; margin-top: 22px; align-content: start; gap: 12px; } #vHomeCare .vhc-visual { position: relative; min-height: 100%; overflow: hidden; background: transparent; } #vHomeCare .vhc-visual::before { display: none !important; } #vHomeCare .vhc-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 14%, #000 42%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 14%, #000 42%); } @media (max-width: 1180px) { #vHomeCare .vhc-banner { grid-template-columns: 1fr !important; } #vHomeCare .vhc-visual { min-height: 280px; } #vHomeCare .vhc-visual img { position: absolute; -webkit-mask-image: none; mask-image: none; } } /* ============================================================ 11 · Modal ABBONAMENTI — bloques reestructurados ============================================================ */ #viseraSubscriptionModal .vsm-block + .vsm-block { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(126,47,62,.1); } #viseraSubscriptionModal .vsm-block-title { display: block; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v-wine); margin-bottom: 8px; } #viseraSubscriptionModal .vsm-block-lead { font-size: 13px; color: rgba(17,17,17,.72); line-height: 1.5; margin: 6px 0; } #viseraSubscriptionModal .vsm-tlist { list-style: none; margin: 6px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; } #viseraSubscriptionModal .vsm-tlist li { position: relative; padding-left: 16px; font-size: 12.8px; color: rgba(17,17,17,.78); line-height: 1.5; } #viseraSubscriptionModal .vsm-tlist li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--v-wine); } #viseraSubscriptionModal .vsm-oppure { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(17,17,17,.4); } #viseraSubscriptionModal .vsm-oppure::before, #viseraSubscriptionModal .vsm-oppure::after { content: ""; flex: 1; height: 1px; background: rgba(126,47,62,.14); } #viseraSubscriptionModal .vsm-vlist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 7px; } #viseraSubscriptionModal .vsm-vlist li { position: relative; padding-left: 20px; font-size: 12.8px; color: rgba(17,17,17,.78); line-height: 1.5; } #viseraSubscriptionModal .vsm-vlist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--v-wine); font-weight: 700; } #viseraSubscriptionModal .vsm-vlist b { color: var(--v-wine); font-weight: 700; } #viseraSubscriptionModal .vsm-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(126,47,62,.12); } #viseraSubscriptionModal .vsm-nota { font-size: 12px; color: rgba(17,17,17,.62); line-height: 1.5; margin: 0 0 8px; } #viseraSubscriptionModal .vsm-disclaimer { font-size: 10.5px; color: rgba(17,17,17,.45); line-height: 1.5; margin: 0; } #viseraSubscriptionModal .vsm-disclaimer a { color: var(--v-wine); text-decoration: underline; } @media (max-width: 600px) { #viseraSubscriptionModal .vsm-tlist { grid-template-columns: 1fr; } } /* ============================================================ 12 · Modal I CENTRI — tarjetas, cabecera y acciones Bloque único y autoritativo: visera-texture.css se encola el último, así que estas reglas cierran los conflictos que venían de visera-navbar.css (uppercase + rayita ::after + color !important sobre los pills). ============================================================ */ /* --- Caja del modal: algo más ancha para que quepan 3 tarjetas. Solo en escritorio: por debajo de 920px siguen mandando los anchos que ya define visera-navbar.css (720px tablet/móvil). --- */ @media (min-width: 921px) { #viseraCentersModal .vcm-dialog { width: min(calc(100% - 28px), 960px); } } /* --- Rejilla: 3 columnas de la misma altura --- */ #viseraCentersModal .vcm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 14px; } /* --- Tarjeta: columna flexible para poder anclar las acciones abajo --- */ #viseraCentersModal .vcm-card { display: flex; flex-direction: column; padding: 20px 18px; border-radius: 10px; } /* --- Etiqueta: siempre en una línea y con la misma altura en las 3 --- */ #viseraCentersModal .vcm-label { min-height: 24px; align-items: center; margin-bottom: 14px; padding: 0 11px; font-size: 8.4px; letter-spacing: 1.15px; line-height: 1; white-space: nowrap; } /* --- Título: reserva 2 líneas para que los textos arranquen igual --- */ #viseraCentersModal .vcm-card h3 { min-height: 2.4em; margin: 0 0 10px; font-size: 16.5px; line-height: 1.2; letter-spacing: -.2px; } #viseraCentersModal .vcm-card p { font-size: 13px; line-height: 1.55; } /* --- "Come arrivare": enlace suelto (no está dentro de .vcm-actions) --- */ #viseraCentersModal .vcm-map { width: fit-content; display: inline-flex; align-items: center; gap: 7px; min-height: 32px; margin-top: 10px; padding: 0 13px; border: 1px solid rgba(126, 47, 62, .25); border-radius: 999px; background: transparent; color: var(--v-wine); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; text-decoration: none; transition: background .2s ease, border-color .2s ease; } #viseraCentersModal .vcm-map::before { content: ""; width: 13px; height: 13px; flex: 0 0 13px; background: currentColor; -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); } #viseraCentersModal .vcm-map:hover { background: rgba(126, 47, 62, .06); border-color: rgba(126, 47, 62, .42); } /* --- Acciones ancladas al fondo: las 3 tarjetas terminan alineadas --- */ #viseraCentersModal .vcm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; } #viseraCentersModal .vcm-actions a { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: 999px; font-family: "Inter", sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 0; line-height: 1; text-transform: none; text-decoration: none; white-space: nowrap; transition: transform .2s ease, background .2s ease, border-color .2s ease; } /* Mata la rayita decorativa que visera-navbar.css inyecta tras cada enlace */ #viseraCentersModal .vcm-actions a::after { content: none !important; display: none !important; } #viseraCentersModal .vcm-actions a svg { width: 15px; height: 15px; flex: 0 0 15px; } /* WhatsApp — el !important vence al `color: var(--vn-wine) !important` de navbar */ #viseraCentersModal .vcm-actions a.vcm-wa { background: #25D366; color: #fff !important; border: 1px solid #21bd5c; } #viseraCentersModal .vcm-actions a.vcm-wa:hover { background: #1FBE59; transform: translateY(-1px); } /* Teléfono */ #viseraCentersModal .vcm-actions a.vcm-tel { border: 1px solid rgba(126, 47, 62, .18); background: rgba(255, 255, 255, .6); color: rgba(17, 17, 17, .8) !important; } #viseraCentersModal .vcm-actions a.vcm-tel:hover { background: #fff; border-color: rgba(126, 47, 62, .34); } /* Botón "Scopri la nuova sede" a ancho completo dentro de su tarjeta */ #viseraCentersModal .vcm-moved-btn { width: 100%; justify-content: center; } /* --- Móvil: una columna, sin alturas reservadas --- */ @media (max-width: 920px) { #viseraCentersModal .vcm-grid { grid-template-columns: 1fr; gap: 10px; } #viseraCentersModal .vcm-card h3 { min-height: 0; } #viseraCentersModal .vcm-label { white-space: normal; min-height: 0; padding: 6px 11px; } #viseraCentersModal .vcm-actions { padding-top: 14px; } } /* ============================================================ 13 · Ciglia e PMU — secciones nuevas ============================================================ */ /* mini-título sobre las tabs */ #viseraTabsServices .vts-minititle { text-align: center; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; color: var(--v-wine); margin: 0 0 18px; } /* variantes bajo el precio */ #viseraCigliaSection .vcs-variants { margin: 10px 0 0; font-size: 12px; color: rgba(17,17,17,.6); line-height: 1.45; } /* galería ciglia a 2 fotos */ #viseraCigliaProof .vcpr-gallery-2 { grid-template-columns: 1fr 1fr; } /* Programmi Refill */ #viseraRefill .vrf-inner { width: min(100%,1100px); margin: 0 auto; padding: clamp(8px,2vw,20px) clamp(18px,4vw,40px) clamp(24px,3vw,40px); } #viseraRefill .vrf-head { text-align: center; margin-bottom: 24px; } #viseraRefill .vrf-kicker { display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; color: var(--v-wine); margin-bottom: 10px; } #viseraRefill .vrf-head h3 { font-family: 'Montserrat', sans-serif; font-size: clamp(1.2rem,.9rem + 1vw,1.5rem); font-weight: 700; color: var(--v-ink); margin: 0 0 8px; letter-spacing: -.3px; } #viseraRefill .vrf-sub { max-width: 48ch; margin: 0 auto; color: rgba(17,17,17,.62); font-size: 13.5px; line-height: 1.6; } #viseraRefill .vrf-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; max-width: 600px; margin: 26px auto 0; } #viseraRefill .vrf-card { position: relative; text-align: center; padding: 28px 22px; border: 1px solid rgba(126,47,62,.14); border-radius: 16px; background: rgba(255,255,255,.7); box-shadow: 0 14px 34px rgba(126,47,62,.06); } #viseraRefill .vrf-card-best { border-color: rgba(126,47,62,.35); background: linear-gradient(160deg, rgba(126,47,62,.07), rgba(255,255,255,.82)); } #viseraRefill .vrf-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--v-wine); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; white-space: nowrap; } #viseraRefill .vrf-name { display: block; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(17,17,17,.7); } #viseraRefill .vrf-price { display: block; font-family: 'Montserrat', sans-serif; font-size: 2.2rem; font-weight: 700; color: var(--v-wine); line-height: 1.1; margin: 10px 0 6px; letter-spacing: -1px; } #viseraRefill .vrf-note { display: block; font-size: 12.5px; color: rgba(17,17,17,.55); } /* Intro trucco */ #viseraPmuIntro .vpin-inner { width: min(100%,900px); margin: 0 auto; padding: clamp(30px,4vw,54px) clamp(18px,4vw,40px) clamp(6px,2vw,14px); text-align: center; } #viseraPmuIntro .vpin-kicker { display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; color: var(--v-wine); margin-bottom: 14px; } #viseraPmuIntro h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(1.3rem,.9rem + 1.4vw,1.7rem); font-weight: 700; color: var(--v-ink); line-height: 1.22; letter-spacing: -.4px; margin: 0 auto; max-width: 26ch; } #viseraPmuIntro .vpin-sub { max-width: 62ch; margin: 14px auto 0; color: rgba(17,17,17,.66); font-size: 14px; line-height: 1.65; } /* Come funziona — 3 step */ #viseraPmuHow .vph2-inner { width: min(100%,1100px); margin: 0 auto; padding: clamp(18px,3vw,30px) clamp(18px,4vw,40px) clamp(30px,4vw,50px); } #viseraPmuHow .vph2-head { text-align: center; margin-bottom: 26px; } #viseraPmuHow .vph2-kicker { display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; color: var(--v-wine); margin-bottom: 8px; } #viseraPmuHow .vph2-head h3 { font-family: 'Montserrat', sans-serif; font-size: clamp(1.15rem,.9rem + .9vw,1.4rem); font-weight: 700; color: var(--v-ink); margin: 0; } #viseraPmuHow .vph2-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; } #viseraPmuHow .vph2-step { padding: 26px 22px; border: 1px solid rgba(126,47,62,.12); border-radius: 16px; background: rgba(255,255,255,.65); box-shadow: 0 14px 32px rgba(126,47,62,.05); } #viseraPmuHow .vph2-num { display: block; font-family: 'Montserrat', sans-serif; font-size: 1.6rem; font-weight: 700; color: rgba(126,47,62,.25); line-height: 1; margin-bottom: 14px; } #viseraPmuHow .vph2-step h4 { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .3px; color: var(--v-ink); margin: 0 0 8px; } #viseraPmuHow .vph2-step p { font-size: 13px; color: rgba(17,17,17,.66); line-height: 1.6; margin: 0; } /* CTA check-up — lista */ #viseraPmuCta .vpc-list { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; } #viseraPmuCta .vpc-list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.5; } #viseraPmuCta .vpc-list li::before { content: "✓"; position: absolute; left: 0; color: var(--v-wine); font-weight: 700; } #viseraPmuCta .vpc-note { font-size: 13px; opacity: .82; margin: 10px 0 0; line-height: 1.55; } #viseraPmuCta .vpc-price-label { display: block; font-size: 12.5px; opacity: .85; margin-bottom: 2px; } /* Galería "Alcuni dei nostri risultati" — carrusel 10 fotos */ #viseraPmuGallery .vpg-section-sub { font-size: 13.5px; color: rgba(17,17,17,.6); line-height: 1.55; margin: 0 0 16px; } #viseraPmuGallery .vpg-carousel { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -4px; padding: 4px 4px 12px; } #viseraPmuGallery .vpg-carousel::-webkit-scrollbar { display: none; } #viseraPmuGallery .vpg-track { display: flex; gap: 12px; } #viseraPmuGallery .vpg-slide { flex: 0 0 200px; scroll-snap-align: start; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; border: 1px solid rgba(126,47,62,.1); } #viseraPmuGallery .vpg-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 767px) { #viseraRefill .vrf-cards { grid-template-columns: 1fr; } #viseraPmuHow .vph2-steps { grid-template-columns: 1fr; } #viseraPmuGallery .vpg-slide { flex-basis: 158px; } } /* ============================================================ 14 · Modal I CENTRI — acabado premium VISERA ============================================================ */ #viseraCentersModal .vcm-grid { gap: 18px; } #viseraCentersModal .vcm-card { background: linear-gradient(165deg, #ffffff, #fbf5f3); border: 1px solid rgba(126,47,62,.14); border-radius: 18px; padding: 26px 24px; box-shadow: 0 18px 44px rgba(126,47,62,.08); transition: transform .3s var(--v-ease-soft, cubic-bezier(.22,1,.36,1)), box-shadow .3s ease; } #viseraCentersModal .vcm-card:hover { transform: translateY(-3px); box-shadow: 0 24px 54px rgba(126,47,62,.12); } #viseraCentersModal .vcm-label { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(126,47,62,.08); color: var(--v-wine); font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; } #viseraCentersModal .vcm-card h3 { font-family: 'Montserrat', sans-serif; font-size: 1.15rem; font-weight: 600; color: var(--v-ink); margin: 12px 0 6px; letter-spacing: -.2px; } #viseraCentersModal .vcm-card > p { color: rgba(17,17,17,.58); font-size: 13.5px; line-height: 1.55; margin: 0; } #viseraCentersModal .vcm-actions { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(126,47,62,.1); } #viseraCentersModal .vcm-actions a { justify-content: flex-start; width: 100%; min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 13px; font-weight: 600; } #viseraCentersModal .vcm-map { background: var(--v-wine); color: #fff; border: 0; } #viseraCentersModal .vcm-map:hover { background: var(--v-wine-dark, #5F2430); transform: translateY(-1px); } #viseraCentersModal .vcm-wa { background: #fff; color: #1d8a4e; border: 1px solid rgba(37,211,102,.45); } #viseraCentersModal .vcm-wa svg { color: #25D366; } #viseraCentersModal .vcm-wa:hover { background: #f2fbf6; } #viseraCentersModal .vcm-tel { background: #fff; color: rgba(17,17,17,.82); border: 1px solid rgba(126,47,62,.16); font-family: 'Montserrat', sans-serif; letter-spacing: .3px; } #viseraCentersModal .vcm-tel svg { color: var(--v-wine); } #viseraCentersModal .vcm-tel:hover { background: #fff; border-color: rgba(126,47,62,.35); } /* ============================================================ 15 · Modal ABBONAMENTI — acabado premium VISERA ============================================================ */ #viseraSubscriptionModal .vsm-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; } #viseraSubscriptionModal .vsm-card { border: 1px solid rgba(126,47,62,.14); border-radius: 18px; background: linear-gradient(170deg, #ffffff, #fbf5f3); box-shadow: 0 18px 44px rgba(126,47,62,.07); overflow: hidden; } #viseraSubscriptionModal .vsm-card-content, #viseraSubscriptionModal .vsm-card-content-inner { display: flex; flex-direction: column; flex: 1; } #viseraSubscriptionModal .vsm-btn { margin-top: auto; } #viseraSubscriptionModal .vsm-card-top { border-bottom: 1px solid rgba(126,47,62,.1); } #viseraSubscriptionModal .vsm-price { color: var(--v-wine); } /* Tarjeta PRO destacada */ #viseraSubscriptionModal .vsm-card-pro { position: relative; border: 1.5px solid rgba(126,47,62,.4); background: linear-gradient(170deg, #fdf4f1, #fbeae5); } #viseraSubscriptionModal .vsm-card-pro::after { content: "Consigliato"; position: absolute; top: 14px; right: 14px; z-index: 4; background: linear-gradient(135deg, var(--v-wine), var(--v-wine-dark, #5F2430)); color: #fff; font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; box-shadow: 0 6px 16px rgba(126,47,62,.25); } #viseraSubscriptionModal .vsm-foot { margin-top: 22px; } @media (max-width: 760px) { #viseraSubscriptionModal .vsm-plans { grid-template-columns: 1fr; } #viseraSubscriptionModal .vsm-card-pro::after { top: 12px; right: 12px; } } /* ============================================================ 16 · Modal I CENTRI — versión MINIMALISTA (override) ============================================================ */ #viseraCentersModal .vcm-card { background: #fff; box-shadow: 0 10px 28px rgba(126,47,62,.05); padding: 24px 22px; } #viseraCentersModal .vcm-card:hover { transform: none; box-shadow: 0 10px 28px rgba(126,47,62,.05); } /* acciones como filas limpias con icono — sin bloques de color */ #viseraCentersModal .vcm-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(126,47,62,.1); } #viseraCentersModal .vcm-actions a { width: auto; justify-content: flex-start; gap: 6px; min-height: auto; padding: 2px 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: rgba(17,17,17,.78); font-size: 12px; font-weight: 500; letter-spacing: 0; transition: color .2s ease; } #viseraCentersModal .vcm-actions a svg { color: var(--v-wine); width: 14px; height: 14px; } #viseraCentersModal .vcm-wa svg { color: #25D366; } #viseraCentersModal .vcm-actions a:hover { color: var(--v-wine); transform: none; background: transparent !important; } #viseraCentersModal .vcm-tel { font-family: inherit; letter-spacing: 0; } /* "Vedi tutti i centri" — centrado y minimalista */ #viseraCentersModal .vcm-inner { text-align: center; } #viseraCentersModal .vcm-main-btn { display: inline-flex; width: auto; margin: 22px auto 0; align-items: center; background: transparent !important; color: var(--v-wine); border: 0 !important; border-radius: 0; box-shadow: none !important; padding: 6px 6px; min-height: auto; gap: 12px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; } #viseraCentersModal .vcm-main-btn:hover { background: transparent !important; transform: none; color: var(--v-wine-dark, #5F2430); } /* ============================================================ 17 · Modal I CENTRI — ajuste final (compacto, sin líneas, botón solo texto) ============================================================ */ /* fuera la rayita decorativa "——" de cada acción */ #viseraCentersModal .vcm-actions a::after, #viseraCentersModal .vcm-actions a::before, #viseraCentersModal .vcm-actions a i { content: none !important; display: none !important; } /* acciones compactas, juntas */ #viseraCentersModal .vcm-actions { gap: 5px 16px; margin-top: 14px; padding-top: 12px; } #viseraCentersModal .vcm-actions a { font-size: 11.5px; gap: 6px; padding: 1px 0; } #viseraCentersModal .vcm-actions a svg { width: 13px; height: 13px; } /* tarjeta un poco más compacta */ #viseraCentersModal .vcm-card { padding: 22px 20px; } #viseraCentersModal .vcm-card > p { font-size: 13px; } /* "Vedi tutti i centri" — solo texto vino, sin flecha ni nada */ #viseraCentersModal .vcm-main-btn i { display: none !important; } #viseraCentersModal .vcm-main-btn, #viseraCentersModal .vcm-main-btn span { color: var(--v-wine) !important; } #viseraCentersModal .vcm-main-btn { gap: 0 !important; } /* ============================================================ 18 · TIPOGRAFÍA unificada con clamp (rem + vw) — escala responsiva ============================================================ */ :root { --v-h2: clamp(1.2rem, 1rem + .95vw, 1.55rem); --v-h3: clamp(1.05rem, 0.93rem + 0.55vw, 1.28rem); --v-lead: clamp(0.92rem, 0.86rem + 0.25vw, 1.02rem); } /* h2 = título de sección (unificado en todo el contenido; no toca hero/modales) */ main.visera-elementor-content h2 { font-size: var(--v-h2) !important; line-height: 1.2 !important; } /* ============================================================ 19 · Carruseles — dots como LÍNEAS + flechas a los lados (unificado) ============================================================ */ /* dots tipo línea en todos los carruseles */ .visera-hero-final__dots button, #viseraCigliaProof .vcpr-dots button, #viseraPmuGallery .vpg-dots button, .visera-carousel-dots button { width: 14px !important; height: 3px !important; border-radius: 999px !important; background: rgba(126,47,62,.22) !important; transition: width .28s ease, background .28s ease !important; } .visera-hero-final__dots button.is-active, #viseraCigliaProof .vcpr-dots button.is-active, #viseraPmuGallery .vpg-dots button.is-active, .visera-carousel-dots button.is-active { width: 26px !important; background: var(--v-wine) !important; } .visera-hero-final__dots button::after { inset: -12px !important; } /* flechas a los lados — review ciglia */ #viseraCigliaProof .vcpr-review-card { position: relative; } #viseraCigliaProof .vcpr-review-bottom { justify-content: center; } #viseraCigliaProof .vcpr-arrow { position: absolute; top: 42%; transform: translateY(-50%); margin: 0; z-index: 3; } #viseraCigliaProof [data-ciglia-review-prev] { left: 2px; } #viseraCigliaProof [data-ciglia-review-next] { right: 2px; } #viseraCigliaProof .vcpr-review-text { padding-left: 24px; padding-right: 24px; } /* flechas a los lados — review pmu */ #viseraPmuGallery .vpg-review-card { position: relative; } #viseraPmuGallery .vpg-review-nav { justify-content: center; } #viseraPmuGallery .vpg-nav-btns { position: static; } #viseraPmuGallery .vpg-nav-btn { position: absolute; top: 42%; transform: translateY(-50%); z-index: 3; } #viseraPmuGallery [data-review-prev] { left: 6px; } #viseraPmuGallery [data-review-next] { right: 6px; } #viseraPmuGallery .vpg-review-content { padding-left: 26px; padding-right: 26px; } /* ============================================================ 20 · Ciglia "I Nostri Lavori" — fotos más grandes ============================================================ */ #viseraCigliaProof .vcpr-gallery-2 { gap: 14px; } #viseraCigliaProof .vcpr-gallery-2 .vcpr-img { aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; } #viseraCigliaProof .vcpr-gallery-2 .vcpr-img img { width: 100%; height: 100%; object-fit: cover; } /* ============================================================ 21 · Modal ABBONAMENTI — responsive (cabe en pantallas pequeñas) ============================================================ */ #viseraSubscriptionModal .vsm-dialog { max-width: min(1120px, 94vw); max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } #viseraSubscriptionModal .vsm-inner { padding: clamp(20px, 3vw, 40px); } @media (max-width: 760px) { #viseraSubscriptionModal .vsm-dialog { max-height: 90vh; } #viseraSubscriptionModal .vsm-head h2 { font-size: clamp(1.3rem, 1.1rem + 2vw, 1.7rem); } #viseraSubscriptionModal .vsm-tlist { grid-template-columns: 1fr 1fr; } } /* ============================================================ 22 · Carrusel de fotos [data-vcar] — flechas a los lados + dots-línea ============================================================ */ #viseraPmuGallery .vpg-carousel { position: relative; } #viseraPmuGallery .vcar-arrow { position: absolute; top: 42%; transform: translateY(-50%); z-index: 4; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(126,47,62,.2); background: rgba(255,255,255,.92); color: var(--v-wine); cursor: pointer; box-shadow: 0 6px 16px rgba(126,47,62,.1); transition: background .2s ease, color .2s ease, transform .2s ease, opacity .2s ease; } #viseraPmuGallery .vcar-arrow svg { width: 18px; height: 18px; } #viseraPmuGallery .vcar-arrow:hover { background: var(--v-wine); color: #fff; } #viseraPmuGallery .vcar-arrow:disabled { opacity: .32; cursor: default; } #viseraPmuGallery .vcar-prev { left: -6px; } #viseraPmuGallery .vcar-next { right: -6px; } #viseraPmuGallery .vcar-dots { display: flex; justify-content: center; gap: 7px; margin-top: 16px; } #viseraPmuGallery .vcar-dots button { width: 14px; height: 3px; border: 0; border-radius: 999px; background: rgba(126,47,62,.22); cursor: pointer; transition: width .28s ease, background .28s ease; padding: 0; } #viseraPmuGallery .vcar-dots button.is-active { width: 26px; background: var(--v-wine); } /* ============================================================ 23 · Heroes analisi-della-pelle y viso — split 50/50 (foto · gradiente) En móvil la foto va arriba. ============================================================ */ #viseraAnalisiPelle, #viseraTrattamentoIntro { background: linear-gradient(145deg, #FBF8F5 0%, #F4ECE8 100%) !important; overflow: hidden; } #viseraAnalisiPelle .vap-inner, #viseraTrattamentoIntro .vti-inner { display: grid !important; grid-template-columns: 1fr 1fr; gap: clamp(22px, 4vw, 56px); align-items: center; } #viseraAnalisiPelle .vap-breadcrumb, #viseraTrattamentoIntro .vti-breadcrumb { grid-column: 1 / -1; } #viseraAnalisiPelle .vap-content, #viseraTrattamentoIntro .vti-content { width: 100% !important; max-width: 540px; padding-top: 0 !important; } #viseraAnalisiPelle .vap-media, #viseraTrattamentoIntro .vti-media { align-self: stretch; min-height: clamp(320px, 42vh, 500px); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 54px rgba(126,47,62,.1); } #viseraAnalisiPelle .vap-media img, #viseraTrattamentoIntro .vti-media img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 880px) { #viseraAnalisiPelle .vap-inner, #viseraTrattamentoIntro .vti-inner { grid-template-columns: 1fr; } #viseraAnalisiPelle .vap-breadcrumb, #viseraTrattamentoIntro .vti-breadcrumb { order: -2; } #viseraAnalisiPelle .vap-media, #viseraTrattamentoIntro .vti-media { order: -1; min-height: 240px; } #viseraAnalisiPelle .vap-content, #viseraTrattamentoIntro .vti-content { max-width: 100%; } } /* ============================================================ 24 · Hero del HOME — controles unificados (flechas a los lados, dots abajo) ============================================================ */ .visera-hero-final { position: relative; } .visera-hero-final__controls { position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; width: 100% !important; height: 100% !important; z-index: 8 !important; background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; display: block !important; pointer-events: none !important; } .visera-hero-final__arrow { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 9; pointer-events: auto; width: 44px !important; height: 44px !important; border-radius: 50% !important; background: rgba(255,255,255,.9) !important; color: var(--v-wine) !important; box-shadow: 0 6px 18px rgba(0,0,0,.14); transition: background .2s ease; } .visera-hero-final__arrow:hover { background: #fff !important; } .visera-hero-final__arrow[data-prev] { left: clamp(10px, 2vw, 30px) !important; right: auto !important; } .visera-hero-final__arrow[data-next] { right: clamp(10px, 2vw, 30px) !important; left: auto !important; } .visera-hero-final__dots { position: absolute !important; left: 50% !important; bottom: clamp(16px, 3vh, 32px) !important; top: auto !important; transform: translateX(-50%) !important; z-index: 9; gap: 8px !important; pointer-events: auto; } @media (max-width: 767px) { .visera-hero-final__arrow { width: 38px !important; height: 38px !important; } } /* ============================================================ 25 · Home hero — imagen 60% derecha + fundido (desktop) En desktop la imagen NO ocupa el 100%: queda en el 60% derecho y se funde hacia la izquierda (crema) con máscara + overlay. En móvil: foto arriba, texto abajo (como analisi). ============================================================ */ @media (min-width: 768px) { .visera-hero-final__bg { left: 40% !important; /* la imagen ocupa el 60% derecho */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 14%, #000 32%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 14%, #000 32%); } .visera-hero-final__overlay { background: linear-gradient(90deg, #FBF8F5 0%, #FBF8F5 32%, rgba(251,248,245,.55) 45%, rgba(251,248,245,0) 58%) !important; } } @media (max-width: 767px) { .visera-hero-final__bg { left: 0 !important; background-position: center top !important; } .visera-hero-final__overlay { background: linear-gradient(180deg, rgba(251,248,245,0) 0%, rgba(251,248,245,.3) 40%, #FBF8F5 62%, #FBF8F5 100%) !important; } .visera-hero-final__container { align-items: flex-end !important; padding-bottom: clamp(46px, 10vw, 70px) !important; } .visera-hero-final__copy { width: 100% !important; } .visera-hero-final__dots { bottom: 14px !important; } .visera-hero-final__arrow { top: 30% !important; } } /* ============================================================ 40 · SEO — H1 oculto pero 100% rastreable por Google (técnica accesible sr-only; NO usa display:none para que se indexe) ============================================================ */ .visera-seo-h1 { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%); } /* ============================================================ 41 · Navbar — sin línea inferior (se mantiene fondo + sombra suave) ============================================================ */ #viseraNavbar.is-scrolled, #viseraNavbar.is-open, #viseraNavbar.is-dropdown-open { border-bottom: 0 !important; } /* ============================================================ 26 · Tab Trucco — diagramación consistente ============================================================ */ #viseraPmuIntro .vpin-inner { padding-bottom: clamp(4px, 1.5vw, 12px); } #viseraPmuHow .vph2-inner { padding-top: clamp(12px, 2vw, 22px); } #viseraPmuServices .vps-inner { padding-top: clamp(8px, 2vw, 18px); } #viseraPmuServices .vps-content { padding-bottom: clamp(20px, 2.5vw, 28px); } #viseraPmuServices .vps-card { border-radius: 16px; overflow: hidden; transition: transform .35s var(--v-ease-soft, cubic-bezier(.22,1,.36,1)), box-shadow .35s ease; } #viseraPmuServices .vps-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(126,47,62,.1); } /* separación uniforme entre secciones del panel trucco */ #vtsPanelTrucco > section { scroll-margin-top: 90px; } /* ============================================================ 27 · I Centri — "Come arrivare" bajo la dirección (sin icono) + separador ============================================================ */ #viseraCentersModal .vcm-map { display: inline-flex !important; margin: 10px 0 0 !important; padding: 0 !important; min-height: auto !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; gap: 0 !important; color: var(--v-wine) !important; font-size: 12.5px !important; font-weight: 600 !important; text-decoration: underline; text-underline-offset: 3px; } #viseraCentersModal .vcm-map:hover { color: var(--v-wine-dark, #5F2430) !important; transform: none !important; } #viseraCentersModal .vcm-actions { margin-top: 14px; padding-top: 14px; } /* ============================================================ 28 · Ciglia — título más pequeño + fotos I Nostri Lavori completas ============================================================ */ #viseraCigliaSection .vcs-side h2 { font-size: clamp(1.12rem, 0.95rem + 0.75vw, 1.42rem) !important; line-height: 1.22 !important; } #viseraCigliaProof .vcpr-gallery-2 { gap: 14px; } #viseraCigliaProof .vcpr-gallery-2 .vcpr-img { aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; } #viseraCigliaProof .vcpr-gallery-2 .vcpr-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; } /* ============================================================ 29 · Modal ABBONAMENTI — compacto (menos scroll) ============================================================ */ #viseraSubscriptionModal .vsm-inner { padding: clamp(18px, 2.5vw, 32px) !important; } #viseraSubscriptionModal .vsm-head { margin-bottom: clamp(12px, 2vw, 20px) !important; } #viseraSubscriptionModal .vsm-plans { gap: 16px; } #viseraSubscriptionModal .vsm-price { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 1.95rem) !important; } #viseraSubscriptionModal .vsm-card-content-inner { gap: 12px; } #viseraSubscriptionModal .vsm-block + .vsm-block { margin-top: 12px; padding-top: 12px; } #viseraSubscriptionModal .vsm-block-lead { font-size: 12.5px; margin: 4px 0; } #viseraSubscriptionModal .vsm-tlist { gap: 3px 14px; } #viseraSubscriptionModal .vsm-tlist li, #viseraSubscriptionModal .vsm-vlist li { font-size: 12px; line-height: 1.4; } #viseraSubscriptionModal .vsm-vlist { gap: 5px; } #viseraSubscriptionModal .vsm-oppure { margin: 8px 0; } #viseraSubscriptionModal .vsm-btn { min-height: 42px !important; margin-top: 14px; } #viseraSubscriptionModal .vsm-foot { margin-top: 14px; padding-top: 12px; } #viseraSubscriptionModal .vsm-nota { margin-bottom: 6px; } /* ============================================================ 30 · FIX carrusel PMU — el scroll va en el TRACK (no en el wrapper) ============================================================ */ #viseraPmuGallery .vpg-carousel { overflow: visible !important; } #viseraPmuGallery .vpg-track { overflow-x: auto !important; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 4px 0 2px; } #viseraPmuGallery .vpg-track::-webkit-scrollbar { display: none; } /* ============================================================ 31 · Correzione PMU — título mucho más pequeño (no gigante) ============================================================ */ #viseraPmuCorrection .vpcr-copy h2 { font-size: clamp(1rem, .85rem + .5vw, 1.2rem) !important; line-height: 1.32 !important; max-width: 26ch; } /* ============================================================ 36 · Flecha UNIFICADA en todos los botones CTA (línea + chevron) ============================================================ */ .visera-navbar__cta i, .visera-navbar__mobile-cta i, #vAcneHero .vah-btn i, #vIdratazioneHero .vih-btn i, #vLumHero .lh-btn i, #vMacchieHero .lh-btn i, #vRugheHero .lh-btn i, #vMetodo .vm-btn i, #vEstetica .ve-btn i, #vPercorsi .vpe-cta-btn i, #vFooterCta .vfc-submit i, #vFooterCta .vfc-dark-btn i, #viseraCigliaProof .vcpr-more i, #viseraClubCompact .vcc-button i, #viseraClubProgramma .vc-btn i, #viseraGeneticaPelle .vgp-btn i, #viseraMedicalRefined .vmr-button i, #viseraMedicalSupport .vms-btn i, #viseraObiettivi .vo-footer i, #viseraPmuCorrection .vpcr-cta i, #viseraPmuCta .vpc-cta i, #viseraPmuHero .vph-cta i, #viseraPmuInfobar .vpib-cta i, #viseraRisultati .vr-btn i, #viseraTrattamentoIntro .vti-btn i, #viseraTrattamentoIntro .vti-btn-line i, .vb-btn i, .vb-card-more i { position: relative !important; display: inline-block !important; vertical-align: middle; width: 26px !important; height: 1px !important; background: currentColor !important; border: 0 !important; border-radius: 0 !important; transition: width .3s ease !important; } .visera-navbar__cta i::after, .visera-navbar__mobile-cta i::after, #vAcneHero .vah-btn i::after, #vIdratazioneHero .vih-btn i::after, #vLumHero .lh-btn i::after, #vMacchieHero .lh-btn i::after, #vRugheHero .lh-btn i::after, #vMetodo .vm-btn i::after, #vEstetica .ve-btn i::after, #vPercorsi .vpe-cta-btn i::after, #vFooterCta .vfc-submit i::after, #vFooterCta .vfc-dark-btn i::after, #viseraCigliaProof .vcpr-more i::after, #viseraClubCompact .vcc-button i::after, #viseraClubProgramma .vc-btn i::after, #viseraGeneticaPelle .vgp-btn i::after, #viseraMedicalRefined .vmr-button i::after, #viseraMedicalSupport .vms-btn i::after, #viseraObiettivi .vo-footer i::after, #viseraPmuCorrection .vpcr-cta i::after, #viseraPmuCta .vpc-cta i::after, #viseraPmuHero .vph-cta i::after, #viseraPmuInfobar .vpib-cta i::after, #viseraRisultati .vr-btn i::after, #viseraTrattamentoIntro .vti-btn i::after, #viseraTrattamentoIntro .vti-btn-line i::after, .vb-btn i::after, .vb-card-more i::after { content: "" !important; position: absolute !important; right: 0 !important; left: auto !important; top: 50% !important; width: 6px !important; height: 6px !important; border-top: 1.5px solid currentColor !important; border-right: 1.5px solid currentColor !important; border-left: 0 !important; border-bottom: 0 !important; background: none !important; border-radius: 0 !important; transform: translateY(-50%) rotate(45deg) !important; } .visera-navbar__cta:hover i, .vah-btn:hover i, .vih-btn:hover i, .lh-btn:hover i, .vm-btn:hover i, .vpe-cta-btn:hover i, .vph-cta:hover i, .vpcr-cta:hover i, .vpc-cta:hover i, .vpib-cta:hover i, .vti-btn:hover i, .vti-btn-line:hover i, .vfc-dark-btn:hover i, .vfc-submit:hover i, .vcc-button:hover i, .vcpr-more:hover i, .vb-btn:hover i, .vmr-button:hover i { width: 34px !important; } /* ============================================================ 37 · Come funziona — "Il tuo percorso in 3 step" arriba en la col. derecha ============================================================ */ #viseraPmuHow .vph2-rhead { margin-bottom: 22px; } #viseraPmuHow .vph2-rhead .vph2-kicker { display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; color: var(--v-wine); margin-bottom: 8px; } #viseraPmuHow .vph2-rhead h3 { font-family: 'Montserrat', sans-serif; font-size: clamp(1.1rem, .9rem + .8vw, 1.35rem) !important; font-weight: 700; color: var(--v-ink); margin: 0; } @media (max-width: 880px) { #viseraPmuHow .vph2-rhead { text-align: center; } } /* ============================================================ 38 · Modales — UN solo scrollbar (no 3): bloquea body + solo el diálogo ============================================================ */ body.visera-popup-lock, body.visera-nav-lock { overflow: hidden !important; } #viseraSubscriptionModal, #viseraCentersModal { overflow: hidden !important; } #viseraSubscriptionModal .vsm-dialog { max-height: 90vh; overflow-y: auto !important; } #viseraSubscriptionModal .vsm-inner { overflow: visible !important; } #viseraCentersModal .vcm-dialog { max-height: 90vh; overflow-y: auto; } #viseraCentersModal .vcm-inner { overflow: visible !important; } /* ============================================================ 39 · Flechas de navegación (slider + carrusel + reviews) FINAS, sin relleno (como la flecha del botón del navbar) ============================================================ */ .visera-hero-final__arrow svg, .vcar-arrow svg, #viseraCigliaProof .vcpr-arrow svg, #viseraPmuGallery .vpg-nav-btn svg { fill: none !important; stroke: currentColor !important; stroke-width: 1.6 !important; stroke-linecap: round !important; stroke-linejoin: round !important; width: 16px !important; height: 16px !important; } /* ============================================================ 32 · CTA "Il primo passo..." — altura auto (con padding) + móvil ============================================================ */ #viseraPmuCta .vpc-banner { height: auto !important; min-height: clamp(320px, 30vw, 420px); } #viseraPmuCta .vpc-copy { padding: clamp(28px, 3.5vw, 48px) !important; } #viseraPmuCta .vpc-image { min-height: clamp(280px, 26vw, 420px) !important; } @media (max-width: 1024px) { #viseraPmuCta .vpc-banner { min-height: 0; } #viseraPmuCta .vpc-image { order: -1; min-height: 240px !important; } } /* ============================================================ 33 · Come funziona — 2 columnas (head izq · timeline der) + animación ============================================================ */ #viseraPmuHow .vph2-inner { display: grid !important; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: clamp(26px, 5vw, 60px); align-items: start; } #viseraPmuHow .vph2-head { text-align: left !important; margin-bottom: 0 !important; } #viseraPmuHow .vph2-steps { display: flex !important; flex-direction: column; gap: 0 !important; position: relative; } #viseraPmuHow .vph2-step { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 18px; align-items: start; padding: 0 0 26px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; position: relative; } #viseraPmuHow .vph2-step:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 48px; bottom: -2px; width: 1px; background: rgba(126,47,62,.2); } #viseraPmuHow .vph2-num { grid-row: 1 / span 2; width: 44px !important; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(126,47,62,.25); background: #fff; color: var(--v-wine) !important; font-size: 15px !important; margin: 0 !important; } #viseraPmuHow .vph2-step h4 { margin: 8px 0 6px !important; align-self: center; } @keyframes vphStepUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } #vtsPanelTrucco.is-active #viseraPmuHow .vph2-step { animation: vphStepUp .6s cubic-bezier(.22,1,.36,1) both; } #vtsPanelTrucco.is-active #viseraPmuHow .vph2-step:nth-child(2) { animation-delay: .12s; } #vtsPanelTrucco.is-active #viseraPmuHow .vph2-step:nth-child(3) { animation-delay: .24s; } @media (max-width: 880px) { #viseraPmuHow .vph2-inner { grid-template-columns: 1fr; } #viseraPmuHow .vph2-head { margin-bottom: 20px !important; text-align: center !important; } } /* ============================================================ 34 · Home hero — precio €59 prominente ============================================================ */ .visera-hero-final__price strong { font-family: 'Montserrat', sans-serif !important; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem) !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: -1px; color: var(--v-hero-wine, #8A2F46) !important; } /* ============================================================ 35 · Trucco — intro + come funziona fusionados en una sola sección ============================================================ */ #viseraPmuHow .vph2-head .vpin-kicker { display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; color: var(--v-wine); margin-bottom: 12px; } #viseraPmuHow .vph2-intro-title { font-family: 'Montserrat', sans-serif; font-size: clamp(1.3rem, 1rem + 1.25vw, 1.7rem) !important; line-height: 1.22 !important; font-weight: 700; color: var(--v-ink); letter-spacing: -.3px; margin: 0; } #viseraPmuHow .vpin-sub { font-size: 14px; color: rgba(17,17,17,.66); line-height: 1.6; margin: 14px 0 0; max-width: 44ch; } #viseraPmuHow .vph2-kicker-2 { margin-top: 26px !important; padding-top: 22px; border-top: 1px solid rgba(126,47,62,.12); } @media (max-width: 880px) { #viseraPmuHow .vpin-sub { max-width: 100%; } #viseraPmuHow .vph2-kicker-2 { display: inline-block; } } #viseraCentersModal .vcm-main-btn i, #viseraCentersModal .vcm-main-btn i::after { background: var(--v-wine); border-color: var(--v-wine); } /* el head ya estaba centrado; reforzamos alineación de tarjetas a la izquierda */ #viseraCentersModal .vcm-card { text-align: left; } /* ============================================================ 42 · Heroes internos (trattamenti/ciglia) · breadcrumb en flujo (evita que la miga de pan se pegue al título) ============================================================ */ /* (revertido: vph-breadcrumb vuelve a su posición original del hero) */ /* ============================================================ 43 · AUDIT-GLOBAL · overflow, jerarquía tipográfica, carruseles ============================================================ */ /* a) Sin scroll horizontal global (clip, NO hidden: preserva position:sticky) */ html{overflow-x:clip} body{overflow-x:clip;max-width:100%} img,svg,video{max-width:100%} /* la única sección de carrusel cuyo ancestro no recortaba el margin negativo */ .visera-progress-section{overflow-x:clip} /* b) Jerarquía editorial: menos negrita en títulos (700 -> 600) */ main.visera-elementor-content h1{font-weight:600 !important} main.visera-elementor-content h2{font-weight:600 !important} /* c) Grids del home con dots inyectados -> carrusel swipe real en móvil */ @media (max-width:767px){ .visera-progress-grid,#viseraAreas .visera-areas__grid{display:flex !important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -18px;padding:4px 18px 16px} .visera-progress-grid::-webkit-scrollbar,#viseraAreas .visera-areas__grid::-webkit-scrollbar{display:none} .visera-progress-grid>*,#viseraAreas .visera-areas__grid>*{flex:0 0 84%;scroll-snap-align:start} } /* ============================================================ 44 · AUDIT-FASE2 · cards consistentes + dots de carrusel globales ============================================================ */ /* a) Radio unificado en la familia de cards de contenido (16px) */ .vm-step,.vsp-card,.vrp-card,.vmp-card,.vpe-card,.vo-card,.va-step,.vc-item,.vms-card,.vcs-card,.vrf-card,.vps-card,.ve-limit,#viseraReportPelle .vrp-item{border-radius:16px !important} /* b) Dots de carrusel GLOBALES (ocultos en desktop, visibles en móvil). Permiten dar afordancia a los grids que ya hacen swipe en interiores. */ .visera-carousel-dots{display:none;justify-content:center;gap:7px;margin-top:16px} @media (max-width:767px){.visera-carousel-dots{display:flex}} .visera-carousel-dots button{position:relative;width:6px;height:6px;padding:0;border:0;border-radius:999px;background:rgba(126,47,62,.25);cursor:pointer;transition:width .28s ease,background .28s ease} .visera-carousel-dots button::after{content:"";position:absolute;inset:-9px} .visera-carousel-dots button.is-active{width:22px;background:var(--v-wine)} /* ============================================================ 45 · AUDIT-FASE3 · ciglia proof + chips + drag carruseles ============================================================ */ /* a) Galería de 2 fotos: 2 columnas (elimina la 3ª columna vacía = el hueco) */ #viseraCigliaProof .vcpr-gallery-2{grid-template-columns:repeat(2,minmax(0,1fr)) !important} /* b) Firma de reseñas centrada (flecha · autore · flecha agrupados) */ #viseraCigliaProof .vcpr-review-bottom{display:flex !important;align-items:center;justify-content:center;gap:16px} #viseraCigliaProof .vcpr-author{white-space:nowrap;text-align:center;margin:0} /* c) Items/chips con icono SVG: texto más pequeño y refinado */ .vph-trust-item{font-size:12px;line-height:1.4} .lh-item span{font-size:12.5px;line-height:1.42} .vcc-benefit,.vc-item{font-size:12.8px} /* d) Drag-to-scroll: cursor + sin snap mientras se arrastra */ [data-vcar-track],.vr-track,#viseraPmuGallery .vpg-track{cursor:grab} .is-dragging{cursor:grabbing !important;scroll-snap-type:none !important;scroll-behavior:auto !important;user-select:none} /* 46 · AUDIT-VISO-BA · Risultati reali viso = 2 before/after */ #viseraRisultati .vr-frame{overflow:visible;height:auto;display:block} @media (min-width:768px){#viseraRisultati .vrs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}} /* 47 · BA-GLOBAL-FASE3 · before/after global (antes solo #vResults) + grid viso */ #viseraRisultati .vrs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)} .vrs-ba{--pos:50%;position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;border:1px solid rgba(126,47,62,.12);box-shadow:0 16px 38px rgba(126,47,62,.07);background:#f0e7e5;user-select:none;touch-action:pan-y} .vrs-ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none} .vrs-ba-top{clip-path:inset(0 calc(100% - var(--pos)) 0 0)} .vrs-ba-divider{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:rgba(255,255,255,.92);transform:translateX(-1px);box-shadow:0 0 0 1px rgba(126,47,62,.22);pointer-events:none} .vrs-ba-divider::after{content:"";position:absolute;top:50%;left:50%;width:38px;height:38px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;border:1px solid rgba(126,47,62,.20);box-shadow:0 6px 18px rgba(126,47,62,.20)} .vrs-ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent} .vrs-ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%;cursor:ew-resize} .vrs-ba-range::-moz-range-thumb{width:44px;height:999px;border:0;background:transparent;cursor:ew-resize} .vrs-ba-tag{position:absolute;top:12px;z-index:3;padding:4px 11px;border-radius:999px;font-family:'Montserrat',sans-serif;font-size:10px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;pointer-events:none} .vrs-ba-tag--prima{left:12px;background:rgba(17,17,17,.5);color:#fff} .vrs-ba-tag--dopo{right:12px;background:rgba(126,47,62,.92);color:#fff} @media (max-width:767px){#viseraRisultati .vrs-grid{grid-template-columns:1fr;max-width:380px;margin-inline:auto}} /* 50 · BA-HANDLE-ARROWS · flechas ◄► dentro del círculo del before/after */ .vrs-ba-divider::after,#vResults .vrs-ba-divider::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12' fill='none' stroke='%237E2F3E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 2 6l4 4'/%3E%3Cpath d='M16 2l4 4-4 4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:20px 11px} /* 51 · PMU-MOBILE-COMPACT · carrusel PMU más compacto en móvil */ @media (max-width:767px){ #viseraPmuGallery .vpg-inner{padding:clamp(34px,7vw,46px) clamp(16px,4vw,24px) !important;gap:22px} #viseraPmuGallery .vpg-slide{flex-basis:132px} #viseraPmuGallery .vpg-nav-btn{display:none !important} #viseraPmuGallery .vpg-section-title{margin-bottom:12px} #viseraPmuGallery .vpg-carousel{padding-bottom:6px} } /* 52 · CIGLIA-FIX-52 · Correzione PMU imagen única + carrusel PMU sin bleed móvil */ #viseraPmuCorrection .vpcr-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} @media (max-width:767px){#viseraPmuGallery .vpg-carousel{overflow:hidden !important}} /* 53 · PMU-NO-HSCROLL-53 · contención total del carrusel PMU (sin scroll horizontal de página) */ #viseraPmuGallery .vpg-lavori,#viseraPmuGallery .vpg-reviews{min-width:0;max-width:100%} #viseraPmuGallery .vpg-carousel{min-width:0;max-width:100%} #viseraPmuGallery .vpg-track{min-width:0;max-width:100%} @media (max-width:767px){ #viseraPmuGallery .vpg-inner{grid-template-columns:1fr !important} #viseraPmuGallery .vpg-carousel{overflow:hidden !important;margin:0 !important} #viseraPmuGallery .vpg-track{overflow-x:auto !important;-webkit-overflow-scrolling:touch} } /* 54 · HERO-BLEED-WIDE-54 · en pantallas grandes la imagen sangra al borde derecho (sin franja vacía) */ @media (min-width:1281px){ #viseraAnalisiPelle .vap-media,#viseraTrattamentoIntro .vti-media{ right:calc((1280px - 100vw) / 2); width:calc(60% + (100vw - 1280px) / 2); } } /* 55 · TITLES-UPPERCASE-NOBREAK-55 · todos los titulos en MAYUSCULAS + sin saltos/cortes feos */ h1,h2,h3,h4,h5,h6, .vpg-section-title,.lh-benefits-title,.ve-list-title,.vgp-focus-title,.vts-minititle,.vms-title-accent{ text-transform:uppercase !important; -webkit-hyphens:none;hyphens:none; word-break:normal; overflow-wrap:break-word; text-wrap:balance; } /* 56 · TITLE-SIZING-56 · titulos de seccion mas justos -> 2 lineas, no 3 */ .vrs-head h2,.vrp-head h2,.vmp-head h2,.vsp-head h2,.vms-head h2,.vos-head h2{ max-width:min(92%,30rem) !important; margin-left:auto;margin-right:auto; text-wrap:balance; } /* 57 · TYPO-HIERARCHY-57 · jerarquia real + sin cortes de palabra */ :root{ --v-h2: clamp(1.1rem, 0.96rem + .72vw, 1.4rem); } .vrp-card h3,.vsp-card h3,.vmp-card h3,.vpe-card h3,.vpe-title h3,.vsp-card .vsp-name,.vmp-card .vmp-name{ font-size:clamp(.82rem,.75rem + .28vw,.95rem) !important; line-height:1.24 !important;letter-spacing:0 !important; } .vfc-dark h2,.vfc-light h2,[class*="-paga"] h3{ font-size:clamp(1.02rem,.92rem + .5vw,1.2rem) !important; line-height:1.26 !important; } /* 57b · VPE-MAXW-FIX · quita el cap max-width:10ch que cortaba PURIFICANTE/RIPARAZIONE (11 letras) */ .vpe-card h3{max-width:none !important} .vpe-card .vpe-card-top{max-width:none} /* 58 · RESULTS-CAROUSEL-58 · before/after de #vResults en carrusel (3 a la vista, responsive, sin overflow) */ #vResults .vrs-carousel{position:relative;min-width:0;max-width:100%} #vResults .vrs-track{display:flex;gap:20px;overflow-x:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%;padding:2px 2px 4px} #vResults .vrs-track::-webkit-scrollbar{display:none} #vResults .vrs-track>.vrs-ba{flex:0 0 calc((100% - 40px) / 3);scroll-snap-align:start;margin:0} @media(max-width:900px){#vResults .vrs-track>.vrs-ba{flex-basis:calc((100% - 20px) / 2)}} @media(max-width:600px){#vResults .vrs-track>.vrs-ba{flex-basis:100%}} #vResults .vcar-arrow{position:absolute;top:0;bottom:42px;margin-block:auto;z-index:5;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(126,47,62,.16);border-radius:50%;background:rgba(255,255,255,.94);color:#7E2F3E;cursor:pointer;box-shadow:0 8px 22px rgba(126,47,62,.14);transition:opacity .2s ease,background .2s ease} #vResults .vcar-arrow:hover{background:#fff} #vResults .vcar-arrow svg{width:18px;height:18px} #vResults .vcar-prev{left:6px} #vResults .vcar-next{right:6px} #vResults .vcar-arrow:disabled{opacity:0;pointer-events:none} #vResults .vcar-dots{display:flex;justify-content:center;gap:8px;margin-top:16px} #vResults .vcar-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(126,47,62,.24);cursor:pointer;transition:width .2s ease,background .2s ease} #vResults .vcar-dots button.is-active{background:#7E2F3E;width:22px;border-radius:4px} /* 59 · RESULTS-FIT-59 · #vResults: .inner border-box (no se sale por el padding) + comparador con clamp en movil */ #vResults .inner{box-sizing:border-box;max-width:100%} #vResults .vrs-ba{max-width:100%} .vrs-ba-img{max-width:none} @media (max-width:600px){ #vResults .vrs-grid{max-width:clamp(240px,82vw,340px);margin-left:auto;margin-right:auto} } /* 60 · SUB-MODAL-ACCORDION-FIX-60 · acordeon Abbonamenti en movil (<=920): colapsar inactivas */ @media (max-width:920px){ /* el max-height lo controla visera-navbar.js inline (a prueba de cascada) */ #viseraSubscriptionModal .vsm-card .vsm-card-content{overflow:hidden !important;display:block !important;transition:max-height .42s ease !important} #viseraSubscriptionModal .vsm-card:not(.is-active) .vsm-card-content{max-height:0} #viseraSubscriptionModal .vsm-card .vsm-card-content-inner{min-height:0 !important} } /* 61 · LUMINOSITA-UPDATE-61 · disclaimer médico + CTA cards + caja pago destacada */ #vEstetica .ve-disclaimer{margin:14px 0 0;font-size:11.5px;line-height:1.5;color:rgba(17,17,17,.46)} #vEstetica .ve-disclaimer a{color:var(--w,#7E2F3E);text-decoration:underline;text-underline-offset:2px} #vPercorsi .vpe-book{font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.4px;color:var(--w,#7E2F3E);text-transform:uppercase} #vPercorsi .vpe-paga--xl{margin-top:8px;padding:clamp(22px,2.4vw,34px);border:1.5px solid rgba(126,47,62,.30);border-radius:18px;background:linear-gradient(135deg,rgba(126,47,62,.07),rgba(214,169,161,.10));box-shadow:0 18px 44px rgba(126,47,62,.12)} #vPercorsi .vpe-paga--xl .vpe-paga-head{align-items:center;gap:14px} #vPercorsi .vpe-paga--xl .vpe-paga-icon{width:46px;height:46px;flex:0 0 46px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--w,#7E2F3E);color:#fff} #vPercorsi .vpe-paga--xl .vpe-paga-icon svg{width:22px;height:22px} #vPercorsi .vpe-paga--xl h3{font-size:clamp(1.05rem,.92rem + .6vw,1.32rem) !important;color:var(--w,#7E2F3E) !important;margin:0} #vPercorsi .vpe-paga--xl .vpe-paga-list{margin-top:12px} /* 62 · LUMINOSITA-PERCORSI-62 · 2 columnas (titulos respiran) + sin Prenota online */ #vPercorsi .vpe-cards--lum{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:clamp(14px,1.4vw,18px)} #vPercorsi .vpe-cards--lum .vpe-card{min-height:0} #vPercorsi .vpe-cards--lum .vpe-card h3{font-size:clamp(1rem,.9rem + .35vw,1.18rem) !important;line-height:1.26 !important;letter-spacing:-.1px !important;max-width:none !important;text-wrap:balance} #vPercorsi .vpe-cards--lum .vpe-num{font-size:clamp(1.7rem,1.2rem + 1.4vw,2.4rem)} #vPercorsi .vpe-cards--lum .vpe-card-bottom{justify-content:flex-end;margin-top:14px} @media (max-width:760px){#vPercorsi .vpe-cards--lum{grid-template-columns:1fr !important}} /* 63 · LUMINOSITA-PERCORSI-POLISH-63 · titulos mas chicos + numero sutil + flecha en circulo */ #vPercorsi .vpe-cards--lum .vpe-card h3{font-size:clamp(.88rem,.8rem + .26vw,.98rem) !important;line-height:1.3 !important;font-weight:600 !important;letter-spacing:.2px !important} #vPercorsi .vpe-cards--lum .vpe-num{font-size:clamp(1.5rem,1.1rem + 1vw,2rem) !important;margin-bottom:14px !important;color:rgba(126,47,62,.22) !important} #vPercorsi .vpe-cards--lum .vpe-card{min-height:0 !important;padding:clamp(20px,2vw,26px) !important} #vPercorsi .vpe-cards--lum .vpe-card-bottom{margin-top:16px !important;justify-content:flex-end !important;align-items:center !important} #vPercorsi .vpe-cards--lum .vpe-arrow{width:38px !important;height:38px !important;margin:0 !important;background:transparent !important;border:1px solid rgba(126,47,62,.26);border-radius:50%;display:grid;place-items:center;transition:background .25s ease,border-color .25s ease} #vPercorsi .vpe-cards--lum .vpe-arrow::after{position:static !important;inset:auto !important;width:8px;height:8px;margin-left:-2px;border-top:1.6px solid var(--w);border-right:1.6px solid var(--w);border-left:0;border-bottom:0;transform:rotate(45deg);transition:border-color .25s ease} #vPercorsi .vpe-cards--lum .vpe-card:hover .vpe-arrow{width:38px !important;background:var(--w) !important;border-color:var(--w)} #vPercorsi .vpe-cards--lum .vpe-card:hover .vpe-arrow::after{border-color:#fff} /* 64 · FOOTER-ACC-VRP-64 · protocolli clickeables + footer acordeon movil */ #vRugheProtocol a.vrp-card{text-decoration:none;color:inherit;cursor:pointer} @media (max-width:760px){ #viseraFooterCompact .vfc-col{border-top:1px solid rgba(255,255,255,.13)} #viseraFooterCompact .vfc-col .vfc-acc-trigger{cursor:pointer;display:flex;align-items:center;justify-content:space-between;margin:0;padding:16px 0} #viseraFooterCompact .vfc-col .vfc-acc-trigger::after{content:'';flex:0 0 auto;width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .3s ease;opacity:.55;margin-left:12px} #viseraFooterCompact .vfc-col.is-open .vfc-acc-trigger::after{transform:rotate(-135deg)} #viseraFooterCompact .vfc-acc-panel{max-height:0;overflow:hidden;transition:max-height .4s ease} #viseraFooterCompact .vfc-col.is-open .vfc-acc-panel{max-height:680px;padding-bottom:16px} } /* 65 · LEGAL-COOKIE-65 · paginas legales + banner cookies */ .visera-legal{padding:calc(var(--nav-h,72px) + clamp(40px,6vw,72px)) clamp(18px,4vw,32px) clamp(60px,8vw,96px)} .visera-legal .vl-inner{max-width:760px;margin:0 auto} .visera-legal .vl-eyebrow{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;letter-spacing:2.6px;color:var(--w,#7E2F3E);margin:0 0 10px} .visera-legal h1{font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem);margin:0 0 8px} .visera-legal .vl-updated{color:#9a8f8c;font-size:13px;margin:0 0 28px} .visera-legal .vl-body{color:#3a3a3a;font-size:15px;line-height:1.75} .visera-legal .vl-body h2{font-size:clamp(1.1rem,.95rem + .6vw,1.35rem) !important;margin:34px 0 10px;color:#1f1f1f} .visera-legal .vl-body h3{font-size:1.02rem !important;margin:20px 0 6px;color:var(--w,#7E2F3E)} .visera-legal .vl-body p{margin:0 0 14px} .visera-legal .vl-body ul{margin:0 0 16px;padding-left:20px} .visera-legal .vl-body li{margin:0 0 8px} .visera-legal .vl-body a{color:var(--w,#7E2F3E);text-decoration:underline;text-underline-offset:2px} .visera-legal .vl-note{margin-top:30px;padding:14px 18px;background:rgba(126,47,62,.05);border-left:3px solid var(--w,#7E2F3E);font-size:13px;color:#777} .vck{position:fixed;left:0;right:0;bottom:0;z-index:9000;background:#fff;border-top:1px solid rgba(126,47,62,.14);box-shadow:0 -8px 30px rgba(126,47,62,.10);padding:16px clamp(16px,4vw,28px);transform:translateY(115%);transition:transform .45s cubic-bezier(.22,1,.36,1)} .vck.is-visible{transform:translateY(0)} .vck-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap} .vck-text{flex:1 1 360px;min-width:0;margin:0;font-size:13px;line-height:1.5;color:#555} .vck-text a{color:var(--w,#7E2F3E);text-decoration:underline} .vck-actions{display:flex;gap:10px;flex:0 0 auto} .vck-btn{font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.3px;padding:11px 22px;border-radius:999px;cursor:pointer;border:1px solid rgba(126,47,62,.3);transition:background .2s ease,color .2s ease} .vck-reject{background:#fff;color:var(--w,#7E2F3E)} .vck-reject:hover{background:rgba(126,47,62,.06)} .vck-accept{background:var(--w,#7E2F3E);color:#fff;border-color:var(--w,#7E2F3E)} .vck-accept:hover{background:#6a2735} @media(max-width:600px){.vck-inner{flex-direction:column;align-items:stretch}.vck-btn{flex:1}} /* 66 · TEXT-PRETTY-66 · textos sin huerfanas/viudas */ p, li, dd, figcaption, .vap-text, .vti-text, .vms-text, blockquote{ text-wrap:pretty } /* 67 · FONT-BASE-67 · fuente base del sitio (evita Times New Roman en contenido sin estilo: legales, blog, etc.) */ body{font-family:var(--v-font-body, 'Inter', sans-serif)} .visera-legal,.visera-legal p,.visera-legal li,.visera-legal .vl-body{font-family:var(--v-font-body, 'Inter', sans-serif)} .visera-legal h1,.visera-legal h2,.visera-legal h3{font-family:var(--v-font-title, 'Montserrat', sans-serif) !important} .vb-single-content,.vb-single-content p,.vb-single-content li{font-family:var(--v-font-body, 'Inter', sans-serif)} .vb-single-content h2,.vb-single-content h3,.vb-single-content h4{font-family:var(--v-font-title, 'Montserrat', sans-serif) !important} .vck-text{font-family:var(--v-font-body, 'Inter', sans-serif)} /* 68 · COMING-SOON-68 · portada temporal full-screen */ body:has(#viseraSoon){padding-top:0 !important} .visera-soon{box-sizing:border-box;position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(40px,8vw,80px) clamp(20px,5vw,40px);overflow:hidden} .visera-soon .vs-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(120% 90% at 50% 0%, #FBF8F5 0%, #F4ECE8 45%, #EBDCDD 100%)} .visera-soon .vs-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 112%, rgba(126,47,62,.16), transparent 70%)} .visera-soon .vs-inner{position:relative;z-index:1;max-width:640px;margin:0 auto} .visera-soon .vs-logo{width:clamp(120px,16vw,158px);height:auto;margin:0 auto clamp(24px,3vw,34px);display:block} .visera-soon .vs-eyebrow{font-family:var(--v-font-title,'Montserrat',sans-serif);font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--w,#7E2F3E);margin:0 0 14px} .visera-soon .vs-title{font-family:var(--v-font-title,'Montserrat',sans-serif) !important;font-size:clamp(2.2rem,1.4rem + 3.5vw,3.6rem) !important;font-weight:700 !important;line-height:1.05;color:#1f1414;margin:0 0 18px} .visera-soon .vs-text{font-family:var(--v-font-body,'Inter',sans-serif);font-size:clamp(15px,1.1vw,17px);line-height:1.65;color:#6a5f5c;margin:0 auto 32px;max-width:520px;text-wrap:pretty} .visera-soon .vs-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:0 0 40px} .visera-soon .vs-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--v-font-title,'Montserrat',sans-serif);font-size:13px;font-weight:600;letter-spacing:.4px;padding:15px 30px;border-radius:999px;text-decoration:none;transition:transform .2s ease,background .2s ease} .visera-soon .vs-btn-primary{background:var(--w,#7E2F3E);color:#fff;box-shadow:0 14px 30px rgba(126,47,62,.22)} .visera-soon .vs-btn-primary:hover{transform:translateY(-2px);background:#6a2735} .visera-soon .vs-btn-primary i{width:18px;height:1.5px;background:#fff;position:relative} .visera-soon .vs-btn-primary i::after{content:'';position:absolute;right:0;top:50%;width:6px;height:6px;border-top:1.5px solid #fff;border-right:1.5px solid #fff;transform:translateY(-50%) rotate(45deg)} .visera-soon .vs-btn-ghost{background:rgba(255,255,255,.62);color:var(--w,#7E2F3E);border:1px solid rgba(126,47,62,.25)} .visera-soon .vs-btn-ghost:hover{background:#fff} .visera-soon .vs-centers{display:flex;gap:clamp(20px,4vw,50px);justify-content:center;flex-wrap:wrap;margin:0 0 26px} .visera-soon .vs-center{display:flex;flex-direction:column;gap:3px} .visera-soon .vs-center strong{font-family:var(--v-font-title,'Montserrat',sans-serif);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--w,#7E2F3E)} .visera-soon .vs-center span{font-size:13px;color:#8a7d7a} .visera-soon .vs-foot{font-size:13px;color:#8a7d7a;display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap} .visera-soon .vs-foot a{color:#6a5f5c;text-decoration:none} .visera-soon .vs-foot a:hover{color:var(--w,#7E2F3E)} .visera-soon .vs-dot{opacity:.4} /* 69 · BLOG-PH-69 · safety net imagenes rotas -> placeholder branded */ .v-noimg{position:relative;min-height:200px;background:linear-gradient(135deg, rgba(214,169,161,.40), rgba(126,47,62,.16))} .v-noimg::after{content:'VISERA';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--v-font-title,'Montserrat',sans-serif);font-size:17px;letter-spacing:4px;font-weight:600;color:rgba(126,47,62,.42);text-transform:uppercase} /* 70 · MICRO-LAYOUT-70 · microneedling: 1-col donde se quitaron cajas + textos nuevos */ #vPercorsi .vpe-layout.vpe-layout--full{grid-template-columns:1fr} #vPercorsi .vpe-layout.vpe-layout--full .vpe-main{max-width:none;width:100%} #vFooterCta .vfc-grid.vfc-grid--solo{grid-template-columns:1fr;max-width:680px;margin-left:auto;margin-right:auto} #vPercorsi .vpe-paga-text{margin:8px 0 14px;font-size:14px;line-height:1.6;color:inherit;opacity:.92} #vMetodo .vm-step-content p{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:#6a5f5c} /* 70b · móvil compartido: compactar benefici del hero en TODAS las páginas */ @media (max-width:768px){ .lh-list{gap:3px !important} .lh-item{min-height:0 !important;padding:7px 2px !important;gap:12px !important;align-items:center !important;background:transparent !important;border:none !important;border-radius:0 !important;box-shadow:none !important;backdrop-filter:none !important} .lh-item.is-wide{grid-column:auto !important} .lh-item span{font-size:12.5px !important;line-height:1.3 !important} .lh-icon{width:28px !important;height:28px !important;flex:0 0 28px !important} .lh-icon svg{width:15px !important;height:15px !important} .lh-benefits-title{margin-bottom:10px !important} } /* 70c · móvil: botón del método DEBAJO de los pasos (display:contents reordena) */ @media (max-width:768px){ #vMetodo .inner{display:flex !important;flex-direction:column !important} #vMetodo .vm-head{display:contents !important} #vMetodo .vm-copy{order:1} #vMetodo .vm-process{order:2} #vMetodo .inner > .visera-carousel-dots{order:3 !important;margin-top:14px !important} #vMetodo .vm-head .vm-btn{order:4;margin-top:18px !important;align-self:center} } /* 70d · móvil: dots de carruseles con más aire (no pegados) */ @media (max-width:768px){ .vcar-dots{margin-top:18px !important} #vResults .vcar-dots, #vPercorsi .vcar-dots{margin-top:18px !important;padding-bottom:2px} } /* 71 · BATCH-71 · modal abbonamenti móvil + heroes vph móvil + trattamenti hide */ @media (max-width:768px){ #vsmTitle{font-size:clamp(1.05rem,5.2vw,1.6rem) !important;line-height:1.18 !important} .vsm-kicker{font-size:10px !important;letter-spacing:2px !important} .vsm-price{font-size:1.5rem !important} .vsm-price small{font-size:.6em !important} .vsm-plan-name{font-size:12.5px !important} .vsm-block-title{font-size:12.5px !important;letter-spacing:1px !important} .vsm-tlist li,.vsm-vlist li,.vsm-block-lead{font-size:12.5px !important;line-height:1.4 !important} #viseraPmuHero .vph-trust{gap:8px !important;margin-top:14px !important} #viseraPmuHero .vph-trust-item{gap:9px !important} #viseraPmuHero .vph-trust-item span{font-size:12.5px !important;line-height:1.3 !important} #viseraPmuHero .vph-trust-icon{width:28px !important;height:28px !important;flex:0 0 28px !important} #viseraPmuHero .vph-trust-icon svg{width:15px !important;height:15px !important} body.visera-page-trattamenti #viseraPmuHero .vph-trust{display:none !important} } /* 71b · disclaimer direzione sanitaria (analisi) */ .vms-disclaimer{margin:24px auto 0;max-width:980px;font-size:12px;line-height:1.55;color:#9b8e8a;text-align:center} .vms-disclaimer a{color:#7E2F3E;text-decoration:underline} /* 72 · PERCORSI-FIX-72 · microneedling percorsi (3 cards en fila + banner 2-col) */ @media(min-width:981px){#vPercorsi .vpe-layout--full .vpe-cards{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(min-width:769px){ #vPercorsi .vpe-paga--banner{display:block} #vPercorsi .vpe-paga-list{display:grid !important;grid-template-columns:1fr !important;gap:10px !important;margin:14px 0 0 !important;max-width:none} } #vPercorsi .vpe-paga--banner .vpe-paga-copy{min-width:0} #vPercorsi .vpe-paga--banner .vpe-paga-text{margin-top:6px} /* 73 · CAROUSEL-DOTS-73 · dots JS consistentes (macchie/microneedling/etc no cargaban su CSS) */ .visera-carousel-dots{display:none} @media(max-width:768px){ .visera-carousel-dots{display:flex;justify-content:center;gap:7px;margin-top:20px} .visera-carousel-dots button{position:relative;width:6px;height:6px;padding:0;border:0;border-radius:999px;background:rgba(126,47,62,.25);cursor:pointer;transition:width .28s ease,background .28s ease} .visera-carousel-dots button::after{content:"";position:absolute;inset:-9px} .visera-carousel-dots button.is-active{width:22px;background:var(--v-wine)} } /* 73b · PERCORSI-DOTS-FORCE · separar dots de las cards (no pegados) */ #vPercorsi .visera-carousel-dots{margin-top:20px !important;margin-bottom:4px !important} #vMetodo .visera-carousel-dots{margin-top:14px !important} /* 74 · DIAGRAM-FIX-74 · flechas + titulo paga + hueco huerfano percorsi */ /* flechas: ocultas cuando deshabilitadas (no se ven desactivadas) */ .vcar-arrow:disabled{opacity:0 !important;pointer-events:none !important} .vcar-arrow{background:#fff !important} /* titulos del box pagamento: proporcionados, no gigantes */ #vPercorsi .vpe-paga h3{font-size:clamp(.88rem,.78rem + .3vw,1rem) !important;line-height:1.32 !important;max-width:38ch;letter-spacing:0 !important} #vPercorsi .vpe-paga--xl h3{font-size:clamp(.92rem,.82rem + .4vw,1.06rem) !important} /* percorsi: la 3a tarjeta de 3 ocupa ancho completo (sin hueco huerfano) */ #vPercorsi .vpe-cards .vpe-card:nth-child(3):last-child{grid-column:1 / -1 !important} @media(min-width:981px){#vPercorsi .vpe-layout--full .vpe-cards .vpe-card:nth-child(3):last-child{grid-column:auto !important}} /* 74b · ARROW-VISIBLE-74b · flechas activas SIEMPRE visibles (no se ven desactivadas) */ #viseraPmuGallery .vcar-arrow:not(:disabled),#vResults .vcar-arrow:not(:disabled),.vpg-carousel .vcar-arrow:not(:disabled),.vrs-carousel .vcar-arrow:not(:disabled),.vcar-arrow:not(:disabled){opacity:1 !important;visibility:visible !important;transition:none !important;animation:none !important} /* 72b · PAGA-LIST-STACK · bullets del box pagamento SIEMPRE apilados (1 columna) */ #vPercorsi .vpe-paga-list{display:grid !important;grid-template-columns:1fr !important;gap:10px !important} #vPercorsi .vpe-paga-list li{margin:0 !important} /* Modals: content scrolls inside the dialog, thin scrollbar, WhatsApp link. */ /* Scroll container */ #viseraSubscriptionModal .vsm-dialog, #viseraCentersModal .vcm-dialog{ display:flex !important; flex-direction:column !important; overflow:hidden !important; max-height:calc(100dvh - clamp(20px,2.8vw,48px)) !important; } #viseraSubscriptionModal .vsm-inner, #viseraCentersModal .vcm-inner{ flex:1 1 auto !important; min-height:0 !important; max-height:none !important; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain; } /* Scrollbar */ #viseraSubscriptionModal .vsm-inner, #viseraCentersModal .vcm-inner{ scrollbar-width:thin; scrollbar-color:rgba(126,47,62,.28) transparent; } #viseraSubscriptionModal .vsm-inner::-webkit-scrollbar, #viseraCentersModal .vcm-inner::-webkit-scrollbar{width:6px} #viseraSubscriptionModal .vsm-inner::-webkit-scrollbar-track, #viseraCentersModal .vcm-inner::-webkit-scrollbar-track{background:transparent} #viseraSubscriptionModal .vsm-inner::-webkit-scrollbar-thumb, #viseraCentersModal .vcm-inner::-webkit-scrollbar-thumb{ background:rgba(126,47,62,.28); border-radius:999px; } #viseraSubscriptionModal .vsm-inner:hover::-webkit-scrollbar-thumb, #viseraCentersModal .vcm-inner:hover::-webkit-scrollbar-thumb{background:rgba(126,47,62,.42)} /* WhatsApp link */ #viseraCentersModal .vcm-actions a.vcm-wa{ color:#1B8F4C !important; background:transparent !important; border:0 !important; } #viseraCentersModal .vcm-actions a.vcm-wa svg{color:#25D366 !important} #viseraCentersModal .vcm-actions a.vcm-wa:hover{color:#146b39 !important;background:transparent !important} /* Centre cards: actions aligned to the bottom edge */ #viseraCentersModal .vcm-card{flex-direction:column !important} #viseraCentersModal .vcm-actions{margin-top:auto !important}