/* ==========================================================================
   Marketing Marbella — estilos
   Dirección editorial: portada y cierre en negro cálido, cuerpo en marfil,
   líneas finas en lugar de tarjetas y esquinas rectas. La paleta y las
   tipografías están arriba, en :root; cada sección elige tema con las clases
   .oscura o .clara.
   ========================================================================== */

@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/bodoni-moda-normal-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/bodoni-moda-italic-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin.woff2) format("woff2");
}

:root {
  --negro: #0e0d0b;
  --marfil: #f1ede4;
  --tinta: #1a1814;
  --champan: #c8b07a;
  --wa: #25d366;
  --bg-telon: #0e0d0b;

  --font-display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --pad-x: clamp(1.25rem, 6vw, 6rem);
  --ancho: 76rem;
}

/* Tema por defecto (páginas legales) y secciones claras. */
:root,
.clara {
  --fondo: var(--marfil);
  --texto: var(--tinta);
  --suave: #48443b;
  --linea: #cfc8b8;
  --acento: #6e5828;
  --trazo: rgba(110, 88, 40, 0.7);
  --punto: #8a6d2c;
}

.oscura {
  --fondo: var(--negro);
  --texto: var(--marfil);
  --suave: #a8a398;
  --linea: #2b2823;
  --acento: var(--champan);
  --trazo: rgba(200, 176, 122, 0.65);
  --punto: var(--champan);
}

.clara,
.oscura {
  background: var(--fondo);
  color: var(--texto);
}

* {
  box-sizing: border-box;
}

html {
  /* Sin zoom por doble toque; con la pinza de dos dedos se sigue pudiendo ampliar. */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 4.5rem;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

main {
  overflow-x: clip;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p,
figure,
ol {
  margin: 0;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2.2rem, 8.4vw, 4.4rem);
  line-height: 1.02;
}

h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 4.6vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
}

/* Sobre marfil los trazos finos de la Bodoni se pierden: más peso y el corte óptico robusto. */
.clara h2,
.pagina h1,
.pagina h2 {
  font-weight: 500;
  font-variation-settings: "opsz" 26;
}

.clara h3,
.clara summary,
.clara .futuro__pie,
.clara .paso__num,
.clara figcaption {
  font-weight: 600;
  font-variation-settings: "opsz" 14;
}

.clara .paso__num {
  font-weight: 500;
  color: #8c8576;
}

::selection {
  background: var(--champan);
  color: var(--negro);
}

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

.saltar {
  position: fixed;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  background: var(--marfil);
  color: var(--tinta);
}

.saltar:focus {
  top: 1rem;
}

/* Etiqueta pequeña en mayúsculas: se usa encima de los títulos y en detalles. */
.kicker,
.fila__num,
.proyecto__tipo,
.campo > span,
.hero__nota,
.hero__credito,
.contacto__o,
.pie__legal,
.pie__copy,
.pagina__fecha,
.intro__pista {
  font-family: var(--font-body);
  font-stretch: 82%;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.kicker {
  color: var(--acento);
  margin-bottom: 1.1rem;
}

.rellenar {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--suave);
}

.enlace {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
  background: linear-gradient(var(--acento), var(--acento)) 0 calc(100% - 0.55rem) / 100% 1px no-repeat;
  transition: background-size 0.4s ease;
}

.enlace:hover {
  background-size: 0 1px;
  background-position: 100% calc(100% - 0.55rem);
}

/* Grano fino sobre toda la página, para que los fondos lisos no se vean planos. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- barra de progreso ---------- */

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 60;
}

.progress-bar__fill {
  height: 100%;
  background: var(--champan);
  transform-origin: left;
  transform: scaleX(0);
}

/* ---------- telón de entrada ---------- */

.intro {
  display: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.js.intro-activa .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 90;
  color: var(--marfil);
}

.js.intro-activa,
.js.intro-activa body {
  overflow: hidden;
}

.intro__tela {
  position: absolute;
  inset: -12vh 0 0;
  display: grid;
  place-content: start center;
  justify-items: center;
  gap: 1.4rem;
  padding: 32vh var(--pad-x) 0;
  background: linear-gradient(180deg, rgba(14, 13, 11, 0.5) 0%, rgba(14, 13, 11, 0.12) 42%, rgba(14, 13, 11, 0.62) 100%),
    var(--bg-telon) url(../img/entrada-movil.jpg) center / cover no-repeat;
  border-bottom: 1px solid var(--champan);
  box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.7);
  will-change: transform;
}

/* En pantallas apaisadas se usa la versión horizontal de la foto. */
@media (min-aspect-ratio: 1/1) {
  .intro__tela {
    place-content: center;
    padding-top: 12vh;
    background-image: linear-gradient(180deg, rgba(14, 13, 11, 0.5) 0%, rgba(14, 13, 11, 0.15) 45%, rgba(14, 13, 11, 0.6) 100%),
      url(../img/entrada-ordenador.jpg);
  }
}

.intro__lema {
  font-family: var(--font-body);
  font-stretch: 82%;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champan);
  text-align: center;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.intro__marca {
  margin-bottom: 1.6rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 11vw, 5.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}

.intro__pista {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  color: var(--marfil);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
  opacity: 0;
}

.intro-lista .intro__pista {
  opacity: 1;
  transition: opacity 0.8s ease 0.4s;
}

.intro.abriendo .intro__pista {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.intro__raton {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .intro__tactil {
    display: none;
  }
  .intro__raton {
    display: inline;
  }
}

.intro__onda {
  position: relative;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--champan);
}

.intro__onda::before,
.intro__onda::after,
.intro__toque {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--champan);
  animation: onda 2.4s ease-out infinite;
}

.intro__onda::after {
  animation-delay: 1.2s;
}

.intro__toque {
  inset: auto;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  pointer-events: none;
  animation: onda-toque 0.7s ease-out forwards;
}

@keyframes onda {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(5.5);
    opacity: 0;
  }
}

@keyframes onda-toque {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(9);
    opacity: 0;
  }
}

.intro__tirador {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  width: 1px;
  height: 2.6rem;
  background: var(--champan);
  opacity: 0.6;
}

.intro__tirador::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.35rem;
  width: 0.7rem;
  height: 0.7rem;
  margin-left: -0.35rem;
  border: 1px solid var(--champan);
  border-radius: 50%;
  background: var(--bg-telon);
}

/* ---------- cabecera ----------
   Se queda arriba del todo (no acompaña al bajar): clara sobre la foto de la portada
   y oscura en las páginas legales, que tienen fondo marfil. */

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(1rem + env(safe-area-inset-top)) var(--pad-x) 1rem;
  color: var(--marfil);
  font-stretch: 82%;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body:has(.pagina) .topbar {
  color: var(--tinta);
}

.topbar a,
.topbar button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: inherit;
  text-decoration: none;
}

.topbar__acciones {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.idioma {
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.idioma span {
  opacity: 0.5;
}

.idioma .activo {
  opacity: 1;
}

.topbar__cta {
  display: none !important;
  border-bottom: 1px solid currentColor;
  min-height: 0 !important;
  padding-bottom: 0.25rem;
}

@media (min-width: 700px) {
  .topbar__cta {
    display: inline-flex !important;
  }
}

/* ---------- botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 1rem 1.6rem;
  border: 1px solid var(--texto);
  border-radius: 0;
  background: var(--texto);
  color: var(--fondo);
  font-family: var(--font-body);
  font-stretch: 82%;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.btn:hover {
  background: transparent;
  color: var(--texto);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.icono-wa {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
  fill: currentColor;
}

/* ---------- secciones ---------- */

.section {
  padding: clamp(4.5rem, 13vw, 9rem) var(--pad-x);
}

.section {
  position: relative;
  overflow: hidden;
}

.section > * {
  position: relative;
  z-index: 1;
  max-width: var(--ancho);
  margin-left: auto;
  margin-right: auto;
}

/* Fondo en movimiento: aros detrás del contenido, con un punto que recorre la circunferencia.
   Los mueve y gira main.js al bajar. Van dentro de una capa que los difumina arriba y abajo,
   para que no se corten en seco al llegar al borde de la sección. */
.section > .aro-capa {
  position: absolute;
  inset: 0;
  z-index: 0;
  max-width: none;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9rem, #000 calc(100% - 9rem), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 9rem, #000 calc(100% - 9rem), transparent 100%);
}

.aro {
  position: absolute;
  top: 6%;
  width: clamp(22rem, 86vw, 54rem);
  aspect-ratio: 1;
  border: 1.5px solid var(--trazo);
  border-radius: 50%;
  will-change: transform;
}

.aro::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.6rem;
  width: 1.2rem;
  height: 1.2rem;
  margin-left: -0.6rem;
  border-radius: 50%;
  background: var(--punto);
}

.aro::after {
  content: "";
  position: absolute;
  inset: 18% 2% 2% 18%;
  border: 1.5px dashed var(--trazo);
  border-radius: 50%;
}

.aro--derecha {
  right: -38%;
}

.aro--izquierda {
  left: -38%;
}

@media (min-width: 900px) {
  .aro--derecha {
    right: -10%;
  }

  .aro--izquierda {
    left: -10%;
  }
}

/* ---------- oleaje de partículas: capa fija abajo, la pinta main.js sin parar ---------- */

.oleaje {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: 68vh;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 38%);
  mask-image: linear-gradient(180deg, transparent 0, #000 38%);
}

/* ---------- franjas de texto que cruzan la pantalla ---------- */

.franja {
  overflow: hidden;
  padding: clamp(0.7rem, 1.6vw, 1rem) 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}

.franja--champan {
  background: var(--champan);
  color: var(--negro);
  border: 0;
}

.franja__pista {
  display: flex;
  width: max-content;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 3.5vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  will-change: transform;
}

.franja__pista span {
  display: inline-flex;
  align-items: center;
}

.franja__pista span::after {
  content: "";
  width: 0.26em;
  height: 0.26em;
  margin: 0 0.5em;
  border-radius: 50%;
  background: var(--champan);
}

.franja--champan .franja__pista span::after {
  background: var(--negro);
}

.franja__pista span:nth-child(even) {
  font-style: italic;
}

.section__cabecera {
  margin-bottom: clamp(2.2rem, 6vw, 4rem);
}

.section__cabecera h2 {
  max-width: 16ch;
}

/* Las secciones claras seguidas comparten fondo: se separan solo con aire, sin raya. */
.clara + .clara {
  padding-top: 0;
}

.clara:has(+ .clara) {
  padding-bottom: clamp(3.2rem, 8vw, 6rem);
}

.clara + .clara::before {
  content: "";
  display: block;
  grid-column: 1 / -1;
  height: 0;
  margin-bottom: clamp(3.2rem, 8vw, 6rem);
}

@media (min-width: 900px) {
  .dos-columnas {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: 4rem;
    padding-left: max(var(--pad-x), calc((100vw - var(--ancho)) / 2));
    padding-right: max(var(--pad-x), calc((100vw - var(--ancho)) / 2));
  }

  .dos-columnas > * {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ---------- 1. portada ---------- */

.hero {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 var(--pad-x) clamp(2rem, 6vw, 4rem);
  overflow: hidden;
}

/* El contenido va por encima del oleaje de partículas. */
.hero > *,
.franja,
.pie {
  position: relative;
  z-index: 1;
}

/* Escaparate: una ventana de navegador con capturas de webs hechas por nosotros, que se van turnando. */
.ventana {
  margin: 4.8rem 0 1.7rem;
  overflow: hidden;
  border: 1px solid rgba(200, 176, 122, 0.38);
  border-radius: 0.75rem;
  background: #171512;
  box-shadow: 0 0 0 5px rgba(241, 237, 228, 0.035), 0 34px 70px -34px #000;
}

.ventana__barra {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.8rem;
  background: #1c1a17;
  border-bottom: 1px solid var(--linea);
}

.ventana__puntos {
  display: flex;
  gap: 0.35rem;
  flex: none;
}

.ventana__puntos i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 1px solid #6b655a;
}

.ventana__url {
  flex: 1;
  min-width: 0;
  margin-right: 1.9rem;
  padding: 0.22rem 0.9rem;
  overflow: hidden;
  border-radius: 99px;
  background: #121110;
  color: var(--suave);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #171512;
}

.hero__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.hero__foto img.activa {
  opacity: 1;
}

.hero__texto {
  max-width: var(--ancho);
  width: 100%;
  margin: 0 auto;
}

.hero__titulo {
  font-size: clamp(2.3rem, 9.9vw, 6.2rem);
  line-height: 1;
  max-width: 14ch;
}

.palabra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.palabra > span {
  display: inline-block;
}

.hero__sub {
  margin-top: 1.1rem;
  max-width: 36ch;
  color: #d8d3c8;
  font-size: 1.02rem;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
  margin-top: 1.5rem;
}

.hero__nota {
  color: var(--suave);
}

.hero__credito {
  max-width: var(--ancho);
  width: 100%;
  margin: clamp(1.8rem, 5vw, 3rem) auto 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(241, 237, 228, 0.22);
  color: var(--suave);
  font-size: 0.64rem;
}

/* En pantallas anchas: texto a la izquierda y el escaparate a la derecha. */
@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "texto foto" "credito credito";
    column-gap: clamp(2rem, 5vw, 5rem);
    align-content: center;
    align-items: center;
    padding-top: 7rem;
    padding-left: max(var(--pad-x), calc((100vw - var(--ancho)) / 2));
    padding-right: max(var(--pad-x), calc((100vw - var(--ancho)) / 2));
  }

  .hero__texto {
    grid-area: texto;
  }

  .ventana {
    grid-area: foto;
    margin: 0;
  }

  .hero__credito {
    grid-area: credito;
  }

  .hero__titulo {
    font-size: clamp(3rem, 5.2vw, 5.4rem);
  }
}

/* ---------- página de un servicio (tarjetas de fidelización) ---------- */

.topbar__volver {
  border-bottom: 1px solid currentColor;
  min-height: 0 !important;
  padding-bottom: 0.25rem;
}

.hero--servicio {
  align-content: center;
  gap: 2.6rem;
  padding-top: 7rem;
}

/* Alineado a la izquierda con el resto de la sección; el ancho de lectura se limita con el relleno. */
.section > .texto-largo {
  padding-right: max(0px, calc(100% - 36rem));
  font-size: 1.12rem;
  color: var(--suave);
}

.texto-largo + .texto-largo {
  margin-top: 1rem;
}

/* Captura de la tarjeta en la portada del servicio. */
.tarjeta {
  width: min(100%, 24rem);
  margin: 0 auto;
}

.tarjeta img {
  width: 100%;
  height: auto;
  border: 1px solid rgba(200, 176, 122, 0.4);
  border-radius: 1rem;
  box-shadow: 0 0 0 5px rgba(241, 237, 228, 0.035), 0 34px 70px -34px #000;
}

.tarjeta figcaption,
.captura figcaption,
.capturas__nota {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--suave);
}

.tarjeta figcaption {
  margin-top: 0.9rem;
  text-align: center;
}

/* Capturas del servicio, en marcos con forma de pantalla de móvil. */
.capturas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
  margin-top: 2.6rem;
}

.captura img {
  width: 100%;
  height: auto;
  border: 1px solid var(--linea);
  border-radius: 1.1rem;
  background: #fff;
}

.captura figcaption {
  margin-top: 0.7rem;
}

.capturas__nota {
  margin-top: 1.6rem;
  max-width: 60ch;
}

@media (min-width: 900px) {
  .capturas {
    grid-template-columns: repeat(2, 17rem);
    gap: 2.4rem;
    justify-content: start;
    padding-left: calc(5rem + 2rem);
  }
}

@media (min-width: 900px) {
  .hero--servicio {
    grid-template-areas: "texto tarjeta";
  }

  .hero--servicio .tarjeta {
    grid-area: tarjeta;
  }
}

.fila__enlace {
  grid-column: 2;
  justify-self: start;
  font-size: 0.95rem;
}

@media (min-width: 900px) {
  .fila__enlace {
    grid-column: 3;
  }
}

/* ---------- filas: problema, servicios y próximamente ---------- */

.fila {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0.45rem 0.9rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-top: 1px solid var(--linea);
}

.oscura .fila:last-child,
.proximamente .fila:last-child {
  border-bottom: 1px solid var(--linea);
}

.fila__num {
  color: var(--acento);
}

.fila h3,
.fila__num {
  transition: color 0.45s ease, transform 0.45s ease;
}

.fila--viva h3 {
  color: var(--acento);
  transform: translateX(0.5rem);
}

.fila--viva .fila__num {
  transform: scale(1.5);
  transform-origin: left center;
}

.fila p {
  grid-column: 2;
  color: var(--suave);
  max-width: 46ch;
}

.proximamente .fila {
  grid-template-columns: 1fr;
}

.proximamente .fila p {
  grid-column: 1;
}

@media (min-width: 900px) {
  .fila {
    grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 2rem;
    padding: 2rem 0;
  }

  .fila p {
    grid-column: 3;
  }

  .proximamente .fila {
    grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 1.15fr);
  }

  .proximamente .fila p {
    grid-column: 3;
  }

  .fila h3 {
    transition: transform 0.4s ease;
  }

  .fila:hover h3 {
    transform: translateX(0.6rem);
  }
}

/* ---------- 4. proyectos ---------- */

/* Rueda de proyectos: las capturas giran en órbita y se mueven arrastrando. Siempre miran al frente;
   las de atrás quedan arriba, pequeñas, oscuras y solapadas, y la de delante pasa a primer plano.
   main.js calcula la posición, el tamaño y el orden de cada una. */
.section > .rueda {
  max-width: none;
  margin-left: calc(-1 * var(--pad-x));
  margin-right: calc(-1 * var(--pad-x));
}

.rueda__escena {
  /* Sitio arriba para la fila de atrás y un poco abajo para la captura de delante, que crece. */
  padding: 34vw 0 6vw;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

.rueda__escena--arrastrando {
  cursor: grabbing;
}

.rueda__escena:focus-visible .rueda__cara--frente {
  outline: 2px solid var(--champan);
  outline-offset: 4px;
}

.rueda__anillo {
  position: relative;
  width: min(62vw, 19rem);
  aspect-ratio: 4 / 3;
  margin: 0 auto;
}

.rueda__cara {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(200, 176, 122, 0.4);
  border-radius: 0.6rem;
  background: #171512;
  box-shadow: 0 18px 40px -22px #000;
  will-change: transform;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.7s ease, box-shadow 0.5s ease;
}

.rueda__escena--arrastrando .rueda__cara {
  transition: none;
}

.rueda__cara--frente {
  box-shadow: 0 0 0 5px rgba(241, 237, 228, 0.05), 0 34px 70px -30px #000;
}

.rueda__cara img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  pointer-events: none;
}

.rueda__pie {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  min-height: 8.2rem;
  padding: 0 var(--pad-x);
  text-align: center;
}

.proyecto__tipo {
  color: var(--acento);
}

.rueda__pie h3 {
  font-weight: 400;
  font-size: clamp(1.8rem, 6.4vw, 2.6rem);
  line-height: 1.05;
}

.rueda__mandos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.2rem;
  margin-top: 0.8rem;
  padding: 0 var(--pad-x);
}

.rueda__flecha {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.rueda__flecha:hover {
  border-color: var(--champan);
  background: var(--champan);
  color: var(--negro);
}

.rueda__cuenta,
.rueda__pista {
  font-stretch: 82%;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--suave);
}

.rueda__cuenta {
  min-width: 4.6rem;
  text-align: center;
  color: var(--texto);
}

.rueda__pista {
  flex-basis: 100%;
  text-align: center;
}

@media (min-width: 900px) {
  .rueda__escena {
    padding: 15rem 0 3rem;
  }

  .rueda__anillo {
    width: clamp(24rem, 32vw, 32rem);
  }
}

/* ---------- 5. cómo trabajamos ---------- */

.pasos {
  position: relative;
  padding-left: 2.4rem;
}

.pasos__linea {
  position: absolute;
  left: 0;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 1px;
  background: var(--linea);
}

.pasos__progreso {
  position: absolute;
  inset: 0;
  background: var(--tinta);
  transform-origin: top;
  transform: scaleY(0);
}

.pasos ol {
  display: grid;
  gap: 2.1rem;
  padding: 0;
  list-style: none;
}

.paso {
  display: grid;
  gap: 0.4rem;
  max-width: 34rem;
}

.paso__num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  color: #a39d8f;
  transition: color 0.5s ease;
}

.paso.activo .paso__num {
  color: var(--acento);
}

.paso p {
  color: var(--suave);
}

/* ---------- 6. quiénes somos ---------- */

.nosotros {
  display: grid;
  gap: 2.6rem;
}

.nosotros__parrafo {
  margin-top: 1.5rem;
  max-width: 40ch;
  font-size: 1.12rem;
  color: var(--suave);
}

.nosotros__fotos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.retrato {
  display: grid;
  gap: 0.7rem;
}

.retrato:has(.rellenar),
.nosotros__fotos:not(:has(img)) {
  display: none;
}

.retrato__marco {
  display: grid;
  place-content: center;
  aspect-ratio: 4 / 5;
  padding: 0.5rem;
  overflow: hidden;
  background: #e6e0d2;
  text-align: center;
}

.retrato__marco--foto {
  padding: 0;
}

.retrato__marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

.retrato figcaption {
  font-family: var(--font-display);
  font-size: 1.2rem;
}

/* ---------- 7. preguntas frecuentes ---------- */

.pregunta {
  border-top: 1px solid var(--linea);
}

.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.4rem 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 4.4vw, 1.5rem);
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
}

.pregunta summary::-webkit-details-marker {
  display: none;
}

.pregunta summary i {
  position: relative;
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
}

.pregunta summary i::before,
.pregunta summary i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 0.35s ease;
}

.pregunta summary i::after {
  transform: rotate(90deg);
}

.pregunta[open] summary i::after {
  transform: rotate(0);
}

.pregunta p {
  padding: 0 0 1.6rem;
  max-width: 54ch;
  color: var(--suave);
}

/* ---------- 8. próximamente ---------- */

.futuro__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.9rem;
  margin-top: 2rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.futuro__pie .enlace {
  font-style: italic;
}

/* ---------- 9. contacto ---------- */

.contacto__titulo {
  font-size: clamp(2.7rem, 12vw, 6.4rem);
  line-height: 0.98;
  max-width: 11ch;
}

.contacto__texto {
  margin-top: 1.4rem;
  color: var(--suave);
}

.contacto__directo {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
}

.contacto__directo .btn {
  margin-bottom: 0.7rem;
}

.contacto__o {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.6rem;
  margin-bottom: 1.4rem;
  color: var(--suave);
}

.contacto__o::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linea);
}

.formulario {
  display: grid;
  gap: 1.3rem;
}

.formulario__trampa {
  position: absolute;
  left: -200vw;
}

.campo {
  display: grid;
  gap: 0.35rem;
}

.campo > span {
  color: var(--suave);
}

.campo input,
.campo textarea {
  width: 100%;
  padding: 0.35rem 0 0.7rem;
  border: 0;
  border-bottom: 1px solid #5a554b;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.05rem;
  resize: none;
  transition: border-color 0.3s ease;
}

.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-bottom-color: var(--champan);
}

.campo__cuenta {
  justify-self: end;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--suave);
}

.acepto {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--suave);
  max-width: 70ch;
}

.formulario .btn {
  width: 100%;
}

.formulario__estado {
  min-height: 1.5rem;
}

.formulario__estado.error {
  color: #ff9d8a;
}

@media (min-width: 900px) {
  .formulario {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 2.4rem;
  }

  .campo--ancho {
    grid-column: 1 / -1;
  }

  .formulario .btn {
    width: auto;
    justify-self: start;
  }
}

/* ---------- pie ---------- */

.pie {
  display: grid;
  gap: 1.1rem;
  padding: 3rem var(--pad-x) calc(5.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea);
}

.pie__marca {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.015em;
}

.pie__lema {
  max-width: 34ch;
  color: var(--suave);
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.6rem;
  margin-top: 1rem;
}

.pie__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
}

.pie__legal a:hover {
  color: var(--acento);
}

.pie__copy {
  color: var(--suave);
}

/* ---------- cursor propio (solo ordenador): un círculo que invierte los colores de lo que tiene debajo.
   Lo crea y lo mueve main.js. ---------- */

.con-cursor,
.con-cursor * {
  cursor: none !important;
}

/* Para escribir hace falta el cursor de texto de siempre. */
.con-cursor input,
.con-cursor textarea,
.con-cursor select {
  cursor: text !important;
}

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 95;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform;
}

.cursor--activo {
  opacity: 1;
}

.cursor--escribir {
  opacity: 0;
}

.cursor__disco {
  position: absolute;
  width: 4.6rem;
  height: 4.6rem;
  margin: -2.3rem 0 0 -2.3rem;
  border-radius: 50%;
  background: var(--marfil);
  transform: scale(0.3);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Crece sobre los títulos y los enlaces; sobre los botones se queda pequeño para dejar ver cómo se llenan. */
.cursor--titulo .cursor__disco {
  transform: scale(1);
}

.cursor--enlace .cursor__disco {
  transform: scale(0.62);
}

/* Sobre un botón dorado la inversión daría azul: ahí el punto es negro liso. */
.cursor--boton {
  mix-blend-mode: normal;
}

.cursor--boton .cursor__disco {
  background: var(--negro);
  transform: scale(0.16);
}

.cursor--pulsado .cursor__disco {
  transform: scale(0.2);
}

/* ---------- botones que se llenan de dorado con un barrido en diagonal, de izquierda a derecha ---------- */

@media (hover: hover) and (pointer: fine) {
  .btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: background-color 0.35s ease, color 0.5s ease 0.2s, border-color 0.8s ease;
  }

  .btn::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -20%;
    z-index: -1;
    width: 140%;
    background: var(--champan);
    transform: translateX(-101%) skewX(-22deg);
    transition: transform 1s cubic-bezier(0.6, 0, 0.2, 1);
  }

  /* El texto cambia de color a mitad del barrido, para que se lea en todo momento. */
  .btn:hover {
    background: var(--texto);
    border-color: var(--champan);
    color: var(--negro);
    transition: background-color 0.35s ease, color 0.45s ease 0.3s, border-color 0.8s ease;
  }

  .btn:hover::before {
    transform: translateX(0) skewX(-22deg);
  }
}

/* ---------- botón flotante de WhatsApp ---------- */

.flotante {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.55);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.flotante .icono-wa {
  width: 1.75rem;
  height: 1.75rem;
}

.js .flotante:not(.visible) {
  opacity: 0;
  transform: translateY(1.2rem);
  pointer-events: none;
}

/* ---------- aviso de datos por rellenar (solo se ve en el ordenador, nunca publicado) ---------- */

.pendientes {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 45;
  max-width: min(72vw, 24rem);
  padding: 0.5rem 0.7rem;
  background: var(--negro);
  color: var(--champan);
  border: 1px dashed var(--champan);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.68rem;
}

/* ---------- páginas legales, gracias y 404 ---------- */

.pagina {
  max-width: 46rem;
  margin: 0 auto;
  padding: 8rem var(--pad-x) 5rem;
}

.pagina h1 {
  font-size: clamp(2.4rem, 9vw, 4rem);
  line-height: 1;
  margin-bottom: 1rem;
}

.pagina h2 {
  font-size: 1.6rem;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 2.8rem 0 0.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linea);
}

.pagina p,
.pagina ul {
  margin: 0 0 1rem;
}

.pagina ul {
  padding-left: 1.2rem;
}

.pagina a {
  text-decoration-color: var(--acento);
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

.pagina__fecha {
  color: var(--suave);
}

.pagina--centro {
  min-height: 80vh;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0.6rem;
}

.pagina--centro .btn {
  margin-top: 1.2rem;
}

.tabla {
  width: 100%;
  margin: 1rem 0 1.4rem;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.tabla th,
.tabla td {
  padding: 0.7rem 0.6rem 0.7rem 0;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.tabla th {
  font-stretch: 82%;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--suave);
}

/* ---------- barra de arriba que acompaña al bajar (la activa main.js) ---------- */

.topbar--viaja {
  position: fixed;
  transition: background-color 0.35s ease, padding 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}

.topbar--solida,
.topbar--abierta {
  padding-top: calc(0.3rem + env(safe-area-inset-top));
  padding-bottom: 0.3rem;
  border-bottom-color: #2b2823;
  background: rgba(14, 13, 11, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--marfil);
}

/* Secciones: en el móvil, en un panel que se despliega bajo la barra; en pantallas anchas, en la propia barra. */
.topbar__nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  padding: 0.6rem var(--pad-x) 1.4rem;
  border-bottom: 1px solid #2b2823;
  background: rgba(14, 13, 11, 0.97);
}

.topbar--abierta .topbar__nav {
  display: grid;
}

.topbar__nav a {
  min-height: 3rem;
  border-bottom: 1px solid #2b2823;
}

.topbar__nav a:last-child {
  border-bottom: 0;
}

.topbar__menu {
  position: relative;
  width: 2.75rem;
  margin-right: -0.6rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.topbar__menu i {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  top: 50%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s ease;
}

.topbar__menu i:first-child {
  transform: translateY(-0.28rem);
}

.topbar__menu i:last-child {
  transform: translateY(0.28rem);
}

.topbar--abierta .topbar__menu i:first-child {
  transform: rotate(45deg);
}

.topbar--abierta .topbar__menu i:last-child {
  transform: rotate(-45deg);
}

.topbar__largo {
  display: none;
}

@media (min-width: 600px) {
  .topbar__corto {
    display: none;
  }

  .topbar__largo {
    display: inline;
  }
}

@media (min-width: 1180px) {
  .topbar__nav,
  .topbar--abierta .topbar__nav {
    position: static;
    display: flex;
    gap: 1.7rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.72rem;
  }

  .topbar__nav a {
    min-height: 2.75rem;
    border: 0;
    opacity: 0.72;
    transition: opacity 0.3s ease;
  }

  .topbar__nav a:hover {
    opacity: 1;
  }

  .topbar__menu {
    display: none !important;
  }
}

/* ---------- franja de fondo algo más tostada, para romper las tiradas largas de marfil ---------- */

.arena {
  --fondo: #e5decd;
  --linea: #c3baa5;
}

.clara + .arena,
.arena + .clara {
  padding-top: clamp(4.5rem, 13vw, 9rem);
}

.clara:has(+ .arena),
.arena:has(+ .clara) {
  padding-bottom: clamp(4.5rem, 13vw, 9rem);
}

.clara + .arena::before,
.arena + .clara::before {
  content: none;
}

/* ---------- dibujos de fondo: además del aro, ondas, rombo y trama ---------- */

.aro--abajo {
  top: auto;
  bottom: 6%;
}

.aro--ondas,
.aro--trama {
  border: 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
}

.aro--ondas {
  background: repeating-radial-gradient(circle at center, transparent 0 2.7rem, var(--trazo) 2.7rem calc(2.7rem + 1.5px));
}

.aro--trama {
  /* Más tenue que el resto: las líneas rectas compiten con el texto si van fuertes. */
  opacity: 0.45;
  border-radius: 0;
  background: repeating-linear-gradient(118deg, transparent 0 1.8rem, var(--trazo) 1.8rem calc(1.8rem + 1.5px));
}

.aro--ondas::before,
.aro--ondas::after,
.aro--trama::before,
.aro--trama::after {
  content: none;
}

.aro--rombo {
  width: clamp(17rem, 62vw, 38rem);
  border-radius: 0;
}

.aro--rombo::after {
  inset: 13%;
  border-radius: 0;
}

/* ---------- tres piezas en fila (el problema; "para ti" en la página de tarjetas) ---------- */

.triptico {
  display: grid;
  gap: 2.2rem;
}

.pieza {
  padding-top: 1.3rem;
  border-top: 2px solid var(--acento);
}

.pieza h3 {
  font-size: clamp(1.6rem, 6vw, 2.05rem);
  font-style: italic;
  line-height: 1.1;
}

.pieza p {
  margin-top: 0.8rem;
  max-width: 36ch;
  color: var(--suave);
}

@media (min-width: 900px) {
  .triptico {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3.2rem;
  }
}

/* ---------- mosaico de casillas (servicios, lo que viene, qué incluye) ---------- */

.mosaico {
  display: grid;
  border-top: 1px solid var(--linea);
  border-left: 1px solid var(--linea);
}

.tesela {
  display: grid;
  align-content: start;
  gap: 0.65rem;
  padding: 1.6rem 1.4rem 1.8rem;
  border-right: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  transition: background-color 0.4s ease;
}

.tesela p {
  max-width: 44ch;
  color: var(--suave);
}

.tesela--grande {
  background: var(--tinta);
  color: var(--marfil);
}

.tesela--grande h3 {
  font-weight: 400;
  font-variation-settings: normal;
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1;
}

.tesela--grande p {
  color: #b9b3a6;
}

.tesela__etiqueta {
  font-stretch: 82%;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
}

.tesela__enlace {
  justify-self: start;
  font-size: 0.95rem;
}

@media (hover: hover) {
  .tesela:not(.tesela--grande):hover {
    background: rgba(26, 24, 20, 0.055);
  }
}

@media (min-width: 640px) {
  .mosaico {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tesela--grande,
  .tesela--ancha,
  .tesela--tablet {
    grid-column: span 2;
  }

  .tesela {
    padding: 2rem 1.8rem 2.2rem;
  }
}

@media (min-width: 1000px) {
  .mosaico:not(.mosaico--dos) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tesela--tablet {
    grid-column: auto;
  }

  .tesela {
    min-height: 12rem;
  }
}

/* ---------- sectores: se elige uno y debajo (o al lado) sale su texto ---------- */

.selector {
  display: grid;
  gap: 1.8rem;
}

.selector__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.selector__boton {
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid #b3a98f;
  border-radius: 99px;
  background: none;
  color: var(--texto);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
}

.selector__boton.activo {
  border-color: var(--texto);
  background: var(--texto);
  color: var(--fondo);
}

.selector__panel {
  display: grid;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linea);
}

/* Todos los textos ocupan la misma casilla: el alto es el del más largo y nada salta al cambiar. */
.selector__texto {
  grid-area: 1 / 1;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 5.6vw, 2.3rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.7rem);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s 0.45s;
}

.selector__texto.activo {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

@media (min-width: 900px) {
  .selector {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 4rem;
    align-items: stretch;
  }

  .selector__lista {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .selector__boton,
  .selector__boton.activo {
    padding: 0.35rem 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.85rem;
    color: #9a9382;
  }

  .selector__boton:hover {
    color: var(--texto);
  }

  .selector__boton.activo {
    padding-left: 1.4rem;
    color: var(--texto);
    font-style: italic;
    background: linear-gradient(var(--acento), var(--acento)) 0 55% / 0.9rem 2px no-repeat;
  }

  .selector__panel {
    align-content: center;
    padding: 0 0 0 3.5rem;
    border-top: 0;
    border-left: 1px solid var(--linea);
  }
}

/* ---------- rueda: aviso de que se puede deslizar ---------- */

.rueda__gesto {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: max-content;
  max-width: calc(100% - 2 * var(--pad-x));
  margin: 0 auto 1.5rem;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--champan);
  border-radius: 99px;
  color: var(--champan);
  font-stretch: 82%;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.6s ease, border-color 0.6s ease;
}

.rueda__gesto i {
  font-style: normal;
  font-size: 1rem;
  line-height: 1;
  animation: gesto-izquierda 1.3s ease-in-out infinite;
}

.rueda__gesto i:last-child {
  animation-name: gesto-derecha;
}

.rueda--usada .rueda__gesto {
  border-color: var(--linea);
  color: var(--suave);
}

.rueda--usada .rueda__gesto i {
  animation: none;
}

@keyframes gesto-izquierda {
  50% {
    transform: translateX(-0.45rem);
  }
}

@keyframes gesto-derecha {
  50% {
    transform: translateX(0.45rem);
  }
}

/* ---------- proyectos: la sección entera cabe en una pantalla, sin tener que bajar ----------
   El tamaño de la rueda sale del alto disponible: lo que queda tras la barra, el título, el nombre y las flechas. */

.proyectos {
  --rueda: max(9rem, min(62vw, 19rem, calc((100svh - 28.5rem) / 1.33)));
  padding-top: 2.2rem;
  padding-bottom: 1.6rem;
}

.proyectos .section__cabecera {
  margin-bottom: 0.4rem;
}

.proyectos .section__cabecera .kicker {
  margin-bottom: 0.6rem;
}

.proyectos .section__cabecera h2 {
  max-width: none;
  font-size: clamp(2rem, 4vw, 3.3rem);
}

.proyectos .rueda__anillo {
  width: var(--rueda);
}

.proyectos .rueda__escena {
  padding: calc(var(--rueda) * 0.5) 0 calc(var(--rueda) * 0.08);
}

.proyectos .rueda__gesto {
  margin-bottom: 0.9rem;
}

.proyectos .rueda__pie {
  min-height: 7.4rem;
  gap: 0.2rem;
}

.proyectos .rueda__mandos {
  margin-top: 0.3rem;
}

@media (min-width: 900px) {
  .proyectos {
    --rueda: max(13rem, min(32vw, 34rem, calc((100svh - 29.5rem) / 1.14)));
  }

  .proyectos .rueda__escena {
    padding: calc(var(--rueda) * 0.33) 0 calc(var(--rueda) * 0.06);
  }
}

/* ---------- sin animaciones para quien las tiene desactivadas ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}