@font-face {
  /* Define la fuente personalizada */
  font-family: 'montserratFont';
  /* Nombre con el que la llamarás en CSS */
  src: url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,100..900&display=swap');
}

body {
  min-height: 100vh;
  /* Asegura que el cuerpo ocupe al menos toda la altura de la ventana */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 20px;
  background-image: url('img/fondo.png');
  background-size: cover;
  background-position: center;
}

.tarjeta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 1650px;
  min-height: auto;
  background-color: #fff;
  border: 1px solid #d1d5db;
  border-radius: 35px;
  box-shadow: 0 12px 30px rgba(18, 8, 22, 0.08);
  padding: 50px;
}

@media (min-width: 768px) {

  /* Estilos para pantallas medianas y grandes */
  .tarjeta {
    height: 750px;
  }
}

@media (max-width: 767px) {

  /* Estilos para pantallas pequeñas */
  .tarjeta {
    height: auto;
    padding: 15px;
  }
}

@media (max-width: 768px) {

  /* Estilos para pantallas pequeñas (responsive) */
  .tarjeta {
    padding: 20px;
  }
}

/* 
    ".tarjeta img": selector descendiente. El espacio entre ".tarjeta"
    e "img" significa "cualquier <img> que esté adentro de un elemento
    con class="tarjeta", sin importar cuántos niveles de profundidad
    haya en el medio". Es distinto de ".tarjeta > img" (que solo
    aplicaría a un <img> que sea HIJO DIRECTO de .tarjeta).
*/
.tarjeta img {
  width: 100%;
  max-width: 700px;
  height: auto;
  /* Mantiene la proporción */
  border-radius: 40px;
  object-fit: cover;
}

/* 
    ".pagina-signin .tarjeta img": misma lógica de selector
    descendiente, pero encadenada dos veces: "un <img>, adentro de
    algo con class='tarjeta', adentro de algo con class='pagina-signin'"
*/
/* En la página de signin la imagen queda del lado derecho, así que se alinea a la derecha */
.pagina-signin .tarjeta img {
  margin-left: auto;
}

.img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.bienvenida {
  font-size: 30px;
  font-weight: bold;
  font-family: montserratFont, sans-serif;
  /* Usa la fuente personalizada y si falla al cargar usa TimesNew Roman*/
  color: #6645ac;
  margin-bottom: 15px;
}

.texto {
  font-family: montserratFont, sans-serif;
  font-size: 18px;
  color: grey;
  margin-bottom: 20px;
}

/* 
    ".signin-texto, .login-texto": la coma arma una LISTA de
    selectores. Significa "aplicá este mismo bloque de estilos a
    CUALQUIER elemento que tenga la clase signin-texto, Y TAMBIÉN a
    cualquiera que tenga login-texto" — evita escribir el mismo
    bloque de propiedades dos veces cuando dos clases distintas
    necesitan exactamente el mismo estilo.
*/
.signin-texto,
.login-texto {
  font-family: montserratFont, sans-serif;
  font-size: 15px;
  color: White;
}

.recuerda-texto {
  font-family: montserratFont, sans-serif;
  font-size: 13px;
  color: grey;
  margin-top: 10px;
}

.textoInicioModal {
  font-family: montserratFont, sans-serif;
  font-size: 20px;
  color: white;
}

.btnEnviar {
  width: 100%;
  padding: 12px;
  background-color: #6645ac;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* 
    ":hover" es una PSEUDO-CLASE: no selecciona por clase/id/etiqueta,
    sino por un ESTADO del elemento (acá, "mientras el mouse está
    encima"). ".btnEnviar:hover" = "el elemento con class='btnEnviar',
    pero solo mientras el mouse lo está tocando". Apenas el mouse se
    va, deja de aplicarse automáticamente, sin que haga falta JS.
*/
.btnEnviar:hover {
  /* Efecto hover para el botón */
  background-color: #26176a;
  box-shadow: 0 4px 8px rgba(102, 69, 172, 0.5);
}

.btnSignIn,
.btnLogIn {
  width: 25%;
  padding: 12px;
  background-color: #372781;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btnSignIn:hover,
.btnLogIn:hover {
  /* Efecto hover para el botón */
  background-color: #26176a;
  box-shadow: 0 4px 8px rgba(102, 69, 172, 0.5);
}

.btnNavbar {
  margin-top: 7px;
  width: 100%;
  height: 75%;
  padding: 12px;
  background-color: #372781;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btnNavbar:hover {
  background-color: #26176a;
  box-shadow: 0 4px 8px rgba(102, 69, 172, 0.5);
}

/* 
    Acá se combinan las dos cosas ya explicadas arriba: una LISTA (la
    coma) de dos selectores, cada uno con una PSEUDO-CLASE distinta.
    ":active" = mientras se lo está clickeando (botón apretado).
    ":focus" = cuando quedó seleccionado por teclado (Tab) o click.
*/
.btnNavbar:active,
.btnNavbar:focus {
  background-color: #26176a;
  outline: none;
  box-shadow: 0 4px 8px rgba(102, 69, 172, 0.5);
}

/* ============================================================
   ESTILOS PERSONALIZADOS PARA LA PÁGINA PRINCIPAL (index)
   Estilo: minimalista sobre fondo blanco, con sombras suaves
   (no el "clay" inflado de la versión anterior) y la paleta de
   marca: #0f0735, #6645ac, #8b4f90, #c892cd.
   ============================================================ */

/* ---------- 1. VARIABLES DE DISEÑO (design tokens) ----------
   Centralizan la paleta y así, si el día de mañana quieren
   cambiar un color, se cambia acá una sola vez en vez de buscarlo
   en todo el archivo.

   ":root" es un selector especial: apunta al elemento raíz del
   documento (en HTML, es el propio <html>). Se usa por convención
   para declarar variables CSS, porque al vivir en la raíz quedan
   disponibles para TODO el documento.

   Las propiedades que empiezan con "--" (por ejemplo "--clay-bg")
   no son propiedades CSS reales: son VARIABLES definidas por
   nosotros, con el nombre que elijamos. Para usarlas en cualquier
   otra regla del archivo, se escribe var(--nombre-de-la-variable),
   como se ve más abajo en selectores como ".navbar". */
:root {
    /* Fondo general de la página: blanco, para que resalten los colores */
    --clay-bg: #ffffff;
    /* Superficie de las tarjetas: un blanco apenas tintado, para
       que se note un mínimo relieve contra el fondo blanco puro */
    --clay-surface: #f8f6fd;
    /* Los 4 colores de marca */
    --brand-ink: #0f0735; /* el más oscuro: texto principal y panel de Contacto */
    --brand-primary: #6645ac; /* violeta principal: botones y sección Objetivo */
    --brand-magenta: #8b4f90; /* acento de la sección Funcionamiento */
    --brand-lilac: #c892cd; /* acento de la sección Integrantes */
    /* Alias de texto, para que el resto del CSS quede más legible */
    --clay-text: var(--brand-ink);
    --clay-text-soft: #6c6291;
    /* Sombra suave (un solo tono, no doble como en la versión clay) */
    --shadow-suave: 0 14px 34px rgba(15, 7, 53, 0.1);
    --shadow-suave-chica: 0 6px 16px rgba(15, 7, 53, 0.1);
    /* Se mantienen estas dos variables porque la navbar (que no se
       modifica) las usa para su doble sombra flotante */
    --clay-shadow-dark: rgba(15, 7, 53, 0.16);
    --clay-shadow-light: rgba(255, 255, 255, 0.8);
    /* Variables del TEMA (claro/oscuro/automático). Estos son los valores
       del modo claro; tema.js los pisa con los del modo oscuro (o con
       tonos intermedios) cuando hace falta. */
    --card: #ffffff;          /* fondo de las tarjetas */
    --navbar-bg: #ffffff;     /* fondo de la navbar */
    --borde-input: #dee2e6;   /* borde de los campos de texto */
    --hover: #0f0735;         /* botón violeta al pasar el mouse */
    --verde-fondo: #dff5e7;
    --verde-texto: #1f7a43;
    --amarillo-fondo: #fff3c4;
    --amarillo-texto: #8a6400;
    --rojo-fondo: #fde2e2;
    --rojo-texto: #a12626;
    --oscuro: 0;              /* 0 = todo claro ... 1 = todo oscuro */
}

/* ---------- 2. TIPOGRAFÍA ----------
   Se cargan desde Google Fonts en el <head> del HTML.
   Baloo 2: fuente redondeada para títulos.
   Nunito: fuente redondeada pero más sobria, para texto de lectura.

   Los tres selectores de abajo, separados por coma, son cada uno un
   selector descendiente (ver la nota completa sobre esto más arriba,
   junto a ".tarjeta img"): ".pagina-principal input" selecciona
   cualquier <input> que esté adentro de algo con esa clase, y así
   con los otros dos. */
.pagina-principal,
.pagina-principal input,
.pagina-principal button {
    font-family: 'Nunito', sans-serif; /* Tipografía base para todo el body del index */
}

.pagina-principal h1,
.pagina-principal h2,
.pagina-principal h3 {
    font-family: 'Baloo 2', sans-serif; /* Tipografía redondeada para los títulos */
}

html {
    scroll-behavior: smooth; /* Hace que el scroll sea suave al hacer click en enlaces internos */
}

body {
    display: block; /* Restablece el comportamiento normal de la página */
    margin: 0; /* Elimina márgenes por defecto del navegador */
    /* OJO ACÁ - esto era el bug del borde blanco: más arriba en este
       mismo archivo (sección de AUTH, pensada para las páginas de
       login/registro) hay una regla "body { padding: 20px; }". Como
       esta otra regla de acá (pensada para esta página) nunca decía
       nada sobre "padding", ese padding de 20px se quedaba puesto
       IGUAL en toda la página, empujando todo el contenido 20px para
       adentro por los 4 lados y dejando ver el blanco del fondo del
       body alrededor — el "borde" que no debería estar. Con este
       "padding: 0" lo cancelamos acá, explícitamente. */
    padding: 0;
    overflow-x: hidden; /* Evita scroll horizontal si la sección usa 100% */
    /* Antes había un "padding-top: 110px" acá, para dejarle lugar a
       la navbar arriba de todo. Ya no hace falta: ahora la navbar
       flota literalmente ENCIMA de la sección Home (ver el punto 3,
       más abajo), en vez de empujarla hacia abajo. */
    /* "background" (shorthand) en vez de "background-color": esto es
       importante porque más arriba en este mismo archivo (sección de
       AUTH) hay una regla "body { background-image: url('img/fondo.png') }"
       pensada para los modales. Al ser shorthand, esta línea resetea
       también esa imagen de fondo, así el index queda con blanco liso. */
    background: var(--clay-bg);
    color: var(--clay-text); /* Color de texto por defecto */
}

/* scroll-margin-top: cuando tocás un link de la navbar (ej: "#objetivo")
   y el navegador hace scroll automático hasta ahí, este margen extra
   evita que el título de la sección quede tapado por la navbar
   flotante (que ya no reserva su propio espacio fijo, como sí hacía
   el "padding-top" del body que sacamos arriba). */
#home,
#funcionamiento,
#objetivo,
#integrantes,
#contacto {
    scroll-margin-top: 110px;
}

main {
    width: 100%; /* Hace que el contenido principal use todo el ancho disponible */
}

/* ---------- 3. NAVBAR TRANSPARENTE, DE PUNTA A PUNTA ----------
   A diferencia de la versión "isla flotante" de antes, esta va
   pegada a los 4 bordes de la pantalla (top/left/right en 0, sin
   redondeado) y totalmente transparente: se ve la foto del hero
   directo A TRAVÉS de ella, sin ninguna caja ni desenfoque de por
   medio — como en la imagen de referencia. */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 0; /* Sin bordes redondeados: va de punta a punta */
    background: transparent; /* Totalmente transparente por defecto */
    box-shadow: none;
    border: none;
    padding: 22px 32px; /* Bastante aire arriba/abajo mientras está transparente (se achica al hacer scroll, ver más abajo) */
    z-index: 1050; /* Bien arriba de todo */
    /* transition: anima estos 3 valores cada vez que cambian (por
       ejemplo, al agregarse/sacarse la clase .navbar-scrolled más
       abajo), en vez de que el cambio se vea de golpe. */
    transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

/* Mientras la navbar está transparente (arriba de todo, sobre la
   foto), el texto de los links va en blanco: sobre una foto oscura,
   el violeta oscuro habitual del sitio no se leería. */
.navbar-nav .nav-link {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); /* Sombra chica: ayuda a que el texto blanco no se "pierda" en partes claras de la foto */
}

.navbar-nav .nav-link:hover {
    color: var(--brand-lilac); /* Se resalta con el lila de marca al pasar el mouse */
}

/* El logo (img/quickpark.png) es violeta oscuro sobre fondo
   transparente: sobre una navbar transparente y una foto oscura,
   prácticamente no se vería. filter: brightness(0) invert(1) es un
   truco 100% CSS para volver blanco cualquier logo, sin necesitar
   otro archivo de imagen: primero "brightness(0)" lo vuelve todo
   negro (respetando la forma/transparencia original del PNG), y
   después "invert(1)" invierte esos colores, convirtiendo el negro
   en blanco. */
.navbar-brand img {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

/* ---------- 3.1 NAVBAR "SÓLIDA" AL HACER SCROLL ----------
   Estas reglas solo se aplican cuando la navbar tiene la clase
   "navbar-scrolled" puesta (se la agrega un poquito de JS, más abajo
   en el HTML, cuando la persona ya bajó más allá del hero). Sirve
   para que, sobre el fondo blanco de las demás secciones, la navbar
   siga siendo legible en vez de quedar invisible (texto blanco sobre
   fondo blanco no se leería). */
.navbar.navbar-scrolled {
    background: var(--navbar-bg); /* Fondo blanco SÓLIDO (antes 0.9 de opacidad: se transparentaba el texto de atrás) */
    box-shadow: 0 0 28px rgba(15, 7, 53, 0.22); /* Sombra alrededor, para que se note que es un apartado aparte */
    padding: 12px 32px; /* Se achica un poco: ya no necesita tanto aire */
}

.navbar.navbar-scrolled .navbar-nav .nav-link {
    color: var(--clay-text); /* Vuelve al violeta oscuro habitual */
    text-shadow: none; /* Ya no hace falta la sombra: hay contraste de sobra sobre fondo claro */
}

.navbar.navbar-scrolled .navbar-nav .nav-link:hover {
    color: var(--brand-primary);
}

.navbar.navbar-scrolled .navbar-brand img {
    filter: none; /* Vuelve a sus colores originales (violeta) */
}

/* ---------- 3.2 NAVBAR CON EL MENÚ DESPLEGADO (CELULAR) ----------
   Cuando se toca el ícono ☰ y el menú se extiende, la navbar pasa a
   ser blanca sólida (aunque esté arriba de todo, sobre la foto), con
   los links oscuros y una sombra alrededor, así se ve como un apartado
   aparte y el texto de atrás no se mezcla con los botones.

   ":has(...)" significa "que tenga adentro...": acá, una navbar que
   tiene adentro el menú con la clase "show" (desplegado) o
   "collapsing" (mientras se está abriendo o cerrando). */
.navbar:has(.navbar-collapse.show),
.navbar:has(.navbar-collapse.collapsing) {
    background: var(--navbar-bg);
    box-shadow: 0 0 28px rgba(15, 7, 53, 0.22);
    border-radius: 0 0 22px 22px; /* Esquinas de abajo redondeadas */
}

.navbar:has(.navbar-collapse.show) .navbar-nav .nav-link,
.navbar:has(.navbar-collapse.collapsing) .navbar-nav .nav-link {
    color: var(--clay-text);
    text-shadow: none;
}

.navbar:has(.navbar-collapse.show) .navbar-brand img,
.navbar:has(.navbar-collapse.collapsing) .navbar-brand img {
    filter: none; /* El logo vuelve a su violeta original sobre el fondo blanco */
}

/* En celular, el menú desplegable (el que aparece al tocar el ícono
   ☰) se arma DENTRO del mismo <nav>, así que ya usa el mismo fondo
   que la navbar (transparente sobre la foto, o sólido claro cuando
   está en modo "navbar-scrolled") sin necesitar ninguna caja propia.
   OJO: antes había reglas acá que le agregaban un fondo, bordes
   redondeados y margen PROPIOS al menú desplegado — eso era lo que
   se veía como un "cuadrado gris" de más, separado de la navbar. Se
   sacó a propósito para que quede plano y normal.
   Lo único que sigue haciendo falta es que el color del texto de los
   links coincida con el de la navbar en cada estado (blanco sobre la
   foto, oscuro cuando ya se hizo scroll) — eso ya lo resuelven las
   reglas de ".navbar-nav .nav-link" de más arriba, así que acá no
   queda nada para agregar. */

/* ---------- 4. MODALES (login / registro) ----------
   No se toca su diseño: se mantiene el fondo transparente para que
   se note la tarjeta blanca de adentro (definida en la sección de
   AUTH de este mismo archivo). */
.modal {
    background: transparent; /* Fondo transparente del modal */
}

.modal-content {
    background-image: url('img/fondo.png'); /* Imagen de fondo */
    background-position: center; /* Centra la imagen */
    background-size: cover; /* La imagen cubre todo el espacio */
    background-repeat: no-repeat; /* No repite la imagen */
    border: none; /* Sin bordes */
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2); /* Sombra ligera */
}

/* ---------- 5. SECCIONES GENERALES ---------- */
.seccion {
    width: 100%; /* Asegura que la sección ocupe todo el ancho del contenedor principal */
    min-width: 100%; /* Evita que se reduzca por algún contenedor padre */
    padding: 96px 24px; /* Espacio interno arriba/abajo y a los costados */
    display: flex; /* Usa flexbox para centrar contenido */
    flex-direction: column; /* Apila el contenido verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */
    box-sizing: border-box; /* El padding no suma a la altura total */
    animation: aparecer 0.7s ease both; /* Animación de entrada al cargar la página */
}

.seccion-contenido {
    width: 100%; /* Ocupa todo el ancho disponible */
    max-width: 1100px; /* Pero no más de 1100px, para que el texto no se estire de más en pantallas grandes */
}

.eyebrow {
    display: inline-block; /* Para que el padding funcione como una "píldora" y no como bloque completo */
    font-weight: 700; /* Texto en negrita */
    font-size: 13px; /* Tamaño chico, es una etiqueta secundaria */
    letter-spacing: 2px; /* Separación entre letras, le da aire al texto en mayúscula */
    text-transform: uppercase; /* Todo en mayúsculas */
    color: var(--brand-primary); /* Color violeta de marca */
    background: var(--clay-surface); /* Fondo clarito */
    padding: 6px 16px; /* Espacio interno de la píldora */
    border-radius: 999px; /* Redondeo total: queda forma de píldora/cápsula */
    box-shadow: var(--shadow-suave-chica); /* Sombra suave */
    margin-bottom: 18px; /* Separación con el título que viene debajo */
}

/* ---------- 6. SECCIÓN HOME: LA FOTO OCUPA TODA LA PANTALLA ----------
   La diferencia clave con antes: el "background-image" ahora está
   puesto en la SECCIÓN (#home.seccion-home), no en el panel de texto
   de adentro. Una <section> por defecto mide el 100% del ancho de la
   ventana, así que su fondo también cubre ese 100% — a diferencia de
   .seccion-contenido (el que envuelve el texto), que sí tiene un
   máximo de 1100px para que el texto no se estire de más. */
.seccion-home {
    position: relative; /* Para poder ubicar el velo oscuro encima del fondo con position: absolute */
    display: flex; /* Centra el texto de adentro, tanto vertical como horizontalmente */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal (antes: flex-start, alineado a la izquierda) */
    min-height: 100vh; /* Ocupa toda la altura de la pantalla: ya no hace falta restarle nada, porque la navbar flota ENCIMA en vez de empujar el contenido */
    padding: 40px 24px;
    overflow: hidden; /* Recorta el fondo si sobra en algún borde */
    /* La foto de fondo, a todo el ancho de la sección (o sea, a todo
       el ancho de la pantalla) */
    background-image: url('img/fondoindex.png');
    background-size: cover; /* La imagen cubre toda la sección */
    background-position: center; /* Centrada, se recorta parejo de los 4 lados */
}

/* 
    ::before es un PSEUDO-ELEMENTO (no selecciona algo que ya existe en
    el HTML, sino que CREA una capa nueva "antes" del contenido real
    del elemento). Se usa acá para el velo oscuro, así no hace falta
    agregar un <div> extra en el HTML solo para eso.
*/
.seccion-home::before {
    content: ""; /* Obligatorio en los pseudo-elementos, aunque quede vacío */
    position: absolute; /* Se ubica encima del fondo, atrás del texto */
    inset: 0; /* Atajo que equivale a "top: 0; right: 0; bottom: 0; left: 0" */
    /* Degradé oscuro, para que el texto blanco se lea bien sin
       importar los colores de la foto de fondo */
    background: linear-gradient(180deg, rgba(15, 7, 53, 0.25) 0%, rgba(15, 7, 53, 0.55) 100%);
}

/* 
    .seccion-contenido, adentro de #home, necesita quedar por ENCIMA
    del velo (::before). Como el velo tiene position:absolute, hace
    falta position:relative acá también para que z-index lo ubique
    en primer plano, por encima del velo.
*/
.seccion-home .seccion-contenido {
    position: relative;
    z-index: 1;
}

.hero-panel {
    display: flex; /* Apila el texto en columna */
    flex-direction: column;
    align-items: center; /* Centrado (antes: flex-start, alineado a la izquierda) */
    text-align: center; /* Antes: left */
}

.hero-panel .eyebrow {
    background: rgba(255, 255, 255, 0.16); /* Fondo translúcido claro, ya que acá el fondo de atrás es la foto */
    color: white;
    box-shadow: none; /* No hace falta sombra sobre una foto */
}

.hero-panel h1 {
    font-size: 42px; /* Título grande, es el elemento principal de la página */
    line-height: 1.2;
    color: white; /* Blanco: va sobre la foto, no sobre fondo claro */
    max-width: 640px;
    margin: 0 0 14px;
}

/* 
    .resaltado: le da a la palabra "mejor" (envuelta en un <span> en
    el HTML) un color distinto al resto del título. Al ser un <span>
    dentro del <h1>, sigue siendo parte del mismo título y del mismo
    tamaño de letra — solo cambia el color de ESA palabra puntual.
*/
.resaltado {
    color: var(--brand-lilac); /* Lila claro, se distingue del blanco del resto del título */
}

.hero-panel .lead {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85); /* Blanco suave, se lee bien sobre el velo oscuro */
    max-width: 560px;
    margin: 0;
}

/* Botón grande "Iniciar sesión" debajo del texto del hero: así en el
   celular no hace falta desplegar el menú ☰ para entrar. Blanco con
   texto violeta para que resalte sobre la foto oscura. */
.btn-hero {
    margin-top: 28px;
    background: #ffffff;
    color: var(--brand-primary);
    border: 0;
    border-radius: 50px; /* Bien redondeado, como los otros botones */
    padding: 14px 40px;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    font-size: 18px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-hero:hover {
    background: var(--brand-lilac); /* Se pinta del lila de marca al pasar el mouse */
    color: #ffffff;
    transform: translateY(-2px); /* Se levanta un poquito */
}

/* ---------- 7.1 CRÁTERES DECORATIVOS (estilo claymorphism) ----------
   Círculos "hundidos" de fondo para llenar el espacio vacío alrededor
   del contenido. Se usan en todas las secciones menos en Home (ahí la
   protagonista es la foto). Son puramente decorativos.

   Los 4 selectores de abajo son una LISTA separada por comas (misma
   idea que ".signin-texto, .login-texto" explicado más arriba), pero
   acá cada uno empieza con "#": selecciona por ID en vez de por clase.
   El resultado es "aplicá este bloque a la sección con id='funcionamiento',
   Y TAMBIÉN a la de id='objetivo', Y TAMBIÉN..." etc. */
#funcionamiento,
#objetivo,
#integrantes,
#contacto {
    position: relative; /* Para que los cráteres (position: absolute) se ubiquen respecto a la sección */
    overflow: hidden; /* Recorta los cráteres que sobresalen del borde de la sección */
}

/* ---------- 7.0 MANCHAS DE COLOR DE FONDO ("vida" sin agregar tarjetas) ----------
   Un degradé circular (radial-gradient), grande, MUY desenfocado
   (blur) y con poca opacidad, ubicado en una esquina de cada
   sección. La idea es la misma que las fotos de referencia que
   mandaste: en vez de dejar el fondo en blanco liso entre tarjetas,
   queda una nube de color de marca bien tenue, que le da un poco de
   vida a la página sin volverse otra tarjeta ni distraer del texto.

   "::before" crea una capa nueva, así no hace falta agregar ningún
   <div> extra en el HTML solo para esto. Con z-index -2 queda MÁS
   atrás que los cráteres (que están en -1), para no taparlos. */
#funcionamiento::before,
#objetivo::before,
#integrantes::before {
    content: "";
    position: absolute;
    inset: -15%; /* Un poco más grande que la sección, para que el desenfoque no deje un borde recto visible */
    z-index: -2;
    opacity: 0.16; /* Bien sutil: es un fondo, no el protagonista */
    filter: blur(70px); /* Desenfoque fuerte: convierte el círculo en una "nube" difusa de color */
    pointer-events: none; /* No interfiere con clicks */
}

#funcionamiento::before {
    /* "circle at 15% 15%": el centro del degradé queda arriba a la
       izquierda de la sección. Va de --brand-magenta (el acento de
       esta sección) a transparente. */
    background: radial-gradient(circle at 15% 15%, var(--brand-magenta) 0%, transparent 60%);
}

#objetivo::before {
    background: radial-gradient(circle at 85% 10%, var(--brand-primary) 0%, transparent 55%);
}

#integrantes::before {
    background: radial-gradient(circle at 10% 85%, var(--brand-lilac) 0%, transparent 55%);
}

.crater {
    position: absolute; /* Se ubica libremente dentro de su sección */
    border-radius: 50%; /* Círculo perfecto */
    background: var(--clay-surface); /* Mismo tono clarito que el resto de las superficies */
    /* Doble sombra hacia adentro (inset): simula un cráter hundido en
       vez de un botón que sobresale, que es el efecto clay clásico */
    box-shadow: inset 8px 8px 16px rgba(15, 7, 53, 0.06),
        inset -8px -8px 16px rgba(255, 255, 255, 0.8);
    z-index: -1; /* Queda detrás del contenido de la sección (con 0 quedaba adelante) */
    pointer-events: none; /* No interfiere con clicks, es solo decoración */
}

.crater-1 {
    width: 260px;
    height: 260px;
    top: 40px; /* Ahora queda completo dentro de la sección, ya no se corta contra el borde */
    left: 20px;
}

.crater-2 {
    width: 160px;
    height: 160px;
    bottom: 40px;
    right: 8%;
}

.crater-3 {
    width: 90px;
    height: 90px;
    top: 18%;
    right: 20px;
}

/* Cráteres de la sección Objetivo */
.crater-4 {
    width: 220px;
    height: 220px;
    top: 30px;
    right: 20px; /* Arriba a la derecha */
}

.crater-5 {
    width: 130px;
    height: 130px;
    bottom: 10%;
    left: 20px; /* Abajo a la izquierda */
}

/* Cráteres de la sección Integrantes */
.crater-6 {
    width: 200px;
    height: 200px;
    bottom: 30px;
    left: 6%; /* Abajo a la izquierda */
}

.crater-7 {
    width: 110px;
    height: 110px;
    top: 8%;
    right: 4%; /* Arriba a la derecha */
}

/* Cráteres de la sección Contacto */
.crater-8 {
    width: 240px;
    height: 240px;
    top: 30px;
    left: 10%; /* Arriba, centrado hacia la izquierda */
}

.crater-9 {
    width: 140px;
    height: 140px;
    bottom: 30px;
    right: 12%; /* Abajo a la derecha */
}

/* ---------- 8. SECCIÓN FUNCIONAMIENTO: PASOS ----------
   "#funcionamiento .eyebrow": combina un ID con un selector
   descendiente. Se lee de derecha a izquierda: "cualquier elemento
   con class='eyebrow' que esté adentro (a cualquier profundidad) del
   elemento con id='funcionamiento'". Esto es lo que permite que la
   MISMA clase ".eyebrow" tenga un color distinto en cada sección
   (acá magenta, en #objetivo violeta, etc.) sin tener que inventar
   una clase nueva por cada sección. */
#funcionamiento .eyebrow {
    color: var(--brand-magenta); /* La etiqueta toma el acento de esta sección */
}

#funcionamiento h2 {
    font-size: 34px; /* Tamaño del título de sección */
    margin-bottom: 14px;
}

/* 
    "#funcionamiento > .seccion-contenido > p": acá el ">" es el
    COMBINADOR DE HIJO DIRECTO (distinto al espacio, que es "descendiente
    a cualquier profundidad"). Este selector dice: "un <p> que sea
    HIJO DIRECTO de un elemento con class='seccion-contenido', que a
    su vez sea HIJO DIRECTO del elemento con id='funcionamiento'".

    ¿Por qué usar ">" en vez de espacio acá? Porque adentro de
    .seccion-contenido también hay <p> dentro de las tarjetas .paso
    (mirá el HTML: cada .paso tiene su propio <p> con la descripción
    del paso). Si hubiéramos escrito "#funcionamiento p" (con espacio,
    sin ">"), el selector agarraría TODOS esos <p> de las tarjetas
    también, no solo el párrafo introductorio de la sección — y les
    aplicaría estos mismos márgenes, rompiendo el diseño de las
    tarjetas. El ">" nos deja apuntar puntualmente solo al <p> que
    está pegado directamente adentro de .seccion-contenido.
*/
#funcionamiento > .seccion-contenido > p {
    color: var(--clay-text-soft); /* Texto introductorio en tono suave */
    max-width: 720px; /* Limita el ancho para mejor lectura */
    margin-bottom: 40px; /* Separación con los pasos de abajo */
}

.pasos {
    display: flex; /* Apila las 3 imágenes de los pasos una debajo de la otra */
    flex-direction: column;
    gap: 28px; /* Espacio entre cada paso */
}

/* Cada paso es una imagen que ya trae número, título, texto y celular.
   Ocupa todo el ancho disponible y tiene los mismos bordes redondeados
   y la misma sombra suave que las tarjetas del sitio. */
.paso-banner {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 26px;
    box-shadow: var(--shadow-suave);
}

.paso {
    flex: 1 1 260px; /* Puede crecer/achicarse, con base de 260px */
    background: #ffffff; /* Tarjeta blanca */
    border-radius: 26px; /* Bordes bien redondeados */
    padding: 32px 26px; /* Espacio interno */
    box-shadow: var(--shadow-suave); /* Sombra suave, no doble */
}


.paso-numero {
    display: flex; /* Para centrar el número adentro del círculo */
    align-items: center;
    justify-content: center;
    width: 52px; /* Círculo chico */
    height: 52px;
    border-radius: 50%; /* Redondeo total: círculo perfecto */
    background: var(--brand-magenta); /* Acento de esta sección */
    color: white; /* Número en blanco */
    font-family: 'Baloo 2', sans-serif; /* Tipografía redondeada */
    font-weight: 800; /* Número bien grueso */
    font-size: 20px;
    margin-bottom: 18px; /* Separación con el título del paso */
}

.paso h3 {
    font-size: 20px; /* Título de cada paso */
    margin-bottom: 10px;
}

.paso p {
    color: var(--clay-text-soft); /* Texto del paso en tono suave */
    font-size: 15px;
    margin: 0; /* Sin margen extra, ya lo maneja el gap de .pasos */
}

/* ---------- 9. SECCIÓN OBJETIVO: MISIÓN, VISIÓN Y PROPUESTA DE VALOR ---------- */
#objetivo .eyebrow {
    color: var(--brand-primary); /* Etiqueta con el violeta de marca */
}

#objetivo h2 {
    font-size: 34px;
    margin-bottom: 34px;
}

.objetivo-grid {
    display: grid; /* Grilla: en pantallas anchas quedan las 3 tarjetas en fila */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Tantas columnas de mínimo 280px como entren */
    gap: 22px; /* Espacio entre tarjetas */
    /* align-items: stretch (el valor por defecto de una grilla) hace
       que las 3 tarjetas de la misma fila queden todas con la altura
       de la MÁS ALTA de ellas, aunque tengan textos de largo distinto.
       Antes decía "start", que hacía lo contrario: cada tarjeta medía
       solo lo que necesitaba su propio texto, y por eso quedaban de
       distinto tamaño. Como acá sí queremos que las 3 midan igual, ya
       no hace falta escribir esta línea (es el comportamiento normal
       de una grilla), pero la dejamos explícita para que quede claro
       que es algo elegido a propósito y no un olvido. */
    align-items: stretch;
}

.objetivo-card {
    background: #ffffff; /* Tarjeta blanca */
    border-radius: 18px; /* Bordes redondeados */
    padding: 30px 28px; /* Espacio interno */
    box-shadow: var(--shadow-suave); /* Sombra suave */
    border-left: 6px solid var(--brand-primary); /* Franja de color a la izquierda */
}

/* Cada tarjeta toma un color distinto de la paleta en su franja izquierda.

   ":nth-child(2)" es otra PSEUDO-CLASE (como :hover y :focus, pero
   esta no depende de un estado sino de la POSICIÓN del elemento
   entre sus hermanos). ".objetivo-card:nth-child(2)" significa "el
   elemento con class='objetivo-card', pero solo cuando además es el
   2do hijo de su elemento padre". Como las 3 tarjetas de Misión,
   Visión y Propuesta de Valor son hermanas dentro de .objetivo-grid,
   esto nos deja pintar la 2da y 3ra de un color distinto sin tener
   que agregarles una clase extra en el HTML. */
.objetivo-card:nth-child(2) {
    border-left-color: var(--brand-ink); /* Visión: violeta oscuro */
}

.objetivo-card:nth-child(3) {
    border-left-color: var(--brand-magenta); /* Propuesta de Valor: magenta */
}

.objetivo-card h3 {
    font-size: 20px; /* Título de cada tarjeta */
    margin-bottom: 12px;
}

.objetivo-card p {
    color: var(--clay-text-soft); /* Texto en tono suave */
    font-size: 15px;
    line-height: 1.6; /* Interlineado más amplio, son párrafos largos */
    margin: 0;
}

/* ---------- 10. SECCIÓN INTEGRANTES: GRILLA DE TARJETAS ---------- */
#integrantes .eyebrow {
    color: var(--brand-lilac); /* Etiqueta con el acento de esta sección */
}

#integrantes h1 {
    font-size: 34px;
    margin-bottom: 34px;
    text-align: center; /* Centra el título dentro de la sección */
}

.integrantes-grid {
    display: grid; /* Grilla, como las tarjetas de producto de la referencia */
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); /* Tantas columnas de mínimo 230px como entren */
    gap: 22px; /* Espacio entre tarjetas */
}

.integrante-card {
    background: #ffffff; /* Tarjeta blanca */
    border-radius: 24px; /* Bordes redondeados */
    padding: 26px; /* Espacio interno */
    box-shadow: var(--shadow-suave); /* Sombra suave */
    text-align: center; /* Centra el avatar y el texto */
    /* transition: en vez de que el cambio de tamaño/sombra del :hover
       de acá abajo se vea de golpe, lo anima de forma suave durante
       0.25 segundos. Hay que ponerla en el estado NORMAL de la
       tarjeta (acá), no en el :hover, para que la animación se use
       tanto al agrandarse como al volver a su tamaño normal. */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* :hover: se activa mientras el mouse está encima de la tarjeta.
   transform: scale(1.06) la agranda un 6% (1.0 = tamaño normal, 1.06
   = 6% más grande), sin cambiar el espacio que ocupa en la grilla (a
   diferencia de cambiar "width"/"height", que sí movería a las
   tarjetas vecinas). Le subimos también la sombra, para reforzar la
   sensación de que la tarjeta "se levanta" hacia el usuario. */
.integrante-card:hover {
    transform: scale(1.06);
    box-shadow: 0 20px 40px rgba(15, 7, 53, 0.18);
    /* z-index: al agrandarse, la tarjeta puede llegar a superponerse
       apenas con sus vecinas (por la sombra más grande). Con esto se
       asegura que quede POR ENCIMA de ellas mientras está agrandada,
       en vez de quedar tapada a medias. */
    z-index: 1;
    position: relative;
}
}

.integrante-avatar {
    display: flex; /* Para centrar las iniciales adentro */
    align-items: center;
    justify-content: center;
    width: 68px; /* Círculo con las iniciales */
    height: 68px;
    margin: 0 auto 18px; /* Centrado horizontal + separación con el nombre */
    border-radius: 50%; /* Círculo perfecto */
    background: var(--brand-lilac); /* Acento de esta sección */
    color: white; /* Iniciales en blanco */
    font-family: 'Baloo 2', sans-serif; /* Tipografía redondeada */
    font-weight: 800; /* Iniciales bien gruesas */
    font-size: 22px;
}

.integrante-card h3 {
    font-size: 18px; /* Nombre del integrante */
    margin-bottom: 8px;
}

.integrante-card p {
    color: var(--clay-text-soft); /* Descripción en tono suave */
    font-size: 14px;
    margin: 0;
}

/* ---------- 11. SECCIÓN CONTACTO: FRANJA COMPLETA DE CIERRE ----------
   Antes esto era una "tarjeta" oscura flotando adentro de la
   sección (con sus propios bordes redondeados y sombra). Ahora el
   color va en TODA la sección, de punta a punta de la pantalla —
   como una franja de cierre, no como una tarjeta más. */
#contacto {
    background: var(--brand-ink); /* El color fuerte ahora es de toda la sección */
    color: white; /* Todo el texto de acá adentro pasa a blanco por defecto */
    padding-bottom: 120px; /* Un poco más de aire al final de la página */
}

/* Los cráteres reutilizan el mismo color que el resto del sitio
   (--clay-surface, un blanco apenas tintado), que sobre este fondo
   oscuro casi no se notaría. Acá les damos una versión propia,
   bien tenue y clara, para que seân sutiles TAMBIÉN sobre fondo
   oscuro (mismo efecto "hundido", adaptado a este contexto). */
#contacto .crater {
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 8px 8px 16px rgba(0, 0, 0, 0.25),
        inset -8px -8px 16px rgba(255, 255, 255, 0.03);
}

/* El panel deja de ser una tarjeta: sin fondo propio, sin bordes
   redondeados, sin sombra (todo eso ahora está en #contacto, arriba).
   Pasa a ser una grilla de 2 columnas: el texto a la izquierda, y el
   botón de mail + crédito a la derecha — un layout más "prolijo" de
   sección de cierre, en vez de todo apilado y centrado. */
.contacto-panel {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto; /* Columna de texto flexible + columna del botón, del ancho que necesite */
    align-items: center;
    gap: 48px;
    text-align: left; /* Antes: center */
    /* min-width: 0 — ESTE ERA EL BUG que hacía que "Contacto y
       Soporte" se cortara y se saliera de la pantalla en el celular.
       Por defecto, un elemento adentro de una grilla (grid) tiene un
       "min-width: auto" implícito, que en la práctica significa "no
       me achiques más allá de lo que mide mi contenido sin cortar
       palabras". Si el texto de adentro es más ancho que el lugar
       disponible (como pasa en una pantalla angosta), en vez de
       partirse en más líneas, el elemento entero se desborda hacia
       afuera del contenedor. Poniendo "min-width: 0" le sacamos esa
       restricción, y el texto puede volver a ajustarse (wrap) con
       normalidad al ancho real que tiene disponible. */
    min-width: 0;
}

/* En pantallas angostas (celular), 2 columnas lado a lado no entran
   bien: las apilamos en 1 sola columna centrada. */
@media (max-width: 700px) {
    .contacto-panel {
        grid-template-columns: 1fr; /* Una sola columna */
        text-align: center;
        gap: 28px;
    }
}

.contacto-panel .eyebrow {
    background: rgba(255, 255, 255, 0.1); /* Fondo translúcido claro, ya que acá el fondo de atrás es oscuro */
    color: var(--brand-lilac); /* Se usa el lila para que se lea bien sobre el violeta oscuro */
    box-shadow: none; /* No hace falta sombra sobre un fondo ya oscuro */
}

.contacto-panel h2 {
    font-size: 34px; /* Un poco más grande que antes: acá tiene más espacio para respirar */
    margin-bottom: 10px;
}

/* Antes esta clase no tenía ninguna regla propia (solo el <p> de
   adentro). Le agregamos "min-width: 0" acá, que es donde hacía
   falta de verdad: .contacto-texto es uno de los 2 elementos que
   arma la grilla de .contacto-panel (el otro es .contacto-cta), y
   por eso ACÁ es donde el navegador aplicaba el "min-width: auto"
   implícito que causaba el desborde en el celular (ver la nota
   completa junto a min-width en .contacto-panel, más arriba). */
.contacto-texto {
    min-width: 0;
}

.contacto-panel > .contacto-texto > p {
    color: #cdc4e8; /* Blanco lavanda, más suave que el blanco puro */
    margin-bottom: 0;
    max-width: 480px;
}

.contacto-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Antes: quedaba todo centrado; acá se alinea con la columna del texto */
    min-width: 0; /* Mismo motivo que en .contacto-texto, de acá arriba */
}

@media (max-width: 700px) {
    .contacto-cta {
        align-items: center; /* En celular, centrado como el resto */
    }
}

.contacto-email {
    display: inline-flex; /* Para que el ícono circular y el texto queden alineados en fila */
    align-items: center;
    gap: 12px; /* Espacio entre el círculo y el texto */
    background: rgba(255, 255, 255, 0.08); /* Fondo translúcido claro sobre el panel oscuro */
    padding: 14px 26px; /* Espacio interno (un poco más grande que antes, ahora es el foco de la columna) */
    border-radius: 999px; /* Forma de píldora */
    color: white; /* Texto blanco */
    font-weight: 700; /* Texto en negrita */
    text-decoration: none; /* Se saca el subrayado por defecto del link */
    white-space: nowrap; /* El mail no se corta en 2 líneas */
    transition: background 0.2s ease, transform 0.2s ease; /* Suaviza el cambio de fondo y el pequeño movimiento al pasar el mouse */
}

.contacto-email:hover {
    background: rgba(255, 255, 255, 0.16); /* Se aclara un poco al pasar el mouse */
    color: white;
    transform: translateY(-2px); /* Se "levanta" un poquito, sensación más premium */
}

.contacto-icono {
    display: flex; /* Para centrar el símbolo "@" adentro del círculo */
    align-items: center;
    justify-content: center;
    width: 32px; /* Círculo chico */
    height: 32px;
    border-radius: 50%; /* Círculo perfecto */
    background: var(--brand-lilac); /* Acento lila */
    color: var(--brand-ink); /* Símbolo en violeta oscuro, contrasta con el lila */
    font-weight: 800;
    flex-shrink: 0; /* Evita que el círculo se achique si el texto del costado es largo */
}

.contacto-credito {
    margin-top: 16px; /* Separación con el mail */
    font-size: 13px; /* Texto chico, es un dato secundario */
    color: #9a8fc2; /* Lavanda apagado, es el dato menos importante de la tarjeta */
}

/* ---------- 12. ANIMACIÓN DE ENTRADA ---------- */
@keyframes aparecer {
    from {
        opacity: 0; /* Invisible */
        transform: translateY(40px); /* Empieza más abajo de su posición final */
    }

    to {
        opacity: 1; /* Completamente visible */
        transform: translateY(0); /* En su posición normal */
    }
}

/* ---------- 13. RESPONSIVE: PANTALLAS CHICAS ----------
   "@media (max-width: 767px) { ... }" no es un selector: es una
   AT-RULE (regla especial, siempre empieza con @). Actúa como un
   "if" del CSS: todo lo que esté adentro de las llaves SOLO se
   aplica cuando se cumple la condición — acá, "el ancho de la
   ventana del navegador es de 767px o menos" (es decir, celulares
   y pantallas chicas). En una pantalla más ancha, este bloque entero
   se ignora y valen las reglas normales de arriba. */
@media (max-width: 767px) {
    .seccion-home {
        min-height: 70vh; /* Un poco menos alto en celular, para no ocupar tanto scroll */
        padding: 32px 20px;
    }

    .hero-panel h1 {
        font-size: 28px; /* Título más chico en celulares */
    }

    .hero-panel .lead {
        font-size: 14px;
    }

    .contacto-panel {
        padding: 40px 24px; /* Menos espacio interno en pantallas chicas */
    }
}

/* ============================================================
   14. PÁGINA "AGREGAR VEHÍCULO" (paso 2 del registro)
   Página completa aparte (no un modal), pero con el mismo lenguaje
   visual minimalista del index: fondo blanco, tarjetas con sombra
   suave, paleta de marca y tipografías Baloo 2 / Nunito. Usa las
   mismas variables de --root definidas más arriba (sección 1).
   ============================================================ */

/* La sección que envuelve todo el contenido de la página, para que
   se centre igual que las demás secciones del index.
   position: relative + overflow: hidden: es lo que necesitan los
   "cráteres" (círculos decorativos) de acá abajo para poder
   ubicarse bien adentro de esta sección y no salirse de sus bordes
   (mismo truco que usa, por ejemplo, la sección de Contacto). */
.seccion-vehiculo {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    padding: 64px 24px 96px;
}

.seccion-vehiculo .seccion-contenido {
    max-width: 640px; /* Más angosto que las demás secciones: es un formulario, no una grilla */
    text-align: center;
    position: relative; /* Para que quede por encima de los cráteres (que tienen z-index negativo) */
}

.seccion-vehiculo .eyebrow {
    color: var(--brand-primary);
}

.seccion-vehiculo h1 {
    font-size: 34px;
    margin-bottom: 12px;
}

.seccion-vehiculo > .seccion-contenido > p {
    color: var(--clay-text-soft);
    max-width: 480px;
    margin: 0 auto 36px;
}

/* Tarjeta blanca que contiene el formulario, mismo estilo que
   .objetivo-card e .integrante-card pero con más aire adentro */
.vehiculo-card {
    background: #ffffff;
    border-radius: 28px;
    padding: 44px 48px;
    text-align: left;
    box-shadow: var(--shadow-suave);
}

@media (max-width: 767px) {
    .vehiculo-card {
        padding: 30px 24px;
    }
}

/* Cada campo del formulario (label + input) */
.campo-vehiculo {
    margin-bottom: 26px; /* un poco más de aire entre campo y campo */
}

.campo-vehiculo:last-of-type {
    margin-bottom: 0; /* el último campo no necesita separación extra antes del botón */
}

.campo-vehiculo label {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: var(--brand-ink);
    margin-bottom: 8px;
}

/* Inputs y selects: mismo radio y borde suave, en vez de las
   "píldoras" con input-group-text que usan los modales de login,
   para que se sienta parte de la página y no de un modal.
   height explícita: así el <select> y el <input> quedan exactamente
   de la misma altura (por defecto el navegador les pone una altura
   levemente distinta a cada uno). */
.vehiculo-card .form-control,
.vehiculo-card .form-select {
    width: 100%;
    height: 52px;
    border: 1px solid #e2ddf2;
    border-radius: 14px;
    padding: 0 16px;
    font-size: 15px;
    font-family: 'Nunito', sans-serif;
    color: var(--clay-text);
    background-color: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* OJO ACÁ - esto es lo que se veía mal: el <select> de Bootstrap
   trae de fábrica una flechita dibujada como fondo (background-image),
   pegada al padding derecho por defecto de Bootstrap (2.25rem = 36px).
   Como arriba le pusimos "padding: 0 16px" a los dos por igual, en el
   <select> ese padding de 16px era MENOS que lo que la flechita
   necesitaba, y el texto elegido quedaba tapado por la flechita.
   Achicamos la flechita, la recentramos, y le dejamos más padding
   a la derecha SOLO al select para que no se pisen. */
.vehiculo-card .form-select {
    padding-right: 42px;
    background-position: right 14px center;
    background-size: 14px 11px;
}

.vehiculo-card .form-control:hover,
.vehiculo-card .form-select:hover {
    border-color: #cdbdf0; /* leve resalte al pasar el mouse, antes de tocarlo */
}

.vehiculo-card .form-control:focus,
.vehiculo-card .form-select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(102, 69, 172, 0.15);
}

.vehiculo-card .form-control:disabled,
.vehiculo-card .form-select:disabled {
    background-color: var(--clay-surface);
    color: var(--clay-text-soft);
    cursor: not-allowed;
    border-color: transparent;
}

/* Link tipo "¿no encontrás tu marca/modelo?" que despliega el campo manual */
.link-manual {
    display: inline-block;
    appearance: none; /* saca el estilo por defecto que el navegador le pone a los <button> */
    -webkit-appearance: none;
    margin: 10px 0 0;
    background: none;
    border: none;
    padding: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    line-height: 1.4;
}

.link-manual:hover {
    color: var(--brand-ink);
}

/* Campo de texto manual (marca u modelo escritos a mano). Arranca
   oculto: se muestra con JS sacándole esta clase.
   Le agregamos un fondo clarito y un borde-acento a la izquierda
   para que se note que es un "sub-campo" dentro del campo principal,
   y no un input suelto sin relación con nada. */
.campo-manual {
    display: none;
    margin-top: 14px;
    padding: 14px 16px 16px;
    background: var(--clay-surface);
    border-left: 3px solid var(--brand-primary);
    border-radius: 0 14px 14px 0;
}

.campo-manual.mostrar {
    display: block;
}

/* Adentro del campo-manual, el input queda con fondo blanco para
   distinguirse del fondo clarito que lo rodea */
.campo-manual .form-control {
    background-color: #fff;
    margin-bottom: 10px;
}

.campo-manual .link-manual {
    margin-top: 0;
}

/* Avisito chico que aparece cuando no se encontraron modelos para
   la marca elegida */
.aviso-vehiculo {
    font-size: 13px;
    color: var(--clay-text-soft);
    margin: 10px 0 0; /* reseteamos el margen por defecto que trae un <p>, para que no quede un salto de línea de más */
}

/* Botón de enviar: mismo violeta de marca que el resto de los botones del sitio */
.btn-vehiculo {
    width: 100%;
    height: 54px;
    margin-top: 36px;
    background-color: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 14px;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    box-shadow: var(--shadow-suave-chica);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.btn-vehiculo:hover {
    background-color: var(--brand-ink);
    box-shadow: 0 4px 12px rgba(15, 7, 53, 0.25);
    transform: translateY(-1px);
}

.btn-vehiculo:active {
    transform: translateY(0); /* vuelve a su lugar al soltar el click, sensación de "apretado" */
}

/* ============================================================
   15. PANEL / HOME (home.php - página para usuarios logueados)
   Reutiliza la mayoría de las clases ya definidas arriba
   (.seccion, .eyebrow, .objetivo-card, etc.) y solo agrega lo
   específico de este panel: el saludo, el mapa y las tarjetas
   de zona.
   ============================================================ */

/* Saludo de bienvenida, más chico que el hero del index (no es a
   pantalla completa, es solo el encabezado del panel) */
.panel-saludo {
    padding-top: 40px;
    padding-bottom: 24px;
    text-align: center;
}

.panel-saludo h1 {
    font-size: 32px;
    margin-bottom: 6px;
}

.panel-saludo p {
    color: var(--clay-text-soft);
}

/* Tarjeta con el resumen del vehículo del usuario */
.vehiculo-resumen {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--card);
    border-radius: 24px;
    padding: 28px 32px;
    box-shadow: var(--shadow-suave);
    margin-bottom: 48px;
}

.vehiculo-resumen-icono {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--clay-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.vehiculo-resumen-datos {
    flex: 1;
    min-width: 200px;
}

.vehiculo-resumen-datos h3 {
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    margin-bottom: 4px;
    color: var(--brand-ink);
}

.vehiculo-resumen-datos p {
    margin: 0;
    color: var(--clay-text-soft);
    font-size: 14px;
}

/* Cuando hay varios vehículos, cada tarjeta queda más pegada a la
   siguiente (la separación grande de 48px queda solo debajo del
   botón "+", que es lo último del bloque). */
.vehiculos-lista .vehiculo-resumen {
    margin-bottom: 20px;
}

/* Botón "+" para agregar otro vehículo. Es un link (<a>) que ocupa
   todo el ancho, igual que las tarjetas de vehículo. */
.vehiculo-agregar {
    display: flex; /* Para centrar el "+" adentro */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    background: rgba(200, 146, 205, 0.25); /* Lila de marca (--brand-lilac) bien clarito */
    border-radius: 24px; /* Mismas esquinas redondeadas que la tarjeta */
    padding: 28px 32px; /* Mismo alto que la tarjeta */
    margin-bottom: 48px; /* Separación con la sección de abajo */
    color: var(--brand-primary); /* El "+" va en violeta */
    font-family: 'Baloo 2', sans-serif;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none; /* Saca el subrayado del link */
    transition: background 0.2s ease;
}

.vehiculo-agregar:hover {
    background: rgba(200, 146, 205, 0.45); /* Un poco más intenso al pasar el mouse */
    color: var(--brand-primary);
}

/* Mapa de OpenStreetMap (un <iframe>) de la sección "En el mapa" */
.mapa-contenedor {
    display: block; /* Los iframes son "en línea" por defecto: así se acomoda como un bloque */
    width: 100%; /* Ocupa todo el ancho disponible */
    height: 420px; /* Alto fijo, el mapa necesita un alto definido para verse */
    border: 0; /* Saca el borde gris que los iframes traen por defecto */
    border-radius: 28px; /* Mismas esquinas redondeadas que el resto de las tarjetas */
    box-shadow: var(--shadow-suave); /* Misma sombra suave que las tarjetas */
    margin-bottom: 16px;
}

/* Botón violeta "Marcar estacionamiento" / "Confirmar" */
.btn-marcar {
    background: var(--brand-primary); /* Violeta de marca */
    color: #fff;
    border: 0;
    border-radius: 50px; /* Bien redondeado, como los otros botones */
    padding: 12px 28px;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-marcar:hover {
    background: var(--hover); /* Más oscuro al pasar el mouse */
}

.btn-marcar:disabled {
    opacity: 0.5; /* Apagado mientras no se eligió un lugar */
    cursor: not-allowed;
}

/* Botones secundarios ("Usar mi ubicación", "Cancelar"): lila claro */
.btn-marcar-sec {
    background: rgba(200, 146, 205, 0.25);
    color: var(--brand-primary);
    border: 0;
    border-radius: 50px;
    padding: 12px 24px;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

.btn-marcar-sec:hover {
    background: rgba(200, 146, 205, 0.45);
}

/* Panel con las opciones para marcar. Es un "flex" en columna para
   apilar todo con separación pareja. */
.marcar-opciones {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    background: var(--clay-surface);
    border-radius: 24px;
    padding: 24px;
    margin-top: 12px;
}

/* Un elemento con el atributo "hidden" tiene que quedar oculto aunque
   tenga "display: flex" (si no, el flex gana y se vería igual). */
.marcar-opciones[hidden] {
    display: none;
}

.marcar-opciones p,
.marcar-opciones label {
    margin: 0;
    color: var(--clay-text-soft);
}

.marcar-opciones select {
    max-width: 360px; /* Que el combo no se estire de más */
}

.marcar-estado {
    font-weight: 700;
    color: var(--brand-primary);
}

/* Fila con los botones de debajo del mapa. "flex" + "wrap" los pone
   uno al lado del otro y, si no entran (en el celular), pasan abajo. */
.mapa-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Panel "Avisos" del costado del mapa */
.avisos-panel {
    background: var(--clay-surface);
    border-radius: 24px;
    padding: 24px;
    /* En pantallas grandes, el panel acompaña la altura del mapa y,
       si hay muchos avisos, se le puede hacer scroll por dentro. */
    max-height: 520px;
    overflow-y: auto;
}

.avisos-panel h3 {
    font-family: 'Baloo 2', sans-serif;
    font-size: 20px;
    color: var(--brand-ink);
    margin-bottom: 4px;
}

.avisos-ayuda,
.avisos-vacio {
    color: var(--clay-text-soft);
    font-size: 14px;
    margin-bottom: 12px;
}

/* Fila de cada aviso: la tarjetita y, al lado, el botón "Ir". */
.aviso-fila {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

/* Botón "Ir": violeta, con la altura de la tarjetita. */
.btn-ir {
    border: 0;
    border-radius: 16px;
    background: var(--brand-primary);
    color: #fff;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    padding: 0 18px;
    box-shadow: var(--shadow-suave);
    cursor: pointer;
}

/* Cada aviso: una "tarjetita" que es un botón. */
.aviso-item {
    flex: 1; /* ocupa todo el ancho que deja el botón "Ir" */
    display: flex;
    flex-direction: column; /* Título arriba, detalle abajo */
    gap: 2px;
    width: 100%;
    text-align: left;
    background: var(--card);
    border: 0;
    border-left: 5px solid var(--brand-primary); /* Franja violeta a la izquierda */
    border-radius: 16px;
    padding: 12px 16px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-suave);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.aviso-item:hover {
    transform: translateX(4px); /* Se corre un poquito al pasar el mouse */
}

.aviso-item strong {
    color: var(--brand-primary);
    font-family: 'Baloo 2', sans-serif;
}

.aviso-item span {
    color: var(--clay-text-soft);
    font-size: 14px;
}

/* Avisos de lugares liberados: verde (recién liberado) y amarillo
   (liberado hace más de 5 minutos). Pisan el violeta del aviso común. */
.aviso-item.verde {
    background: var(--verde-fondo); /* Fondo verde clarito, para que se note a simple vista */
    border-left-color: #2e9e5b;
}

.aviso-item.verde strong {
    color: var(--verde-texto);
}

.aviso-item.amarillo {
    background: var(--amarillo-fondo); /* Fondo amarillo clarito */
    border-left-color: #e6a700;
}

.aviso-item.amarillo strong {
    color: var(--amarillo-texto);
}

/* Puntito de color en el mapa para un lugar liberado (mismo estilo
   que el puntito violeta, pero verde o amarillo). */
.pin-libre {
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(15, 7, 53, 0.4);
}

.pin-libre.verde {
    background: #2e9e5b;
}

.pin-libre.amarillo {
    background: #e6a700;
}

/* Puntito violeta que marca dónde está estacionado un auto. Se dibuja
   con CSS: un círculo con borde blanco y sombra. */
.pin-estacionado {
    background: var(--brand-primary);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(15, 7, 53, 0.4);
}

/* Cartel que sale arriba del puntito, siempre visible. Es un "tooltip"
   de Leaflet, al que le cambiamos el aspecto. */
.cartel-estacionado {
    background: var(--brand-primary);
    color: #fff;
    border: 0;
    border-radius: 14px;
    padding: 8px 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 4px 12px rgba(15, 7, 53, 0.3);
    /* Leaflet hace que los carteles "no se puedan tocar" por defecto
       (pointer-events: none). Lo cambiamos a "auto" para que el cartel
       reciba el toque y acerque el mapa. */
    pointer-events: auto;
    cursor: pointer;
}

/* La puntita triangular que une el cartel con el puntito. Leaflet la
   dibuja con un borde; le ponemos el mismo violeta que al cartel. */
.leaflet-tooltip-top.cartel-estacionado::before {
    border-top-color: var(--brand-primary);
}

/* El cartel de un lugar liberado es el mismo cartel de siempre (mismo
   tamaño, tipografía y forma); solo cambia el color de fondo según el
   tiempo: verde (primeros 5 minutos) o amarillo (los 5 siguientes). */
.cartel-estacionado.verde {
    background: #2e9e5b;
}

.cartel-estacionado.amarillo {
    background: #e6a700;
    color: #0f0735; /* Texto oscuro: el blanco no se lee bien sobre amarillo */
}

/* La puntita triangular, del mismo color que el cartel. */
.leaflet-tooltip-top.cartel-estacionado.verde::before {
    border-top-color: #2e9e5b;
}

.leaflet-tooltip-top.cartel-estacionado.amarillo::before {
    border-top-color: #e6a700;
}

/* Parpadeo de la zona que se toca en el listado: pasa de opaca a casi
   transparente y vuelve, cada 1,25 segundos, 2 veces = 2,5 segundos en
   total (el mismo tiempo que dura en pantalla, ver resaltarZona en
   home.html). "zona-resaltada" es el nombre de clase que le pone Leaflet
   al rectángulo verde lima. */
@keyframes tintinear {
    0%   { opacity: 1; }
    50%  { opacity: 0.15; }
    100% { opacity: 1; }
}

.zona-resaltada {
    animation: tintinear 1.25s ease-in-out 2;
}

/* Letra de cada zona, en el centro de su rectángulo del mapa. Sin
   fondo ni borde (solo la letra), grande y violeta con un poco de
   transparencia para no tapar el mapa. pointer-events: none hace que los
   clicks pasen "a través" de la letra. */
.zona-etiqueta {
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--brand-primary);
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: 26px;
    opacity: 0.55;
    pointer-events: none;
}

/* Un tooltip de Leaflet trae una puntita; en la letra la sacamos. */
.zona-etiqueta::before {
    display: none;
}

/* Las tarjetas de zona del listado se pueden tocar. */
.zona-card {
    cursor: pointer;
}

/* Grilla de tarjetas de zona, mismo patrón que .integrantes-grid */
.zonas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.zona-card {
    background: var(--card);
    border-radius: 22px;
    padding: 24px;
    box-shadow: var(--shadow-suave);
    text-align: left;
}

.zona-card h3 {
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    margin-bottom: 4px;
    color: var(--brand-ink);
}

.zona-card p {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--clay-text-soft);
}

/* Barra de probabilidad */
.zona-barra {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: var(--clay-surface);
    overflow: hidden;
    margin-bottom: 10px;
}

.zona-barra-relleno {
    height: 100%;
    border-radius: 999px;
}

/* Insignia con el porcentaje: 3 variantes de color según qué tan
   probable es encontrar lugar libre en esa zona */
.zona-badge {
    display: inline-block;
    font-weight: 700;
    font-size: 13px;
    padding: 4px 14px;
    border-radius: 999px;
}

.zona-badge.alta {
    background: var(--verde-fondo);
    color: var(--verde-texto);
}

.zona-card.alta .zona-barra-relleno {
    background: #1f8a4c;
}

.zona-badge.media {
    background: var(--amarillo-fondo);
    color: var(--amarillo-texto);
}

.zona-card.media .zona-barra-relleno {
    background: #e0ac1a;
}

.zona-badge.baja {
    background: var(--rojo-fondo);
    color: var(--rojo-texto);
}

.zona-card.baja .zona-barra-relleno {
    background: #d9483a;
}

/* ============================================================
   16. PANEL DE ADMINISTRADOR (admin.php y las páginas de edición)
   ============================================================ */

/* Un poco más ancho que .seccion-contenido normal, porque acá va
   una tabla con varias columnas. */
.admin-contenido {
    max-width: 1000px;
    text-align: center;
}

.admin-contenido > p {
    color: var(--clay-text-soft);
    margin-bottom: 40px;
}

.admin-subtitulo {
    text-align: left;
    font-family: 'Baloo 2', sans-serif;
    color: var(--brand-ink);
    margin: 40px 0 16px;
}

/* Aclaración chica debajo de un subtítulo del panel de admin (por
   ejemplo, qué más se borra junto con una zona o un lugar). */
.admin-aviso-borrado {
    text-align: left;
    color: var(--clay-text-soft);
    font-size: 14px;
    margin: -8px 0 12px;
}

/* Contenedor con scroll horizontal: en pantallas chicas, si la
   tabla no entra, aparece una barra de scroll en vez de romper el
   diseño (mismo criterio que usan las tablas del index). */
.admin-tabla-contenedor {
    width: 100%;
    overflow-x: auto;
    border-radius: 20px;
    box-shadow: var(--shadow-suave);
}

.admin-tabla {
    width: 100%;
    border-collapse: collapse; /* pega los bordes de las celdas entre sí, en vez de dejarlos separados */
    background: #fff;
    text-align: left;
    font-size: 14px;
}

.admin-tabla th,
.admin-tabla td {
    padding: 14px 18px;
    white-space: nowrap; /* que el texto de cada celda no se corte en varias líneas */
}

.admin-tabla thead {
    background: var(--brand-primary);
    color: #fff;
    font-family: 'Baloo 2', sans-serif;
}

.admin-tabla tbody tr {
    border-bottom: 1px solid var(--clay-surface);
}

.admin-tabla tbody tr:last-child {
    border-bottom: none;
}

.admin-tabla tbody tr:hover {
    background: var(--clay-surface);
}

.admin-acciones {
    display: flex;
    gap: 14px;
    align-items: center;
}

.admin-acciones a {
    color: var(--brand-primary);
    font-weight: 700;
    text-decoration: none;
}

.admin-acciones a:hover {
    text-decoration: underline;
}

/* El formulario de "Eliminar" queda en línea junto al link de
   "Editar", en vez de saltar a su propia fila. */
.admin-form-en-linea {
    display: inline;
}

.admin-link-eliminar {
    background: none;
    border: none;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    color: #c0392b;
    font-weight: 700;
    font-size: 14px;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
}

.admin-link-eliminar:hover {
    text-decoration: underline;
}

/* ---------- PERFIL DEL USUARIO (perfil.php) ---------- */

/* Tarjeta blanca de cada formulario del perfil */
.perfil-card {
    background: var(--card);
    border-radius: 24px;
    padding: 28px 32px;
    box-shadow: var(--shadow-suave);
    height: 100%; /* Las 2 tarjetas lado a lado miden lo mismo */
}

.perfil-card h2 {
    font-family: 'Baloo 2', sans-serif;
    font-size: 22px;
    color: var(--brand-ink);
    margin-bottom: 16px;
}

/* Título "Mis vehículos", con aire arriba */
.perfil-subtitulo {
    font-family: 'Baloo 2', sans-serif;
    color: var(--brand-ink);
    margin: 48px 0 20px;
}

/* Aviso de arriba: verde si salió bien, rojo si hubo un error */
.perfil-mensaje {
    border-radius: 16px;
    padding: 14px 20px;
    margin: 8px 0 24px;
    font-weight: 700;
}

.perfil-mensaje.ok {
    background: var(--verde-fondo);
    color: var(--verde-texto);
}

.perfil-mensaje.error {
    background: var(--rojo-fondo);
    color: var(--rojo-texto);
}

/* Botón "Eliminar" de cada vehículo: rojo clarito para que se note que borra */
.btn-eliminar {
    background: var(--rojo-fondo);
    color: var(--rojo-texto);
    border: 0;
    border-radius: 50px;
    padding: 10px 22px;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    cursor: pointer;
}

.btn-eliminar:hover {
    background: #f9c5c5;
}

/* En el perfil, la tarjeta de vehículo tiene menos separación abajo */
.perfil-subtitulo ~ .vehiculo-resumen {
    margin-bottom: 20px;
}

/* ---------- NAVBAR: FOTO + TEXTO "PERFIL" ---------- */
/* El link del perfil pone la foto y el texto uno al lado del otro,
   centrados verticalmente. */
.navbar .nav-link:has(img) {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 20px; /* Espacio entre "Perfil" y el botón "Cerrar sesión" */
}

/* ---------- MAPA BLOQUEADO (usuario sin vehículos) ---------- */
/* El envoltorio es la "referencia" para ubicar el cartel encima del mapa. */
.mapa-envoltorio {
    position: relative;
}

/* Cartel que tapa el mapa: mismo alto y esquinas que el mapa (420px).
   z-index alto para quedar por encima de todo lo de Leaflet, y al estar
   encima, los clicks ya no llegan al mapa. */
.mapa-bloqueo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 420px;
    z-index: 1100;
    border-radius: 28px;
    background: rgba(200, 146, 205, 0.75); /* lila de marca, semitransparente */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    text-align: center;
    color: #0f0735;
    font-weight: 700;
}

.mapa-bloqueo[hidden] {
    display: none;
}

.mapa-bloqueo p {
    margin: 0;
    max-width: 360px;
}

/* El botón es un link: sin subrayado. */
.mapa-bloqueo .btn-marcar {
    text-decoration: none;
}

/* ---------- MATRÍCULA EN MAYÚSCULA ----------
   Mientras la persona escribe, la matrícula se VE en mayúscula. (Lo que
   se guarda lo arregla PHP, en matricula_funciones.php.) */
#matricula {
    text-transform: uppercase;
}

/* ---------- BOTONES QUE SON LINKS (<a>) ---------- */
/* "Modificar perfil" (home.html): usa el estilo de .btn-marcar-sec pero
   es un link, así que hay que sacarle el subrayado. */
.btn-enlace {
    display: inline-block;
    margin-top: 16px;
    text-decoration: none;
}

.btn-enlace:hover {
    text-decoration: none;
}

/* "Volver" (perfil.php): link con flechita arriba del título. */
.perfil-volver {
    display: inline-block;
    margin-bottom: 20px;
    color: var(--brand-primary);
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    text-decoration: none;
}

.perfil-volver:hover {
    color: var(--brand-ink);
}


/* ============================================================
   17. TEMA CLARO / OSCURO / AUTOMÁTICO (ver tema.js)
   ============================================================ */

/* Los campos de texto toman los colores del tema. */
.form-control,
.form-select {
    background-color: var(--card);
    color: var(--clay-text);
    border-color: var(--borde-input);
}

/* El mapa (las imágenes de OpenStreetMap) se oscurece con un filtro:
   "invert" da vuelta los colores y "hue-rotate" corrige los tonos para
   que el agua siga azul. Cuánto se aplica depende de --oscuro (0 a 1),
   así en el modo automático se oscurece de a poquito. */
.leaflet-tile-pane {
    filter: invert(calc(var(--oscuro) * 0.92)) hue-rotate(calc(var(--oscuro) * 180deg)) brightness(calc(1 - var(--oscuro) * 0.12));
}

/* El ícono del menú del celular (☰) es oscuro: se da vuelta de noche. */
.navbar-toggler {
    filter: invert(var(--oscuro));
}

/* ---------- Botón flotante del tema (abajo a la izquierda) ---------- */
.tema-selector {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 1200; /* encima del mapa y de la navbar */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.tema-boton {
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 50%;
    background: var(--card);
    color: var(--clay-text);
    font-size: 24px;
    line-height: 1;
    box-shadow: var(--shadow-suave);
    cursor: pointer;
}

.tema-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--card);
    border-radius: 18px;
    padding: 10px;
    box-shadow: var(--shadow-suave);
}

.tema-menu[hidden] {
    display: none;
}

.tema-opcion {
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--clay-text);
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    text-align: left;
    padding: 8px 14px;
    cursor: pointer;
}

.tema-opcion:hover {
    background: var(--clay-surface);
}

/* La opción elegida queda marcada en violeta. */
.tema-opcion.activa {
    background: var(--brand-primary);
    color: #fff;
}

/* ---------- Animación del cambio: "puesta de sol" ----------
   Al cambiar de tema, el navegador saca una "foto" de la pantalla vieja
   y otra de la nueva (View Transitions). La nueva se muestra recortada
   con un polígono (clip-path) que tiene un vértice fijo en el punto del
   medio del borde de abajo. El otro borde del recorte arranca en la
   esquina de abajo a la derecha y recorre el contorno de la pantalla:
   sube por la derecha, cruza por arriba y baja por la izquierda. Usar
   clip-path es mucho más liviano que una máscara, por eso es fluido. */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;        /* sin el fundido que trae por defecto */
    mix-blend-mode: normal;
}

::view-transition-new(root) {
    animation: barrido-tema 0.7s linear both;
    will-change: clip-path; /* le avisa a la placa de video que se va a animar */
}

@keyframes barrido-tema {
    0%   { clip-path: polygon(50% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%); }
    30%  { clip-path: polygon(50% 100%, 100% 100%, 100% 0%, 100% 0%, 100% 0%, 100% 0%); }
    70%  { clip-path: polygon(50% 100%, 100% 100%, 100% 0%, 0% 0%, 0% 0%, 0% 0%); }
    100% { clip-path: polygon(50% 100%, 100% 100%, 100% 0%, 0% 0%, 0% 100%, 0% 100%); }
}

/* ---------- Botón para ocultar / mostrar las marcas del mapa ---------- */
.btn-capas {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1000; /* encima del mapa (Leaflet usa hasta 800) */
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    background: var(--card);
    color: var(--clay-text);
    font-size: 20px;
    box-shadow: var(--shadow-suave-chica);
    cursor: pointer;
}

/* Botón de "Lugar libre": mismo tamaño que los otros, en verde. */
.btn-libre {
    background: var(--verde-fondo);
    color: var(--verde-texto);
    border: 0;
    border-radius: 50px;
    padding: 12px 24px;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

/* Círculo de 5 m de un lugar libre avisado: se pinta con el color del aviso. */
.circulo-libre {
    animation: aparecer 0.4s ease both;
}

/* ---------- Para que el cambio de tema no se trabe ----------
   Mientras dura la animación del cambio (tema.js le pone esta clase a
   <html>), se apagan las demás animaciones de la página y se le pide al
   navegador que dibuje el mapa en una capa propia. Así la placa de video
   solo se ocupa del barrido. */
html.cambiando-tema .seccion,
html.cambiando-tema .leaflet-pane,
html.cambiando-tema .leaflet-marker-icon,
html.cambiando-tema .zona-resaltada {
    animation: none !important;
    transition: none !important;
}

.mapa-contenedor {
    contain: paint;               /* lo que pasa adentro del mapa no obliga a redibujar el resto */
    transform: translateZ(0);     /* el mapa va en su propia capa de la placa de video */
}

.leaflet-tile-pane {
    will-change: filter;          /* el filtro oscuro se calcula una vez y se reutiliza */
}