/* ============================================================
   MIVI — Páginas de texto largo (artículo / guía)
   Usa los tokens de main.css. Sin JS y sin dependencias nuevas.
   ============================================================ */

.art {
  padding: clamp(2rem, 6vh, 4rem) clamp(1.2rem, 6vw, 6rem) clamp(3rem, 8vh, 5rem);
  background: var(--paper);
}
.art--white { background: var(--white); }
.art__inner { max-width: 720px; margin: 0 auto; }   /* medida de lectura cómoda */
.art__inner--wide { max-width: 940px; }

/* ---------- Jerarquía ---------- */
.art h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; letter-spacing: 0.02em;
  margin: var(--s2) 0 var(--s0);
}
.art h2:first-child { margin-top: 0; }
.art h2 em { color: var(--blood); font-style: normal; font-weight: 600; }
.art h3 {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.35;
  margin: var(--s1) 0 0.6rem;
}
.art p, .art li {
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.35vw, 1.12rem); line-height: 1.72;
}
.art p + p { margin-top: 1.05rem; }
.art strong { color: var(--black); font-weight: 600; }
.art a:not(.btn) {
  color: var(--black); font-weight: 500;
  border-bottom: 1px solid var(--blood);
  transition: color .25s var(--ease), background .25s var(--ease);
}
.art a:not(.btn):hover { color: var(--blood); }

.art ul, .art ol { margin: 1.05rem 0 0 1.15rem; }
.art li + li { margin-top: 0.5rem; }
.art ul { list-style: none; margin-left: 0; }
.art ul li { position: relative; padding-left: 1.5rem; }
.art ul li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 0.5rem; height: 1px; background: var(--blood);
}

/* ---------- Figura ---------- */
.art__fig { margin: var(--s2) 0; }
.art__fig img { width: 100%; height: auto; border: 1px solid var(--line); }
.art__fig figcaption {
  margin-top: 0.7rem; font-size: 0.85rem; line-height: 1.5;
  color: var(--ink-soft); border-left: 2px solid var(--blood); padding-left: 0.8rem;
}

/* ---------- Recuadro de datos ---------- */
.art__box {
  margin: var(--s2) 0; padding: clamp(1.3rem, 3vw, 1.9rem);
  background: var(--white); border: 1px solid var(--line);
}
.art--white .art__box { background: var(--paper); }
.art__box h3 { margin-top: 0; }
.art__box > :last-child { margin-bottom: 0; }

/* ---------- Ficha de datos (dt/dd) ---------- */
.art__datos { margin: var(--s1) 0 0; display: grid; gap: 0.9rem; }
.art__datos > div { display: grid; grid-template-columns: 10.5rem 1fr; gap: 0.4rem 1.2rem; }
.art__datos dt {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--black); padding-top: 0.28em;
}
.art__datos dd { color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }
@media (max-width: 560px) { .art__datos > div { grid-template-columns: 1fr; } }

/* ---------- Turnos / horarios ---------- */
.art__turnos { list-style: none; margin: var(--s1) 0 0; display: grid; gap: 0.75rem; }
.art__turnos li { padding: 0; }
.art__turnos li::before { display: none; }
.art__turnos li {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 0.85rem 1.1rem; background: var(--white); border: 1px solid var(--line);
}
.art--white .art__turnos li { background: var(--paper); }
.art__turnos b {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600;
  color: var(--black); letter-spacing: 0.02em;
}
.art__turnos span { font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- Cita destacada ---------- */
.art__cita {
  margin: var(--s2) 0; padding-left: clamp(1rem, 3vw, 1.6rem);
  border-left: 2px solid var(--blood);
}
.art__cita p {
  font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.45; color: var(--black); letter-spacing: 0.01em;
}
.art__cita cite {
  display: block; margin-top: 0.9rem; font-style: normal;
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft);
}

/* ---------- Índice de contenidos ---------- */
.art__indice { margin: 0 0 var(--s2); padding: 1.2rem 1.4rem; border: 1px solid var(--line); }
.art__indice h2 {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--black); margin: 0 0 0.9rem;
}
.art__indice ol { margin: 0 0 0 1.1rem; }
.art__indice li { font-size: 0.98rem; }
.art__indice li + li { margin-top: 0.35rem; }

/* ---------- Cierre de sección hacia la reserva ---------- */
.art__cierre { margin-top: var(--s2); text-align: center; }
.art__cierre .btn { margin-top: var(--s1); }

/* ============================================================
   Galería orgánica — composición de fotos sin bordes rectos
   Todo en CSS: las formas se deforman lentamente y las fotos
   se van cruzando. Sin JS y sin librerías.
   ============================================================ */

.gal {
  padding: clamp(1.5rem, 4vh, 3rem) clamp(1.2rem, 6vw, 6rem) clamp(2.5rem, 6vh, 4rem);
  background: var(--paper);
  overflow: hidden;
}
.gal__inner {
  position: relative;
  max-width: 1000px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  align-items: center;
  gap: clamp(0.8rem, 2.5vw, 2rem);
}

.gal__disc {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--paper-card);
  border-radius: 58% 42% 47% 53% / 45% 52% 48% 55%;
  animation: galForma 26s ease-in-out infinite;
}
.gal__disc--b { animation-delay: -9s;  }
.gal__disc--c { animation-delay: -18s; }
/* El disco central manda: más grande y adelantado */
.gal__disc--a { grid-column: 2; z-index: 2; }
.gal__disc--b { grid-column: 1; grid-row: 1; transform: translateY(-8%); }
.gal__disc--c { grid-column: 3; grid-row: 1; transform: translateY(9%); }

@keyframes galForma {
  0%,100% { border-radius: 58% 42% 47% 53% / 45% 52% 48% 55%; }
  25%     { border-radius: 45% 55% 62% 38% / 56% 44% 56% 44%; }
  50%     { border-radius: 52% 48% 38% 62% / 40% 60% 40% 60%; }
  75%     { border-radius: 62% 38% 55% 45% / 48% 56% 44% 52%; }
}

/* Las fotos, apiladas: cada una entra cuando sale la anterior */
.gal__ph {
  position: absolute; inset: 0;
  opacity: 0;
  animation: galCiclo var(--dur, 30s) linear infinite;
  animation-delay: calc(var(--i) * var(--paso, 6s) + var(--off, 0s));
}
.gal__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes galCiclo {
  0%   { opacity: 0; transform: scale(1.12); }
  3%   { opacity: 1; }
  17%  { opacity: 1; }
  20%  { opacity: 0; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.12); }
}

/* Aro vitruviano girando alrededor del disco central */
.gal__aro {
  position: absolute; z-index: 1;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(46%, 460px); aspect-ratio: 1;
  pointer-events: none;
  animation: galGiro 90s linear infinite;
}
.gal__aro circle { fill: none; stroke: var(--blood); stroke-width: 0.6; stroke-dasharray: 2 6; opacity: 0.55; }
@keyframes galGiro { to { transform: translate(-50%, -50%) rotate(360deg); } }

.gal__pie {
  max-width: 720px; margin: var(--s1) auto 0;
  text-align: center; font-size: 0.88rem; line-height: 1.6; color: var(--ink-soft);
}

/* En pantalla angosta la fila de tres se aplasta y no se aprecia nada.
   Se recompone en dos alturas: una forma grande arriba y dos que se le
   meten por debajo, con la foto de la figura entera siempre en la grande. */
@media (max-width: 860px) {
  .gal__inner { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .gal__disc--a { grid-column: 1 / -1; grid-row: 1; width: 88%; margin: 0 auto; }
  .gal__disc--b { grid-column: 1; grid-row: 2; width: 82%; margin-left: auto;
                  transform: translate(8%, -22%); }
  .gal__disc--c { grid-column: 2; grid-row: 2; display: block; width: 82%;
                  transform: translate(-8%, -6%); }
  .gal__aro { width: 98%; left: 50%; top: 33%; }
}
@media (max-width: 520px) {
  .gal__disc--a { width: 94%; }
  .gal__disc--b, .gal__disc--c { width: 86%; }
  .gal__aro { width: 104%; top: 32%; }
}

/* ============================================================
   Diagrama explicativo (círculo y cuadrado)
   ============================================================ */
.diag { margin: var(--s2) 0; }
.diag svg { width: 100%; height: auto; display: block; }
.diag__marco  { fill: none; stroke: var(--ink-soft); stroke-width: 0.9; opacity: 0.7; }
.diag__circ   { fill: none; stroke: var(--blood);    stroke-width: 1.1; }
.diag__eje    { stroke: var(--ink-soft); stroke-width: 0.55; stroke-dasharray: 2 3; opacity: 0.62; }
.diag__cota   { stroke: var(--black); stroke-width: 0.6; }
.diag__punto  { fill: var(--blood); }
.diag__punto--sq { fill: var(--black); }
.diag__rot    { font-family: var(--sans); font-size: 5.4px; font-weight: 600; fill: var(--black); letter-spacing: 0.06em; }
.diag__rot--soft { fill: var(--ink-soft); font-weight: 500; }
.diag figcaption {
  margin-top: 0.9rem; font-size: 0.85rem; line-height: 1.55; color: var(--ink-soft);
  border-left: 2px solid var(--blood); padding-left: 0.8rem;
}

/* Trazado: las líneas se dibujan cuando el diagrama entra en pantalla */
.diag__traza { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.diag.is-vista .diag__traza { animation: diagTrazar 1.5s var(--ease) forwards; }
.diag.is-vista .diag__traza--2 { animation-delay: 0.5s; }
.diag.is-vista .diag__aparece  { animation: diagAparecer .5s var(--ease) 1.6s forwards; }
.diag__aparece { opacity: 0; }
@keyframes diagTrazar  { to { stroke-dashoffset: 0; } }
@keyframes diagAparecer { to { opacity: 1; } }

/* ============================================================
   Canon de proporciones — reemplaza a la lista suelta
   ============================================================ */
.canon { margin: var(--s1) 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.canon__f {
  display: grid; grid-template-columns: 2.2rem minmax(0, 11rem) minmax(0, 1fr); align-items: baseline;
  gap: 0.4rem 1rem; padding: 0.95rem 0.2rem;
  border-bottom: 1px solid var(--line);
}
.canon__n {
  font-family: var(--serif); font-size: 0.92rem; font-weight: 600;
  color: var(--blood); letter-spacing: 0.04em;
}
.canon__a { color: var(--black); font-weight: 600; font-size: 1rem; line-height: 1.45; }
.canon__b { color: var(--ink-soft); font-size: 0.97rem; line-height: 1.45; }
@media (max-width: 620px) {
  .canon__f { grid-template-columns: 1.9rem 1fr; gap: 0.15rem 0.9rem; }
  .canon__b { grid-column: 2; }
}
/* En pantallas chicas el diagrama se achica y las etiquetas quedarían ilegibles */
@media (max-width: 560px) {
  .diag__rot { font-size: 7.2px; }
  .diag__rot--soft { font-size: 6.4px; }
}

/* ============================================================
   Índice de contenidos — numerado, con línea guía
   ============================================================ */
.art__indice { border: 0; border-left: 2px solid var(--blood); padding: 0.2rem 0 0.2rem 1.4rem; }
.art__indice ol { list-style: none; margin: 0; counter-reset: idx; }
.art__indice li { counter-increment: idx; padding-left: 2rem; position: relative; }
.art__indice li::before {
  content: counter(idx, decimal-leading-zero);
  position: absolute; left: 0; top: 0.1em;
  font-family: var(--serif); font-size: 0.8rem; color: var(--blood); letter-spacing: 0.04em;
}
.art__indice a { border: 0; color: var(--ink-soft); transition: color .25s var(--ease); }
.art__indice a:hover { color: var(--blood); }

/* ============================================================
   Respeto por prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .gal__disc, .gal__aro { animation: none; }
  /* Sin animación queda una foto fija por forma, pero distinta en cada una:
     mostrar la misma tres veces parecería un error, no una decisión. */
  .gal__ph { animation: none; opacity: 0; }
  .gal__disc--a .gal__ph:nth-child(1),
  .gal__disc--b .gal__ph:nth-child(3),
  .gal__disc--c .gal__ph:nth-child(5) { opacity: 1; }
  .diag__traza { stroke-dashoffset: 0; }
  .diag__aparece { opacity: 1; }
  .diag.is-vista .diag__traza, .diag.is-vista .diag__aparece { animation: none; }
}

/* ============================================================
   Portada del blog — tarjetas de nota
   ============================================================ */
.posts { display: grid; gap: clamp(1.6rem, 3.5vw, 2.6rem); grid-template-columns: repeat(2, 1fr); }

.post { position: relative; display: flex; flex-direction: column; gap: 1rem; }
.post--dest { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: clamp(1.4rem, 3vw, 2.6rem); }
/* Dos destacadas seguidas a ancho completo se repiten: la segunda espeja la
   composición y la página toma ritmo en lugar de repetir el mismo bloque. */
.post--dest ~ .post--dest { flex-direction: row-reverse; }
.post--dest .post__media  { flex: 1 1 56%; }
.post--dest .post__cuerpo { flex: 1 1 44%; }

.post__media { overflow: hidden; background: var(--paper-card); border: 1px solid var(--line); }
.post__media img {
  width: 100%; height: auto; display: block;
  transition: transform 0.7s var(--ease), filter 0.7s var(--ease);
  filter: saturate(0.92);
}
.post:hover .post__media img { transform: scale(1.04); filter: saturate(1.06); }

.post__meta {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.7rem;
}
.post__tipo { color: var(--blood); font-weight: 600; }
.post__meta time { letter-spacing: 0.1em; }

.post__titulo {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem); line-height: 1.2; letter-spacing: 0.02em;
  margin-bottom: 0.7rem;
}
.post--dest .post__titulo { font-size: clamp(1.5rem, 3vw, 2.15rem); }
/* .art a:not(.btn) le pone borde a todo enlace del artículo y gana por
   especificidad: hay que subir la de esta regla para que el título quede limpio. */
.art .post__titulo a { color: var(--black); border: 0; transition: color 0.3s var(--ease); }
/* El enlace del título cubre toda la tarjeta: se puede hacer clic en cualquier parte */
.art .post__titulo a::after { content: ""; position: absolute; inset: 0; }
.post:hover .post__titulo a { color: var(--blood); }

.post__bajada { color: var(--ink-soft); font-size: 1rem; line-height: 1.65; }
.post__leer {
  display: inline-block; margin-top: 1rem;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em;
  color: var(--blood); transition: transform 0.3s var(--ease);
}
.post:hover .post__leer { transform: translateX(4px); }

@media (max-width: 780px) {
  /* `.post--dest ~ .post--dest` (0,2,0) le gana a `.post--dest` (0,1,0): si no
     se la nombra acá, en mobile las destacadas siguen en fila y la nota queda
     partida en dos columnas angostas que se pisan entre sí. */
  .posts { grid-template-columns: 1fr; gap: 0; }
  .post,
  .post--dest,
  .post--dest ~ .post--dest { flex-direction: column; align-items: stretch; gap: 0.9rem; }

  /* Con las notas una debajo de otra hay que marcar dónde termina cada una */
  .post { padding-bottom: clamp(1.7rem, 4.5vh, 2.2rem); }
  .post + .post {
    border-top: 1px solid var(--line);
    padding-top: clamp(1.7rem, 4.5vh, 2.2rem);
  }
  .post:last-child { padding-bottom: 0; }

  /* Toda la tarjeta es clicable, pero el enlace tiene que verse */
  .post__leer {
    margin-top: 0.85rem; font-size: 0.85rem;
    display: inline-flex; align-items: center; gap: 0.35rem;
  }
  .post__meta { flex-wrap: nowrap; margin-bottom: 0.5rem; }
  .post--dest .post__titulo { font-size: clamp(1.3rem, 5.5vw, 1.7rem); }
}

/* ---------- Migas de pan ---------- */
/* El .nav del sitio es position:fixed, así que todo lo que va primero en el
   flujo le queda debajo. Ojo: --nav-h vale 64px pero el nav real mide 91 px en
   mobile y 105 en desktop (lo manda el alto del logo, clamp(56px,8vw,70px),
   más su padding). Por eso el espacio se calcula del mismo clamp que el logo
   y no de --nav-h, que se queda corto. */
.migas {
  /* El padding lateral es el mismo del .nav (no el del contenido): así el
     último tramo de la ruta cae exactamente bajo el botón «Agendar visita»
     y la línea se lee como parte de la cabecera, no flotando en el medio. */
  padding: calc(clamp(56px, 8vw, 70px) + 3.4rem) clamp(1.2rem, 4vw, 3rem) 0;
  font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-soft);
  background: var(--paper);
}
/* Y la cabecera que sigue ya no tiene que reservarla de nuevo */
.migas + .page-head { padding-top: clamp(1.2rem, 3vh, 2rem); }
.migas ol {
  list-style: none; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem;
}
.migas li { padding: 0; }
.migas li + li::before { content: "·"; margin-right: 0.5rem; color: var(--line); }
.migas a { color: var(--ink-soft); border-bottom: 1px solid transparent; transition: color .25s var(--ease); }
.migas a:hover { color: var(--blood); }
.migas [aria-current] { color: var(--black); }


/* ============================================================
   Ajustes de mobile: menos aire entre bloques
   ============================================================ */
@media (max-width: 620px) {
  .art  { padding-top: clamp(1.6rem, 4vh, 2.2rem); padding-bottom: clamp(2rem, 5vh, 2.8rem); }
  .gal  { padding-top: 0.4rem; padding-bottom: 1.4rem; }
  .art h2 { margin-top: var(--s1); }
  .art__box, .art__fig, .diag, .art__cita { margin-top: var(--s1); margin-bottom: var(--s1); }
  .migas { font-size: 0.74rem; }
  .migas ol { row-gap: 0.15rem; }
  .art__turnos li { padding: 0.7rem 0.9rem; }
}