/* ============================================================================
   GIULIA DA SILVA — ESTILOS
   ============================================================================
   ÍNDICE
     0. Variables (colores, tipografías, escala)
     1. Base y utilidades
     2. Botones
     3. Header (logo + idioma)
     SECCIÓN 1  · Hero
     SECCIÓN 2  · Intro + cifras
     SECCIÓN 3  · If you want to be taken seriously
     SECCIÓN 4  · Why "Style Therapy?"
     SECCIÓN 5  · Corporate baddies (+ papel rasgado)
     SECCIÓN 6  · Testimonios
     SECCIÓN 7  · Slider de looks
     SECCIÓN 8  · Eventos (video)
     SECCIÓN 9  · Workshops
     SECCIÓN 10 · Comunidad (+ globo de diálogo)
     SECCIÓN 11 · Preguntas
     SECCIÓN 12 · Footer
     RESPONSIVE (tablet y móvil)

   CÓMO FUNCIONAN LOS TAMAÑOS
   El diseño (PDF) mide 1024 px de ancho. Para que la web se vea igual en
   cualquier pantalla de escritorio, los tamaños se escriben como
       calc(40 * var(--u))
   donde 40 es la medida en el PDF y --u es "1 píxel del diseño", que crece
   o se encoge con el ancho de la ventana (con un máximo para pantallas
   muy grandes). En móvil se usan tamaños propios (final del archivo).
   ========================================================================== */


/* ==========================================================================
   0. VARIABLES
   ========================================================================== */
:root {
  /* --- Colores exactos del diseño --- */
  --color-plum: #321625;        /* fondo oscuro principal */
  --color-cream: #e3e2dc;       /* fondo claro y textos claros */
  --color-gold: #a19763;        /* dorado / verde oliva */
  --color-gold-light: #f7f4a3;  /* texto del botón "Let's create a workshop!" */
  --color-mauve: #947d88;       /* "g" decorativa */
  --color-brown: #401804;       /* texto de la sección "Questions?" */
  --color-black: #000;

  /* --- Tipografías ---
     Diseño original: Gotham (títulos), DM Sans (textos) y Sigher (manuscrita).
     Gotham y Sigher son de pago → se usan Montserrat y Gochi Hand.
     Para cambiarlas, basta con editar estas 3 líneas. */
  --font-heading: 'Montserrat', 'Gotham', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-hand: 'Gochi Hand', 'Sigher', cursive;

  /* Montserrat es más ancha que Gotham: se compensa un poco el espaciado. */
  --heading-tracking: -0.035em;

  /* --- Escala: 1 píxel del diseño (ver explicación arriba) --- */
  --u: min(calc(100vw / 1024), 1.4px);

  /* --- Sombra suave de los títulos sobre fotos (como en el diseño) --- */
  --text-shadow-soft: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.55);
}


/* ==========================================================================
   1. BASE Y UTILIDADES
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-plum);
  color: var(--color-plum);
  font-family: var(--font-body);
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, blockquote { margin: 0; }

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

a { color: inherit; }

.text-gold { color: var(--color-gold); }

.shadow-text { text-shadow: var(--text-shadow-soft); }

/* Enlace "saltar al contenido" (accesibilidad: sólo aparece con el teclado) */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--color-cream);
  color: var(--color-plum);
  font-family: var(--font-heading);
}
.skip-link:focus { top: 1rem; }

/* Contorno visible al navegar con teclado */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* Clase común para los títulos en Montserrat/Gotham "Black" */
.hero__title,
.intro__title,
.intro__stat,
.why__title,
.baddies__title,
.section-title,
.events__experience,
.events__title,
.events__upcoming-title,
.workshop__title,
.questions__title,
.site-footer__title,
.social-links,
.btn {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: var(--heading-tracking);
}


/* ==========================================================================
   2. BOTONES
   Todos comparten .btn; el color se elige con un modificador .btn--xxx
   ========================================================================== */
.btn {
  display: inline-block;
  padding: calc(6 * var(--u)) calc(10 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1.2;
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }

/* Crema con texto ciruela — "Discover Style Therapy" */
.btn--cream {
  background: var(--color-cream);
  color: var(--color-plum);
}

/* Dorado con borde y texto ciruela — "Let's elevate your image" */
.btn--gold {
  background: var(--color-gold);
  color: var(--color-plum);
  border: calc(1.5 * var(--u)) solid #6f6440;
  padding: calc(10 * var(--u)) calc(16 * var(--u));
}

/* Dorado con texto amarillo claro — "Let's create a workshop!" */
.btn--gold-light {
  background: var(--color-gold);
  color: var(--color-gold-light);
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  text-shadow: 0 1px 2px rgba(50, 22, 37, 0.35);
}

/* Crema con texto dorado — "Book a free 15-min discovery call" */
.btn--cream-gold {
  background: var(--color-cream);
  color: var(--color-gold);
  font-size: calc(27.7 * var(--u));
  padding: calc(8 * var(--u)) calc(11 * var(--u));
}

/* Sólo contorno — "JOIN OUR COMMUNITY" */
.btn--outline {
  color: var(--color-cream);
  border: calc(1.5 * var(--u)) solid var(--color-cream);
  font-size: calc(40.8 * var(--u));
  padding: calc(6 * var(--u)) calc(18 * var(--u));
  letter-spacing: -0.02em;
}
.btn--outline:hover { background: rgba(227, 226, 220, 0.12); filter: none; }


/* ==========================================================================
   3. HEADER — logo centrado + selector de idioma a la derecha
   Se superpone al hero (posición absoluta), igual que en el diseño.
   ========================================================================== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: calc(42 * var(--u));
}

.site-header__logo img {
  width: calc(217 * var(--u));
  height: auto;
}

.lang-switch {
  position: absolute;
  right: calc(32 * var(--u));
  top: calc(40 * var(--u));
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-heading);
  font-size: max(13px, calc(13 * var(--u)));
  color: var(--color-cream);
}

.lang-switch__btn {
  background: none;
  border: 0;
  padding: 0.2em 0.1em;
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}
.lang-switch__btn:hover { opacity: 1; }
.lang-switch__btn.is-active {
  opacity: 1;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.35em;
}
.lang-switch__sep { opacity: 0.6; }


/* ==========================================================================
   SECCIÓN 1 · HERO
   Para cambiar la foto: reemplaza site/assets/img/hero.webp (mismo nombre)
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(576 * var(--u));
  background: #0b0908 url('../assets/img/hero.webp') center 17% / cover no-repeat;
  color: var(--color-cream);
  text-align: center;
}

.hero__content { margin-top: calc(16 * var(--u)); }

.hero__title {
  font-size: calc(37 * var(--u));
  line-height: 1.1;
}
.hero__title em { font-style: italic; }

.hero__subtitle {
  margin-top: calc(4 * var(--u));
  font-size: calc(19 * var(--u));
  text-shadow: var(--text-shadow-soft);
}


/* ==========================================================================
   SECCIÓN 2 · INTRO + CIFRAS
   ========================================================================== */
.intro {
  background: var(--color-cream);
  text-align: center;
}

.intro__title {
  padding: calc(64 * var(--u)) calc(40 * var(--u)) calc(50 * var(--u));
  font-size: calc(44 * var(--u));
  line-height: 1.1;
  border-bottom: 1px solid rgba(50, 22, 37, 0.45);
}

/* Columna izquierda desde x=90 y derecha desde x=657, como en el diseño */
.intro__stats {
  display: grid;
  grid-template-columns: calc(567 * var(--u)) 1fr;
  align-items: center;
  min-height: calc(82 * var(--u));
  padding: calc(10 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u)) calc(90 * var(--u));
  text-align: left;
}

.intro__stat {
  font-size: calc(17.5 * var(--u));
  line-height: 1.05;
}


/* ==========================================================================
   SECCIONES "SPLIT" (texto a un lado, foto al otro): 3, 5 y 9
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: var(--split-text, 51.6%) 1fr;
}

.split__media { position: relative; }

/* La foto llena su columna sin estirar la sección (la altura la marca el texto
   o el min-height de cada sección) */
.split__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ==========================================================================
   SECCIÓN 3 · IF YOU WANT TO BE TAKEN SERIOUSLY
   ========================================================================== */
.serious {
  --split-text: 51.6%;
  background: var(--color-plum);
  color: var(--color-cream);
  min-height: calc(644 * var(--u));
}

.serious__text {
  padding: calc(62 * var(--u)) calc(48 * var(--u)) calc(70 * var(--u)) calc(64 * var(--u));
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(14.8 * var(--u));
  line-height: 1.66;
  text-align: justify;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.serious__text p { width: 100%; margin-bottom: calc(24 * var(--u)); }
.serious__text strong { font-weight: 700; }

.serious__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: calc(16.8 * var(--u));
  line-height: 1.55;
  text-align: center;
  margin-bottom: calc(22 * var(--u));
}

.serious .btn {
  margin-top: calc(8 * var(--u));
  font-size: calc(16 * var(--u));
}

.serious .split__media img { object-position: 30% center; }


/* ==========================================================================
   SECCIÓN 4 · WHY "STYLE THERAPY?"
   ========================================================================== */
.why {
  position: relative;
  overflow: hidden; /* recorta la parte superior de la "g" */
  background: var(--color-cream);
  padding: calc(60 * var(--u)) calc(24 * var(--u)) calc(150 * var(--u)) calc(380 * var(--u));
}

/* La "g" decorativa: sobresale un poco hacia la sección anterior, como en el diseño */
.why__letter {
  position: absolute;
  left: calc(-6 * var(--u));
  top: calc(-22 * var(--u));
  width: calc(342 * var(--u));
  height: auto;
  pointer-events: none;
  user-select: none;
}

.why__text {
  position: relative;
  font-size: calc(18.6 * var(--u));
  line-height: 1.47;
}

.why__title {
  font-size: calc(36 * var(--u));
  line-height: 1.1;
  margin-bottom: calc(10 * var(--u));
}
.why__title em { font-style: italic; }

.why__goal-title {
  margin-top: calc(26 * var(--u));
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.why__list {
  padding-left: calc(34 * var(--u));
}


/* ==========================================================================
   SECCIÓN 5 · CORPORATE BADDIES
   ========================================================================== */
.baddies {
  --split-text: 57.5%;
  background: var(--color-cream);
  min-height: calc(608 * var(--u));
}

.baddies__text {
  padding: calc(88 * var(--u)) calc(44 * var(--u)) calc(60 * var(--u)) calc(61 * var(--u));
  font-size: calc(18.6 * var(--u));
  line-height: 1.27;
}

.baddies__title {
  font-size: calc(38 * var(--u));
  line-height: 1.02;
  margin-bottom: calc(22 * var(--u));
}

.baddies__text p { margin-bottom: calc(24 * var(--u)); text-align: justify; }
.baddies__text p:last-of-type { text-align: left; }
.baddies .btn { margin-top: calc(14 * var(--u)); font-size: calc(18.5 * var(--u)); padding: calc(11 * var(--u)) calc(16 * var(--u)); }

/* Papel rasgado con la frase manuscrita, encima de la foto */
/* Papel rasgado: una TIRA rasgada por arriba y por abajo (torn-paper-strip.webp,
   generada por scripts/optimize-assets.mjs a partir del papel del PDF).
   Va ENCIMA de la foto: su borde rasgado inferior se apoya sobre el borde
   superior de la imagen. Para subirla o bajarla, cambia "top". */
.paper-note {
  position: absolute;
  z-index: 2;
  left: calc(-4 * var(--u));
  top: calc(-90 * var(--u));
  width: calc(470 * var(--u));
  aspect-ratio: 1191 / 291;
  background: url('../assets/img/torn-paper-strip.webp') center / contain no-repeat;
  transform: rotate(1.5deg);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(44 * var(--u)); /* centra la frase entre dos líneas azules del papel */
  pointer-events: none;
}

.paper-note__text {
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: calc(17 * var(--u));
  color: #1d1418;
  /* sin giro propio: hereda el del papel y queda paralela a sus líneas */
}

/* La sección va por encima de la anterior para que el papel pueda sobresalir hacia arriba */
.baddies {
  position: relative;
  z-index: 1;
  margin-top: -1px;   /* evita una línea fina entre las dos secciones crema */
  overflow-x: clip;   /* el papel sobresale por la derecha: se recorta sin crear scroll */
}


/* ==========================================================================
   SECCIÓN 6 · TESTIMONIOS
   (el título del slider también vive aquí porque comparte el fondo)
   ========================================================================== */
.clients {
  background: var(--color-plum);
  color: var(--color-cream);
  padding: calc(40 * var(--u)) calc(56 * var(--u)) calc(30 * var(--u));
}

.section-title {
  font-size: calc(36 * var(--u));
  line-height: 1.1;
  padding-left: calc(46 * var(--u));
}

.clients__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(48 * var(--u));
  margin-top: calc(28 * var(--u));
}

.testimonial {
  background: var(--color-cream);
  color: var(--color-plum);
  border-radius: calc(46 * var(--u));
  padding: calc(20 * var(--u)) calc(18 * var(--u)) calc(30 * var(--u));
  min-height: calc(292 * var(--u));
  font-size: calc(15.1 * var(--u));
  line-height: 1.22;
  text-align: justify;
}
.testimonial footer { margin-top: calc(20 * var(--u)); }
.testimonial em { font-style: italic; }

.looks__title {
  margin-top: calc(64 * var(--u));
  padding-left: calc(28 * var(--u));
}


/* ==========================================================================
   SECCIÓN 7 · SLIDER DE LOOKS
   --slides-visible: cuántas fotos se ven a la vez (3 en escritorio)
   La velocidad de la animación se cambia en "transition" de .slider__track
   ========================================================================== */
.looks {
  --slides-visible: 3;
  background: var(--color-plum);
}

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

.slider__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}

/* Altura de las fotos: la proporción del diseño (341 × 760), pero nunca más
   alta que la ventana del navegador (--slider-max-height), para que las fotos
   se vean enteras en pantallas anchas o con zoom. Si la foto es más ancha que
   ese hueco, se recorta un poco por los lados (object-fit: cover). */
.looks {
  --slide-ratio: calc(760 / 341);
  --slider-max-height: 85vh;
}

.slider__slide {
  flex: 0 0 calc(100% / var(--slides-visible));
  height: min(calc(100vw / var(--slides-visible) * var(--slide-ratio)), var(--slider-max-height));
  padding: 0 1px;
}

.slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #2a1220;
}

/* Flechas izquierda / derecha.
   Semitransparentes por defecto para no tapar las fotos; opacas al pasar el
   cursor o al enfocarlas con el teclado. Para cambiar la transparencia,
   edita el valor de "opacity" (0 = invisible, 1 = totalmente visible). */
.slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(40px, calc(48 * var(--u)));
  height: max(40px, calc(48 * var(--u)));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-plum);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* se distingue también sobre fotos claras */
  opacity: 0.45;
  transform: translateY(-50%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.slider__arrow:hover,
.slider__arrow:focus-visible {
  opacity: 1;
  transform: translateY(-50%) scale(1.06);
}
.slider__arrow--prev { left: max(12px, calc(18 * var(--u))); }
.slider__arrow--next { right: max(12px, calc(18 * var(--u))); }

.slider__arrow svg {
  width: 45%;
  height: 45%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   SECCIÓN 8 · EVENTOS
   ========================================================================== */
.events {
  background: var(--color-plum);
  color: var(--color-gold);
  text-align: center;
}

.events__experience {
  padding: calc(44 * var(--u)) calc(20 * var(--u)) calc(36 * var(--u));
  font-size: calc(37 * var(--u));
  line-height: 1.1;
}
.events__experience em { font-style: italic; }

.events__video {
  position: relative;
  height: calc(612 * var(--u));
  overflow: hidden;
  background: #000;
}

.events__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.events__title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(46 * var(--u));
  color: var(--color-gold);
}

.events__upcoming {
  padding: calc(46 * var(--u)) calc(20 * var(--u)) calc(50 * var(--u));
  border-bottom: 1px solid rgba(227, 226, 220, 0.35);
}

.events__upcoming-title {
  font-size: calc(28.5 * var(--u));
  line-height: 1.1;
}

.events__upcoming-text {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  font-size: calc(24 * var(--u));
  line-height: 1.1;
}


/* ==========================================================================
   SECCIÓN 9 · WORKSHOPS
   ========================================================================== */
.workshop {
  --split-text: 65.2%;
  background: var(--color-plum);
  color: var(--color-cream);
  min-height: calc(451 * var(--u));
}

.workshop__text {
  padding: calc(66 * var(--u)) calc(30 * var(--u)) calc(60 * var(--u)) calc(42 * var(--u));
  font-size: calc(19 * var(--u));
  line-height: 1.4;
}

.workshop__title {
  font-size: calc(46 * var(--u));
  line-height: 1.05;
  margin-bottom: calc(14 * var(--u));
}

/* Encuadre de la foto igual que en el diseño (muestra la parte de abajo) */
.workshop__media > img { object-position: center 80%; }

.workshop .btn {
  margin-top: calc(40 * var(--u));
  font-size: calc(19.5 * var(--u));
}


/* ==========================================================================
   SECCIÓN 10 · COMUNIDAD
   Para cambiar la foto: reemplaza site/assets/img/join-community.webp
   ========================================================================== */
.community {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(286 * var(--u));
  min-height: calc(669 * var(--u));
  /* La capa clara semitransparente imita el velo de la foto en el diseño */
  background:
    linear-gradient(rgba(227, 226, 220, 0.18), rgba(227, 226, 220, 0.18)),
    url('../assets/img/join-community.webp') center 40% / cover no-repeat;
}



/* Globo de diálogo (hecho con CSS)
   Forma de "píldora" (rectángulo con extremos muy redondeados) inclinada,
   con la colita abajo a la izquierda, como en el diseño. */
.speech-bubble {
  position: absolute;
  top: calc(20 * var(--u));
  right: calc(20 * var(--u));
  width: calc(336 * var(--u));
  padding: calc(15 * var(--u)) calc(22 * var(--u)) calc(17 * var(--u)) calc(30 * var(--u));
  background: var(--color-cream);
  color: var(--color-plum);
  border-radius: calc(52 * var(--u)) / calc(48 * var(--u));
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(16.2 * var(--u));
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: left;
  transform: rotate(9deg);
  transform-origin: left center;
}

/* "Colita" del globo: triángulo que sale del borde inferior izquierdo */
.speech-bubble::after {
  content: '';
  position: absolute;
  left: calc(22 * var(--u));
  bottom: calc(-24 * var(--u));
  width: calc(42 * var(--u));
  height: calc(28 * var(--u));
  background: var(--color-cream);
  clip-path: polygon(22% 0, 100% 0, 0 100%);
}


/* ==========================================================================
   SECCIÓN 11 · PREGUNTAS
   ========================================================================== */
.questions {
  background: var(--color-gold);
  color: var(--color-brown);
  padding: calc(52 * var(--u)) calc(40 * var(--u)) calc(44 * var(--u)) calc(62 * var(--u));
  font-size: calc(19 * var(--u));
  line-height: 1.3;
}

.questions__title {
  color: var(--color-cream);
  font-size: calc(37 * var(--u));
  line-height: 1.1;
}

.questions .btn {
  margin: calc(16 * var(--u)) 0 calc(26 * var(--u));
  font-size: calc(26 * var(--u));
  padding: calc(9 * var(--u)) calc(10 * var(--u));
}


/* ==========================================================================
   SECCIÓN 12 · FOOTER
   ========================================================================== */
.site-footer {
  background: var(--color-plum);
  color: var(--color-cream);
  text-align: center;
  padding: calc(46 * var(--u)) calc(24 * var(--u)) calc(28 * var(--u));
}

.site-footer__title {
  font-size: calc(27.6 * var(--u));
  line-height: 1.1;
}

.social-links {
  margin-top: calc(20 * var(--u));
  font-size: calc(27.8 * var(--u));
  line-height: 1.1;
}
.social-links a { text-decoration: none; }
.social-links a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* Fila: botón "volver arriba" a la izquierda y logo centrado */
.site-footer__bottom {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: calc(34 * var(--u));
}

.site-footer__logo {
  width: calc(253 * var(--u));
  height: auto;
}

.back-to-top {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: max(12px, calc(12 * var(--u)));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.8;
}
.back-to-top:hover { opacity: 1; }
.back-to-top__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 1.1em;
}

/* Línea de links legales (compliance) */
.legal-links {
  margin-top: calc(26 * var(--u));
  font-family: var(--font-body);
  font-weight: 400;
  font-size: max(11px, calc(11 * var(--u)));
  line-height: 1.8;
  opacity: 0.75;
}
.legal-links a { text-decoration: none; margin: 0 0.3em; }
.legal-links a:hover { text-decoration: underline; }

.copyright {
  margin-top: 0.4em;
  font-weight: 400;
  font-size: max(10px, calc(10 * var(--u)));
  opacity: 0.55;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ---------- Tablet y móvil (menos de 820 px) ----------
   Las columnas se apilan (texto arriba, foto abajo) y se usan tamaños fijos
   pensados para leer cómodamente en el teléfono. */
@media (max-width: 819px) {
  :root { --u: 1px; }

  .site-header { padding-top: 18px; }
  .site-header__logo img { width: 150px; }
  .lang-switch { top: 24px; right: 16px; font-size: 13px; }

  /* 1 · Hero */
  .hero { height: 82vh; min-height: 480px; padding: 0 20px; background-position: 45% center; }
  .hero__title { font-size: 28px; }
  .hero__subtitle { font-size: 14px; }

  /* 2 · Intro */
  .intro__title { font-size: 28px; line-height: 1.05; padding: 44px 20px 36px; }
  .intro__title br { display: none; }
  .intro__stats { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; text-align: center; }
  .intro__stat { font-size: 15px; }

  /* Secciones con columnas → una sola columna */
  .split { grid-template-columns: 1fr; }
  .split__media > img { position: static; height: auto; aspect-ratio: 4 / 5; }

  /* 3 · Taken seriously */
  .serious__text { padding: 48px 22px 40px; font-size: 15px; line-height: 1.6; }
  .serious__title { font-size: 17px; }
  .serious .btn { font-size: 16px; padding: 8px 14px; }

  /* 4 · Why */
  .why { padding: 56px 22px 240px; }
  .why__letter { width: 150px; top: auto; bottom: -30px; left: -10px; opacity: 0.9; }
  .why__text { font-size: 16px; }
  .why__title { font-size: 28px; }
  .why__list { padding-left: 22px; }

  /* 5 · Corporate baddies */
  .baddies__text { padding: 48px 22px 44px; font-size: 16px; line-height: 1.35; }
  .baddies__title { font-size: 28px; }
  .baddies .btn { font-size: 16px; padding: 10px 16px; }
  .baddies__media { margin-top: 70px; } /* deja sitio al papel rasgado */
  .paper-note { width: 330px; max-width: 92vw; top: -64px; left: auto; right: -10px; padding-top: 30px; }
  .paper-note__text { font-size: 15px; padding-left: 40px; }

  /* 6 · Testimonios */
  .clients { padding: 44px 18px 30px; }
  .section-title { font-size: 26px; padding-left: 0; }
  .clients__grid { grid-template-columns: 1fr; gap: 20px; }
  .testimonial { border-radius: 32px; min-height: 0; padding: 22px 22px 26px; font-size: 14.5px; line-height: 1.45; text-align: left; }
  .looks__title { margin-top: 48px; padding-left: 0; }

  /* 7 · Slider: 2 fotos visibles en el teléfono */
  .looks { --slides-visible: 2; }
  .looks { --slide-ratio: 1.8; }

  /* 8 · Eventos */
  .events__experience { font-size: 22px; padding: 36px 18px 30px; }
  .events__video { height: 62vw; min-height: 260px; }
  .events__title { font-size: 30px; }
  .events__upcoming { padding: 34px 18px 38px; }
  .events__upcoming-title { font-size: 18px; }
  .events__upcoming-text { font-size: 16px; }

  /* 9 · Workshops */
  .workshop__text { padding: 46px 22px 44px; font-size: 15.5px; }
  .workshop__text br { display: none; }
  .workshop__title { font-size: 30px; }
  .workshop .btn { margin-top: 26px; font-size: 16px; padding: 10px 14px; }

  /* 10 · Comunidad */
  .community { min-height: 520px; background-position: 40% center; padding: 150px 16px 60px; align-items: flex-end; }
  .community .btn--outline { margin-top: 0; font-size: 22px; padding: 8px 14px; }
  .speech-bubble { width: 262px; top: 22px; right: 18px; font-size: 13px; padding: 12px 16px 14px 24px; border-radius: 40px / 38px; }
  .speech-bubble br { display: none; } /* en móvil el texto se reparte solo */
  .speech-bubble::after { left: 18px; width: 32px; height: 22px; bottom: -19px; }

  /* 11 · Preguntas */
  .questions { padding: 44px 22px 40px; font-size: 15.5px; }
  .questions__title { font-size: 30px; }
  .questions .btn { font-size: 17px; padding: 10px 14px; }
  .questions br { display: none; }

  /* 12 · Footer */
  .site-footer { padding: 44px 18px 26px; }
  .site-footer__title { font-size: 22px; }
  .social-links { font-size: 19px; }
  .site-footer__bottom { margin-top: 32px; }
  .site-footer__logo { width: 190px; }
  /* En el móvil sólo se ve la flecha (el texto sigue disponible para lectores de pantalla) */
  .back-to-top { font-size: 12px; }
  .back-to-top > span:last-child {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .legal-links { font-size: 12px; margin-top: 22px; }
  .copyright { font-size: 11px; }
}

/* ---------- Movimiento reducido (preferencia del sistema) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slider__track { transition: none; }
}