/* =====================
   VARIABLES
===================== */
:root {

  /* ===== BRAND ===== */
  --color-brand-dark: #143D2A;
  --color-brand: #5E8B72;

  /* ===== ACCENTS ===== */
  --color-accent: #C96A1B;
  --color-accent-light: #E0A126;
  --color-danger-soft: #C94B4B;

  /* ===== SURFACES ===== */
  --color-background: #F3E7D0;
  --color-surface: #FFFDF8;

  /* ===== TEXT ===== */
  --color-text: #1E1E1E;
  --color-text-soft: #5B5B5B;
  --color-white: #FFFFFF;

  /* ===== EFFECTS ===== */
  --shadow-soft:
    0 10px 30px rgba(20, 61, 42, 0.08);

  --shadow-card:
    0 8px 24px rgba(0, 0, 0, 0.06);

  /* ===== RADIUS ===== */
  --radius-sm: 8px;
  --radius-md: 18px;
  --radius-lg: 28px;
}

/* =====================
   RESET
===================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =====================
   BASE
===================== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-background);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 🔥 IMPORTANTE:
   NO BORRAR ESTE BEFORE
   porque tu timeline y profundidad visual
   dependen de esto.
*/
body::before {
  content: "";
  position: fixed;
  inset: 0;

  background:
    radial-gradient(
      circle at top,
      rgba(94, 139, 114, 0.12),
      transparent 60%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(201, 106, 27, 0.06),
      transparent 40%
    );

  z-index: -1;
  pointer-events: none;
}

/* =====================
   CONTAINER
===================== */
.container {
  width: 90%;
  max-width: 1180px;
  margin: auto;
  padding: 0 16px;
}

/* =====================
   HEADER
===================== */
header {
  position: sticky;
  top: 0;
  z-index: 1000;

 background:var(--color-brand-dark);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(255,255,255,0.08);

  padding: 14px 0;
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
header{
    position: relative;
}

header::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background: linear-gradient(
        90deg,
        #F4B400,
        #1A73E8,
        #EA4335,
        #34A853,
        #9334E6
    );
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;

  border: 2px solid rgba(255,255,255,0.15);
}

.brand h1 {
  font-size: 1.0rem;
  color: var(--color-white);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* =====================
   NAV
===================== */
nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

nav a {
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;

  position: relative;
  transition: 0.3s ease;
}

nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;

  width: 0%;
  height: 2px;

  background: var(--color-accent-light);

  transition: width 0.3s ease;
}

nav a:hover {
  color: var(--color-white);
}

nav a:hover::after {
  width: 100%;
}

/* =====================
   MENU HAMBURGUESA
===================== */

.menu-toggle{
  display:none;
  color:white;
  font-size:1.7rem;
  cursor:pointer;

  transition:
      transform .3s ease,
      opacity .3s ease;
}

.menu-toggle i{
    transition:
        transform .3s ease,
        opacity .3s ease;
}

.menu-toggle:hover{
  transform:scale(1.08);
}
/* =====================
   BUTTONS
===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 26px;

  border-radius: var(--radius-md);

  background: var(--color-accent);
  color: var(--color-white);

  text-decoration: none;
  font-weight: 700;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.btn:hover {
  background: var(--color-accent-light);

  transform: translateY(-2px);

  box-shadow:
    0 12px 24px rgba(201, 106, 27, 0.18);
}

/* =====================
   CARDS
===================== */
.card,
.blog-card {
  background: rgba(255,255,255,0.72);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-radius: var(--radius-md);

  overflow: hidden;

  border: 1px solid rgba(255,255,255,0.5);

  box-shadow: var(--shadow-card);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.card:hover,
.blog-card:hover {
  transform: translateY(-6px);

  box-shadow:
    0 20px 40px rgba(20, 61, 42, 0.10);
}

.card img,
.blog-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;

  transition: transform 0.5s ease;
}

.card:hover img,
.blog-card:hover img {
  transform: scale(1.03);
}

/* =====================
   SECTIONS
===================== */
section {
  padding: 90px 0;
}

/* =====================
   FOOTER
===================== */
.footer {
  margin-top: auto;

  background:
    linear-gradient(
      180deg,
      var(--color-brand-dark),
      rgb(0, 0, 0)
    );

  color: var(--color-white);

  padding: 70px 0 24px;

  position: relative;
  overflow: hidden;
}

.footer::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at top left,
      rgba(224, 161, 38, 0.08),
      transparent 30%
    );

  pointer-events: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 42px;

  position: relative;
  z-index: 2;
}

.footer-grid > div {
  position: relative;
  padding-bottom: 20px;
}

.footer-grid > div:not(:last-child)::after {
  content: "";

  position: absolute;
  bottom: 0;
  left: 0;

  width: 45%;
  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(255,255,255,0.25),
      transparent
    );
}

.footer h3,
.footer h4 {
  margin-bottom: 14px;
}

.footer p {
  color: rgba(255,255,255,0.75);
}

.footer a {
  display: flex;
  align-items: center;
  gap: 8px;

  color: rgba(255,255,255,0.72);

  text-decoration: none;

  margin-bottom: 10px;

  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

.footer a:hover {
  color: var(--color-white);
  transform: translateX(4px);
}

.footer-social i {
  color: var(--color-accent-light);
}

/* =====================
   SOCIAL
===================== */
.social-icons {
  margin-top: 16px;
  display: flex;
  gap: 12px;
}

.social-icons a {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(255,255,255,0.08);

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.social-icons a:hover {
  background: var(--color-accent);
  transform: translateY(-3px);
}

/* =====================
   FOOTER BOTTOM
===================== */
.footer-bottom {
  margin-top: 40px;
  padding-top: 18px;

  border-top: 1px solid rgba(255,255,255,0.12);

  text-align: center;

  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
}
.footer-pacto{
    width:100%;
    height:4px;

    background: linear-gradient(
        90deg,
        #F4B400,
        #1A73E8,
        #EA4335,
        #34A853,
        #9334E6
    );
}
/* =====================
   MODAL
===================== */
.modal {
  display: none;

  position: fixed;
  inset: 0;

  z-index: 2000;

  padding-top: 30px;

  background: rgba(0, 0, 0, 0.88);

  backdrop-filter: blur(6px);

      justify-content: center;
    align-items: flex-start;
}

.modal-wrapper{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:fit-content;
    margin:auto;
}
.modal-content {
  display: block;

  max-width: 90vw;
  max-height: 80vh;

  width: auto;
  height: auto;

  object-fit: contain;
}

.modal-info {
  width: 100%;

  background: var(--color-surface);

  padding: 18px 24px;

  border-radius: 0 0 18px 18px;

  text-align: left;
}

.modal-info h3 {
  margin-bottom: 8px;
}

.modal-info p {
  color: var(--color-text-soft);
}


@media (min-width: 1400px) {

  .modal-content {
    max-height: 75vh;
  }

}
.close {
  position: absolute;
  top: 20px;
  right: 40px;

  color: white;

  font-size: 36px;
  cursor: pointer;
}

@keyframes zoom {
  from {
    transform: scale(0.92);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* =====================
   TABLET
===================== */
@media (max-width: 992px) {

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .modal-wrapper {
    max-width: 92vw;
  }

  .modal-content {
    max-width: 92vw;
    max-height: 70vh;
  }

}
/* =====================
   MOBILE
===================== */
@media (max-width: 768px) {

  header .container{
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .menu-toggle{
    display:block;
  }

  nav{
    position:absolute;
    top:100%;
    left:0;

    width:100%;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:0;

    background:rgba(20,61,42,.98);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    max-height:0;
    opacity:0;

    overflow:hidden;

    transition:
      max-height .45s cubic-bezier(.4,0,.2,1),
      opacity .3s ease;
  }

  nav.active{
    max-height:400px;
    opacity:1;
  }

  nav a{
    width:100%;
    text-align:center;
    padding:1rem;

    border-top:1px solid rgba(255,255,255,.08);

    transition:
      background .25s ease,
      padding-left .25s ease;
  }

  nav a:hover{
    background:rgba(255,255,255,.05);
    padding-left:12px;
  }

  nav a::after{
    display:none;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-grid > div:not(:last-child)::after {
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
  }

  .footer a {
    justify-content: center;
  }

  .social-icons {
    justify-content: center;
  }

  .modal-wrapper {
    max-width: 94%;
  }

  .close {
    right: 20px;
    font-size: 30px;
  }

  section {
    padding: 70px 0;
  }
}