/* ===============================
   VARIABLES DE DISEÑO (Design Tokens)
   Para la identidad visual del proyecto:
   colores, tipografías y valores reutilizables.
   Facilitan la coherencia y el mantenimiento.
================================ */
:root{
    --color-primary: #1F3A5F;
    --color-bg: #F5F2EA;
    --color-text: #111827;
    --color-accent:#B08D57;
    --color-border: #E5E7EB;

    --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;

    --radius: 1rem;
    --shadow: 0 0.5rem, 1.2rem rgba(17,24,39,0.10);
    --max-width: 70rem;
}
    /* Normalización del modelo de caja */
*, *::before, *::after{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    font-size: 1rem;

}

h1, h2, h3{
    font-family: var(--font-heading);
    margin: 0 0 1rem;
    letter-spacing: 0.01rem;

}

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

/* Contenedor principal:
   limita el ancho del contenido y lo centra
   para mejorar legibilidad en pantallas grandes */


.container{
    width: min(100% - 2rem, var(--max-width));
    margin-inline: auto;
}

/* Botón principal reutilizable
    para acciones principales  */
.btn{
    display: inline-block;
    padding: 0.08em 1.2em;
    border-radius: var(--radius);
    background: var(--color-primary);
    color: white;
    font-weight: 600;
    border: 1px solid transparent;
    transition: transform 0.2s ease, background-color 0.2s ease;

}

/* Estados interactivos de los botones:
   hover diferenciado para botón principal y variante ghost
   con feedback visual sutil para mejorar la UX */

   .btn:hover{
background: #162A44;
transform: translateY(-2px);
}

.btn--ghost{
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);

}

.btn--ghost:hover{
    background: rgba(31,58,95,0.08);
    transform: translateY(-2px);
}
/* ===============================
   HEADER Y NAVEGACIÓN PRINCIPAL
================================ */
/* Menú principal */
 .main-nav a{
  position: relative;
}


.main-nav a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.3rem;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width 0.2s ease;
}

.main-nav ul{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  gap: 1.5rem;
}


.main-nav a:hover::after{
  width: 100%;
}

header{
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

/* Logo del header: tamaño controlado por altura */
.logo img{
  height: 2.2rem;
  width: auto;
  display: block;
}
/* ===============================
   LAYOUT (Proyecto: main + aside)
================================ */
.layout{
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding-top: 1.5rem;
}

.layout main{
  flex: 1;
  min-width: 0;
}

.layout aside{
  flex: 0 0 18rem;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1.25rem;
}

@media (max-width: 768px){
  .layout{
    flex-direction: column;
  }

  .layout aside{
    flex: 0 0 auto;
    width: 100%;
  }
}

/* ===============================
   TABLAS (Cronología)
================================ */
table{
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  overflow: hidden;
  margin-top: 1.25rem;
}

th, td{
  padding: 0.9rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

tr:nth-child(even){
  background: rgba(31,58,95,0.05);
}


/* HERO (Index): imagen de fondo + contenido centrado */
#hero-index{
  justify-content: center;
  min-height: 80vh;
  display: flex;
  align-items: center;
 background-attachment: scroll;
  background-image: linear-gradient(
      rgba(38, 79, 117, 0.5),
      rgba(31, 39, 99, 0.24)
    ),
    url("../img/hero.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

}

.hero-content{
  max-width: 42rem;
  color: white;
}

.hero-content h1{
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}

.hero-content p{
  font-size: 1.125rem;
  margin-bottom: 1.25rem;
  opacity: 0.95;
}

.hero-actions{
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Ajuste para que el ghost sea legible sobre fondo oscuro */
#hero-index .btn--ghost{
  color: white;
  border-color: rgba(255,255,255,0.8);
}

#hero-index .btn--ghost:hover{
  background: rgba(255,255,255,0.12);
}
#hero-index .container{
    width: min(100% - 2rem, var(--max-width));
}
/* ===============================
   FORMULARIOS
================================ */

.contact-form{
  max-width: 32rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

label{
  font-weight: 500;
}

input,
textarea{
  padding: 0.6rem 0.75rem;
  font-family: inherit;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  font-size: 1rem;
}

/* Focus */
input:focus,
textarea:focus{
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(31,58,95,0.15);
}

/* Validación */
input:invalid,
textarea:invalid{
  border-color: #5b2e29;
}

input:valid,
textarea:valid{
  border-color: #2ecc71;
}



/* ===============================
   SECCIÓN: SERVICIOS
================================ */

#servicios{
  padding: 4rem 0;
  background: var(--color-bg);
}

.section-header{
  max-width: 44rem;
  margin-bottom: 2rem;
}

.section-header h2{
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.section-header p{
  color: rgba(17,24,39,0.75);
}

/* Cards */
.cards{
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.card{
    flex: 1 1 18rem; /* crece, reduce, base */
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 0.6rem 1.4rem rgba(17,24,39,0.08);
}

.card h3{
  margin-bottom: 0.5rem;
}

.card p{
  color: rgba(17,24,39,0.75);
  margin: 0;
}

/* ===============================
   FOOTER
================================ */

footer{
  background: #111827;
  color: #F5F2EA;
  padding: 2rem 0;
}
footer p{
  font-size: 0.85rem;
  opacity: 0.8;
}


.footer-content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.footer-nav{
  display: flex;
  gap: 1.25rem;
}

.footer-nav a{
  color: #F5F2EA;
  font-size: 0.9rem;
  opacity: 0.85;
}

.footer-nav a:hover{
  opacity: 1;
}


/* =========================================
   MEDIA QUERY – ADAPTACIÓN A PANTALLAS PEQUEÑAS
   Ajustes responsive para móviles y tablets
========================================= */
@media (max-width: 768px){

    /* Header responsive: logo arriba, menú debajo */
header .container{
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

/* Menú centrado y con salto de línea si hace falta */
.main-nav ul{
  justify-content: center;
  flex-wrap: wrap;
  
  gap: 1rem;
}


  /* Hero: reducimos el tamaño del título */
  .hero-content h1{
    font-size: 2rem;
  }

/* Servicios: 3 columnas -> 1 columna en móvil */
 

 .card{ flex-basis: 100%; }

  /* Botones del hero en columna si no caben */
  .hero-actions{
    flex-direction: column;
    align-items: flex-start;
  }
  /* Footer en móvil */
.footer-content{
  flex-direction: column;
  text-align: center;
}

.footer-nav{
  justify-content: center;
}


}