/* ============================================================ Alma Crece — /informacion/ (artículos clínicos) Estilo: documento de lectura, calmo, sin hero llamativo. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&family=Quicksand:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/icon?family=Material+Icons+Outlined'); @import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round'); :root { /* Brand tokens (canónicos del sistema Alma Crece) */ --color-primary: #5B85AA; --color-primary-soft: #77A9C8; --color-secondary: #DAA85A; --color-secondary-soft: #EBB348; --color-tertiary: #8F9E8B; --color-tertiary-soft: #8ABB86; --color-accent-yellow: #FAD06C; --color-bg: #F9F7F2; --color-bg-alt: #FDFBF7; --color-surface: #FFFFFF; --color-fg-1: #2C3E50; --color-fg-2: #333333; --color-fg-3: #4A5568; --color-fg-4: #6B7280; --color-fg-5: #9CA3AF; --color-fg-quote: #5A6E57; --border-default: #E5E7EB; --border-subtle: rgba(0,0,0,0.06); --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.06); --shadow-lg: 0 10px 30px rgba(91,133,170,0.12); --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-pill: 9999px; --font-display: "Cormorant Garamond", "Garamond", serif; --font-body: "Montserrat", system-ui, -apple-system, sans-serif; --font-logo: "Quicksand", "Montserrat", sans-serif; --eyebrow-tracking: 0.25em; --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* Tweakables (sobrescritos por panel Tweaks o por ) */ --reading-size: 1.0625rem; /* 17px base */ --reading-width: 38rem; /* ~608px columna */ } /* ----- Acento por tema (sobrescribe en ----- */ :root, body { --tema-accent: var(--color-tertiary); --tema-accent-soft: rgba(143,158,139,0.12); } body[data-tema="depresion"] { --tema-accent: #5A6E57; --tema-accent-soft: rgba(90,110,87,0.10); } body[data-tema="ansiedad"] { --tema-accent: #5B85AA; --tema-accent-soft: rgba(91,133,170,0.10); } body[data-tema="duelo"] { --tema-accent: #6B7B8C; --tema-accent-soft: rgba(107,123,140,0.10); } body[data-tema="autoestima"] { --tema-accent: #C89248; --tema-accent-soft: rgba(200,146,72,0.10); } body[data-tema="identidad-de-genero"] { --tema-accent: #77A9C8; --tema-accent-soft: rgba(119,169,200,0.10); } body[data-tema="trastornos-del-sueno"] { --tema-accent: #3F5C7E; --tema-accent-soft: rgba(63,92,126,0.10); } /* ============================================================ Base ============================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { margin: 0; background: var(--color-bg); color: var(--color-fg-2); font-family: var(--font-body); font-weight: 300; line-height: 1.7; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ============================================================ Nav (idéntico al sitio, con scroll-hide vía JS) ============================================================ */ .alma-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid #F1EFE9; transition: transform 350ms var(--ease-soft); } .alma-nav.is-hidden { transform: translateY(-100%); } .alma-nav__inner { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; height: 4.5rem; display: flex; align-items: center; justify-content: space-between; } .alma-nav__logo img { height: 2.5rem; width: auto; } .alma-nav__links { display: none; gap: 2rem; align-items: center; } @media (min-width: 768px) { .alma-nav__links { display: flex; } } .alma-nav__link { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-fg-3); font-weight: 500; transition: color 200ms var(--ease-soft); } .alma-nav__link:hover { color: var(--color-primary); } .alma-nav__link.is-active { color: var(--color-primary); font-weight: 600; } .alma-nav__cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.25rem; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font-size: 0.8125rem; font-weight: 500; box-shadow: var(--shadow-md); transition: all 250ms var(--ease-soft); } .alma-nav__cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); opacity: 0.95; } .alma-nav__burger { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; color: var(--color-fg-3); background: transparent; border: 0; cursor: pointer; } @media (min-width: 768px) { .alma-nav__burger { display: none; } } .alma-nav__mobile { display: none; background: rgba(255,255,255,0.98); backdrop-filter: blur(12px); border-bottom: 1px solid #F1EFE9; padding: 0.5rem 1.5rem 1.25rem; } .alma-nav__mobile.is-open { display: block; } .alma-nav__mobile a { display: block; padding: 0.85rem 0.25rem; border-bottom: 1px solid #F1EFE9; font-size: 1rem; color: var(--color-fg-2); font-weight: 500; } .alma-nav__mobile a:last-of-type { border-bottom: 0; } .alma-nav__mobile .alma-nav__cta { margin-top: 0.75rem; width: 100%; justify-content: center; padding: 0.85rem; } /* ============================================================ Layout — documento de lectura ============================================================ */ .alma-article { max-width: var(--reading-width); margin: 0 auto; padding: 6rem 1.5rem 4rem; } @media (min-width: 768px) { .alma-article { padding: 7.5rem 1.5rem 5rem; } } /* ----- Eyebrow / migaja ----- */ .alma-crumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-fg-4); font-weight: 600; margin-bottom: 1.5rem; } .alma-crumb a:hover { color: var(--tema-accent); } .alma-crumb__sep { opacity: 0.5; } .alma-crumb__current { color: var(--tema-accent); } /* ----- H1 documento ----- */ .alma-doc-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 4.2vw, 3.1rem); line-height: 1.12; color: var(--color-fg-1); margin: 0 0 1.25rem; letter-spacing: -0.005em; text-wrap: pretty; } .alma-doc-title em { font-style: italic; color: var(--tema-accent); font-weight: 400; } .alma-doc-lede { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.45; color: var(--color-fg-quote); margin: 0 0 2rem; text-wrap: pretty; } /* ----- Meta line (autor · fecha · lectura) ----- */ .alma-doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.8125rem; color: var(--color-fg-4); font-weight: 400; padding: 1rem 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); margin-bottom: 2.5rem; } .alma-doc-meta__author { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--color-fg-2); font-weight: 500; } .alma-doc-meta__avatar { width: 1.85rem; height: 1.85rem; border-radius: 50%; background: linear-gradient(135deg, var(--tema-accent) 0%, var(--color-tertiary-soft) 100%); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; } .alma-doc-meta__dot { opacity: 0.4; } /* ----- Cuerpo del artículo ----- */ .alma-prose { font-size: var(--reading-size); line-height: 1.75; color: var(--color-fg-2); } .alma-prose > * + * { margin-top: 1.25em; } .alma-prose p { margin: 0; } .alma-prose p strong { font-weight: 600; color: var(--color-fg-1); } .alma-prose p em { font-style: italic; color: var(--color-fg-quote); } .alma-prose h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 2.5vw, 1.85rem); line-height: 1.25; color: var(--color-fg-1); margin: 2.75em 0 0.25em; letter-spacing: -0.005em; } .alma-prose h2::after { content: ""; display: block; width: 3rem; height: 3px; background: var(--tema-accent); border-radius: 2px; margin-top: 0.85rem; } .alma-prose h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--color-fg-1); margin: 2em 0 0.5em; } .alma-prose a { color: var(--tema-accent); border-bottom: 1px solid rgba(0,0,0,0.12); transition: border-color 200ms var(--ease-soft); } .alma-prose a:hover { border-bottom-color: var(--tema-accent); } .alma-prose ul, .alma-prose ol { margin: 0; padding-left: 1.25rem; } .alma-prose ul li, .alma-prose ol li { margin: 0.4em 0; } /* ----- Lista de señales (iconos) ----- */ .alma-signals { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.75rem; } @media (min-width: 640px) { .alma-signals { grid-template-columns: 1fr 1fr; } } .alma-signals li { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1rem 1.1rem; background: var(--color-bg-alt); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 0.95rem; line-height: 1.55; color: var(--color-fg-2); } .alma-signals .material-icons-outlined { color: var(--tema-accent); font-size: 1.4rem; flex-shrink: 0; margin-top: 0.05em; } /* ----- Pull quote (cita de Belén) ----- */ .alma-pullquote { margin: 2.75em 0; padding: 1.25rem 0 1.25rem 1.5rem; border-left: 3px solid var(--tema-accent); font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.4; color: var(--color-fg-quote); text-wrap: pretty; } .alma-pullquote cite { display: block; margin-top: 0.75rem; font-family: var(--font-body); font-style: normal; font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-fg-4); font-weight: 600; } /* ----- Bloque "Cómo lo abordamos" ----- */ .alma-approach { margin: 3rem 0 0; padding: 1.75rem 1.5rem; background: var(--tema-accent-soft); border-radius: var(--radius-lg); } .alma-approach h2 { margin-top: 0; } .alma-approach h2::after { background: var(--tema-accent); } /* ----- CTA block ----- */ .alma-cta-block { margin: 3.5rem 0 0; text-align: center; padding: 2.5rem 1.5rem; background: var(--color-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); } .alma-cta-block__eyebrow { font-size: 0.7rem; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--tema-accent); font-weight: 600; margin-bottom: 0.75rem; } .alma-cta-block__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.5vw, 1.9rem); color: var(--color-fg-1); margin: 0 0 0.5rem; text-wrap: pretty; line-height: 1.25; } .alma-cta-block__sub { font-size: 0.95rem; color: var(--color-fg-3); max-width: 32rem; margin: 0 auto 1.5rem; line-height: 1.6; } .alma-cta-block__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; } .alma-btn-primary, .alma-btn-ghost { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.6rem; border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 500; font-size: 0.875rem; letter-spacing: 0.01em; cursor: pointer; transition: all 250ms var(--ease-soft); border: 0; } .alma-btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-md); } .alma-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); opacity: 0.95; } .alma-btn-ghost { background: transparent; color: var(--color-fg-2); border: 1px solid var(--border-default); } .alma-btn-ghost:hover { border-color: var(--tema-accent); color: var(--tema-accent); } /* ----- Artículos relacionados ----- */ .alma-related { margin: 4.5rem 0 0; } .alma-related__title { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; color: var(--color-fg-1); margin: 0 0 0.5rem; } .alma-related__sub { font-size: 0.875rem; color: var(--color-fg-4); margin: 0 0 1.5rem; } .alma-related__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .alma-related__grid { grid-template-columns: repeat(3, 1fr); } } .alma-related__card { display: block; padding: 1.25rem 1.25rem 1.35rem; background: var(--color-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); transition: all 250ms var(--ease-soft); } .alma-related__card:hover { border-color: var(--tema-accent); transform: translateY(-2px); box-shadow: var(--shadow-md); } .alma-related__eyebrow { display: flex; align-items: center; gap: 0.4rem; font-size: 0.65rem; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-fg-4); font-weight: 600; margin-bottom: 0.6rem; } .alma-related__eyebrow .material-icons-outlined { font-size: 0.9rem; color: var(--tema-accent); } .alma-related__h { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; color: var(--color-fg-1); line-height: 1.25; margin: 0 0 0.35rem; } .alma-related__p { font-size: 0.85rem; color: var(--color-fg-3); line-height: 1.55; margin: 0; } /* ============================================================ Footer (idéntico al resto del sitio, condensado) ============================================================ */ .alma-footer { background: var(--color-bg-alt); border-top: 1px solid var(--border-default); margin-top: 6rem; padding: 4rem 1.5rem 2rem; } .alma-footer__inner { max-width: 80rem; margin: 0 auto; } .alma-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; margin-bottom: 3rem; } @media (min-width: 768px) { .alma-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } } .alma-footer__brand-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--color-primary); margin: 0 0 1rem; } .alma-footer__p { font-size: 0.875rem; color: var(--color-fg-4); line-height: 1.6; margin: 0 0 1.25rem; max-width: 24rem; } .alma-footer__social { display: flex; gap: 1rem; } .alma-footer__social a { color: var(--color-fg-5); transition: color 200ms; } .alma-footer__social a:hover { color: var(--color-secondary); } .alma-footer__h { font-family: var(--font-display); font-size: 1.05rem; color: var(--color-fg-1); margin: 0 0 1rem; font-weight: 500; } .alma-footer__list { list-style: none; padding: 0; margin: 0; } .alma-footer__list li { margin: 0.5rem 0; font-size: 0.875rem; color: var(--color-fg-3); } .alma-footer__list a:hover { color: var(--color-primary); } .alma-footer__contact-item { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.875rem; color: var(--color-fg-3); margin: 0.75rem 0; } .alma-footer__contact-item .material-icons-outlined { color: var(--color-primary); font-size: 1.1rem; margin-top: 0.1rem; } .alma-footer__bottom { border-top: 1px solid var(--border-default); padding-top: 1.25rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 0.75rem; color: var(--color-fg-5); } .alma-footer__bottom-links { display: flex; gap: 1.5rem; } .alma-footer__bottom a:hover { color: var(--color-fg-3); } /* ============================================================ WhatsApp Float (idéntico) ============================================================ */ .wsp-float { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 60; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 28px rgba(37,211,102,0.4); transition: transform 300ms var(--ease-soft); } .wsp-float:hover { transform: scale(1.08); } .wsp-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25D366; opacity: 0.4; animation: wsp-pulse 2.5s ease-out infinite; } @keyframes wsp-pulse { 0% { transform: scale(1); opacity: 0.4; } 100% { transform: scale(1.7); opacity: 0; } } .wsp-float svg { width: 1.75rem; height: 1.75rem; position: relative; z-index: 1; } /* ============================================================ Hub (/informacion/index.html) ============================================================ */ .alma-hub { max-width: 64rem; margin: 0 auto; padding: 6.5rem 1.5rem 4rem; } @media (min-width: 768px) { .alma-hub { padding: 8rem 2rem 5rem; } } .alma-hub__intro { max-width: 38rem; margin-bottom: 3.5rem; } .alma-hub__eyebrow { font-size: 0.7rem; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-tertiary); font-weight: 600; margin: 0 0 1rem; } .alma-hub__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.25rem, 4.5vw, 3.4rem); color: var(--color-fg-1); line-height: 1.1; margin: 0 0 1.25rem; text-wrap: pretty; } .alma-hub__title em { font-style: italic; color: var(--color-primary); } .alma-hub__sub { font-size: 1.0625rem; color: var(--color-fg-3); line-height: 1.65; margin: 0; text-wrap: pretty; } .alma-hub__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .alma-hub__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .alma-hub__grid { grid-template-columns: repeat(3, 1fr); } } .alma-hub__card { display: block; padding: 1.75rem 1.5rem 1.5rem; background: var(--color-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); transition: all 300ms var(--ease-soft); position: relative; overflow: hidden; } .alma-hub__card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--card-accent, var(--color-tertiary)); transition: width 300ms var(--ease-soft); } .alma-hub__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: transparent; } .alma-hub__card:hover::before { width: 5px; } .alma-hub__icon { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--card-accent-soft, rgba(143,158,139,0.12)); color: var(--card-accent, var(--color-tertiary)); margin-bottom: 1.1rem; } .alma-hub__icon .material-icons-outlined { font-size: 1.4rem; } .alma-hub__card-title { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; color: var(--color-fg-1); margin: 0 0 0.4rem; line-height: 1.25; } .alma-hub__card-p { font-size: 0.9rem; color: var(--color-fg-3); line-height: 1.55; margin: 0 0 1.1rem; } .alma-hub__card-link { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--card-accent, var(--color-tertiary)); display: inline-flex; align-items: center; gap: 0.35rem; } .alma-hub__card-link .material-icons-outlined { font-size: 1rem; transition: transform 250ms var(--ease-soft); } .alma-hub__card:hover .alma-hub__card-link .material-icons-outlined { transform: translateX(3px); } /* ============================================================ Tweaks panel (opcional, toggle del host) ============================================================ */ .tweaks-panel { position: fixed; bottom: 6rem; right: 1.5rem; z-index: 70; width: 18rem; background: rgba(255,255,255,0.97); backdrop-filter: blur(10px); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: 0 16px 40px rgba(0,0,0,0.10); padding: 1.1rem 1.1rem 1rem; font-family: var(--font-body); display: none; } .tweaks-panel.is-open { display: block; } .tweaks-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--color-fg-3); } .tweaks-panel__close { background: none; border: 0; color: var(--color-fg-4); cursor: pointer; display: inline-flex; align-items: center; } .tweaks-row { margin: 0.85rem 0; } .tweaks-row__label { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--color-fg-3); font-weight: 500; margin-bottom: 0.4rem; letter-spacing: 0.02em; } .tweaks-row__label b { color: var(--color-fg-1); font-weight: 600; } .tweaks-row input[type="range"] { width: 100%; accent-color: var(--tema-accent); } /* Subtle fade-in for the document */ .alma-fade-in { animation: fadeUp 0.65s var(--ease-soft) both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Respect OS-level reduced-motion preference (a11y) */ @media (prefers-reduced-motion: reduce) { .alma-fade-in { animation: none; opacity: 1; transform: none; } .alma-nav { transition: none; } .wsp-float::before { animation: none; } html { scroll-behavior: auto; } * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* Print-friendliness (estos son artículos clínicos) */ @media print { .alma-nav, .wsp-float, .tweaks-panel, .alma-cta-block, .alma-related, .alma-footer { display: none; } .alma-article { max-width: none; padding: 0; } body { background: #fff; } }