) */ .elementor-widget-text-editor, .elementor-widget-text-editor .elementor-widget-container, .elementor-widget-text-editor * { font-family: var(--f-body) !important; } /* Hero ~100vh (menos la altura del navbar sticky de 112px) */ .hero-section { min-height: calc(100vh - 112px) !important; } /* Wave a ancho completo de viewport (estaba limitada al ancho boxed 1280) */ .hero__wave { left: 50% !important; right: auto !important; width: 100vw !important; transform: translateX(-50%); } /* Hero: proporción exacta de columnas 1.1:1 (como el grid del mockup) y que el widget deco no robe ancho con su gap extra */ .hero__text { flex: 1.1 1 0% !important; width: auto !important; } .hero-section > .e-con-inner > .e-con:not(.hero__text) { flex: 1 1 0% !important; width: auto !important; } .hero-deco { flex: 0 0 0% !important; margin-left: -56px !important; } /* ═══════════════════════════════════════════════════════════════ PROPORCIONES EXACTAS — usar flex (no width%) para que el gap no comprima las columnas. Valores 1:1 con el mockup. ═══════════════════════════════════════════════════════════════ */ /* About: 2 columnas iguales (510px c/u) */ .about__text, .about__photos { flex: 1 1 0% !important; width: auto !important; } /* Servicios: 3 cards iguales (343px) -> imagen vuelve a 457px por aspect-ratio */ .service-card { flex: 1 1 0% !important; width: auto !important; } /* Trust: 4 stats iguales (250px) */ .trust-stat { flex: 1 1 0% !important; width: auto !important; } /* Contacto: columna izq 1.1, derecha 1 (534 / 480) */ .contact__photos { flex: 1 1 0% !important; width: auto !important; } .contact .e-con:has(> .e-con-inner > .contact__title-wrap) { flex: 1.1 1 0% !important; width: auto !important; } /* Proceso: 3 pasos iguales + hijos full-width (título centrado en todo el ancho) */ .process-step { flex: 1 1 0% !important; width: auto !important; align-items: stretch !important; } .process-step__num { margin-left: auto !important; margin-right: auto !important; } /* Quote: texto con max-width 840 centrado (estaba a 1140) */ .quote-section__text { max-width: 840px !important; margin-left: auto !important; margin-right: auto !important; } /* Sub-containers nativos: sacar el padding 10px default de Elementor (se acumula y come ancho) */ .vk-native .e-con, .hero-section .e-con { padding-left: 0 !important; padding-right: 0 !important; } .vk-native .e-con > .e-con-inner { max-width: none !important; } /* re-afirmar el padding intencional del trust-stat (texto inset) */ .trust-stat { padding: 8px 20px !important; } /* Proceso: align-items va en el .e-con-inner para que título/desc ocupen todo el ancho */ .process-step > .e-con-inner { align-items: stretch !important; } /* Proceso: gap 48 entre pasos + padding 0 16px del paso (título->303) */ .process-steps-native { column-gap: 48px !important; } .vk-native .process-step { padding-left: 16px !important; padding-right: 16px !important; } /* Trust: sin gap (los divisores son bordes, no espacios) -> 4 stats de 250 */ .trust-bar .e-con-inner { column-gap: 0 !important; } /* Proceso: el gap real (48) va en el .e-con-inner, no en el .e-con */ .process-steps-native > .e-con-inner { column-gap: 48px !important; } /* ═══════════════════════════════════════════════════════════════ LINE-HEIGHT: estos elementos en el mockup usan 'normal'; Elementor mete su default 1.5 e infla el espaciado. Los volvemos a 'normal'. ═══════════════════════════════════════════════════════════════ */ .section-title, .section-title .elementor-heading-title, .section-label, .section-label *, .hero__tag, .hero__tag *, .hero__credential, .hero__credential *, .chip, .quote-section__author, .quote-section__author .elementor-heading-title, .service-card__title, .service-card__title .elementor-heading-title, .process-step__num, .process-step__num .elementor-heading-title, .trust-label, .trust-label * { line-height: normal !important; } /* FAQ: solo líneas divisorias horizontales (sin la caja/bordes laterales de Elementor) */ .faq .elementor-accordion { border: 0 !important; } .faq .elementor-accordion-item { border: 0 !important; border-bottom: 1px solid rgba(90,150,64,.16) !important; background: transparent !important; } .faq .elementor-accordion-item:first-child { border-top: 1px solid rgba(90,150,64,.16) !important; } .faq .elementor-tab-content { border: 0 !important; background: transparent !important; } /* (el svg/i de FA está display:none; el +/− se dibuja con ::before/::after — ver bloque limpio) */ /* ═══════════════════════════════════════════════════════════════ SISTEMA DE CONTRASTE — más escala en titulares + cuerpo más presente. Evoluciona el diseño hacia algo más premium/atractivo. ═══════════════════════════════════════════════════════════════ */ /* Display headings: más grandes y con tracking editorial */ .hero__h1 { font-size: clamp(40px,5.8vw,78px) !important; letter-spacing:-1.2px !important; line-height:1.02 !important; } .hero__script { font-size: clamp(36px,4.2vw,56px) !important; } .section-title { font-size: clamp(34px,3.6vw,50px) !important; } .about__h2 .elementor-heading-title { font-size: 54px !important; letter-spacing:-.5px !important; } .contact__h2 .elementor-heading-title { font-size: 60px !important; letter-spacing:-.5px !important; } .quote-section__text .elementor-heading-title { font-size: clamp(30px,3.8vw,52px) !important; } .service-card__title .elementor-heading-title { font-size: 22px !important; } /* Cuerpo: más oscuro y presente (más contraste con el fondo) */ .hero__p, .hero__p * { color:var(--black) !important; font-weight:400 !important; font-size:16px !important; } .about__p, .about__p * { color:var(--black) !important; font-weight:400 !important; } .service-card__desc, .service-card__desc * { color:var(--black) !important; } .process-step__desc, .process-step__desc * { color:var(--black) !important; } .faq .elementor-tab-content { color:var(--black) !important; } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE MOBILE/TABLET — apilar las columnas de las secciones nativas (el responsive del mockup apunta a su grid, no a Elementor) ═══════════════════════════════════════════════════════════════ */ @media (max-width: 880px) { /* Apilar todos los flex-row de secciones nativas a columna */ .hero-section > .e-con-inner, .about > .e-con-inner > .e-con > .e-con-inner, .services > .e-con-inner > .e-con > .e-con-inner, .process-steps-native > .e-con-inner, .contact > .e-con-inner > .e-con > .e-con-inner { flex-direction: column !important; } /* Columnas a ancho completo */ .hero__text, .about__text, .about__photos, .service-card, .process-step, .contact__photos, .hero-section > .e-con-inner > .e-con, .contact > .e-con-inner > .e-con > .e-con-inner > .e-con { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; } /* gaps verticales al apilar */ .hero-section > .e-con-inner { gap: 24px !important; } .process-steps-native > .e-con-inner { row-gap: 40px !important; } .process-steps-native::before { display: none !important; } /* línea conectora off */ /* Padding lateral más chico en mobile */ .vk-native, .hero-section { padding-left: 24px !important; padding-right: 24px !important; } /* Trust: 2x2 */ .trust-bar .e-con-inner { flex-direction: row !important; flex-wrap: wrap !important; row-gap: 24px !important; } .trust-stat { flex: 1 1 45% !important; width: 45% !important; } .trust-stat:nth-child(2n) { border-right: none !important; } /* About: la columna de fotos centrada y con menos alto */ .about__photos { display: flex; justify-content: center; } /* Hero un poco menos alto en mobile (el contenido manda) */ .hero-section { min-height: auto !important; padding-top: 48px !important; padding-bottom: 64px !important; } } /* Mobile — refinamientos: evitar overflow horizontal y ajustar deco */ @media (max-width: 880px) { /* clip (no 'hidden') en html/body: clipea el scroll horizontal sin crear contenedor de scroll, así el navbar position:sticky sigue funcionando en mobile */ html, body { overflow-x: clip !important; } /* (el tamaño/posición mobile del watermark se maneja abajo en el bloque TYPOGRAPHY V3 mobile — acento in-flow 28px) */ .quote-section__text, .quote-section__text .elementor-heading-title, .hero__p, .hero__p * { max-width: 100% !important; } /* menos padding vertical en secciones grandes */ .about, .services, .process, .contact, .faq { padding-top: 64px !important; padding-bottom: 64px !important; } .quote-section { padding-top: 80px !important; padding-bottom: 72px !important; } /* about: alto de la composición de fotos más chico y centrado */ .about__photos { height: 360px !important; } } @media (max-width: 480px) { .about__photos { height: 300px !important; } .trust-stat { flex: 1 1 100% !important; width: 100% !important; border-right: none !important; } } /* FAQ: el toggle +/− se define más abajo (bloque "ICONO ACCORDION limpio"). */ /* ═══════════════════════════════════════════════════════════════ FUENTES CHICAS — tamaños base de labels/eyebrows (los de body/cards/FAQ/chips se definen más abajo en TYPOGRAPHY V2) ═══════════════════════════════════════════════════════════════ */ .section-label, .section-label * { font-size: 12px !important; } .hero__tag, .hero__tag * { font-size: 12px !important; } .hero__credential, .hero__credential * { font-size: 13px !important; } /* ═══════════════════════════════════════════════════════════════ FAQ ÍCONO — ocultar los SVG de Elementor (+/−) y dibujar un + propio con CSS que rota 45° a × al abrir. Limpio y 1:1 con el mockup. ═══════════════════════════════════════════════════════════════ */ .faq .elementor-accordion-icon svg, .faq .elementor-accordion-icon i { display: none !important; } .faq .elementor-accordion-icon { position: relative !important; display: inline-flex !important; align-items: center; justify-content: center; width: 28px !important; height: 28px !important; border-radius: 50% !important; border: 1.5px solid var(--green-dark) !important; background: transparent !important; flex-shrink: 0; transform: none !important; transition: background .3s ease, border-color .3s ease !important; } .faq .elementor-accordion-icon::before, .faq .elementor-accordion-icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--green-dark); border-radius: 2px; transition: background .3s ease, opacity .3s ease, transform .3s ease; } .faq .elementor-accordion-icon::before { width: 12px; height: 2.4px; transform: translate(-50%,-50%); } /* barra horizontal */ .faq .elementor-accordion-icon::after { width: 2.4px; height: 12px; transform: translate(-50%,-50%); } /* barra vertical */ /* abierto: círculo verde lleno + "−" limpio (se oculta la barra vertical, sin rotar -> sin cruz) */ .faq .elementor-tab-title.elementor-active .elementor-accordion-icon { background: var(--green-dark) !important; border-color: var(--green-dark) !important; transform: none !important; } .faq .elementor-tab-title.elementor-active .elementor-accordion-icon::before { background: #fff; } .faq .elementor-tab-title.elementor-active .elementor-accordion-icon::after { background: #fff; opacity: 0; transform: translate(-50%,-50%) scaleY(0); } /* ═══════════════════════════════════════════════════════════════ POLISH UI/UX — micro-interacciones, profundidad, foco, color (buenas prácticas: hover/press feedback, focus visible, 200-300ms) ═══════════════════════════════════════════════════════════════ */ /* Transiciones suaves en todo lo interactivo */ .elementor-button, .nav-links a, .nav-cta, .footer-nav a, .footer-social-btn, .ig-card, .service-card, .testimonial-card, .float-btn, .contact__wa, .chip, .faq .elementor-tab-title, .process-step__num { transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .2s ease, border-color .2s ease; } /* (hover/lift/sombra de los botones nativos: unificado abajo en el bloque BOTONES) */ /* Service cards: lift sutil al hover (refuerza la profundidad) */ .service-card:hover { transform: translateY(-6px); } /* Chips: leve realce al hover */ .chip:hover { background: var(--green) !important; color: #fff !important; } /* FAQ: hover de la pregunta en verde */ .faq .elementor-tab-title:not(.elementor-active):hover { color: var(--green-dark) !important; } /* (hover del ícono cerrado: el borde ya es green-dark por defecto, no hace falta regla extra) */ /* Focus visible (accesibilidad — prioridad 1) */ a:focus-visible, button:focus-visible, .elementor-button:focus-visible, input:focus-visible, textarea:focus-visible, .elementor-tab-title:focus-visible { outline: 2px solid var(--pink-dark) !important; outline-offset: 3px; border-radius: 4px; } /* Profundidad: sombras un poco más ricas y consistentes en cards */ .testimonial-card { box-shadow: 0 12px 44px rgba(212,105,154,.12) !important; } /* ═══════════════════════════════════════════════════════════════ ESTILO INSTAGRAM — cards con borde fino + rotación, hero chips tipo sticker, y más verde de acento. Alineado al feed. ═══════════════════════════════════════════════════════════════ */ /* Hero chips = stickers IG: borde oscuro, texto negro bold, sombra dura, rotados. La rotación se mantiene también en mobile (el reset de .ig-card/.testimonial-card NO los toca). */ .hero__chip { border: 1.5px solid var(--black) !important; color: var(--black) !important; font-weight: 700 !important; box-shadow: 2px 3px 0 rgba(39,39,39,.85) !important; } .hero__chip--1 { transform: rotate(-5deg) !important; } .hero__chip--2 { transform: rotate(3deg) !important; } .hero__chip--3 { transform: rotate(-2deg) !important; } .hero__chip--4 { transform: rotate(4deg) !important; } /* Service cards: arco con borde fino oscuro (look cuaderno) */ .service-card__img { border: 1.6px solid var(--black) !important; } /* Instagram cards: borde oscuro fino + rotación alternada, se enderezan al hover */ .ig-card { border: 1.6px solid var(--black) !important; transition: transform .3s ease, box-shadow .3s ease !important; } .ig-card:nth-child(3n+1) { transform: rotate(-1.6deg); } .ig-card:nth-child(3n+2) { transform: rotate(1.1deg); } .ig-card:nth-child(3n) { transform: rotate(-.7deg); } .ig-card:hover { transform: rotate(0deg) translateY(-6px) !important; box-shadow: 6px 8px 0 rgba(39,39,39,.12) !important; } /* Testimonial card: borde fino oscuro + rotación sutil que se endereza al hover */ .testimonial-card { border: 1.6px solid var(--black) !important; transform: rotate(-1.2deg); } .testimonial-card:hover { transform: rotate(0deg) translateY(-6px); } /* Más VERDE de acento */ .process-step__num { color: var(--green-dark) !important; border: 2.5px solid var(--green) !important; } .section-label { color: var(--green-dark) !important; font-weight: 700 !important; } /* acento: guion verde antes del eyebrow */ .section-label .elementor-widget-container::before { content: ''; display:inline-block; width:24px; height:2px; background:var(--green-dark); vertical-align:middle; margin-right:10px; } /* Mobile: enderezar solo las cards (evita desorden/overflow). Los hero__chip MANTIENEN la rotación sticker también en mobile (decisión de diseño). */ @media (max-width: 880px) { .ig-card, .testimonial-card { transform: none !important; } } /* ═══════════════════════════════════════════════════════════════ MOBILE FIXES v2 — títulos grandes que se cortan, trust, fotos ═══════════════════════════════════════════════════════════════ */ @media (max-width: 880px) { /* Títulos enlargados por el contraste: bajarlos para que entren */ .about__h2 .elementor-heading-title { font-size: 40px !important; } .contact__h2 .elementor-heading-title { font-size: 44px !important; } .quote-section__text .elementor-heading-title { font-size: 27px !important; line-height: 1.5 !important; } /* Trust: una columna (el 2x2 quedaba apretado), número arriba + label abajo */ .trust-bar .e-con-inner { flex-direction: column !important; flex-wrap: nowrap !important; } .trust-stat { flex: 1 1 100% !important; width: 100% !important; border-right: none !important; border-bottom: 1px solid rgba(90,150,64,.18) !important; padding: 14px 0 !important; } .trust-stat:last-child { border-bottom: none !important; } /* About/Contact fotos: contener y escalar para que no se desborden */ .about__photos, .contact__photos { transform: scale(.82); transform-origin: center; margin: 0 auto; } } @media (max-width: 480px) { .about__h2 .elementor-heading-title { font-size: 34px !important; } .contact__h2 .elementor-heading-title { font-size: 38px !important; } } /* Mobile — fotos placeholder: contener (about = solo arco principal centrado) */ @media (max-width: 880px) { .about__photos { transform: none !important; height: 300px !important; overflow: hidden; } .about__photos .photo-arch--main { width: 190px !important; height: 250px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; top: 10px !important; } .about__photos .photo-arch--back { display: none !important; } .contact__photos { transform: scale(.78) !important; transform-origin: top center !important; overflow: hidden !important; } } /* Service cards clickeables (link overlay a WhatsApp) */ .service-card { position: relative !important; } .service-card .card-wa-overlay { position: absolute; inset: 0; z-index: 6; display: block; } /* El widget HTML que contiene el overlay -> static, para que el overlay cubra la card */ .service-card .elementor-widget-html:has(.card-wa-overlay), .service-card .elementor-widget-html:has(.card-wa-overlay) > .elementor-widget-container { position: static !important; } /* ═══════════════════════════════════════════════════════════════ POLISH V2 — textura, calidez y profundidad (research 2026) Eleva el diseño manteniendo la identidad verde/rosa. ═══════════════════════════════════════════════════════════════ */ /* (El negro cálido --black/--charcoal vive ahora en el :root único de vicky-mockup.css) */ /* Grano sutil tipo papel/film (premium, no sterile) */ body::after { content:''; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.04; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Sombras tintadas en capas (en vez de negro duro plano) */ .service-card__img { box-shadow: 0 1px 2px rgba(39,39,39,.04), 0 10px 28px rgba(90,150,64,.12), 0 24px 50px rgba(39,39,39,.07) !important; } /* Testimonial card = MISMO estilo sticker que los badges del hero (.hero__chip): borde charcoal + sombra dura offset (sin blur) */ .testimonial-card { box-shadow: 7px 8px 0 0 rgba(39,39,39,.8) !important; } .testimonial-card:hover { box-shadow: 4px 5px 0 0 rgba(39,39,39,.8) !important; } /* al levantarse, la sombra se "pega" un poco (efecto sticker que se despega) */ .ig-card:hover { box-shadow: 6px 8px 0 rgba(39,39,39,.10) !important; } /* Outlines más cálidos (no negro puro) */ .hero__chip { border-color: rgba(39,39,39,.9) !important; box-shadow: 2px 3px 0 rgba(39,39,39,.82) !important; } .service-card__img, .ig-card { border-color: rgba(39,39,39,.72) !important; } .testimonial-card { border-color: rgba(39,39,39,.9) !important; } /* borde nítido como el badge */ /* Glow rosa suave detrás del arco del hero (femenino/premium) */ .hero__photo { position: relative; } .hero__photo::before { content:''; position:absolute; left:50%; top:50%; width:115%; height:90%; transform:translate(-50%,-50%); z-index:0; pointer-events:none; background:radial-gradient(closest-side, rgba(212,105,154,.20), transparent 72%); filter:blur(40px); } .hero__arch { z-index:1; } /* chips/scroll SIEMPRE delante del arco (el glow no los debe tapar) */ .hero__chip { z-index:4 !important; } .hero__scroll { z-index:4; } /* ═══════ Fondos de sección (tokens de la paleta única) ═══════ */ .hero-section { background-color:var(--green) !important; } .trust-bar { background-color:var(--green-bg) !important; } .services, .contact { background-color:var(--cream) !important; } .faq { background-color:var(--green-bg) !important; } .quote-section { background-color:var(--black) !important; } /* charcoal cálido (sin verde extra) */ .section-label, .section-label * { color:var(--green-deep) !important; letter-spacing:2px !important; } /* verde más oscuro + menos tracking = lee AA (antes #5A9640 daba ~3.3:1) */ .section-label .elementor-widget-container::before { background:var(--green-deep) !important; } /* dash verde de marca */ /* Scripts cursivos SOBRE FONDO CLARO: rosa medio sólido (--pink-mid) — lee mejor que el degradé clip:text (que en claro quedaba lavado y cortaba glifos). Sombra sutil = define los trazos finos. (El autor de la cita NO va acá: está sobre oscuro y usa rosa suave — ver bloque "Cita: firma".) ("Mis imprescindibles" tampoco: usa la pill del hero — ver bloque ".vk-rec__script" abajo.) (About/Contacto watermarks tampoco: about se quitó, contacto es fantasma — ver bloque abajo.) */ .instagram__sub { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: var(--pink-mid) !important; color: var(--pink-mid) !important; text-shadow: 0 1px 1px rgba(140,40,90,.22) !important; opacity: 1 !important; line-height: 1.4 !important; } /* ── Cita: firma "Victoria Villa" (rosa suave sobre el charcoal — alto contraste, elegante) + credencial ── */ .quote-section__author { opacity: 1 !important; /* el mockup la atenuaba a .8 */ margin-top: 24px !important; /* más aire respecto del manifiesto */ } .quote-section__author .elementor-heading-title { background: none !important; -webkit-text-fill-color: var(--pink) !important; color: var(--pink) !important; text-shadow: none !important; opacity: 1 !important; font-size: 36px !important; /* un toque más chica (el nombre completo entra elegante) */ letter-spacing: .03em !important; /* la cursiva, sin apretar */ line-height: 1.15 !important; } .quote-section__author::after { content: "Lic. en Nutrición · MN 11721"; display: block; margin-top: 12px; font-family: "DM Sans", system-ui, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.7); /* legible sobre oscuro */ } .process-step__num { color:var(--green-dark) !important; border-color:var(--green) !important; } /* Arco del hero + cards rosa: el MISMO gradiente */ .hero__arch { background:var(--grad-pink) !important; } .service-card__img--2 { background:var(--grad-pink) !important; } /* Photo-arch (placeholders): override de strokes del SVG a colores de marca (tokens) */ .photo-arch--main svg *, .photo-arch--main svg { stroke: var(--pink-deep) !important; } .photo-arch--back svg *, .photo-arch--back svg { stroke: var(--green-dark) !important; } /* dorado de acento: hairline bajo los títulos de sección */ .section-title { position:relative; } /* Mobile: el wave/scroll del hero deben anclar a .hero-section (no al .e-con-inner, que es más corto por el padding-bottom -> el wave quedaba colgado) */ @media (max-width: 880px) { .hero-section > .e-con-inner { position: static !important; } .hero-section { padding-bottom: 0 !important; } } /* ============================================================================ TYPOGRAPHY V2 — legibilidad y jerarquía (referencia: agustaquini.com) - Texto de lectura más firme (peso 400) y más grande (16px), lh generoso. - Subir lo que estaba chico: títulos de cards, FAQ, botones, etiquetas. - Aflojar el interlineado del hero (estaba 1.02 -> muy apretado). ============================================================================ */ /* 1) TEXTO DE LECTURA: peso 400 + 16px + interlineado 1.65 (antes 300/14.5-15) */ .about__p, .about__p *, .service-card__desc, .service-card__desc *, .process-step__desc, .process-step__desc *, .faq .elementor-tab-content, .faq .elementor-tab-content *, .testimonials .elementor-widget-text-editor, .testimonials .elementor-widget-text-editor * { font-weight: 400 !important; font-size: 16px !important; line-height: 1.65 !important; } /* hero párrafo ya era 16/400: sólo respiramos el interlineado */ .hero__p, .hero__p * { line-height: 1.6 !important; } /* inputs de contacto: 16px evita el zoom automático de iOS */ .contact .elementor-field-textual { font-size: 16px !important; font-weight: 400 !important; } /* 2) TÍTULOS DE SERVICE CARDS: 22 -> 27 */ .service-card__title .elementor-heading-title { font-size: 27px !important; line-height: 1.15 !important; } /* 3) FAQ: pregunta 15.5 -> 18 (la respuesta ya sube a 16 en el bloque 1) */ .faq .elementor-tab-title { font-size: 18px !important; } /* 4) BOTONES: 12.5 -> 14 (todas las variantes) */ .btn-filled .elementor-button, .btn-outline-dark .elementor-button, .btn-primary .elementor-button, .btn-pink .elementor-button, .contact .elementor-button { font-size: 14px !important; } /* 5) HERO H1: aflojar interlineado 1.02 -> 1.1 (sobre todo mobile, 3 líneas) */ .hero__h1 { line-height: 1.1 !important; } /* 6) PISO DE ETIQUETAS CHICAS: subir 11px -> 12px y el sub-logo 9 -> 10.5 */ .chip, .hero__chip { font-size: 12px !important; } .logo__sub, .footer-logo__sub { font-size: 10.5px !important; } /* MOBILE: mantener el cuerpo legible (16px) y aflojar headings apretados */ @media (max-width: 880px) { .about__p, .about__p *, .service-card__desc, .service-card__desc *, .process-step__desc, .process-step__desc *, .faq .elementor-tab-content, .faq .elementor-tab-content * { font-size: 16px !important; } .hero__h1 { line-height: 1.12 !important; } /* FIX service cards mobile: con aspect-ratio 4/3 la imagen pasaba a ~245px y desbordaba su contenedor Elementor (~77px), tapando título y descripción. Imagen con altura contenida + el wrapper crece para contenerla. */ .service-card__img { aspect-ratio: auto !important; height: 180px !important; } .service-card .elementor-element:has(> .service-card__img) { height: auto !important; min-height: 0 !important; } .service-card > .e-con-inner { row-gap: 10px !important; } } /* ============================================================================ TRUST BAR — banda grande con texto chico (feedback del usuario). Números con más presencia, y en mobile 2×2 CENTRADO y compacto (antes 1 columna bajo 480px -> banda de ~692px casi vacía). ============================================================================ */ .trust-num { font-size: 36px !important; } .trust-label, .trust-label * { font-size: 14px !important; } @media (max-width: 880px) { .trust-bar .e-con-inner { flex-direction: row !important; flex-wrap: wrap !important; row-gap: 30px !important; column-gap: 0 !important; } .trust-stat { flex: 1 1 50% !important; width: 50% !important; border-right: none !important; border-bottom: none !important; padding: 12px 10px !important; } .trust-stat > .e-con-inner { flex-direction: column !important; align-items: center !important; } .trust-num, .trust-label { width: 100% !important; text-align: center !important; } .trust-num .elementor-heading-title { text-align: center !important; } .trust-stat:nth-child(odd) { border-right: 1px solid rgba(90,150,64,.20) !important; } } /* ============================================================================ RECOMENDADOS — grilla de productos afiliados (shortcode [vk_recomendados]). Estilo alineado a la home (Cormorant + DM Sans + Great Vibes, sage/rosa/crema). ============================================================================ */ .vk-rec { background: var(--cream, var(--cream)); padding-bottom: 96px; } .vk-rec__head { text-align:center; max-width:760px; margin:0 auto; padding:72px 24px 36px; } .vk-rec__eyebrow { font-family:var(--f-body); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--green-deep); display:inline-flex; align-items:center; gap:10px; } .vk-rec__eyebrow::before, .vk-rec__eyebrow::after { content:''; width:24px; height:2px; background:var(--green-deep); } /* "Mis imprescindibles" = MISMA pill cursiva del hero (repite el motivo + lee sobre el verde claro) */ .vk-rec__script { display:block; width:fit-content; margin:16px auto 6px; font-family:var(--f-script,'Great Vibes',cursive); font-size:42px; -webkit-text-fill-color:var(--pink-mid); color:var(--pink-mid); line-height:1.3; background:rgba(255,255,255,.96); padding:4px 28px 9px; border-radius:999px; text-shadow:0 1px 1px rgba(140,40,90,.28); } .vk-rec__title { font-family:var(--f-display); font-size:56px; font-weight:600; line-height:1.08; letter-spacing:-.5px; color:var(--black,var(--black)); } .vk-rec__intro { font-family:var(--f-body); font-size:17px; font-weight:400; line-height:1.7; color:var(--text); margin-top:18px; } .vk-rec__disclosure { font-family:var(--f-body); font-size:13px; font-style:italic; color:var(--muted); margin-top:22px; line-height:1.5; } .vk-rec__grid { max-width:1180px; margin:0 auto; padding:24px 40px 96px; display:grid; grid-template-columns:repeat(3,1fr); gap:38px 32px; } .vk-rec__card { background:#fff; border:1px solid rgba(39,39,39,.08); border-radius:22px; padding:18px 18px 22px; display:flex; flex-direction:column; text-align:left; box-shadow:0 1px 2px rgba(39,39,39,.04), 0 12px 30px rgba(90,150,64,.08); transition:transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s; } .vk-rec__card:hover { transform:translateY(-6px); box-shadow:0 2px 4px rgba(39,39,39,.05), 0 22px 48px rgba(90,150,64,.16); } .vk-rec__img { position:relative; width:100%; aspect-ratio:4/5; border-radius:16px; margin-bottom:16px; overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid rgba(39,39,39,.10); background:linear-gradient(165deg,var(--green-bg),var(--green-light)); } .vk-rec__img img { width:100%; height:100%; object-fit:cover; } .vk-rec__ph { font-family:var(--f-body); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:rgba(39,39,39,.32); } /* Código = MISMO badge/sticker del hero (.hero__chip): blanco + borde charcoal + sombra dura offset */ .vk-rec__code { position:absolute; top:12px; left:12px; z-index:2; background:#fff; color:var(--black); border:1px solid rgba(39,39,39,.9); font-family:var(--f-body); font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:6px 13px; border-radius:999px; box-shadow:2px 3px 0 0 rgba(39,39,39,.82); } .vk-rec__brand { font-family:var(--f-body); font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--green-dark); margin-bottom:6px; } .vk-rec__name { font-family:var(--f-display); font-size:25px; font-weight:600; line-height:1.15; margin-bottom:8px; color:var(--black,var(--black)); } .vk-rec__why { font-family:var(--f-body); font-size:15px; font-weight:400; line-height:1.6; color:var(--text); flex:1 1 auto; margin-bottom:18px; } .vk-rec__btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; align-self:flex-start; font-family:var(--f-body); font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; text-decoration:none; padding:12px 24px; border-radius:999px; background:var(--green-cta); color:#fff; transition:.2s; } .vk-rec__btn:hover { background:var(--green-deep); transform:translateY(-2px); color:#fff; box-shadow:0 8px 20px rgba(90,150,64,.3); } @media (max-width:900px){ .vk-rec__title { font-size:42px; } .vk-rec__grid { grid-template-columns:repeat(2,1fr); gap:28px 22px; padding:24px 22px 72px; } } @media (max-width:560px){ .vk-rec__grid { grid-template-columns:1fr; max-width:380px; } .vk-rec__title { font-size:38px; } .vk-rec__img { aspect-ratio:1/1; } /* foto cuadrada en phone (era 4/5 → 366px, card altísima) */ } /* ============================================================================ NAVBAR STICKY EN LA HOME — el navbar está dentro de un widget HTML / contenedor de Elementor de ~80px, y position:sticky solo "viaja" dentro de su contenedor. Con display:contents quitamos la caja de esos wrappers para que el navbar ascienda al contenedor alto de la página y el sticky funcione (desktop y mobile). El selector :has() solo matchea cuando el navbar vive en un widget HTML (la home); en las páginas PHP (/recomendados/, etc.) el navbar es hijo del body y no matchea. ============================================================================ */ .e-con:has(> .elementor-widget-html > .navbar), .elementor-widget-html:has(> .navbar) { display: contents !important; } /* ============================================================================ RECOMENDADOS — variante TEASER (franja en la home: header compacto + 3 cards + botón) ============================================================================ */ .vk-rec--teaser .vk-rec__head { padding-top: 80px; padding-bottom: 30px; } .vk-rec--teaser .vk-rec__title { font-size: 46px; } .vk-rec--teaser .vk-rec__grid { padding-bottom: 34px; } .vk-rec__more { text-align: center; padding: 0 24px 88px; } .vk-rec__cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-body); font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; padding: 15px 40px; border-radius: 999px; background: var(--green-cta); color: #fff; transition: background .2s ease, transform .2s ease; } .vk-rec__cta:hover { background: var(--green-deep); transform: translateY(-2px); color: #fff; box-shadow:0 8px 20px rgba(90,150,64,.3); } @media (max-width: 900px){ .vk-rec--teaser .vk-rec__title { font-size: 38px; } } .vk-rec--teaser { background: var(--green-bg, #EEF7E4) !important; } /* Mobile: la pastilla .section-title (inline-block) con palabras largas de una sola pieza (ej. "TESTIMONIOS") se pasaba del viewport. Achico el padding lateral + max-width de red. */ @media (max-width: 880px) { .section-title { max-width: 100% !important; padding-left: 26px !important; padding-right: 26px !important; } } /* ============================================================================ ANIMACIONES SUTILES (respetan prefers-reduced-motion) ============================================================================ */ @keyframes vkFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Fade-in con stagger de cards de grilla. SOLO opacidad (keyframe) -> no toca transform, así no pelea con el hover (lift) de las cards. */ .vk-fade { opacity: 0; } .vk-fade.is-visible { animation: vkFadeIn .6s ease both; } .vk-rec__grid .vk-fade:nth-child(2).is-visible, .services .vk-fade:nth-child(2).is-visible { animation-delay: .12s; } .vk-rec__grid .vk-fade:nth-child(3).is-visible, .services .vk-fade:nth-child(3).is-visible { animation-delay: .24s; } /* Micro-hover en los chips sticker del hero: escala + se enderezan + sombra un toque mayor */ .hero__chip { transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s ease !important; } .hero__chip:hover { transform: scale(1.07) !important; box-shadow: 3px 5px 0 rgba(39,39,39,.9) !important; } @media (prefers-reduced-motion: reduce) { .vk-fade { opacity: 1 !important; animation: none !important; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .hero__chip { transition: none !important; animation: none !important; } } /* Float sutil de los chips del hero. Uso 'translate' independiente (se compone con el transform:rotate del tilt y el scale del hover, sin pisarse). Stagger por animation-delay negativo para que no floten al unísono; se pausa al hover. */ @keyframes vkChipFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } } .hero__chip { animation: vkChipFloat 4s ease-in-out infinite; } .hero__chip--2 { animation-delay: -1s; } .hero__chip--3 { animation-delay: -2s; } .hero__chip--4 { animation-delay: -3s; } .hero__chip:hover { animation-play-state: paused; } /* Hero pills en ≤960px: misma estética blanca pero en FILA CENTRADA bajo el arco. (Flotando no entran en pantallas angostas → en phone se ocultaban, en tablet quedaban sueltos.) */ @media (max-width: 960px) { .hero__photo { display: block !important; text-align: center !important; } .hero__arch { margin: 0 auto 16px !important; } .hero__chip { display: inline-flex !important; position: static !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; margin: 4px 3px !important; font-size: 11px !important; animation: none !important; transform: rotate(-1.5deg) !important; } .hero__chip--2 { transform: rotate(2deg) !important; } .hero__chip--4 { transform: rotate(1.5deg) !important; } } /* Tilt sticker en los chips de código de Recomendados (ata ese bloque al lenguaje del hero) */ .vk-rec__code { transform: rotate(-5deg); } /* ============================================================================ TYPOGRAPHY V3 — escala unificada (reduce ~23 tamaños dispersos a una escala coherente) Roles: H1 78 · títulos sección 50 · watermark 64 · stats 36 · card titles 26 · lead 18 · body 16 · nav/botón 14 · footer-title 13 · eyebrow/label 12 · mínimo 11 ============================================================================ */ /* Títulos de sección -> 50 (estaban dispersos en 46/54/60) */ .about__h2, .about__h2 .elementor-heading-title, .contact__h2, .contact__h2 .elementor-heading-title, .instagram__title, .instagram__title .elementor-heading-title { font-size: 50px !important; } .vk-rec--teaser .vk-rec__title { font-size: 50px !important; } /* About: el ex-"Conoceme" se reconvierte en EYEBROW "— SOBRE MÍ —" (como el resto de las secciones, así el header deja de sentirse "colgado"). Mismo look que .section-label / .vk-rec__eyebrow. */ .about__watermark { display: inline-flex !important; align-items: center; gap: 10px; position: static !important; font-family: var(--f-body) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; line-height: normal !important; -webkit-text-fill-color: var(--green-deep) !important; color: var(--green-deep) !important; text-shadow: none !important; opacity: 1 !important; margin: 0 0 14px !important; white-space: nowrap; } .about__watermark::before { content: ''; width: 24px; height: 2px; background: var(--green-deep); flex: 0 0 auto; } /* Contacto: "Escribime" vuelve a watermark FANTASMA detrás de "Contacto" (efecto sombra suave que le gustaba) */ .contact__watermark { position: absolute !important; display: block !important; font-size: 64px !important; top: 4px !important; left: -4px !important; /* centrado detrás de "Contacto" (la base de Great Vibes es baja; en +16 caía debajo) */ z-index: 0 !important; opacity: .3 !important; /* fantasma, no sólido */ -webkit-text-fill-color: var(--pink-mid) !important; color: var(--pink-mid) !important; text-shadow: none !important; line-height: 1 !important; white-space: nowrap; pointer-events: none; } /* Nombre dentro del H2 del about: cursiva de firma (Great Vibes) en rosa, agrandada p/ pesar igual que el serif */ .vk-name { color: var(--pink-deep) !important; -webkit-text-fill-color: var(--pink-deep) !important; font-family: var(--f-script,'Great Vibes',cursive) !important; font-weight: 400 !important; font-size: 1.4em !important; line-height: 1.05 !important; display: block !important; /* "Victoria Villa" entera en su propio renglón (saludo + firma) */ white-space: nowrap; margin-top: 2px; } /* Títulos de card -> 26 (servicios 27 + recomendados 25) */ .service-card__title .elementor-heading-title { font-size: 26px !important; } .vk-rec__name { font-size: 26px !important; } /* Lead 18 / body 16 (snap del teaser intro 17 y card desc 15) */ .vk-rec__intro { font-size: 18px !important; } .vk-rec__why { font-size: 16px !important; } /* Subir lo demasiado chico */ .footer-col__title { font-size: 13px !important; } /* "Navegación"/"Encontrame" estaban en 10 */ .hero__scroll { font-size: 11px !important; } /* "Scroll" estaba en 10 */ .testimonials__sub { font-size: 12px !important; } /* "experiencias reales" estaba en 11 */ /* TYPOGRAPHY V3 — overrides mobile: los títulos de sección que unifiqué a 50 deben escalar en mobile como los pills .section-title (34), y los watermarks volver a ~46. */ @media (max-width: 880px) { .about__h2, .about__h2 .elementor-heading-title, .contact__h2, .contact__h2 .elementor-heading-title, .instagram__title, .instagram__title .elementor-heading-title, .vk-rec--teaser .vk-rec__title { font-size: 34px !important; } .contact__watermark { font-size: 46px !important; top: -2px !important; } /* watermark fantasma mobile detrás de "Contacto" */ .vk-name { font-size: 1.2em !important; } /* el nombre cursivo no llega al borde en mobile */ .quote-section__open-quote { font-size: 110px !important; } /* era 180px (desktop) — grande para mobile */ } /* ════════════════════════════════════════════════════════════════ BOTONES — ÚNICO bloque de hover (no agregar hovers de botón en otro lado) Patrón: cada botón vira/oscurece su color base + se levanta 2px + sombra tintada de su propio color. El outline "Conocer más" se llena de rosa (igual que el nav-cta del navbar). Mantener TODO el hover de botones acá. ════════════════════════════════════════════════════════════════ */ .btn-filled .elementor-button, .btn-outline-dark .elementor-button, .btn-pink .elementor-button, .btn-primary .elementor-button, .contact .elementor-button { transition: background .25s ease, border-color .25s ease, color .25s ease, transform .15s ease, box-shadow .25s ease !important; } .btn-outline-dark .elementor-button { border: 1.5px solid var(--black) !important; } .btn-filled .elementor-button:hover { background:#333 !important; transform:translateY(-2px); box-shadow:0 8px 20px rgba(39,39,39,.22) !important; } .btn-primary .elementor-button:hover { background:var(--green-cta) !important; transform:translateY(-2px); box-shadow:0 8px 20px rgba(90,150,64,.3) !important; } .btn-pink .elementor-button:hover, .contact .elementor-button:hover { background:var(--pink) !important; transform:translateY(-2px); box-shadow:0 8px 20px rgba(212,105,154,.3) !important; } .btn-outline-dark .elementor-button:hover { background:var(--pink-dark) !important; border-color:var(--pink-dark) !important; color:var(--black) !important; transform:translateY(-2px); box-shadow:0 8px 20px rgba(212,105,154,.3) !important; } .elementor-button:active { transform: scale(.97) !important; } /* ── Recomendados: CTA de cierre (WhatsApp) — solo en la página /recomendados/ ── */ .vk-rec__outro { text-align:center; max-width:620px; margin:48px auto 0; padding:0 24px; } /* el espacio de abajo lo da el padding-bottom de .vk-rec (para que el fondo crema llegue) */ .vk-rec__outro-title { font-family:var(--f-display); font-size:34px; font-weight:700; color:var(--black); line-height:1.1; margin-bottom:10px; } .vk-rec__outro-text { font-family:var(--f-body); font-size:16px; color:var(--text); line-height:1.7; margin-bottom:26px; } /* Botón WhatsApp = MISMO patrón que el .btn-ig (social button branded): verde WhatsApp de marca + en hover el gradiente ROSA de marca entra por encima (::before) + lift + sombra rosa. Texto SIEMPRE blanco. */ .vk-rec__outro-btn { display:inline-flex; align-items:center; gap:10px; padding:14px 32px; border-radius:var(--pill); background:#25D366; color:#fff; font-family:var(--f-body); font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; text-decoration:none; position:relative; overflow:hidden; isolation:isolate; transition:transform .15s ease, box-shadow .3s ease; } .vk-rec__outro-btn::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--grad-pink); opacity:0; transition:opacity .35s ease; } .vk-rec__outro-btn, .vk-rec__outro-btn:hover, .vk-rec__outro-btn:focus { color:#fff !important; } .vk-rec__outro-btn svg { width:20px; height:20px; fill:#fff; flex-shrink:0; } .vk-rec__outro-btn:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(212,105,154,.4); } .vk-rec__outro-btn:hover::before { opacity:.9; } @media (max-width:880px){ .vk-rec__outro { margin-top:32px; } .vk-rec { padding-bottom:56px; } .vk-rec__outro-title { font-size:28px; } } /* ── HERO script: prueba "pill blanco translúcido + rosa sólido" (sin degradé) ── Sobre el verde el rosa no se leía; el pill claro lo resuelve y mantiene Great Vibes. */ .hero__script .elementor-heading-title { background: rgba(255,255,255,.96) !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: var(--pink-mid) !important; color: var(--pink-mid) !important; text-shadow: 0 1px 1px rgba(140,40,90,.28) !important; display: inline-block !important; line-height: 1.35 !important; padding: 4px 30px 10px !important; border-radius: 999px !important; margin-left: 0 !important; } /* ════════════════════════════════════════════════════════════════ RITMO VERTICAL UNIFICADO de sections (2026-06-22) Las sections de contenido tenían padding vertical disparejo y enorme (efectivos 150–208px en mobile, sin reducir respecto de desktop). Se unifican: desktop 100px / mobile 56px. Tiras compactas (trust-bar, newsletter, marquee) NO se tocan. Hero: regla propia abajo. ════════════════════════════════════════════════════════════════ */ .about, .quote-section, .services, .process, .instagram, .contact, .faq { padding-top: 0 !important; padding-bottom: 0 !important; } .about > .e-con-inner, .quote-section > .e-con-inner, .services > .e-con-inner, .process > .e-con-inner, .instagram > .e-con-inner, .contact > .e-con-inner, .faq > .e-con-inner { padding-top: 100px !important; padding-bottom: 100px !important; } @media (max-width: 880px) { .about > .e-con-inner, .quote-section > .e-con-inner, .services > .e-con-inner, .process > .e-con-inner, .instagram > .e-con-inner, .contact > .e-con-inner, .faq > .e-con-inner { padding-top: 56px !important; padding-bottom: 56px !important; } /* Hero: el padding-top gigante en mobile (48+88=136) se baja */ .hero-section { padding-top: 0 !important; padding-bottom: 0 !important; } .hero-section > .e-con-inner { padding-top: 40px !important; padding-bottom: 52px !important; } /* Pill credencial "Nutricionista · Palermo…": fuente más chica para que achique todo */ .hero__tag { font-size: 11px !important; padding: 6px 15px !important; } /* Script "acompañándote siempre": un poco de aire respecto del título y el párrafo */ .hero__script { margin-top: 8px !important; margin-bottom: 10px !important; } } /* Testimonios y Recomendados teaser (sections de theme, no Elementor) al mismo ritmo */ .testimonials { padding-top: 100px !important; padding-bottom: 100px !important; } .vk-rec--teaser .vk-rec__head { padding-top: 100px !important; } .vk-rec--teaser .vk-rec__grid { padding-bottom: 100px !important; } @media (max-width: 880px) { .testimonials { padding-top: 56px !important; padding-bottom: 56px !important; } .vk-rec--teaser .vk-rec__head { padding-top: 56px !important; } .vk-rec--teaser .vk-rec__grid { padding-bottom: 56px !important; } } /* ── Footer en phone (≤600): 2 columnas (Navegación | Encontrame), marca full-width arriba. Antes era 1 columna apilada = larguísimo. La tablet 601-960 ya usaba 2 columnas. ── */ @media (max-width: 600px) { /* Footer mobile: 1 columna centrada (la versión 2-col quedaba asimétrica). Navegación (col 2) se oculta: es redundante con el menú hamburguesa; los links siguen en el HTML (SEO/sitemap intactos). Marca + Encontrame centradas. */ .footer-full__inner { grid-template-columns: 1fr !important; gap: 30px !important; } .footer-col--brand { text-align: center !important; } .footer-col--brand .footer-logo { justify-content: center !important; } .footer-col--brand .footer-social-row { justify-content: center !important; } .footer-col--brand .footer-bio { margin-left: auto !important; margin-right: auto !important; } .footer-full__inner > .footer-col:nth-child(2) { display: none !important; } .footer-full__inner > .footer-col:nth-child(3) { text-align: center !important; } .footer-contact-list { align-items: center !important; } .footer-contact-list .footer-contact-item { justify-content: center !important; } }