/* DEFINICIÓN DE LA FORMA DE LA NUBE (mismo clip-path que en el zip de Meowrhino) */
/* 1) Variables globales */
:root {
  --nube: polygon(
    99.426% 44.728%,
    99.426% 44.728%,
    99.871% 41.37%,
    99.98% 37.982%,
    99.78% 34.598%,
    99.298% 31.252%,
    98.561% 27.979%,
    97.597% 24.812%,
    96.432% 21.786%,
    95.095% 18.935%,
    93.611% 16.293%,
    92.009% 13.895%,
    92.009% 13.895%,
    90.386% 11.942%,
    88.654% 10.355%,
    86.828% 9.112%,
    84.925% 8.191%,
    82.96% 7.57%,
    80.948% 7.227%,
    78.907% 7.141%,
    76.851% 7.288%,
    74.797% 7.648%,
    72.759% 8.198%,
    72.759% 8.198%,
    71.935% 8.479%,
    71.117% 8.802%,
    70.308% 9.166%,
    69.509% 9.573%,
    68.72% 10.022%,
    67.943% 10.512%,
    67.179% 11.044%,
    66.429% 11.618%,
    65.695% 12.234%,
    64.978% 12.891%,
    64.978% 12.891%,
    64.649% 12.219%,
    64.312% 11.557%,
    63.967% 10.909%,
    63.614% 10.272%,
    63.253% 9.649%,
    62.886% 9.04%,
    62.511% 8.446%,
    62.129% 7.866%,
    61.741% 7.301%,
    61.347% 6.752%,
    61.347% 6.752%,
    59.724% 4.799%,
    57.992% 3.213%,
    56.166% 1.97%,
    54.263% 1.049%,
    52.297% 0.428%,
    50.286% 0.085%,
    48.245% -0.002%,
    46.189% 0.145%,
    44.134% 0.505%,
    42.097% 1.055%,
    42.097% 1.055%,
    40.406% 1.679%,
    38.751% 2.481%,
    37.142% 3.46%,
    35.59% 4.616%,
    34.105% 5.948%,
    32.698% 7.458%,
    31.379% 9.143%,
    30.159% 11.005%,
    29.048% 13.042%,
    28.058% 15.255%,
    28.058% 15.255%,
    27.516% 14.778%,
    26.964% 14.337%,
    26.402% 13.933%,
    25.83% 13.569%,
    25.248% 13.244%,
    24.658% 12.962%,
    24.058% 12.723%,
    23.45% 12.528%,
    22.833% 12.38%,
    22.208% 12.279%,
    22.208% 12.279%,
    20.213% 12.271%,
    18.266% 12.683%,
    16.375% 13.478%,
    14.546% 14.621%,
    12.787% 16.076%,
    11.105% 17.808%,
    9.507% 19.78%,
    7.999% 21.958%,
    6.591% 24.305%,
    5.287% 26.786%,
    5.287% 26.786%,
    4.106% 29.369%,
    3.047% 32.078%,
    2.125% 34.894%,
    1.351% 37.802%,
    0.74% 40.785%,
    0.303% 43.825%,
    0.054% 46.906%,
    0.005% 50.011%,
    0.171% 53.123%,
    0.563% 56.225%,
    0.563% 56.225%,
    0.803% 57.519%,
    1.083% 58.778%,
    1.403% 60.002%,
    1.761% 61.191%,
    2.155% 62.345%,
    2.585% 63.464%,
    3.048% 64.548%,
    3.543% 65.596%,
    4.069% 66.608%,
    4.625% 67.585%,
    4.625% 67.585%,
    4.542% 68.011%,
    4.464% 68.44%,
    4.393% 68.871%,
    4.327% 69.305%,
    4.268% 69.741%,
    4.213% 70.178%,
    4.164% 70.615%,
    4.121% 71.051%,
    4.083% 71.488%,
    4.051% 71.922%,
    4.051% 71.922%,
    3.996% 73.58%,
    4.052% 75.222%,
    4.213% 76.837%,
    4.474% 78.417%,
    4.83% 79.951%,
    5.276% 81.431%,
    5.804% 82.847%,
    6.411% 84.19%,
    7.09% 85.449%,
    7.837% 86.616%,
    7.837% 86.616%,
    8.563% 87.542%,
    9.34% 88.315%,
    10.161% 88.942%,
    11.018% 89.43%,
    11.905% 89.786%,
    12.816% 90.016%,
    13.742% 90.129%,
    14.676% 90.131%,
    15.613% 90.029%,
    16.545% 89.83%,
    16.545% 89.83%,
    16.634% 89.804%,
    16.723% 89.777%,
    16.811% 89.749%,
    16.898% 89.72%,
    16.984% 89.69%,
    17.07% 89.659%,
    17.155% 89.627%,
    17.239% 89.594%,
    17.323% 89.559%,
    17.406% 89.524%,
    17.406% 89.524%,
    18.764% 91.763%,
    20.268% 93.695%,
    21.899% 95.335%,
    23.639% 96.696%,
    25.466% 97.796%,
    27.364% 98.648%,
    29.312% 99.267%,
    31.291% 99.669%,
    33.281% 99.869%,
    35.265% 99.881%,
    35.265% 99.881%,
    37.204% 99.716%,
    39.152% 99.364%,
    41.086% 98.81%,
    42.982% 98.039%,
    44.818% 97.037%,
    46.57% 95.789%,
    48.216% 94.281%,
    49.733% 92.497%,
    51.097% 90.423%,
    52.285% 88.045%,
    52.285% 88.045%,
    52.613% 88.03%,
    52.941% 88.006%,
    53.268% 87.974%,
    53.596% 87.932%,
    53.924% 87.883%,
    54.252% 87.825%,
    54.58% 87.76%,
    54.907% 87.686%,
    55.235% 87.606%,
    55.563% 87.517%,
    55.563% 87.517%,
    56.701% 89.03%,
    57.907% 90.405%,
    59.173% 91.64%,
    60.492% 92.733%,
    61.86% 93.682%,
    63.268% 94.487%,
    64.712% 95.145%,
    66.183% 95.656%,
    67.675% 96.016%,
    69.183% 96.225%,
    69.183% 96.225%,
    70.986% 96.212%,
    72.749% 95.872%,
    74.466% 95.229%,
    76.134% 94.307%,
    77.746% 93.127%,
    79.298% 91.715%,
    80.784% 90.093%,
    82.2% 88.284%,
    83.541% 86.312%,
    84.801% 84.201%,
    84.801% 84.201%,
    85.12% 83.613%,
    85.428% 83.014%,
    85.724% 82.403%,
    86.009% 81.781%,
    86.282% 81.148%,
    86.543% 80.506%,
    86.793% 79.853%,
    87.032% 79.191%,
    87.258% 78.52%,
    87.473% 77.84%,
    87.473% 77.84%,
    88.153% 77.897%,
    88.834% 77.883%,
    89.514% 77.802%,
    90.192% 77.654%,
    90.864% 77.441%,
    91.529% 77.165%,
    92.184% 76.827%,
    92.828% 76.429%,
    93.458% 75.973%,
    94.073% 75.46%,
    94.073% 75.46%,
    94.856% 74.659%,
    95.566% 73.733%,
    96.202% 72.696%,
    96.769% 71.559%,
    97.267% 70.334%,
    97.698% 69.035%,
    98.065% 67.673%,
    98.369% 66.26%,
    98.613% 64.81%,
    98.797% 63.334%,
    98.797% 63.334%,
    98.894% 62.023%,
    98.915% 60.717%,
    98.862% 59.423%,
    98.738% 58.146%,
    98.545% 56.892%,
    98.284% 55.668%,
    97.958% 54.48%,
    97.569% 53.334%,
    97.12% 52.235%,
    96.612% 51.191%,
    96.612% 51.191%,
    96.993% 50.688%,
    97.355% 50.158%,
    97.696% 49.599%,
    98.016% 49.009%,
    98.313% 48.387%,
    98.586% 47.73%,
    98.836% 47.038%,
    99.059% 46.308%,
    99.256% 45.539%,
    99.426% 44.728%
  );
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* 2) Paletas simplificadas, ordenadas */

/* 🌞 light */
html[data-theme="light"] {
  --bg: #f7f7f7;
  --text: #333333;
  --accent: #fcc61d;
  --clouds: #999;
  --clouds_backup: #c59560;
  --clouds_backup2: #8fa08d;
}

html[data-theme="dark"] {
  --bg: #07040a;
  --text: #f4eaef;
  --accent: #ff7a6a;
  --clouds: #7c5aa8;
}

/* 3) Reset & Base */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 20px;
  font-family: "Inknut Antiqua", serif;
  font-weight: 400;
  background-color: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  transition: background-color 0.3s, color 0.3s;
  line-height: 1.5;
}

/* 4) Container general */
.container {
  max-width: 800px;
  margin: 0 auto;
  margin-top: 60px;
  padding: 20px;
  position: relative;
  z-index: 1;
}

/* 5) Tipografía y secciones */
h1,
h2,
h3 {
  font-weight: 700;
}

header h1 {
  font-size: 2.5em;
  margin-bottom: 0.3em;
}

.section {
  margin-bottom: 5em;
}

.section h3 {
  font-size: 1.3em;
  margin-bottom: 0.5em;
}

p {
  margin-bottom: 1em;
}

a {
  text-decoration: none;
  color: var(--accent);
}

ul {
  margin: 0 0 1em 20px;
}

/* 6) Botón de acción */
.cta-button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 1.2em;
  text-decoration: none;
  background-color: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}

.cta-button:hover {
  background-color: var(--text);
  color: var(--bg);
}

/* 7) Header-Cloud */
.pre-header-cloud {
  display: flex;
  justify-content: center;
  padding-top: 50px;
}

.header-cloud {
  position: relative;
  display: inline-block;
  text-align: center;
  padding: 40px 80px;
  margin: 4rem auto 2rem;
  z-index: 1000;
}

.header-cloud::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(300px, 80vw, 700px);
  aspect-ratio: 1.4 / 1;
  background-color: var(--accent);
  clip-path: var(--nube);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
  z-index: -1;
}

.header-cloud > * {
  position: relative;
  z-index: 1;
  max-width: 100%;
  /*word-break: break-word;*/
}

/*
  .header-cloud > header,
  .header-cloud > footer {
    background: transparent;
    padding: 0;
    border-radius: 0;
  }
    */

/* 8) Fondo dinámico de nubes */
#backgroundContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  pointer-events: none;
  overflow: hidden;
  z-index: -2;
}

.cloud {
  position: absolute;
  background: var(--clouds);
  clip-path: var(--nube);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
  animation: float linear infinite;
}

/* Ejemplo de keyframes, ajusta nombres según lo necesites */
@keyframes float1 {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-30px, 20px) rotate(1deg);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes float2 {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(25px, -15px) rotate(-1deg);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes float3 {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-20px, -25px) rotate(2deg);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes float4 {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(35px, 10px) rotate(-2deg);
  }

  100% {
    transform: translate(0, 0);
  }
}

/* 9) Panel de controles */
nav {
  position: fixed;
  top: calc(10px + var(--safe-top));
  right: calc(10px + var(--safe-right));
  z-index: 1000;
  display: flex;
  gap: 10px;
  will-change: transform;
}

nav button {
  background-color: var(--accent);
  color: var(--bg);
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  transition: transform 0.2s, box-shadow 0.2s;
}

nav button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

nav button.active {
  box-shadow: 0 0 0 2px var(--text);
}

/* Botón de idioma arriba izq */
#toggleLang {
  position: fixed;
  top: calc(10px + var(--safe-top));
  left: 10px;
  z-index: 1000;
  background-color: var(--accent);
  color: var(--bg);
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  transition: transform 0.2s, box-shadow 0.2s;
  will-change: transform;
}

#toggleLang:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Responsive */
@media (max-width: 600px) {
  .container {
    padding: 10px;
    margin-top: 0px;
  }

  header h1 {
    font-size: 1.5em;
  }

  /*
      header h2 {
        font-size: 0.90em;
        margin-bottom: 0px;
      }
        */

  nav {
    font-size: 0.8em;
  }

  .header-cloud {
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 220px;
    padding-inline: 18px;
  }

  .header-cloud::before {
    width: calc(100vw - 24px);
    max-width: 480px;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .pre-header-cloud {
    display: flex;
    justify-content: center;
    margin-top: -50px;
    padding-inline: 6px;
  }
}

/* limpia el fondo y el padding de los hijos header/footer de .header-cloud */
.header-cloud > header,
.header-cloud > footer {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.header-cloud > * {
  max-width: 100%;
  word-break: break-word;
}

/*GALERIA*/
.galeria-meowrhino {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
  max-width: 1000px;

  margin-top: 10vh;
}

.web-card {
  text-align: center;
  position: relative;
}

.web-card {
  touch-action: manipulation;
}

.web-preview {
  position: relative;
  display: inline-block;
}

.img-ordenador {
  width: 100%;
  max-width: 800px;
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.img-movil {
  position: absolute;
  bottom: -30px;
  transform: translateX(-50%);
  width: 160px;
  border-radius: 2.5px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* @media (max-width: 600px) {
  Invertir layout: móvil grande, desktop pequeño (desactivado para probar vista unificada)
  .img-movil {
    position: relative;
    width: 100%;
    max-width: 350px;
    transform: none;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0 auto;
    display: block;
  }

  .img-ordenador {
    position: absolute;
    bottom: -20px;
    right: 10px;
    width: 35%;
    max-width: 140px;
    z-index: 2;
  }

  .web-preview.movil-izquierda .img-movil,
  .web-preview.movil-derecha .img-movil {
    left: auto;
    right: auto;
  }
} */

.web-preview.movil-izquierda .img-movil {
  left: 5%;
}

.web-preview.movil-derecha .img-movil {
  right: 5%;
}

footer {
  text-align: center;
}

footer a {
  text-decoration: none;
  color: var(--text);
}

footer a:hover {
  text-decoration: underline;
}

html[data-theme="heat"],
html[data-theme="snow"],
html[data-theme="cloud"],
html[data-theme="rain"] {
  --text-shadow: 0 1px 3.5px rgba(0, 0, 0, 0.8);
}

html[data-theme="dark"],
html[data-theme="storm"] {
  --text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

html[data-theme="fog"],
html[data-theme="darkCloud"],
html[data-theme="lightRain"] {
  --text-shadow: 0 1px 6px rgba(255, 255, 255, 0.65);
}

html[data-theme="light"] {
  --text-shadow: 0 1px 4px rgba(255, 255, 255, 0.7);
}

h1,
p,
h2,
h3 {
  text-shadow: var(--text-shadow, 0 1px 4px rgba(0, 0, 0, 0.35));
}

a {
  text-shadow: none;
}

.bullet-p {
  position: relative;
  padding-left: 1.5em;
}

.bullet-p::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--text);
  text-shadow: var(--text-shadow);
}

.web-card {
  position: relative;
}

.web-preview {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-ordenador,
.img-movil {
  transition: opacity 0.4s ease;
  z-index: 1;
}

/* Optimización con will-change cuando está animando */
.img-ordenador.breathing,
.img-movil.breathing {
  will-change: transform, opacity;
}

.img-ordenador:not(.breathing),
.img-movil:not(.breathing) {
  will-change: auto;
}

.img-fade {
  transition: opacity 250ms ease;
  opacity: 1;
}

.img-fade.is-hidden {
  opacity: 0;
}

.web-texto {
  margin-top: 3rem;
  padding: 0 2.5rem;
  text-align: center;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
}

.web-texto a {
  color: var(--accent);
}

/* === Slideshow: respirar + fade === */
@keyframes breathe {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes breatheShift {
  0% {
    transform: translateX(-50%) scale(1);
  }

  50% {
    transform: translateX(-50%) scale(1.06);
  }

  100% {
    transform: translateX(-50%) scale(1);
  }
}

/* solo las imágenes respiran, no el texto */
.img-ordenador.breathing {
  animation: breathe 900ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.img-movil.breathing {
  animation: breatheShift 900ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* reforzamos transición de opacidad para el swap */
.img-ordenador,
.img-movil {
  transition: opacity 250ms ease;
}

/* === Controles del slideshow === */
.slideshow-controls {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 10;
  opacity: 1;  /* Siempre visibles */
}

.slideshow-controls .controls-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slideshow-btn {
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  padding: 0;
}

.slideshow-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

.slideshow-btn:active {
  transform: scale(0.95);
}

.slideshow-btn.paused {
  background: var(--accent);
}

/* === Indicadores de progreso === */
.slide-indicators {
  display: flex;
  gap: 6px;
  align-items: center;
}

.slide-indicators .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: background 0.3s, transform 0.3s;
  cursor: pointer;
}

.slide-indicators .dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

.slide-indicators .dot.active {
  background: white;
  transform: scale(1.3);
}

@media (max-width: 600px) {
  .slideshow-controls {
    bottom: 10px;
  }

  .slideshow-btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .slide-indicators .dot {
    width: 6px;
    height: 6px;
  }
}

/* === Modal Fullscreen === */
.fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

.fullscreen-modal.active {
  display: flex;
}

.fullscreen-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease;
}

.fullscreen-modal .close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  z-index: 10001;
  font-weight: bold;
  line-height: 1;
}

.fullscreen-modal .close-btn:hover {
  background: white;
  transform: scale(1.1);
}

.fullscreen-modal .nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.8);
  color: #000;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  z-index: 10001;
}

.fullscreen-modal .nav-btn:hover {
  background: white;
  transform: translateY(-50%) scale(1.1);
}

.fullscreen-modal .nav-btn.prev-fullscreen {
  left: 20px;
}

.fullscreen-modal .nav-btn.next-fullscreen {
  right: 20px;
}

.fullscreen-indicators {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10001;
}

.fullscreen-indicators .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}

.fullscreen-indicators .dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.fullscreen-indicators .dot.active {
  background: white;
  transform: scale(1.4);
}

/* Cursor pointer para las imágenes clicables */
.img-ordenador,
.img-movil {
  cursor: pointer;
}

@media (max-width: 600px) {
  /* Mantener layout pero reducir la miniatura móvil para que no domine en pantallas pequeñas */
  .img-movil {
    width: min(32vw, 100px);
    bottom: -24px;
    /* left: 50%; */
    transform: translateX(-35%);
  }

  /* Opcional: asegurar que el contenedor no se desborda */
  .web-preview {
    max-width: 95vw;
  }
}

@media (max-width: 600px) {
  .fullscreen-modal .close-btn {
    width: 36px;
    height: 36px;
    font-size: 20px;
    top: 15px;
    right: 15px;
  }

  .fullscreen-modal .nav-btn {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .fullscreen-modal .nav-btn.prev-fullscreen {
    left: 10px;
  }

  .fullscreen-modal .nav-btn.next-fullscreen {
    right: 10px;
  }

  .fullscreen-indicators {
    bottom: 20px;
  }

  .fullscreen-indicators .dot {
    width: 10px;
    height: 10px;
  }
}