/* ══════════════════════════════════════════════════════════════════════
   KOUEI SURF SCHOOL — hoja de estilo
   Paleta, tipografía y sistema gráfico según el Manual de Identidad 2026.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Paleta oficial. Los nombres siguen el concepto japonés de la marca. */
  --sumi:    #1E1E3F;  /* azul oscuro — tinta, base profunda   */
  --ai:      #3257A4;  /* azul profundo — confianza            */
  --sora:    #48B0DA;  /* azul claro — cielo y agua            */
  --hinode:  #D90F33;  /* rojo — sol naciente, acento puntual  */
  --shiro:   #F3E6D8;  /* crema — espuma, superficie           */

  /* Derivados: el azul manda, el rojo aparece de a gotas. */
  --sumi-900: #12122a;
  --sumi-700: #262550;
  --ink:      var(--sumi);
  --ink-soft: color-mix(in srgb, var(--sumi) 82%, var(--shiro));
  --cream-dim:color-mix(in srgb, var(--shiro) 72%, var(--sumi));
  --line:     color-mix(in srgb, var(--sumi) 18%, transparent);
  /* El rojo de marca no alcanza 4.5:1 como texto: estas dos variantes sí.
     El #D90F33 puro se reserva para superficies y elementos gráficos. */
  --hinode-lit:  #E36575;  /* texto rojo sobre fondos oscuros  */
  --hinode-deep: #B80D2B;  /* fondo de botón con texto crema   */
  --label-ai:    color-mix(in srgb, var(--sora) 25%, var(--shiro));
  --line-light: color-mix(in srgb, var(--shiro) 22%, transparent);

  /* Tipografía */
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --body:    "Outfit", "Segoe UI", system-ui, sans-serif;
  --kana:    "Zen Kaku Gothic New", "Yu Gothic", "Hiragino Sans", sans-serif;

  /* Escala fluida */
  --t-hero:  clamp(3rem, 11vw, 9rem);
  --t-h2:    clamp(2.1rem, 5.6vw, 4.6rem);
  --t-h3:    clamp(1.25rem, 2vw, 1.65rem);
  --t-lead:  clamp(1.05rem, 1.35vw, 1.3rem);
  --t-body:  clamp(1rem, 1.05vw, 1.075rem);
  --t-small: 0.82rem;

  /* Ritmo */
  --shell:   1280px;
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --pad-y:   clamp(4.5rem, 11vh, 9rem);

  --ease: cubic-bezier(.22, .68, .28, 1);
}

/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--shiro);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  font-weight: 350;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: var(--hinode); color: var(--shiro); }

:focus-visible {
  outline: 3px solid var(--hinode);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; top: -100px; left: var(--gutter); z-index: 999;
  padding: .8rem 1.4rem;
  background: var(--hinode); color: var(--shiro);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ── Contenedor ─────────────────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ══════════════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════════════ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .45s var(--ease), border-color .45s var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.is-stuck {
  background: color-mix(in srgb, var(--sumi) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line-light);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5.25rem;
  padding-block: .85rem;
}

/* Relevo del logotipo: sobre el hero la barra va vacía y lo recibe cuando el
   logotipo grande pasa por detrás. --logo-t es el progreso y lo mueve main.js.
   Sin JS se queda en 1 y el logotipo de la barra se ve siempre. */
:root { --logo-t: 1; }
.js    { --logo-t: 0; }

.header__logo { display: block; opacity: var(--logo-t); }
/* Oculto de verdad mientras no toca: si solo bajara la opacidad seguiría
   recibiendo el foco del teclado sobre el hero. */
.js .header__logo { visibility: hidden; pointer-events: none; }
.js .site-header.is-logo-in .header__logo { visibility: visible; pointer-events: auto; }

.header__logo img {
  width: clamp(112px, 12vw, 152px);
  height: auto;
  transition: transform .4s var(--ease);
}
.header__logo:hover img { transform: translateY(-2px); }

@media (prefers-reduced-motion: no-preference) {
  /* El de la barra entra más grande y un poco más abajo: es el rastro del
     logotipo del hero terminando de asentarse en su sitio. */
  .header__logo {
    transform-origin: left center;
    transform: translateY(calc((1 - var(--logo-t)) * 9px))
               scale(calc(1 + (1 - var(--logo-t)) * .22));
  }
  /* Y el del hero se disuelve en el mismo tramo, para que sea un traspaso
     y no dos logotipos apareciendo por su cuenta. */
  .js .hero__title img { opacity: calc(1 - var(--logo-t)); }
}

.nav {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: clamp(1rem, 2.2vw, 2.1rem);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--shiro);
}

.nav a {
  position: relative;
  text-decoration: none;
  padding-block: .35rem;
  opacity: .78;
  transition: opacity .28s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--hinode);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav a:hover,
.nav a.is-current { opacity: 1; }
.nav a:hover::after,
.nav a.is-current::after { transform: scaleX(1); }

.nav__cta {
  padding: .55rem 1.1rem;
  border: 1px solid var(--line-light);
  border-radius: 999px;
  opacity: 1;
}
.nav__cta::after { display: none; }
.nav__cta:hover {
  background: var(--hinode);
  border-color: var(--hinode);
}

/* Botón de menú (solo móvil) */
.nav-toggle {
  display: none;
  align-items: center;
  gap: .6rem;
  background: none;
  border: 0;
  padding: .5rem;
  color: var(--shiro);
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 5px; width: 22px; }
.nav-toggle__bars i {
  display: block; height: 2px; background: currentColor;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* Selector de idioma (ES · EN). El español es la versión canónica del HTML;
   el inglés lo aplica assets/js/i18n.js sobre el DOM. */
.lang {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .7rem;
  border: 1px solid var(--line-light);
  border-radius: 999px;
  color: var(--shiro);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
}
.lang__btn {
  background: none;
  border: 0;
  padding: .15rem .1rem;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  opacity: .55;
  cursor: pointer;
  transition: opacity .28s var(--ease), color .28s var(--ease);
}
.lang__btn:hover { opacity: .85; }
.lang__btn.is-active { opacity: 1; color: var(--hinode-lit); }
.lang__sep {
  width: 1px;
  height: .8em;
  background: var(--line-light);
}

/* ══════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  overflow: hidden;
  background: var(--sumi-900);
  padding-block: 8rem 4rem;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

.hero__veil {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--sumi-900) 82%, transparent) 0%,
      color-mix(in srgb, var(--sumi-900) 34%, transparent) 34%,
      color-mix(in srgb, var(--sumi) 62%, transparent) 68%,
      var(--sumi-900) 100%);
}

.hero__body { position: relative; text-align: center; color: var(--shiro); }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 clamp(1.5rem, 4vh, 2.75rem);
  padding: .45rem 1.15rem .45rem .8rem;
  border: 1px solid var(--line-light);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero__eyebrow [lang="ja"] {
  font-family: var(--kana);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--hinode);
  letter-spacing: 0;
}

.hero__title {
  position: relative;
  width: min(76vw, 720px);
  margin-inline: auto;
}

.hero__title img {
  width: 100%;
  filter: drop-shadow(0 12px 40px color-mix(in srgb, var(--sumi-900) 55%, transparent));
}

/* Eslogan de marca: siempre en español. */
.hero__tagline {
  margin: clamp(1.4rem, 3.5vh, 2.4rem) 0 0;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.6vw, 2rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
  margin-top: clamp(2rem, 5vh, 3.25rem);
}

/* Datos duros bajo el hero */
.hero__meta {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  width: min(100% - (2 * var(--gutter)), var(--shell));
  margin: clamp(3rem, 8vh, 5.5rem) auto 0;
  padding: 0;
  border-top: 1px solid var(--line-light);
  color: var(--shiro);
}
.hero__meta > div { padding: 1.25rem .5rem 0; }
.hero__meta > div + div {
  border-left: 1px solid var(--line-light);
  padding-left: clamp(1rem, 3vw, 2rem);
}
.hero__meta dt {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sora) 85%, var(--shiro));
}
.hero__meta dd {
  margin: .3rem 0 0;
  font-family: var(--display);
  font-size: clamp(.95rem, 1.8vw, 1.35rem);
  letter-spacing: .02em;
  text-transform: uppercase;
}


/* ══════════════════════════════════════════════════════════════════════
   BOTONES
   ══════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--solid { background: var(--hinode-deep); color: var(--shiro); }
.btn--solid:hover { background: color-mix(in srgb, var(--hinode-deep) 88%, black); }

.btn--ghost { border-color: var(--line-light); color: var(--shiro); }
.btn--ghost:hover { border-color: var(--shiro); background: color-mix(in srgb, var(--shiro) 12%, transparent); }

.link {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--hinode);
  padding-bottom: 1px;
  white-space: nowrap;
}
.link:hover { color: var(--hinode); }

/* ══════════════════════════════════════════════════════════════════════
   SECCIONES — tipos comunes
   ══════════════════════════════════════════════════════════════════════ */
.section { position: relative; padding-block: var(--pad-y); }

.section--surface { background: var(--shiro); color: var(--ink); }
.section--deep    { background: var(--sumi);  color: var(--shiro); }
.section--founder { background: var(--ai);    color: var(--shiro); }
.section--shop    { background: var(--sumi-700); color: var(--shiro); }
.section--contact { background: var(--sumi-900); color: var(--shiro); }

/* Eyebrow con el asterisco de la marca */
.kicker {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ai);
}
.kicker img { width: 13px; height: auto; }
.kicker--light { color: var(--sora); }
.section--founder .kicker--light { color: var(--label-ai); }

.h2 {
  font-family: var(--display);
  font-size: var(--t-h2);
  line-height: .92;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--sumi);
}
.h2--light { color: var(--shiro); }
.h2 em { font-style: normal; color: var(--hinode); }
.h2--light em { color: var(--hinode-lit); }

.lead {
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.55;
}
.lead em { font-style: normal; font-weight: 500; }

.section__intro {
  max-width: 46ch;
  margin-top: 1.6rem;
  font-size: var(--t-lead);
  font-weight: 300;
  color: var(--cream-dim);
}

.section__note {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-light);
  font-size: .95rem;
  color: var(--cream-dim);
}

/* ══════════════════════════════════════════════════════════════════════
   CONCEPTO
   ══════════════════════════════════════════════════════════════════════ */
.concept {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.concept__glyph {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
}
.concept__glyph::before {
  content: "";
  position: absolute;
  top: 14%; right: 14%;
  width: 18%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--hinode);
}
.concept__glyph [lang="ja"] {
  font-family: var(--kana);
  font-weight: 500;
  font-size: min(24vw, 13.5rem);
  line-height: 1;
  color: var(--sumi);
}

.concept__text .h2 { margin-bottom: 1.6rem; }
.concept__text .lead { margin-bottom: 1.4rem; }
.concept__text > p:not(.lead) { color: var(--ink-soft); max-width: 58ch; }

/* El nombre en kanji: 潉英 — una entrada de diccionario, no un adorno. */
.concept__name {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.25rem);
  margin: 0 0 1.5rem;
  max-width: 34rem;
}
.concept__name > div {
  padding-left: clamp(.85rem, 2vw, 1.25rem);
  border-left: 2px solid var(--sora);
}
.concept__name dt {
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.concept__name dt [lang="ja"] {
  font-family: var(--kana);
  font-weight: 500;
  font-size: clamp(2.3rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--ai);
}
.concept__name dt b {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.concept__name dd {
  margin: .45rem 0 0;
  font-size: .95rem;
  color: var(--ink-soft);
}

.concept__marks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.concept__marks li { padding-top: 1.15rem; }
.concept__marks li + li {
  border-left: 1px solid var(--line);
  padding-left: clamp(.9rem, 2vw, 1.5rem);
}
.concept__marks [lang="ja"] {
  display: block;
  font-family: var(--kana);
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--ai);
}
.concept__marks b {
  display: block;
  margin-top: .35rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.concept__marks i {
  display: block;
  font-style: normal;
  font-size: .85rem;
  color: var(--ink-soft);
}

/* ══════════════════════════════════════════════════════════════════════
   CLASES
   ══════════════════════════════════════════════════════════════════════ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1px;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
  background: var(--line-light);
  border: 1px solid var(--line-light);
}

.card {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--sumi);
  transition: background .4s var(--ease);
}
.card:hover { background: var(--sumi-700); }

.card__tag {
  margin: 0;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--hinode-lit);
}

.card__title {
  font-family: var(--display);
  font-size: var(--t-h3);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.card__desc {
  margin: 0;
  font-size: .95rem;
  font-weight: 300;
  color: var(--cream-dim);
}

.card__specs {
  margin: auto 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-light);
  font-size: .82rem;
}
.card__specs > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .3rem 0;
}
.card__specs dt {
  color: color-mix(in srgb, var(--sora) 80%, var(--shiro));
  letter-spacing: .04em;
}
.card__specs dd { margin: 0; font-weight: 500; text-align: right; }

/* ══════════════════════════════════════════════════════════════════════
   GALERÍA — franjas de foto a sangre, sin texto encima
   ══════════════════════════════════════════════════════════════════════ */
.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--sumi-900);
}
.strip__item {
  display: block;
  overflow: hidden;
  background: var(--sumi-900);
}
.strip__item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
@media (hover: hover) {
  .strip__item:hover img { transform: scale(1.05); }
}

/* Franja de transición: la aérea no es un bloque de foto, es el paso del crema
   de «La escuela» al azul de «Clases». La imagen se difumina en los dos bordes
   sobre un degradado que cruza por el azul claro de la marca, para que la mezcla
   no se vaya al verde. Sin soporte de mask-image se ve la foto entera: se pierde
   el difuminado, no la sección. */
.band {
  /* Se mete dentro de las dos secciones vecinas. El tope se queda por debajo
     de los 4.5rem que mide --pad-y en su valor mínimo, así el solape nunca
     llega a tocar el texto de ninguna de las dos. */
  --band-bleed: clamp(2rem, 6vh, 3.75rem);
  position: relative;
  z-index: 1;                       /* las secciones van sin z-index: sin esto,
                                       «Clases» pintaría encima de la costura */
  /* margin-inline: 0 es obligatorio: <figure> trae 40 px laterales del navegador
     y dejarían dos franjas de fondo a los costados de la foto. */
  margin-inline: 0;
  margin-block: calc(-1 * var(--band-bleed));
  background: linear-gradient(to bottom,
    var(--shiro) 0%,
    color-mix(in srgb, var(--sora) 42%, var(--shiro)) 32%,
    var(--sumi) 80%,
    var(--sumi) 100%);
}
.band img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 46%, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 46%, #000 62%, transparent 100%);
}

/* ══════════════════════════════════════════════════════════════════════
   FUNDADOR
   ══════════════════════════════════════════════════════════════════════ */
.founder {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.founder__media { margin: 0; position: sticky; top: 7rem; }
.founder__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* El retrato viene cuadrado y centrado: el recorte se lleva los costados. */
  object-position: 50% 42%;
  filter: contrast(1.06) saturate(1.05);
}
.founder__media figcaption {
  margin-top: .9rem;
  padding-left: 1rem;
  border-left: 2px solid var(--hinode);
  font-size: var(--t-small);
  line-height: 1.45;
  color: color-mix(in srgb, var(--shiro) 78%, var(--ai));
}

.founder__text .h2 { margin-bottom: .9rem; }

.founder__role {
  margin-bottom: 1.8rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label-ai);
}

.founder__text .lead { margin-bottom: 1.4rem; }
.founder__text > p:not(.lead):not(.founder__role) {
  max-width: 62ch;
  color: color-mix(in srgb, var(--shiro) 88%, var(--ai));
}

.quote {
  margin: clamp(2rem, 4vw, 2.75rem) 0;
  padding: 1.75rem 0 1.75rem clamp(1.25rem, 3vw, 2.25rem);
  border-left: 3px solid var(--hinode);
}
.quote p {
  margin: 0 0 .85rem;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.1vw, 1.7rem);
  line-height: 1.22;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.quote cite {
  font-style: normal;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label-ai);
}

.founder__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  margin: 0;
}
/* Regla propia por dato: se alinean a la izquierda en cualquier número
   de columnas, sin depender de divisorias verticales. */
.founder__facts > div {
  padding: 1.15rem 0 1rem;
  border-top: 1px solid var(--line-light);
}
.founder__facts dt {
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label-ai);
}
.founder__facts dd {
  margin: .3rem 0 0;
  font-family: var(--display);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* ══════════════════════════════════════════════════════════════════════
   VALORES
   ══════════════════════════════════════════════════════════════════════ */
.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border-block: 1px solid var(--line);
}

.value {
  padding: clamp(1.6rem, 2.5vw, 2.25rem) clamp(1.2rem, 2vw, 1.75rem);
  background: var(--shiro);
  transition: background .4s var(--ease);
}
.value:hover { background: color-mix(in srgb, var(--shiro) 88%, var(--sora)); }

.value h3 {
  margin-bottom: .8rem;
  font-family: var(--display);
  font-size: var(--t-h3);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--sumi);
}
.value p {
  margin: 0;
  font-size: .93rem;
  font-weight: 300;
  color: var(--ink-soft);
}

/* ══════════════════════════════════════════════════════════════════════
   SOUVENIRS
   ══════════════════════════════════════════════════════════════════════ */
.shop {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.shop__text .h2 { margin-bottom: 1.35rem; }
.shop__text .lead { margin-bottom: 2rem; color: var(--cream-dim); }

.shop__list {
  margin: 0 0 2.25rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-light);
}
.shop__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line-light);
}
.shop__list b {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.shop__list span {
  font-size: .88rem;
  font-weight: 300;
  color: var(--cream-dim);
  text-align: right;
}

.shop__media { margin: 0; }
.shop__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 58% 50%;
}

/* ══════════════════════════════════════════════════════════════════════
   EL SPOT
   ══════════════════════════════════════════════════════════════════════ */
.section--spot {
  position: relative;
  background: var(--sumi-900);
  isolation: isolate;
  overflow: hidden;
}
.spot__media { position: absolute; inset: 0; z-index: -2; }
.spot__media img { width: 100%; height: 100%; object-fit: cover; }
.section--spot::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    var(--sumi-900) 16%,
    color-mix(in srgb, var(--sumi-900) 80%, transparent) 55%,
    color-mix(in srgb, var(--sumi-900) 20%, transparent) 100%);
}

.spot__body { max-width: 58rem; }
.spot__body .lead { margin-top: 1.5rem; color: var(--cream-dim); }

.spot__data {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  border-top: 1px solid var(--line-light);
}
.spot__data > div { padding: 1.15rem .9rem 0 0; }
.spot__data > div + div {
  border-left: 1px solid var(--line-light);
  padding-left: clamp(.75rem, 1.4vw, 1.15rem);
}
.spot__data dt {
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sora);
}
.spot__data dd {
  margin: .35rem 0 0;
  font-family: var(--display);
  font-size: clamp(1rem, 1.9vw, 1.4rem);
  text-transform: uppercase;
  color: var(--shiro);
}


/* ── Tipos de ola ───────────────────────────────────────────────────── */
.waves { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.waves__title {
  margin: 0 0 1.5rem;
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sora);
}

.waves__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wave {
  padding: 1.5rem clamp(1.1rem, 2vw, 1.6rem);
  background: color-mix(in srgb, var(--sumi-900) 55%, transparent);
  border: 1px solid var(--line-light);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* La ola de la escuela lleva el punto rojo de la marca. */
.wave--here {
  background: color-mix(in srgb, var(--ai) 34%, var(--sumi-900));
  border-color: color-mix(in srgb, var(--sora) 45%, transparent);
}

.wave__tag {
  margin: 0;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sora);
}
.wave--here .wave__tag { color: var(--hinode-lit); }

.wave__name {
  margin: .55rem 0 .75rem;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--shiro);
}
.wave__name span {
  display: inline-block;
  margin-left: .5rem;
  padding: .2em .6em;
  border-radius: 999px;
  background: var(--hinode-deep);
  font-family: var(--body);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .18em;
  vertical-align: middle;
}

.wave__desc {
  margin: 0;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--cream-dim);
}

/* ══════════════════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════════════════ */
.faq {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
}

.faq__item { border-bottom: 1px solid var(--line); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  font-family: var(--display);
  font-size: clamp(1rem, 1.9vw, 1.35rem);
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--sumi);
  cursor: pointer;
  list-style: none;
  transition: color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 13px; height: 13px;
  background: var(--hinode);
  border-radius: 50%;
  transition: transform .35s var(--ease), background .3s var(--ease);
}
.faq__item[open] summary { color: var(--ai); }
.faq__item[open] summary::after { transform: scale(1.9); background: var(--ai); }
.faq__item summary:hover { color: var(--ai); }

.faq__item p {
  max-width: 66ch;
  margin: 0;
  padding: 0 0 1.6rem;
  font-weight: 300;
  color: var(--ink-soft);
}

/* ══════════════════════════════════════════════════════════════════════
   CONTACTO
   ══════════════════════════════════════════════════════════════════════ */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contact__lead .lead { margin-top: 1.6rem; color: var(--cream-dim); }

.contact__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-light);
}
.contact__list li {
  display: grid;
  grid-template-columns: minmax(7rem, 30%) 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line-light);
}
.contact__label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sora);
}
.contact__value {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.4vw, 1.75rem);
  letter-spacing: .015em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--shiro);
  transition: color .3s var(--ease);
}
a.contact__value:hover { color: var(--hinode); }

/* El número es el mismo para WhatsApp y para llamada: una sola fila. */
.contact__pair {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .9rem;
}
.contact__alt {
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--cream-dim);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--sora) 50%, transparent);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.contact__alt:hover { color: var(--shiro); border-bottom-color: var(--shiro); }

/* ══════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════ */
.footer {
  background: var(--sumi-900);
  color: var(--cream-dim);
  border-top: 1px solid var(--line-light);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.footer__inner {
  display: grid;
  justify-items: center;
  gap: 1.75rem;
  text-align: center;
}
.footer__mark { width: clamp(72px, 9vw, 96px); }

.footer__tag {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(.9rem, 1.7vw, 1.15rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--shiro);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.6rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.footer__nav a { text-decoration: none; opacity: .72; transition: opacity .3s var(--ease); }
.footer__nav a:hover { opacity: 1; color: var(--shiro); }

.footer__legal { margin: 0; font-size: var(--t-small); opacity: .6; }

/* ══════════════════════════════════════════════════════════════════════
   REVELADO AL SCROLL
   ══════════════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Entrada del hero: todo sube desde abajo, escalonado. */
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.js .hero__eyebrow { animation: rise .9s var(--ease) .2s both; }
.js .hero__title   { animation: rise 1s   var(--ease) .4s both; }
.js .hero__tagline { animation: rise .9s var(--ease) .65s both; }
.js .hero__actions { animation: rise .9s var(--ease) .8s both; }
.js .hero__meta    { animation: rise .9s var(--ease) .95s both; }

/* ══════════════════════════════════════════════════════════════════════
   WHATSAPP FLOTANTE
   Acompaña toda la página: el sitio no reserva en línea, todo pasa por acá.
   ══════════════════════════════════════════════════════════════════════ */
.wa {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.2rem;
  border-radius: 999px;
  background: var(--hinode-deep);
  color: var(--shiro);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--sumi-900) 45%, transparent);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.wa:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--hinode-deep) 88%, black);
}
.wa:focus-visible {
  outline: 2px solid var(--shiro);
  outline-offset: 3px;
}

.wa__icon { width: 1.4rem; height: 1.4rem; flex: none; }

/* En pantallas chicas queda solo el ícono, para no tapar el contenido. */
@media (max-width: 620px) {
  .wa { padding: .9rem; gap: 0; }
  .wa__text {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .concept,
  .founder,
  .shop,
  .contact { grid-template-columns: 1fr; }

  .founder__media { position: static; max-width: 26rem; }
  .founder__media img { aspect-ratio: 4 / 3; }
  .shop__media  { max-width: 26rem; }
  .shop__media img { aspect-ratio: 3 / 2; }

  .concept__glyph { max-width: 20rem; }
}

@media (max-width: 900px) {
  .strip { grid-template-columns: repeat(2, 1fr); }
  .band { --band-bleed: clamp(1.5rem, 4vh, 2.5rem); }
  .band img { aspect-ratio: 4 / 3; }
}

@media (max-width: 900px) and (min-width: 621px) {
  .hero__meta { grid-template-columns: repeat(2, 1fr); }
  .hero__meta > div:nth-child(odd) { border-left: 0; padding-left: .5rem; }
  .hero__meta > div:nth-child(n + 3) {
    border-top: 1px solid var(--line-light);
    margin-top: 1rem;
    padding-top: 1.25rem;
  }
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .lang { margin-left: auto; }

  .nav {
    position: fixed;
    inset: 5rem 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 2rem;
    background: color-mix(in srgb, var(--sumi-900) 97%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line-light);
    font-size: .95rem;
    letter-spacing: .1em;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav a {
    padding: .95rem 0;
    border-bottom: 1px solid var(--line-light);
    opacity: .9;
  }
  .nav a::after { display: none; }

  .nav__cta {
    margin-top: 1.25rem;
    border-radius: 999px;
    text-align: center;
    border-bottom: 1px solid var(--line-light);
  }

  /* Con el menú abierto el header necesita fondo sólido. */
  .site-header:has(.nav.is-open) {
    background: color-mix(in srgb, var(--sumi-900) 97%, transparent);
    border-bottom-color: transparent;
  }
}

@media (max-width: 620px) {
  /* Logotipo, selector de idioma y botón de menú en la misma barra: se aprieta
     el espacio y la palabra «Menú» queda solo para lectores de pantalla. */
  .header__inner { gap: .75rem; }
  .nav-toggle__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .lang { padding: .3rem .55rem; gap: .4rem; }

  /* En 21:9 sobre 390 px la franja medía 219 px: el difuminado se comía
     casi todo y los surfistas no se leían. Vertical, se lee. */
  .band img { aspect-ratio: 5 / 6; }
  .hero { padding-block: 7rem 6.5rem; }
  .hero__title { width: 68vw; }
  .hero__meta { grid-template-columns: 1fr; }
  .hero__meta > div { padding-inline: 0; }
  .hero__meta > div + div {
    border-left: 0;
    border-top: 1px solid var(--line-light);
    padding-left: 0;
    padding-top: 1rem;
    margin-top: 1rem;
  }
  .hero__meta > div:first-child { padding-top: 1.15rem; }

  .concept__name  { grid-template-columns: 1fr; }
  .concept__marks { grid-template-columns: 1fr; }
  .concept__marks li + li {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 1.15rem;
    margin-top: 1.15rem;
  }

  .waves__list { grid-template-columns: 1fr; }

  .spot__data { grid-template-columns: repeat(2, 1fr); }
  .spot__data > div:nth-child(odd) { border-left: 0; padding-left: 0; }

  .contact__list li { grid-template-columns: 1fr; gap: .35rem; }

  .shop__list li { flex-direction: column; align-items: flex-start; }
  .shop__list span { text-align: left; }
}

/* ── Accesibilidad: 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;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ── Impresión ──────────────────────────────────────────────────────── */
@media print {
  .site-header, .hero__scroll, .nav-toggle, .lang, .wa { display: none; }
  body { background: #fff; color: #000; }
  .section { padding-block: 2rem; background: #fff !important; color: #000 !important; }
}