/* Variables y reset básico */
:root{
  --brand-1: #1E8F4A;
  --brand-2: #0f6a34;
  --accent: #0b5b2e;
  --muted: #6b7b75;
  --bg: #f6faf7;
  --card-bg: #ffffff;
  --radius: 14px;
  --shadow-1: 0 8px 30px rgba(6,30,20,0.06);
  --shadow-2: 0 14px 44px rgba(6,30,20,0.08);
  --max-width: 1200px;
  --gap: 20px;
  --transition: 220ms cubic-bezier(.2,.9,.2,1);
  --text: #0b2b27;
  --about-max-width: 1400px;   /* más ancho para contenedores */
  --section-gap: 120px;        /* secciones más grandes */
  --container-pad: 72px;       /* padding más generoso */
  --card-pad: 36px;
  --radius: 18px;
  --shadow: 0 24px 70px rgba(6,30,20,0.09);
}

/* Global styles */
*{ box-sizing:border-box; }
body{ font-family: Inter, "Helvetica Neue", Arial, sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* Main wrapper (centra y limita ancho del contenido) */
main{
  max-width:1600px;         /* incremento del ancho total del layout */
  margin:64px auto;
  padding:36px;
}

/* Secciones: más grandes y separadas */
.section{
  padding: var(--section-gap) 0;
}

/* Contenedor interno: aumentar el ancho máximo (visual) */
.about-container,
.historia-container,
.valores-grid {
  max-width: var(--about-max-width);
  margin: 0 auto;
}

/* ABOUT hero block */
.about-container{
  display:flex;
  gap:56px;                 /* más espacio entre columnas */
  align-items:center;
  background: linear-gradient(180deg, rgba(30,143,74,0.03), rgba(30,143,74,0.008));
  border-radius:var(--radius);
  padding: var(--container-pad);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.about-text{
  flex:1 1 58%;
  min-width:260px;
}
.about-text h1{
  margin:0 0 18px;
  font-size:52px;             /* título más grande */
  color:var(--brand);
  line-height:1.04;
  letter-spacing:-0.6px;
}
.about-text p{
    margin:0;
    color:var(--muted);
    font-size:19px;
    line-height:1.78;
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    margin-bottom: 0.9rem;
}

/* Image area */
.about-image{
  flex:0 0 52%;
  max-width:720px;         /* imagen puede ser más ancha */
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:12px;
  background:#fff;
  box-shadow: 0 10px 34px rgba(6,30,20,0.04);
}
.about-image img{
  max-width:100%;
  max-height:680px;
  object-fit:cover;
  border-radius:14px;
}

/* Valores grid */
.valores{
    margin-top: 20px;
  margin-bottom: 30px;
  padding-top:12px;
  text-align:center;
}
.valores h2{ margin:0 0 18px; color:var(--brand-2); font-size:22px; }
.valores-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:36px;
  max-width: var(--about-max-width);
  margin:18px auto 0;
}
.valor-card{
  background:#fff;
  padding:var(--card-pad);
  border-radius:14px;
  box-shadow: 0 12px 36px rgba(6,30,20,0.04);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  transition: transform .28s ease, box-shadow .28s ease;
}
.valor-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 24px 56px rgba(6,30,20,0.08);
}
.valor-card img{ width:84px; height:84px; }
.valor-card h3{ margin:8px 0; font-size:18px; color:var(--accent); }
.valor-card p{ margin:0; color:var(--muted); font-size:14px; }

/* Historia section */
.historia-container{
  display:flex;
  gap:56px;
  align-items:center;
  background:#fff;
  border-radius:var(--radius);
  padding: var(--container-pad);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.historia-text{
  flex:1 1 60%;
  min-width:260px;
}
.historia-text h2{ font-size:22px; margin:0 0 12px; color:var(--brand); }
.historia-text p{ font-size:16px; color:var(--muted); line-height:1.72; margin-bottom: 0.9rem;
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    margin-bottom: 0.9rem;
}
/* bloque de imagen: limitado y recortado si es necesario */
.historia-image{
  flex:0 0 48%;
  max-width:760px;
  overflow:hidden;
  border-radius:12px;
  background: linear-gradient(180deg,#ffffff,#fbfff9);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 34px rgba(6,30,20,0.04);
}
/* Imagen: ocupa todo el contenedor pero manteniendo proporción y recortando contenido sobrante */
.historia-image img{
  width:100%;
  height:100%;
  max-height:720px;
  object-fit:cover;          /* evita distorsión y controla overflow */
  object-position:center;    /* si necesitas otro foco usar top/center */
  display:block;
  border-radius:10px;
}

/* Utilities */
.center{ text-align:center; }
.container{ max-width:var(--max-width); margin:0 auto; padding:0 16px; }

/* Reveal animation utility */
.reveal{ opacity:0; transform:translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform:none; }

/* RESPONSIVE (mejorado para móvil) */

/* Tablet-ish */
@media (max-width:1024px){
  main{
    max-width:1100px;
    padding:32px 20px;
    margin:40px auto;
  }
  .about-container,
  .historia-container{
    padding:32px;
    gap:28px;
  }
  .about-text h1{ font-size:38px; }
  .about-text p,
  .historia-text p{ font-size:16px; line-height:1.7; }
  .about-image, .historia-image{ max-width:520px; }
  .valores-grid{ grid-template-columns:repeat(2,1fr); gap:22px; }
}

/* Mobile: stacked layout, larger tap targets, compressed paddings */
@media (max-width:720px){
  main{
    max-width:100%;
    margin:18px;
    padding:16px;
  }

  /* Stack primary containers and center content */
  .about-container,
  .historia-container{
    flex-direction:column-reverse;
    align-items:center;
    text-align:center;
    padding:18px;
    gap:18px;
  }

  .about-text, .historia-text{
    width:100%;
    padding:0 6px;
  }

  /* Scale headings and body text for mobile readability */
  .about-text h1{ font-size:26px; line-height:1.12; margin-bottom:12px; }
  .historia-text h2{ font-size:20px; }
  .about-text p, .historia-text p{ font-size:15px; line-height:1.6; }

  /* Make images responsive and constrained */
  .about-image, .historia-image{
    width:100%;
    max-width:100%;
    height:auto;
    padding:0;
    border-radius:12px;
  }
  .about-image img,
  .historia-image img{
    width:100%;
    height:auto;
    max-height:360px;
    object-fit:cover;
  }

  /* Valores: single column, bigger cards, easier tap */
  .valores-grid{
    grid-template-columns:1fr;
    gap:16px;
    padding:0 8px;
  }
  .valor-card{
    padding:16px;
    min-height:auto;
    align-items:center;   /* centrar elementos en el eje transversal */
    text-align:center;    /* centrar texto */
  }
  .valor-card img{
    margin:0 auto;        /* centrar la imagen dentro de la tarjeta */
  }

  /* Spacing and buttons full width for touch */
  .section{ padding:28px 0; }
  .btn-ver-codigo,
  .btn, a.button{
    width:100%;
    display:inline-flex;
    justify-content:center;
    padding:12px 16px;
    box-sizing:border-box;
  }

  /* Improve tap targets */
  a, button{
    min-height:44px;
    padding:10px 12px;
  }

  /* Keep reveals performant on mobile */
  .reveal{ transition: opacity .42s ease, transform .42s ease; }
}

/* Small phones: tighten further */
@media (max-width:480px){
  .about-text h1{ font-size:22px; }
  .about-text p, .historia-text p{ font-size:14px; line-height:1.5; }
  .about-image img, .historia-image img{ max-height:300px; }
  main{ padding:12px; margin:12px; }
  .about-container, .historia-container{ padding:14px; gap:14px; border-radius:12px; }
  .valores-grid{ gap:12px; }
}

/* End of about.css */