/* ==========================================================================
   IDIOSLINGUAS - HOJA DE ESTILOS PRINCIPAL
   Identidad de marca:
   - Azul Real: #175B9E
   - Azul Marino / Subtítulos: #0F3C6E
   - Azul Cielo: #0284C7
   - Rojo Rubí: #E11D48
   - Amarillo Ámbar: #F59E0B
   - Verde Esmeralda: #26A65B / #48BB78
   - Tipografías: 'Fredoka' (600, 700) y 'Montserrat' (400, 600, 800, 900)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&display=swap');

:root {
  --brand-blue: #175B9E;
  --brand-navy: #0F3C6E;
  --brand-sky: #0284C7;
  --brand-red: #E11D48;
  --brand-yellow: #F59E0B;
  --brand-green: #26A65B;
  --brand-green-light: #48BB78;
  --bg-slate-soft: #F8FAFC;
  /* Colores oficiales de Preply */
  --preply-pink: #FF7AAC;
  --preply-pink-hover: #FF5E99;
  --preply-dark: #121118;
}

html {
  scroll-behavior: smooth;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Tipografía Fredoka */
.font-fredoka {
  font-family: 'Fredoka', cursive, sans-serif;
}

/* Tipografía Montserrat */
.font-montserrat {
  font-family: 'Montserrat', sans-serif;
}

/* Clases de Color de Marca */
.bg-brand-blue { background-color: var(--brand-blue); }
.bg-brand-navy { background-color: var(--brand-navy); }
.bg-brand-sky { background-color: var(--brand-sky); }
.bg-brand-red { background-color: var(--brand-red); }
.bg-brand-yellow { background-color: var(--brand-yellow); }
.bg-brand-green { background-color: var(--brand-green); }
.bg-preply-pink { background-color: var(--preply-pink); }
.bg-preply-dark { background-color: var(--preply-dark); }

.text-brand-blue { color: var(--brand-blue); }
.text-brand-navy { color: var(--brand-navy); }
.text-brand-sky { color: var(--brand-sky); }
.text-brand-red { color: var(--brand-red); }
.text-brand-yellow { color: var(--brand-yellow); }
.text-brand-green { color: var(--brand-green); }
.text-preply-pink { color: var(--preply-pink); }

.border-brand-blue { border-color: var(--brand-blue); }
.border-brand-sky { border-color: var(--brand-sky); }
.border-brand-red { border-color: var(--brand-red); }
.border-brand-green { border-color: var(--brand-green); }
.border-brand-yellow { border-color: var(--brand-yellow); }
.border-preply-pink { border-color: var(--preply-pink); }

/* ==========================================================================
   LIENZO Y FONDOS CON IDENTIDAD DE MARCA (IDIOSLINGUAS)
   Textura de puntos finos + orbes de luz ambiental basados en el logo
   ========================================================================== */

/* Fondo general para todo el sitio: Ligeramente tintado con micro-patrón y luz ambiental */
body {
  background-color: #F3F7FA;
  background-image: 
    /* Luz ambiental azul (arriba a la izquierda) */
    radial-gradient(circle at 10% 8%, rgba(2, 132, 199, 0.08) 0%, transparent 40%),
    /* Luz ambiental amarilla (arriba a la derecha) */
    radial-gradient(circle at 90% 18%, rgba(245, 158, 11, 0.06) 0%, transparent 35%),
    /* Luz ambiental verde (centro a la izquierda) */
    radial-gradient(circle at 4% 50%, rgba(38, 166, 91, 0.06) 0%, transparent 35%),
    /* Luz ambiental roja (zona inferior derecha) */
    radial-gradient(circle at 92% 75%, rgba(225, 29, 72, 0.04) 0%, transparent 30%),
    /* Micro-malla de puntos sutiles inspirada en el globo terráqueo */
    radial-gradient(rgba(2, 132, 199, 0.12) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 28px 28px;
  background-attachment: fixed;
}

/* Lienzo específico para secciones con textura */
.bg-brand-canvas {
  background-color: #F3F7FA;
  background-image: radial-gradient(rgba(2, 132, 199, 0.10) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Hero con ambientación de marca y reflejos orbitales */
.bg-brand-hero {
  position: relative;
  background: 
    radial-gradient(circle at 80% 20%, rgba(2, 132, 199, 0.11) 0%, transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(38, 166, 91, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.05) 0%, transparent 60%),
    linear-gradient(180deg, #F0F6FB 0%, #FFFFFF 100%);
}

/* Tarjeta con efecto glassmorphism limpio */
.bg-brand-glass {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Efecto de borde superior de color en tarjetas */
.card-accent-blue {
  border-top: 4px solid var(--brand-blue);
}

.card-accent-sky {
  border-top: 4px solid var(--brand-sky);
}

.card-accent-yellow {
  border-top: 4px solid var(--brand-yellow);
}

.card-accent-green {
  border-top: 4px solid var(--brand-green);
}

.card-accent-red {
  border-top: 4px solid var(--brand-red);
}

/* Líneas orbitales sutiles inspiradas en el logo */
.orbit-ring-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.25;
}

.bg-brand-card-glow {
  background: linear-gradient(180deg, #FFFFFF 0%, #F6FAFE 100%);
}

/* Animaciones sutiles */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.animate-float {
  animation: floatSlow 4s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.animate-pulse-glow {
  animation: pulseGlow 2.5s infinite;
}

/* Efectos de tarjeta */
.hover-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(23, 91, 158, 0.12), 0 10px 10px -5px rgba(2, 132, 199, 0.06);
}

/* Indicadores de Nivel */
.badge-level-a {
  background: rgba(2, 132, 199, 0.12);
  color: #0284C7;
  border: 1px solid rgba(2, 132, 199, 0.3);
}

.badge-level-b {
  background: rgba(245, 158, 11, 0.12);
  color: #D97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-level-c {
  background: rgba(38, 166, 91, 0.12);
  color: #1E824C;
  border: 1px solid rgba(38, 166, 91, 0.3);
}

/* Botón flotante de WhatsApp */
.floating-whatsapp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-whatsapp:hover {
  transform: scale(1.08) rotate(3deg);
}

/* Estilo para acordeón de FAQ */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out, padding 0.35s ease-out;
}

.faq-item.active .faq-content {
  max-height: 300px;
}

.faq-item.active .faq-chevron {
  transform: rotate(180deg);
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}