/* fernandoandia.com — Mediterráneo Vivo */

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --blue: #285B73;
  --blue2: #82A0AB;
  --sand: #DCD2C5;
  --cream: #F3EFE6;
  --clay: #B35E45;
  --olive: #747865;
  --ink: #292F30;
  --white: #FFFFFF;

  --fs-xl: clamp(2.5rem, 1.1rem + 6.4vw, 5rem);
  --fs-big: clamp(1.95rem, 1.1rem + 3.8vw, 3.6rem);
  --fs-h3: clamp(1.35rem, 1.05rem + 1.4vw, 1.9rem);
  --fs-lead: clamp(1.15rem, 1rem + .7vw, 1.4rem);
  --fs-body: clamp(1.0625rem, 1rem + .25vw, 1.125rem);

  --pad: clamp(3.75rem, 9vw, 7rem);

  /* Carta de navegación del menú. Todo lo ajustable vive acá:
     ancho de la banda, opacidad de cada trazo y amplitud del movimiento. */
  --chart-w: 34%;
  --chart-route-op: .6;
  --chart-arc-op: .42;
  --chart-amp: 7px;       /* desplazamiento ambiental de la ruta */
  --chart-amp-arc: 5px;   /* el del arco, siempre menor */

  /* Pesos. El manual v3 pide 500 en titulares, pero entre 400 y 500 Figtree
     cambia menos de 1%: en pantalla no se lee como jerarquia. Subidos a
     pedido de Fer el 3 de agosto de 2026. Se ajusta todo desde aca. */
  --w-display: 600;   /* titulares grandes */
  --w-mid: 700;       /* subtitulos y nombres de seccion */
  --w-strong: 700;    /* microcopy y palabras en negrita dentro del texto */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Figtree", system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
strong, b { font-weight: var(--w-strong); }
a { color: inherit; }
button { font-family: inherit; font-size: inherit; border: none; background: none; cursor: pointer; color: inherit; }

::selection { background: var(--blue); color: var(--cream); }

:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 3px; }

.wrap {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: clamp(1.375rem, 5vw, 2.5rem);
}

/* ---------- vistas y transición ---------- */

/* El display de cada vista se decide SOLO acá. Ninguna regla posterior puede
   volver a declarar display sobre .view-*, o la vista queda visible siempre. */
.view { display: none; position: relative; }
html[data-view="menu"] #menu { display: flex; }
html[data-view="coaching"] #coaching,
html[data-view="curso"]    #curso,
html[data-view="sobre-mi"] #sobre-mi { display: block; }
/* sin JavaScript no hay data-view: se muestra todo apilado y nada queda inalcanzable */
html:not([data-view]) .view { display: block; }

.veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--blue);
  opacity: 0;
  pointer-events: none;
  transition: opacity .34s ease;
}
body.is-moving .veil { opacity: 1; }

/* entrada del contenido de cada vista */
html.js .r {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s ease, transform .65s ease;
}
html.js .r.in { opacity: 1; transform: none; }

/* ---------- animaciones base ---------- */

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes drift { from { transform: translate(0,0); } to { transform: translate(16px,-12px); } }
@keyframes sway { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.07); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes climb {
  0%,8%   { transform: translate(0,0); opacity: 1; }
  26%,34% { transform: translate(10px,-10px); }
  52%,60% { transform: translate(20px,-20px); }
  78%,86% { transform: translate(30px,-30px); }
  92%     { transform: translate(30px,-30px); opacity: 0; }
  96%     { transform: translate(0,0); opacity: 0; }
  100%    { transform: translate(0,0); opacity: 1; }
}
@keyframes breathe {
  0%,100% { transform: scale(.72); opacity: .25; }
  50%     { transform: scale(1); opacity: .7; }
}
@keyframes bars { 0%,100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
@keyframes needle { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(15deg); } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes nasal {
  0%,45%  { opacity: 1; }
  55%,95% { opacity: .18; }
  100%    { opacity: 1; }
}
@keyframes nasalAlt {
  0%,45%  { opacity: .18; }
  55%,95% { opacity: 1; }
  100%    { opacity: .18; }
}
@keyframes sqTurn { 0%,100% { transform: rotate(0); } 50% { transform: rotate(45deg); } }

/* ============ MENÚ ============ */

/* El menu abre en crema, no en azul. Decidido por Fer el 4 de agosto de 2026:
   la base calida entra desde la primera pantalla y el azul queda para el
   nombre, los iconos y las bandas de llamado dentro de las secciones. */
.view-menu {
  min-height: 100svh;
  background: var(--cream);
  color: var(--blue);
  align-items: center;
  overflow: hidden;
}
.menu-inner { width: 100%; padding-block: clamp(3.5rem, 9vh, 6rem); position: relative; z-index: 2; }

.menu-name {
  font-size: var(--fs-xl);
  font-weight: var(--w-display);
  line-height: .95;
  letter-spacing: -.05em;
}
.menu-tag {
  margin-top: 1.1rem;
  max-width: 26em;
  font-size: .95rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 66%, var(--cream));
}
.menu-head { margin-bottom: clamp(2.75rem, 7vw, 4.5rem); }

.menu-nav { display: grid; gap: 0; max-width: 46rem; }

.mitem {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "ic name arrow" "ic sub arrow";
  align-items: center;
  column-gap: clamp(1rem, 3vw, 1.6rem);
  text-align: left;
  padding-block: clamp(1.35rem, 3.5vw, 1.9rem);
  border-top: 1px solid color-mix(in srgb, var(--blue) 26%, transparent);
  color: var(--blue);
  transition: padding-inline .35s ease, background .35s ease;
}
.mitem:last-child { border-bottom: 1px solid color-mix(in srgb, var(--blue) 26%, transparent); }
.mitem:hover, .mitem:focus-visible {
  padding-inline: clamp(.6rem, 2vw, 1.1rem);
  background: color-mix(in srgb, var(--blue) 6%, transparent);
}

.mic { grid-area: ic; width: clamp(38px, 7vw, 50px); height: auto; color: var(--blue); }
.mitem-name {
  grid-area: name;
  font-size: clamp(1.35rem, 1rem + 1.9vw, 2.1rem);
  font-weight: var(--w-mid);
  letter-spacing: -.035em;
  line-height: 1.1;
}
.mitem-sub { grid-area: sub; font-size: .92rem; color: color-mix(in srgb, var(--ink) 62%, var(--cream)); margin-top: .2rem; }
.mitem-arrow {
  grid-area: arrow;
  font-size: 1.4rem;
  color: var(--clay);
  transition: transform .35s ease;
}
.mitem:hover .mitem-arrow { transform: translateX(7px); }

/* Íconos del menú. Sin formas de fondo, son lo único que se mueve en la
   primera pantalla, así que cargan solos la sensación de que la página está
   viva. Subidos de amplitud el 4 de agosto de 2026: en un teléfono el menú
   se leía quieto. El techo sigue siendo movimiento lento y sin rebotes. */

/* cada ícono flota entero, desfasado del de al lado */
.mic { animation: micFloat 7s ease-in-out infinite; will-change: transform; }
.mitem:nth-child(2) .mic { animation-delay: -2.3s; }
.mitem:nth-child(3) .mic { animation-delay: -4.6s; }
@keyframes micFloat { 0%,100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }

/* La escalera se dibuja una sola vez, al entrar, y se queda. En bucle se
   borraba cada 5.4 s y eso se lee como parpadeo, no como movimiento. */
.mi-path {
  stroke-dasharray: 68;
  stroke-dashoffset: 68;
  animation: drawStep 1.6s ease-out .2s forwards;
}
@keyframes drawStep { to { stroke-dashoffset: 0; } }
.mi-dot { transform-box: view-box; animation: climb 5.4s ease-in-out infinite; }

.mi-b1, .mi-b2, .mi-b3 { transform-origin: 24px 24px; transform-box: view-box; animation: breatheMenu 5.2s ease-in-out infinite; }
.mi-b2 { animation-delay: .4s; }
.mi-b3 { animation-delay: .8s; }
@keyframes breatheMenu {
  0%,100% { transform: scale(.58); opacity: .22; }
  50%     { transform: scale(1.02); opacity: .9; }
}

.mi-v1, .mi-v2, .mi-v3, .mi-v4 { transform-origin: center; transform-box: fill-box; animation: barsMenu 2.4s ease-in-out infinite; }
.mi-v2 { animation-delay: .3s; }
.mi-v3 { animation-delay: .55s; }
.mi-v4 { animation-delay: .85s; }
@keyframes barsMenu { 0%,100% { transform: scaleY(.34); } 50% { transform: scaleY(1); } }

/* ---------- carta de navegación ---------- */

.menu-chart {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--chart-w);
  z-index: 1;
  pointer-events: none;
}
.menu-chart .chart { display: none; width: 100%; height: 100%; }
.menu-chart .chart-wide { display: block; }

.ch-route, .ch-arc {
  fill: none;
  stroke: var(--blue2);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ch-route { stroke-width: 1.3; stroke-opacity: var(--chart-route-op); }
.ch-arc { stroke-width: 1.15; stroke-opacity: var(--chart-arc-op); }
.ch-dot-b { fill: var(--blue2); }
.ch-dot-c { fill: var(--clay); }
.ch-star { fill: var(--blue); }

/* Movimiento ambiental. Los giros son de décimas de grado y el centro de
   rotación cae fuera del lienzo, para que el trazo derive en vez de girar. */
.route-ambient, .arc-ambient { transform-box: view-box; }
.route-ambient {
  transform-origin: 70% 115%;
  animation: chartRoute 17s ease-in-out infinite alternate;
}
.arc-ambient {
  transform-origin: 125% 130%;
  animation: chartArc 25s ease-in-out infinite alternate;
}
@keyframes chartRoute {
  from { transform: translate3d(0, 0, 0) rotate(-.14deg); }
  to   { transform: translate3d(calc(var(--chart-amp) * -1), var(--chart-amp), 0) rotate(.2deg); }
}
@keyframes chartArc {
  from { transform: translate3d(0, 0, 0) rotate(.1deg); }
  to   { transform: translate3d(var(--chart-amp-arc), calc(var(--chart-amp-arc) * -1), 0) rotate(-.12deg); }
}

/* Manda la legibilidad: abajo de 1200 el menú ocupa el ancho completo, así que
   la banda lateral sale y queda el fragmento de esquina, que cabe sobre el aire
   que hay encima del nombre en todos los anchos. */
@media (max-width: 1199px) {
  .menu-chart {
    bottom: auto;
    height: 22svh;
    min-height: 140px;
    width: 44%;
    max-width: 260px;
    opacity: .9;
  }
  .menu-chart .chart-wide { display: none; }
  .menu-chart .chart-corner { display: block; }
}

/* ============ común a las secciones ============ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding-block: .9rem;
  backdrop-filter: blur(9px);
  background: color-mix(in srgb, var(--cream) 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.view-curso .topbar { background: color-mix(in srgb, var(--sand) 85%, transparent); }
.view-sobre .topbar { background: color-mix(in srgb, var(--white) 85%, transparent); }

.back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .95rem 0;
  font-size: .76rem;
  font-weight: var(--w-strong);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
  transition: gap .25s ease;
}
.back:hover { gap: .85rem; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .72rem;
  font-weight: var(--w-strong);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.75rem;
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--clay); flex: none; }

.big {
  font-size: var(--fs-big);
  font-weight: var(--w-display);
  line-height: 1.03;
  letter-spacing: -.04em;
  color: var(--blue);
  max-width: 17em;
}
.lead { font-size: var(--fs-lead); line-height: 1.45; max-width: 30em; }
.mid {
  font-size: var(--fs-h3);
  font-weight: var(--w-mid);
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--blue);
  max-width: 18em;
  margin-bottom: 1.2rem;
}
.prose { max-width: 38rem; }
.prose p + p { margin-top: 1.25em; }

.btn {
  display: inline-block;
  background: var(--blue);
  color: var(--cream);
  font-size: 1.02rem;
  font-weight: 700;
  text-decoration: none;
  padding: 1.05rem 2.2rem;
  border-radius: 999px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(40,91,115,.24); }
.btn:active { transform: none; }
@media (max-width: 560px) { .btn { display: block; text-align: center; } }

.next-band { padding-block: clamp(3rem, 7vw, 4.5rem); }
.nextlink {
  display: block;
  width: 100%;
  text-align: left;
  padding: clamp(1.4rem, 3.5vw, 1.9rem) clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid color-mix(in srgb, var(--blue) 28%, transparent);
  border-radius: 3px;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.nextlink:hover {
  background: color-mix(in srgb, var(--blue) 6%, transparent);
  border-color: var(--blue);
  transform: translateY(-3px);
}
.nextlink-t {
  display: block;
  font-size: var(--fs-h3);
  font-weight: var(--w-mid);
  letter-spacing: -.03em;
  color: var(--blue);
}

/* ============ COACHING ============ */

.view-coaching { background: var(--cream); }

.hero-c { position: relative; padding-block: clamp(3.5rem, 9vw, 6rem) var(--pad); overflow: hidden; }
.hero-c .wrap { position: relative; z-index: 2; }
.c-art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.c-circle {
  position: absolute;
  width: clamp(150px, 24vw, 330px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--clay);
  opacity: .16;
  right: -8%;
  top: 8%;
  animation: floaty 13s ease-in-out infinite;
}
.c-ring {
  position: absolute;
  width: clamp(110px, 17vw, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--blue) 26%, transparent);
  right: 14%;
  bottom: 6%;
  animation: floaty 10s ease-in-out infinite reverse;
}
.c-arc {
  position: absolute;
  width: clamp(46px, 6vw, 84px);
  height: clamp(90px, 12vw, 160px);
  background: var(--olive);
  opacity: .28;
  border-radius: 999px 999px 0 0;
  right: 4%;
  bottom: 0;
  transform-origin: bottom;
  animation: sway 14s ease-in-out infinite;
}

.band { padding-bottom: var(--pad); }
.examples {
  margin-top: clamp(1.5rem, 3.5vw, 2.1rem);
  max-width: 34rem;
  font-size: clamp(.95rem, .92rem + .12vw, 1rem);
  line-height: 1.5;
}
.examples li {
  position: relative;
  padding-left: 1.45rem;
  padding-block: .48rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.examples li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.examples li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.12em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue2);
}

/* qué es el coaching: el respiro en blanco antes del método */
.aside-band { background: var(--white); padding-block: var(--pad); }

/* el ritmo semanal, centrado y con el ícono encima */
.rhythm {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding-top: clamp(2.25rem, 5vw, 3rem);
  border-top: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
}
.rhythm .ic-cal {
  width: clamp(40px, 6vw, 52px);
  height: auto;
  color: var(--blue);
  display: block;
  margin-bottom: 1.1rem;
}
.rhythm-lead { color: color-mix(in srgb, var(--ink) 74%, var(--sand)); }
.rhythm-big {
  margin-top: .5rem;
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--blue);
}
.rhythm-note {
  margin-top: 1.1rem;
  max-width: 34em;
  color: color-mix(in srgb, var(--ink) 78%, var(--sand));
}
@media (min-width: 900px) {
  .rhythm { text-align: center; }
  .rhythm .ic-cal { margin-inline: auto; }
  .rhythm-big { max-width: 20em; margin-inline: auto; }
  .rhythm-note { margin-inline: auto; }
}

/* metodología y sesión, lado a lado en escritorio */
.duo {
  padding-block: var(--pad);
  display: grid;
  gap: clamp(2.75rem, 6vw, 3.5rem);
}
@media (min-width: 860px) { .duo { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.duo-ic { width: clamp(42px, 6vw, 54px); height: auto; color: var(--blue); display: block; margin-bottom: 1.1rem; }
.duo-col p + p { margin-top: 1.1em; }
.duo-col p { max-width: 32em; }
.duo-pin { transform-origin: 41px 17px; transform-box: view-box; animation: pulse 3.4s ease-in-out infinite; }
html.js .duo-q { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .8s ease .3s; }
html.js .duo-col.in .duo-q { stroke-dashoffset: 0; }

.method-band { background: var(--sand); padding-block: var(--pad); }
.steps { display: grid; gap: clamp(2rem, 4vw, 2.75rem); }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.step svg { width: clamp(40px, 6vw, 52px); height: auto; color: var(--blue); display: block; margin-bottom: 1rem; }
.step h3 { font-size: var(--fs-h3); font-weight: var(--w-mid); letter-spacing: -.03em; color: var(--blue); margin-bottom: .4rem; }
.step p { max-width: 22em; }

.s-needle { transform-origin: 20px 20px; transform-box: view-box; animation: needle 5.5s ease-in-out infinite; }
.s-flag { transform-origin: 12px 14px; transform-box: view-box; animation: sway 4.5s ease-in-out infinite; }
html.js .s-l1, html.js .s-l2, html.js .s-l3 {
  stroke-dasharray: 12; stroke-dashoffset: 12;
  transition: stroke-dashoffset .5s ease;
}
html.js .step.in .s-l1 { stroke-dashoffset: 0; transition-delay: .3s; }
html.js .step.in .s-l2 { stroke-dashoffset: 0; transition-delay: .5s; }
html.js .step.in .s-l3 { stroke-dashoffset: 0; transition-delay: .7s; }

.spec {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  font-size: var(--fs-lead);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--blue);
  line-height: 1.35;
}
.ic-cal { width: clamp(36px, 5vw, 44px); height: auto; flex: none; }
.cal-wk { transform-origin: 24px 35px; transform-box: view-box; animation: pulse 2.8s ease-in-out infinite; }

.cta-band {
  position: relative;
  background: var(--blue);
  color: var(--cream);
  padding-block: var(--pad);
  overflow: hidden;
}
.cta-band .wrap { position: relative; z-index: 2; }
.cta-band h3 {
  font-size: var(--fs-big);
  font-weight: var(--w-display);
  letter-spacing: -.04em;
  line-height: 1.03;
  margin-bottom: 1.1rem;
}
.cta-band p { max-width: 30em; color: color-mix(in srgb, var(--cream) 88%, var(--blue)); }
.cta-band p:last-child { margin-top: clamp(2rem, 5vw, 2.75rem); }
.cta-band .btn { background: var(--cream); color: var(--blue); }
.cta-band .btn:hover { box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.c2-art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.c2-circle {
  position: absolute;
  width: clamp(240px, 34vw, 440px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blue2);
  opacity: .17;
  right: -12%;
  bottom: -30%;
  animation: floaty 15s ease-in-out infinite;
}

/* ============ CURSO ============ */

.view-curso { background: var(--sand); }

.hero-k { position: relative; padding-block: clamp(3.5rem, 9vw, 6rem) var(--pad); overflow: hidden; }
.hero-k .wrap { position: relative; z-index: 2; }
.k-art {
  position: absolute;
  right: -34%;
  top: 46%;
  transform: translateY(-50%);
  width: clamp(300px, 42vw, 520px);
  aspect-ratio: 1;
  z-index: 1;
  pointer-events: none;
  opacity: .5;
}
@media (min-width: 900px) {
  .k-art { right: -6%; opacity: 1; }
}
.breath {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  border: 1.5px solid var(--olive);
  animation: breathe 7s ease-in-out infinite;
}
.breath.b1 { width: 26%; aspect-ratio: 1; }
.breath.b2 { width: 48%; aspect-ratio: 1; animation-delay: .5s; }
.breath.b3 { width: 72%; aspect-ratio: 1; animation-delay: 1s; }
.breath.b4 { width: 96%; aspect-ratio: 1; animation-delay: 1.5s; border-color: var(--clay); }

.view-curso .lead { margin-top: 1.4rem; color: color-mix(in srgb, var(--ink) 82%, var(--sand)); }

.parts { padding-bottom: var(--pad); display: grid; gap: clamp(2rem, 5vw, 3rem); }
@media (min-width: 800px) { .parts { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.part { display: flex; gap: 1.25rem; align-items: flex-start; }
.part-n { flex: none; width: clamp(44px, 7vw, 58px); color: var(--blue); }
.part-n svg { width: 100%; height: auto; display: block; }
.part h3 { font-size: var(--fs-h3); font-weight: var(--w-mid); letter-spacing: -.03em; color: var(--blue); margin-bottom: .4rem; }
.part p { max-width: 24em; }

.nasal.a { animation: nasal 6s ease-in-out infinite; }
.nasal.b { animation: nasalAlt 6s ease-in-out infinite; }
.wk-goal { transform-origin: 38px 12px; transform-box: view-box; animation: pulse 3.2s ease-in-out infinite; }

.k-cta { background: var(--blue); color: var(--cream); padding-block: var(--pad); }
.btn-k { background: var(--cream); color: var(--blue); }
.k-cta .fine { margin-top: 1.5rem; font-size: .95rem; color: color-mix(in srgb, var(--cream) 76%, var(--blue)); max-width: 30em; }
.view-curso .nextlink { border-color: color-mix(in srgb, var(--blue) 32%, transparent); }

/* ============ SOBRE MÍ ============ */

.view-sobre { background: var(--white); }

.hero-s { position: relative; padding-block: clamp(3.5rem, 9vw, 6rem) var(--pad); overflow: hidden; }
.hero-s .wrap { position: relative; z-index: 2; }
.hero-s .prose { margin-top: clamp(1.6rem, 3.5vw, 2.4rem); }
.s-art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.s-sq { position: absolute; border-radius: 5px; }
.s-sq.q1 {
  width: clamp(150px, 22vw, 260px); aspect-ratio: 1;
  background: var(--sand); opacity: .3;
  right: -5%; top: 10%;
  animation: floaty 13s ease-in-out infinite;
}
@media (min-width: 900px) { .s-sq.q1 { opacity: .55; } }
.s-sq.q2 {
  width: clamp(46px, 6vw, 78px); aspect-ratio: 1;
  background: var(--olive); opacity: .4;
  right: 22%; top: 46%;
  animation: sqTurn 16s ease-in-out infinite;
}
.s-sq.q3 {
  width: clamp(70px, 9vw, 118px); aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  right: 8%; bottom: 8%;
  animation: floaty 10s ease-in-out infinite reverse;
}
.s-dot {
  position: absolute;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--clay);
  right: 34%; top: 24%;
  animation: drift 8s ease-in-out infinite alternate;
}
@media (max-width: 760px) { .s-sq.q2, .s-dot { display: none; } }

.work { padding-bottom: clamp(1rem, 3vw, 2rem); }
.tiles { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 1.75rem); }
@media (min-width: 700px) { .tiles { grid-template-columns: 1fr 1fr; } }
.tile {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  background: var(--cream);
  border: 1px dashed color-mix(in srgb, var(--blue) 35%, transparent);
  border-radius: 3px;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.tile:hover {
  background: var(--sand);
  border-color: var(--blue);
  transform: translateY(-4px);
}
.tile svg { width: clamp(50px, 8vw, 70px); height: auto; color: var(--blue2); margin-bottom: .7rem; }
.tile-tag {
  font-size: .68rem; font-weight: var(--w-strong); letter-spacing: .17em;
  text-transform: uppercase; color: var(--olive);
}
.tile-name { font-size: 1.2rem; font-weight: var(--w-mid); letter-spacing: -.02em; color: var(--blue); }

/* ============ pie ============ */

footer { background: var(--ink); color: var(--cream); padding-block: clamp(2.5rem, 6vw, 3.5rem); }
html[data-view="menu"] footer { display: none; }
.footer-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
@media (min-width: 700px) {
  .footer-inner { flex-direction: row; align-items: center; gap: 1.3rem; }
  .footer-links { margin-left: auto; }
}
.footer-logo { display: block; }
.footer-name {
  font-size: .78rem; font-weight: var(--w-strong); letter-spacing: .18em;
  text-transform: uppercase; color: var(--sand);
}
.footer-links { display: flex; gap: .35rem; align-items: center; }
.footer-links a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--cream);
  transition: background .25s ease, transform .25s ease;
}
.footer-links a:hover {
  background: color-mix(in srgb, var(--cream) 14%, transparent);
  transform: translateY(-2px);
}
.footer-links svg { width: 23px; height: 23px; display: block; }

/* ============ ventana ============ */

dialog {
  border: none; border-radius: 4px;
  background: var(--cream); color: var(--ink);
  padding: clamp(1.75rem, 5vw, 2.75rem);
  width: min(92vw, 34rem);
  margin: auto;
}
dialog::backdrop { background: rgba(41,47,48,.6); }
dialog h3 {
  font-size: var(--fs-h3); font-weight: 500;
  letter-spacing: -.03em; color: var(--blue); margin-bottom: 1rem;
}
.pd-body { max-width: 34em; }
.pd-link {
  margin-top: 1.5rem; font-size: .85rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--olive);
}
.pd-close {
  position: absolute; top: .9rem; right: .9rem;
  width: 44px; height: 44px;
  font-size: 1.7rem; line-height: 1; color: var(--ink);
  border-radius: 50%;
  transition: background .2s ease;
}
.pd-close:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }

/* ============ movimiento reducido ============ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  html.js .r { opacity: 1; transform: none; }
  html.js .s-l1, html.js .s-l2, html.js .s-l3 { stroke-dashoffset: 0; }
  /* la escalera del menú se dibuja con retardo, y el retardo sí sobrevive acá */
  .mi-path { stroke-dashoffset: 0; }
  .veil { display: none; }
}