/* ========================================================================== NOVA STEM LAB — Sistema visual Paleta monocromática azul derivada del logotipo oficial. ========================================================================== */ :root{ /* --- Superficies --- */ --ink: #030D1F; /* fondo profundo */ --navy: #08203F; /* superficie base */ --navy-lift: #0D2E58; /* tarjetas y superficies elevadas */ --navy-edge: #16406F; /* bordes */ /* --- Marca --- */ --blue: #0B6FD4; /* azul primario */ --blue-deep: #084E9A; --cyan: #22B9F5; /* acento luminoso único */ --ice: #C8E4F7; /* plata premium */ /* --- Texto --- */ --text: #EAF4FD; --text-2: #9DBBD6; --text-3: #6E8CAB; /* --- Semánticos --- */ --warn: #F2B24C; --danger: #F0685E; /* --- Espaciado (escala 4/8) --- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10:128px; /* --- Radios --- */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px; /* --- Movimiento --- */ --e-out: cubic-bezier(.16,1,.3,1); --e-io: cubic-bezier(.65,0,.35,1); --t-fast: 160ms; --t-mid: 260ms; --t-slow: 420ms; /* --- Capas --- */ --z-canvas: 0; --z-body: 10; --z-nav: 100; --z-float: 200; --z-toast: 300; --container: 1200px; --nav-h: 74px; } /* ========================================================================== Reset ========================================================================== */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); /* En (no en ): así se aplica a la ventana y el no se convierte en contenedor de scroll, lo que rompería position:sticky. */ overflow-x:hidden; } /* Menú móvil abierto: la página de fondo no se desplaza */ html.menu-open{ overflow:hidden; } body{ margin:0; background:var(--ink); color:var(--text); font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; } img{ max-width:100%; height:auto; display:block; } button,input,select,textarea{ font:inherit; color:inherit; } button{ cursor:pointer; background:none; border:0; } a{ color:var(--cyan); text-decoration:none; } a:hover{ text-decoration:underline; } h1,h2,h3,h4{ font-family:'Sora',system-ui,sans-serif; font-weight:600; line-height:1.18; letter-spacing:-.02em; margin:0; text-wrap:balance; } p{ margin:0; } ul,ol,dl,dd{ margin:0; padding:0; list-style:none; } :focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:var(--r-sm); } ::selection{ background:var(--blue); color:#fff; } /* ========================================================================== Utilidades ========================================================================== */ .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--s-5); } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .skip-link{ position:absolute; top:-100px; left:var(--s-4); z-index:calc(var(--z-nav) + 1); background:var(--cyan); color:var(--ink); padding:var(--s-3) var(--s-5); border-radius:var(--r-sm); font-weight:600; transition:top var(--t-fast); } .skip-link:focus{ top:var(--s-4); text-decoration:none; } .grad{ background:linear-gradient(100deg,var(--cyan) 0%,var(--ice) 55%,var(--cyan) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .pend{ color:var(--warn); font-style:normal; font-size:.86em; border-bottom:1px dashed rgba(242,178,76,.5); } /* --- Animación de entrada --- */ .reveal{ opacity:0; transform:translate3d(0,26px,0); transition:opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out); transition-delay:calc(var(--d,0) * 70ms); } .reveal.is-in{ opacity:1; transform:none; } /* ========================================================================== Navegación ========================================================================== */ .nav{ position:fixed; inset:0 0 auto 0; z-index:var(--z-nav); background:rgba(3,13,31,0); transition:background var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out), backdrop-filter var(--t-mid); } .nav.is-stuck{ background:rgba(4,15,35,.86); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); box-shadow:0 1px 0 rgba(34,185,245,.14), 0 12px 40px rgba(0,0,0,.42); } /* La barra es más ancha que el contenido: con diez enlaces y el botón, en 1200 px no cabían y el botón «Agendar evaluación» quedaba cortado. */ .nav__inner{ max-width:1480px; margin-inline:auto; padding:0 var(--s-5); height:var(--nav-h); display:flex; align-items:center; gap:var(--s-5); } .nav__brand{ display:flex; align-items:center; gap:14px; color:var(--text); text-decoration:none; flex-shrink:0; } .nav__brand:hover{ text-decoration:none; } /* --- Marca: emblema con halo + logotipo en dos líneas, como el logo oficial --- */ .brand__mark{ position:relative; display:grid; place-items:center; width:60px; height:50px; flex-shrink:0; transition:width var(--t-mid) var(--e-out), height var(--t-mid) var(--e-out); } .brand__mark::before{ content:''; position:absolute; inset:-8px -4px; border-radius:50%; background:radial-gradient(closest-side, rgba(34,185,245,.34), rgba(34,185,245,.08) 62%, transparent 78%); animation:brandGlow 5s var(--e-io) infinite alternate; pointer-events:none; } @keyframes brandGlow{ from{ opacity:.5; transform:scale(.9); } to { opacity:1; transform:scale(1.06); } } .nav__mark{ position:relative; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 8px rgba(34,185,245,.42)); transition:opacity var(--t-mid) var(--e-out), transform var(--t-slow) var(--e-out); } .nav__brand:hover .nav__mark{ transform:scale(1.06) rotate(-3deg); } .brand__word{ position:relative; display:flex; flex-direction:column; align-items:flex-start; padding-left:14px; line-height:1; white-space:nowrap; } .brand__word::before{ content:''; position:absolute; left:0; top:1px; bottom:1px; width:1px; background:linear-gradient(180deg, transparent, rgba(34,185,245,.75), transparent); } .brand__nova{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.36rem; letter-spacing:.22em; margin-right:-.22em; /* Plata pulida, como las letras del logotipo */ background:linear-gradient(180deg,#FFFFFF 0%,#E6F2FC 36%,#93B8D8 52%,#F2F8FE 70%,#C4DCF0 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#EAF4FD; } .brand__sub{ position:relative; margin-top:6px; padding-top:5px; font-family:'Sora',sans-serif; font-weight:600; font-size:.6rem; letter-spacing:.44em; color:#5FCDF9; } .brand__sub::before{ content:''; position:absolute; top:0; left:0; right:.44em; height:1px; background:linear-gradient(90deg, rgba(34,185,245,0), rgba(140,222,255,.95) 50%, rgba(34,185,245,0)); } .nav.is-stuck .brand__mark{ width:54px; height:44px; } /* Acceso discreto (5 toques sobre el logo): respuesta muy sutil */ .brand__mark.is-charging .nav__mark{ transform:scale(calc(1 + var(--carga,0) * .03)); filter:drop-shadow(0 0 calc(8px + var(--carga,0) * 5px) rgba(34,185,245,.85)); } .brand__mark.is-open::after{ content:''; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(34,185,245,.85); box-shadow:0 0 0 6px rgba(34,185,245,.12), 0 0 36px rgba(34,185,245,.6); } .nav__links{ margin-left:auto; display:flex; align-items:center; gap:2px; } .nav__links > a{ color:var(--text-2); font-size:.88rem; font-weight:500; padding:var(--s-2) 10px; border-radius:var(--r-sm); white-space:nowrap; transition:color var(--t-fast), background var(--t-fast); } .nav__links > a:hover{ color:var(--text); background:rgba(34,185,245,.09); text-decoration:none; } .nav__links > a.is-current{ color:var(--cyan); } .nav__links > a.is-b2b::before{ content:''; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--ice); vertical-align:middle; } .nav__links > a.nav__cta{ margin-left:var(--s-2); background:var(--blue); color:#fff; font-weight:600; padding:10px var(--s-5); border-radius:var(--r-full); box-shadow:0 6px 22px rgba(11,111,212,.36); } .nav__links > a.nav__cta:hover{ background:var(--cyan); color:var(--ink); transform:translateY(-1px); } /* Dirección y teléfono al pie del menú móvil; en escritorio no se muestra */ .nav__menuInfo{ display:none; } .nav__burger{ display:none; margin-left:auto; width:44px; height:44px; flex-direction:column; justify-content:center; align-items:center; gap:5px; border-radius:var(--r-sm); } .nav__burger span{ display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform var(--t-mid) var(--e-out), opacity var(--t-fast); } .nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .nav__progress{ height:2px; width:0%; background:linear-gradient(90deg,var(--blue),var(--cyan)); transition:width 90ms linear; } /* ========================================================================== Hero ========================================================================== */ .hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding:calc(var(--nav-h) + var(--s-8)) 0 var(--s-9); overflow:hidden; background: radial-gradient(1100px 620px at 50% 8%, rgba(11,111,212,.22), transparent 62%), radial-gradient(760px 520px at 82% 78%, rgba(34,185,245,.12), transparent 66%), var(--ink); } .hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:var(--z-canvas); opacity:.85; } .hero__veil{ position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(3,13,31,.55) 0%, transparent 22%, transparent 62%, var(--ink) 100%); pointer-events:none; } .hero__content{ position:relative; z-index:var(--z-body); text-align:center; max-width:940px; } .hero__logo{ width:min(280px,58vw); height:auto; margin:0 auto var(--s-5); filter:drop-shadow(0 0 40px rgba(34,185,245,.34)); } .eyebrow{ display:inline-flex; align-items:center; gap:var(--s-2); font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ice); padding:8px var(--s-4); border:1px solid rgba(34,185,245,.28); border-radius:var(--r-full); background:rgba(13,46,88,.42); margin-bottom:var(--s-5); } .eyebrow__dot{ width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 0 rgba(34,185,245,.7); animation:pulse 2.6s infinite; } @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(34,185,245,.55); } 70%{ box-shadow:0 0 0 11px rgba(34,185,245,0); } 100%{ box-shadow:0 0 0 0 rgba(34,185,245,0); } } .hero__title{ font-size:clamp(2.1rem,5.4vw,4rem); font-weight:700; letter-spacing:-.035em; margin-bottom:var(--s-5); } .hero__lead{ font-size:clamp(1rem,1.7vw,1.19rem); color:var(--text-2); max-width:66ch; margin:0 auto var(--s-7); } .hero__actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); justify-content:center; margin-bottom:var(--s-7); } .hero__pills{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); justify-content:center; font-size:.85rem; color:var(--text-3); } .hero__pills li{ display:flex; align-items:center; gap:var(--s-2); } .hero__pills li::before{ content:''; width:14px; height:2px; background:var(--cyan); opacity:.8; border-radius:2px; } .hero__scroll{ position:absolute; left:50%; bottom:var(--s-5); transform:translateX(-50%); z-index:var(--z-body); width:44px; height:56px; display:flex; align-items:flex-end; justify-content:center; } .hero__scrollLine{ width:1px; height:40px; background:linear-gradient(180deg,transparent,var(--cyan)); animation:scrollHint 2.2s var(--e-io) infinite; } @keyframes scrollHint{ 0%,100%{ opacity:.25; transform:scaleY(.55); transform-origin:bottom; } 50% { opacity:1; transform:scaleY(1); transform-origin:bottom; } } /* ========================================================================== Botones ========================================================================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); min-height:48px; padding:12px var(--s-6); border-radius:var(--r-full); font-family:'Sora',sans-serif; font-size:.94rem; font-weight:600; letter-spacing:.01em; text-decoration:none; transition:transform var(--t-fast) var(--e-out), background var(--t-fast), box-shadow var(--t-fast), color var(--t-fast); } .btn:hover{ text-decoration:none; } .btn:active{ transform:scale(.975); } .btn svg{ width:18px; height:18px; flex-shrink:0; } .btn__wa{ width:20px; height:20px; } .btn--primary{ background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff; box-shadow:0 8px 28px rgba(11,111,212,.4); } .btn--primary:hover{ background:linear-gradient(135deg,var(--cyan),var(--blue)); transform:translateY(-2px); box-shadow:0 12px 34px rgba(34,185,245,.42); } .btn--ghost{ background:rgba(13,46,88,.5); color:var(--text); border:1px solid var(--navy-edge); } .btn--ghost:hover{ border-color:var(--cyan); background:rgba(34,185,245,.12); transform:translateY(-2px); } .btn--pro{ background:transparent; color:var(--ice); border:1px dashed rgba(200,228,247,.42); } .btn--pro:hover{ border-style:solid; border-color:var(--ice); background:rgba(200,228,247,.08); } .btn--green{ background:var(--ice); color:var(--ink); box-shadow:0 8px 26px rgba(200,228,247,.2); } .btn--green:hover{ background:#fff; transform:translateY(-2px); } .btn--greenGhost{ background:transparent; color:var(--ice); border:1px solid rgba(200,228,247,.34); } .btn--greenGhost:hover{ border-color:var(--ice); background:rgba(200,228,247,.09); } .btn--block{ width:100%; } /* ========================================================================== Secciones y encabezados ========================================================================== */ .section{ position:relative; padding-block:var(--s-9); } .secHead{ max-width:820px; margin-bottom:var(--s-8); } .secHead--center{ margin-inline:auto; text-align:center; } .secHead__logo{ width:min(240px,52vw); margin-bottom:var(--s-5); filter:drop-shadow(0 0 32px rgba(34,185,245,.3)); } .secHead__logo--nano{ width:min(340px,68vw); filter:drop-shadow(0 0 38px rgba(34,185,245,.34)); } .secHead__tag{ display:inline-flex; align-items:center; gap:var(--s-2); font-size:.75rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); margin-bottom:var(--s-4); } .secHead__tag::before{ content:''; width:26px; height:1px; background:var(--cyan); opacity:.7; } .secHead--center .secHead__tag::before{ display:none; } .secHead__tag--b2b{ color:var(--ice); } .lockIcon{ display:inline-flex; } .lockIcon svg{ width:15px; height:15px; } .secHead__title{ font-size:clamp(1.75rem,3.6vw,2.85rem); margin-bottom:var(--s-4); } .secHead__b2bsub{ font-family:'Sora',sans-serif; font-size:clamp(1rem,1.8vw,1.3rem); color:var(--ice); margin-bottom:var(--s-4); } .secHead__lead{ color:var(--text-2); font-size:1.04rem; max-width:68ch; } .secHead--center .secHead__lead{ margin-inline:auto; } .subHead{ font-size:clamp(1.15rem,2vw,1.45rem); margin:var(--s-8) 0 var(--s-5); padding-left:var(--s-4); border-left:3px solid var(--cyan); } .subHead--tight{ margin-top:0; } .subHead--center{ text-align:center; border-left:0; padding-left:0; } /* ========================================================================== Tres ramas ========================================================================== */ .section--ramas{ background:linear-gradient(180deg,var(--ink),var(--navy) 60%,var(--ink)); } .ramas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:var(--s-5); } .rama{ position:relative; padding:var(--s-7) var(--s-6); border-radius:var(--r-xl); background:linear-gradient(165deg,rgba(13,46,88,.72),rgba(8,32,63,.55)); border:1px solid var(--navy-edge); overflow:hidden; transition:transform var(--t-mid) var(--e-out), border-color var(--t-mid), box-shadow var(--t-mid); } .rama:hover{ transform:translateY(-6px); border-color:rgba(34,185,245,.5); box-shadow:0 22px 60px rgba(0,0,0,.45); } .rama__glow{ position:absolute; top:-52%; right:-32%; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(34,185,245,.3),transparent 68%); opacity:.55; transition:opacity var(--t-slow), transform var(--t-slow) var(--e-out); pointer-events:none; } .rama:hover .rama__glow{ opacity:1; transform:scale(1.18); } /* Banda de imagen de la tarjeta. Si no hay imagen cargada, el degradado se ve como un acento intencional: la tarjeta nunca aparece rota ni con el icono de imagen ausente. */ .rama__foto{ position:relative; margin:calc(var(--s-7) * -1) calc(var(--s-6) * -1) var(--s-5); aspect-ratio:16/9; overflow:hidden; border-radius:var(--r-xl) var(--r-xl) 0 0; background:linear-gradient(150deg,rgba(11,111,212,.32),rgba(8,32,63,.9)); } .rama__foto img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--t-slow) var(--e-out); } .rama:hover .rama__foto img{ transform:scale(1.05); } .rama__foto::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(8,32,63,.9) 100%); pointer-events:none; } .rama--estet .rama__foto{ background:linear-gradient(150deg,rgba(212,179,104,.32),rgba(26,23,13,.9)); } .rama--estet .rama__foto::after{ background:linear-gradient(180deg,transparent 45%,rgba(26,23,13,.9) 100%); } .rama--nano .rama__foto{ background:linear-gradient(150deg,rgba(200,228,247,.22),rgba(3,13,31,.92)); } .rama--nano .rama__foto::after{ background:linear-gradient(180deg,transparent 45%,rgba(3,13,31,.94) 100%); } /* ---- Bandas de imagen del resto de bloques ---- Comparten el mismo principio que .rama__foto: si no hay imagen cargada el degradado se ve como un acento intencional, nunca como un hueco roto. */ .zona__foto, .dia__foto, .apoyo__foto{ position:relative; margin:calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-5); aspect-ratio:16/9; overflow:hidden; border-radius:var(--r-lg) var(--r-lg) 0 0; background:linear-gradient(150deg,rgba(11,111,212,.28),rgba(8,32,63,.9)); } .dia__foto, .apoyo__foto{ border-radius:var(--r-xl) var(--r-xl) 0 0; } .prod__foto{ position:relative; margin:calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-5); aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-lg) var(--r-lg) 0 0; /* Fondo claro: las fotos de producto suelen venir recortadas sobre blanco */ background:linear-gradient(160deg,rgba(200,228,247,.14),rgba(8,32,63,.85)); } .zona__foto img, .dia__foto img, .apoyo__foto img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--t-slow) var(--e-out); } .prod__foto img{ width:100%; height:100%; object-fit:contain; display:block; padding:var(--s-4); transition:transform var(--t-slow) var(--e-out); } .zona:hover .zona__foto img, .prod:hover .prod__foto img{ transform:scale(1.05); } .zona__foto::after, .dia__foto::after, .apoyo__foto::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 50%,rgba(8,32,63,.88) 100%); } /* Estética Regenerativa va en claro: sus bandas usan la paleta cálida */ .unit--estet .dia__foto{ background:linear-gradient(150deg,rgba(201,169,97,.3),rgba(255,255,255,.9)); } .unit--estet .dia__foto::after{ background:linear-gradient(180deg,transparent 55%,rgba(255,255,255,.9) 100%); } /* ---- Banda de imagen de las tarjetas de servicio ---- */ .card__foto{ position:relative; margin:calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-5); aspect-ratio:16/9; overflow:hidden; border-radius:var(--r-lg) var(--r-lg) 0 0; background:linear-gradient(150deg,rgba(11,111,212,.24),rgba(8,32,63,.9)); } .card__foto img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--t-slow) var(--e-out); } .card:hover .card__foto img{ transform:scale(1.05); } .card__foto::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 55%,rgba(8,32,63,.82) 100%); } .unit--estet .card__foto{ background:linear-gradient(150deg,rgba(201,169,97,.24),rgba(255,255,255,.9)); } .unit--estet .card__foto::after{ background:linear-gradient(180deg,transparent 60%,rgba(255,255,255,.72) 100%); } /* ---- Galería de instalaciones ---- */ .galeria{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:var(--s-4); margin-bottom:var(--s-5); } .galeria__item{ margin:0; border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(150deg,rgba(11,111,212,.22),rgba(8,32,63,.9)); border:1px solid var(--navy-edge); } .galeria__item img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform var(--t-slow) var(--e-out); } .galeria__item:hover img{ transform:scale(1.06); } .galeria__item figcaption{ padding:var(--s-3) var(--s-4); font-size:.82rem; color:var(--text-2); } /* Sin fotografía cargada el hueco se oculta: mostrar recuadros vacíos con su rótulo le diría al visitante que la clínica no tiene fotos del local. */ .galeria__item.vacia{ display:none; } /* ---- Implante capilar ---- */ .capilar__foto{ border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(150deg,rgba(201,169,97,.28),rgba(255,255,255,.9)); aspect-ratio:4/3; } .capilar__foto img{ width:100%; height:100%; object-fit:cover; display:block; } /* ---- Vial de NANOCORD-i ---- */ .nano__foto{ border-radius:var(--r-md); overflow:hidden; margin-bottom:var(--s-4); background:linear-gradient(160deg,rgba(200,228,247,.14),rgba(3,13,31,.9)); border:1px solid rgba(200,228,247,.2); } .nano__foto img{ width:100%; aspect-ratio:16/10; object-fit:contain; padding:var(--s-4); display:block; } /* Fotografía del director médico */ .doctor__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:var(--r-lg); z-index:1; } /* Con foto cargada, el marcador de «pendiente» y el dibujo sobran */ .doctor__photo:has(.doctor__img){ border-style:solid; border-color:var(--navy-edge); } .doctor__photo:has(.doctor__img) svg, .doctor__photo:has(.doctor__img) .doctor__badge{ display:none; } .rama__icon{ width:56px; height:56px; display:grid; place-items:center; border-radius:var(--r-md); background:rgba(34,185,245,.12); border:1px solid rgba(34,185,245,.26); color:var(--cyan); margin-bottom:var(--s-5); } .rama__icon svg{ width:30px; height:30px; } .rama__kicker{ font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin-bottom:var(--s-2); } .rama__title{ font-size:1.4rem; margin-bottom:var(--s-3); } .rama__text{ color:var(--text-2); font-size:.96rem; margin-bottom:var(--s-5); } .rama__link{ display:inline-flex; align-items:center; gap:var(--s-2); font-weight:600; font-size:.92rem; color:var(--cyan); } .rama__link span{ transition:transform var(--t-fast) var(--e-out); } .rama__link:hover{ text-decoration:none; } .rama__link:hover span{ transform:translateX(5px); } /* Rama de estética: acento dorado suave (coincide con su sección) */ .rama--estet{ background:linear-gradient(165deg,rgba(212,179,104,.12),rgba(26,23,13,.5)); border-color:rgba(212,179,104,.3); } .rama--estet .rama__icon{ background:rgba(212,179,104,.14); border-color:rgba(212,179,104,.34); color:#E8CE8F; } .rama--estet .rama__link{ color:#E8CE8F; } .rama--estet:hover{ border-color:rgba(212,179,104,.55); } .rama--estet .rama__glow{ background:radial-gradient(circle,rgba(212,179,104,.26),transparent 68%); } .rama--nano{ background: repeating-linear-gradient(0deg,rgba(200,228,247,.045) 0 1px,transparent 1px 22px), repeating-linear-gradient(90deg,rgba(200,228,247,.045) 0 1px,transparent 1px 22px), linear-gradient(165deg,rgba(3,13,31,.94),rgba(8,32,63,.72)); border-color:rgba(200,228,247,.22); } .rama--nano .rama__kicker{ color:var(--ice); font-family:ui-monospace,'Cascadia Code',monospace; } .rama--nano .rama__icon{ background:rgba(3,13,31,.7); border-color:rgba(200,228,247,.3); color:var(--ice); border-radius:var(--r-sm); } .rama--nano .rama__link{ color:var(--ice); } .ramas__note{ display:flex; align-items:flex-start; gap:var(--s-3); margin-top:var(--s-6); padding:var(--s-4) var(--s-5); border-radius:var(--r-md); background:rgba(200,228,247,.06); border:1px solid rgba(200,228,247,.16); color:var(--text-2); font-size:.9rem; } .ramas__note svg{ width:20px; height:20px; flex-shrink:0; color:var(--ice); margin-top:2px; } /* ========================================================================== Por qué elegirnos ========================================================================== */ .section--why{ background:var(--ink); } /* Efectos de fondo animados por sección (public/js/efectos.js). El canvas va detrás del contenido; el propio efectos.js eleva el contenido. */ /* Los lienzos de fondo miden lo mismo que la pantalla y se quedan fijos (sticky) mientras se recorre su sección. Antes medían lo que la sección entera (hasta 20 000 px de alto en móvil): cientos de MB de memoria, y en iPhone el lienzo superaba el máximo permitido y no se dibujaba. */ .fx-canvas, .estet__canvas, .b2b__canvas{ position:sticky; top:0; display:block; width:100%; height:100vh; margin-bottom:-100vh; z-index:var(--z-canvas); pointer-events:none; } .has-fx{ overflow:hidden; overflow:clip; } @media (prefers-reduced-motion:reduce){ .fx-canvas{ display:none; } } @media print{ .fx-canvas{ display:none; } } .why{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--s-2); } .why__item{ display:flex; align-items:flex-start; gap:var(--s-4); padding:var(--s-5); border-radius:var(--r-md); border:1px solid transparent; transition:background var(--t-mid), border-color var(--t-mid); } .why__item:hover{ background:rgba(13,46,88,.42); border-color:var(--navy-edge); } .why__n{ font-family:'Sora',sans-serif; font-size:1.5rem; font-weight:300; color:var(--cyan); opacity:.55; line-height:1; flex-shrink:0; } .why__item p{ color:var(--text-2); font-size:.97rem; } /* ========================================================================== Unidades clínicas ========================================================================== */ /* clip (y no hidden) no crea contenedor de scroll: el lienzo sticky sigue pegándose a la ventana. Los navegadores antiguos se quedan con hidden. */ .section--unit{ position:relative; overflow:hidden; overflow:clip; } .unit--regen{ background:linear-gradient(180deg,var(--ink),#061A34); } /* --------------------------------------------------------------------------- Estética Regenerativa — ÚNICA sección en claro. Fondo blanco para que el logotipo dorado/salvia luzca metálico y nítido. Todo el contraste se invierte aquí dentro: texto oscuro, superficies blancas con sombra suave. Aislado bajo .unit--estet, así que el resto del sitio permanece en azul oscuro sin tocar una sola regla. --------------------------------------------------------------------------- */ .unit--estet{ /* Acentos oscurecidos para cumplir contraste AA sobre blanco */ --cyan: #8A6B2B; /* dorado bronce -> textos y acentos */ --ice: #5F6E48; /* verde salvia oscuro -> acento secundario */ --gold: #C9A961; /* dorado suave -> solo elementos decorativos */ --sage: #A9BE95; /* salvia claro -> solo decorativo */ --gold-bright:#8A6B2B; /* Texto invertido */ --text: #232A1C; --text-2: #55603F; --text-3: #666E53; /* 4.5:1 sobre blanco: es texto pequeño de tarjeta */ --navy-edge:#E6E3D5; --ink: #FFFFFF; background: radial-gradient(1200px 600px at 50% -8%, #FDFCF7 0%, transparent 60%), linear-gradient(180deg,#FFFFFF 0%,#FBFAF5 50%,#FFFFFF 100%); border-block:1px solid rgba(138,107,43,.16); color:var(--text); } /* --- Efectos de movimiento sobre blanco --- */ .estet__blob{ position:absolute; border-radius:50%; pointer-events:none; z-index:var(--z-canvas); filter:blur(8px); } .estet__blob--a{ width:620px; height:620px; top:-180px; left:-200px; background:radial-gradient(circle,rgba(201,169,97,.20),transparent 66%); animation:blobDrift 24s var(--e-io) infinite alternate; } .estet__blob--b{ width:540px; height:540px; bottom:-160px; right:-160px; background:radial-gradient(circle,rgba(169,190,149,.24),transparent 66%); animation:blobDrift 30s var(--e-io) infinite alternate-reverse; } @keyframes blobDrift{ from{ transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(70px,50px,0) scale(1.14); } } .unit--estet .container{ position:relative; z-index:var(--z-body); } /* El logotipo es el héroe de la sección: se le da aire y un halo cálido */ .unit--estet .secHead{ text-align:center; margin-inline:auto; } .unit--estet .secHead__lead{ margin-inline:auto; } .unit--estet .secHead__tag{ color:var(--cyan); } .unit--estet .secHead__tag::before{ display:none; } .unit--estet .secHead__logo{ width:min(360px,74vw); filter:drop-shadow(0 14px 34px rgba(138,107,43,.22)); animation:logoFloat 7s var(--e-io) infinite alternate; } @keyframes logoFloat{ from{ transform:translate3d(0,0,0); } to { transform:translate3d(0,-12px,0); } } .unit__aura{ position:absolute; pointer-events:none; width:760px; height:760px; border-radius:50%; top:-260px; right:-260px; background:radial-gradient(circle,rgba(11,111,212,.17),transparent 66%); } /* --- Sello diferencial --- */ .seal{ display:flex; gap:var(--s-5); padding:var(--s-6); border-radius:var(--r-lg); background:rgba(13,46,88,.44); border:1px solid var(--navy-edge); margin-bottom:var(--s-6); } .seal__bar{ width:3px; flex-shrink:0; border-radius:3px; background:linear-gradient(180deg,var(--cyan),transparent); } .seal h3{ font-size:1.05rem; margin-bottom:var(--s-2); color:var(--cyan); } .unit--estet .seal h3{ color:var(--gold-bright); } .unit--estet .seal__bar{ background:linear-gradient(180deg,var(--cyan),transparent); } .seal p{ color:var(--text-2); font-size:.96rem; } .seal strong{ color:var(--text); font-weight:600; } /* --- Tarjetas de servicio --- */ .cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--s-4); } .card{ display:flex; flex-direction:column; padding:var(--s-6); border-radius:var(--r-lg); background:rgba(8,32,63,.6); border:1px solid var(--navy-edge); transition:transform var(--t-mid) var(--e-out), border-color var(--t-mid), background var(--t-mid); } .card:hover{ transform:translateY(-4px); border-color:rgba(34,185,245,.42); background:rgba(13,46,88,.66); } .unit--estet .card:hover{ border-color:rgba(212,179,104,.5); } .card--hl{ background:linear-gradient(160deg,rgba(11,111,212,.18),rgba(8,32,63,.7)); border-color:rgba(34,185,245,.34); } .card__title{ font-size:1.06rem; margin-bottom:var(--s-3); color:var(--text); } .card__text{ color:var(--text-2); font-size:.93rem; margin-bottom:var(--s-3); } .card__meta{ color:var(--text-3); font-size:.85rem; padding-top:var(--s-3); border-top:1px solid rgba(22,64,111,.6); margin-bottom:var(--s-5); } .card__cta{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:var(--s-2); min-height:44px; padding:10px var(--s-5); border-radius:var(--r-full); background:rgba(34,185,245,.1); border:1px solid rgba(34,185,245,.32); color:var(--cyan); font-size:.88rem; font-weight:600; transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--e-out); } .card__cta:hover{ background:var(--cyan); color:var(--ink); } .card__cta:active{ transform:scale(.97); } .unit--estet .card__cta{ background:rgba(201,169,97,.14); border-color:rgba(138,107,43,.34); color:var(--cyan); } .unit--estet .card__cta:hover{ background:var(--cyan); color:#FFFFFF; } /* --- Estética: superficies claras con sombra suave (modo claro) --- */ .unit--estet .seal{ background:#FFFFFF; border-color:rgba(138,107,43,.18); box-shadow:0 10px 30px rgba(90,80,40,.08); } .unit--estet .card{ background:#FFFFFF; border-color:rgba(138,107,43,.14); box-shadow:0 6px 20px rgba(90,80,40,.06); } .unit--estet .card:hover{ border-color:rgba(138,107,43,.4); background:#FFFFFF; box-shadow:0 16px 40px rgba(90,80,40,.14); } .unit--estet .card--hl{ background:linear-gradient(160deg,rgba(201,169,97,.14),#FFFFFF 62%); border-color:rgba(138,107,43,.32); } .unit--estet .card__meta{ border-top-color:rgba(138,107,43,.18); } .unit--estet .chips li{ background:#FFFFFF; border-color:rgba(138,107,43,.2); box-shadow:0 3px 10px rgba(90,80,40,.05); } .unit--estet .subHead{ border-left-color:var(--cyan); } .unit--estet .faq__item{ background:#FFFFFF; border-color:rgba(138,107,43,.16); box-shadow:0 4px 14px rgba(90,80,40,.05); } .unit--estet .faq__item[open]{ background:#FFFFFF; border-color:rgba(138,107,43,.4); box-shadow:0 10px 28px rgba(90,80,40,.1); } .unit--estet .faq__item summary:hover{ color:var(--cyan); } .unit--estet .seal h3{ color:var(--cyan); } .unit--estet .seal strong, .unit--estet .card__title, .unit--estet .subHead{ color:var(--text); } /* --- Bloques de contenido clínico (zonas, terapias, protocolo, precios) --- */ .blockLead{ color:var(--text-2); font-size:.98rem; max-width:70ch; margin:calc(var(--s-5) * -1) 0 var(--s-5); } .zonas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:var(--s-4); margin-bottom:var(--s-6); } .zona{ display:flex; flex-direction:column; padding:var(--s-6); border-radius:var(--r-lg); background:rgba(8,32,63,.6); border:1px solid var(--navy-edge); border-top:2px solid var(--cyan); transition:transform var(--t-mid) var(--e-out), border-color var(--t-mid); } .zona:hover{ transform:translateY(-4px); border-color:rgba(34,185,245,.42); } .zona__name{ font-size:1.15rem; margin-bottom:var(--s-4); color:var(--cyan); } .zona__list{ display:grid; gap:6px; margin-bottom:var(--s-5); } .zona__list li{ display:flex; align-items:flex-start; gap:var(--s-2); color:var(--text-2); font-size:.9rem; } .zona__list li::before{ content:''; flex-shrink:0; width:5px; height:5px; margin-top:9px; border-radius:50%; background:var(--cyan); opacity:.7; } .zona__cta{ margin-top:auto; align-self:flex-start; min-height:44px; display:inline-flex; align-items:center; padding:10px var(--s-5); border-radius:var(--r-full); background:rgba(34,185,245,.1); border:1px solid rgba(34,185,245,.32); color:var(--cyan); font-size:.86rem; font-weight:600; transition:background var(--t-fast), color var(--t-fast); } .zona__cta:hover{ background:var(--cyan); color:var(--ink); } .terapias{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s-6); padding:var(--s-6); border-radius:var(--r-lg); background:rgba(13,46,88,.34); border:1px solid var(--navy-edge); margin-bottom:var(--s-5); } .terapias h4{ font-size:.94rem; letter-spacing:.04em; margin-bottom:var(--s-4); color:var(--text); } .terapias__note{ margin-top:var(--s-3); font-size:.82rem; color:var(--text-3); } .chips--sm li{ font-size:.82rem; padding:7px var(--s-3); } .protocolo{ padding:var(--s-6); border-radius:var(--r-lg); background:rgba(13,46,88,.34); border:1px solid var(--navy-edge); } .protocolo h4{ font-size:.94rem; margin-bottom:var(--s-4); } .protocolo__steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s-3); } .protocolo__steps li{ padding:var(--s-4); border-radius:var(--r-md); background:rgba(3,13,31,.44); border-left:2px solid var(--cyan); color:var(--text-2); font-size:.9rem; } .protocolo__steps span{ display:block; font-family:'Sora',sans-serif; font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin-bottom:var(--s-1); } .protocolo__note{ margin-top:var(--s-4); font-size:.85rem; color:var(--text-3); } /* --- Precios --- */ .price{ display:grid; gap:6px; padding:var(--s-3) 0 var(--s-4); margin-bottom:var(--s-4); border-top:1px solid rgba(22,64,111,.6); } .price__row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-2); font-size:.86rem; } .price__row em{ font-style:normal; color:var(--text-3); min-width:74px; } .price__row b{ font-family:'Sora',sans-serif; font-size:1.02rem; font-weight:600; color:var(--cyan); font-variant-numeric:tabular-nums; } .price__row i{ font-style:normal; font-size:.76rem; color:var(--text-3); } /* --- Tablas de precios --- */ .tabla{ overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--navy-edge); background:rgba(8,32,63,.5); -webkit-overflow-scrolling:touch; } .tabla table{ width:100%; min-width:560px; border-collapse:collapse; font-size:.9rem; } .tabla thead th{ text-align:left; padding:var(--s-4) var(--s-5); font-family:'Sora',sans-serif; font-size:.76rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); border-bottom:1px solid var(--navy-edge); background:rgba(3,13,31,.4); white-space:nowrap; } .tabla tbody td{ padding:var(--s-4) var(--s-5); border-bottom:1px solid rgba(22,64,111,.44); color:var(--text-2); vertical-align:top; } .tabla tbody tr:last-child td{ border-bottom:0; } .tabla tbody tr:hover td{ background:rgba(34,185,245,.05); } .tabla td:first-child{ color:var(--text); font-weight:500; } .tabla .num{ text-align:right; font-family:'Sora',sans-serif; font-weight:600; color:var(--cyan); white-space:nowrap; font-variant-numeric:tabular-nums; } .tabla .was{ color:var(--text-3); text-decoration:line-through; font-weight:400; font-size:.86rem; } .tabla__note{ margin-top:var(--s-3); font-size:.84rem; color:var(--text-3); } .tabla small{ color:var(--text-3); font-size:.86em; } /* En pantallas angostas las tablas anchas se apilan como tarjetas: cada fila es una tarjeta y cada dato muestra el nombre de su columna. Sin barra de desplazamiento horizontal. */ @media (max-width:720px){ .tabla{ overflow:visible; border:0; background:transparent; border-radius:0; } /* !important vence a reglas más específicas como .tabla--dia (min-width:420) */ .tabla table{ min-width:0 !important; width:100%; display:block; } /* Cabecera oculta a la vista pero disponible para lectores de pantalla */ .tabla thead{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .tabla tbody, .tabla tbody tr, .tabla tbody td{ display:block; } .tabla tbody tr{ background:var(--navy-lift); /* sólido = buen contraste en cualquier sección */ border:1px solid var(--navy-edge); border-radius:var(--r-lg); padding:var(--s-4); margin-bottom:var(--s-3); box-shadow:0 6px 18px rgba(3,10,25,.32); } .tabla tbody tr:hover td{ background:transparent; } .tabla tbody td{ padding:8px 0; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; white-space:normal; color:var(--text); } .tabla tbody td.vacia{ display:none; } .tabla tbody td:last-child{ border-bottom:0; padding-bottom:0; } .tabla tbody td::before{ content:attr(data-label); display:block; margin-bottom:3px; font-family:'Sora',sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); } /* La primera celda hace de título de la tarjeta */ .tabla tbody td:first-child{ padding-top:0; padding-bottom:10px; margin-bottom:4px; font-size:1.06rem; font-weight:600; color:var(--text); border-bottom:1px solid var(--navy-edge); } .tabla tbody td:first-child::before{ display:none; } .tabla .num{ text-align:left; white-space:normal; font-size:1.06rem; color:var(--cyan); font-weight:600; } .tabla .was{ font-size:.9rem; color:var(--text-3); } /* Sección estética: tema CLARO con dorado (igual que su tabla en escritorio). Tarjeta blanca, texto oscuro (heredado) y acentos en oro. */ .unit--estet .tabla tbody tr{ background:#FFFFFF; border-color:rgba(138,107,43,.24); box-shadow:0 6px 18px rgba(90,80,40,.08); } .unit--estet .tabla tbody td{ border-bottom-color:rgba(138,107,43,.16); } .unit--estet .tabla tbody td:first-child{ border-bottom-color:rgba(138,107,43,.3); } .unit--estet .tabla tbody td::before{ color:#9C7B2E; } /* etiqueta en oro oscuro */ .unit--estet .tabla .num{ color:#8A6A1E; } /* precio promocional en oro */ .unit--estet .tabla .was{ color:#B0A488; } /* regular tachado, tenue */ } /* --- Cirugía por día de la semana --- */ .dias{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:var(--s-5); margin-bottom:var(--s-5); } .dia{ display:flex; flex-direction:column; padding:var(--s-6); border-radius:var(--r-xl); background:rgba(8,32,63,.6); border:1px solid var(--navy-edge); } .dia__head{ margin-bottom:var(--s-5); } .dia__badge{ display:inline-block; padding:6px var(--s-4); border-radius:var(--r-full); background:var(--cyan); color:var(--ink); font-family:'Sora',sans-serif; font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:var(--s-3); } .dia__name{ font-size:1.22rem; margin-bottom:var(--s-1); } .dia__claim{ color:var(--text-3); font-size:.88rem; } .dia .tabla{ margin-bottom:var(--s-4); } .dia .tabla table{ min-width:420px; } .dia .tabla thead th, .dia .tabla tbody td{ padding:var(--s-3) var(--s-4); } .dia__cta{ margin-top:auto; align-self:flex-start; min-height:46px; display:inline-flex; align-items:center; padding:11px var(--s-6); border-radius:var(--r-full); background:var(--cyan); color:var(--ink); font-family:'Sora',sans-serif; font-size:.9rem; font-weight:600; transition:transform var(--t-fast) var(--e-out), filter var(--t-fast); } .dia__cta:hover{ transform:translateY(-2px); filter:brightness(1.08); } .dia__cta:active{ transform:scale(.97); } /* --- Bloque destacado (capilar) --- */ .destacado{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:var(--s-6); padding:var(--s-6); border-radius:var(--r-xl); background:rgba(8,32,63,.6); border:1px solid var(--navy-edge); align-items:start; } .destacado__kicker{ font-family:'Sora',sans-serif; font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin-bottom:var(--s-3); } .destacado__title{ font-size:1.3rem; margin-bottom:var(--s-3); } .destacado__text{ color:var(--text-2); font-size:.94rem; margin-bottom:var(--s-4); } .destacado__list{ display:grid; gap:8px; margin-bottom:var(--s-5); } .destacado__list li{ display:flex; align-items:flex-start; gap:var(--s-3); color:var(--text-2); font-size:.9rem; } .destacado__list li::before{ content:''; flex-shrink:0; width:6px; height:11px; margin:4px 2px 0 3px; border-right:2px solid var(--cyan); border-bottom:2px solid var(--cyan); transform:rotate(42deg); } /* --- Modo claro: estos bloques dentro de Estética Regenerativa --- */ .unit--estet .zona, .unit--estet .dia, .unit--estet .destacado, .unit--estet .terapias, .unit--estet .protocolo{ background:#FFFFFF; border-color:rgba(138,107,43,.16); box-shadow:0 6px 20px rgba(90,80,40,.06); } .unit--estet .tabla{ background:#FFFFFF; border-color:rgba(138,107,43,.18); } .unit--estet .tabla thead th{ background:rgba(201,169,97,.12); border-bottom-color:rgba(138,107,43,.22); color:var(--cyan); } .unit--estet .tabla tbody td{ border-bottom-color:rgba(138,107,43,.14); } .unit--estet .tabla tbody tr:hover td{ background:rgba(201,169,97,.07); } .unit--estet .dia__badge{ background:var(--cyan); color:#FFFFFF; } .unit--estet .dia__cta{ background:var(--cyan); color:#FFFFFF; } .unit--estet .price{ border-top-color:rgba(138,107,43,.18); } .unit--estet .zona__list li::before, .unit--estet .destacado__list li::before{ background:var(--cyan); border-color:var(--cyan); } .unit--estet .notice--warn{ background:rgba(201,169,97,.12); border-color:rgba(138,107,43,.3); color:var(--text-2); } .unit--estet .notice--warn svg{ color:var(--cyan); } .unit--estet .blockLead, .unit--estet .tabla__note, .unit--estet .protocolo__note, .unit--estet .terapias__note{ color:var(--text-2); } /* --- Precio de producto y bonificación --- */ .prod__desc{ color:var(--text-2); font-size:.88rem; margin-bottom:var(--s-4); } .prod__price{ font-family:'Sora',sans-serif; font-size:1.24rem; font-weight:600; color:var(--cyan); margin-bottom:var(--s-5); padding-bottom:var(--s-4); border-bottom:1px solid rgba(22,64,111,.6); font-variant-numeric:tabular-nums; } .bonus{ display:flex; align-items:center; gap:var(--s-4); margin-top:var(--s-5); padding:var(--s-5); border-radius:var(--r-md); background:linear-gradient(120deg,rgba(34,185,245,.12),rgba(13,46,88,.4)); border:1px solid rgba(34,185,245,.28); } .bonus svg{ width:28px; height:28px; flex-shrink:0; color:var(--cyan); } .bonus p{ color:var(--text-2); font-size:.92rem; } .bonus strong{ color:var(--cyan); } /* --- Servicios de apoyo --- */ .section--apoyo{ background:linear-gradient(180deg,#061A34,var(--ink)); } .apoyo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); gap:var(--s-5); } .apoyoCard{ display:flex; flex-direction:column; padding:var(--s-6); border-radius:var(--r-xl); background:rgba(8,32,63,.6); border:1px solid var(--navy-edge); } .apoyoCard__icon{ width:52px; height:52px; display:grid; place-items:center; border-radius:var(--r-md); background:rgba(34,185,245,.12); border:1px solid rgba(34,185,245,.26); color:var(--cyan); margin-bottom:var(--s-4); } .apoyoCard__icon svg{ width:28px; height:28px; } .apoyoCard h3{ font-size:1.24rem; margin-bottom:var(--s-2); } .apoyoCard__lead{ color:var(--text-2); font-size:.94rem; margin-bottom:var(--s-5); } .apoyoCard__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--s-4); margin-bottom:var(--s-5); } .apoyoCard__grid h4{ font-size:.84rem; letter-spacing:.06em; color:var(--cyan); margin-bottom:var(--s-2); } .apoyoCard__grid p{ color:var(--text-3); font-size:.84rem; } .apoyoCard .ticks{ margin-bottom:var(--s-4); } .apoyoCard .ticks strong{ color:var(--text); font-weight:600; } .apoyoCard .card__cta{ margin-top:auto; } /* --- Chips --- */ .chips{ display:flex; flex-wrap:wrap; gap:var(--s-2); } .chips li{ padding:9px var(--s-4); border-radius:var(--r-full); background:rgba(13,46,88,.5); border:1px solid var(--navy-edge); color:var(--text-2); font-size:.88rem; } .chips--values li{ border-color:rgba(34,185,245,.26); color:var(--text); } /* --- FAQ --- */ .faq{ display:grid; gap:var(--s-2); } .faq__item{ border-radius:var(--r-md); background:rgba(8,32,63,.55); border:1px solid var(--navy-edge); overflow:hidden; transition:border-color var(--t-mid), background var(--t-mid); } .faq__item[open]{ border-color:rgba(34,185,245,.4); background:rgba(13,46,88,.6); } .faq--b2b .faq__item[open]{ border-color:rgba(200,228,247,.4); } .faq__item summary{ cursor:pointer; list-style:none; padding:var(--s-4) var(--s-5); padding-right:var(--s-8); position:relative; font-family:'Sora',sans-serif; font-weight:500; font-size:.98rem; min-height:52px; display:flex; align-items:center; transition:color var(--t-fast); } .faq__item summary::-webkit-details-marker{ display:none; } .faq__item summary:hover{ color:var(--cyan); } .faq--b2b .faq__item summary:hover{ color:var(--ice); } .faq__item summary::after{ content:''; position:absolute; right:var(--s-5); top:50%; width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-70%) rotate(45deg); opacity:.65; transition:transform var(--t-mid) var(--e-out); } .faq__item[open] summary::after{ transform:translateY(-20%) rotate(-135deg); } .faq__item p{ padding:0 var(--s-5) var(--s-5); color:var(--text-2); font-size:.93rem; } /* ========================================================================== NANOCORD-i · zona B2B (se distingue por superficie, no por color) ========================================================================== */ .section--b2b{ position:relative; overflow:hidden; overflow:clip; background: repeating-linear-gradient(0deg,rgba(200,228,247,.035) 0 1px,transparent 1px 26px), repeating-linear-gradient(90deg,rgba(200,228,247,.035) 0 1px,transparent 1px 26px), linear-gradient(180deg,#020814,#04101F 55%,#020814); border-block:1px solid rgba(200,228,247,.16); } .section--b2b .container{ position:relative; z-index:var(--z-body); } .b2b__canvas{ opacity:.5; } .b2bAlert{ display:flex; align-items:flex-start; gap:var(--s-4); padding:var(--s-5); border-radius:var(--r-md); background:rgba(200,228,247,.07); border:1px solid rgba(200,228,247,.26); margin-bottom:var(--s-7); } .b2bAlert svg{ width:24px; height:24px; flex-shrink:0; color:var(--ice); } .b2bAlert p{ font-size:.94rem; color:var(--text-2); } .b2bAlert strong{ color:var(--ice); } .b2bGrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:var(--s-7); margin-bottom:var(--s-7); } .ticks{ display:grid; gap:var(--s-3); } .ticks li{ display:flex; align-items:flex-start; gap:var(--s-3); color:var(--text-2); font-size:.94rem; } .ticks li::before{ content:''; flex-shrink:0; width:6px; height:11px; margin:4px 7px 0 4px; border-right:2px solid var(--ice); border-bottom:2px solid var(--ice); transform:rotate(42deg); opacity:.85; } .ticks--2col{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); } .spec{ border:1px solid rgba(200,228,247,.2); border-radius:var(--r-md); overflow:hidden; } .spec__row{ display:grid; grid-template-columns:minmax(140px,38%) 1fr; gap:var(--s-4); padding:var(--s-3) var(--s-4); border-bottom:1px solid rgba(200,228,247,.12); } .spec__row:last-child{ border-bottom:0; } .spec dt{ font-family:ui-monospace,'Cascadia Code',monospace; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); } .spec dd{ font-size:.92rem; color:var(--text); } .spec__note{ margin-top:var(--s-3); font-size:.84rem; color:var(--text-3); } .b2bActions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-bottom:var(--s-8); } /* ========================================================================== Ciencia y seguridad ========================================================================== */ .section--ciencia{ background:linear-gradient(180deg,var(--ink),var(--navy) 55%,var(--ink)); } .pillars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--s-5); } .pillar{ text-align:center; padding:var(--s-6) var(--s-5); border-radius:var(--r-lg); background:rgba(8,32,63,.5); border:1px solid var(--navy-edge); transition:transform var(--t-mid) var(--e-out), border-color var(--t-mid); } .pillar:hover{ transform:translateY(-5px); border-color:rgba(34,185,245,.42); } .pillar__ring{ width:64px; height:64px; margin:0 auto var(--s-5); display:grid; place-items:center; border-radius:50%; border:1px solid rgba(34,185,245,.4); position:relative; } .pillar__ring::before{ content:''; position:absolute; inset:-7px; border-radius:50%; border:1px dashed rgba(34,185,245,.24); animation:spin 22s linear infinite; } .pillar__ring span{ width:15px; height:15px; border-radius:50%; background:var(--cyan); box-shadow:0 0 20px rgba(34,185,245,.85); } @keyframes spin{ to{ transform:rotate(360deg); } } .pillar h3{ font-size:1.06rem; margin-bottom:var(--s-3); } .pillar p{ color:var(--text-2); font-size:.92rem; } .steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:var(--s-4); counter-reset:step; } .step{ display:flex; align-items:flex-start; gap:var(--s-4); padding:var(--s-5); border-radius:var(--r-md); background:rgba(13,46,88,.36); border-left:2px solid rgba(34,185,245,.42); } .step__n{ font-family:'Sora',sans-serif; font-size:1.05rem; font-weight:600; width:34px; height:34px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:rgba(34,185,245,.14); color:var(--cyan); } .step p{ color:var(--text-2); font-size:.94rem; } .quote{ margin:var(--s-8) auto 0; max-width:820px; padding:var(--s-7); text-align:center; border-radius:var(--r-lg); background:rgba(13,46,88,.4); border:1px solid var(--navy-edge); position:relative; } .quote::before{ content:'"'; position:absolute; top:2px; left:26px; font-family:'Sora',serif; font-size:5rem; color:var(--cyan); opacity:.22; line-height:1; } .quote p{ font-size:clamp(1rem,1.9vw,1.16rem); color:var(--text); font-style:italic; } /* ========================================================================== Nosotros ========================================================================== */ .section--nosotros{ background:var(--ink); } .mv{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s-5); } .mv__card{ padding:var(--s-6); border-radius:var(--r-lg); background:linear-gradient(160deg,rgba(13,46,88,.6),rgba(8,32,63,.4)); border:1px solid var(--navy-edge); } .mv__card h3{ font-size:1.1rem; margin-bottom:var(--s-3); color:var(--cyan); } .mv__card p{ color:var(--text-2); font-size:.96rem; } .doctor{ display:grid; grid-template-columns:260px 1fr; gap:var(--s-7); align-items:start; margin-top:var(--s-8); padding:var(--s-7); border-radius:var(--r-xl); background:linear-gradient(150deg,rgba(13,46,88,.6),rgba(8,32,63,.42)); border:1px solid var(--navy-edge); } .doctor__photo{ position:relative; aspect-ratio:5/6; border-radius:var(--r-lg); display:grid; place-items:center; background: repeating-linear-gradient(45deg,rgba(34,185,245,.05) 0 10px,transparent 10px 20px), rgba(3,13,31,.6); border:1px dashed rgba(34,185,245,.34); color:var(--cyan); } .doctor__photo svg{ width:64%; height:auto; } .doctor__badge{ position:absolute; bottom:var(--s-3); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--warn); background:rgba(3,13,31,.85); padding:5px var(--s-3); border-radius:var(--r-full); border:1px solid rgba(242,178,76,.42); } .doctor__role{ font-size:.76rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); margin-bottom:var(--s-2); } .doctor__name{ font-size:1.5rem; margin-bottom:var(--s-4); } .doctor__bio{ color:var(--text-2); font-size:.97rem; margin-bottom:var(--s-5); } .doctor__creds{ display:grid; gap:var(--s-2); margin-bottom:var(--s-4); } .doctor__creds li{ display:flex; flex-wrap:wrap; gap:var(--s-2); justify-content:space-between; padding:10px var(--s-4); border-radius:var(--r-sm); background:rgba(3,13,31,.44); font-size:.9rem; } .doctor__creds span{ color:var(--text-2); } .doctor__creds em{ color:var(--cyan); font-style:normal; font-weight:600; text-align:right; } .doctor__note{ font-size:.84rem; color:var(--text-3); } /* ---------- Grupos de servicios en lista (áreas ampliadas y secciones nuevas) ---------- */ .svcGroups{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:var(--s-4); margin-bottom:var(--s-6); } .svcGroup{ padding:var(--s-5); background:var(--navy-lift); border:1px solid var(--navy-edge); border-radius:var(--r-lg); } .svcGroup__title{ display:flex; align-items:center; gap:10px; font-size:1.02rem; margin-bottom:var(--s-4); color:var(--text); } .svcGroup__title svg{ width:22px; height:22px; flex-shrink:0; color:var(--cyan); fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .svcList{ display:grid; gap:9px; } .svcList li{ position:relative; padding-left:20px; color:var(--text-2); font-size:.94rem; line-height:1.5; } .svcList li::before{ content:''; position:absolute; left:3px; top:.6em; width:7px; height:7px; border-radius:50%; background:var(--cyan); } .svcList li b, .svcList li strong{ color:var(--text); font-weight:600; } .svcList li small{ color:var(--text-3); } /* Estética: tema claro dorado */ .unit--estet .svcGroup{ background:#FFFFFF; border-color:rgba(138,107,43,.2); box-shadow:0 6px 18px rgba(90,80,40,.06); } .unit--estet .svcGroup__title{ color:#2A2418; } .unit--estet .svcGroup__title svg{ color:#C9A961; } .unit--estet .svcList li{ color:#544B39; } .unit--estet .svcList li::before{ background:#C9A961; } .unit--estet .svcList li b, .unit--estet .svcList li strong{ color:#2A2418; } /* Secciones nuevas — paleta del sitio para mantener cohesión */ .section--ozono{ background:linear-gradient(180deg,var(--ink),#071A33); } .section--patologia{ background:linear-gradient(180deg,#071A33,var(--ink)); } /* ========================================================================== Productos ========================================================================== */ .section--productos{ background:linear-gradient(180deg,var(--ink),#061A34); } .prods{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:var(--s-4); } .prod{ display:flex; flex-direction:column; padding:var(--s-6); border-radius:var(--r-lg); background:rgba(8,32,63,.58); border:1px solid var(--navy-edge); transition:transform var(--t-mid) var(--e-out), border-color var(--t-mid); } .prod:hover{ transform:translateY(-4px); border-color:rgba(34,185,245,.4); } .prod__name{ font-size:1.1rem; margin-bottom:var(--s-2); } .prod__pres{ font-family:ui-monospace,'Cascadia Code',monospace; font-size:.8rem; color:var(--text-3); margin-bottom:var(--s-3); } .prod__status{ font-size:.85rem; color:var(--text-2); margin-bottom:var(--s-5); padding-bottom:var(--s-4); border-bottom:1px solid rgba(22,64,111,.6); } .prod__cta{ margin-top:auto; align-self:flex-start; min-height:44px; display:inline-flex; align-items:center; padding:10px var(--s-5); border-radius:var(--r-full); border:1px solid rgba(200,228,247,.3); color:var(--ice); font-size:.86rem; font-weight:600; transition:background var(--t-fast), color var(--t-fast); } .prod__cta:hover{ background:var(--ice); color:var(--ink); text-decoration:none; } .prod--nano{ background: repeating-linear-gradient(0deg,rgba(200,228,247,.045) 0 1px,transparent 1px 20px), rgba(3,13,31,.8); border-color:rgba(200,228,247,.28); } .prods__legal{ margin-top:var(--s-6); padding:var(--s-5); border-radius:var(--r-md); background:rgba(3,13,31,.5); border:1px solid var(--navy-edge); color:var(--text-3); font-size:.88rem; } /* ========================================================================== Contacto ========================================================================== */ .section--contacto{ background:linear-gradient(180deg,#061A34,var(--ink)); } .tabs{ max-width:900px; margin:0 auto var(--s-8); } .tabs__bar{ display:flex; gap:var(--s-2); padding:var(--s-1); border-radius:var(--r-full); background:rgba(3,13,31,.6); border:1px solid var(--navy-edge); margin-bottom:var(--s-6); } .tab{ flex:1; min-height:48px; padding:12px var(--s-4); border-radius:var(--r-full); font-family:'Sora',sans-serif; font-size:.92rem; font-weight:600; color:var(--text-2); transition:background var(--t-mid) var(--e-out), color var(--t-mid); } .tab:hover{ color:var(--text); } .tab.is-active{ background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff; } .tab--pro.is-active{ background:var(--ice); color:var(--ink); } .panel{ display:none; } .panel.is-active{ display:block; animation:panelIn var(--t-slow) var(--e-out); } @keyframes panelIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } } .form{ padding:var(--s-7); border-radius:var(--r-xl); background:rgba(13,46,88,.42); border:1px solid var(--navy-edge); } .form--pro{ background: repeating-linear-gradient(0deg,rgba(200,228,247,.03) 0 1px,transparent 1px 24px), rgba(3,13,31,.66); border-color:rgba(200,228,247,.24); } .form__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s-5); margin-bottom:var(--s-5); } .field--full{ grid-column:1 / -1; } .field label{ display:block; font-size:.88rem; font-weight:500; color:var(--text); margin-bottom:var(--s-2); } .req{ color:var(--cyan); } .field input, .field select, .field textarea{ width:100%; min-height:48px; padding:12px var(--s-4); border-radius:var(--r-sm); background:rgba(3,13,31,.6); border:1px solid var(--navy-edge); color:var(--text); font-size:1rem; transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); } .field textarea{ resize:vertical; min-height:96px; line-height:1.6; } .field input::placeholder, .field textarea::placeholder{ color:var(--text-3); } .field input:hover, .field select:hover, .field textarea:hover{ border-color:rgba(34,185,245,.4); } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(34,185,245,.18); background:rgba(3,13,31,.82); } .field input.has-error, .field select.has-error{ border-color:var(--danger); } .field select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%), linear-gradient(135deg,var(--text-2) 50%,transparent 50%); background-position:calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:var(--s-8); } .field select option, .field select optgroup{ background:var(--navy); color:var(--text); } .hint{ font-size:.8rem; color:var(--text-3); margin-top:var(--s-2); } .err{ font-size:.82rem; color:var(--danger); margin-top:var(--s-2); min-height:0; display:none; } .err.is-shown{ display:block; } .check{ display:flex; align-items:flex-start; gap:var(--s-3); padding:var(--s-4); border-radius:var(--r-sm); background:rgba(3,13,31,.4); cursor:pointer; font-size:.9rem; color:var(--text-2); margin-bottom:var(--s-2); } .check input{ width:20px; height:20px; flex-shrink:0; margin-top:2px; accent-color:var(--cyan); cursor:pointer; } .notice{ display:flex; align-items:flex-start; gap:var(--s-3); padding:var(--s-4); border-radius:var(--r-sm); margin:var(--s-5) 0; font-size:.87rem; } .notice svg{ width:22px; height:22px; flex-shrink:0; } .notice--warn{ background:rgba(242,178,76,.09); border:1px solid rgba(242,178,76,.3); color:var(--text-2); } .notice--warn svg{ color:var(--warn); } .notice--pro{ background:rgba(200,228,247,.07); border:1px solid rgba(200,228,247,.24); color:var(--text-2); } .notice--pro svg{ color:var(--ice); } /* --- Datos de contacto --- */ .contactInfo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s-4); margin-bottom:var(--s-6); } .ci{ padding:var(--s-6); border-radius:var(--r-lg); background:rgba(8,32,63,.55); border:1px solid var(--navy-edge); transition:border-color var(--t-mid), transform var(--t-mid) var(--e-out); } .ci:hover{ border-color:rgba(34,185,245,.4); transform:translateY(-3px); } .ci__icon{ width:44px; height:44px; display:grid; place-items:center; border-radius:var(--r-md); background:rgba(34,185,245,.12); color:var(--cyan); margin-bottom:var(--s-4); } .ci__icon svg{ width:24px; height:24px; } .ci h3{ font-size:1rem; margin-bottom:var(--s-2); } .ci p{ color:var(--text-2); font-size:.94rem; } .ci a{ color:var(--cyan); } .ci__ref{ margin-top:var(--s-2); font-size:.82rem; color:var(--text-3); } /* --- Mapa --- */ .mapWrap{ margin-bottom:var(--s-6); } /* Alto fijado con clamp y no con aspect-ratio + min-height: esa combinación convierte el alto mínimo en un ANCHO mínimo (280 × 16/9 ≈ 498 px) y en móvil desbordaba la página entera, dejando el menú fuera de pantalla. */ .map{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--navy); border:1px solid var(--navy-edge); height:clamp(280px, 42vw, 520px); } .map__frame{ position:absolute; inset:0; width:100%; height:100%; border:0; } .map__link{ position:absolute; right:14px; bottom:14px; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:9px 15px; border-radius:var(--r-full); background:var(--cyan); color:var(--ink); font-size:.82rem; font-weight:600; text-decoration:none; box-shadow:0 8px 22px rgba(0,0,0,.45); transition:background var(--t-fast); } .map__link:hover{ background:var(--ice); text-decoration:none; } /* --- Aviso de urgencias --- */ .emergency{ display:flex; align-items:flex-start; gap:var(--s-4); padding:var(--s-5); border-radius:var(--r-md); background:rgba(240,104,94,.08); border:1px solid rgba(240,104,94,.32); } .emergency svg{ width:26px; height:26px; flex-shrink:0; color:var(--danger); } .emergency p{ color:var(--text-2); font-size:.92rem; } .emergency strong{ color:var(--danger); } /* ========================================================================== Footer ========================================================================== */ .footer{ background:#020814; border-top:1px solid var(--navy-edge); padding-top:var(--s-8); } .footer__top{ display:grid; grid-template-columns:minmax(240px,1fr) 2fr; gap:var(--s-7); padding-bottom:var(--s-7); border-bottom:1px solid rgba(22,64,111,.5); } .footer__brand{ display:flex; gap:var(--s-4); align-items:center; } .footer__word{ margin:0 0 var(--s-3); } .footer__tag{ font-size:.84rem; color:var(--text-3); max-width:34ch; } /* Emblema del pie: también es el acceso discreto al panel (5 toques) */ .footer__seal{ position:relative; display:grid; place-items:center; width:78px; height:64px; flex-shrink:0; cursor:default; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:manipulation; } .footer__seal img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 10px rgba(34,185,245,.35)); transition:transform var(--t-mid) var(--e-out), filter var(--t-mid); pointer-events:none; } .footer__seal::after{ content:''; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(34,185,245,0); transition:border-color var(--t-mid), box-shadow var(--t-mid), transform var(--t-mid) var(--e-out); pointer-events:none; } /* Respuesta muy sutil mientras se completa la secuencia */ .footer__seal.is-charging img{ transform:scale(calc(1 + var(--carga,0) * .025)); filter:drop-shadow(0 0 calc(10px + var(--carga,0) * 4px) rgba(34,185,245,.6)); } .footer__seal.is-open::after{ border-color:rgba(34,185,245,.8); box-shadow:0 0 0 6px rgba(34,185,245,.12), 0 0 40px rgba(34,185,245,.55); transform:scale(1.08); } .footer__nav{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--s-5); } .footer__nav h4{ font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); margin-bottom:var(--s-3); } .footer__nav a{ display:block; color:var(--text-2); font-size:.9rem; padding:5px 0; transition:color var(--t-fast), padding-left var(--t-fast); } .footer__nav a:hover{ color:var(--cyan); padding-left:5px; text-decoration:none; } .footer__legal{ padding-block:var(--s-6); border-bottom:1px solid rgba(22,64,111,.5); } .footer__legal p{ font-size:.84rem; color:var(--text-3); max-width:96ch; } .footer__legal strong{ color:var(--text-2); } .footer__bottom{ display:flex; flex-wrap:wrap; gap:var(--s-3); justify-content:space-between; padding-block:var(--s-5); font-size:.84rem; color:var(--text-3); } /* ========================================================================== WhatsApp flotante + toast ========================================================================== */ .waFloat{ position:fixed; right:var(--s-5); bottom:calc(var(--s-5) + env(safe-area-inset-bottom,0px)); z-index:var(--z-float); display:flex; align-items:center; gap:var(--s-3); height:56px; padding:0 var(--s-5); border-radius:var(--r-full); background:#1FA855; color:#fff; font-weight:600; font-size:.92rem; box-shadow:0 10px 34px rgba(31,168,85,.42); transition:transform var(--t-mid) var(--e-out), box-shadow var(--t-mid); } .waFloat:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 14px 42px rgba(31,168,85,.55); text-decoration:none; } .waFloat:active{ transform:scale(.97); } /* Con el menú móvil abierto el botón flotante estorba: se aparta */ html.menu-open .waFloat{ opacity:0; visibility:hidden; transform:translateY(12px); } .waFloat svg{ width:26px; height:26px; flex-shrink:0; } .toast{ position:fixed; left:50%; bottom:calc(var(--s-8) + env(safe-area-inset-bottom,0px)); transform:translate(-50%,26px); z-index:var(--z-toast); max-width:min(460px,92vw); padding:var(--s-4) var(--s-5); border-radius:var(--r-md); background:rgba(13,46,88,.97); border:1px solid rgba(34,185,245,.42); color:var(--text); font-size:.92rem; box-shadow:0 18px 50px rgba(0,0,0,.55); opacity:0; visibility:hidden; transition:opacity var(--t-mid), transform var(--t-mid) var(--e-out), visibility var(--t-mid); } .toast.is-shown{ opacity:1; visibility:visible; transform:translate(-50%,0); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width:1520px){ .nav__inner{ gap:var(--s-4); } .nav__links > a:not(.nav__cta){ padding:var(--s-2) 7px; font-size:.84rem; } .nav__links > a.nav__cta{ padding:10px var(--s-4); margin-left:6px; } } @media (max-width:1300px){ :root{ --nav-h:66px; } .nav__burger{ display:flex; position:relative; z-index:2; } /* Menú móvil a pantalla completa, con los enlaces grandes y fáciles de tocar. Alto explícito (no bottom:0): cuando la barra tiene backdrop-filter pasa a ser el bloque contenedor de los hijos fixed. */ .nav__links{ position:fixed; inset:var(--nav-h) 0 auto 0; height:calc(100vh - var(--nav-h)); height:calc(100dvh - var(--nav-h)); margin-left:0; flex-direction:column; align-items:stretch; gap:0; padding:var(--s-3) var(--s-5) calc(var(--s-6) + env(safe-area-inset-bottom,0px)); background: radial-gradient(520px 340px at 100% 0%, rgba(11,111,212,.24), transparent 70%), radial-gradient(420px 300px at 0% 100%, rgba(34,185,245,.1), transparent 70%), #030B1A; border-top:1px solid rgba(34,185,245,.14); overflow-y:auto; overscroll-behavior:contain; transform:translateY(-10px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out), visibility var(--t-mid); } .nav__links.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:none; } .nav__links > a{ display:flex; align-items:center; gap:10px; padding:15px 4px; font-family:'Sora',sans-serif; font-size:1.1rem; font-weight:500; color:var(--text); border-bottom:1px solid rgba(22,64,111,.5); border-radius:0; } .nav__links > a:not(.nav__cta)::after{ content:''; margin-left:auto; width:8px; height:8px; border-top:1.5px solid var(--cyan); border-right:1.5px solid var(--cyan); transform:rotate(45deg); opacity:.55; transition:transform var(--t-fast) var(--e-out), opacity var(--t-fast); } .nav__links > a:not(.nav__cta):active::after{ transform:translateX(4px) rotate(45deg); opacity:1; } .nav__links > a.is-current{ color:var(--cyan); } .nav__links > a.is-b2b::before{ margin-right:0; } .nav__links > a.nav__cta{ margin-top:var(--s-6); margin-left:0; min-height:54px; border-radius:var(--r-full); justify-content:center; border-bottom:0; font-size:1rem; } .nav__menuInfo{ display:block; margin-top:var(--s-4); text-align:center; font-size:.84rem; color:var(--text-3); } .nav__menuInfo a{ color:var(--text-2); font-weight:500; } /* Entrada escalonada de los enlaces al abrir */ .nav__links.is-open > *{ animation:menuIn .46s var(--e-out) both; animation-delay:calc(var(--i,0) * 32ms + 40ms); } @keyframes menuIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } } /* Con el menú abierto la barra va sólida, también en lo alto de la página */ .nav.menu-open{ background:#030B1A; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; } } /* El menú pasa a hamburguesa antes (1300 px) que el resto del diseño */ @media (max-width:1100px){ .doctor{ grid-template-columns:1fr; } .doctor__photo{ max-width:260px; } .footer__top{ grid-template-columns:1fr; } } /* -------------------------------------------------------------------------- Móvil: las rejillas de tarjetas pasan a carruseles deslizables. Antes se apilaban una tras otra y la página medía ~71 000 px de alto en un teléfono; así cada bloque ocupa lo que una sola tarjeta. main.js añade debajo de cada carrusel su indicador de posición y flechas. -------------------------------------------------------------------------- */ @media (max-width:720px){ .ramas, .cards, .zonas, .dias, .prods, .apoyo, .svcGroups, .pillars, .tabla:not(.tabla--dia) tbody{ display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:86%; gap:12px; align-items:stretch; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--s-4); margin-inline:calc(var(--s-4) * -1); padding:6px var(--s-4) 10px; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .ramas::-webkit-scrollbar, .cards::-webkit-scrollbar, .zonas::-webkit-scrollbar, .dias::-webkit-scrollbar, .prods::-webkit-scrollbar, .apoyo::-webkit-scrollbar, .svcGroups::-webkit-scrollbar, .pillars::-webkit-scrollbar, .tabla:not(.tabla--dia) tbody::-webkit-scrollbar{ display:none; } .ramas > *, .cards > *, .zonas > *, .dias > *, .prods > *, .apoyo > *, .svcGroups > *, .pillars > *, .tabla:not(.tabla--dia) tbody > tr{ scroll-snap-align:start; min-width:0; } .tabla:not(.tabla--dia) tbody{ grid-auto-columns:80%; } .tabla:not(.tabla--dia) tbody tr{ margin-bottom:0; } .cards:empty, .svcGroups:empty{ display:none; } /* Indicador de posición del carrusel (lo inserta main.js) */ .snapNav{ display:flex; align-items:center; gap:10px; margin:4px 72px var(--s-5) 0; /* hueco a la derecha para el botón de WhatsApp */ color:var(--text-2); } .snapNav__track{ margin-left:6px; } .snapNav[hidden]{ display:none; } .snapNav__track{ position:relative; flex:1; height:2px; border-radius:2px; overflow:hidden; background:rgba(157,187,214,.2); } .snapNav__track i{ position:absolute; top:0; bottom:0; left:0; width:var(--w,20%); border-radius:2px; background:var(--cyan); transform:translateX(var(--x,0)); transition:transform 120ms linear; } .snapNav__count{ font-family:'Sora',sans-serif; font-size:.74rem; font-weight:600; letter-spacing:.08em; font-variant-numeric:tabular-nums; min-width:44px; text-align:center; } .snapNav__btn{ width:38px; height:38px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(157,187,214,.3); color:var(--text); transition:background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast); } .snapNav__btn svg{ width:16px; height:16px; } .snapNav__btn:active{ background:rgba(34,185,245,.16); border-color:var(--cyan); } .snapNav__btn[disabled]{ opacity:.3; } .unit--estet .snapNav__track{ background:rgba(138,107,43,.18); } .unit--estet .snapNav__btn{ border-color:rgba(138,107,43,.3); } /* Tarjetas que en el carrusel no necesitan tanto relleno */ .rama{ padding:var(--s-6) var(--s-5); } .rama__foto{ margin:calc(var(--s-6) * -1) calc(var(--s-5) * -1) var(--s-5); } .card, .zona, .prod, .dia, .apoyoCard{ padding:var(--s-5); } .card__foto, .zona__foto, .prod__foto, .dia__foto, .apoyo__foto{ margin:calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-4); } /* Tablas dentro de las tarjetas por día (y la de implante capilar): lista compacta de una línea por procedimiento, precios a la derecha. Como tarjetas apiladas cada tarjeta del carrusel medía más de 2 000 px. */ .tabla.tabla--dia{ padding:2px 14px; border:1px solid var(--navy-edge); border-radius:var(--r-md); background:rgba(3,13,31,.3); } .unit--estet .tabla.tabla--dia{ background:#FFFDF8; border-color:rgba(138,107,43,.2); } .tabla.tabla--dia tbody tr, .unit--estet .tabla.tabla--dia tbody tr{ display:grid; grid-template-columns:1fr auto; column-gap:12px; row-gap:1px; align-items:center; margin:0; padding:11px 0; background:transparent; border:0; border-radius:0; box-shadow:none; border-bottom:1px solid var(--navy-edge); } .unit--estet .tabla.tabla--dia tbody tr{ border-bottom-color:rgba(138,107,43,.16); } .tabla.tabla--dia tbody tr:last-child{ border-bottom:0; } .tabla.tabla--dia tbody td, .unit--estet .tabla.tabla--dia tbody td{ padding:0; border:0; margin:0; } .tabla.tabla--dia tbody td::before{ display:none; } .tabla.tabla--dia tbody td:first-child{ grid-row:1 / span 2; font-size:.93rem; font-weight:600; line-height:1.35; } .tabla.tabla--dia tbody td:not(:first-child){ grid-column:2; text-align:right; white-space:nowrap; } .tabla.tabla--dia .was{ font-size:.78rem; } .tabla.tabla--dia tbody td:last-child:not(:first-child){ font-weight:700; font-size:.9rem; color:var(--cyan); } /* Datos de contacto: icono a la izquierda, más compactos */ .contactInfo{ grid-template-columns:1fr; gap:10px; } .ci{ display:grid; grid-template-columns:44px 1fr; column-gap:var(--s-4); align-items:start; padding:var(--s-4) var(--s-5); } .ci__icon{ grid-row:span 3; margin-bottom:0; } .ci h3{ font-size:.95rem; margin-bottom:2px; } } @media (max-width:680px){ .section{ padding-block:var(--s-8); } .container{ padding-inline:var(--s-4); } .secHead{ margin-bottom:var(--s-6); } .subHead{ margin:var(--s-7) 0 var(--s-4); } .blockLead{ margin:calc(var(--s-3) * -1) 0 var(--s-4); font-size:.95rem; } .hero{ min-height:auto; padding-top:calc(var(--nav-h) + var(--s-6)); padding-bottom:var(--s-8); } .hero__logo{ width:min(230px,60vw); margin-bottom:var(--s-4); } .hero__title{ font-size:clamp(1.9rem,8.4vw,2.3rem); } .hero__lead{ font-size:1rem; margin-bottom:var(--s-6); } .hero__actions{ flex-direction:column; align-items:stretch; margin-bottom:var(--s-6); } .hero__actions .btn{ width:100%; } .hero__pills{ flex-direction:column; align-items:center; gap:6px; } .hero__scroll{ display:none; } .brand__mark{ width:50px; height:42px; } .nav.is-stuck .brand__mark{ width:46px; height:38px; } .brand__word{ padding-left:12px; } .brand__nova{ font-size:1.14rem; letter-spacing:.2em; margin-right:-.2em; } .brand__sub{ font-size:.53rem; letter-spacing:.38em; margin-top:5px; padding-top:4px; } .brand__sub::before{ right:.38em; } .eyebrow{ font-size:.64rem; letter-spacing:.12em; padding:8px var(--s-3); align-items:flex-start; } .eyebrow__dot{ margin-top:5px; flex-shrink:0; } .why{ gap:0; } .why__item{ padding:var(--s-4) var(--s-3); } .step{ padding:var(--s-4); } .quote{ padding:var(--s-6) var(--s-5); } .terapias, .protocolo, .destacado, .seal{ padding:var(--s-5); } .form{ padding:var(--s-5); border-radius:var(--r-lg); } .seal{ flex-direction:column; gap:var(--s-4); } .seal__bar{ width:44px; height:3px; } .spec__row{ grid-template-columns:1fr; gap:var(--s-1); } .doctor{ padding:var(--s-5); gap:var(--s-5); } .doctor__photo{ max-width:240px; width:100%; margin-inline:auto; } .doctor__creds li{ padding:10px var(--s-3); font-size:.86rem; } .b2bActions .btn{ flex:1 1 100%; } .tabs__bar{ flex-direction:column; border-radius:var(--r-lg); } .tab{ border-radius:var(--r-md); } .map{ height:300px; } .waFloat__label{ display:none; } .waFloat{ padding:0; width:56px; justify-content:center; right:var(--s-4); } .footer__brand{ align-items:flex-start; } .footer__bottom{ flex-direction:column; gap:var(--s-2); } } /* En pantallas táctiles no hay «hover»: el efecto se quedaba pegado tras tocar */ @media (hover:none){ .rama:hover, .card:hover, .zona:hover, .prod:hover, .pillar:hover, .ci:hover, .btn--primary:hover, .btn--ghost:hover, .btn--green:hover, .waFloat:hover{ transform:none; } .rama:hover .rama__foto img, .card:hover .card__foto img, .zona:hover .zona__foto img, .prod:hover .prod__foto img, .galeria__item:hover img{ transform:none; } } /* ========================================================================== Accesibilidad: movimiento reducido ========================================================================== */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .reveal{ opacity:1; transform:none; } .hero__canvas,.b2b__canvas{ display:none; } } /* Impresión */ @media print{ .nav,.waFloat,.hero__canvas,.b2b__canvas,.hero__scroll,.toast{ display:none; } body{ background:#fff; color:#000; } }