@font-face { font-family: "Bowlby One"; src: url("fonts/bowlby-one.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("fonts/familjen-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("fonts/familjen-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("fonts/familjen-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --mostaza: #ffc400;
  --negro: #000;
  --blanco: #fff;
  --gris: #f1f0ee;
  --display: "Bowlby One", "Arial Black", sans-serif;
  --texto: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
  --ancho: 76rem;
  --lateral: clamp(1rem, 4vw, 3rem);
}


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

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

body {
  margin: 0;
  background: var(--blanco);
  color: var(--negro);
  font-family: var(--texto);
  font-size: 1.125rem;
  line-height: 1.5;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1;
}

h2 { font-size: clamp(2.2rem, 6vw, 4.5rem); }
h3 { font-family: var(--texto); font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 700; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--negro); outline-offset: 3px; box-shadow: 0 0 0 3px var(--blanco); }

.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: .6rem 1rem; background: var(--blanco); }
.saltar:focus { top: 1rem; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--lateral); }

/* Cabecera */
.cabecera { position: relative; z-index: 5; background: var(--mostaza); color: var(--negro); }
.cabecera--negra { background: var(--negro); color: var(--blanco); }
.cabecera--blanca { background: var(--blanco); }

.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }

.logo { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--display); font-size: 1.25rem; text-decoration: none; white-space: nowrap; }
.logo img { display: block; }
.logo__texto { display: grid; line-height: 1.05; }
.logo__texto small { font-family: var(--texto); font-size: .8rem; font-weight: 700; letter-spacing: .01em; }

.menu { display: flex; align-items: center; gap: 1.75rem; font-weight: 700; }
.menu a { text-decoration: none; padding-block: .3rem; border-bottom: 3px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { border-bottom-color: currentColor; }

.menu-boton { display: none; padding: .4rem .8rem; border: 2px solid currentColor; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }

.menu { order: 2; margin-left: auto; }
.boton-cabecera { order: 3; padding: .55rem 1.1rem; background: var(--negro); color: var(--blanco); font-weight: 700; text-decoration: none; white-space: nowrap; }
.boton-cabecera:hover { background: var(--blanco); color: var(--negro); box-shadow: inset 0 0 0 2px var(--negro); }
.cabecera--negra .boton-cabecera { background: var(--mostaza); color: var(--negro); }

/* Portada */
.portada { background: var(--mostaza); overflow: hidden; }

.portada__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
}

.portada h1 { font-size: clamp(2.8rem, 6vw, 5rem); line-height: .98; letter-spacing: -.01em; }

.portada__texto { max-width: 34ch; margin-top: 1.25rem; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.3; font-weight: 500; }

.elecciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.boton {
  display: inline-block;
  padding: .9rem 1.5rem;
  border: 3px solid var(--negro);
  background: var(--negro);
  color: var(--blanco);
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease;
}
.boton:hover { transform: translate(-3px, -3px) rotate(-1deg); }
.boton--blanco { background: var(--blanco); color: var(--negro); }
.boton--mostaza { background: var(--mostaza); color: var(--negro); border-color: var(--mostaza); }

/* Monsieur */
.monsieur { position: relative; width: 100%; max-width: 30rem; margin-inline: auto; }
.monsieur svg { display: block; width: 100%; height: auto; overflow: visible; }

.monsieur__pupila { transition: transform .08s linear; }

.monsieur__parpado { transform-box: fill-box; transform-origin: top; transform: scaleY(0); animation: parpadeo 6s infinite; }

@keyframes parpadeo {
  0%, 94%, 100% { transform: scaleY(0); }
  97% { transform: scaleY(1); }
}

.monsieur__bigote { transform-box: fill-box; transform-origin: center top; }
.monsieur.habla .monsieur__bigote { animation: bigote .45s ease; }

@keyframes bigote {
  25% { transform: rotate(-4deg); }
  75% { transform: rotate(4deg); }
}

.bocadillo {
  position: absolute;
  right: -6%;
  top: -5%;
  max-width: 13rem;
  padding: .6rem .9rem;
  border: 3px solid var(--negro);
  background: var(--blanco);
  color: var(--negro);
  font: inherit;
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
  cursor: pointer;
  transform: rotate(3deg);
}

/* Bloques de elección */
.puertas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.puerta { display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(2.5rem, 6vw, 5rem) var(--lateral); text-decoration: none; }
.puerta--blanca { background: var(--blanco); }
.puerta--negra { background: var(--negro); color: var(--blanco); }
.puerta ul { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; font-size: 1.3rem; font-weight: 700; }
.puerta .boton { align-self: flex-start; margin-top: auto; }
.puerta--negra .boton { background: var(--mostaza); border-color: var(--mostaza); color: var(--negro); }

/* Secciones */
.seccion { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.seccion--mostaza { background: var(--mostaza); }
.seccion--negro { background: var(--negro); color: var(--blanco); }
.seccion--gris { background: var(--gris); }

.pierro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.pierro p { max-width: 36rem; font-size: 1.25rem; }
.pierro p + p { margin-top: 1rem; }

.retrato { position: relative; max-width: 22rem; margin: 2.5rem 0 0; transform: rotate(-2deg); }
.retrato img { display: block; width: 100%; height: auto; border: 8px solid var(--blanco); filter: grayscale(1) contrast(1.1); }

.llamada { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.llamada h2 { max-width: 16ch; }

/* Páginas interiores */
.pagina-titulo { padding-block: clamp(2rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem); }
.pagina-titulo h1 { max-width: 13ch; font-size: clamp(2.8rem, 7vw, 6rem); line-height: .95; }
.pagina-titulo p { max-width: 38ch; margin-top: 1.25rem; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.3; font-weight: 500; }
.pagina-titulo__rejilla { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.pagina-titulo .monsieur { max-width: 22rem; }
.pagina-titulo--mostaza { background: var(--mostaza); }
.pagina-titulo--negro { background: var(--negro); color: var(--blanco); }
.pagina-titulo--blanco { background: var(--blanco); }
.pagina-titulo--negro h1 { color: var(--mostaza); }

/* Servicios */
.servicios { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.servicio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 3rem;
  align-items: center;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 3px solid currentColor;
}

.servicio p { max-width: 50ch; margin-top: .6rem; }

.precio {
  display: grid;
  place-content: center;
  width: 9rem;
  height: 9rem;
  padding: 1rem;
  background: var(--mostaza);
  color: var(--negro);
  text-align: center;
  line-height: 1.05;
  transform: rotate(-8deg);
  clip-path: polygon(50% 0, 61% 11%, 75% 7%, 79% 21%, 93% 25%, 89% 39%, 100% 50%, 89% 61%, 93% 75%, 79% 79%, 75% 93%, 61% 89%, 50% 100%, 39% 89%, 25% 93%, 21% 79%, 7% 75%, 11% 61%, 0 50%, 11% 39%, 7% 25%, 21% 21%, 25% 7%, 39% 11%);
}
.precio strong { font-family: var(--display); font-size: 1.35rem; font-weight: 400; }
.precio small { font-size: .85rem; font-weight: 700; }

.nota { max-width: 62ch; margin-top: 2rem; font-size: 1rem; }

/* Widgets */
.selector { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }

.selector button {
  padding: .7rem 1.1rem;
  border: 3px solid currentColor;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.selector button[aria-pressed="true"] { background: var(--negro); border-color: var(--negro); color: var(--blanco); }

.seccion--negro .selector button[aria-pressed="true"] { background: var(--mostaza); border-color: var(--mostaza); color: var(--negro); }

.respuesta { max-width: 44rem; margin-top: 1.75rem; }
.respuesta strong { display: block; font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 400; line-height: 1.05; }
.respuesta p { margin-top: .75rem; font-size: 1.2rem; }

.cv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.cv__caja { padding: 1.5rem; background: var(--blanco); color: var(--negro); }
.cv__caja--bien { background: var(--negro); color: var(--blanco); }
.cv__caja h3 { margin-bottom: .75rem; font-size: 1.3rem; }
.cv__caja p { font-size: 1.3rem; line-height: 1.3; font-weight: 700; }

/* Consejos */
.selector--sin-margen { margin-top: 0; }
.consejos { margin: 2rem 0 0; padding: 0; list-style: none; }

.consejo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem clamp(2rem, 5vw, 4rem);
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 3px solid var(--negro);
  scroll-margin-top: 1rem;
}
.consejo[hidden] { display: none; }
.consejo h2 { margin-top: .4rem; font-size: clamp(1.8rem, 4vw, 2.9rem); }
.consejo__para { font-weight: 700; }
.consejo__frase { margin-top: 1rem; font-weight: 700; }

.destacados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; padding: 0; list-style: none; }
.destacados a { display: flex; flex-direction: column; gap: .75rem; height: 100%; padding: 1.5rem; background: var(--mostaza); text-decoration: none; }
.destacados a:hover { background: var(--negro); color: var(--blanco); }
.destacados span { font-weight: 700; }
.destacados strong { font-family: var(--display); font-size: 1.6rem; font-weight: 400; line-height: 1.1; }

/* Test */
.test__intro { margin-top: .75rem; font-size: 1.25rem; }
.test { max-width: 46rem; min-height: 15rem; margin-top: 2rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--blanco); border: 3px solid var(--negro); }
.test__paso { font-weight: 700; }
.test__pregunta { min-height: 3.2em; margin-top: .75rem; font-family: var(--display); font-size: clamp(1.5rem, 3.5vw, 2.2rem); line-height: 1.1; }
.test__botones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.test__resultado:not([hidden]) { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.test__cara svg { display: block; width: 100%; height: auto; }
.test__nota { font-weight: 700; }
.test__titulo { margin-top: .35rem; font-family: var(--display); font-size: clamp(1.5rem, 3.5vw, 2.2rem); line-height: 1.1; }
.test__texto { margin-top: .6rem; }

/* Perchero de precios */
.titular { max-width: 42rem; }
.titular p { margin-top: .9rem; font-size: 1.25rem; }

.perchero {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .75rem;
  margin: 3rem 0 0;
  padding: 0;
  border-top: 12px solid var(--negro);
  list-style: none;
}
.perchero--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.perchero li { position: relative; padding-top: 3.5rem; transform-origin: 50% 0; transition: transform .25s ease; }
.perchero li:nth-child(even) { padding-top: 5.25rem; }
.perchero li:hover { transform: rotate(-3deg); }
.perchero li::before { content: ""; position: absolute; left: calc(50% - 1.5px); top: 0; width: 3px; height: 5.75rem; background: var(--negro); }
.perchero li:nth-child(odd)::before { height: 4rem; }

.etiqueta-colgante {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .35rem;
  min-height: 12.5rem;
  padding: 3rem 1rem 1.5rem;
  background: var(--mostaza);
  text-align: center;
  clip-path: polygon(50% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
}
.etiqueta-colgante::before {
  content: "";
  position: absolute;
  left: calc(50% - .55rem);
  top: 1rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--blanco);
  box-shadow: inset 0 0 0 3px var(--negro);
}
.etiqueta-colgante span { font-weight: 700; line-height: 1.2; }
.etiqueta-colgante strong { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 400; line-height: 1; }
.etiqueta-colgante small { font-size: .95rem; line-height: 1.2; }

.incluido { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2rem; border-top: 3px solid var(--negro); }
.incluido h3 { margin-bottom: .6rem; }
.incluido p + h3 { margin-top: 1.5rem; }
.incluido ul { display: grid; gap: .35rem; margin: 0; padding-left: 1.1rem; }

.rpo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.rpo h2 { color: var(--mostaza); }
.rpo p { max-width: 38rem; margin-top: 1.25rem; font-size: 1.25rem; }
.rpo__precio { padding: 2rem; background: var(--mostaza); color: var(--negro); text-align: center; transform: rotate(2deg); }
.rpo__precio strong { display: block; font-family: var(--display); font-size: clamp(3rem, 7vw, 4.75rem); font-weight: 400; line-height: 1; }
.rpo__precio small { display: block; font-weight: 700; }
.rpo__precio span { display: block; margin-top: .5rem; font-weight: 700; }

.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); margin: 2.5rem 0 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos li { counter-increment: paso; }
.pasos li::before { content: counter(paso); display: block; margin-bottom: .75rem; font-family: var(--display); font-size: 4rem; line-height: 1; color: var(--mostaza); -webkit-text-stroke: 2px var(--negro); }
.pasos p { margin-top: .5rem; }

.faq { max-width: 50rem; margin-top: 2rem; }
.faq details { border-top: 3px solid var(--negro); }
.faq details:last-child { border-bottom: 3px solid var(--negro); }
.faq summary { padding-block: 1.1rem; font-family: var(--display); font-size: clamp(1.2rem, 2.5vw, 1.5rem); line-height: 1.15; cursor: pointer; }
.faq p { max-width: 42rem; padding-bottom: 1.25rem; }

.titulo-mostaza { color: var(--mostaza); }
.razones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2.5rem; }
.razones h3 { margin-bottom: .6rem; }

.portada .monsieur__bigote path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazo .55s ease-out forwards; }
.portada .monsieur__bigote path:nth-child(1) { animation-delay: .15s; }
.portada .monsieur__bigote path:nth-child(2), .portada .monsieur__bigote path:nth-child(3) { animation-delay: .55s; }
.portada .monsieur__bigote path:nth-child(4) { animation-delay: 1s; }
@keyframes trazo { to { stroke-dashoffset: 0; } }

/* Mission */
.mision { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.mision__texto p { max-width: 38rem; margin-top: 1.1rem; font-size: 1.25rem; }
.mision__animo { font-weight: 700; }
.mision h3 { margin-top: .5rem; }
.compromisos { display: grid; gap: 0; margin: 1rem 0 0; padding: 0; list-style: none; }
.compromisos li { padding-block: .9rem; border-top: 3px solid var(--negro); }
.compromisos strong { display: block; font-size: 1.15rem; }

/* Preuves */
.ejemplo { display: inline-block; margin-top: .75rem; padding: .1rem .5rem; background: var(--blanco); color: var(--negro); border: 2px dashed var(--negro); font-size: .9rem; font-weight: 700; }
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.cifras strong { display: block; font-family: var(--display); font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 400; line-height: 1; }
.cifras span { font-size: 1.15rem; font-weight: 700; }
.testimonios { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); margin-top: 2rem; }
.testimonio { margin: 0; padding-top: 1rem; border-top: 3px solid currentColor; }
.testimonio blockquote { margin: 0; font-size: 1.3rem; font-weight: 500; line-height: 1.3; }
.testimonio figcaption { margin-top: .85rem; font-weight: 700; }
.retrato { max-width: 26rem; }

/* Formulario */
.formulario { display: grid; gap: 1.25rem; max-width: 34rem; }
.campo { display: grid; gap: .35rem; }
.campo label { font-weight: 700; }
.campo input, .campo select, .campo textarea { width: 100%; padding: .8rem .9rem; border: 3px solid var(--negro); border-radius: 0; background: var(--blanco); color: var(--negro); font: inherit; }
.consentimiento { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; font-size: 1rem; }
.consentimiento input { width: 1.15rem; height: 1.15rem; margin-top: .3rem; }
.trampa { position: absolute; left: -9999px; }
.aviso-formulario { padding: .85rem 1rem; background: var(--gris); font-weight: 700; }
.aviso-formulario:empty { display: none; }

/* Legal */
.lectura { max-width: 44rem; }
.legal h1 { font-size: clamp(2.2rem, 6vw, 3.5rem); }
.legal h2 { margin-top: 2.5rem; font-size: 1.7rem; }
.legal p { margin-top: .75rem; }
.pendiente { background: var(--gris); padding-inline: .25em; font-weight: 700; }

/* Pie */
.pie { padding-block: 3rem 2rem; background: var(--negro); color: var(--blanco); }
.pie__fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.pie__marca { color: var(--mostaza); font-family: var(--display); font-size: clamp(2rem, 5vw, 3rem); line-height: 1; }
.pie__lema { margin-top: .5rem; }
.pie ul { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.pie__legal { margin-top: 2.5rem; font-size: .95rem; }

@media (max-width: 760px) {
  body { padding-bottom: 4.5rem; }
  .menu-boton { display: block; margin-left: auto; }
  .boton-cabecera, .cabecera--negra .boton-cabecera { position: fixed; left: 1rem; right: 1rem; bottom: .75rem; z-index: 15; padding: .85rem; background: var(--negro); color: var(--blanco); text-align: center; box-shadow: 0 0 0 2px var(--mostaza); }
  body:has(.portada) .boton-cabecera { display: none; }
  .cifras, .mision { grid-template-columns: minmax(0, 1fr); }
  .perchero, .perchero--4 { grid-template-columns: minmax(0, 1fr); gap: .6rem; border-top: 0; margin-top: 1.75rem; }
  .perchero li, .perchero li:nth-child(even) { padding: 0; border: 0; }
  .perchero li::before { display: none; }
  .perchero li:hover { transform: none; }
  .etiqueta-colgante { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 1rem; align-items: center; min-height: 0; padding: .85rem 1rem .85rem 2.75rem; text-align: left; clip-path: polygon(1.5rem 0, 100% 0, 100% 100%, 1.5rem 100%, 0 50%); }
  .etiqueta-colgante::before { left: 1.15rem; top: calc(50% - .45rem); width: .9rem; height: .9rem; }
  .etiqueta-colgante strong { grid-column: 2; grid-row: 1 / span 2; font-size: 1.6rem; }
  .etiqueta-colgante span, .etiqueta-colgante small { grid-column: 1; }
  .menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 4.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    padding: .75rem var(--lateral) 1.5rem;
    background: inherit;
  }
  .cabecera .menu { background: var(--negro); color: var(--blanco); }
  .menu.abierto { display: flex; }

  .portada__rejilla, .pagina-titulo__rejilla, .pierro, .puertas, .cv { grid-template-columns: minmax(0, 1fr); }
  .monsieur, .pagina-titulo .monsieur { max-width: 13rem; order: -1; }
  .bocadillo { right: -4.25rem; top: -6%; max-width: 8rem; font-size: .9rem; }
  .elecciones .boton { flex: 1 1 100%; text-align: center; }

  .consejo, .destacados, .incluido, .rpo, .razones { grid-template-columns: minmax(0, 1fr); }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .test__resultado:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
  .test__cara { width: 7rem; }
  .servicio { grid-template-columns: minmax(0, 1fr); }
  .precio { justify-self: start; width: 8rem; height: 8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .monsieur__parpado, .monsieur.habla .monsieur__bigote { animation: none; }
  .monsieur__pupila, .boton, .perchero li { transition: none; }
  .perchero li:hover { transform: none; }
  .portada .monsieur__bigote path { animation: none; stroke-dashoffset: 0; }
  .boton:hover { transform: none; }
}