/* ============================================================
   COACH JORGE LEÓN — Quiropráctica y bienestar
   Hoja de estilos principal
   ------------------------------------------------------------
   Acá se controlan TODOS los colores, tipografías y el diseño.
   Si querés cambiar el color de acento o las letras, este es
   el lugar. Lo más importante está agrupado arriba en :root.
   ============================================================ */

/* ----- VARIABLES DE COLOR Y DISEÑO -----
   Paleta clara, tipo clínica/consultorio: fondo blanco,
   mucho espacio en blanco y acentos suaves en celeste y
   verde agua. Cambiá estos valores para ajustar la identidad.
*/
:root {
  --tinta:        #20323c;  /* texto principal (gris azulado oscuro) */
  --tinta-suave:  #5b6b73;  /* texto secundario */
  --fondo:        #ffffff;  /* fondo blanco */
  --fondo-suave:  #f1f9fb;  /* celeste muy clarito para secciones */

  --celeste:      #5fb6d9;  /* ACENTO 1: celeste sereno */
  --celeste-osc:  #3f97bd;  /* celeste más oscuro (hover) */
  --agua:         #79cfbf;  /* ACENTO 2: verde agua */
  --agua-osc:     #57b3a2;  /* verde agua más oscuro */

  --borde:        #e3edf1;  /* líneas y bordes suaves */
  --blanco:       #ffffff;

  --ancho-max:    1140px;
  --radio:        16px;
  --sombra:       0 14px 40px rgba(32, 50, 60, 0.08);
  --sombra-suave: 0 6px 20px rgba(32, 50, 60, 0.06);

  /* Tipografías. La de los textos es legible y prolija.
     La "script" es solo para el logo (ver abajo). */
  --fuente:        'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* ===== FUENTE DEL LOGO =====
     La fuente real deseada es "The Youngest Script" (paga, no
     disponible por ahora). Mientras tanto usamos "Dancing Script"
     de Google Fonts como provisoria.
     CUANDO TENGAS EL ARCHIVO CON LICENCIA de "The Youngest Script":
       1) Agregá el archivo de la fuente en una carpeta (ej: /fonts).
       2) Descomentá el bloque @font-face de más abajo.
       3) Cambiá la línea siguiente por:
          --fuente-logo: 'The Youngest Script', cursive;
  */
  --fuente-logo:   'Dancing Script', cursive;
}

/* ===== FUENTE REAL DEL LOGO (descomentar cuando la tengas) =====
@font-face {
  font-family: 'The Youngest Script';
  src: url('../fonts/TheYoungestScript.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
*/

/* ----- BASE ----- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--fuente);
  color: var(--tinta);
  background: var(--fondo);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

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

/* Nombre del logo escrito con la fuente script */
.logo-texto {
  font-family: var(--fuente-logo);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--celeste-osc);
}

/* ----- BOTONES ----- */
.boton {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  text-align: center;
}
.boton:hover { transform: translateY(-2px); }

.boton-acento {
  background: var(--celeste);
  color: #fff;
  box-shadow: 0 8px 20px rgba(95, 182, 217, 0.35);
}
.boton-acento:hover { background: var(--celeste-osc); }

.boton-agua {
  background: var(--agua);
  color: #fff;
  box-shadow: 0 8px 20px rgba(121, 207, 191, 0.35);
}
.boton-agua:hover { background: var(--agua-osc); }

.boton-borde {
  background: transparent;
  color: var(--tinta);
  border-color: var(--borde);
}
.boton-borde:hover { border-color: var(--celeste); color: var(--celeste-osc); }

/* ----- ENCABEZADO / NAVEGACIÓN ----- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}
.cabecera .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

/* LOGO: por ahora es texto con fuente script. Para usar una imagen,
   reemplazá el contenido de .marca por:
   <img src="img/logo.png" alt="Coach Jorge León" style="height:42px"> */
.marca { display: flex; align-items: center; gap: 10px; }

.menu {
  display: flex;
  align-items: center;
  gap: 26px;
}
.menu a.enlace {
  font-weight: 600;
  color: var(--tinta-suave);
  transition: color .15s ease;
}
.menu a.enlace:hover { color: var(--celeste-osc); }

/* Botón hamburguesa (solo se ve en celular) */
.hamburguesa {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.6rem;
  color: var(--tinta);
}

/* ----- HERO (sección principal) ----- */
.hero {
  background:
    radial-gradient(900px 400px at 80% -10%, rgba(121,207,191,.18), transparent 70%),
    radial-gradient(700px 350px at 0% 0%, rgba(95,182,217,.16), transparent 70%),
    var(--fondo);
  padding: 80px 0 90px;
}
.hero .contenedor {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 50px;
  align-items: center;
}
.hero .etiqueta {
  display: inline-block;
  background: rgba(95,182,217,.14);
  color: var(--celeste-osc);
  padding: 7px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
  margin-bottom: 20px;
}
.hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.3rem);
  line-height: 1.12;
  margin-bottom: 18px;
  letter-spacing: -.5px;
}
.hero h1 .resalte { color: var(--celeste-osc); }
.hero p.sub {
  font-size: 1.15rem;
  color: var(--tinta-suave);
  margin-bottom: 30px;
  max-width: 520px;
}
.hero .acciones { display: flex; gap: 14px; flex-wrap: wrap; }

/* Imagen del hero: por ahora es un bloque suave de color.
   Para poner la foto real, reemplazá el div .foto-hero por:
   <img class="foto-hero" src="img/jorge-hero.jpg" alt="Coach Jorge León"> */
.foto-hero {
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  background:
    linear-gradient(150deg, rgba(95,182,217,.85), rgba(121,207,191,.85));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 24px;
  box-shadow: var(--sombra);
}

/* ----- SECCIONES GENERALES ----- */
.seccion { padding: 84px 0; }
.seccion-suave { background: var(--fondo-suave); }

.titulo-seccion {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 50px;
}
.titulo-seccion .mini {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .8rem;
  font-weight: 800;
  color: var(--agua-osc);
}
.titulo-seccion h2 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin: 8px 0 12px;
  letter-spacing: -.4px;
}
.titulo-seccion p { color: var(--tinta-suave); }

/* ----- SOBRE JORGE ----- */
.sobre .contenedor {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 50px;
  align-items: center;
}
/* Foto de "Sobre Jorge": bloque de color por ahora.
   Reemplazar por: <img class="foto-sobre" src="img/jorge-sobre.jpg" alt="Jorge León"> */
.foto-sobre {
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  background: linear-gradient(150deg, rgba(121,207,191,.85), rgba(95,182,217,.85));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; text-align: center;
  padding: 24px; box-shadow: var(--sombra);
}
.sobre .mini {
  text-transform: uppercase; letter-spacing: 2px;
  font-size: .8rem; font-weight: 800; color: var(--agua-osc);
}
.sobre h2 { font-size: 2rem; margin: 8px 0 16px; letter-spacing: -.4px; }
.sobre p { color: var(--tinta-suave); margin-bottom: 14px; }
.sobre .datos { display: flex; gap: 30px; margin-top: 22px; flex-wrap: wrap; }
.sobre .dato .numero { font-size: 1.7rem; font-weight: 800; color: var(--celeste-osc); }
.sobre .dato .texto { font-size: .88rem; color: var(--tinta-suave); }

/* ----- TARJETAS (Qué ofrece) ----- */
.grilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 34px 28px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.tarjeta .icono {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: rgba(95,182,217,.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; margin-bottom: 18px;
}
.tarjeta:nth-child(2) .icono { background: rgba(121,207,191,.16); }
.tarjeta h3 { font-size: 1.25rem; margin-bottom: 10px; }
.tarjeta p { color: var(--tinta-suave); font-size: .98rem; }

/* ----- MOTIVOS DE CONSULTA (lista de dolores) ----- */
.motivos-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 820px;
  margin: 0 auto;
}
.motivos-lista .pildora {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 11px 20px;
  font-weight: 700;
  color: var(--tinta);
  box-shadow: var(--sombra-suave);
}
.motivos-lista .pildora::before {
  content: "•";
  color: var(--agua-osc);
  font-size: 1.2rem;
}

/* Aviso de terapia alternativa (no médica) */
.disclaimer {
  max-width: 760px;
  margin: 32px auto 0;
  text-align: center;
  font-size: .92rem;
  color: var(--tinta-suave);
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px 22px;
}

/* ----- TESTIMONIOS ----- */
.grilla-testimonios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.testimonio {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 30px 26px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--sombra-suave);
}
.testimonio .comillas { font-size: 2.6rem; color: var(--agua); line-height: .6; }
.testimonio p { color: var(--tinta-suave); font-style: italic; }
.testimonio .persona { display: flex; align-items: center; gap: 12px; margin-top: auto; }
/* Avatar del testimonio: círculo de color por ahora.
   Para foto real reemplazar el div .avatar por <img class="avatar" ...> */
.testimonio .avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--celeste), var(--agua));
  flex-shrink: 0;
}
.testimonio .persona b { display: block; }
.testimonio .persona span { font-size: .85rem; color: var(--tinta-suave); }

/* ----- CONSULTORIO / UBICACIÓN ----- */
.ubicacion .contenedor {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 44px;
  align-items: center;
}
.ubicacion .mini {
  text-transform: uppercase; letter-spacing: 2px;
  font-size: .8rem; font-weight: 800; color: var(--agua-osc);
}
.ubicacion h2 { font-size: 2rem; margin: 8px 0 16px; letter-spacing: -.4px; }
.ubicacion p { color: var(--tinta-suave); margin-bottom: 12px; }
.ubicacion .direccion {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px 20px;
  margin: 18px 0 24px;
  font-weight: 600; color: var(--tinta);
}
.ubicacion .direccion .pin { font-size: 1.4rem; }
.mapa {
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  border: 1px solid var(--borde);
  line-height: 0;
}
.mapa iframe { width: 100%; height: 380px; border: 0; }

/* ----- CONTACTO ----- */
.contacto { text-align: center; }
.contacto .caja {
  background: linear-gradient(150deg, rgba(95,182,217,.12), rgba(121,207,191,.14));
  border: 1px solid var(--borde);
  border-radius: 26px;
  padding: 58px 30px;
}
.contacto h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 14px; letter-spacing: -.4px; }
.contacto p { color: var(--tinta-suave); margin-bottom: 28px; max-width: 540px; margin-left: auto; margin-right: auto; }
.contacto .acciones { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.boton-whatsapp {
  background: #25D366; color: #fff;
  display: inline-flex; align-items: center; gap: 10px;
}
.boton-whatsapp:hover { background: #1da851; }

.boton-instagram {
  background: #fff; color: var(--tinta);
  border-color: var(--borde);
  display: inline-flex; align-items: center; gap: 10px;
}
.boton-instagram:hover { border-color: var(--celeste); color: var(--celeste-osc); }

/* ----- PIE DE PÁGINA ----- */
.pie {
  background: var(--fondo-suave);
  border-top: 1px solid var(--borde);
  color: var(--tinta-suave);
  padding: 50px 0 30px;
}
.pie .contenedor {
  display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.pie .col h4 { color: var(--tinta); margin-bottom: 12px; font-size: 1rem; }
.pie .col a { display: block; margin-bottom: 8px; color: var(--tinta-suave); }
.pie .col a:hover { color: var(--celeste-osc); }
.pie .copyright {
  border-top: 1px solid var(--borde);
  margin-top: 36px; padding-top: 20px;
  text-align: center; font-size: .85rem;
}

/* ============================================================
   PÁGINAS DE ALUMNOS (login / registro) — paleta clara
   ============================================================ */
.auth-pagina {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(800px 400px at 85% -10%, rgba(121,207,191,.20), transparent 70%),
    radial-gradient(700px 380px at 0% 0%, rgba(95,182,217,.18), transparent 70%),
    var(--fondo);
  color: var(--tinta);
}
.auth-cabecera { padding: 22px 0; }
.auth-cabecera .contenedor { display: flex; justify-content: space-between; align-items: center; }
.auth-cabecera a.volver { color: var(--tinta-suave); font-weight: 600; }
.auth-cabecera a.volver:hover { color: var(--celeste-osc); }

.auth-centro {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.auth-tarjeta {
  background: var(--blanco);
  width: 100%;
  max-width: 430px;
  border-radius: 22px;
  padding: 42px 36px;
  box-shadow: var(--sombra);
  border: 1px solid var(--borde);
}
.auth-tarjeta .marca { justify-content: center; margin-bottom: 6px; }
.auth-tarjeta h1 { text-align: center; font-size: 1.55rem; margin-bottom: 6px; }
.auth-tarjeta .subtitulo { text-align: center; color: var(--tinta-suave); margin-bottom: 28px; }

.campo { margin-bottom: 18px; }
.campo label { display: block; font-weight: 700; margin-bottom: 7px; font-size: .92rem; }
.campo input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  background: #fcfeff;
  transition: border .15s ease, box-shadow .15s ease;
}
.campo input:focus {
  outline: none;
  border-color: var(--celeste);
  box-shadow: 0 0 0 3px rgba(95,182,217,.18);
}

.auth-tarjeta .boton { width: 100%; margin-top: 6px; }

.auth-pie-form {
  text-align: center;
  margin-top: 22px;
  font-size: .95rem;
  color: var(--tinta-suave);
}
.auth-pie-form a { color: var(--celeste-osc); font-weight: 700; }
.auth-pie-form a:hover { text-decoration: underline; }

/* Mensaje "Función en construcción" */
.aviso {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(121,207,191,.16);
  border: 1px solid rgba(121,207,191,.55);
  color: var(--agua-osc);
  font-weight: 700;
  text-align: center;
  display: none; /* oculto hasta que se envía el formulario */
}
.aviso.visible { display: block; }

/* ============================================================
   RESPONSIVE (celulares y tablets)
   ============================================================ */
@media (max-width: 920px) {
  .hero .contenedor { grid-template-columns: 1fr; }
  .hero .foto-hero { max-width: 360px; margin: 0 auto; }
  .sobre .contenedor { grid-template-columns: 1fr; }
  .foto-sobre { max-width: 360px; margin: 0 auto; }
  .ubicacion .contenedor { grid-template-columns: 1fr; }
  .grilla-tarjetas { grid-template-columns: 1fr; }
  .grilla-testimonios { grid-template-columns: 1fr; }

  /* Menú: se oculta y aparece con el botón hamburguesa */
  .hamburguesa { display: block; }
  .menu {
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: var(--blanco);
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra);
    display: none;
  }
  .menu.abierto { display: flex; }
  .menu a.enlace, .menu .boton {
    width: 100%;
    text-align: center;
    padding: 16px;
    border-radius: 0;
  }
  .menu .boton { border-radius: 0; box-shadow: none; }
}

@media (max-width: 560px) {
  .seccion { padding: 58px 0; }
  .contacto .caja { padding: 44px 22px; }
  .auth-tarjeta { padding: 34px 24px; }
}