/* ============================================================
   BASE  ·  reset, tipografía y variables globales
   ============================================================ */

/* ---------- TIPOGRAFÍAS PROPIAS ----------
   Tropi Land  → títulos y botones
   Comfortaa   → todo el texto de cuerpo (300 / 400 / 700)
   Van en woff2: pesan la cuarta parte que el .ttf original.
   ------------------------------------------------------- */
@font-face{
  font-family:'Tropi Land';
  src:url('../fonts/tropiland.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Comfortaa';
  src:url('../fonts/comfortaa-300.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Comfortaa';
  src:url('../fonts/comfortaa-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Comfortaa';
  src:url('../fonts/comfortaa-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --marca:        #ff0a57;   /* rosa DAVINK */
  --negro:        #111111;
  --blanco:       #ffffff;

  --fuente:       'Comfortaa', 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
  --fuente-display:'Tropi Land', 'Comfortaa', 'Trebuchet MS', sans-serif;

  --alto-nav:     84px;
  --ancho-max:    1180px;
  --radio:        18px;
  --transicion:   .35s cubic-bezier(.22,.61,.36,1);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--alto-nav);
  -webkit-text-size-adjust:100%;   /* el móvil no reescala el texto solo */
}

/* Alto real de la pantalla en el móvil.
   100vh miente cuando la barra del navegador aparece y desaparece;
   100dvh sí sigue el alto visible de verdad. */
:root{
  --alto-real:100vh;
  --alto-real:100dvh;
  --seguro-arriba:env(safe-area-inset-top, 0px);
  --seguro-abajo:env(safe-area-inset-bottom, 0px);
  --seguro-izq:env(safe-area-inset-left, 0px);
  --seguro-der:env(safe-area-inset-right, 0px);
}

body{
  margin:0;
  font-weight:400;
  -webkit-tap-highlight-color:transparent;   /* sin destello gris al tocar */
  font-family:var(--fuente);
  background:var(--negro);
  color:var(--blanco);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }

h1,h2,h3,h4{ margin:0; line-height:.95; }
p{ margin:0; }

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

/* --- utilidades --- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- animación de entrada --- */
.aparece{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.aparece.visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .aparece{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}