/* ═══════════════════════════════════════════════════════════════ herramientas.css · Sphaera Coaching · Header y estilos compartidos Usar junto con style.css específico de cada herramienta ═══════════════════════════════════════════════════════════════ */ /* ─── FUENTES (si no están ya cargadas) ─── */ /* Las herramientas deben cargar Cormorant Garamond + Jost en su */ /* ─── RESET MÍNIMO ─── */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } /* ─── VARIABLES COMPARTIDAS ─── */ :root { --h-sand: #f5f0e8; --h-linen: #ede7d9; --h-terra: #a0764e; --h-terra-d: #8b6b4a; --h-terra-l: #f0e6d8; --h-sage: #4a6b58; --h-charcoal: #2c2925; --h-warm-mid: #6b5c48; --h-mist: #ddd6c8; --h-white: #fdfaf5; --h-nav-height: 64px; } /* ═══════════════════════════════════════════ NAV LIGHT (herramientas sobre fondo claro) ═══════════════════════════════════════════ */ .tool-nav { position:fixed; top:0; left:0; right:0; z-index:500; display:flex; align-items:center; justify-content:space-between; padding:0 20px; height:var(--h-nav-height); background:rgba(253,250,245,.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--h-mist); } .tool-nav__logo { display:flex; align-items:center; text-decoration:none; flex-shrink:0; } .tool-nav__logo svg { width:152px; height:38px; } .tool-nav__center { position:absolute; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; pointer-events:none; } .tool-nav__eyebrow { font-family:'Jost', sans-serif; font-size:8.5px; font-weight:400; letter-spacing:.22em; text-transform:uppercase; color:var(--h-terra); opacity:.7; line-height:1; display:block; margin-bottom:2px; } .tool-nav__name { font-family:'Cormorant Garamond', serif; font-size:15px; font-weight:300; font-style:italic; color:var(--h-charcoal); line-height:1; white-space:nowrap; } .tool-nav__back { font-family:'Jost', sans-serif; font-size:10.5px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--h-warm-mid); text-decoration:none; transition:color .2s; display:flex; align-items:center; gap:5px; white-space:nowrap; } .tool-nav__back:hover { color:var(--h-terra); } .tool-nav__back svg { width:14px; height:14px; flex-shrink:0; } /* Badge código anónimo en nav (opcional) */ .tool-nav__code-badge { font-family:'Jost', sans-serif; font-size:9.5px; font-weight:400; letter-spacing:.1em; color:var(--h-warm-mid); background:var(--h-linen); border:1px solid var(--h-mist); padding:4px 10px; white-space:nowrap; display:none; /* mostrar via JS cuando código disponible */ } /* ═══════════════════════════════════════════ NAV DARK (herramientas sobre fondo oscuro) ═══════════════════════════════════════════ */ .tool-nav--dark { background:rgba(44,41,37,.94); border-bottom-color:rgba(221,214,200,.1); } .tool-nav--dark .tool-nav__eyebrow { color:rgba(160,118,78,.8); } .tool-nav--dark .tool-nav__name { color:rgba(253,250,245,.9); } .tool-nav--dark .tool-nav__back { color:rgba(253,250,245,.45); } .tool-nav--dark .tool-nav__back:hover { color:var(--h-terra); } .tool-nav--dark .tool-nav__code-badge { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:rgba(253,250,245,.45); } /* ═══════════════════════════════════════════ OFFSET BODY (compensar nav fixed) ═══════════════════════════════════════════ */ .tool-body-offset { padding-top:var(--h-nav-height); } /* ═══════════════════════════════════════════ PAGE HEADER (banner bajo el nav) ═══════════════════════════════════════════ */ .tool-page-header { padding:40px 20px 36px; text-align:center; background:linear-gradient(to bottom, var(--h-terra-l), var(--h-sand)); border-bottom:1px solid var(--h-mist); } .tool-page-header--dark { background:transparent; /* en dark la página ya tiene su propio bg */ border-bottom-color:rgba(221,214,200,.08); } .tool-page-eyebrow { font-family:'Jost', sans-serif; font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--h-terra); margin-bottom:14px; display:block; } .tool-page-eyebrow--dark { color:rgba(160,118,78,.7); } .tool-page-title { font-family:'Cormorant Garamond', serif; font-size:clamp(28px,7vw,42px); font-weight:300; line-height:1.15; color:var(--h-charcoal); margin-bottom:12px; } .tool-page-title--dark { color:var(--h-white); } .tool-page-title em { font-style:italic; color:var(--h-terra); } .tool-page-desc { font-family:'Jost', sans-serif; font-size:clamp(13px,3vw,14.5px); line-height:1.8; color:var(--h-warm-mid); max-width:460px; margin:0 auto; } .tool-page-desc--dark { color:rgba(253,250,245,.5); } /* ═══════════════════════════════════════════ SVG LOGOS (light y dark) ═══════════════════════════════════════════ */ /* Definidos inline en cada herramienta — aquí solo dimensiones */ .tool-nav__logo-svg { width:152px; height:38px; display:block; } /* ─── RESPONSIVE ─── */ @media (min-width:480px) { .tool-nav { padding:0 28px; } .tool-page-header { padding:44px 28px 40px; } } @media (min-width:768px) { .tool-nav { padding:0 44px; } .tool-nav__logo svg { width:168px; height:42px; } .tool-page-header { padding:48px 44px 44px; } } @media (max-width:520px) { /* En móvil pequeño ocultar el nombre central si no cabe */ .tool-nav__center { display:none; } }