/* ============================================================
   HEALTHWANA — styles.css
   Sistema de diseño unificado
   Tailwind gestiona layout/spacing; este archivo gestiona
   componentes custom, variables globales y animaciones.
   ============================================================ */


/* ── 1. GOOGLE FONTS ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;1,9..40,300&display=swap');


/* ── 2. VARIABLES GLOBALES ────────────────────────────────── */
:root {
  /* Paleta */
  --color-ink:        #0d0d0d;       /* texto principal / fondos oscuros */
  --color-paper:      #f7f5f0;       /* fondo claro secciones */
  --color-accent:     #eab308;       /* amarillo Tailwind yellow-500 */
  --color-muted:      #9ca3af;       /* gray-400 */
  --color-border:     #e5e7eb;       /* gray-200 */

  /* Feedback */
  --color-ok:         #1a7a45;
  --color-ok-bg:      #edf7f0;
  --color-err:        #c84b31;
  --color-err-bg:     #fdf0ee;

 
  /* Tipografía — Elegante y académica (Cambridge) */
  --font-heading:     'Cormorant Garamond', serif;   /* titulares: serif clásico, Oxford/Cambridge */
  --font-body:        'Jost', sans-serif;             /* cuerpo: geométrico limpio, científico */

  /* Transición estándar */
  --ease:             .35s cubic-bezier(.4, 0, .2, 1);
}


/* ── 3. RESET / BASE ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family:  var(--font-body);
  font-size:    1rem;
  font-weight:  300;
  line-height:  1.75;
  color:        var(--color-ink);
  background:   #f9fafb;   /* gray-50 — base Tailwind */
  margin:       0;
}

/* hero, results, contact… */
#hero {
  background-image: url('/static/images/adn.webp');
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Overlay */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.75); /* overlay blanco — texto oscuro */
  /* background: rgba(17, 24, 39, 0.65); */ /* overlay oscuro — texto claro */
  z-index: 0;
}

/* El contenido queda por encima del overlay */
#hero > * {
  position: relative;
  z-index: 1;
}

/* Imágenes responsivas */
img { display: block; max-width: 100%; }

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


/* ── 4. ANIMACIONES GLOBALES ──────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Clase utilitaria reutilizable */
.fade-in {
  opacity: 0;
  animation: fade-up 1s forwards;
}


/* ── 5. COMPONENTES COMPARTIDOS ───────────────────────────── */

/* -- Eyebrow label (usado en hero, results, contact…) -- */
.label-eyebrow {
  display:        block;
  font-family:    var(--font-heading);
  font-size:      .72rem;
  font-weight:    600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          var(--color-accent);
  margin-bottom:  .6rem;
}

/* -- Línea decorativa dorada -- */
.divider-gold {
  width:      48px;
  height:     3px;
  background: var(--color-accent);
}

/* -- Card genérica (secciones light) -- */
.card {
  padding:       2rem;
  background:    white;
  box-shadow:    0 5px 15px rgba(0, 0, 0, .05);
}


/* ── 6. FORMULARIO DE CONTACTO ────────────────────────────── */
#contact {
  background: var(--color-paper);
  padding:    7rem 1.5rem;
}

.contact-inner {
  max-width: 680px;
  margin:    0 auto;
}

/* Encabezado */
.contact-header  { margin-bottom: 3.5rem; }

.contact-title {
  font-family: var(--font-heading);
  font-size:   clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  color:       var(--color-ink);
  margin:      0 0 1rem;
}

.contact-subtitle {
  font-size:   1rem;
  font-weight: 300;
  color:       var(--color-muted);
  margin:      0;
}

.contact-divider {
  width:      48px;
  height:     3px;
  background: var(--color-accent);
  margin-top: 1.4rem;
}

/* Formulario */
.contact-form { display: grid; gap: 1.6rem; }

.field-group { position: relative; }

.field-label {
  display:        block;
  font-family:    var(--font-heading);
  font-size:      .7rem;
  font-weight:    600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          var(--color-muted);
  margin-bottom:  .5rem;
  transition:     color var(--ease);
}

.field-group:focus-within .field-label { color: var(--color-ink); }

.contact-input,
.contact-textarea {
  width:        100%;
  background:   transparent;
  border:       none;
  border-bottom: 1.5px solid #c8c8bc;
  border-radius: 0;
  padding:      .65rem 0;
  font-family:  var(--font-body);
  font-size:    1rem;
  font-weight:  300;
  color:        var(--color-ink);
  outline:      none;
  transition:   border-color var(--ease);
  caret-color:  var(--color-err);   /* acento rojo en el cursor */
}

.contact-input:focus,
.contact-textarea:focus { border-bottom-color: var(--color-ink); }

/* Línea animada bajo el campo */
.field-line {
  position:   absolute;
  bottom:     0; left: 0;
  width:      0; height: 2px;
  background: var(--color-err);
  transition: width var(--ease);
}

.field-group:focus-within .field-line { width: 100%; }

.contact-textarea {
  resize:     none;
  min-height: 130px;
  line-height: 1.7;
}

/* Botón Send */
.contact-btn {
  display:     inline-flex;
  align-items: center;
  gap:         .75rem;
  background:  var(--color-ink);
  color:       #fff;
  font-family: var(--font-heading);
  font-size:   .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  border:      none;
  padding:     1.05rem 2.2rem;
  cursor:      pointer;
  position:    relative;
  overflow:    hidden;
  transition:  transform .15s;
}

.contact-btn::before {
  content:          '';
  position:         absolute;
  inset:            0;
  background:       var(--color-err);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform var(--ease);
}

.contact-btn:hover::before   { transform: scaleX(1); }
.contact-btn:active          { transform: translateY(1px); }
.btn-text, .btn-arrow        { position: relative; z-index: 1; }
.btn-arrow                   { font-size: 1.1rem; transition: transform var(--ease); }
.contact-btn:hover .btn-arrow { transform: translateX(4px); }


/* ── 7. FLASH MESSAGES (Flask) ────────────────────────────── */
.flash-list {
  list-style:      none;
  padding:         0;
  margin:          0 0 2rem;
  display:         flex;
  flex-direction:  column;
  gap:             .75rem;
}

.flash-item {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  padding:     1rem 1.4rem;
  font-size:   .92rem;
  animation:   slide-in .4s ease both;
}

.flash-item.success {
  background:  var(--color-ok-bg);
  color:       var(--color-ok);
  border-left: 3px solid var(--color-ok);
}

.flash-item.error {
  background:  var(--color-err-bg);
  color:       var(--color-err);
  border-left: 3px solid var(--color-err);
}

.flash-icon { font-size: 1.05rem; flex-shrink: 0; }


/* ── 8. INPUT LEGACY (por si hay otros forms) ─────────────── */
/* Mantiene compatibilidad con la clase .input del CSS anterior */
.input {
  width:         100%;
  padding:       12px;
  border:        1px solid var(--color-border);
  border-radius: 0;
  font-family:   var(--font-body);
  font-size:     1rem;
  outline:       none;
  transition:    border-color var(--ease);
}

.input:focus { border-color: var(--color-ink); }

/* ── LOGO ── */
.logo {
  font-family:    var(--font-heading);
  font-size:      30px !important;
  font-weight:    600;
  letter-spacing: .10em;
  color:          var(--color-ink);
  text-decoration: none;
  line-height:    1;
}

.logo span {
  font-weight:  300;
  font-style:   italic;
  color:        var(--color-accent); /* acento amarillo */
}

/* ── NAV LINKS ── */
.nav-link {
  font-family:     var(--font-body);
  /*font-size:       .85rem;*/
  font-weight:     400;
  letter-spacing:  .06em;
  color:           #1f2937;   /* gray-800 */
  text-decoration: none;
  padding-bottom:  4px;
  position:        relative;
}

.nav-link::after {
  content:          '';
  position:         absolute;
  bottom:           0; left: 0;
  width:            0; height: 1.5px;
  background:       #1f2937;   /* misma gray-800 */
  transition:       width var(--ease);
}

.nav-link:hover::after { 
  width: 100%; 
  color: var(--color-ink);}




/* ===================== ESTILOS DEL MODAL ===================== */

  /* Overlay oscuro que cubre toda la pantalla */
  .privacy-modal-overlay {
    display: none;               /* oculto por defecto */
    position: fixed;
    inset: 0;                    /* top/right/bottom/left: 0 */
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(3px);
  }

  /* Cuando está activo */
  .privacy-modal-overlay.is-open {
    display: flex;
  }

  /* Caja blanca del modal */
  .privacy-modal-box {
    position: relative;
    background: #fff;
    border-radius: 12px;
    max-width: 780px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: modalFadeIn 0.25s ease;
  }

  @keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Botón × para cerrar */
  /* Modal oculto por defecto */


  .privacy-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    color: #555;
    transition: color 0.2s;
    z-index: 1;
  }
  .privacy-modal-close:hover { color: #000; }

  /* Área con scroll */
  .privacy-modal-body {
    overflow-y: auto;
    padding: 2.5rem 2.5rem 2rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.7;
    color: #333;
  }

  /* Título y fecha */
  .privacy-modal-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
  }
  .privacy-modal-date {
    color: #888;
    margin-bottom: 1.25rem;
  }
  .privacy-modal-hr {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin-bottom: 1.75rem;
  }

  /* Secciones */
  .privacy-modal-section {
    margin-bottom: 1.75rem;
  }
  .privacy-modal-section h3 {
    color: #2a6ebb;         /* azul —ajusta al color de tu marca */
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
  }
  .privacy-modal-section ul {
    padding-left: 1.4rem;
  }
  .privacy-modal-section a {
    color: #2a6ebb;
    text-decoration: underline;
  }

  /* Nota final */
  .privacy-modal-note {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    color: #555;
  }

  /* Responsive: pantallas pequeñas */
  @media (max-width: 600px) {
    .privacy-modal-body { padding: 1.5rem 1.25rem; }
    .privacy-modal-title { font-size: 1.5rem; }
  }