/* ===== LINK CTA TEXT (usado por testimonios.html, incluido en layout servicios) ===== Duplica .link--cta-text de components.css porque ese archivo solo carga en home-redesign; testimonios.html se incluye también en servicios. */ .link--cta-text { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--principal); text-decoration: none; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding-bottom: 0.25rem; border-bottom: 2px solid var(--principal); width: fit-content; transition: all 0.2s; } .link--cta-text::after { content: "→"; transition: transform 0.2s ease; } .link--cta-text:hover { opacity: 0.8; gap: 0.5rem; } .link--cta-text:hover::after { transform: translateX(4px); } /* ===== BREADCRUMBS (nav global, incluido en todos los layouts vía default.html) ===== */ #breadcrumbs { font-family: var(--fuenteTexto); } #breadcrumbs .small { padding: 0.85rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; max-width: 1440px; margin-inline: auto; li { margin: 0; list-style: none; font-size: var(--fs-xs); line-height: 1.4; color: var(--gris2); &:not(:last-child)::after { content: "›"; display: inline-block; margin-left: 0.5rem; color: var(--gris2); opacity: 0.5; } &:last-child { min-width: 0; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--grisTexto); font-weight: 600; } a { color: inherit; font-size: var(--fs-xs); font-weight: 400; text-decoration: none; &:hover { color: var(--principal); text-decoration: underline; } } } } @media (max-width: 640px) { #breadcrumbs { padding: 0.65rem 1rem; } #breadcrumbs .small li:last-child { max-width: 22ch; } } /* ===== GTM NOSCRIPT IFRAME (oculto, sin afectar el layout) ===== */ .gtm-noscript-frame { display: none; visibility: hidden; } /* ===== WHATSAPP FALLBACK MODAL (inyectado dinámicamente por main.js, global en todo el sitio) ===== Mismo patrón de entrada que .cookie-modal (cookie-banner.css): fade del overlay + animation modalSlideIn en el contenido. Reutiliza ese @keyframes ya definido — ambos archivos se cargan siempre juntos vía pages.css. */ .wa-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } .wa-modal.show { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s linear 0s; } .wa-content { background: #fff; border-radius: 12px; padding: 24px; max-width: 400px; width: 100%; position: relative; text-align: center; animation: modalSlideIn 0.3s ease; } .wa-content h3 { margin: 0 0 16px; color: #25d366; } .wa-options { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; } .wa-btn { display: block; padding: 12px 20px; border-radius: 8px; text-decoration: none; border: none; cursor: pointer; font-size: var(--fs-base); transition: all 0.3s; } .wa-primary { background: #25d366; color: #fff; } .wa-btn:not(.wa-primary) { background: #f5f5f5; color: #333; } .wa-close { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: var(--fs-xl); cursor: pointer; } a:hover { color: var(--secundario); } ol li { margin-left: 3em; list-style: decimal; } blockquote { position: relative; padding: 2.5rem 2rem; margin: 2rem 0; background: linear-gradient(135deg, var(--principal), var(--complemento)); color: white; box-shadow: var(--shadow); a{color: var(--secundario);} } blockquote::before { content: '"'; position: absolute; top: -0.5rem; left: 1rem; font-family: var(--fuenteTitulos); font-size: var(--fs-6xl); line-height: 1; color: var(--accion); opacity: 0.3; } blockquote p { position: relative; font-family: var(--fuenteTitulos); font-size: var(--fs-blockquote); line-height: 1.4; margin-bottom: 1rem; } blockquote small { display: block; color: var(--accion); font-family: var(--fuenteTexto); font-size: var(--fs-base); font-weight: 700; margin-top: 1rem; text-align: right; } blockquote .boton { margin-top: 1.5rem; background-color: var(--accion); color: var(--principal); margin: 1em auto 0; } blockquote .boton:hover { background-color: var(--secundario); color: white; } table { width: 100%; margin: 2em 0 4em; } table tr { border-bottom: 2px dotted var(--gris1); display: flex; padding: 1.2em; flex-wrap: wrap; gap: 1em; width: 100%; } table tr:nth-child(even) { background-color: var(--gris1); } table th { font-weight: 900; } table td, table th { flex: 1 0 200px; } hr { border: 0; height: 1px; background: #333; background-image: linear-gradient(to right, #ccc, #333, #ccc); } .two_columns { display: flex; flex-wrap: wrap; gap: 3em; justify-content: space-around; height: -webkit-min-content; height: -moz-min-content; height: min-content; & > div, figure { flex: 1 0 400px; max-width: 100%; } img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center right; object-position: center right; } .two_columns-image { line-height: 0; } } .two_columns_left { flex-direction: row-reverse; } .three_columns { display: flex; flex-wrap: wrap; gap: 1em; justify-content: center; align-items: flex-start; margin-bottom: 4em; & > div { position: relative; width: min(100%, 276px); text-align: center; display: grid; place-items: center; border-radius: var(--radius-cards); overflow: hidden; img { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } img:hover { transform: scale(1.015); } h4 { font-size: var(--fs-xl); max-width: 296px; margin: 0; } } } .icons { max-width: 180px; } .icons svg { width: 48px; height: 48px; color: var(--accion); } .footer { background-color: #002b4d; color: white; padding: 2rem 1rem; font-family: Arial, sans-serif; } .footer-content { width: min(100%, 1440px); margin: 0 auto; display: flex; gap: 1em; flex-wrap: wrap; justify-content: space-between; align-items: center; } .footer-logo { flex: 1 1 200px; margin-bottom: 1rem; } .footer-logo img { max-width: 200px; width: 100%; height: auto; } .footer-section { flex: 1 1 200px; margin: 0 1rem 1rem 0; min-width: 0; /* Permite que las secciones se reduzcan más allá de su contenido */ } .footer-section h3 { font-size: var(--fs-footer-heading); margin-bottom: 0.5rem; } .footer-section p { margin: 0.25rem 0; font-size: var(--fs-footer-body); color: rgba(255, 255, 255, 0.95); } .social-icons { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; } .social-icon { width: clamp(20px, 4vw, 24px); height: clamp(20px, 4vw, 24px); fill: white; transition: opacity 0.2s ease; } /* .social-icon es el <svg>, no el <a> que recibe el foco/hover real */ .social-icons a:hover .social-icon, .social-icons a:focus-visible .social-icon { opacity: 0.75; } .footer-bottom { margin-top: 2rem; text-align: center; font-size: var(--fs-footer-bottom); border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1rem; width: 100%; color: rgba(255, 255, 255, 0.9); a { color: #f0dfc8; font-size: var(--fs-base); font-weight: 500; text-decoration: none; } small { color: rgba(255, 255, 255, 0.85); } } .background_full{ background-color: var(--gris1); box-shadow: 0 0 0 100vmax var(--gris1); clip-path: inset(0 -100vmax); } /* ============================================================================ COOKIE BANNER & MODAL STYLES ============================================================================ */ /* Cookie Bubble */ .cookie-bubble { position: fixed; bottom: 20px; left: 20px; background: #fff; border-radius: var(--radius-cards); box-shadow: var(--shadow); padding: 12px 16px; z-index: 9999; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s; border: 1px solid var(--gris1); max-width: 320px; } .cookie-bubble.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0s; } .cookie-bubble__content { display: flex; flex-direction: column; gap: 10px; } .cookie-bubble__text { display: flex; align-items: center; gap: 8px; } .cookie-bubble__icon { font-size: var(--fs-base); flex-shrink: 0; } .cookie-bubble__message { font-size: var(--fs-xs); color: var(--grisTexto); line-height: 1.4; } .cookie-bubble__actions { display: flex; align-items: center; gap: 12px; } .cookie-bubble__link { font-size: var(--fs-2xs); color: var(--gris2); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 6px 8px; transition: color 0.2s ease; white-space: nowrap; } .cookie-bubble__link:hover { color: var(--grisTexto); } .cookie-bubble__btn { padding: 8px 16px; border: none; border-radius: 6px; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; background: var(--accion); color: var(--principal); } .cookie-bubble__btn:hover { background: var(--secundario); color: #fff; transform: translateY(-1px); } /* Cookie Modal */ .cookie-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } .cookie-modal.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease, visibility 0s linear 0s; } .cookie-modal__content { background: #fff; border-radius: var(--radius-cards); max-width: 600px; width: 100%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); animation: modalSlideIn 0.3s ease; } @keyframes modalSlideIn { from { transform: scale(0.9) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .cookie-modal__header { padding: 1.5rem; border-bottom: 1px solid var(--gris1); display: flex; justify-content: space-between; align-items: center; } .cookie-modal__title { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--principal); } .cookie-modal__close { background: transparent; border: none; font-size: var(--fs-3xl); line-height: 1; cursor: pointer; color: var(--gris2); padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s; } .cookie-modal__close:hover { background: var(--gris1); color: var(--grisTexto); } .cookie-modal__body { padding: 1.5rem; overflow-y: auto; flex: 1; } .cookie-modal__intro { margin: 0 0 1.5rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--gris2); } .cookie-category { margin-bottom: 1.5rem; padding: 1rem; background: var(--gris1); border-radius: 8px; border: 1px solid var(--gris1); } .cookie-category__header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.75rem; } .cookie-category__info { flex: 1; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .cookie-category__title { margin: 0; font-size: var(--fs-base); font-weight: 600; color: var(--principal); } .cookie-category__badge { display: inline-block; padding: 0.25rem 0.75rem; background: var(--accion); color: var(--principal); font-size: var(--fs-2xs); font-weight: 600; border-radius: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .cookie-category__description { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--gris2); } /* Toggle Switch */ .cookie-toggle { position: relative; display: inline-block; width: 50px; height: 26px; cursor: pointer; flex-shrink: 0; } .cookie-toggle input { opacity: 0; width: 0; height: 0; } .cookie-toggle__slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--gris1); transition: 0.3s; border-radius: 26px; } .cookie-toggle__slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; } .cookie-toggle input:checked + .cookie-toggle__slider { background-color: var(--secundario); } .cookie-toggle input:checked + .cookie-toggle__slider:before { transform: translateX(24px); } .cookie-toggle input:disabled + .cookie-toggle__slider { opacity: 0.6; cursor: not-allowed; } .cookie-modal__footer { padding: 1.5rem; border-top: 1px solid var(--gris1); display: flex; gap: 0.75rem; flex-wrap: wrap; } .cookie-modal__btn { flex: 1; min-width: 140px; padding: 10px 16px; border-radius: 6px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: all 0.2s ease; border: 2px solid var(--accion); } .cookie-modal__btn--primary { background: var(--accion); color: var(--principal); } .cookie-modal__btn--primary:hover { background: var(--secundario); border-color: var(--secundario); color: #fff; } .cookie-modal__btn--secondary { background: transparent; color: var(--principal); border-color: var(--principal); } .cookie-modal__btn--secondary:hover { background: var(--principal); color: #fff; } /* Responsive Design - Burbuja flotante */ @media (max-width: 768px) { .cookie-bubble { bottom: 12px; left: 12px; right: 12px; max-width: none; padding: 10px 14px; } .cookie-bubble__content { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .cookie-bubble__text { flex: 1 1 auto; min-width: 0; } .cookie-bubble__message { font-size: var(--fs-2xs); } .cookie-bubble__actions { flex-shrink: 0; gap: 8px; } .cookie-bubble__btn { padding: 6px 12px; font-size: var(--fs-2xs); } .cookie-bubble__link { font-size: var(--fs-3xs); padding: 6px 8px; } /* Modal styles remain the same */ .cookie-modal__content { max-height: 95vh; } .cookie-modal__header, .cookie-modal__body, .cookie-modal__footer { padding: 1rem; } .cookie-modal__footer { flex-direction: column; } .cookie-modal__btn { width: 100%; } .cookie-category__header { gap: 0.75rem; } } @media (max-width: 480px) { .cookie-bubble { bottom: 10px; left: 10px; right: 10px; padding: 8px 12px; border-radius: 10px; } .cookie-bubble__content { flex-direction: column; align-items: stretch; gap: 8px; } .cookie-bubble__text { justify-content: center; } .cookie-bubble__actions { justify-content: center; } .cookie-bubble__message { font-size: var(--fs-3xs); text-align: center; } .cookie-bubble__btn { flex: 1; } .cookie-bubble__link { flex: 1; text-align: center; } } /* Accessibility */ .cookie-modal__close:focus, .cookie-bubble__btn:focus, .cookie-modal__btn:focus, .cookie-toggle input:focus + .cookie-toggle__slider { outline: 2px solid var(--accion); outline-offset: 2px; } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { .cookie-bubble, .cookie-modal, .cookie-modal__btn, .cookie-toggle__slider, .cookie-toggle__slider:before { transition: none; } @keyframes modalSlideIn { from, to { transform: none; opacity: 1; } } } .landing img{ display: block; margin: 0 auto; box-shadow: var(--shadow); } .landing .two_columns .two_columns-image { align-self: center; } .landing .two_columns .two_columns-image img { height: auto; max-height: 640px; margin: 0; } /* Notification Modal Styles */ .notification-modal { position: fixed; bottom: 2rem; left: 2rem; max-width: 400px; width: calc(100% - 4rem); background: white; border-radius: var(--radius-cards, 12px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); padding: 1rem; z-index: 9999; opacity: 0; transform: translateY(100px); pointer-events: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border-left: 4px solid var(--accion, #cfbaa3); } .notification-modal.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .notification-modal.hide { opacity: 0; transform: translateY(100px); pointer-events: none; } .notification-content { display: flex; align-items: flex-start; gap: 1rem; position: relative; } .notification-icon { flex-shrink: 0; width: 40px; height: 40px; background: linear-gradient(135deg, var(--principal, #002e51), var(--complemento, #004070)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; } .notification-icon svg { width: 20px; height: 20px; } .notification-text { flex: 1; min-width: 0; } .notification-name { font-weight: 700; color: var(--principal, #002e51); margin: 0 0 0.25rem 0; font-size: var(--fs-sm-plus); line-height: 1.3; } .notification-action { color: var(--grisTexto, #111313); margin: 0; font-size: var(--fs-sm); line-height: 1.4; } .notification-time { display: block; color: var(--gris2, #8c8c8c); font-size: var(--fs-2xs); margin-top: 0.25rem; } .notification-close { position: absolute; top: -0.5rem; right: -0.5rem; background: white; border: none; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: all 0.2s ease; padding: 0; } .notification-close:hover { background: var(--gris1, #eeeeee); transform: scale(1.1); } .notification-close svg { color: var(--gris2, #8c8c8c); } /* Responsive */ @media (max-width: 640px) { .notification-modal { bottom: 1rem; left: 1rem; right: 1rem; width: auto; max-width: none; } .notification-content { gap: 0.75rem; } .notification-icon { width: 36px; height: 36px; } .notification-name { font-size: var(--fs-sm); } .notification-action { font-size: var(--fs-xs); } } /* Animation for pulsing icon */ @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .notification-modal.show .notification-icon { animation: pulse 2s ease-in-out infinite; } /* Accessibility */ @media (prefers-reduced-motion: reduce) { .notification-modal, .notification-close { transition: none; } .notification-modal.show .notification-icon { animation: none; } } /* ============================================= CRO COMPONENTS — Landing pages Variables por página definidas abajo ============================================= */ .page-hilos-landing { /* Paleta rediseño CRO */ --navy-dark: #0e1b2e; --navy: #14233b; --cream-bg: #f0eee9; --cream-light: #fbf8f2; --gold: #c9a961; --accent: #a07840; --whatsapp: #25d366; --whatsapp-dark: #1da851; --text-muted: #4a5468; /* Mapeo a las variables CRO existentes */ --cro-accent: var(--gold); --cro-accent-dark: var(--navy-dark); --cro-bg: var(--cream-light); --cro-border: rgba(20, 35, 59, 0.12); /* Tipografía rediseño */ --font-serif: "DM Serif Display", Georgia, "Times New Roman", serif; --font-sans: "Manrope", system-ui, -apple-system, sans-serif; } /* ============================================= TEMA VISUAL — rediseño CRO (scoped) ============================================= */ .page-hilos-landing { background: var(--cream-bg); font-family: var(--font-sans); color: var(--navy); } .page-hilos-landing :is(h1, h2, h3, h4) { font-family: var(--font-serif); font-weight: 400; color: var(--navy); letter-spacing: -0.02em; line-height: 1.08; overflow-wrap: break-word; word-break: break-word; } .page-hilos-landing h1 { font-size: var(--fs-hero-landing); } .page-hilos-landing h2 { font-size: var(--fs-hero-landing-sub); } .page-hilos-landing :is(p, li, a, blockquote) { font-family: var(--font-sans); } .page-hilos-landing strong { color: var(--navy); } /* Etiquetas eyebrow doradas en mayúsculas */ .page-hilos-landing small, .page-hilos-landing .intro > small { color: var(--gold); font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--fs-xs); } /* Acento terracota para énfasis en titulares */ .page-hilos-landing h2 em, .page-hilos-landing h1 em { color: var(--accent); font-style: italic; } /* Botones tipo píldora verde WhatsApp */ .page-hilos-landing :is(.boton, .boton_principal, .lead_whatsapp:not(.cro-topbar__cta)) { background: var(--whatsapp); color: #fff; border-radius: 0; padding: 0.95rem 1.9rem; font-family: var(--font-sans); font-weight: 700; box-shadow: 0 8px 22px rgba(37, 211, 102, 0.28); } /* Estilo plano: sin border-radius en bloques, imágenes y botones (solo círculos de iconos/checks lo conservan) */ .page-hilos-landing :is( .boton, .boton_principal, .lead_whatsapp, .cro-topbar__cta, .sticky-cta-mobile__btn, .card, .card__flow, .review-card, .gallery-item, .cro-compare__col, .quiz-candidacy, .cro-opportunity-card, .hero-split__img img, .hero-split__badge, .before-after-container, .accordion, .accordion-content, .notification-modal, img, figure, blockquote, input, textarea ) { border-radius: 0; } .page-hilos-landing :is(.boton, .boton_principal, .lead_whatsapp:not(.cro-topbar__cta)):hover { background: var(--whatsapp-dark); } /* Hero sobre fotografía: texto claro y legible */ .page-hilos-landing .hero :is(h1, h2), .page-hilos-landing .hero-content :is(h1, p) { color: var(--cream-light); text-shadow: 0 2px 18px rgba(14, 27, 46, 0.55); } .page-hilos-landing .hero-content .icons p { color: var(--cream-light); } /* ============================================= NAV + HERO SPLIT (rediseño) ============================================= */ .hero-nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 1rem clamp(1.25rem, 5vw, 3.5rem); background: var(--cream-light); border-bottom: 1px solid var(--cro-border); } .hero-nav__brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; } .hero-nav__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy-dark); color: var(--gold); font-family: var(--font-serif); font-size: var(--fs-xl); font-style: italic; } .hero-nav__name { display: flex; flex-direction: column; line-height: 1.15; } .hero-nav__name strong { font-family: var(--font-serif); font-size: var(--fs-base-plus); color: var(--navy); } .hero-nav__name small { color: var(--text-muted); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: var(--fs-2xs); } .hero-nav__links { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; } .hero-nav__links a { color: var(--navy); text-decoration: none; font-weight: 600; font-size: var(--fs-sm-plus); } .hero-nav__links a:hover { color: var(--accent); } .hero-nav__cta { font-size: var(--fs-sm-plus); } .hero-split-wrap { background: var(--cream-bg); padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 3.5rem); } .hero-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .hero-split__rating { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm-plus); color: var(--text-muted); } .hero-split__rating .badge-stars { color: var(--gold); letter-spacing: 1px; } .hero-split__rating strong { color: var(--navy); } .hero-split h1 { margin: 0; } .hero-split h1 em { color: var(--accent); font-style: italic; } .hero-split__lead { font-size: var(--fs-md); color: var(--text-muted); max-width: 38ch; } .hero-bullets { list-style: none; margin: clamp(1.5rem, 4vw, 2.75rem) 0 0; padding: clamp(1.25rem, 3vw, 2rem) 0 0; border-top: 1px solid var(--cro-border); display: flex; flex-wrap: wrap; gap: 1.25rem; } .hero-bullets li { flex: 1 1 0; min-width: 220px; position: relative; padding-left: 2.2rem; line-height: 1.3; } .hero-bullets li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; font-size: var(--fs-sm); font-weight: 700; } .hero-bullets strong { display: block; color: var(--navy); } .hero-bullets span { color: var(--text-muted); font-size: var(--fs-sm-plus); } .hero-split__actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.5rem; } .hero-split__secondary { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .hero-split__microcopy { margin-top: 1rem; font-size: var(--fs-xs); color: var(--text-muted); } .hero-split__media { position: relative; } .hero-split__img img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 20px 50px rgba(14, 27, 46, 0.18); margin: 0; } .hero-split__badge { position: absolute; left: -1rem; bottom: 1.5rem; max-width: 240px; background: var(--navy-dark); color: var(--cream-light); padding: 1rem 1.25rem; border-radius: 14px; box-shadow: 0 12px 30px rgba(14, 27, 46, 0.28); } .hero-split__badge small { color: var(--gold); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--fs-2xs); } .hero-split__badge p { margin: .4rem 0 0; font-size: var(--fs-sm); line-height: 1.35; color: var(--cream-light); } @media (max-width: 860px) { .hero-nav__links { display: none; } /* Fix 1: evitar desbordamiento del brand en móvil */ .hero-nav { gap: .75rem 1rem; } .hero-nav__brand { min-width: 0; } .hero-nav__name small { display: none; } .hero-split { grid-template-columns: 1fr; } .hero-split__media { order: -1; } .hero-split__badge { left: 0; } } .page-scizer-landing { --cro-accent: #1a7a9a; --cro-accent-dark: #135e78; --cro-bg: #f4f8fa; --cro-border: #c8dfe8; } /* CRO top bar */ .cro-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.2rem; padding: .6rem 1.5rem; background: var(--cro-accent-dark, #a07840); color: #fff; text-align: center; } .cro-topbar__text { margin: 0; font-size: var(--fs-sm-plus); font-weight: 600; } .cro-topbar__cta { background: #25d366; color: #fff !important; font-weight: 700; font-size: var(--fs-sm); text-decoration: none; padding: .4rem 1rem; border-radius: 999px; white-space: nowrap; } .cro-topbar__cta:hover { background: #1da851; } /* Value comparison: threads vs surgery */ .cro-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; max-width: 900px; margin: 2rem auto 0; } .cro-compare__col { border: 1px solid var(--cro-border, #e8ddd3); border-radius: 12px; padding: 1.5rem 1.75rem; background: #fff; } .cro-compare__col--highlight { border: 2px solid var(--cro-accent, #c9a96e); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); } .cro-compare__col h3 { margin: 0 0 1rem; color: var(--cro-accent-dark, #a07840); } .cro-compare__col--highlight h3 { color: var(--cro-accent-dark, #a07840); } .cro-compare__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; } .cro-compare__col li { font-size: var(--fs-sm-plus); line-height: 1.4; } /* Texto blanco sobre cualquier bloque de fondo azul */ .page-hilos-landing :is(.section-overlay, blockquote) :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, small, a, cite) { color: var(--cream-light, #fff); } /* Columna oscura de la sección de decisión final (sin tocar la tarjeta interior) */ .page-hilos-landing .block_section_knowledge > :is(h2, h3, h4, p, small) { color: var(--cream-light, #fff); } /* Footer azul: títulos y texto en claro */ .page-hilos-landing footer :is(h1, h2, h3, h4, h5, h6, p, a, li, span, small, strong) { color: var(--cream-light, #fff); } /* Lista de credenciales de la doctora: limpia, en 2 columnas */ .page-hilos-landing .benefit-features { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem 1.5rem; } .page-hilos-landing .benefit-features li { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: var(--fs-sm-plus); line-height: 1.3; color: var(--navy); } @media (max-width: 600px) { .page-hilos-landing .benefit-features { grid-template-columns: 1fr; } } /* Proceso: los 3 pasos en una sola fila */ .page-hilos-landing .two_columns .service-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } /* Grupos de 3 columnas: mismo ancho de contenedor y de elemento (armonía entre secciones) */ .page-hilos-landing :is(.service-cards, .before-after-grid, .reviews-container, .three_columns, .three_blocks) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: min(94%, 1320px); margin-inline: auto; align-items: stretch; justify-items: stretch; } /* Los testimonios usan .padding; quitamos el padding lateral para que las cards llenen la celda */ .page-hilos-landing .reviews-container { padding-inline: 0; } /* Reset para que cada elemento llene su celda por igual */ .page-hilos-landing :is(.before-after-case, .review-card, .three_columns > .card) { max-width: none; width: 100%; margin: 0; } .stars { display: flex; gap: 0.25rem; color: var(--accion); } .stars svg { width: 20px; height: 20px; } .review-card { position: relative; overflow: hidden; } .review-card__mark { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; opacity: 0.15; color: var(--accion); pointer-events: none; } .review-card__footer { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; } .review-card__avatar { width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 9999px; background: var(--principal); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; } /* Secciones finales: unificar al tema crema (sin gris) */ .page-hilos-landing .background_full { background: var(--cream-light); } @media (max-width: 760px) { .page-hilos-landing .two_columns .service-cards, .page-hilos-landing .before-after-grid, .page-hilos-landing .reviews-container, .page-hilos-landing .three_columns, .page-hilos-landing .three_blocks { grid-template-columns: 1fr; } } /* Doctor personal quote */ .doctor-quote { border-left: 4px solid var(--cro-accent, #c9a96e); padding: .75rem 0 .75rem 1.25rem; margin: 1.5rem 0; font-style: italic; } .doctor-quote cite { display: block; margin-top: .6rem; font-style: normal; font-weight: 700; font-size: var(--fs-sm-plus); color: var(--cro-accent-dark, #a07840); } /* Highlighted comparison block */ .block.destacado { transform: scale(1.05); box-shadow: 0 10px 36px rgba(0, 0, 0, .18); position: relative; z-index: 2; border-top: 4px solid var(--cro-accent); overflow: visible; } .block.destacado::before { content: attr(data-badge); position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(-100%); background: var(--cro-accent); color: #fff; font-size: var(--fs-3xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .28rem 1rem; border-radius: 999px 999px 0 0; white-space: nowrap; } /* Fix 2: ampliar breakpoint para evitar desbordamiento del bloque escalado */ @media (max-width: 760px) { .block.destacado { transform: none; } } /* Quiz micro-commitment */ .quiz-candidacy { background: var(--cro-bg, #faf7f4); border: 1.5px solid var(--cro-border, #e8ddd3); border-radius: 16px; padding: 2rem; max-width: 560px; margin: 2.5rem auto; text-align: left; } .quiz-candidacy h3 { font-size: var(--fs-base-plus); margin-bottom: 1.2rem; text-align: center; } .quiz-check { display: flex; align-items: flex-start; gap: .75rem; padding: .55rem 0; cursor: pointer; font-size: var(--fs-sm-plus); line-height: 1.45; } .quiz-check input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--cro-accent); cursor: pointer; flex-shrink: 0; margin-top: 2px; } .quiz-result { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1.5px solid var(--cro-border, #e8ddd3); text-align: center; display: none; } .quiz-result.visible { display: block; animation: cro-fadeUp .4s ease; } .quiz-result p { font-weight: 700; margin-bottom: 1rem; font-size: var(--fs-base-plus); } @keyframes cro-fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Sticky mobile CTA */ .sticky-cta-mobile { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; padding: .85rem clamp(1rem, 4vw, 2.5rem); background: var(--navy-dark, #0e1b2e); box-shadow: 0 -4px 20px rgba(14, 27, 46, .25); transform: translateY(110%); transition: transform .35s cubic-bezier(.22, .61, .36, 1); } .sticky-cta-mobile.visible { transform: translateY(0); } .sticky-cta-mobile__text { margin: 0; display: flex; flex-direction: column; line-height: 1.25; color: var(--cream-light, #fbf8f2); } .sticky-cta-mobile__text strong { font-family: var(--font-serif, Georgia, serif); font-size: var(--fs-base-plus); color: var(--cream-light, #fbf8f2); } .sticky-cta-mobile__text span { font-size: var(--fs-xs); color: rgba(251, 248, 242, .8); } .sticky-cta-mobile__btn { background: var(--whatsapp, #25d366); color: #fff !important; font-weight: 700; font-size: var(--fs-sm-plus); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 13px 26px; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 18px rgba(37, 211, 102, .35); } .sticky-cta-mobile__btn:hover { background: var(--whatsapp-dark, #1da851); } /* Fix 3: html es el scroll container real — body solo no basta */ html:has(.page-hilos-landing) { overflow-x: hidden; } .page-hilos-landing { padding-bottom: 84px; overflow-x: hidden; } @media (max-width: 600px) { .sticky-cta-mobile { gap: .5rem .9rem; padding: .7rem 1rem; } .sticky-cta-mobile__text { flex: 1 1 auto; } .sticky-cta-mobile__text strong { font-size: var(--fs-sm-plus); } .sticky-cta-mobile__text span { display: none; } .sticky-cta-mobile__btn { padding: 11px 18px; font-size: var(--fs-sm); } } /* Quiz spots text styling */ .quiz-spots { font-size: var(--fs-sm-plus); color: var(--grisTexto, #8c8c8c); margin: 0.5rem 0 1rem 0; } /* Opportunity Card */ .cro-opportunity-card { display: flex; gap: 1.25rem; padding: 1.75rem; background: rgba(255, 255, 255, 0.95); border: 2px solid var(--cro-accent); border-radius: 12px; margin: 1.5rem 0; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } .cro-opportunity-card__content h3 { margin: 0 0 0.75rem 0; color: var(--principal, #002e51); font-size: var(--fs-landing-card-heading); font-weight: 700; } .cro-opportunity-card__content ul { margin: 0; padding-left: 1.5rem; } .cro-opportunity-card__content li { margin-bottom: 0.5rem; line-height: 1.6; color: var(--grisTexto, #111313); } .cro-opportunity-card__content li:last-child { margin-bottom: 0; } /* Authority Points */ .cro-authority-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.5rem 0; } .cro-authority-point { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; transition: all 0.2s ease; } .cro-authority-point:hover { background: rgba(255, 255, 255, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } .cro-authority-point span { font-size: var(--fs-sm-plus); font-weight: 600; color: var(--principal, #002e51); line-height: 1.4; } /* Responsive adjustments para authority points */ @media (max-width: 768px) { .cro-authority-points { grid-template-columns: 1fr; } .cro-authority-point { padding: 0.625rem 0.875rem; } .cro-authority-point span { font-size: var(--fs-sm); } } /* Responsive adjustments */ @media (max-width: 768px) { .cro-opportunity-card { flex-direction: column; padding: 1.25rem; } .cro-opportunity-card__content h3 { font-size: var(--fs-md); } } /* ================================================================= LANDING HILOS TENSORES — secciones sin estilo ----------------------------------------------------------------- Igual que en landing scizer: css/landing.css NO incluye pages.css ni service-sections.css, así que .three_blocks, .block/.card base, .accordion, .section-overlay y .block_section_knowledge se quedaban sin ningún estilo (texto blanco forzado sobre fondo transparente, checkboxes de acordeón visibles, cards planas sin tarjeta). Se reutiliza aquí el mismo patrón ya resuelto para .page-scizer-landing, con la paleta y tipografía propias de hilos. ================================================================= */ /* Tarjeta base: intro, pasos del proceso, espacios limitados y bloques de 3 */ .page-hilos-landing :is(.card, .card__flow, .block, .review-card) { background: #fff; border: 1px solid var(--cro-border); padding: 1.75rem; box-shadow: 0 1px 2px rgba(14, 27, 46, .04), 0 8px 24px rgba(14, 27, 46, .06); display: flex; flex-direction: column; gap: .75rem; margin: 0; max-width: none; width: 100%; } .page-hilos-landing :is(.card, .card__flow, .block) > svg { color: var(--gold); flex: none; } .page-hilos-landing :is(.card, .card__flow, .block) :is(h3, h4) { margin: 0; } .page-hilos-landing :is(.card, .card__flow, .block) p { margin: 0; } /* Los bloques claros usan texto atenuado; los oscuros (.section-overlay) ya fuerzan cream-light más abajo, así que se excluyen aquí para no perder contraste */ .page-hilos-landing :is(.card, .card__flow, .block):not(.section-overlay) p { color: var(--text-muted); } /* Listas con check dentro de tarjetas */ .page-hilos-landing :is(.card ul, .feature-list, .specialist-features) { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; } .page-hilos-landing :is(.card ul, .feature-list, .specialist-features) li { position: relative; padding-left: 1.6rem; line-height: 1.45; } .page-hilos-landing :is(.card ul, .feature-list, .specialist-features) li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 700; } /* Columna oscura intercalada (bioestimulación / si esperas) */ .page-hilos-landing .section-overlay { background: var(--navy-dark); border-color: var(--navy-dark); } .page-hilos-landing .section-overlay > svg, .page-hilos-landing .section-overlay li::before { color: var(--gold); } /* Columna oscura de la sección de decisión final */ .page-hilos-landing .block_section_knowledge { background: var(--navy-dark); padding: clamp(2rem, 4vw, 3rem); } /* Banda parallax: "La ciencia detrás de los resultados" */ .page-hilos-landing .parallax { display: grid; place-items: center; min-height: clamp(16rem, 30vw, 20rem); padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--navy-dark); text-align: center; } .page-hilos-landing .parallax_copy { max-width: 62ch; margin-inline: auto; } .page-hilos-landing .parallax_copy :is(h2, p) { color: var(--cream-light); } /* Acordeón de FAQ (sin esto se ven los checkbox y todo queda abierto) */ .page-hilos-landing .accordion { display: grid; gap: .75rem; max-width: 820px; margin-inline: auto; } .page-hilos-landing .accordion-toggle { position: absolute; opacity: 0; pointer-events: none; } .page-hilos-landing .accordion-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.35rem; background: #fff; border: 1px solid var(--cro-border); color: var(--navy); font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-md); line-height: 1.3; cursor: pointer; transition: background .2s ease, color .2s ease; } .page-hilos-landing .accordion-header::after { content: "+"; flex: none; font-size: var(--fs-xl); line-height: 1; color: var(--gold); transition: transform .25s ease; } .page-hilos-landing .accordion-header:hover { background: var(--cream-bg); } .page-hilos-landing .accordion-toggle:focus-visible + .accordion-header { outline: 2px solid var(--gold); outline-offset: 2px; } .page-hilos-landing .accordion-toggle:checked + .accordion-header { background: var(--navy-dark); border-color: var(--navy-dark); color: #fff; } .page-hilos-landing .accordion-toggle:checked + .accordion-header::after { content: "\2212"; color: #fff; } .page-hilos-landing .accordion-content { max-height: 0; overflow: hidden; padding: 0 1.35rem; background: var(--cream-bg); border: 1px solid var(--cro-border); border-top: 0; transition: max-height .35s ease, padding .25s ease; } .page-hilos-landing .accordion-toggle:checked + .accordion-header + .accordion-content { max-height: 40rem; padding: 1.2rem 1.35rem; } .page-hilos-landing .accordion-content p { margin: 0 0 .6rem; line-height: 1.6; color: var(--text-muted); } .page-hilos-landing .accordion-content p:last-child { margin-bottom: 0; } /* ================================================================= LANDING SCIZER — componentes propios ----------------------------------------------------------------- El bundle css/landing.css NO incluye pages.css, así que esta landing se quedaba sin estilo en casi todo lo que maqueta con ese vocabulario (.service-cards, .card, .three_blocks, .block, el acordeón, .parallax…). La landing de hilos resolvió lo mismo con reglas scopeadas a .page-hilos-landing; aquí se hace igual con .page-scizer-landing para no arrastrar regresiones de una landing a la otra. ================================================================= */ .page-scizer-landing { --scz-radius: 14px; --scz-shadow: 0 1px 2px rgba(0, 46, 81, .04), 0 8px 24px rgba(0, 46, 81, .06); --scz-maxw: min(94%, 1240px); } /* --- Ritmo vertical y ancho de lectura --- */ .page-scizer-landing section > .intro, .page-scizer-landing section > .flow > .intro { max-width: 70ch; margin-inline: auto; } .page-scizer-landing .intro small, .page-scizer-landing section > .flow > small { display: block; margin-bottom: .6rem; color: var(--cro-accent-dark); font-weight: 700; font-size: var(--fs-3xs); letter-spacing: .12em; text-transform: uppercase; } /* --- Rejillas de 3 (tarjetas, pasos, testimonios, columnas) --- */ .page-scizer-landing :is(.service-cards, .reviews-container, .three_columns, .three_blocks) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; max-width: var(--scz-maxw); margin-inline: auto; align-items: stretch; } .page-scizer-landing .reviews-container { padding-inline: 0; } /* Dentro de una columna de .two_columns el ancho ya está acotado */ .page-scizer-landing .two_columns .service-cards { max-width: none; gap: 1rem; } /* --- Tarjeta base --- */ .page-scizer-landing :is(.card, .card__flow, .block, .review-card) { background: #fff; border: 1px solid var(--cro-border); border-radius: var(--scz-radius); padding: 1.75rem; box-shadow: var(--scz-shadow); display: flex; flex-direction: column; gap: .75rem; margin: 0; max-width: none; width: 100%; } .page-scizer-landing :is(.card, .card__flow, .block) > svg { color: var(--cro-accent); flex: none; } .page-scizer-landing :is(.card, .card__flow, .block) :is(h3, h4) { margin: 0; color: var(--principal); font-size: var(--fs-lg); line-height: 1.25; } .page-scizer-landing :is(.card, .card__flow, .block) p { margin: 0; color: var(--grisTexto); font-size: var(--fs-base); line-height: 1.55; } .page-scizer-landing .card__flow { text-align: left; gap: .5rem; } /* Listas con check dentro de tarjetas y listas de features */ .page-scizer-landing :is(.card ul, .feature-list, .specialist-features) { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; } .page-scizer-landing :is(.card ul, .feature-list, .specialist-features) li { position: relative; padding-left: 1.6rem; font-size: var(--fs-base); line-height: 1.45; color: var(--grisTexto); } .page-scizer-landing :is(.card ul, .feature-list, .specialist-features) li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--cro-accent); font-weight: 700; } /* --- Bloques de 3 (pilares y comparativa) --- */ .page-scizer-landing .three_blocks { padding-block: clamp(2.5rem, 5vw, 4rem); } .page-scizer-landing .block { align-items: flex-start; } .page-scizer-landing .block small { color: var(--cro-accent-dark); font-weight: 800; font-size: var(--fs-3xs); letter-spacing: .12em; text-transform: uppercase; } /* Columna oscura intercalada */ .page-scizer-landing .section-overlay { background: var(--principal); border-color: var(--principal); } .page-scizer-landing .section-overlay :is(h2, h3, h4, p, li, small, strong, span) { color: #fff; } .page-scizer-landing .section-overlay > svg, .page-scizer-landing .section-overlay li::before { color: var(--secundario); } /* --- Banda de confianza --- */ .page-scizer-landing .trust-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 2rem; padding: 1.1rem 1.5rem; background: var(--cro-bg); border-block: 1px solid var(--cro-border); text-align: center; } .page-scizer-landing .trust-badges > span { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); font-weight: 600; color: var(--principal); } .page-scizer-landing .badge-stars { color: var(--accion); letter-spacing: .05em; } /* --- Banda parallax --- */ .page-scizer-landing .parallax { display: grid; place-items: center; min-height: clamp(20rem, 38vw, 26rem); padding-block: clamp(3rem, 6vw, 5rem); background-position: center; background-size: cover; background-repeat: no-repeat; text-align: center; } .page-scizer-landing .parallax_copy { max-width: 62ch; margin-inline: auto; } .page-scizer-landing .parallax_copy :is(h2, p, small) { color: #fff; } .page-scizer-landing .parallax_copy small { color: rgba(255, 255, 255, .82); } .parallax_scizer { background-image: linear-gradient(rgba(0, 46, 81, .72), rgba(0, 46, 81, .72)), url(/img/scizer-reduccion-grasa-bogota.avif); } @media (min-width: 861px) { .page-scizer-landing .parallax { background-attachment: fixed; } } /* --- Acordeón de FAQ (sin esto se ven los checkbox y todo queda abierto) --- */ .page-scizer-landing .accordion { display: grid; gap: .75rem; max-width: 820px; margin-inline: auto; } .page-scizer-landing .accordion-toggle { position: absolute; opacity: 0; pointer-events: none; } .page-scizer-landing .accordion-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.35rem; background: #fff; border: 1px solid var(--cro-border); border-radius: var(--scz-radius); color: var(--principal); font-family: var(--fuenteTitulos); font-size: var(--fs-md); line-height: 1.3; cursor: pointer; transition: background .2s ease, color .2s ease; } .page-scizer-landing .accordion-header::after { content: "+"; flex: none; font-size: var(--fs-xl); line-height: 1; color: var(--cro-accent); transition: transform .25s ease; } .page-scizer-landing .accordion-header:hover { background: var(--cro-bg); } .page-scizer-landing .accordion-toggle:focus-visible + .accordion-header { outline: 2px solid var(--cro-accent); outline-offset: 2px; } .page-scizer-landing .accordion-toggle:checked + .accordion-header { background: var(--principal); border-color: var(--principal); color: #fff; border-end-start-radius: 0; border-end-end-radius: 0; } .page-scizer-landing .accordion-toggle:checked + .accordion-header::after { content: "\2212"; color: #fff; } .page-scizer-landing .accordion-content { max-height: 0; overflow: hidden; padding: 0 1.35rem; background: var(--cro-bg); border: 1px solid var(--cro-border); border-top: 0; border-end-start-radius: var(--scz-radius); border-end-end-radius: var(--scz-radius); transition: max-height .35s ease, padding .25s ease; } .page-scizer-landing .accordion-toggle:checked + .accordion-header + .accordion-content { max-height: 40rem; padding: 1.2rem 1.35rem; } .page-scizer-landing .accordion-content p { margin: 0 0 .6rem; color: var(--grisTexto); line-height: 1.6; } .page-scizer-landing .accordion-content p:last-child { margin-bottom: 0; } /* --- Lista de credenciales con icono --- */ .page-scizer-landing .benefit-features { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem 1.5rem; } .page-scizer-landing .benefit-features li { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: var(--fs-sm); line-height: 1.35; color: var(--principal); } .page-scizer-landing .benefit-features svg { flex: none; color: var(--cro-accent); } /* --- Cita de la doctora --- */ .page-scizer-landing blockquote { margin: 1.5rem 0; padding: 1.25rem 1.5rem; background: var(--principal); border-left: 3px solid var(--cro-accent); border-radius: var(--scz-radius); font-style: italic; color: #fff; } .page-scizer-landing blockquote :is(p, strong, em, cite) { margin: .35rem 0; color: #fff; } /* --- Columna final oscura --- */ .page-scizer-landing .block_section_knowledge { background: var(--principal); padding: clamp(2rem, 4vw, 3rem); border-radius: var(--scz-radius); } .page-scizer-landing .block_section_knowledge > :is(h2, h3, p, small) { color: #fff; } .page-scizer-landing .block_section_knowledge > small { color: var(--secundario); } /* --- Detalles sueltos --- */ .page-scizer-landing .fecha-limite { color: var(--cro-accent-dark); border-bottom: 2px solid var(--cro-accent); white-space: nowrap; } .page-scizer-landing .quiz-check-input { accent-color: var(--cro-accent); width: 1.15rem; height: 1.15rem; flex: none; } /* --- Responsive --- */ @media (max-width: 900px) { .page-scizer-landing :is(.service-cards, .reviews-container, .three_columns, .three_blocks), .page-scizer-landing .two_columns .service-cards { grid-template-columns: 1fr; } .page-scizer-landing .benefit-features { grid-template-columns: 1fr; } } .gallery-container { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; } .gallery-item { width: min(100%, 440px); position: relative; overflow: hidden; line-height: 0; li { font-size: var(--fs-base); } &.intro { line-height: 1.5; padding: 3rem 2.5rem; min-height: 520px; align-content: center; } } .gallery-item-home { flex: 1 0 360px; max-width: 100%; } /* Bloque "Tratamientos con tecnologia X" del layout servicios. Dos fallos medidos en Scizer el 2026-09-04: 1. La tarjeta usa el `hero` del tratamiento, que en muchas paginas es una panoramica de 1920x580. Con la regla base `height: auto` la tarjeta quedaba en una tira de 440x133px, con el rotulo absoluto tapandola casi entera. Se le fija un alto de tarjeta y `object-fit: cover` recorta. 2. Con un solo tratamiento asociado (scizer, scizer-precio-bogota, inbody, maximus, thork) el `space-around` dejaba esa tira flotando en medio de la banda gris. Con `flex: 1 1` y sin gap, uno o dos items se reparten el ancho completo. Con cuatro (contour-shape) el resultado no cambia. */ .gallery-container--tech { gap: 0; align-items: stretch; } .gallery-container--tech .gallery-item { width: auto; max-width: none; flex: 1 1 320px; } .gallery-container--tech .gallery-item img { height: clamp(14rem, 20vw, 20rem); } .gallery-item img { height: auto; width: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.3s ease; } .gallery-item-text { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; background: #002e5194; color: white; text-align: center; font-size: var(--fs-md); /* `h3, h4 { max-width: 732px }` de base.css recortaba este rótulo, que es un velo absoluto anclado a los dos bordes de la tarjeta: el ancho lo fija el `left/right: 0`, no el texto. No se notaba mientras toda tarjeta medía 440px o menos; salió al ver una fila incompleta del catálogo de un hub, donde la tarjeta ocupa el ancho entero y el velo se cortaba a la mitad. `.mosaico -card-text` ya llevaba esta misma anulación. */ max-width: none; } .gallery-item:hover img { transform: scale(1.025); -webkit-transform: scale(1.025); -moz-transform: scale(1.025); -ms-transform: scale(1.025); -o-transform: scale(1.025); } @supports not (aspect-ratio: 1 / 1) { .gallery-item::before { float: left; padding-top: 100%; content: ''; } .gallery-item::after { display: block; content: ''; clear: both; } } .gallery-item video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.3s ease; } .gallery-item:hover video { transform: scale(1.05); } /* El rótulo de la tarjeta es contenido, no decoración: va SIEMPRE visible. Antes nacía en opacity 0 y solo aparecía al hover, que no existe en táctil: en móvil el texto era inalcanzable. Y heredaba el line-height: 0 de .gallery-item (puesto ahí para matar el hueco del inline-block de la imagen), así que el parrafo colapsaba a altura cero y se montaba sobre el titular. Se recupera el line-height igual que hace .gallery-item.intro. */ .video-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.45) 55%, transparent); padding: 2rem; color: white; line-height: 1.5; opacity: 1; } .video-overlay > * + * { margin-top: 0.35rem; } .specialist-features { list-style: none; padding: 0; margin: 1rem 0; } .specialist-features li { margin: 0; list-style: none; position: relative; } /* ===== MOSAICO DE CATEGORÍA (home) ===== Texto + 4 tarjetas de tratamiento como un único bloque de rejilla, sin gap (flush), inspirado en .block_section de home.css. La tarjeta marcada `vertical: true` en el YAML ocupa una columna alta de 2 filas; las otras 3 son anchas y forman la fila inferior. Ver index.html / en/index.html y _includes/mosaico-tarjetas.html. */ .mosaico { display: grid; grid-template-columns: repeat(3, 1fr) 1.25fr; gap: 0; } .mosaico-intro { grid-column: 1 / span 3; grid-row: 1; padding: 3.5rem 3rem; align-content: center; background-color: var(--principal); color: #fff; } /* h2 y h3: en la home el mosaico va bajo un h2 de sección y su título es h3, pero en las páginas de servicio es la sección de primer nivel y necesita h2. El componente estiliza los dos para que el nivel lo decida el SEO de cada página, no el CSS. Sin esto el h2 hereda el navy de base.css y desaparece sobre el fondo navy del panel. */ .mosaico-intro h2, .mosaico-intro h3 { color: #fff; } .mosaico-intro small { color: var(--accion); } .mosaico-intro p { color: #fff; max-width: 58ch; } .mosaico-intro a:not(.boton) { color: var(--accion); } .mosaico-card-alta { grid-column: 4; grid-row: 1 / span 2; } /* Variante espejo: la tarjeta alta a la izquierda, texto a la derecha */ .mosaico-invertida { grid-template-columns: 1.25fr repeat(3, 1fr); } .mosaico-invertida .mosaico-intro { grid-column: 2 / span 3; } .mosaico-invertida .mosaico-card-alta { grid-column: 1; } /* Variante clara: fondo gris1, texto navy, en vez de navy/blanco */ .mosaico-clara .mosaico-intro { background-color: var(--gris1); color: var(--grisTexto); } .mosaico-clara .mosaico-intro h2, .mosaico-clara .mosaico-intro h3 { color: var(--complemento); } .mosaico-clara .mosaico-intro small { color: var(--gris2); } .mosaico-clara .mosaico-intro p { color: var(--grisTexto); } .mosaico-clara .mosaico-intro a:not(.boton) { color: var(--principal); } .mosaico-card { position: relative; overflow: hidden; display: block; text-decoration: none; } .mosaico-card-ancha { aspect-ratio: 3 / 2; } .mosaico-card img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.4s ease; } .mosaico-card:hover img { transform: scale(1.04); } .mosaico-card:focus-visible { outline: 3px solid var(--accion); outline-offset: -3px; } .mosaico-card-text { position: absolute; inset-inline: 0; bottom: 0; padding: 2.5rem 1.25rem 1.25rem; margin: 0; max-width: none; color: #fff; font-size: var(--fs-md); line-height: 1.25; background: linear-gradient(to top, rgba(0, 46, 81, .92), rgba(0, 46, 81, .6) 45%, transparent); } /* ===== VARIANTE: mosaico uniforme ===== Misma familia de tarjetas (mismo overlay, mismo hover) pero las cuatro del mismo tamaño en una sola fila, y el texto encima sobre fondo blanco alineado a la izquierda en vez del panel navy. Pensada para cerrar páginas de servicio, donde la sección anterior suele ser gris y otro bloque de color competiría. Es una variación del mosaico de la home, no una copia. */ .mosaico-uniforme { grid-template-columns: repeat(4, 1fr); } .mosaico-uniforme .mosaico-intro { grid-column: 1 / -1; grid-row: 1; background-color: transparent; color: var(--grisTexto); padding: 4rem 3rem 2.5rem; } .mosaico-uniforme .mosaico-intro h2, .mosaico-uniforme .mosaico-intro h3 { color: var(--complemento); } .mosaico-uniforme .mosaico-intro small { color: var(--gris2); } .mosaico-uniforme .mosaico-intro p { color: var(--grisTexto); } .mosaico-uniforme .mosaico-intro a:not(.boton) { color: var(--principal); } .mosaico-uniforme .mosaico-card { grid-row: 2; } @media (prefers-reduced-motion: reduce) { .mosaico-card:hover img { transform: none; } } @media (max-width: 1200px) { .mosaico, .mosaico-invertida { grid-template-columns: 1fr 1fr; } .mosaico-intro, .mosaico-invertida .mosaico-intro { grid-column: 1 / -1; grid-row: 1; } .mosaico-card-alta, .mosaico-invertida .mosaico-card-alta { grid-column: 1; grid-row: 2 / span 2; } .mosaico-card-ancha--3 { grid-column: 1 / -1; } /* El uniforme pasa a 2×2: sus cuatro tarjetas son iguales, así que ninguna debe ocupar la fila entera como hace la --3 del mosaico de la home. */ .mosaico-uniforme { grid-template-columns: 1fr 1fr; } .mosaico-uniforme .mosaico-card { grid-row: auto; } .mosaico-uniforme .mosaico-card-ancha--3 { grid-column: auto; } } @media (max-width: 768px) { .mosaico, .mosaico-invertida { grid-template-columns: 1fr; } .mosaico > * { grid-column: 1 / -1 !important; grid-row: auto !important; } .mosaico-intro { padding: 2.5rem 1.5rem; } .mosaico-card-ancha { aspect-ratio: 16 / 9; } .mosaico-card-alta { aspect-ratio: 3 / 4; } } /* ===== VARIANTE: galería flush ===== 4 tarjetas pegadas sin gap y con la misma altura (en vez de aspect-ratio por tarjeta). La tarjeta de texto gana padding propio y ritmo vertical ajustado; su botón es de una sola línea, no las dos que espera .boton base. Ver es/centro-estetico.html. */ .gallery-container--flush { gap: 0; justify-content: center; align-items: stretch; } .gallery-container--flush .gallery-item { aspect-ratio: auto; } .gallery-container--flush .gallery-item.intro { flex: 1 0 296px; max-width: 440px; align-content: center; gap: 1rem; padding: 3rem 2.5rem; } .gallery-container--flush .gallery-item.intro .boton { padding: 12px 28px; } @media (max-width: 1200px) { .gallery-container--flush { flex-direction: column; } .gallery-container--flush .gallery-item, .gallery-container--flush .gallery-item.intro { height: auto; aspect-ratio: 3 / 4; max-width: 100%; } } /* ===== VARIANTE: catálogo de un hub de categoría ===== Misma idea que --flush (tarjetas pegadas, sin gap, a sangre) pero para las listas largas de un hub: diez o veintiséis tratamientos, no cuatro. Por eso NO puede reutilizar --flush, cuya regla de <1200px apila en una sola columna — razonable para la fila de centro-estetico, absurdo para un catálogo. Arregla además dos cosas que traía `.gallery-container` a secas y que se veían en los ocho hubs: 1. `justify-content: space-around` sobre tarjetas de ancho fijo repartía el sobrante en huecos y dejaba la última fila descolgada. Aquí las tarjetas crecen (`flex: 1 0`) y la rejilla llega al borde. 2. `.gallery-item` no tiene `aspect-ratio` (solo el fallback de @supports, sin pareja moderna), así que el alto de la tarjeta lo decidía el ratio real del archivo. Los `hero` de tratamiento son panorámicos 1920×580: cada tarjeta salía como una franja de ~133px, y encima el `height="604"` del <img> reservaba 604px hasta que la imagen cargaba — un salto de layout por tarjeta. El alto es fijo y el ancho flexible, no al revés. Con `aspect-ratio` más un `max-width`, una última fila incompleta (10 tratamientos son 4+4+2) dejaba las dos últimas tarjetas centradas con medio ancho de fondo gris a cada lado — el mismo borde descolgado que traía `space-around`. Fijando el alto y dejando crecer el ancho, cualquier fila llena la banda: las tarjetas de una fila corta salen apaisadas en vez de recortadas, igual que conviven la tarjeta alta y las anchas dentro de un mosaico. */ .gallery-container--catalogo { gap: 0; justify-content: center; align-items: stretch; } .gallery-container--catalogo .gallery-item { flex: 1 1 320px; width: auto; height: 480px; } .gallery-container--catalogo .gallery-item img { height: 100%; } @media (max-width: 600px) { .gallery-container--catalogo .gallery-item { flex-basis: 100%; height: 360px; } } /* Rejilla de casos a ancho completo, con el mismo criterio que .faq-cards. Antes iba topada a 1280px y centrada, así que en una web a sangre quedaba como una isla. El número de columnas se fija por breakpoint en vez de usar auto-fit: el patrón de color es un tablero de ajedrez y necesita saber cuántas columnas hay. Con auto-fit no se puede garantizar que no salgan columnas enteras del mismo color. */ /* El titular de la sección y su bajada son una unidad y deben leerse juntos. .flow los separaba 1,2em medidos sobre el tamaño del H2 —hasta 36px—, lo que daba 65px de hueco: el subtítulo flotaba tan lejos que no se sabía si pertenecía al titular de arriba o a la rejilla de abajo. Aquí el hueco se fija en em del párrafo, no del titular, y la rejilla recupera su aire con margin-top propio. Detectado el 2026-09-04 en Sculptra; alcanza a las 87 páginas que muestran casos. */ .before-after-intro > :is(h2, h3):not(:last-child) { margin-bottom: 0.4em; } /* La regla de arriba solo arregla la mitad en el layout servicios: ademas del margin-bottom del titular, `body[data-layout="servicios"] .flow > * + *` (service-sections.css) mete 1.5em de margin-top a la bajada, y los dos se suman. Medido en Scizer el 2026-09-04: 12,35px + 28,32px = 41px de hueco entre el H2 y su propia bajada. Hace falta ganar esa especificidad (0,3,1 frente a 0,2,1) para que el par se lea como una unidad. */ body[data-layout="servicios"] .before-after-intro.flow > * + * { margin-top: 0; } .before-after-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; width: 100%; margin-top: 2rem; text-align: left; } /* Páginas con uno o dos casos: la rejilla es de cuatro columnas, así que un solo caso dejaba una tarjeta pequeña arriba a la izquierda y tres cuartos de fila vacíos sobre el gris de la sección. Es el mismo defecto que resolvió .gallery-container--tech para las tarjetas de tecnología (pendiente 31 de 04-inventario.md). Con :has() la corrección alcanza solo a esas páginas —12 con un caso y 24 con dos, medidas el 2026-09-05—: las de tres o más conservan su rejilla intacta. El tope de 620px por columna es deliberado: las fotos de casos miden 800px de ancho, así que por encima de ese valor empezarían a escalarse. */ .before-after-grid:has(> .before-after-case:only-child) { grid-template-columns: minmax(0, 620px); justify-content: center; } /* Dos casos solo se reparten en pareja a partir de tablet: por debajo, las media queries de más abajo ya bajan la rejilla a dos columnas y luego a una, y forzar aquí dos columnas dejaría celdas de ~195px en un móvil de 390. */ @media (min-width: 901px) { .before-after-grid:has(> .before-after-case:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 620px)); justify-content: center; } /* Tres casos dejaban una cuarta columna vacía de 356px sobre el gris de la sección: el mismo defecto que ya corregían las reglas de uno y dos casos, detectado el 2026-09-05 al remodelar relleno de labios. Alcanza a las 18 páginas con tres casos y el include activo. El tablero de ajedrez no cambia: con tres celdas, el ciclo de 8 pasos del escritorio ya daba blanco-navy-blanco, que es justo lo que produce la alternancia par/impar de tres columnas. */ .before-after-grid:has(> .before-after-case:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 620px)); justify-content: center; } } /* ===== UNO O DOS CASOS: COMPOSICIÓN A DOS COLUMNAS ===== Las reglas de arriba centran la rejilla, pero centrar no llena: con un solo caso la tarjeta de 620px ocupaba el 44% del ancho a 1440px y el 33% a 1920, dejando más de mil píxeles de gris vacío a los lados. Aquí el encabezado y su CTA pasan a la columna izquierda y el caso a la derecha, 50/50 y a sangre, que es el mismo lenguaje de `.bloque_doble`. Solo a partir de 901px: por debajo, la sección se apila y el caso ya ocupa el 100% del ancho, que es como debe verse en móvil. El modificador lo pone `before-after.html` cuando `page.cases.size <= 2`, así que las páginas con tres o más casos no se enteran. */ @media (min-width: 901px) { /* La columna del caso se topa al ancho nativo de las fotos para no ampliarlas nunca: los antes/después del sitio son de 800x600 y el bloque les añade 36px de padding a cada lado, así que 872px es el punto exacto en el que la foto se ve a 1,00x. Sin el tope, a 1920 salía a 881px (1,10x) y a 2560 a 888px, y se veía pixelada. El `min(50%, …)` deja intacto el reparto a la mitad mientras la mitad sea más estrecha que ese tope —a 1440 la foto va a 0,80x— y solo a partir de ~1750px empieza a ceder el sobrante a la columna de texto, que tiene su propio límite de 68ch para la prosa. */ .before-after--duo { display: grid; grid-template-columns: 1fr minmax(0, min(50%, 872px)); align-items: center; } .before-after--duo > .before-after-intro { text-align: left; margin-block: 0; /* `.intro` es un grid que centra sus hijos con `justify-items`, no con márgenes: por eso cambiar solo el `text-align` dejaba el titular a la izquierda y la bajada y el botón centrados, cada uno con su sangría. */ justify-items: start; } /* `.intro` centra sus hijos con `margin-inline: auto`, así que con solo cambiar el `text-align` el titular quedaba a la izquierda pero la bajada y el botón seguían centrados en la columna, cada uno con una sangría distinta. En una columna de texto alineada a la izquierda todos arrancan en el mismo borde. */ .before-after--duo > .before-after-intro > * { margin-inline: 0; } .before-after--duo > .before-after-grid { margin-top: 0; } /* Dentro de su columna, un caso la llena y dos se reparten a la mitad. Estas dos ganan a las reglas de 620px de arriba por especificidad. */ .before-after--duo .before-after-grid:has(> .before-after-case:only-child) { grid-template-columns: minmax(0, 1fr); } .before-after--duo .before-after-grid:has(> .before-after-case:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Cada caso es un bloque con su propio fondo, como .faq-cards__item; antes era una caja de 800px centrada con el texto centrado. Sin gap entre bloques, así que el padding puede ser más generoso, y justify-content:flex-start pega el contenido al borde superior para que las fotos arranquen a la misma altura en toda la fila. El color de texto viaja en custom properties: así el tablero solo tiene que cambiar el fondo en cada breakpoint, sin repetir selectores de color. */ .before-after-case { --case-bg: #fefefe; --case-titulo: var(--principal); --case-texto: var(--grisTexto); padding: 2.75rem 2.25rem; background-color: var(--case-bg); display: flex; flex-direction: column; justify-content: flex-start; gap: 1.25rem; } /* ===== TABLERO DE AJEDREZ: blanco / navy ===== Dos colores intercalados sobre la sección gris. Nunca columnas del mismo color, en ningún ancho. Con 4 columnas hace falta un ciclo de 8: la alternancia simple par/impar daría A B A B / A B A B, es decir columnas enteras del mismo color. fila 1 (1-4): A B A B fila 2 (5-8): B A B A */ .before-after-case:nth-child(8n + 2), .before-after-case:nth-child(8n + 4), .before-after-case:nth-child(8n + 5), .before-after-case:nth-child(8n + 7) { --case-bg: var(--principal); --case-titulo: #ffffff; --case-texto: #ffffff; } @media (max-width: 1200px) { /* 3 columnas: al ser impar, la alternancia par/impar ya da el tablero. */ .before-after-grid { grid-template-columns: repeat(3, 1fr); } .before-after-case:nth-child(n) { --case-bg: #fefefe; --case-titulo: var(--principal); --case-texto: var(--grisTexto); } .before-after-case:nth-child(even) { --case-bg: var(--principal); --case-titulo: #ffffff; --case-texto: #ffffff; } } @media (max-width: 900px) { /* 2 columnas: ciclo de 4 → A B / B A */ .before-after-grid { grid-template-columns: repeat(2, 1fr); } .before-after-case:nth-child(n) { --case-bg: #fefefe; --case-titulo: var(--principal); --case-texto: var(--grisTexto); } .before-after-case:nth-child(4n + 2), .before-after-case:nth-child(4n + 3) { --case-bg: var(--principal); --case-titulo: #ffffff; --case-texto: #ffffff; } } @media (max-width: 600px) { /* 1 columna: alternancia simple */ .before-after-grid { grid-template-columns: 1fr; } .before-after-case:nth-child(n) { --case-bg: #fefefe; --case-titulo: var(--principal); --case-texto: var(--grisTexto); } .before-after-case:nth-child(even) { --case-bg: var(--principal); --case-titulo: #ffffff; --case-texto: #ffffff; } } /* min-height de dos líneas: iguala el alto de todos los títulos para que las fotografías queden alineadas entre sí. Un título más largo sigue creciendo. */ .before-after-case h3 { margin: 0; color: var(--case-titulo); font-size: var(--fs-lg); line-height: 1.2; min-height: 2.4em; } /* Contenedor del comparador. Sin box-shadow: el bloque de color ya lo separa del fondo, y las sombras flotantes no son del lenguaje del sitio. */ .before-after-container { position: relative; width: 100%; aspect-ratio: 4/3; max-height: 560px; overflow: hidden; touch-action: none; background-color: var(--gris2, #f0f0f0); } /* Variante para fotografías verticales: la altura manda sobre el ancho (evita que un recorte 4:3 corte cabeza/pies en fotos de cuerpo entero) */ .before-after-container.is-vertical { width: auto; max-width: 100%; aspect-ratio: 3/4; height: min(70vh, 560px); margin-inline: auto; } /* Wrapper del comparador */ .before-after-wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; cursor: col-resize; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; outline: none; } /* Contenedor de imagen después */ .after-image-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } /* Contenedor de imagen antes con clip-path compatible */ .before-image-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; /* Usar polygon para mejor compatibilidad con Safari */ clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%); -webkit-clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%); transition: -webkit-clip-path 0.1s ease-out; transition: clip-path 0.1s ease-out; transition: clip-path 0.1s ease-out, -webkit-clip-path 0.1s ease-out; -webkit-transition: -webkit-clip-path 0.1s ease-out; } /* Imágenes de antes/después */ .before-image, .after-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; pointer-events: none; -webkit-user-drag: none; } /* Control deslizante */ .slider-control { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); pointer-events: none; z-index: 10; } /* Línea del deslizador */ .slider-line { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } /* Botón del deslizador */ .slider-button { position: absolute; top: 50%; left: 0; width: 48px; height: 48px; background-color: white; border-radius: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } .slider-button svg { color: var(--principal, #ccaf66); transition: transform 0.2s ease; } /* Etiquetas de comparación */ .compare-label { --label-padding: 0.5rem 1rem; --label-distance: 1.25rem; position: absolute; top: var(--label-distance); padding: var(--label-padding); background-color: white; border-radius: 24px; font-weight: bold; font-size: var(--fs-sm); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); pointer-events: none; text-transform: uppercase; letter-spacing: 0.5px; z-index: 5; } .compare-label.before { left: var(--label-distance); } .compare-label.after { right: var(--label-distance); } /* Descripción del caso. Alineada a la izquierda dentro de su bloque, como el resto del sitio; antes iba centrada y acotada a 600px sobre fondo blanco. */ .case-description, .case-description p { margin: 0; font-size: var(--fs-sm-plus); line-height: 1.6; color: var(--case-texto, var(--grisTexto)); max-width: none; } /* Fallback para navegadores que no soportan aspect-ratio */ @supports not (aspect-ratio: 4/3) { .before-after-container::before { float: left; padding-top: 75%; /* 3:4 = 75% */ content: ''; } .before-after-container::after { display: block; content: ''; clear: both; } } /* Ajustes responsivos */ @media (max-width: 480px) { .before-after-container { max-height: 420px; } .before-after-container.is-vertical { height: min(60vh, 420px); } .compare-label { --label-padding: 0.25rem 0.75rem; --label-distance: 0.75rem; font-size: var(--fs-2xs); } .slider-button { width: 36px; height: 36px; } .slider-button svg { width: 20px; height: 20px; } .case-description { font-size: var(--fs-sm); } } /* Estados activos y focus */ .before-after-wrapper:focus-visible { outline: 2px solid var(--principal, #ccaf66); outline-offset: 2px; } .before-after-wrapper:active .slider-button { transform: translate(-50%, -50%) scale(0.95); } /* Optimizaciones de rendimiento */ .before-after-wrapper, .slider-control, .before-image-container { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-style: preserve-3d; perspective: 1000px; } /* Mejoras de accesibilidad */ @media (prefers-reduced-motion: reduce) { .before-image-container, .slider-button, .compare-label { transition: none; -webkit-transition: none; } }