/* ============================================================
   COOSOFAN — Estilos globales
   ============================================================ */

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

/* Leaflet's internal panes/controls use z-index up to 1000 with no
   stacking context of their own, so they render above the sticky
   header (z-50). Giving .leaflet-container its own z-index contains
   all of that inside the map instead of letting it escape upward. */
.leaflet-container {
  z-index: 0;
}

/* ============================================================
   VARIABLES CSS
   ============================================================ */
:root {
  --primary: 148 82% 32%;
  --primary-foreground: 0 0% 100%;
  --primary-container: 148 60% 92%;
  --primary-container-foreground: 152 62% 17%;

  --secondary: 86 90% 44%;
  --secondary-foreground: 0 0% 100%;
  --secondary-container: 86 70% 92%;
  --secondary-container-foreground: 86 80% 18%;

  --tertiary: 152 62% 17%;
  --tertiary-foreground: 0 0% 100%;

  --background: 0 0% 100%;
  --foreground: 152 62% 17%;

  --surface: 0 0% 100%;
  --surface-foreground: 152 62% 17%;
  --surface-dim: 148 8% 95%;
  --surface-container-lowest: 0 0% 100%;
  --surface-container-low: 148 12% 98%;
  --surface-container: 148 8% 96%;
  --surface-container-high: 148 6% 94%;
  --surface-container-highest: 148 5% 91%;

  --outline: 148 5% 58%;
  --outline-variant: 148 10% 88%;

  --card: 0 0% 100%;
  --card-foreground: 152 62% 17%;

  --muted: 148 8% 95%;
  --muted-foreground: 148 8% 45%;

  --accent: 148 60% 92%;
  --accent-foreground: 148 82% 28%;

  --destructive: 0 72% 50%;
  --destructive-foreground: 0 0% 100%;

  --border: 148 10% 89%;
  --input: 148 10% 89%;
  --ring: 148 82% 32%;

  --radius: 0.75rem;
  --radius-sm: 0.375rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  border-color: hsl(var(--border));
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ============================================================
   ELEVATION
   ============================================================ */
.elevation-0 { box-shadow: none; }
.elevation-1 { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.06), 0 1px 2px -1px rgba(0,0,0,0.06); }
.elevation-2 { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05); }
.elevation-3 { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05); }
.elevation-4 { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.label-large {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   HERO CAROUSEL
   ============================================================ */
.hero-section {
  position: relative;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-section { min-height: 700px; }
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-slide.active { opacity: 1; }

/* Grid-stacking approach for content (same cell, only active visible) */
.hero-text-wrapper {
  display: grid;
  grid-template-columns: 1fr;
}
.hero-content {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
  pointer-events: none;
  user-select: none;
}
.hero-content.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  user-select: auto;
}

.slide-indicator {
  height: 6px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  padding: 0;
  background: rgba(255,255,255,0.4);
  width: 24px;
  flex-shrink: 0;
}
.slide-indicator.active {
  width: 40px;
  background: hsl(var(--secondary));
}
.slide-indicator:hover:not(.active) {
  background: rgba(255,255,255,0.65);
}

/* Slide "Instituto de Arte": el arte es claro, así que en pantallas anchas el degradado
   se aclara hacia la derecha para dejarlo ver. En mobile se usa el degradado estándar,
   porque el logo de la imagen queda justo detrás del texto del slide. */
.hero-overlay-arte {
  background: linear-gradient(to right, hsl(152 62% 17%), hsl(152 62% 17% / 0.9), hsl(152 62% 17% / 0.5));
}
@media (min-width: 1024px) {
  .hero-overlay-arte {
    background: linear-gradient(to right, hsl(152 62% 17%), hsl(152 62% 17% / 0.85) 35%, hsl(152 62% 17% / 0.15));
  }
}

.hero-arrow {
  position: absolute;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  width: 2.75rem;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 9999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hero-arrow:hover {
  background: hsl(var(--secondary));
  border-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}
.hero-arrow:focus-visible {
  outline: 2px solid hsl(var(--secondary));
  outline-offset: 2px;
}
/* Small screens: bottom-right, so they never sit on top of the hero text */
.hero-arrow-prev { bottom: 4.5rem; right: 4.25rem; }
.hero-arrow-next { bottom: 4.5rem; right: 1.5rem; }

/* Wide screens: centered on each side of the slide */
@media (min-width: 1024px) {
  .hero-arrow {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .hero-arrow-prev { left: 1.5rem; right: auto; }
  .hero-arrow-next { right: 1.5rem; }
}

/* ============================================================
   NAVIGATION DROPDOWNS
   ============================================================ */
.nav-dropdown {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  position: absolute;
  left: 0;
  /* top:100% with no margin-top so this box touches the trigger's box with
     zero gap — a gap here is a dead zone: the mouse leaves both the trigger
     and dropdown elements while crossing it, firing mouseleave early. */
  top: 100%;
  padding-top: 4px;
  width: 13rem;
  z-index: 50;
}
.nav-dropdown-inner {
  border-radius: var(--radius);
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  overflow: hidden;
  padding: 4px;
}
.nav-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ============================================================
   MOBILE MENU
   ============================================================ */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

/* ============================================================
   RANGE INPUT (SLIDER)
   ============================================================ */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  cursor: pointer;
  outline: none;
  border: none;
  background: linear-gradient(
    to right,
    hsl(var(--primary)) 0%,
    hsl(var(--primary)) var(--progress, 9%),
    hsl(var(--muted)) var(--progress, 9%),
    hsl(var(--muted)) 100%
  );
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  border: 2px solid hsl(var(--primary));
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  border: 2px solid hsl(var(--primary));
  cursor: pointer;
}
/* Firefox track fill workaround (via --progress not available) */
input[type="range"]::-moz-range-progress {
  background: hsl(var(--primary));
  height: 6px;
  border-radius: 9999px;
}

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
[data-animate="from-left"]  { transform: translateX(-30px); }
[data-animate="from-right"] { transform: translateX(30px); }

[data-animate].in-view { opacity: 1; transform: translate(0, 0); }

[data-delay="100"] { transition-delay: 100ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="400"] { transition-delay: 400ms; }

/* ============================================================
   CARD (BASE)
   ============================================================ */
.card {
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
}

/* ============================================================
   FORM INPUTS
   ============================================================ */
.form-input {
  display: flex;
  height: 2.5rem;
  width: 100%;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid hsl(var(--input));
  background-color: hsl(var(--background));
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}
.form-input::placeholder {
  color: hsl(var(--muted-foreground));
}

/* ============================================================
   QUICK SELECT CUOTA BUTTONS (calculator)
   ============================================================ */
.quick-cuota-btn,
.quick-plazo-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--radius) - 4px) !important;
  border: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  font-size: 0.75rem !important;
  font-weight: 500;
  padding: 0.3rem 0.65rem !important;
  transition: all 0.15s;
  cursor: pointer;
}
.quick-cuota-btn:hover,
.quick-plazo-btn:hover {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}
.quick-cuota-btn.active-btn,
.quick-plazo-btn.active-btn {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-color: hsl(var(--primary)) !important;
}

/* ============================================================
   PROSE CONTENT LISTS (dynamic pages: proyección, objetivos, etc.)
   ============================================================ */
.prose ul {
  list-style: disc !important;
  padding-left: 1.5rem !important;
  margin: 1rem 0 !important;
}
.prose ol {
  list-style: decimal !important;
  padding-left: 1.5rem !important;
  margin: 1rem 0 !important;
}
.prose ul li,
.prose ol li {
  display: list-item !important;
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.prose ul ul,
.prose ol ul {
  list-style: circle !important;
  margin: 0.5rem 0 !important;
}
.prose h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: hsl(var(--foreground)) !important;
  margin: 2rem 0 1rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
}
.prose h2:first-child {
  margin-top: 0 !important;
}
.prose h3 {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: hsl(var(--primary)) !important;
  margin: 1.5rem 0 0.5rem !important;
}
.prose > p:first-child {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: hsl(var(--foreground)) !important;
  margin: 0 0 1.5rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
}