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

/* The actual font is loaded dynamically in site.blade.php via
   $appearance->font_url (preloaded, non-render-blocking) — this file used
   to also @import Plus Jakarta Sans directly, which duplicated that
   request and added an extra hop to the critical request chain (and would
   silently fetch the wrong font if an admin picks a different one). */

/* Wrapped in the same "base" cascade layer Tailwind's compiled build uses
   (@vite('resources/css/frontend.css') loads first, so it registers the
   theme/base/components/utilities layer order before this file's <link>
   appears). Un-layered CSS always beats layered CSS regardless of
   specificity, so without this, plain selectors below like `a { color:
   inherit }` would silently win over every Tailwind text/background
   utility applied to an <a>, no matter how specific the utility class. */
@layer base {

/* 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%;

  --app-radius: 0.75rem;
  --app-radius-sm: 0.375rem;
  --app-radius-lg: 1rem;
  --app-radius-xl: 1.5rem;
  --app-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 corners, below the hero text, one on each side */
.hero-arrow-prev { bottom: 5rem; left: 1.5rem; }
.hero-arrow-next { bottom: 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(--app-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(--app-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(--app-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(--app-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;
}

} /* @layer base */