/* ================================================================
   FisioLink — styles.css
   Autor: FisioLink MVP
   Estructura:
     1. Variables y reset
     2. Tipografía base
     3. Layout (container, sections)
     4. Componentes (botones, badges, cards)
     5. Secciones específicas (hero, pain, features, pricing, form)
     6. Footer
     7. Responsive (móvil primero)
================================================================ */


/* ----------------------------------------------------------------
   1. VARIABLES Y RESET
   Las variables CSS (custom properties) son el sistema de diseño.
   Cambiar un color aquí lo cambia en TODA la página. Muy útil
   cuando quieras hacer ajustes de marca más adelante.
---------------------------------------------------------------- */
:root {
  /* Paleta de colores */
  --color-primary:        #1D9E75;   /* Verde teal: acento principal */
  --color-primary-dark:   #0F6E56;   /* Verde oscuro: hover de botones */
  --color-primary-light:  #E1F5EE;   /* Verde muy claro: fondos suaves */
  --color-primary-text:   #085041;   /* Verde muy oscuro: texto sobre fondo claro */

  --color-coral-light:    #FAECE7;   /* Fondo tarjetas de dolor */
  --color-coral:          #D85A30;   /* Íconos de dolor */

  --color-blue-light:     #E6F1FB;   /* Fondo badge "en formación" */
  --color-blue-text:      #185FA5;   /* Texto badge "en formación" */

  --color-text-primary:   #1a1a1a;   /* Texto principal */
  --color-text-secondary: #555;      /* Texto de soporte */
  --color-text-muted:     #888;      /* Texto auxiliar pequeño */

  --color-bg-page:        #f9f9f7;   /* Fondo de página (casi blanco) */
  --color-bg-alt:         #f3f3ef;   /* Fondo alternativo de secciones */
  --color-bg-white:       #ffffff;   /* Fondo tarjetas */

  --color-border:         rgba(0, 0, 0, 0.09);  /* Bordes sutiles */
  --color-border-focus:   #1D9E75;              /* Borde al enfocar inputs */

  /* Tipografía */
  --font-base: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Espaciado: sistema de 4px para consistencia */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;

  /* Bordes redondeados */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 999px;
}

/*
  Reset moderno: elimina estilos inconsistentes entre navegadores.
  box-sizing: border-box hace que padding y border se incluyan
  en el ancho del elemento. Mucho más intuitivo para trabajar.
*/
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* scroll-behavior: smooth activa el desplazamiento suave
     cuando hacemos clic en links del tipo href="#seccion" */
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;  /* Texto más nítido en Mac/iOS */
}

img {
  max-width: 100%;
  display: block;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}


/* ----------------------------------------------------------------
   2. TIPOGRAFÍA BASE
   Escala tipográfica: define tamaños relativos entre títulos.
   Usamos clamp() para que los títulos crezcan/encojan solos
   según el tamaño de pantalla, sin necesidad de media queries.
---------------------------------------------------------------- */
h1, h2, h3 {
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
}

h1 {
  /* clamp(mínimo, preferido, máximo) */
  /* En móvil: 26px. En desktop: hasta 38px. Entre medias: fluido. */
  font-size: clamp(26px, 5vw, 38px);
  letter-spacing: -0.5px;
}

h2 {
  font-size: clamp(20px, 3.5vw, 26px);
  margin-bottom: var(--space-lg);
}

h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

p {
  color: var(--color-text-secondary);
  line-height: 1.7;
}


/* ----------------------------------------------------------------
   3. LAYOUT
   .container: caja centrada con ancho máximo y padding horizontal.
   Todas las secciones tienen un .container adentro.
---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 720px;      /* Ancho máximo para lectura cómoda */
  margin: 0 auto;        /* Centrado horizontal */
  padding: 0 var(--space-lg);
}

.section {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--color-border);
}

/*
  section-alt: secciones con fondo ligeramente diferente.
  Ayuda a crear separación visual sin usar líneas.
*/
.section-alt {
  background-color: var(--color-bg-alt);
}

.section-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}


/* ----------------------------------------------------------------
   4. COMPONENTES REUTILIZABLES
   Botones, badges y elementos que aparecen en varias secciones.
---------------------------------------------------------------- */

/* --- Botones --- */
.btn-primary,
.btn-ghost,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 13px 24px;
  border-radius: var(--radius-lg);
  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background-color 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
}
.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.btn-ghost:hover {
  background-color: var(--color-bg-white);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.btn-outline:hover {
  background-color: var(--color-primary-light);
}

/* Botón que ocupa todo el ancho de su contenedor */
.btn-full {
  width: 100%;
  margin-top: var(--space-md);
}

/* Estado activo: pequeño "hundido" para feedback visual */
.btn-primary:active,
.btn-outline:active {
  transform: scale(0.98);
}

/* --- Logo --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.logo-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  flex-shrink: 0;
}

.logo-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* --- Badge de ciudad --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: var(--color-primary-light);
  color: var(--color-primary-text);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-md);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}


/* ----------------------------------------------------------------
   5A. SECCIÓN HERO
---------------------------------------------------------------- */
.hero {
  padding: var(--space-2xl) 0 var(--space-xl);
  text-align: center;
  background-color: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border);
}

.hero-title {
  margin-bottom: var(--space-md);
}

/*
  .highlight: el texto en verde dentro del h1.
  Solo coloreamos las palabras clave para dirigir la atención.
*/
.highlight {
  color: var(--color-primary);
}

.hero-subtitle {
  max-width: 480px;
  margin: 0 auto var(--space-xl);
  font-size: 16px;
}

.cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.trust-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.trust-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  flex-shrink: 0;
}


/* ----------------------------------------------------------------
   5B. SECCIÓN DOLOR (Pain Cards)
---------------------------------------------------------------- */
.pain-grid {
  display: grid;
  /*
    auto-fit + minmax: magia del CSS Grid moderno.
    - Si caben 3 columnas de 180px → 3 columnas
    - Si no caben → baja a 2, luego a 1
    Sin media queries.
  */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
}

.pain-card {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
}

.pain-icon {
  font-size: 22px;
  color: var(--color-coral);
  margin-bottom: var(--space-sm);
  display: block;
}

.pain-card h3 {
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.pain-card p {
  font-size: 13px;
  line-height: 1.55;
}


/* ----------------------------------------------------------------
   5C. SECCIÓN SOLUCIÓN (Feature List)
---------------------------------------------------------------- */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.feature-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;   /* Evita que el ícono se encoja si el texto es largo */
}

.feature-body h3 {
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.feature-body p {
  font-size: 14px;
}


/* ----------------------------------------------------------------
   5D. SECCIÓN PRECIOS (Pricing Cards)
---------------------------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.plan {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;       /* Para el badge "Más elegido" */
}

/*
  plan-featured: solo cambia el borde. Misma estructura, misma altura.
  El borde verde más grueso crea jerarquía visual sin romper el diseño.
*/
.plan-featured {
  border: 2px solid var(--color-primary);
}

/* Badge flotante "Más elegido" en la tarjeta principal */
.plan-badge-top {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Badges de categoría dentro de cada tarjeta */
.plan-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}

.tag-titulado {
  background-color: var(--color-primary-light);
  color: var(--color-primary-text);
}

.tag-formacion {
  background-color: var(--color-blue-light);
  color: var(--color-blue-text);
}

.plan-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 4px 0;
}

.plan-price {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.5px;
  margin: var(--space-sm) 0 4px;
  line-height: 1;
}

.plan-period {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-muted);
}

.plan-note {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.plan-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-md) 0;
}

.plan-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0;
}

.plan-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.plan-features li .ti-check {
  color: var(--color-primary);
  font-size: 15px;
  flex-shrink: 0;
}

/* Nota explicativa del modelo fundador */
.founder-note {
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  font-size: 13px;
  text-align: center;
  line-height: 1.6;
}

.founder-note strong {
  color: var(--color-text-primary);
}


/* ----------------------------------------------------------------
   5E. SECCIÓN FORMULARIO
---------------------------------------------------------------- */
.form-card {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Fila de dos columnas (en desktop) */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* Estilos compartidos para input y select */
.form-field input,
.form-field select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-page);
  font-family: var(--font-base);
  font-size: 14px;
  color: var(--color-text-primary);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;   /* Elimina estilos nativos del navegador en select */
}

.form-field input:focus,
.form-field select:focus {
  border-color: var(--color-border-focus);
  /* Ring de foco: accesibilidad + señal visual de selección */
  box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.15);
  background-color: var(--color-bg-white);
}

/* Estado de error: borde rojo en campos inválidos */
.form-field input.error,
.form-field select.error {
  border-color: #dc3545;
}

/* Texto de error debajo del campo */
.field-error {
  font-size: 12px;
  color: #dc3545;
  min-height: 16px;   /* Reserva espacio para que el layout no salte */
}

/* Estado del botón mientras envía */
.btn-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.form-disclaimer {
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
}

/* Mensaje de éxito (oculto hasta que el form se envía) */
.success-message {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

/* hidden es un atributo HTML nativo que oculta elementos.
   Necesitamos display: flex para que funcione con nuestro layout */
.success-message[hidden] {
  display: none;
}

.success-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-message h3 {
  font-size: 20px;
  color: var(--color-text-primary);
  margin: 0;
}

.success-message p {
  max-width: 320px;
  font-size: 14px;
}


/* ----------------------------------------------------------------
   6. FOOTER
---------------------------------------------------------------- */
.site-footer {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-white);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-copy {
  font-size: 12px;
  color: var(--color-text-muted);
}


/* ----------------------------------------------------------------
   7. RESPONSIVE — Móvil primero
   Nuestros estilos base ya son para móvil.
   Aquí solo ajustamos lo necesario para pantallas más grandes.
---------------------------------------------------------------- */

/* Pantallas medianas y grandes (≥ 600px) */
@media (min-width: 600px) {
  /* Hero: botones en fila en lugar de columna */
  .cta-group {
    flex-direction: row;
    justify-content: center;
  }

  /* Formulario: la fila de dos columnas solo en tablet+ */
  /* (ya está en el CSS de escritorio, aquí confirmamos) */
}

/* Pantallas pequeñas (< 480px): form-row en columna */
@media (max-width: 480px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .container {
    padding: 0 var(--space-md);
  }

  h1 {
    font-size: 24px;
  }
}