/* ==========================================================================
   1. IMPORTACIONES EXTERNAS
   ========================================================================== */
/* Trae las tipografías desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Lora:wght@400;700&display=swap');


/* ==========================================================================
   2. VARIABLES CSS (Custom Properties)
   ========================================================================== */
:root{
  /* — Fuentes tipográficas — */
  --font-body: "Lora", Georgia, Cambria, "Times New Roman", Times, serif;
  --font-heading: "DM Serif Display", "DM Serif Text", Georgia, serif;

  /* — Paleta de colores — */
  --color-primary:   #01392F;  /* Color principal: usado en textos y botones */
  --color-secondary: #FFF9F9;  /* Color secundario: fondo general */
  --color-tertiary:  #106355;  /* Color terciario: usado en enlaces */
}


/* ==========================================================================
   3. TIPOGRAFÍA GLOBAL
   ========================================================================== */
body {
  background:    var(--color-secondary);
  color:         var(--color-primary);
  font-family:   var(--font-body);    /* Lora para el texto */
  font-size:     16px;
  line-height:   26px;
}

h1, h2 {
  font-family:  var(--font-heading);  /* DM Serif para títulos */
  font-weight:  400;                  /* peso único de la fuente */
  margin:       1em 0;                /* separación estándar */
}


/* ==========================================================================
   4. LAYOUT: HEADER Y LOGO
   ========================================================================== */
.header .logo {
  display:        flex;
  justify-content: center;
  align-items:     center;
  padding:         24px 0;            /* espaciado superior e inferior */
}

/* Evita espacios extra en enlaces e imágenes inline */
.header .logo a {
  display:      inline-flex;
  line-height:  0;
}

/* Imagen del logo responsiva */
.header .logo img {
  width:       clamp(200px, 24vw, 420px);
  max-width:   100%;
  height:      auto;
}


/* ==========================================================================
   5. ESTILOS DE FORMULARIO
   ========================================================================== */
/* Usan la misma tipografía y tamaños legibles del body */
button,
input,
select,
textarea {
  font-family:  var(--font-body);
  font-size:    1rem;
  line-height:  1.6;
  /* color: var(--color-primary);  si se quiere texto oscuro en campos */
  margin:       0.5em 0;            /* separación mínima entre campos */
  padding:      0.5em;              /* relleno interno estándar */
  border:       1px solid #ccc;     /* borde suave */
  border-radius: 4px;               /* esquinas ligeramente redondeadas */
  box-sizing:   border-box;
}


/* ==========================================================================
   6. COMPONENTES: BOTONES
   ========================================================================== */
.button {
  display:      inline-block;
  font-family:  var(--font-body);
  font-weight:  700;
  background:   var(--color-primary);
  color:        var(--color-secondary);
  text-decoration: none;
  padding:      0.75em 1.5em;
  border:       none;
  border-radius: 4px;
  cursor:       pointer;
  transition:   background 0.3s ease;
}

.button:hover,
.button:focus {
  background:   var(--color-tertiary); /* ligero cambio al pasar el ratón */
  outline:      none;
}


/* ==========================================================================
   7. ESTILOS DE ENLACES
   ========================================================================== */
a {
  color: var(--color-tertiary);
  text-decoration: none;
}
a:hover,
a:focus {
  color: var(--color-tertiary);
  text-decoration: underline;
}