/* ====================================================================== RESPONSIVE-V1 — capa final de estabilidad visual Objetivo: 320px -> 2560px sin cambiar URLs ni rediseñar el sitio. Se carga al final del para corregir reglas antiguas/inline. ====================================================================== */ /* ---------- Base segura ---------- */ html { max-width: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { max-width: 100%; min-width: 0; overflow-x: hidden; } @supports (overflow: clip) { html, body { overflow-x: clip; } } img, picture, video, canvas { max-width: 100%; height: auto; } iframe { max-width: 100%; } .container, .container-fluid, .row, .row > *, .navbar, .navbar-collapse, .navbar-nav, .contact-card, .service-item, .service-card, .blog-item, .thoughts-card, .tema-card { min-width: 0; } .form-control, .form-select, textarea, input, select, button { min-width: 0; max-width: 100%; } h1, h2, h3, h4, h5, h6, .footer-item p, .footer-item a, .cta-location, .site-legal-links { overflow-wrap: break-word; word-break: normal; } /* ---------- Navbar: escritorio ---------- */ @media (min-width: 992px) { .navbar-expand-lg .navbar-collapse { min-width: 0; gap: clamp(.35rem, .8vw, 1rem); } .navbar .navbar-nav { width: auto !important; min-width: 0; flex: 1 1 auto; justify-content: center; } .navbar .navbar-nav .nav-item { min-width: 0; flex: 0 1 auto; } .navbar .navbar-nav .nav-link { white-space: nowrap; } .navbar-collapse > .btn { flex: 0 0 auto; } } /* Franja 992-1199: evita que el menú y CTA choquen. */ @media (min-width: 992px) and (max-width: 1199.98px) { .navbar-brand img { width: auto !important; max-width: 110px !important; max-height: 80px !important; } .navbar .navbar-nav .nav-item { padding: .35rem !important; } .navbar .navbar-nav .nav-link { padding-left: .28rem !important; padding-right: .28rem !important; font-size: .82rem !important; } .navbar-collapse > .btn { margin-left: .4rem !important; padding: .55rem .75rem !important; font-size: .80rem; white-space: nowrap; } .cta-location { white-space: normal; line-height: 1.35; } } /* ---------- Navbar: tablet/móvil ---------- */ @media (max-width: 991.98px) { .navbar { padding: .75rem 0 !important; } .navbar-brand { min-width: 0; flex: 0 1 auto; } .navbar-brand img, .nav-bar .navbar-light .navbar-brand img { width: auto !important; height: auto !important; max-width: min(54vw, 180px) !important; max-height: 76px !important; } .navbar.navbar-expand-lg .navbar-toggler { flex: 0 0 auto; margin-left: auto; padding: .55rem .72rem !important; font-size: 1.35rem; line-height: 1; } .navbar-collapse { width: 100%; } .navbar .navbar-nav { width: 100% !important; margin-top: .75rem !important; padding: .5rem !important; max-height: calc(100svh - 150px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } .navbar .navbar-nav .nav-item, .navbar .navbar-nav .nav-link { width: 100%; min-width: 0; padding: .65rem .75rem !important; justify-content: center !important; text-align: center; white-space: normal; } .navbar-collapse > .btn { display: block; width: 100%; max-width: 100%; margin: .75rem 0 0 !important; text-align: center; white-space: normal; } } /* ---------- Hero/carousel ---------- */ @media (max-width: 991.98px) { .header-carousel .header-carousel-item { height: auto !important; min-height: 0 !important; } .header-carousel .header-carousel-item.hero { display: block !important; min-height: 80vh !important; padding: 0 !important; } .header-carousel .header-carousel-item .carousel-caption { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: clamp(3rem, 9vw, 5rem) 0 clamp(5rem, 11vw, 6.5rem) !important; } .header-carousel .calrousel-img img { width: 100%; max-height: min(46vh, 420px); object-fit: contain; } .hero:not(.header-carousel-item) { min-height: auto !important; padding: clamp(72px, 12vw, 110px) 0 !important; } } @media (max-width: 575.98px) { .header-carousel h1, .hero h1, .display-1 { font-size: clamp(1.9rem, 9vw, 2.55rem) !important; line-height: 1.12 !important; } .display-4, .display-5 { font-size: clamp(1.75rem, 8vw, 2.25rem) !important; line-height: 1.16 !important; } .header-carousel p, .hero p.lead { font-size: clamp(.98rem, 4.2vw, 1.08rem) !important; } .header-carousel .d-flex { flex-wrap: wrap !important; gap: .75rem; } .header-carousel .d-flex > .btn { width: 100%; flex: 1 1 100%; margin: 0 !important; white-space: normal; } .header-carousel .owl-nav .owl-prev, .header-carousel .owl-nav .owl-next { bottom: 12px !important; } } /* ---------- Formularios y contacto ---------- */ #contactForm, #contactForm .row, #contactForm .form-floating, #contactForm .form-control, #contactForm .form-select { min-width: 0; max-width: 100%; } .horario-badge { max-width: 100%; white-space: normal; flex-wrap: wrap; } #confirmToast { max-width: calc(100vw - 2rem) !important; } @media (max-width: 575.98px) { .contact .row.g-2.text-center > .col-4 { width: 100%; } .contact .info-card p, .contact .info-card a { overflow-wrap: anywhere; } #contactForm .col-6 { width: 100%; } .contact-card { padding: clamp(1rem, 5vw, 1.5rem) !important; } .tema-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .65rem !important; } .tema-card { min-width: 0 !important; padding-left: .45rem !important; padding-right: .45rem !important; } .tema-text { overflow-wrap: anywhere; } .intensidad-section { padding: 1rem !important; } .controls-wrapper { max-width: 100% !important; } .ticks { gap: .25rem; font-size: .58rem !important; } #submitBtn { white-space: normal; line-height: 1.35; } } /* ---------- Espaciado móvil ---------- */ @media (max-width: 575.98px) { .p-5 { padding: 1.25rem !important; } .px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .ps-5 { padding-left: 1.25rem !important; } .badge { max-width: 100%; white-space: normal; } .back-to-top { right: 12px !important; bottom: 82px !important; } } /* ---------- Footer y contenido largo ---------- */ .footer, .copyright, .site-legal-links { max-width: 100%; } .footer-item a, .footer-item p { max-width: 100%; } /* ---------- Pantallas bajas / horizontal ---------- */ @media (max-width: 991.98px) and (max-height: 520px) { .navbar .navbar-nav { max-height: calc(100svh - 105px); } .header-carousel .header-carousel-item .carousel-caption { padding-top: 2rem !important; padding-bottom: 4.5rem !important; } } /* ---------- Accesibilidad de movimiento ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } } /* ===== DESIGN-SYSTEM-V1 ===== Unificación visual del sitio. No modifica identidad, colores principales ni contenido. ============================================================ */ :root { --je-content-max: 1320px; --je-radius-sm: 10px; --je-radius-md: 16px; --je-radius-lg: 24px; --je-control-h: 46px; --je-shadow-soft: 0 10px 30px rgba(10, 28, 60, .08); --je-shadow-card: 0 12px 34px rgba(10, 28, 60, .10); --je-section-space: clamp(3rem, 6vw, 5.5rem); } /* ============================================================ ESTRUCTURA GENERAL ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { width: 100%; margin: 0; } body { min-height: 100vh; } .container { width: 100%; max-width: var(--je-content-max); } .row > * { min-width: 0; } section, main, header, footer { min-width: 0; } p, li, a, span, label { overflow-wrap: break-word; } h1, h2, h3, h4, h5, h6 { max-width: 100%; line-height: 1.18; } /* ============================================================ BOTONES ============================================================ */ .btn:not(.btn-square):not(.btn-sm-square):not(.btn-md-square):not(.btn-lg-square):not(.btn-xl-square) { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; line-height: 1.25; white-space: normal; border-radius: 999px; padding-left: clamp(1rem, 2vw, 1.5rem); padding-right: clamp(1rem, 2vw, 1.5rem); } .btn i, .btn svg { flex: 0 0 auto; } /* ============================================================ NAVBAR GLOBAL ============================================================ */ .nav-bar { width: 100%; } .nav-bar > .container, .nav-bar > .container-fluid { min-width: 0; } .navbar { width: 100%; min-height: 88px; display: flex; align-items: center; gap: .75rem; } .navbar-brand { flex: 0 0 auto; display: flex; align-items: center; margin-right: clamp(.5rem, 1.5vw, 1.25rem); } .navbar-brand img { display: block; width: auto !important; height: auto !important; max-width: 150px; max-height: 94px; object-fit: contain; } .navbar-collapse { min-width: 0; } .navbar-nav { min-width: 0; } .navbar .navbar-nav .nav-link { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; line-height: 1.2; border-radius: var(--je-radius-sm); } .navbar .navbar-nav .nav-link.active { font-weight: 700; } .navbar .navbar-nav .nav-link.active::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 3px; height: 2px; background: currentColor; border-radius: 999px; opacity: .65; } .navbar-collapse > .btn { min-width: max-content; } /* Desktop */ @media (min-width: 1200px) { .navbar { min-height: 104px; } .navbar .navbar-nav { gap: .05rem; } .navbar .navbar-nav .nav-item, .navbar .navbar-nav .nav-link { min-height: 46px; } .navbar .navbar-nav .nav-link { padding-left: .72rem !important; padding-right: .72rem !important; } } /* Tablet y móvil */ @media (max-width: 991.98px) { .navbar { min-height: 78px; flex-wrap: wrap; padding-top: .55rem !important; padding-bottom: .55rem !important; } .navbar-brand img { max-width: min(48vw, 145px) !important; max-height: 72px !important; } .navbar-toggler { width: 48px; height: 48px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px !important; } .navbar-toggler .bi, .navbar-toggler i, .navbar-toggler span { line-height: 1; } .navbar-collapse { flex-basis: 100%; margin-top: .45rem; } .navbar .navbar-nav { gap: .2rem; margin-top: .5rem !important; padding: .65rem !important; border-radius: var(--je-radius-md) !important; } .navbar .navbar-nav .nav-link { min-height: 46px; padding: .7rem 1rem !important; } .navbar .navbar-nav .nav-link.active::after { left: 38%; right: 38%; bottom: 5px; } .navbar-collapse > .btn { width: 100%; min-width: 0; margin-top: .65rem !important; margin-left: 0 !important; min-height: 48px; } } /* ============================================================ HERO ============================================================ */ .header-carousel, .header-carousel .owl-stage-outer, .header-carousel .owl-stage, .header-carousel .owl-item { min-width: 0; } .header-carousel-item, .hero { overflow: hidden; } .header-carousel h1, .hero h1 { max-width: 100%; } .header-carousel p, .hero p { max-width: 820px; } .header-carousel img, .hero img { display: block; max-width: 100%; height: auto; } @media (min-width: 992px) { .header-carousel .carousel-caption > .container, .hero > .container { max-width: var(--je-content-max); } } /* ============================================================ TARJETAS ============================================================ */ .service-item, .service-card, .blog-item, .thoughts-card, .contact-card, .info-card, .tema-card, .card { min-width: 0; } .row > [class*="col-"] > .service-item, .row > [class*="col-"] > .service-card, .row > [class*="col-"] > .blog-item, .row > [class*="col-"] > .thoughts-card, .row > [class*="col-"] > .contact-card, .row > [class*="col-"] > .info-card { height: 100%; } .service-item, .service-card, .blog-item, .thoughts-card, .contact-card, .info-card { border-radius: var(--je-radius-md); overflow: hidden; } .service-item, .service-card, .blog-item, .thoughts-card { transition: transform .25s ease, box-shadow .25s ease; } @media (hover: hover) { .service-item:hover, .service-card:hover, .blog-item:hover, .thoughts-card:hover { transform: translateY(-3px); box-shadow: var(--je-shadow-card); } } /* ============================================================ IMÁGENES DE TARJETAS ============================================================ */ .service-item img, .service-card img, .blog-item img, .thoughts-card img { display: block; width: 100%; object-fit: cover; } /* ============================================================ FORMULARIOS ============================================================ */ .form-control, .form-select { width: 100%; min-height: var(--je-control-h); border-radius: var(--je-radius-sm); } textarea.form-control { min-height: 120px; resize: vertical; } .form-floating { width: 100%; min-width: 0; } .form-floating > .form-control, .form-floating > .form-select { width: 100%; } .form-label { margin-bottom: .45rem; } #contactForm .row { align-items: stretch; } #contactForm .form-control, #contactForm .form-select, #contactForm textarea { font-size: 16px; } /* evita zoom automático de Safari/iOS */ @media (max-width: 991.98px) { input, select, textarea, .form-control, .form-select { font-size: 16px !important; } } /* ============================================================ TEMAS DEL FORMULARIO ============================================================ */ .tema-grid { width: 100%; } .tema-card { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 74px; border-radius: var(--je-radius-sm); text-align: center; } .tema-text { width: 100%; line-height: 1.25; } /* Móviles muy pequeños: una sola columna */ @media (max-width: 359.98px) { .tema-grid { grid-template-columns: 1fr !important; } } /* ============================================================ FOOTER ============================================================ */ .footer { width: 100%; } .footer .container { max-width: var(--je-content-max); } .footer .row { align-items: flex-start; } .footer-item { min-width: 0; } .footer-item h4, .footer-item h2, .footer-item h3 { line-height: 1.25; } .footer-item > a:not(.btn), .footer-item > p { max-width: 100%; } .footer-item > a:not(.btn) { display: block; width: fit-content; margin-bottom: .55rem; line-height: 1.5; } .footer-btn { display: flex; flex-wrap: wrap; gap: .5rem; } .footer-btn .btn { margin-right: 0 !important; } /* Footer simple */ .simple-footer .row { align-items: center; } .simple-footer a { display: inline-flex; align-items: center; min-height: 44px; } /* ============================================================ LEGAL ============================================================ */ .site-legal-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .25rem .8rem; } .site-legal-links a { display: inline-flex; align-items: center; min-height: 36px; margin: 0 !important; } /* ============================================================ FAB + BACK TO TOP ============================================================ */ .social-fab { right: max( 14px, env(safe-area-inset-right) ); bottom: max( 14px, env(safe-area-inset-bottom) ); } .back-to-top { right: max( 14px, env(safe-area-inset-right) ) !important; } .social-fab-label { max-width: min(210px, 62vw); overflow: hidden; text-overflow: ellipsis; } /* ============================================================ MOBILE 320 - 575 ============================================================ */ @media (max-width: 575.98px) { .container, .container-fluid { --bs-gutter-x: 1.5rem; } .row { --bs-gutter-x: 1.25rem; } .py-5 { padding-top: 2.6rem !important; padding-bottom: 2.6rem !important; } .my-5 { margin-top: 2.6rem !important; margin-bottom: 2.6rem !important; } .display-1 { font-size: clamp( 2rem, 10vw, 2.75rem ) !important; } .display-4, .display-5 { font-size: clamp( 1.75rem, 8vw, 2.3rem ) !important; } h1 { line-height: 1.1; } h2 { line-height: 1.15; } .btn { max-width: 100%; } .footer { text-align: left; } .footer-item { margin-bottom: .6rem; } .footer-item > a:not(.btn) { width: 100%; } .simple-footer, .simple-footer .text-md-end { text-align: center !important; } .simple-footer a { margin: .15rem .35rem !important; } } /* ============================================================ TABLET ============================================================ */ @media ( min-width: 576px ) and ( max-width: 991.98px ) { .container, .container-fluid { --bs-gutter-x: 2rem; } .footer .row.g-5 { --bs-gutter-y: 2rem; } } /* ============================================================ PANTALLAS GRANDES ============================================================ */ @media (min-width: 1600px) { body { font-size: 1.02rem; } .container { max-width: var(--je-content-max); } } /* ============================================================ ZOOM / ACCESIBILIDAD ============================================================ */ @media (prefers-reduced-motion: reduce) { .service-item, .service-card, .blog-item, .thoughts-card { transform: none !important; } } /* ===== END DESIGN-SYSTEM-V1 ===== */ /* Ajuste fino: centrar indicador activo del navbar */ .navbar .navbar-nav .nav-link.active::after { left: 50%; right: auto; width: 42%; transform: translateX(-50%); } @media (max-width: 991.98px) { .navbar .navbar-nav .nav-link.active::after { left: 50%; right: auto; width: 24%; transform: translateX(-50%); } } /* ===== MOBILE-HEADER-INDEX-V1 ===== Encabezado móvil normalizado tomando index como referencia. ========================================================== */ @media (max-width: 991.98px) { /* Mantener exactamente la misma altura base del encabezado */ .navbar { width: 100% !important; min-height: 78px !important; padding-top: .55rem !important; padding-bottom: .55rem !important; align-items: center !important; } /* Logo estable en todas las páginas */ .navbar-brand { flex: 0 0 auto !important; margin-right: auto !important; } .navbar-brand img { width: auto !important; height: auto !important; max-width: min(48vw, 145px) !important; max-height: 72px !important; object-fit: contain !important; } /* Hamburguesa: mismo tamaño en todas las páginas */ .navbar-toggler { flex: 0 0 48px !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 !important; } /* Menú desplegable */ .navbar-collapse { width: 100% !important; min-width: 0 !important; flex-basis: 100% !important; } .navbar .navbar-nav { width: 100% !important; min-width: 0 !important; align-items: stretch !important; } /* * Evita que Nuestro Enfoque y Bienestar Corporativo * formen una caja más alta que las otras pestañas. */ .navbar .navbar-nav .nav-link { width: 100% !important; min-height: 46px !important; height: 46px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; padding: .65rem .9rem !important; line-height: 1.15 !important; white-space: nowrap !important; font-size: clamp( .86rem, 3.5vw, 1rem ) !important; } /* * El botón de llamada/WhatsApp NO debe ocupar * todo el ancho del menú. */ .navbar-collapse .btn { width: fit-content !important; min-width: 0 !important; max-width: 100% !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: flex-start !important; flex: 0 0 auto !important; padding: .55rem 1.15rem !important; margin-left: 0 !important; margin-right: 0 !important; white-space: nowrap !important; } /* * Si el botón está dentro de un contenedor flex, * impedir que el padre lo estire. */ .navbar-collapse .d-flex { align-items: flex-start !important; } } /* Pantallas móviles muy pequeñas */ @media (max-width: 359.98px) { .navbar .navbar-nav .nav-link { font-size: .84rem !important; padding-left: .75rem !important; padding-right: .75rem !important; } .navbar-collapse .btn { font-size: .9rem !important; } } /* ===== END MOBILE-HEADER-INDEX-V1 ===== */ /* MOBILE-HEADER-BRAND-SIGNATURE-V1:START */ /* ========================================================== IDENTIDAD DEL HEADER MÓVIL 0 - 767 px: [ símbolo ] [ Jurgen Espinoza / Psicólogo ] [ menú ] 768 px en adelante: diseño original intacto. La firma mantiene siempre su proporción. ========================================================== */ /* Por defecto la firma no existe visualmente */ .nav-bar .navbar::before { content: none; } /* ========================================================== SOLO MÓVIL ========================================================== */ @media (max-width: 767.98px) { /* * Tres zonas simétricas. * * Esto evita que la firma se mueva * cuando cambia el ancho de pantalla. */ body .nav-bar .navbar { display: grid !important; grid-template-columns: clamp( 58px, 18vw, 74px ) minmax( 0, 1fr ) clamp( 58px, 18vw, 74px ); grid-template-rows: auto auto; column-gap: clamp( 6px, 2vw, 10px ) !important; row-gap: 0 !important; align-items: center !important; width: 100% !important; min-height: 78px !important; /* * Mantenemos exactamente * la altura/padding móvil existente. */ padding-top: .55rem !important; padding-bottom: .55rem !important; } /* ====================================================== LOGO Ψ — IZQUIERDA ====================================================== */ body .nav-bar .navbar > .navbar-brand { grid-column: 1; grid-row: 1; justify-self: start; align-self: center; width: auto; max-width: 100%; margin: 0 !important; padding: 0 !important; flex: none !important; } /* * El logo conserva aspect ratio. * Nunca recibe ancho + alto forzado. */ body .nav-bar .navbar > .navbar-brand img { display: block !important; width: auto !important; height: auto !important; max-width: clamp( 58px, 18vw, 74px ) !important; max-height: 70px !important; object-fit: contain !important; object-position: center !important; } /* ====================================================== FIRMA CENTRAL marca-header-mobile.webp ====================================================== */ body .nav-bar .navbar::before { content: ""; grid-column: 2; grid-row: 1; justify-self: center; align-self: center; display: block; width: min( clamp( 132px, 42vw, 185px ), 100% ); height: clamp( 34px, 10vw, 44px ); min-width: 0; /* * La imagen que subiste tiene * espacio blanco alrededor. * * Se amplía proporcionalmente * dentro de esta ventana. * * NO se estira. * NO cambia su relación de aspecto. */ background-image: url("../img/marca-header-mobile.webp"); background-repeat: no-repeat; background-position: center; background-size: 230% auto; overflow: hidden; pointer-events: none; } /* ====================================================== HAMBURGUESA — DERECHA ====================================================== */ body .nav-bar .navbar > .navbar-toggler { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 !important; } /* ====================================================== MENÚ ABIERTO Sigue ocupando toda la segunda fila. ====================================================== */ body .nav-bar .navbar > .navbar-collapse { grid-column: 1 / -1; grid-row: 2; width: 100% !important; min-width: 0 !important; flex-basis: auto !important; } } /* ========================================================== MÓVIL MUY PEQUEÑO 320 - 359 px ========================================================== */ @media (max-width: 359.98px) { body .nav-bar .navbar { grid-template-columns: 58px minmax( 0, 1fr ) 58px; column-gap: 5px !important; } body .nav-bar .navbar::before { width: min( 132px, 100% ); height: 34px; background-size: 225% auto; } body .nav-bar .navbar > .navbar-brand img { max-width: 58px !important; max-height: 66px !important; } } /* ========================================================== DESDE TABLET EN ADELANTE Garantía explícita: no aparece la firma. ========================================================== */ @media (min-width: 768px) { body .nav-bar .navbar::before { content: none !important; display: none !important; } } /* MOBILE-HEADER-BRAND-SIGNATURE-V1:END */