/* ==========================================================================
   RUT — TINTA Y SOL · home-logo.css
   Propuesta alternativa de home (index-logo.html): «LA FIRMA».
   Diferenciador: el LOGOTIPO OFICIAL (wordmark «Rut» de trazo tubular de
   doble línea) sustituye a la marca tipográfica y se usa como sistema
   decorativo de la página:
     · marcas de agua (hero, familias, cierre, footer) → el logotipo real
       (assets/img/logo/rut-*.png), entero o recortado — nunca la palabra
       «RUT» reconstruida con la tipografía de la web
     · .hilo                     → línea conductora de doble filo entre
       secciones, dibujada al entrar en viewport
     · .arco / .cap__swash       → arcos y remates de doble línea (fotos,
       folios de capítulo), formas abstractas derivadas del trazo del logo
     · .calm-bar--trazo          → cenefa de pares de líneas paralelas
   Requiere tokens.css + base.css. No sustituye a home.css (index.html).
   ========================================================================== */

/* La marca (logotipo oficial en el header) y el fantasma del footer ahora
   son componentes compartidos: ver base.css §"Marca — logotipo oficial". */

/* --------------------------------------------------------------------------
   2. HERO · marca de agua gigante + composición asimétrica
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(28px, 6vh, 72px));
  overflow-x: clip;
}
.hero__marca {
  display: block;
  position: absolute;
  top: clamp(48px, 9vh, 120px);
  right: -7vw;
  width: min(72vw, 860px);
  height: auto;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* la marca de agua no usa el reveal genérico de opacidad/translate:
   se queda fija en su opacidad (sin salto de layout) */
html.js .hero__marca[data-reveal] { opacity: 0.07; transform: none; }

.hero__meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px var(--gutter);
  padding-bottom: 14px;
  border-bottom: var(--rule-ink);
  margin-bottom: clamp(28px, 5vh, 56px);
}
.hero__meta .eyebrow { max-width: none; }
.hero__title {
  position: relative;
  z-index: 1;
  max-width: 14ch;
  font-size: var(--step-6);
}
.hero__lower {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}
.hero__aside {
  grid-column: 1 / 5;
  padding-top: clamp(24px, 4vh, 48px);
  display: flex;
  flex-direction: column;
  gap: var(--space-cluster);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__mini { max-width: 280px; margin-top: clamp(16px, 3vh, 40px); }
.hero__media {
  grid-column: 5 / 13;
  margin-top: clamp(-64px, -5vh, -24px);      /* la foto monta bajo el titular */
  margin-right: max(calc(50% - 50vw), -80vw); /* a sangre hasta el borde derecho */
}
@media (max-width: 860px) {
  .hero__title { max-width: none; }
  .hero__lower { display: block; }
  .hero__media { margin-top: 20px; margin-right: calc(var(--margin-page) * -1); }
  .hero__aside { padding-top: 20px; }
  .hero__mini { display: none; } /* en móvil manda una sola foto */
  .hero__marca { top: clamp(120px, 22vh, 200px); width: 92vw; right: -14vw; }
}
@media (max-width: 520px) {
  .hero__title { font-size: var(--step-5); }
}

/* .arco-frame/.arco y .hilo → componentes compartidos, ver base.css
   §"Arco de remate" y §"Hilo — divisor entre secciones". */

/* --------------------------------------------------------------------------
   5. CALM-BAR · cenefa de trazo: pares de líneas paralelas, muy sutil
   -------------------------------------------------------------------------- */
.calm-bar--trazo { position: relative; overflow: hidden; }
.calm-bar--trazo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    112deg,
    transparent 0 34px,
    rgba(255, 255, 255, 0.09) 34px 36px,
    transparent 36px 43px,
    rgba(255, 255, 255, 0.09) 43px 45px,
    transparent 45px 86px
  );
  pointer-events: none;
}
.calm-bar--trazo .calm-bar__grid { position: relative; }

/* --------------------------------------------------------------------------
   6. Bienvenida
   -------------------------------------------------------------------------- */
.bienvenida__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-cluster);
}
.bienvenida__title { grid-column: 1 / 6; }
.bienvenida__text {
  grid-column: 6 / 12;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
@media (max-width: 860px) {
  .bienvenida__title, .bienvenida__text { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   7. CAPÍTULOS · cabecera a todo lo ancho + collage de fotos
   (composición distinta al sticky de index.html)
   -------------------------------------------------------------------------- */
.cap { padding-block: var(--space-section); }
.cap__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-cluster);
  align-items: end;
  margin-bottom: var(--space-block);
}
.cap__folio-wrap { grid-column: 1 / 3; }
.cap__folio {
  display: block;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--step-5);
  font-weight: 400;
  line-height: 1;
  color: var(--indigo);
}
.cap--ink .cap__folio { color: var(--indigo-bright); }
.cap__swash {
  display: block;
  width: clamp(78px, 7vw, 120px);
  height: auto;
  margin-top: 8px;
  color: var(--indigo);
}
.cap--ink .cap__swash { color: var(--sol); }
.cap__title-wrap { grid-column: 3 / 9; }
.cap__word { font-size: var(--step-6); margin-top: 6px; }
.cap__desc {
  margin-top: 12px;
  font-size: var(--step-1);
  line-height: 1.45;
  max-width: 34ch;
  text-wrap: pretty;
}
.cap__side {
  grid-column: 9 / 13;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 6px;
}
.cap__tag {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--gray-text);
}
.cap--ink .cap__tag { color: var(--white-60); }

.cap__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}
.cap__fig--a { grid-column: 1 / 8; }
.cap__fig--a figcaption { max-width: 60%; }
.cap__fig--b {
  grid-column: 8 / 13;
  margin-top: clamp(36px, 7vh, 88px);   /* colgada más abajo: ritmo de anuario */
}
.cap__fig--c {
  grid-column: 3 / 8;
  margin-top: clamp(-48px, -4vh, -20px); /* solape controlado sobre la col. A */
  position: relative;
  z-index: 1;
}
.cap__quote {
  grid-column: 8 / 13;
  margin: clamp(28px, 5vh, 56px) 0 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-2);
  line-height: 1.3;
  max-width: 22ch;
}
@media (max-width: 860px) {
  .cap__head { display: block; }
  .cap__folio-wrap { margin-bottom: 10px; }
  .cap__side { margin-top: 18px; padding-bottom: 0; }
  .cap__body { display: block; }
  .cap__fig--a { width: 100%; }
  .cap__fig--b { width: 82%; margin-left: auto; margin-top: 18px; }
  .cap__fig--c { width: 90%; margin-top: 24px; }
  .cap__quote { margin-top: 28px; }
}

/* --------------------------------------------------------------------------
   8. Método + calendario
   -------------------------------------------------------------------------- */
.method__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.method__a { grid-column: 1 / 7; }
.method__b { grid-column: 8 / 13; margin-top: clamp(56px, 10vh, 128px); }
.method__b-text { margin-top: 14px; }
.method__b-link { margin-top: 18px; }
.method-list { margin-top: var(--space-cluster); }
.method-list li {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 14px 0;
  border-top: var(--rule);
  max-width: none;
}
.method-list li:last-child { border-bottom: var(--rule); }
.method-list .num {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-mono);
  color: var(--indigo);
  flex: none;
}
@media (max-width: 860px) {
  .method__a, .method__b { grid-column: 1 / -1; }
  .method__b { margin-top: var(--space-block); }
}

/* --------------------------------------------------------------------------
   9. BENTO · cifras/servicios, con la celda de MARCA (logo amarillo s/ tinta)
   -------------------------------------------------------------------------- */
.section-head__title { margin-top: 6px; }
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  grid-auto-rows: minmax(150px, auto);
  grid-auto-flow: dense;
}
.bento__cell {
  background: var(--white);
  border: var(--rule);
  border-radius: var(--radius-s);
  padding: clamp(18px, 2.5vw, 30px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}
.bento__cell--photo { padding: 0; overflow: hidden; border: 0; position: relative; }
.bento__cell--photo .figure-ed, .bento__cell--photo .figure-ed__frame { height: 100%; }
.bento__cell--photo .figure-ed__frame { border-radius: 0; }
.bento__cell--photo figcaption {
  position: absolute;
  left: 0; bottom: 0;
  margin: 0;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--white);
}
.bento__cell--ink { background: var(--ink); border: 0; color: var(--white); }
.bento__cell--ink p { color: var(--white-60); }
.bento__cell--sol { background: var(--sol); border: 0; color: var(--ink); }
.bento__cell--marca {
  background: var(--ink);
  border: 0;
  color: var(--white);
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
}
.bento__cell--marca img { width: min(62%, 190px); height: auto; }
.bento__cell--marca .bento__label { color: var(--white-60); }
.bento__num {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--step-5);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bento__cell--ink .bento__num { color: var(--sol); }
.bento__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.bento__cell h3 { font-size: var(--step-2); }
.b-todo__link { margin-top: 8px; }

.b-hall    { grid-column: span 7; grid-row: span 2; }
.b-recep   { grid-column: span 5; }
.b-pension { grid-column: span 5; }
.b-marca   { grid-column: span 4; grid-row: span 2; }
.b-deporte { grid-column: span 4; grid-row: span 2; }
.b-entorno { grid-column: span 4; grid-row: span 2; }
.b-habs    { grid-column: span 5; }
.b-todo    { grid-column: span 7; }
@media (max-width: 1020px) {
  .b-hall { grid-column: span 12; }
  .b-recep, .b-pension { grid-column: span 6; }
  .b-marca, .b-deporte, .b-entorno { grid-column: span 6; }
  .b-habs, .b-todo { grid-column: span 6; }
}
@media (max-width: 640px) {
  .bento > * { grid-column: span 12 !important; }
  .b-marca { min-height: 190px; }
}

/* --------------------------------------------------------------------------
   10. FAMILIAS · bloque tinta con la marca de agua del trazo (blanca, 5%)
   -------------------------------------------------------------------------- */
.familias { position: relative; overflow: hidden; }
.familias__marca {
  display: block;
  position: absolute;
  right: -140px;
  bottom: -50px;
  width: min(46vw, 560px);
  height: auto;
  opacity: 0.05;
  pointer-events: none;
}
.familias__inner { position: relative; }
.familias__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-block);
  align-items: start;
}
.familias__main { grid-column: 1 / 7; }
.familias__lead { margin-top: 18px; }
.familias__cta { margin-top: var(--space-block); }
.familias__media {
  grid-column: 8 / 13;
  display: flex;
  flex-direction: column;
  gap: var(--space-cluster);
  margin-top: clamp(-140px, -12vh, -40px); /* la columna de foto monta sobre el head */
}
.guarantees {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  margin-top: var(--space-block);
}
.guarantee {
  border-top: var(--rule-inverse);
  padding-top: 14px;
}
.guarantee .num {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-mono);
  color: var(--sol);
}
.guarantee h3 {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 700;
  margin-top: 6px;
}
.guarantee p { font-size: var(--step--1); color: var(--white-60); margin-top: 4px; }
@media (max-width: 860px) {
  .familias__main, .familias__media { grid-column: 1 / -1; }
  .familias__media { margin-top: 0; }
  .guarantees { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   11. Testimonios · fila con scroll nativo + scroll-snap (sin carrusel)
   -------------------------------------------------------------------------- */
.testi-row {
  display: flex;
  gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 14px;
  margin-right: calc(var(--margin-page) * -1);
  padding-right: var(--margin-page);
  scrollbar-color: var(--indigo) var(--mist);
}
.testi-row > * {
  flex: 0 0 min(360px, 78vw);
  scroll-snap-align: start;
}

/* --------------------------------------------------------------------------
   12. Actualidad · 3 tarjetas editoriales con ritmo roto
   -------------------------------------------------------------------------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-block);
}
.news-grid > .card-ed:nth-child(2) { margin-top: clamp(28px, 6vh, 64px); }
.news-grid__more { margin-top: var(--space-block); }
@media (max-width: 860px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-grid > .card-ed:nth-child(2) { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   13. Ven a conocer la RUT · formulario
   -------------------------------------------------------------------------- */
.visita__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-block);
}
.visita__text { grid-column: 1 / 6; }
.visita__p { margin-top: 18px; }
.visita__form { grid-column: 7 / 13; }
.visita__form form {
  background: var(--white);
  border: var(--rule);
  border-radius: var(--radius-s);
  padding: clamp(22px, 3vw, 40px);
}
.visita__form-title { margin-bottom: 20px; }
.visita__form-send { margin-top: 22px; }
@media (max-width: 860px) {
  .visita__text, .visita__form { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   14. CIERRE · el logotipo se firma (trazo blanco a gran escala s/ duotono)
   -------------------------------------------------------------------------- */
.cierre {
  position: relative;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}
.cierre__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}
.cierre__inner {
  position: relative;
  padding-block: clamp(72px, 12vh, 150px) clamp(56px, 9vh, 110px);
}
.cierre__logo {
  display: block;
  width: min(74vw, 520px);
  height: auto;
  user-select: none;
}
/* la firma se muestra a opacidad plena, sin fade */
html.js .cierre__logo[data-reveal] { opacity: 1; transform: none; }
.cierre__claim {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  margin-top: 22px;
  max-width: 30ch;
}
.cierre__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--space-block); }
.cierre__data {
  display: flex;
  flex-wrap: wrap;
  gap: 10px var(--space-block);
  margin-top: var(--space-block);
  padding-top: 20px;
  border-top: var(--rule-inverse);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cierre__data a { color: var(--white); text-decoration: none; }
.cierre__data a:hover { color: var(--sol); }

/* .site-footer__trazo / .site-footer__logo → componentes compartidos,
   ver base.css §"Marca — logotipo oficial". */
.site-footer__social { margin-top: 16px; }

/* Social (cierre y footer) */
.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); }

/* --------------------------------------------------------------------------
   16. prefers-reduced-motion · el hilo aparece COMPLETO, sin dibujarse
   (base.css ya anula duraciones; esto fija el estado final explícitamente)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.js .hilo path {
    stroke-dashoffset: 0;
    transition: none;
  }
}