/* ==========================================================================
   La vida en el barco
   Hoja propia de la experiencia: se carga sólo en /barco/.
   Las medidas están en px del Figma: el lienzo mide 1518 × 887 en desktop
   y 393 × 852 en mobile, y barco.js lo escala para que entre en pantalla.
   ========================================================================== */

/* Fuentes propias de la experiencia (ajustar los nombres de archivo si difieren) */
@font-face {
  font-family: "Lust Didone";
  src: url("../fonts/LustDidoneDisplay.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Louvette Display";
  src: url("../fonts/LouvetteDisplay-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

.barco-body {
  overflow: hidden;
  background: #000;
}

.barco {
  --b-amarillo: var(--yellow, #efc11a);
  --b-celeste: var(--blue, #58baff);
  --b-rojo: var(--red, #ff0000);
  --b-verde: #2fbf4a;
  --b-display: var(--f-display, "Brunson", Impact, sans-serif);
  --b-didone: "Lust Didone", "Didot", "Bodoni 72", serif;
  --b-louvette: "Louvette Display", Georgia, serif;
  --b-sombra: 0 4px 4px rgba(0, 0, 0, 0.25);

  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
  touch-action: manipulation;
}

/* Hasta que barco.js calcula la escala, el lienzo no se muestra:
   así no aparece a tamaño completo y después se achica */
.barco:not(.is-escalado) .barco__lienzo {
  visibility: hidden;
}

.barco__lienzo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1518px;
  height: 887px;
  transform: translate(-50%, -50%) scale(var(--escala, 1));
  transform-origin: 50% 50%;
}

.barco button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.barco img {
  display: block;
}


/* --------------------------------------------------------------------------
   Fondo y vacas
   -------------------------------------------------------------------------- */

.barco__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/barco/fondo-juego.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.43;
}

.barco[data-fase="portada"] .barco__fondo {
  background-image: url("../img/barco/fondo-portada.webp");
  opacity: 1;
}

/* Sin z-index: así el esqueleto (screen) se mezcla con el fondo */
.vaca {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}

/* Caja de la foto: el recorte de cada vaca */
.vaca__foto {
  position: absolute;
}

.vaca__viva {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
}

/* Esqueleto: alineado con la silueta de la foto, oculto hasta una caída */
.vaca__esqueleto {
  position: absolute;
  max-width: none;
  mix-blend-mode: screen;
  opacity: 0;
}

.vaca__esqueleto--colorada {
  left: -13.69%;
  top: -3.23%;
  width: 114.87%;
  height: 116.94%;
}

.vaca__esqueleto--holando {
  left: -0.18%;
  top: -0.37%;
  width: 100.04%;
  height: 105.27%;
}

/* En cada caída la vaca titila dos veces y deja ver el esqueleto */
.barco.is-revelando .vaca__esqueleto {
  opacity: 1;
}

.barco.is-revelando .vaca__viva {
  animation: revelar 0.8s steps(1) 1;
}

@keyframes revelar {
  0% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  75% {
    opacity: 1;
  }
}

/* Las vacas de los costados se pegan al borde de la pantalla, no al del lienzo:
   --margen-x (lo calcula barco.js) es lo que sobra a cada lado del lienzo */
.vaca--colorada {
  left: calc(-45px - var(--margen-x, 0px));
  top: 190px;
  width: 583px;
  height: 697px;
}

.vaca--colorada .vaca__foto {
  left: -53.86%;
  top: 0;
  width: 153.86%;
  height: 105.45%;
}

.vaca--chica {
  left: 229px;
  top: 423px;
  width: 463px;
  height: 483px;
}

.vaca--chica .vaca__foto {
  left: -3.13%;
  top: -2%;
  width: 162.9%;
  height: 104%;
}

.vaca--alta {
  right: calc(-30px - var(--margen-x, 0px));
  top: -8px;
  width: 399px;
  height: 547px;
}

.vaca--alta .vaca__foto {
  left: -14.77%;
  top: -3.18%;
  width: 340.75%;
  height: 165.52%;
}

/* En la portada las vacas cambian de lugar */
.barco[data-fase="portada"] .vaca--colorada {
  width: 702px;
  height: 738px;
}

.barco[data-fase="portada"] .vaca--colorada .vaca__foto {
  left: -35.29%;
  width: 135.29%;
}

/* En la portada la holando grande baja hasta detrás de la chica (como en el Figma) */
.barco[data-fase="portada"] .vaca--alta {
  top: 60px;
  width: 485px;
  height: 630px;
}

.barco[data-fase="portada"] .vaca--alta .vaca__foto {
  left: -12.15%;
  top: -2.76%;
  width: 280.33%;
  height: 143.71%;
}

/* La chica va delante de la grande. Sólo en la portada: en el juego no se
   superponen y el z-index cortaría la mezcla del esqueleto */
.barco[data-fase="portada"] .vaca--chica {
  z-index: 1;
}

.barco[data-fase="portada"] .vaca--chica {
  left: auto;
  right: calc(-30px - var(--margen-x, 0px));
  top: 454px;
  width: 433px;
  height: 452px;
}


/* --------------------------------------------------------------------------
   Logo y llamado a la acción
   -------------------------------------------------------------------------- */

.barco__logo {
  position: absolute;
  left: 17px;
  top: 19px;
  width: 135px;
  z-index: 6;
  display: inline;
}

.barco__logo img {
  width: 100%;
  height: auto;
}

.barco__cta {
  position: absolute;
  left: 1361px;
  top: 19px;
  width: 117px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--b-rojo);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  z-index: 6;
}

.barco__logo,
.barco__cta {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.barco__logo:hover,
.barco__cta:hover {
  transform: rotate(-3.5deg) scale(1.06);
}

/* --------------------------------------------------------------------------
   Lema (portada e instrucciones)
   -------------------------------------------------------------------------- */

/* Los textos de la izquierda siguen a la vaca colorada: se anclan al borde
   de la pantalla igual que ella (--margen-x) */
.lema {
  position: absolute;
  left: calc(175px - var(--margen-x, 0px));
  top: 368.3px;
  width: 338px;
  transform: translate(-50%, -50%) rotate(-4.08deg);
  font-family: var(--b-didone);
  font-size: 65px;
  line-height: 52px;
  color: var(--b-amarillo);
  text-align: center;
  text-shadow: var(--b-sombra);
  z-index: 6;
  pointer-events: none;
}

.barco[data-fase="cartel"] .lema {
  left: calc(182px - var(--margen-x, 0px));
  top: 373.3px;
}


/* Menú (tres barras rojas): sólo en mobile */
.barco__menu {
  display: none;
}


/* --------------------------------------------------------------------------
   Portada
   -------------------------------------------------------------------------- */

.portada {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.portada__promo {
  position: absolute;
  left: calc(190px - var(--margen-x, 0px));
  top: 500px;
  width: 445px;
  transform: translateX(-50%);
  font-family: var(--b-display);
  color: var(--b-amarillo);
  text-align: center;
  text-transform: uppercase;
  text-shadow: var(--b-sombra);
}

.portada__promo-1 {
  display: block;
  font-size: 30px;
  line-height: 40px;
}

.portada__promo-2 {
  display: block;
  margin-top: -8px;
  font-size: 40px;
  line-height: 40px;
}

/* Botón: flechas + ENTRAR + aviso. Medidas relativas a su caja */
.portada__entrar {
  position: absolute;
  left: 555px;
  top: 364px;
  width: 408px;
  height: 342px;
  pointer-events: auto;
}

.portada__flecha {
  position: absolute;
  left: 173px;
  width: 36px;
  height: 54px;
  fill: var(--b-celeste);
  animation: subida 1.2s ease-in-out infinite;
}

/* La opacidad sube de abajo hacia arriba */
.portada__flecha--1 {
  top: 0;
  animation-delay: 0.4s;
}

.portada__flecha--2 {
  top: 63px;
  animation-delay: 0.2s;
}

.portada__flecha--3 {
  top: 126px;
  animation-delay: 0s;
}

@keyframes subida {
  0%,
  100% {
    opacity: 0.3;
  }

  40% {
    opacity: 1;
  }
}

/* La caja se ajusta al ancho de la palabra: la banda celeste llega justo a sus bordes */
.portada__texto {
  position: absolute;
  left: 50%;
  top: 169px;
  transform: translateX(-50%);
  font-family: var(--b-display);
  font-size: 160px;
  line-height: 130px;
  color: #000;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s ease;
}

/* Banda celeste detrás de ENTRAR */
.portada__texto::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 25px;
  height: 114px;
  background: var(--b-celeste);
  z-index: -1;
}

.portada__cuidado {
  position: absolute;
  left: 204.2px;
  top: 306px;
  transform: translate(-50%, -50%) rotate(-1.85deg);
  font-family: var(--b-display);
  font-size: 40px;
  line-height: 52px;
  color: #000;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s ease;
}

.portada__cuidado::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 34px;
  background: var(--b-celeste);
  z-index: -1;
}


.portada__texto:hover {
  color: #fff;
  transform: translateX(-50%) rotate(-3.27deg);
}


.portada__cuidado:hover {
  color: #fff;
}



/* Al abrir: las vacas entran desde afuera y después aparecen ENTRAR y el aviso.
   Arranca cuando las fotos de las vacas ya cargaron (barco.js agrega .is-listo) */
.barco:not(.is-listo) .vaca,
.barco:not(.is-listo) .lema,
.barco:not(.is-listo) .portada__promo,
.barco:not(.is-listo) .portada__texto,
.barco:not(.is-listo) .portada__cuidado {
  opacity: 0;
}

.barco.is-listo[data-fase="portada"] .vaca--colorada {
  animation: entra-izquierda 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.barco.is-listo[data-fase="portada"] .vaca--chica {
  animation: entra-derecha 1.2s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.barco.is-listo[data-fase="portada"] .vaca--alta {
  animation: entra-derecha 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Los textos aparecen cuando la vaca colorada ya se acomodó (1,2 s) */
.barco.is-listo[data-fase="portada"] .lema,
.barco.is-listo .portada__promo {
  animation: aparece 0.6s 1.2s ease-out both;
}

.barco.is-listo .portada__texto,
.barco.is-listo .portada__cuidado {
  animation: aparece 0.8s 1.6s ease-out both;
}

@keyframes entra-izquierda {
  from {
    transform: translateX(-120%);
  }
}

@keyframes entra-derecha {
  from {
    transform: translateX(120%);
  }
}

@keyframes aparece {
  from {
    opacity: 0;
  }
}


/* --------------------------------------------------------------------------
   Escenario: el recuadro negro. No rota: recorta.
   -------------------------------------------------------------------------- */

.escenario {
  position: absolute;
  left: 458px;
  top: 156px;
  width: 602px;
  height: 640px;
  overflow: hidden;
  background: #000;
  z-index: 3;
}

/* La capa que se balancea */
.escenario__barco {
  position: absolute;
  inset: 0;
  transform: rotate(var(--giro-video, 0deg)) scale(var(--zoom, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Placeholder del video: rayado para que se vea la inclinación */
.escenario__video {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    linear-gradient(transparent 49.6%, rgba(88, 186, 255, 0.5) 49.6%, rgba(88, 186, 255, 0.5) 50.4%, transparent 50.4%),
    repeating-linear-gradient(90deg, #111 0, #111 39px, #1d1d1d 39px, #1d1d1d 40px),
    #111;
}

/* Video del día: cubre la capa que rota (sin video, queda el placeholder) */
.escenario__clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.escenario__clip:not([src]) {
  display: none;
}

/* Video de una secuencia (caída, etc.): tapa al del día mientras dura.
   En el final queda congelado en su último cuadro */
.barco:not([data-fase="secuencia"]):not([data-fase="final"]) .escenario__clip--secuencia {
  display: none;
}

/* Nivel: barco + línea punteada, encima del video y sin el zoom de la capa.
   Medidas en coordenadas del lienzo */
.nivel {
  position: absolute;
  left: 756px;
  top: 713px;
  width: 0;
  height: 0;
  transform: translateZ(0) rotate(var(--giro, 0deg));
  will-change: transform;
  z-index: 4;
  pointer-events: none;
}

/* Círculo negro detrás del nivel: sólo en mobile */
.nivel-fondo {
  display: none;
}

.nivel__linea {
  position: absolute;
  left: -113px;
  top: 14px;
  width: 234px;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--b-celeste) 0 8px, transparent 8px 14px);
}

.nivel__barco {
  position: absolute;
  left: -53px;
  top: -78px;
  width: 106px;
  max-width: none;
  height: 156px;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

.barco[data-fase="portada"] .nivel,
.barco[data-fase="cartel"] .nivel {
  display: none;
}

.escenario__video-txt {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #555;
}

.barco[data-fase="cartel"] .escenario__video {
  display: none;
}

/* Textos sobre el escenario */
.escenario__cartel,
.escenario__secuencia,
.escenario__final {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 347px;
  text-align: center;
  z-index: 3;
}

/* Instrucciones: centradas en el recuadro. Título en Lust Didone, cuerpo en Inter */
.escenario__cartel {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  font-family: inherit;
  font-size: 20px;
  line-height: 27px;
  color: var(--b-amarillo);
  text-shadow: var(--b-sombra);
}

/* El título puede ser más ancho que los párrafos sin descentrarse */
.escenario__cartel-titulo {
  white-space: nowrap;
  margin-bottom: 24px;
  font-family: var(--b-didone);
  font-size: 56px;
  line-height: 52px;
}

.escenario__cartel .solo-desktop,
.escenario__cartel .solo-movil {
  max-width: 331px;
  margin-inline: auto;
}

.escenario__cartel .solo-desktop p + p,
.escenario__cartel .solo-movil p + p {
  margin-top: 20px;
}

.barco .solo-movil,
.barco.es-movil .solo-desktop {
  display: none;
}

.barco.es-movil .solo-movil {
  display: block;
}

/* En las instrucciones el recuadro deja ver un poco el fondo */
.barco[data-fase="cartel"] .escenario {
  background: rgba(0, 0, 0, 0.85);
}

.escenario__secuencia,
.escenario__final {
  top: 50%;
  width: 480px;
  transform: translate(-50%, -50%);
}

.escenario__secuencia-titulo,
.escenario__final-titulo {
  font-family: var(--b-display);
  font-size: 80px;
  line-height: 72px;
  color: var(--b-amarillo);
  text-transform: uppercase;
}

.escenario__secuencia-nota {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #777;
  text-transform: uppercase;
}

.escenario__final-texto {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
}

.escenario__final-cta {
  display: inline-block;
  margin-top: 28px;
  padding: 10px 18px;
  background: var(--b-rojo);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   Indicadores: dos tableros negros sobre el escenario
   -------------------------------------------------------------------------- */

.tablero {
  position: absolute;
  top: 110px;
  height: 37px;
  background: #000;
  font-family: var(--b-display);
  font-size: 20px;
  line-height: 16px;
  text-transform: uppercase;
  z-index: 5;
}

.tablero--cuerpo {
  left: 458px;
  width: 282px;
  color: var(--b-celeste);
}

.tablero--ambiente {
  left: 755px;
  width: 309px;
  color: var(--b-amarillo);
}

.indicador {
  position: absolute;
  top: 11px;
}

/* La posición de cada indicador la da su barra; el nombre va a la izquierda */
.indicador--salud {
  left: 77px;
}

.indicador--estres {
  left: 211px;
}

.indicador--amoniaco {
  left: 90px;
  top: 9px;
}

.indicador__nombre {
  position: absolute;
  right: calc(100% + 10px);
  top: 0;
  white-space: nowrap;
}

.indicador__barra {
  display: flex;
  gap: 2px;
}

.indicador__seg {
  position: relative;
  width: 10px;
  height: 16px;
  background: rgba(255, 0, 0, 0.22);
}

.indicador__seg span {
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--lleno, 0) * 100%);
  background: var(--b-rojo);
  transition: height 0.6s ease;
}

.indicador--calor {
  left: 222.5px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.indicador__valor {
  color: var(--b-rojo);
}

.indicador.is-golpe {
  animation: golpe 0.8s steps(2) 2;
}

@keyframes golpe {
  50% {
    opacity: 0;
  }
}


/* --------------------------------------------------------------------------
   Rótulo del día
   -------------------------------------------------------------------------- */

.dia {
  position: absolute;
  left: 775px;
  top: -8px;
  transform: translateX(-50%) rotate(-3.27deg);
  z-index: 6;
  pointer-events: none;
}

.dia__texto {
  position: relative;
  display: block;
  padding-inline: 4px;
  font-family: var(--b-display);
  font-size: 120px;
  line-height: 130px;
  color: #000;
  text-transform: uppercase;
  white-space: nowrap;
}

.dia__texto::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 23px;
  height: 97px;
  background: var(--b-celeste);
  z-index: -1;
}


/* --------------------------------------------------------------------------
   Flechas y cinta de instrucciones
   -------------------------------------------------------------------------- */

.controles {
  position: absolute;
  left: 651px;
  top: 774px;
  display: flex;
  gap: 107px;
  z-index: 5;
}

.controles__btn {
  width: 51px;
  height: 51px;
}

.controles__btn img {
  width: 59px;
  height: 59px;
  margin: 0 0 0 -4px;
}

/* Las flechas quedan a media luz; se enciende la que estás apretando */
.controles__btn {
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.controles[data-activa="izq"] [data-flecha="1"],
.controles[data-activa="der"] [data-flecha="-1"] {
  opacity: 1;
}

/* Al empezar el juego parpadean y quedan a media luz */
.controles.is-aviso .controles__btn {
  animation: parpadeo 0.4s steps(1) 4;
}

@keyframes parpadeo {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.1;
  }
}

.cinta {
  position: absolute;
  left: 651px;
  top: 832px;
  width: 215px;
  height: 25px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--b-amarillo);
  color: #000;
  font-size: 12px;
  line-height: 10px;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-1.96deg);
  z-index: 5;
}

/* Barra verde: se llena mientras estás dentro del margen */
.cinta__progreso {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--progreso, 0) * 100%);
  background: var(--b-verde);
}

.cinta__texto {
  position: relative;
}

/* Aviso debajo de la rueda */
.aviso-rueda {
  position: absolute;
  left: 1290px;
  top: 806px;
  height: 25px;
  padding-inline: 12px;
  display: grid;
  place-items: center;
  background: var(--b-amarillo);
  color: #000;
  font-size: 12px;
  line-height: 10px;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-1.96deg);
  animation: titila 0.9s steps(1) infinite;
  z-index: 5;
}

@keyframes titila {
  50% {
    opacity: 0;
  }
}


/* --------------------------------------------------------------------------
   Rueda
   -------------------------------------------------------------------------- */

.barco .rueda {
  position: absolute;
  left: 1119px;
  top: 444px;
  width: 342px;
  height: 342px;
  border-radius: 50%;
  z-index: 5;
}

.barco .rueda:disabled {
  cursor: default;
}

/* Apagada hasta que se puede girar */
.barco .rueda {
  filter: grayscale(1) brightness(0.45);
  transition: filter 0.5s ease;
}

.barco[data-fase="rueda"] .rueda,
.barco[data-fase="girando"] .rueda,
.barco[data-fase="secuencia"] .rueda {
  filter: none;
}

/* Las imágenes de las ruedas tienen fondo negro: se recortan en círculo
   y giran sobre el centro real de la rueda (5 px más arriba que el de la imagen) */
.rueda__img {
  width: 100%;
  height: 100%;
  clip-path: circle(47.9% at 50% 49.6%);
  transform: rotate(var(--rueda-giro, 0deg));
  transform-origin: 50% 49.6%;
}

.rueda.is-girando .rueda__img {
  transition: transform var(--rueda-tiempo, 4.5s) cubic-bezier(0.12, 0.8, 0.2, 1);
}

/* Indicador del gajo ganador: tres flechas apiladas; la de abajo entra
   apenas en el borde de la rueda */
.rueda__marca {
  position: absolute;
  left: 50%;
  width: 32px;
  height: 41px;
  transform: translateX(-50%);
}

.rueda__marca--1 {
  top: -123px;
}

.rueda__marca--2 {
  top: -75px;
}

.rueda__marca--3 {
  top: -27px;
}

/* Cuando se puede girar, la opacidad baja de arriba hacia abajo */
.barco[data-fase="rueda"] .rueda__marca {
  animation: cascada 0.9s ease-in-out infinite;
}

.barco[data-fase="rueda"] .rueda__marca--2 {
  animation-delay: 0.15s;
}

.barco[data-fase="rueda"] .rueda__marca--3 {
  animation-delay: 0.3s;
}

@keyframes cascada {
  0%,
  100% {
    opacity: 0.25;
  }

  40% {
    opacity: 1;
  }
}

.barco[data-fase="rueda"] .rueda__img {
  animation: llamado 1.2s ease-in-out infinite;
}

@keyframes llamado {
  50% {
    filter: brightness(1.25);
  }
}


/* --------------------------------------------------------------------------
   Qué se ve en cada fase
   -------------------------------------------------------------------------- */

.barco[data-fase="portada"] .escenario,
.barco[data-fase="portada"] .tablero,
.barco[data-fase="portada"] .dia,
.barco[data-fase="portada"] .rueda,
.barco[data-fase="portada"] .barco__logo,
.barco[data-fase="portada"] .barco__cta,
.barco:not([data-fase="portada"]) .portada {
  display: none;
}

.barco:not([data-fase="cartel"]) .escenario__cartel,
.barco:not([data-fase="secuencia"]) .escenario__secuencia,
.barco:not([data-fase="final"]) .escenario__final {
  display: none;
}

.barco:not([data-fase="portada"]):not([data-fase="cartel"]) .lema,
.barco:not([data-fase="balanceo"]):not([data-fase="cartel"]) .controles,
.barco:not([data-fase="balanceo"]):not([data-fase="cartel"]) .cinta,
.barco:not([data-fase="rueda"]) .aviso-rueda {
  display: none;
}


/* Flechas de toque: sólo en mobile, durante el balanceo */
.toque {
  display: none;
}


/* ==========================================================================
   Mobile: lienzo de 393 × 852 (Figma: iPhone 16 - 1, 2 y 3)
   ========================================================================== */

.barco.es-movil .barco__lienzo {
  width: 393px;
  height: 852px;
}

.es-movil .barco__fondo {
  left: -115px;
  top: 0;
  width: 595px;
  height: 904px;
  background-size: 269.97% 100%;
  background-position: -483.8px 0;
}

/* En mobile el fondo de la portada también va al 43% */
.barco.es-movil[data-fase="portada"] .barco__fondo {
  opacity: 0.43;
}

.es-movil .vaca--colorada,
.es-movil .vaca--chica,
.es-movil .barco__cta,
.es-movil .controles,
.es-movil .portada__promo,
.es-movil .portada__flecha {
  display: none;
}


/* Logo y menú ------------------------------------------------------------- */

.barco.es-movil .barco__logo {
  display: block;
  left: 10px;
  top: 5px;
  width: 84px;
}

.barco.es-movil[data-fase="portada"] .barco__logo {
  display: block;
  left: 15px;
}

.barco.es-movil .barco__menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  left: 346px;
  top: 20px;
  width: 38px;
  z-index: 6;
}

.barco__menu span {
  display: block;
  height: 5px;
  background: #ff0404;
}

/* Quitar .barco__cta de la lista de ocultos */
.es-movil .vaca--colorada,
.es-movil .vaca--chica,
.es-movil .controles,
.es-movil .portada__promo,
.es-movil .portada__flecha {
  display: none;
}

/* Ocultar el menú hamburguesa */
.barco.es-movil .barco__menu {
  display: none !important;
}

/* Mostrar y posicionar el botón Actuá Ahora en mobile */
.barco.es-movil .barco__cta {
  display: grid;
  left: auto;
  right: 12px;
  top: 15px;
  width: 108px;
  height: 28px;
  font-size: 11px;
  z-index: 6;
}

/* Vacas ------------------------------------------------------------------- */

/* Anclada al borde derecho de la pantalla, 10 px por fuera */
.barco.es-movil .vaca--alta {
  left: auto;
  right: calc(-10px - var(--margen-x, 0px));
  top: -95px;
  width: 240px;
  height: 547px;
  z-index: 4;
}

.barco.es-movil .vaca--alta .vaca__foto {
  left: -24.55%;
  top: -3.18%;
  width: 566.49%;
  height: 165.52%;
}

.barco.es-movil[data-fase="portada"] .vaca--alta {
  left: auto;
  right: calc(-10px - var(--margen-x, 0px));
  top: -64px;
  width: 240px;
  height: 547px;
}

.barco.es-movil[data-fase="portada"] .vaca--alta .vaca__foto {
  left: -24.55%;
  top: -3.18%;
  width: 566.49%;
  height: 165.52%;
}

/* La colorada sólo aparece en la portada, abajo */
.barco.es-movil[data-fase="portada"] .vaca--colorada {
  display: block;
  left: -80px;
  top: 452px;
  width: 583px;
  height: 697px;
}

.barco.es-movil[data-fase="portada"] .vaca--colorada .vaca__foto {
  left: -53.86%;
  top: 0;
  width: 153.86%;
  height: 105.45%;
}

/* En las instrucciones la vaca pasa detrás del recuadro para no tapar el texto */
.barco.es-movil[data-fase="cartel"] .vaca--alta {
  z-index: 2;
}


/* Portada ----------------------------------------------------------------- */

.barco.es-movil .lema {
  left: 122px;
  top: 691.5px;
  width: 233px;
  font-size: 40px;
  line-height: 40px;
}

.barco.es-movil[data-fase="cartel"] .lema {
  display: none;
}

.es-movil .portada__entrar {
  left: 0;
  top: 340px;
  width: 393px;
  height: 150px;
  transform: none;
}

.es-movil .portada__texto {
  left: 46px;
  top: 0;
  transform: none;
  font-size: 100px;
  line-height: 130px;
}

.es-movil .portada__texto::before {
  top: 32px;
  height: 72px;
}

.es-movil .portada__cuidado {
  left: 176.24px;
  top: 111px;
  font-size: 30px;
}

.es-movil .portada__cuidado::before {
  top: 13px;
  height: 26px;
}


/* Rótulo del día ---------------------------------------------------------- */

.es-movil .dia {
  left: 70px;
  top: 10px;
  transform: rotate(-4.93deg);
  transform-origin: 0 50%;
}

.barco.es-movil[data-fase="cartel"] .dia {
  top: -3px;
}

.es-movil .dia__texto {
  font-size: 80px;
  line-height: 130px;
}

.es-movil .dia__texto::before {
  top: 38px;
  height: 59px;
}


/* Tableros ---------------------------------------------------------------- */

/* Apilados; el del cuerpo pasa por delante del rótulo */
.es-movil .tablero--cuerpo {
  left: 21px;
  top: 91px;
  width: 305px;
  z-index: 7;
}

.es-movil .tablero--ambiente {
  left: 21px;
  top: 135px;
}


/* Escenario --------------------------------------------------------------- */

/* El video ocupa todo el ancho y se pasa de los bordes */
.es-movil .escenario {
  left: -12px;
  top: 187px;
  width: 421px;
  height: 449px;
}

/* En las instrucciones es un recuadro negro más angosto */
.barco.es-movil[data-fase="cartel"] .escenario {
  left: 17px;
  top: 184px;
  width: 358px;
  height: 437px;
  background: #000;
}

.es-movil .escenario__cartel {
  top: 81px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  font-size: 20px;
  line-height: 30px;
}

.es-movil .escenario__cartel-titulo {
  margin-bottom: 43px;
  font-size: 30px;
  line-height: 30px;
}

.es-movil .escenario__cartel .solo-movil {
  max-width: 270px;
}

.es-movil .escenario__cartel .solo-movil p + p {
  margin-top: 30px;
}

.es-movil .escenario__secuencia,
.es-movil .escenario__final {
  width: 300px;
}

.es-movil .escenario__secuencia-titulo,
.es-movil .escenario__final-titulo {
  font-size: 60px;
  line-height: 54px;
}


/* Nivel: barco + línea dentro de un círculo negro, abajo a la derecha ----- */

.es-movil .nivel {
  left: 306.5px;
  top: 754px;
  scale: 0.55;
}

.es-movil .nivel__linea {
  top: 43px;
}

.barco.es-movil .nivel-fondo {
  display: block;
  position: absolute;
  left: 243px;
  top: 678px;
  width: 132px;
  height: 133px;
  border-radius: 50%;
  background: #000;
  z-index: 4;
}

/* En mobile el barco también se ve en las instrucciones */
.barco.es-movil[data-fase="cartel"] .nivel {
  display: block;
}

.barco.es-movil[data-fase="portada"] .nivel-fondo {
  display: none;
}


/* Cinta y aviso: abajo del video, a la derecha de las flechas de la rueda */
.es-movil .cinta,
.es-movil .aviso-rueda {
  left: 134px;
  top: 600px;
  width: auto;
  padding-inline: 8px;
  font-size: 11px;
  transform: rotate(-1.96deg);
}


/* En las instrucciones, la cinta va debajo del recuadro, sobre el círculo del barco */
.barco.es-movil[data-fase="cartel"] .cinta {
  left: 236px;
  top: 632px;
}


/* Rueda ------------------------------------------------------------------- */

.barco.es-movil .rueda {
  left: 10px;
  top: 643px;
  width: 204px;
  height: 204px;
}

/* En mobile van dos flechas */
.es-movil .rueda__marca {
  width: 22px;
  height: 28px;
}

.es-movil .rueda__marca--1 {
  display: none;
}

.es-movil .rueda__marca--2 {
  top: -59px;
}

.es-movil .rueda__marca--3 {
  top: -26px;
}


/* Flechas que aparecen al tocar cada costado ----------------------------- */

.barco.es-movil[data-fase="balanceo"] .toque {
  display: block;
}

.toque__flecha {
  position: absolute;
  top: 380px;
  width: 64px;
  height: 64px;
  opacity: 0.2;
  transition: opacity 0.12s ease;
  pointer-events: none;
  z-index: 5;
}

.toque__flecha--izq {
  left: 14px;
}

.toque__flecha--der {
  left: 315px;
}

.toque__flecha.is-activa {
  opacity: 1;
}


/* --------------------------------------------------------------------------
   Mobile: vaca de arriba con la cabeza cortada por el borde derecho.
   Va al final del archivo y con !important para que ninguna otra regla
   de la vaca la pise (había bloques duplicados).
   -------------------------------------------------------------------------- */

.barco.es-movil .vaca--alta,
.barco.es-movil[data-fase="portada"] .vaca--alta {
  left: auto !important;
  right: calc(-10px - var(--margen-x, 0px)) !important;
  width: 240px !important;
  height: 547px !important;
}

.barco.es-movil .vaca--alta {
  top: -95px !important;
}

.barco.es-movil[data-fase="portada"] .vaca--alta {
  top: -64px !important;
}

.barco.es-movil .vaca--alta .vaca__foto,
.barco.es-movil[data-fase="portada"] .vaca--alta .vaca__foto {
  left: -24.55% !important;
  top: -3.18% !important;
  width: 566.49% !important;
  height: 165.52% !important;
}


/* --------------------------------------------------------------------------
   Comenzar de nuevo: aparece en el final.
   Desktop: arriba del barco. Mobile: entre la rueda y el barco.
   -------------------------------------------------------------------------- */

.reiniciar {
  display: none;
}

.barco[data-fase="final"] .reiniciar {
  display: block;
  position: absolute;
  left: 756px;
  top: 596px;
  padding: 10px 18px;
  background: var(--b-amarillo);
  color: #000;
  font-family: var(--f-text, inherit);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 7;
}

.barco[data-fase="final"] .reiniciar:hover {
  transform: translateX(-50%) rotate(-3.5deg) scale(1.06);
}

.barco.es-movil[data-fase="final"] .reiniciar {
  left: 228px;
  top: 655px;
  padding: 8px 12px;
  font-size: 11px;
  transform: translate(-50%, -50%);
}

/* En desktop el texto del final sube un poco para dejarle lugar al botón */
.barco:not(.es-movil) .escenario__final {
  top: calc(50% - 50px);
}


/* --------------------------------------------------------------------------
   Aviso "Balanceá el barco": titila dos veces al empezar cada balanceo
   -------------------------------------------------------------------------- */

.aviso-balanceo {
  display: none;
  position: absolute;
  left: 50%;
  top: 70px;
  padding: 6px 12px;
  background: var(--b-amarillo);
  color: #000;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-1.96deg);
  z-index: 4;
}

.barco.is-aviso-balanceo[data-fase="balanceo"] .aviso-balanceo {
  display: block;
  animation: aviso-balanceo 1.8s steps(1) both;
}

@keyframes aviso-balanceo {
  0% {
    opacity: 1;
  }

  20% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  60% {
    opacity: 0;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.es-movil .aviso-balanceo {
  top: 40px;
  font-size: 12px;
}


/* El barco del nivel se ve apagado cuando no se puede balancear */
.nivel {
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.barco:not([data-fase="balanceo"]) .nivel {
  filter: grayscale(1) brightness(0.6);
  opacity: 0.6;
}



/* --------------------------------------------------------------------------
   Crédito "Diseño: LaburoEstudio"
   Fuera del lienzo: abajo, alineado con el borde derecho del fondo tramado
   (que ocupa todo el lienzo)
   -------------------------------------------------------------------------- */

.barco__credito {
  position: absolute;
  right: calc((100vw - 1450px * var(--escala, 1)) / 2);
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #b9b9b9;
  font-size: 8px;
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  z-index: 10;
  transform-origin: 100% 50%;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s ease;
}

/* El logo es un SVG muy ancho: sin esta regla se ve a 1811 px */
.barco__credito img {
  width: auto;
  max-width: none;
  height: 7px;
}

.barco.es-movil .barco__credito {
  right: 12px;
  bottom: 6px;
  gap: 3px;
  font-size: 9px;
}

.barco.es-movil .barco__credito img {
  height: 7px;
}

.barco__credito:hover {
  color: #fff;
  transform: rotate(1.5deg) scale(1);
}

.barco__credito img {
  transition: filter 0.15s ease;
}

.barco__credito:hover img {
  filter: brightness(1.6);
}