/* Hálito · concepto WEBO · japandi / zen
   Solo Jost (300, 400, 500). Mucho aire, composición asimétrica, papel de arroz y musgo.
   Movimiento (3/10, 20/10/2026): casi quieto, lento y suave, como una exhalación. La portada entra en CSS bajo html.mov
   (el ensō de la marca se traza, la foto se posa, el titular se aclara). Momento firma: una guía de respiración junto
   al titular (cuatro tiempos al tomar aire, cuatro al soltarlo) que se para fuera de pantalla. Al bajar, halito.js
   aclara los titulares y traza las líneas de las listas, despacio y una sola vez. */

@font-face { font-family: "Jost"; src: url("/assets/fonts/conceptos/jost-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/assets/fonts/conceptos/jost-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/assets/fonts/conceptos/jost-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --papel: #ECE8E1;
  --piedra: #D6D0C6;
  --carbon: #2A2926;
  --carbon-2: #5E5C57;      /* texto secundario sobre papel (AA) */
  --carbon-3: #55534E;      /* texto secundario sobre piedra (AA) */
  --musgo: #6E7757;
  --musgo-t: #525A40;       /* musgo para letra pequeña (AA) */
  --arcilla: #B8A58C;
  --linea: rgb(42 41 38 / .16);
  --m: clamp(20px, 5.6vw, 92px);
  --g: clamp(16px, 2.1vw, 32px);
  --sec: clamp(96px, 11vw, 168px);
  --lento: 900ms;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-lento: cubic-bezier(.22, 1, .36, 1);
  --respira: cubic-bezier(.37, 0, .63, 1);   /* seno: así entra y sale el aire */
  color-scheme: light;
}

html { background: var(--papel); scrollbar-color: var(--arcilla) var(--papel); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--papel); color: var(--carbon);
  font-family: "Jost", system-ui, sans-serif; font-weight: 400; font-size: 17px; line-height: 1.7;
}
::selection { background: var(--musgo); color: var(--papel); }
:focus-visible { outline: 1.5px solid var(--musgo-t); outline-offset: 4px; border-radius: 2px; }
[id] { scroll-margin-top: 32px; }

.titulo { font-weight: 300; font-size: clamp(48px, 6.6vw, 104px); line-height: 1; letter-spacing: -.025em; }
.entradilla { margin-top: 26px; color: var(--carbon-2); max-width: 38ch; }

/* Botones: cápsula (todo lo que se pulsa es redondo; las superficies, rectas) */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px; border-radius: 999px;
  background: var(--carbon); color: var(--papel); text-decoration: none; white-space: nowrap;
  font-weight: 400; font-size: 15px; letter-spacing: .03em;
  transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease, transform 160ms var(--ease);
}
.boton:active { transform: scale(.97); }
.boton--borde { background: transparent; color: var(--carbon); box-shadow: inset 0 0 0 1px var(--carbon); }
.boton--s { min-height: 42px; padding: 0 22px; font-size: 14px; }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: #45443F; }
  .boton--borde:hover { background: var(--carbon); color: var(--papel); }
}

/* Cabecera */
.cabecera {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: clamp(28px, 3.4vw, 64px);
  min-height: 92px; padding-inline: var(--m);
}
.marca { display: inline-flex; align-items: center; gap: 10px; justify-self: start; text-decoration: none; font-weight: 400; font-size: 22px; letter-spacing: .04em; line-height: 1; }
.marca__enso { width: 26px; height: 26px; }
.marca__enso path { fill: none; stroke: var(--musgo); stroke-width: 2.4; stroke-linecap: round; }
.menu { display: flex; gap: clamp(24px, 2.8vw, 44px); }
.menu a {
  font-size: 15px; letter-spacing: .02em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px;
  text-decoration-color: transparent; transition: text-decoration-color 300ms ease;
}
@media (hover: hover) and (pointer: fine) { .menu a:hover { text-decoration-color: var(--musgo); } }

/* Portada: un hueco horizontal sereno y el texto pequeño abajo a la izquierda */
.portada {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g);
  grid-template-rows: auto 1fr;
  min-height: calc(100svh - 92px); padding: 6px var(--m) clamp(76px, 9svh, 100px);
}
.horizonte {
  grid-column: 4 / -1; grid-row: 1; margin-right: calc(var(--m) * -1);
  position: relative; overflow: hidden; height: clamp(300px, 49svh, 520px);
}
.horizonte > span { position: absolute; display: block; }
.horizonte--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.horizonte__cielo { inset: 0 0 37% 0; background: linear-gradient(180deg, #E6E1D9 0%, #DFD8CD 62%, #D9CCBB 100%); }
.horizonte__sol {
  left: 61%; top: 26%; width: clamp(84px, 9vw, 136px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #C6B398 0 56%, rgb(198 179 152 / .55) 64%, rgb(198 179 152 / 0) 71%);
}
.horizonte__agua {
  inset: 63% 0 0 0; border-top: 1px solid rgb(42 41 38 / .14);
  background: linear-gradient(180deg, #CEC6B9 0%, #D6D0C6 46%, #DDD7CE 100%);
}
.horizonte__reflejo {
  left: calc(61% + clamp(14px, 1.5vw, 22px)); top: 64%; width: clamp(56px, 6vw, 92px); height: 24%;
  background: linear-gradient(180deg, rgb(198 179 152 / .62), rgb(198 179 152 / 0) 88%);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  filter: blur(5px);
}
.horizonte__grano {
  inset: 0; opacity: .5; mix-blend-mode: multiply; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .16 0 0 0 0 .15 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.portada__texto { grid-column: 1 / 7; grid-row: 2; align-self: end; padding-top: clamp(32px, 5svh, 56px); }
.portada__titulo { font-weight: 300; font-size: clamp(36px, 3.7vw, 56px); line-height: 1.1; letter-spacing: -.015em; }
.portada__titulo span { display: block; }
.portada__texto p { margin-top: 16px; color: var(--carbon-2); }
.portada__texto .boton { margin-top: 30px; }
/* Pantallas bajas de portátil: el horizonte encoge para que el botón no quede bajo la etiqueta de concepto */
@media (min-width: 901px) and (max-height: 840px) {
  .horizonte { height: clamp(220px, 38svh, 400px); }
  .portada__texto { padding-top: 24px; }
}

/* Guía de respiración (momento firma). Sin movimiento no se muestra: el titular ya invita a respirar. */
.respira { display: none; }
.mov .respira {
  grid-column: 9 / -1; grid-row: 2; align-self: end; justify-self: center;
  position: relative; display: grid; place-items: center;
  width: clamp(168px, 15vw, 224px); aspect-ratio: 1;
  margin-bottom: clamp(0px, 1.5svh, 20px);
}
.respira > * { grid-area: 1 / 1; }
.respira { pointer-events: none; }
.respira__guia { width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(42 41 38 / .12); }
.respira__halo {
  width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle, rgb(110 119 87 / .2) 0 42%, rgb(110 119 87 / .1) 60%, rgb(110 119 87 / 0) 70.5%);
  transform: scale(.56);
}
.respira__enso {
  width: 146%; height: 146%; overflow: visible;
  fill: none; stroke: var(--musgo); stroke-width: .2; stroke-linecap: round;
  transform: scale(.62) rotate(-8deg);
}
.respira__txt {
  position: relative; display: grid;
  font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: .24em; text-transform: uppercase; color: var(--carbon-2);
}
.respira__txt > span { grid-area: 1 / 1; text-align: center; padding-left: .24em; }
.respira__ex { opacity: 0; }
.mov .respira__halo { animation: h-respira 8s var(--respira) infinite; }
.mov .respira__enso { animation: h-respira-enso 8s var(--respira) infinite; }
.mov .respira__in { animation: h-inhala 8s linear infinite; }
.mov .respira__ex { animation: h-exhala 8s linear infinite; }
.respira.esta-quieta * { animation-play-state: paused; }
@keyframes h-respira { 0%, 100% { transform: scale(.56); } 50% { transform: scale(1); } }
@keyframes h-respira-enso { 0%, 100% { transform: scale(.62) rotate(-8deg); } 50% { transform: scale(.98) rotate(6deg); } }
/* Las dos palabras no se cruzan: una se va y luego llega la otra */
@keyframes h-inhala { 0%, 44% { opacity: 1; } 48%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes h-exhala { 0%, 48% { opacity: 0; } 52%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* Entrada de la portada (solo con html.mov): lenta y suave. El ensō se traza, la foto se posa y el titular se aclara. */
.mov .marca__enso path { stroke-dasharray: 100; animation: h-traza 1800ms var(--ease-lento) 200ms both; }
.mov .horizonte { animation: h-funde 1400ms ease both; }
.mov .horizonte img { animation: h-posa 2600ms var(--ease-lento) both; }
.mov .portada__titulo span { animation: h-aclara 1500ms var(--ease-lento) 450ms both; }
.mov .portada__titulo span:last-child { animation-delay: 750ms; }
.mov .portada__texto p { animation: h-funde 1200ms ease 1100ms both; }
.mov .portada__texto .boton { animation: h-funde 1200ms ease 1250ms both; }
.mov .respira { animation: h-funde 1800ms ease 1500ms both; }
@keyframes h-funde { from { opacity: 0; } to { opacity: 1; } }
@keyframes h-traza { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes h-posa { from { transform: scale(1.05); } }
@keyframes h-aclara { from { opacity: 0; transform: translateY(8px); filter: blur(6px); } }

/* Al bajar (halito.js marca .h-espera y añade .h-visto al llegar, una vez). Todo lento y corto de recorrido. */
.h-espera { --paso: 140ms; transition: opacity 1400ms ease calc(var(--i, 0) * var(--paso)), transform 1600ms var(--ease-lento) calc(var(--i, 0) * var(--paso)); }
.h-espera:not(.h-visto) { opacity: 0; transform: translateY(10px); }
.titulo.h-espera { transition-property: opacity, transform, filter; transition-duration: 1500ms; }
.titulo.h-espera:not(.h-visto) { filter: blur(5px); }
.sala.h-espera, .bodegon.h-espera { transition-duration: 1800ms; }
.sala.h-espera:not(.h-visto), .bodegon.h-espera:not(.h-visto) { transform: none; }
/* Líneas de las listas: la línea se traza primero, luego aparece lo de dentro */
.lista li.h-espera, .notas div.h-espera { transform: none; opacity: 1; transition: none; }
.lista li.h-espera::before, .notas div.h-espera::before { transition: transform 1700ms var(--ease-lento) calc(var(--i, 0) * 160ms); }
.lista li.h-espera:not(.h-visto)::before, .notas div.h-espera:not(.h-visto)::before { transform: scaleX(0); }
.lista li.h-espera > *, .notas div.h-espera > * { transition: opacity 1300ms ease calc(var(--i, 0) * 160ms + 350ms); }
.lista li.h-espera:not(.h-visto) > *, .notas div.h-espera:not(.h-visto) > * { opacity: 0; }
/* El horario aparece día a día */
.dia .h-espera { transition-delay: calc((var(--d, 1) - 1) * var(--paso-dia, 110ms)); }

/* Clases */
.clases {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start;
  padding: var(--sec) var(--m) 0;
}
.sala { grid-column: 1 / 6; position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.sala > span { position: absolute; display: block; }
.sala__pared { inset: 0 0 30% 0; background: linear-gradient(180deg, #E3DDD3, #D9D2C6); }
.sala__ventana {
  left: 48%; top: 13%; width: 34%; height: 42%;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgb(184 165 140 / .6) calc(25% - 1px) 25%),
    repeating-linear-gradient(180deg, transparent 0 calc(20% - 1px), rgb(184 165 140 / .6) calc(20% - 1px) 20%),
    #F3EFE9;
  box-shadow: 0 0 0 7px #CBBBA3;
}
.sala__luz {
  left: 26%; right: 0; bottom: 3%; height: 23%;
  background: rgb(246 243 237 / .38); clip-path: polygon(34% 0, 78% 0, 100% 100%, 8% 100%); filter: blur(6px);
}
.sala__suelo {
  left: 0; right: 0; bottom: 0; height: 30%;
  background:
    repeating-linear-gradient(180deg, transparent 0 15px, rgb(42 41 38 / .05) 15px 16px),
    linear-gradient(180deg, #CDBEA8, #BFAE96);
  border-top: 1px solid rgb(42 41 38 / .12);
}
.sala__luz { z-index: 1; }
.sala__esterillas {
  left: 9%; bottom: 25%; width: 27%; height: 5.2%; border-radius: 999px; background: var(--musgo);
  box-shadow: 0 -28px 0 -1px #A89A86, 0 -54px 0 -2px #CFC6B8;
}

.clases__texto { grid-column: 7 / -1; padding-top: clamp(0px, 7vw, 120px); }
.lista { margin-top: clamp(40px, 4.4vw, 64px); }
.lista li {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; column-gap: 24px;
  padding-block: 24px 26px;
}
.lista li::before, .notas div::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linea);
  transform-origin: left;
}
.notas div::before { background: rgb(42 41 38 / .18); }
.lista h3 { font-weight: 300; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.2; letter-spacing: -.01em; }
.lista__dur { grid-column: 2; grid-row: 1 / span 2; color: var(--carbon-2); font-size: 14px; letter-spacing: .06em; line-height: 1; padding-top: 6px; }
.lista__dur span { font-weight: 300; font-size: clamp(26px, 2.2vw, 32px); letter-spacing: 0; color: var(--musgo-t); font-variant-numeric: tabular-nums; margin-right: 4px; }
.lista__txt { margin-top: 6px; font-size: 16px; color: var(--carbon-2); max-width: 44ch; }

/* Horario: rejilla mínima de la semana */
.horario { padding: var(--sec) var(--m) 0; }
.horario__cab { max-width: 640px; }
.semana {
  --fila: 80px; --cab: 44px;
  margin-top: clamp(48px, 5vw, 80px);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--g);
  grid-template-rows: var(--cab) repeat(5, var(--fila));
  background: repeating-linear-gradient(180deg, var(--linea) 0 1px, transparent 1px var(--fila)) 0 var(--cab) / 100% calc(5 * var(--fila) + 1px) no-repeat;
}
.dia, .dia ul { display: contents; }
.dia h3 {
  grid-column: var(--d); grid-row: 1; align-self: start;
  font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: .24em; text-transform: uppercase; color: var(--carbon-2);
}
.dia li { grid-column: var(--d); grid-row: var(--r); align-self: center; display: flex; flex-direction: column; gap: 3px; line-height: 1.2; }
.dia time { font-weight: 500; font-size: 12.5px; letter-spacing: .08em; color: var(--carbon-2); font-variant-numeric: tabular-nums; }
.dia li span { font-weight: 300; font-size: clamp(16px, 1.3vw, 19px); }

/* Tu primera clase */
.primera {
  margin-top: var(--sec); padding: var(--sec) var(--m);
  background: var(--piedra);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: center;
}
.primera ::selection { background: var(--carbon); color: var(--papel); }
.primera__texto { grid-column: 1 / 7; }
.primera__lead { margin-top: 28px; font-weight: 300; font-size: clamp(20px, 1.6vw, 23px); line-height: 1.55; max-width: 34ch; }
.notas { margin-top: 44px; max-width: 520px; }
.notas div { position: relative; display: grid; grid-template-columns: 132px 1fr; column-gap: 20px; padding-block: 16px; }
.notas dt { font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--carbon-3); padding-top: 6px; line-height: 1.4; }
.notas dd { margin: 0; font-size: 16.5px; }
.llamada { margin-top: clamp(48px, 5vw, 72px); }
.llamada__txt { font-weight: 300; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.3; letter-spacing: -.01em; max-width: 24ch; }
.llamada__horas { margin-top: 14px; font-size: 15px; color: var(--carbon-3); }
.llamada__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.bodegon { grid-column: 8 / -1; position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: linear-gradient(180deg, #E1DBD1 0%, #D2CABD 62%); }
.bodegon > span { position: absolute; display: block; }
.bodegon__mesa { left: 0; right: 0; bottom: 0; height: 36%; background: linear-gradient(180deg, #C6B7A0, #B8A58C); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25); }
.bodegon__manta {
  left: 11%; bottom: 25%; width: 58%; height: 13%; border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, transparent 0 31%, rgb(42 41 38 / .07) 31% 34%, transparent 34% 64%, rgb(42 41 38 / .07) 64% 67%, transparent 67%), #F0ECE5;
  box-shadow: 0 14px 22px -14px rgb(42 41 38 / .45);
}
.bodegon__bloque {
  right: 10%; bottom: 21%; width: 19%; height: 17%; border-radius: 3px;
  background: radial-gradient(circle at 30% 40%, rgb(42 41 38 / .08) 0 1px, transparent 1.5px) 0 0 / 7px 7px, linear-gradient(180deg, #B19C80, #A48E72);
  box-shadow: 0 14px 20px -14px rgb(42 41 38 / .5);
}
.bodegon__sombra { left: 25%; bottom: 36.6%; width: 30%; height: 3%; border-radius: 50%; background: rgb(42 41 38 / .32); filter: blur(5px); }
.bodegon__cuenco {
  left: 24%; bottom: 37.6%; width: 32%; height: 13%;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: radial-gradient(ellipse at 34% 18%, #8C9473 0%, #6E7757 52%, #586145 100%);
}
.bodegon__cuenco::before {
  content: ""; position: absolute; left: 0; right: 0; top: -15%; height: 30%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 65%, #3F4632 0%, #4E5640 70%); box-shadow: inset 0 0 0 2px #7E876A;
}

/* Pie */
.pie {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px clamp(28px, 4vw, 64px);
  padding: 56px var(--m) 104px; font-size: 14px; color: var(--carbon-2);
}
.pie__marca { margin-right: auto; font-size: 20px; letter-spacing: .04em; color: var(--carbon); }

/* Tableta */
@media (max-width: 1080px) {
  .menu { display: none; }
  .cabecera { grid-template-columns: 1fr auto; }
  .portada__texto { grid-column: 1 / 9; }
  .clases__texto { grid-column: 7 / -1; padding-top: 0; }
}

/* Móvil: una columna limpia */
@media (max-width: 760px) {
  .cabecera { grid-template-columns: 1fr auto; min-height: 76px; }
  .portada { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 0; padding-bottom: 56px; }
  .horizonte { grid-column: 1; margin-left: clamp(24px, 12vw, 64px); height: clamp(260px, 44svh, 380px); }
  .horizonte__sol { left: 56%; top: 22%; }
  .horizonte__reflejo { left: calc(56% + 12px); }
  .portada__texto { grid-column: 1; padding-top: 36px; }
  .portada__titulo { font-size: clamp(34px, 9.6vw, 44px); }
  /* En móvil, pequeña y a la altura del botón (centrada con él), sin tocar el texto */
  .mov .respira { grid-column: 1; grid-row: 2; justify-self: end; align-self: end; width: 88px; margin: 0 0 -18px; }
  .respira__txt { font-size: 9.5px; }
  .dia { --paso-dia: 0ms; }

  .clases { grid-template-columns: minmax(0, 1fr); }
  .sala { grid-column: 1; margin-right: clamp(32px, 14vw, 72px); }
  .clases__texto { grid-column: 1; margin-top: 64px; }

  .semana { display: block; background: none; }
  .dia, .dia ul { display: block; }
  .dia { display: grid; grid-template-columns: 104px 1fr; column-gap: 12px; padding-block: 18px; border-top: 1px solid var(--linea); }
  .dia:last-child { border-bottom: 1px solid var(--linea); }
  .dia h3 { grid-column: 1; grid-row: 1; padding-top: 6px; }
  .dia ul { grid-column: 2; grid-row: 1; }
  .dia li { grid-column: auto; grid-row: auto; }
  .dia ul { display: grid; gap: 10px; }
  .dia li { flex-direction: row; align-items: baseline; gap: 12px; }
  .dia time { min-width: 44px; }

  .primera { grid-template-columns: minmax(0, 1fr); }
  .primera__texto, .bodegon { grid-column: 1; }
  .bodegon { margin-top: 64px; margin-left: clamp(32px, 14vw, 72px); }
  .notas div { grid-template-columns: 1fr; row-gap: 4px; }
  .notas dt { padding-top: 0; }
  .pie { flex-direction: column; gap: 6px; }
}
@media (max-width: 379px) { .mov .respira { width: 72px; margin-bottom: -10px; } .respira__txt { font-size: 8.5px; } }
@media (max-width: 349px) { .mov .respira { display: none; } }

/* Firma de WEBO: el gris del pie ya es suave, así que se apaga menos para mantener el contraste AA */
.firma-webo { opacity: .96; }