/* # LOS COLORES Y LAS LETRAS DE TODA LA WEB
   Cambia --neon y cambia todo: botones, titulos, el subrayado del menu y el
   resplandor del fondo. --tinta es el negro del fondo y --texto el de las
   letras. Los --bs-* del bloque de abajo son de Bootstrap*/
:root {
  --tinta: #06070d;
  --tinta2: #0c0e18;
  --panel: #101422;
  --linea: #1b2030;
  --texto: #e7ecf5;
  --tenue: #8b93a7;
  --neon: #58b6ff;
  --neon2: #8fe3ff;
  --acento: #58b6ff;
  --acento2: #8fe3ff;
  --ambiente: #58b6ff;
  --ambiente2: #8fe3ff;
  --muesca: 16px;
  --display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --cuerpo: "Zen Kaku Gothic New", "Segoe UI", system-ui, sans-serif;
  --dato: "M PLUS 1 Code", ui-monospace, "Cascadia Mono", monospace;
}

[data-bs-theme="dark"] {
  --bs-body-bg: var(--tinta);
  --bs-body-color: var(--texto);
  --bs-body-font-family: var(--cuerpo);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.7;
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: var(--tenue);
  --bs-tertiary-bg: var(--tinta2);
  --bs-border-color: var(--linea);
  --bs-border-color-translucent: var(--linea);
  --bs-border-radius: 4px;
  --bs-border-radius-sm: 3px;
  --bs-border-radius-lg: 6px;
  --bs-primary: var(--acento);
  --bs-primary-rgb: 88, 182, 255;
  --bs-link-color: var(--acento);
  --bs-link-hover-color: var(--acento2);
  --bs-heading-color: var(--texto);
  --bs-focus-ring-color: color-mix(in srgb, var(--acento) 45%, transparent);
  --bs-focus-ring-width: 2px;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  background-color: var(--tinta);
  background-image:
    radial-gradient(90rem 45rem at 78% -12%, color-mix(in srgb, var(--ambiente) 18%, transparent), transparent 62%),
    radial-gradient(70rem 40rem at -12% 108%, color-mix(in srgb, var(--ambiente2) 11%, transparent), transparent 60%);
  background-attachment: fixed;
  transition: background-image .6s ease;
  overflow-x: clip;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .18) 2px 3px);
  mix-blend-mode: multiply;
  opacity: .45;
}

img {
  max-width: 100%;
  height: auto;
}

/* # EL FONDO CON LOS ICONITOS
   La capa que flota detras de todo la de los iconos El color sale de --ambiente
   y esta es la que se encarga de eso exactamente, cambiar el "ambiente" los iconos
   cuando pasas el cursor ensiam y tambien lo que lo manda a la capa de atras */
.fondo {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--ambiente);
  transition: color .6s ease;
}

.fondo span {
  position: absolute;
  display: block;
  animation: flotar var(--dur, 20s) ease-in-out infinite;
  animation-delay: var(--retardo, 0s);
}

.fondo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.fondo path {
  fill: currentColor;
  fill-rule: evenodd;
}

@keyframes flotar {
  0%, 100% { transform: translate(-50%, -50%) rotate(var(--giro, 0deg)); }
  50%      { transform: translate(-50%, calc(-50% - 14px)) rotate(calc(var(--giro, 0deg) + 8deg)); }
}

/* # ESTO PONE EL CONTENIDO POR ENCIMA DEL FONDO
   Sin esto, la capa de iconitos se pone delante y deja de funcionar el clic
   en los modelos de la de la galeria, quitarla involucra que esta capa regrese arriba y pues me jodo la pagina
   porque no podre dar click en nada */
.barra,
main,
.pie {
  position: relative;
  z-index: 1;
}

/* # LAS LETRAS DE LOS TITULOS
no es mucho misterio, son los h1,h2 y eso que vimos en clase */
h1, h2, h3, h4, .titular {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.01em;
}

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

.saltar {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 2100;
  padding: .6rem 1rem;
  background: var(--acento);
  color: #04060c;
  font-family: var(--dato);
}

.saltar:focus {
  left: .5rem;
  top: .5rem;
}

/* # LAS ETIQUETAS PEQUENAS EN MAYUSCULAS
   Las de la portada y la de "5 fotos" dentro de la ficha, como dice el "titulo"
   es la que hace las mayusculas */
.rotulo {
  font-family: var(--dato);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 1.25rem;
}

/* # LAS OREJAS DE GATOOOOO!!
   es una estupides mia no sabia como mas decorar y como uso unity pense en hacer algo
   similar a la interfas de unity "si esas colinas raras son orejas de gato alguna queja?!. */
.rama-titulo {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.15rem);
  letter-spacing: -.01em;
  margin: 0 0 1.1rem;
}

.orejas {
  width: 1.6rem;
  height: auto;
  flex: none;
  color: var(--acento);
  filter: drop-shadow(0 0 .55rem color-mix(in srgb, var(--acento) 45%, transparent));
}

.orejas path {
  fill: currentColor;
}

.rama-cuerpo {
  border-left: 1px solid var(--linea);
  margin-left: .72rem;
  padding-left: clamp(1rem, 3vw, 2rem);
}

.rama-sub {
  color: var(--tenue);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  max-width: 58ch;
  margin: 0 0 2.5rem;
}

.dato {
  font-family: var(--dato);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tenue);
}

.jp {
  font-family: var(--cuerpo);
  font-weight: 400;
  color: var(--acento2);
  letter-spacing: .12em;
}

/* # LA NAVBAR
   esta es la barra que el profe podio la navbar? creoque que se escrie asi, asi lo traje de boostrap
   es la barra que me permite cambien entre atelier y el taller de avatares */
.barra {
  background: color-mix(in srgb, var(--tinta) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
  --bs-navbar-padding-y: .85rem;
  --bs-navbar-color: var(--tenue);
  --bs-navbar-hover-color: var(--texto);
  --bs-navbar-active-color: var(--texto);
  --bs-navbar-toggler-border-color: var(--linea);
  --bs-navbar-toggler-focus-width: 2px;
}

.marca {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .3em;
  color: var(--texto);
  display: flex;
  align-items: center;
  gap: .6rem;
}

.marca span {
  color: var(--acento);
  font-family: var(--dato);
  font-size: .95rem;
  letter-spacing: 0;
}

.barra .nav-link {
  font-family: var(--dato);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding-inline: 0;
  margin-inline: .9rem;
  position: relative;
}

.barra .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -.35rem;
  height: 2px;
  background: var(--acento);
  transition: right .3s ease;
}

.barra .nav-link:hover::after,
.barra .nav-link.active::after {
  right: 0;
}

/* # esta cosita chiquita es el espacio que hay entre las zonas dentro de la pagina
osea si miras lapagina, parece que respira un poquito, pues ese ese pequeño movimientoes a lo que me refiero */
.seccion {
  padding-block: clamp(3.5rem, 9vw, 7rem);
}

.portada {
  padding-top: clamp(7rem, 16vw, 11rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

/* # esta parte es la que se encarga del titulo principalñ de la pagina, del estilo!! no del contenido
ateleri neoneko a ese titulo me refiero */
.titular {
  font-size: clamp(3rem, 13vw, 8.5rem);
  line-height: .86;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin: 0;
}

.titular em {
  font-style: normal;
  display: block;
  color: var(--acento);
  text-shadow: 0 0 3rem color-mix(in srgb, var(--acento) 55%, transparent);
}

.entradilla {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--tenue);
  max-width: 58ch;
  margin-top: 1.75rem;
}

.cifra {
  font-family: var(--dato);
  font-size: clamp(2.6rem, 7vw, 4rem);
  color: var(--texto);
  line-height: 1;
}

/* # esta parte va para el abanico de fotos, esta bien asi, se pueden mover pero ojo porque probando se salian aveces de la pantalla
para telefono */
.abanico {
  position: relative;
  aspect-ratio: 1;
  max-width: 28rem;
  margin-inline: auto;
}

.abanico img {
  position: absolute;
  width: 62%;
  border: 1px solid var(--linea);
  clip-path: polygon(0 0, calc(100% - var(--muesca)) 0, 100% var(--muesca), 100% 100%, var(--muesca) 100%, 0 calc(100% - var(--muesca)));
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .55);
}

.abanico img:nth-child(1) {
  left: 4%;
  top: 14%;
  width: 58%;
  rotate: -7deg;
  filter: saturate(.75) brightness(.72);
}

.abanico img:nth-child(2) {
  right: 4%;
  top: 6%;
  width: 58%;
  rotate: 6deg;
  filter: saturate(.8) brightness(.8);
}

.abanico img:nth-child(3) {
  left: 19%;
  bottom: 0;
  width: 66%;
  rotate: -1deg;
  outline: 1px solid color-mix(in srgb, var(--acento) 55%, transparent);
  outline-offset: -1px;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* esta de aqui corta el carrucel, la ezqinas que faltan?, son la funcion de  100%-28px */
.marco {
  border: 1px solid var(--linea);
  background: var(--tinta2);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
  overflow: hidden;
}

/* # EL TEXTO QUE VA AL LADO DE LA FOTO EN EL CARRUSEL
   En Bootstrap el texto va ENCIMA de la foto; aqui lo saque al lado. */
.pliego {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-left: 1px solid var(--linea);
}

.pliego h3 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--acento);
}

.pliego-texto {
  color: var(--tenue);
  margin: 0;
  max-width: 42ch;
}

@media (max-width: 991.98px) {
  .pliego {
    border-left: 0;
    border-top: 1px solid var(--linea);
  }
}

/* esto modifica las rayas que indican en que imagen estas del carrucel, boostrap tenia unos puntos pero me parecian mejor las rayitas */
.carousel-indicators {
  margin-bottom: 0;
  gap: .5rem;
  justify-content: flex-end;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  bottom: 1.5rem;
}

.carousel-indicators [data-bs-target] {
  width: 2.75rem;
  height: 3px;
  border: 0;
  margin: 0;
  opacity: 1;
  background-color: var(--linea);
  transition: background-color .3s ease;
}

.carousel-indicators .active {
  background-color: var(--acento);
}

/* esto hace que las felchas del carrucelse vean siempre en el carrucel, la verda es mas estetico con mi estilo asi que no critique */
.carousel-control-prev,
.carousel-control-next {
  width: clamp(3rem, 6vw, 4.5rem);
  opacity: .4;
  transition: opacity .3s ease;
}

.marco:hover .carousel-control-prev,
.marco:hover .carousel-control-next,
.carousel-control-prev:hover,
.carousel-control-next:hover,
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible {
  opacity: 1;
}

.carousel-control-next {
  justify-content: flex-end;
  padding-right: 1rem;
}

.carousel-control-prev {
  justify-content: flex-start;
  padding-left: 1rem;
}

/* estas son las tarjetas que estan en destacados, boostrap tenia uno lo vimos en clase,pero queria darle un detalle mas lindo donde
al pasar el cursor ensima tambien ilumine en los costados de hay border-color */
.ficha {
  --bs-card-bg: var(--tinta2);
  --bs-card-border-color: var(--linea);
  --bs-card-spacer-x: 1.5rem;
  --bs-card-spacer-y: 1.5rem;
  height: 100%;
  position: relative;
  transition: border-color .3s ease, transform .3s ease;
}

.ficha::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: var(--acento);
  scale: 0 1;
  transform-origin: left;
  transition: scale .4s ease;
}

.ficha:hover {
  border-color: color-mix(in srgb, var(--acento) 45%, var(--linea));
  transform: translateY(-4px);
}

.ficha:hover::before {
  scale: 1 1;
}

.ficha .card-title {
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin-bottom: .15rem;
}

.ficha .card-text {
  color: var(--tenue);
  font-size: .95rem;
}

/* esta modifica el tamaño de las cajas de etiquetas, lo de "orejas de gato"
"physbones", "estilo chibi" esas etiquetas no las que estan en el app.js*/
.etiqueta {
  font-family: var(--dato);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .38em .75em;
  border: 1px solid var(--linea);
  border-radius: 2px;
  color: var(--tenue);
  background: transparent;
}

/* el efecto que prende a los avatares con su color cuando les pasas el cursor por ensima
es un efecto lindo y usa un concepto similar al de la caja reactiva en destacados, asi que es como una "mezcla"
de esa funcion pero con distintos filtros*/
.plantilla {
  display: block;
  width: 100%;
  padding: 0;
  background: var(--tinta2);
  border: 1px solid var(--linea);
  color: inherit;
  text-align: left;
  position: relative;
  transition: border-color .3s ease, transform .3s ease;
}

.plantilla figure {
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.plantilla img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.35) brightness(.85);
  transition: filter .35s ease, scale .5s ease;
}

.plantilla figcaption {
  padding: .8rem .9rem 1rem;
  border-top: 1px solid var(--linea);
}

.plantilla b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.2;
}

.plantilla small {
  display: block;
  font-size: .74rem;
  margin-top: .1rem;
}

.plantilla::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: var(--acento);
  scale: 0 1;
  transform-origin: center;
  transition: scale .35s ease;
}

.plantilla:hover,
.plantilla:focus-visible {
  border-color: color-mix(in srgb, var(--acento) 55%, var(--linea));
  transform: translateY(-5px);
}

.plantilla:hover img,
.plantilla:focus-visible img {
  filter: grayscale(0) brightness(1);
  scale: 1.05;
}

.plantilla:hover::after,
.plantilla:focus-visible::after {
  scale: 1 1;
}

/* # LOS PASOS DEL TALLER */
.paso {
  border-top: 1px solid var(--linea);
  padding-top: 1.5rem;
  height: 100%;
}

.paso i {
  font-family: var(--dato);
  font-style: normal;
  font-size: .8rem;
  letter-spacing: .2em;
  color: var(--acento);
}

.paso h3 {
  font-size: 1.25rem;
  text-transform: uppercase;
  margin: .7rem 0 .6rem;
}

.paso p {
  color: var(--tenue);
  font-size: .95rem;
  margin: 0;
}

/* los espacios asignados para el proceso de creacion de los avatares en taller, fue un complique hacer el de youtube */
.paso-media {
  margin: 1.25rem 0 0;
  display: grid;
  gap: .6rem;
}

.paso-media img,
.paso-media video {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--linea);
  background: var(--tinta);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.paso-media img {
  max-height: 24rem;
  object-fit: cover;
  object-position: top;
}

.paso-media figcaption {
  font-family: var(--dato);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--tenue);
  margin-top: .15rem;
}

/* como dije antes en esta parte me ayudo un compañero que sabia ed computadores y mas
o menos me explico, esto afecta lo que se ve antes de darle click al video y esto tambien involucra
el proceso de deteccion sobre si es que esta en local o hosteada en la web, asi que mejor.. no lo toco */
.tubo {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid color-mix(in srgb, var(--acento) 40%, var(--linea));
  background:
    radial-gradient(60% 80% at 50% 40%, color-mix(in srgb, var(--acento) 16%, transparent), transparent 70%),
    var(--tinta2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.tubo-play {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: none;
  border: 0;
  color: var(--texto);
  font-family: var(--dato);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: .6rem 1rem;
}

.tubo-triangulo {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: .7rem 0 .7rem 1.15rem;
  border-color: transparent transparent transparent var(--acento);
  filter: drop-shadow(0 0 .7rem color-mix(in srgb, var(--acento) 60%, transparent));
  transition: scale .25s ease;
}

.tubo-play:hover .tubo-triangulo,
.tubo-play:focus-visible .tubo-triangulo {
  scale: 1.18;
}

.tubo-enlace {
  font-family: var(--dato);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--tenue);
}

.tubo-nota {
  display: none;
  max-width: 28ch;
  text-align: center;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--tenue);
  padding-inline: 1rem;
}

.archivo-local .tubo-nota {
  display: block;
}

.tubo--puesto {
  display: block;
  border-color: var(--linea);
  background: #000;
}

.tubo iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* # LA TABLA DE LIMITES
   Table de Bootstrap sin su fondo, con mis bordes y las cifras en la letra
   de maquina de escribir. */
.tabla {
  --bs-table-bg: transparent;
  --bs-table-color: var(--texto);
  --bs-table-border-color: var(--linea);
  --bs-table-striped-bg: rgba(255, 255, 255, .022);
  --bs-table-striped-color: var(--texto);
  font-size: .93rem;
}

.tabla thead th {
  font-family: var(--dato);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tenue);
  font-weight: 500;
  white-space: nowrap;
}

.tabla td,
.tabla th {
  padding: .8rem .9rem;
}

.tabla tbody th {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.tabla td {
  font-family: var(--dato);
  color: var(--tenue);
}

.rango {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  margin-right: .55rem;
  vertical-align: baseline;
}

/* # LOS RECUADROS DE LAS TRES CIFRAS */
.balance {
  border: 1px solid var(--linea);
  background: var(--tinta2);
  padding: clamp(1.25rem, 3vw, 2rem);
  height: 100%;
}

.balance p {
  font-family: var(--dato);
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1;
  margin: .4rem 0 0;
}

.balance.antes p {
  color: var(--tenue);
}

.balance.despues {
  border-color: color-mix(in srgb, var(--acento) 45%, var(--linea));
}

.balance.despues p {
  color: var(--acento);
}

/* en el taller la parte donde puedes ver "antes de encargar" Le quite la flechita de imagen que trae y le puse
   un + y un - (mira accordion-button::after). */
.acordeon {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--linea);
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-color: var(--texto);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-color: var(--acento);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 1.4rem;
}

.acordeon .accordion-button {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.acordeon .accordion-button::after {
  --bs-accordion-btn-icon: none;
  --bs-accordion-btn-active-icon: none;
  content: "+";
  font-family: var(--dato);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--acento);
  background: none;
  width: auto;
  height: auto;
  display: grid;
  place-items: center;
}

.acordeon .accordion-button:not(.collapsed)::after {
  content: "−";
  rotate: none;
}

.acordeon .accordion-body {
  color: var(--tenue);
  padding-bottom: 1.75rem;
  max-width: 68ch;
}

.acordeon .accordion-body p + p {
  margin-top: 1rem;
}

/* # LOS BOTONES
   Hay dos tipos y se distinguen a simple vista:

   .boton  el AZUL RELLENO, para la accion principal.
    Son "Ver la galeria" en la portada, "Como lo ensamblo" en la
     ventanita, y "Ver el elenco" en el taller.

   .boton-linea  el de SOLO BORDE y fondo transparente, para lo secundario.
   Son "Visitar el taller", "Cerrar" y "Ir a la tienda".

   Los dos llevan tambien la clase "btn" en el HTML, que es la de Bootstrap:
   ella les da la forma, el relleno y el comportamiento al pulsarlos. Aqui
   abajo solo les cambio los colores y la letra. Por eso todo empieza por
   --bs-btn-: son los interruptores que deja Bootstrap para eso. */
.boton {
  --bs-btn-color: #04060c;
  --bs-btn-bg: var(--acento);
  --bs-btn-border-color: var(--acento);
  --bs-btn-hover-color: #04060c;
  --bs-btn-hover-bg: var(--acento2);
  --bs-btn-hover-border-color: var(--acento2);
  --bs-btn-active-bg: var(--acento2);
  --bs-btn-active-border-color: var(--acento2);
  --bs-btn-padding-x: 1.6rem;
  --bs-btn-padding-y: .75rem;
  font-family: var(--dato);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.boton-linea {
  --bs-btn-color: var(--texto);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--linea);
  --bs-btn-hover-color: var(--acento);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--acento);
  --bs-btn-active-color: var(--acento);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: var(--acento);
  --bs-btn-padding-x: 1.6rem;
  --bs-btn-padding-y: .75rem;
  font-family: var(--dato);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* este es el lo que se encarga de darle forma a la caja y assigna el espaci para la
la el menu que sale cuando das click en un avatar en la galeria */
.modal-content {
  --bs-modal-bg: var(--tinta2);
  --bs-modal-border-color: var(--linea);
  --bs-modal-border-radius: 0;
  --bs-modal-header-border-color: var(--linea);
  --bs-modal-footer-border-color: var(--linea);
  --bs-modal-padding: clamp(1.25rem, 4vw, 2rem);
  border-top: 2px solid var(--acento);
}

.modal-title {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  text-transform: uppercase;
}

/* limita el tamaño de el carrucel dentro de el menu cuando se habre un avatar,
esto para evitar que se tenga que hacer scroll en la pantalla para verlo */
#ficha-fotos {
  max-width: 26rem;
  margin-inline: auto;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

#ficha-fotos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#ficha-fotos .carousel-control-prev,
#ficha-fotos .carousel-control-next {
  opacity: .55;
}

#ficha-fotos .carousel-indicators {
  justify-content: center;
  bottom: 1rem;
}

#ficha-fotos.una-sola .carousel-control-prev,
#ficha-fotos.una-sola .carousel-control-next,
#ficha-fotos.una-sola .carousel-indicators {
  display: none;
}

/* esta es la separacion para el pie de la pagina, donde queda el letrero abajo en la 
de la pagina "ateliere"*/
.pie {
  border-top: 1px solid var(--linea);
  padding-block: 3rem;
  color: var(--tenue);
  font-size: .9rem;
}

.pie a {
  color: var(--tenue);
  text-decoration: none;
}

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

/* # AJUSTES SOLO PARA MOVIL
   Por debajo de 576px: se esconde la mitad de los iconitos del fondo y se
   estrecha la sangria de las secciones. */
@media (max-width: 575.98px) {
  .fondo span:nth-child(2n) {
    display: none;
  }

  .rama-cuerpo {
    margin-left: .45rem;
    padding-left: .85rem;
  }
}

@media (max-width: 991.98px) {
  .barra .navbar-nav {
    padding-top: 1rem;
    gap: .35rem;
  }

  .barra .nav-link {
    margin-inline: 0;
    padding-block: .5rem;
  }

  .barra .nav-link::after {
    bottom: 0;
  }
}

/* esta madre de aqui abajo es la solucion a creo el 100% de mis problemas en los que 
veo que la pagina no fucniona y quiero arrancarme las bolas, esta madre no la tonquen por nada del mundo
hace que la pagina ignore las condiciones de rendimiento del dispositivo y funcione correctamente
muchas veces con mis otras paginas peleo porque no salen las animaciones, y es por el modo de
energia que tengo, pues esto es para ignorarlo como digo el que lo toque lo prendo a puño*/
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: smooth;
  }

  body {
    transition: background-image .6s ease;
  }

  .fondo {
    transition: color .6s ease;
  }

  .fondo span {
    animation: flotar var(--dur, 20s) ease-in-out infinite;
    animation-delay: var(--retardo, 0s);
  }

  .fade {
    transition: opacity .15s linear;
  }

  .collapsing {
    transition: height .35s ease;
  }

  .collapsing.collapse-horizontal {
    transition: width .35s ease;
  }

  .carousel-item {
    transition: transform .6s ease-in-out;
  }

  .carousel-fade .carousel-item.active,
  .carousel-fade .carousel-item-next.carousel-item-start,
  .carousel-fade .carousel-item-prev.carousel-item-end {
    transition: opacity .15s;
  }

  .modal.fade .modal-dialog {
    transition: transform .3s ease-out;
  }

  .accordion-button {
    transition: var(--bs-accordion-transition);
  }

  .navbar-toggler {
    transition: var(--bs-navbar-toggler-transition);
  }

  .btn {
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  }

  .nav-link {
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
  }

  .barra .nav-link::after {
    transition: right .3s ease;
  }

  .ficha,
  .plantilla {
    transition: border-color .3s ease, transform .3s ease;
  }

  .ficha::before,
  .plantilla::after {
    transition: scale .4s ease;
  }

  .plantilla img {
    transition: filter .35s ease, scale .5s ease;
  }

  .tubo-triangulo {
    transition: scale .25s ease;
  }

  .carousel-control-prev,
  .carousel-control-next {
    transition: opacity .3s ease;
  }

  .carousel-indicators [data-bs-target] {
    transition: background-color .3s ease;
  }
}