24 …
-------------------------------------------------------------------------- */
.calm-bar {
background: var(--ink);
color: var(--white);
padding-block: clamp(36px, 6vh, 64px);
}
.calm-bar__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: var(--gutter);
}
.calm-stat {
border-left: var(--rule-inverse);
padding-left: clamp(14px, 1.5vw, 24px);
}
.calm-stat__num {
display: block;
font-family: var(--font-display);
font-optical-sizing: auto;
font-size: var(--step-4);
font-weight: 500;
line-height: 1.05;
color: var(--sol);
font-variant-numeric: tabular-nums;
}
.calm-stat__num sub, .calm-stat__num .unit {
font-size: 0.45em;
font-family: var(--font-mono);
letter-spacing: var(--tracking-mono);
vertical-align: baseline;
}
.calm-stat__label {
display: block;
margin-top: 6px;
font-family: var(--font-mono);
font-size: var(--step--1);
letter-spacing: var(--tracking-mono);
text-transform: uppercase;
color: var(--white-60);
}
/* --------------------------------------------------------------------------
11. COMPONENTE · Tarjeta editorial (blog / actualidad / cruces)
Uso:
…
16 ABR — COMUNIDAD
…
-------------------------------------------------------------------------- */
.card-ed {
display: block;
color: inherit;
text-decoration: none;
padding-bottom: var(--space-cluster);
border-bottom: var(--rule-ink);
}
.card-ed__meta {
margin-top: 14px;
font-family: var(--font-mono);
font-size: var(--step--1);
letter-spacing: var(--tracking-mono);
text-transform: uppercase;
color: var(--gray-text);
}
.card-ed__title {
margin-top: 8px;
font-family: var(--font-display);
font-optical-sizing: auto;
font-size: var(--step-2);
font-weight: 550;
line-height: 1.15;
letter-spacing: var(--tracking-display);
}
.card-ed:hover .card-ed__title { color: var(--indigo); }
.card-ed__excerpt { margin-top: 8px; color: var(--gray-text); font-size: var(--step-0); }
/* --------------------------------------------------------------------------
12. COMPONENTE · Vídeo testimonio (click-to-play YouTube)
Uso:
…
Encarni — Antigua residente
-------------------------------------------------------------------------- */
.video-testi { margin: 0; }
.video-testi__btn {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
padding: 0;
border: 0;
border-radius: var(--radius-s);
overflow: hidden;
cursor: pointer;
background: var(--ink);
}
.video-testi__btn img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease-editorial);
}
.video-testi__btn:hover img { transform: scale(1.04); }
.video-testi__play {
position: absolute;
left: 12px; bottom: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
background: var(--sol);
color: var(--ink);
border-radius: var(--radius-s);
transition: background var(--dur-fast) var(--ease-editorial);
}
.video-testi__btn:hover .video-testi__play { background: var(--sol-hover); }
.video-testi__play svg { width: 18px; height: 18px; fill: currentColor; }
.video-testi iframe {
width: 100%; height: 100%;
border: 0;
position: absolute; inset: 0;
}
.video-testi figcaption {
margin-top: 10px;
font-family: var(--font-mono);
font-size: var(--step--1);
letter-spacing: var(--tracking-mono);
text-transform: uppercase;
color: var(--gray-text);
}
.video-testi figcaption strong { color: inherit; font-weight: 500; }
.bg-ink .video-testi figcaption { color: var(--white-60); }
/* --------------------------------------------------------------------------
13. COMPONENTE · Header sticky (todas las páginas)
Transparente sobre el hero → tras scroll (html.js + .is-scrolled desde
main.js): fondo blanco, filete inferior y logo reducido.
Estructura: header.site-header > div.site-header__bar > [logo | nav | cta | burger]
-------------------------------------------------------------------------- */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: var(--z-header);
background: transparent;
border-bottom: 1px solid transparent;
transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.site-header.is-scrolled,
.site-header.is-open {
background: var(--white);
border-bottom: var(--rule);
}
.site-header__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gutter);
min-height: var(--header-h);
transition: min-height var(--dur-fast) ease;
}
.site-header.is-scrolled .site-header__bar { min-height: var(--header-h-compact); }
.brand {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--ink);
}
/* Marca — logotipo oficial (rut-ink.png sobre claro): el wordmark real
de trazo tubular sustituye a la reconstrucción tipográfica "RUT" */
.brand__logo-img {
height: 48px;
width: auto;
transition: height var(--dur-fast) ease;
}
.site-header.is-scrolled .brand__logo-img { height: 38px; } /* logo reducido */
/* Variante de dos logos (blanco + tinta): para páginas cuyo hero es
oscuro bajo el header transparente. Se incluyen ambas imágenes en el
HTML y se alternan por CSS según .is-scrolled — sin JS adicional.
Uso:
*/
.brand__logo-img--white { display: none; }
.site-header:not(.is-scrolled) .brand__logo-img--white { display: block; }
.site-header:not(.is-scrolled) .brand__logo-img--ink { display: none; }
.brand__sub {
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: var(--tracking-mono);
text-transform: uppercase;
color: var(--gray-text);
}
@media (max-width: 1100px) { .brand__sub { display: none; } }
.site-nav ul, .site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-nav > ul {
display: flex;
align-items: center;
gap: clamp(10px, 1.3vw, 26px);
}
.site-nav a { text-decoration: none; }
.site-nav > ul > li > a {
display: inline-flex;
align-items: center;
white-space: nowrap;
min-height: var(--tap-min);
font-weight: 600;
font-size: var(--step--1);
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ink);
/* subrayado amarillo que crece desde la izquierda */
background-image: linear-gradient(var(--sol), var(--sol));
background-repeat: no-repeat;
background-size: 0% 2px;
background-position: 0 calc(50% + 0.9em);
transition: background-size var(--dur-fast) var(--ease-editorial);
}
.site-nav > ul > li > a:hover,
.site-nav > ul > li > a:focus-visible,
.site-nav > ul > li > a[aria-current="page"] { background-size: 100% 2px; color: var(--ink); }
.nav-item { position: relative; }
.nav-sub {
position: absolute;
top: 100%; left: -18px;
min-width: 250px;
padding: 8px 0;
background: var(--white);
border: var(--rule);
border-top: 2px solid var(--sol);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease, visibility var(--dur-fast);
}
.nav-item:hover .nav-sub,
.nav-item:focus-within .nav-sub,
.nav-item.is-open .nav-sub {
opacity: 1;
visibility: visible;
transform: none;
}
.nav-sub a {
display: block;
padding: 10px 18px;
font-size: var(--step--1);
color: var(--ink);
}
.nav-sub a:hover, .nav-sub a:focus-visible { background: var(--mist); color: var(--indigo); }
.site-header__cta { flex: none; }
.burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: var(--tap-min);
height: var(--tap-min);
padding: 10px;
background: none;
border: 0;
cursor: pointer;
}
.burger span {
display: block;
height: 2px;
width: 100%;
background: var(--ink);
transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.site-header.is-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .burger span:nth-child(2) { opacity: 0; }
.site-header.is-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1020px) {
.burger { display: flex; }
.site-header__cta { display: none; }
.site-nav {
display: none;
position: absolute;
top: 100%; left: 0; right: 0;
background: var(--white);
border-bottom: var(--rule);
max-height: calc(100vh - var(--header-h-compact));
overflow-y: auto;
}
.site-header.is-open .site-nav { display: block; }
.site-nav > ul {
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 10px var(--margin-page) 24px;
}
.site-nav > ul > li { border-bottom: var(--rule); }
.site-nav > ul > li > a { width: 100%; padding: 12px 0; background-position: 0 100%; }
.nav-sub {
position: static;
display: none;
opacity: 1;
visibility: visible;
transform: none;
border: 0;
border-top: 0;
padding: 0 0 10px 14px;
min-width: 0;
}
.nav-item.is-open .nav-sub { display: block; }
}
/* --------------------------------------------------------------------------
14. COMPONENTE · Footer tinta (sumario de revista, todas las páginas)
Estructura: footer.site-footer > .site-footer__trazo + .site-footer__cols + .site-footer__legal
-------------------------------------------------------------------------- */
.site-footer {
background: var(--ink-deep);
color: var(--white);
padding-top: var(--space-block);
}
/* El logotipo oficial completo, como marca fantasma (sustituye a la
antigua palabra "RUT" reconstruida con la tipografía de la web) */
.site-footer__trazo {
display: block;
width: min(50vw, 400px);
height: auto;
opacity: 0.14;
user-select: none;
pointer-events: none;
margin-bottom: calc(var(--space-block) * 0.4);
}
.site-footer__logo {
height: 40px;
width: auto;
margin-bottom: 12px;
}
.site-footer__social { margin-top: 16px; }
/* Iconos sociales (footer y cierre). Componente compartido: sin esta
regla los
quedan sin tamaño y se renderizan enormes. */
.social-row { display: flex; gap: 10px; }
.social-row a {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--tap-min);
height: var(--tap-min);
border: 1px solid var(--white-20);
border-radius: var(--radius-s);
transition: border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-editorial);
}
.social-row a:hover { border-color: var(--sol); transform: translateY(-2px); }
.social-row svg { width: 18px; height: 18px; fill: var(--white); }
.social-row a:hover svg { fill: var(--sol); }
.site-footer__cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-cluster) var(--gutter);
padding-block: var(--space-block);
border-top: var(--rule-inverse);
}
.site-footer__cols h2 {
font-family: var(--font-mono);
font-size: var(--step--1);
font-weight: 500;
letter-spacing: var(--tracking-mono);
text-transform: uppercase;
color: var(--sol);
margin-bottom: 14px;
}
.site-footer__cols li { padding: 4px 0; font-size: var(--step--1); }
.site-footer__cols a {
color: var(--white-60);
text-decoration: none;
}
.site-footer__cols a:hover, .site-footer__cols a:focus-visible { color: var(--sol); }
.site-footer__cols address { font-style: normal; color: var(--white-60); font-size: var(--step--1); }
.site-footer__legal {
display: flex;
flex-wrap: wrap;
gap: 8px var(--gutter);
justify-content: space-between;
padding-block: 22px;
border-top: var(--rule-inverse);
font-family: var(--font-mono);
font-size: var(--step--1);
letter-spacing: 0.04em;
color: var(--white-60);
}
/* --------------------------------------------------------------------------
15. Motion base: reveals (gateados por html.js — sin JS todo es visible)
Uso: data-reveal en el elemento; data-reveal-group en un padre para
escalonar hijos (main.js pone --reveal-delay por índice, 80ms).
-------------------------------------------------------------------------- */
html.js [data-reveal] {
opacity: 0;
transform: translateY(24px);
transition:
opacity var(--dur-slow) var(--ease-editorial),
transform var(--dur-slow) var(--ease-editorial);
transition-delay: var(--reveal-delay, 0ms);
}
html.js [data-reveal].is-visible {
opacity: 1;
transform: none;
}
/* --------------------------------------------------------------------------
16. WhatsApp flotante (canal real de contacto de la RUT)
-------------------------------------------------------------------------- */
.wa-float {
position: fixed;
right: 22px; bottom: 22px;
z-index: var(--z-float);
display: flex;
align-items: center;
justify-content: center;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--ink);
border: 2px solid var(--sol);
transition: transform var(--dur-fast) var(--ease-editorial), background var(--dur-fast) ease;
}
.wa-float:hover { transform: scale(1.06); background: var(--indigo); }
.wa-float svg { width: 26px; height: 26px; fill: var(--sol); }
/* --------------------------------------------------------------------------
17. Formularios (labels visibles, campos mist, área táctil ≥44px)
-------------------------------------------------------------------------- */
.field { margin-bottom: 18px; }
.field label {
display: block;
margin-bottom: 6px;
font-family: var(--font-mono);
font-size: var(--step--1);
letter-spacing: var(--tracking-mono);
text-transform: uppercase;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
width: 100%;
min-height: var(--tap-min);
padding: 10px 14px;
background: var(--mist);
border: 1px solid var(--line);
border-radius: var(--radius-s);
color: var(--ink);
}
.field input:focus, .field textarea:focus {
outline: var(--focus-ring);
outline-offset: 0;
border-color: var(--indigo);
}
.field--check {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: var(--step--1);
}
.field--check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--indigo); }
.form-ok {
display: none;
margin-top: 16px;
padding: 12px 16px;
background: var(--paper-warm);
border-left: 4px solid var(--sol);
font-size: var(--step--1);
}
.form-ok.is-visible { display: block; }
/* --------------------------------------------------------------------------
18. prefers-reduced-motion (§3.5 — obligatorio)
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
html.js [data-reveal] { opacity: 1; transform: none; }
html.js .hl { background-size: 100% 0.34em; }
}