:root{
  --morado:#4D0D73;
  --verde:#334A43;
  --filo:#5DC2A5;
  --comunidad:#49A302;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Poppins',sans-serif;color:#000;background:#fff;}
/* Tipografías globales */
.title,h1,h2{font-weight:700;letter-spacing:-1px;font-size:clamp(36px,6vw,50px);}
.subtitle,h3{font-weight:700;letter-spacing:-1px;font-size:clamp(22px,3.2vw,30px);}
.text,p{font-size:clamp(16px,2.4vw,18px);}
/* navbar */
.navbar{position:fixed;top:0;width:100%;background:var(--morado);z-index:1000;}
.nav-inner{max-width:1200px;margin:0 auto;padding:12px 20px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;min-height:64px;}
.logo{height:40px}
.primary-nav{display:flex;justify-content:center;}
.nav-links{list-style:none;display:flex;gap:48px;margin:0;padding:0;}
.nav-links a{color:#fff;text-decoration:none;}
.menu-toggle{display:none;background:none;border:none;color:#fff;font-size:28px;cursor:pointer;}
/* hero */
.hero-section{padding-top:100px}
.hero-slider{width:100vw;margin-left:calc(50% - 50vw);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;height:70vh;}
.hero-image{position:relative;width:100%;height:100%;}
.slider-image{width:100%;height:100%;object-fit:cover;transition:opacity .5s ease;opacity:1;}
.slider-image.fade-in{opacity:0;}
.hero-gradient{position:absolute;left:0;right:0;bottom:0;height:36vh;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);z-index:1;}
.hero-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:-35%;width:min(560px,60vw);z-index:2;}
.arrow{background:none;border:none;font-size:2rem;color:#fff;position:absolute;top:50%;transform:translateY(-50%);z-index:3;}
.arrow.left{left:1rem}.arrow.right{right:1rem}
/* helpers */
.content-wrap{max-width:1100px;margin:0 auto;padding:0 20px;}
.intro-section{text-align:center;color:var(--morado)}
.papayas-img{display:block;margin:0 auto;max-width:680px;width:100%;height:auto;}
/* Fundadores */
.timeline-section{margin-top:40px;color:var(--morado)}
.timeline-grid{display:grid;grid-template-columns:120px 1fr;gap:32px;align-items:start;}
.timeline-col{display:flex;justify-content:center;}
.timeline-svg{width:80px;height:auto;}
.timeline-content{display:grid;gap:40px;}
.person-text{line-height:1.7;}
/* Organigrama separation */
.org-image{margin-top:18px;margin-bottom:160px}
/* Sección verde */
.section-green{color:var(--verde)}
.timeline-rows{margin-top:8px;display:grid;gap:10px;}
.timeline-rows .row{display:grid;grid-template-columns:100px 1fr;gap:16px;align-items:baseline;}
.timeline-rows .year{font-weight:700;letter-spacing:-1px;}
.lead{margin-top:6px;max-width:900px;}
.bullets{margin:10px 0 0 0;padding:0;list-style:none;display:grid;gap:8px;}
/* Filosofía band */
.filo-bg{background:var(--filo);position:relative;padding:72px 0 36px;}
.bubbles-mask{position:absolute;top:-100px;left:0;right:0;height:300px;-webkit-mask:url('img/burbujas.svg') center/contain no-repeat;mask:url('img/burbujas.svg') center/contain no-repeat;background:currentColor;}
.bubbles-filo{color:var(--filo)}
.invert{color:#fff}
.band-image img{display:block;width:100%;height:auto;}
.values-row{margin:24px 0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.values-row.three{grid-template-columns:repeat(3,1fr);}
.value-card{background:#F3F7F5;border-radius:12px;overflow:hidden;text-align:center;}
.value-card img{display:block;width:100%;height:auto;}
.value-card .icon{height:48px;display:flex;align-items:center;justify-content:center;margin:10px 0 0;}
.value-card .icon img{max-height:44px;}
.v-label{font-weight:700;padding:10px 0;color:var(--verde)}
.capitalismo{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;}
.cap-icon{width:200px;height:200px;object-fit:cover;border-radius:100%;display:block}
.btn-primary{display:inline-block;padding:12px 18px;border-radius:8px;background:#1f3c34;color:#fff;text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.02em;border:none;cursor:pointer}
/* Comunidad */
.band-section .band-top{background:var(--comunidad);position:relative;padding:72px 0 36px;margin-top:40px;}
.band-section .bubbles-mask{top:-100px;background:var(--comunidad)}
.band-grid{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;}
.col-logo img{width:190px;height:auto;display:block;}
.band-image img{display:block;width:100%;height:auto;}
/* Academia nueva */
.academia-section{color:var(--verde);margin:56px 0 0;}
.academia-grid{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding-top:20px;}
.academia-logo img{width:200px;height:auto;display:block;opacity:.9}
.bold-line{font-weight:700}
.talento{margin-top:24px}
.talento-grid{display:block}
.talento-image img{display:block;width:100%;height:auto;margin-top:16px}
/* Contacto */
.contact-section{background:#F1E8F4;padding:70px 0 100px;color:#334A43;}
.contact-intro{ max-width:520px; }
.contact-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"name email" "message message" ". button";gap:18px 24px;margin-top:26px;}
.contact-grid .field{ display:flex; flex-direction:column; }
.contact-grid .field:nth-child(1){ grid-area:name; }
.contact-grid .field:nth-child(2){ grid-area:email; }
.contact-grid .field-full{ grid-area:message; }
.contact-grid .actions{ grid-area:button; display:flex; justify-content:flex-end; align-items:center; }
.contact-grid input,.contact-grid textarea{width:100%; padding:12px 14px; border:1.5px solid #2F4A43; border-radius:2px; background:#fff; font-family:'Poppins',sans-serif; font-size:16px; letter-spacing:.02em; outline:none;}
.contact-grid input::placeholder,.contact-grid textarea::placeholder{ color:#334A43; text-transform:uppercase; opacity:.85; }
.form-msg{ grid-column:1 / -1; margin:4px 0 0; font-size:14px; }
/* Footer */
.site-footer{background:var(--morado);color:#fff;text-align:center;padding:140px 20px 60px;position:relative;margin-top:0;}
.footer-notch{position:absolute;left:50%;transform:translateX(-50%);top:-28px;background:var(--morado);width:510px;height:140px;border-top-left-radius:18px;border-top-right-radius:18px;display:flex;align-items:center;justify-content:center;}
.footer-notch img{height:64px;}
.footer-nav{display:flex;gap:36px;justify-content:center;flex-wrap:wrap;margin-top:20px;}
.footer-nav a{color:#fff;text-decoration:none;letter-spacing:.02em;}
.linkedin{display:inline-block;margin:16px 0;}
.weblink{display:inline-block;margin:0px 20px;}
.footer-link a{color:#fff;text-decoration:none;}
/* Responsive */
@media (max-width:900px){ .values-row{grid-template-columns:1fr 1fr;} .capitalismo{grid-template-columns:1fr;} .footer-notch{width:320px;height:120px;} }
@media (max-width:768px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--morado);flex-direction:column;gap:16px;padding:16px 20px;opacity:0;animation:fadeIn .3s ease forwards;}
  .nav-links.show{display:flex;opacity:1}
  .menu-toggle{display:inline-block}
  .timeline-col{display:none}
  .timeline-grid{grid-template-columns:1fr;gap:24px;}
  .band-grid,.academia-grid{grid-template-columns:1fr}
  .col-logo{order:-1;display:flex;justify-content:flex-end}
  .contact-grid{ grid-template-columns:1fr; grid-template-areas: "name" "email" "message" "button"; }
  .hero-slider{height:60vh;}
}
@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}


/* === PATCH: Imágenes responsivas (evita overflow y desajustes en móvil) === */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* En caso de imágenes de bloques de contenido específicos */
.org-image img,
.section img,
.content-wrap img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* === AJUSTES HEADER + HERO (logo 100px y sin gap) === */

/* Logotipo del header a 100px en todos los breakpoints */
.navbar .logo{
  height: 100px;
  display: block;       /* evita espacio “fantasma” por baseline */
}

/* El contenedor del header acompaña esa altura */
.nav-inner{
  min-height: 100px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* No dejes margen entre barra y slider */
.navbar{ margin-bottom: 0; }

/* Hero pegado a la barra (sin franja blanca) */
.hero-section{
  margin-top: 0;
  padding-top: 0;
}
.hero-slider{ margin-top: 0; }

/* Asegura que el menú móvil siga funcionando y sin desbordes */
@media (max-width: 992px){
  .primary-nav{
    /* si ya lo tienes con fixed o absolute, respeta tu implementación;
       estas líneas garantizan que no se desplace raro */
    left: 0; right: 0;
  }
  .nav-inner{ overflow: visible; }
}

/* Imágenes responsivas (mantiene el layout correcto en móvil) */
img{
  max-width: 100%;
  height: auto;
  display: block;
}







.principios-autogestion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.principio-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.principio-numero {
  background-color: #5DC2A5;
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.principio-texto {
  flex: 1;
}


/* =============================================================
   APPEND TO: styles.css  (añadir al final del archivo)
   Patch: Principios + Valores + Header/Hero tidy
   Fecha: 2025-08-15
   ============================================================= */

/* === HEADER (logo 100px) + HERO sin gap === */
.navbar .logo{ height:100px; display:block; }
.nav-inner{ min-height:100px; padding-top:8px; padding-bottom:8px; }
.navbar{ margin-bottom:0; }
.hero-section{ margin-top:0; padding-top:0; }
.hero-slider{ margin-top:0; }

/* === Imágenes responsivas (evita overflow) === */
img{ max-width:100%; height:auto; display:block; }

/* ---------- Principios de la autogestión ---------- */
.principios-autogestion{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  margin-top:1rem;
}
.principio-item{
  display:flex;
  align-items:flex-start;
  gap:1rem;
}
.principio-numero{
  background:#5DC2A5;
  color:#fff;
  font-weight:700;
  line-height:1;
  padding:.6rem 1rem;
  border-radius:10px;
  font-size:1.15rem;
  flex-shrink:0;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.principio-texto p{ margin:.2rem 0; }

/* ---------- Nuestros valores ---------- */
.valores-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:28px;
  margin-top:24px;
}
.valor-card{
  height:300px;                 /* requerido */
  border-radius:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  padding:20px;
}
.valor-card .valor-icon{
  width:64px; height:64px; margin-bottom:18px; display:block;
}
/* Colores guía */
.valor-respeto{        background:#49B89D; }
.valor-excelencia{     background:#FFD200; color:#333; }
.valor-honestidad{     background:#C2146C; }
.valor-agradecimiento{ background:#F26722; }
.valor-compromiso{     background:#67C3E9; color:#143B4A; }

/* Responsivo */
@media (max-width:1024px){ .valores-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px){  .valores-grid{ grid-template-columns:repeat(2,1fr); } .valor-card{ height:260px; } }
@media (max-width:480px){  .valores-grid{ grid-template-columns:1fr; }          .valor-card{ height:240px; } }



/* =============================================================
   PATCH desde respaldo (clases existentes)
   - Principios de la autogestión: .principios-grid .principio .badge
   - Nuestros valores: .values-row .value-card (5 items)
   Fecha: 2025-08-15
   ============================================================= */

/* ===== Principios de la autogestión ===== */
.principios-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.principios-grid .principio{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px;
}
.principios-grid .principio .badge{
  background: #5DC2A5;     /* color solicitado */
  color: #fff;
  font-weight: 700;
  border-radius: 10px;      /* esquinas redondeadas */
  padding: 6px 14px;        /* cuadro con respiración */
  line-height: 1;
  display: inline-block;
  min-width: 40px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
/* título corto cuando exista */
.principios-grid .principio .p-title{ font-weight: 700; margin-bottom: 2px; }

/* ===== Nuestros valores ===== */
.values-row{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
}
.values-row .value-card{
  height: 400px;                 /* alto solicitado */
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 20px;
}
.values-row .value-card .icon img{
  width: 64px;
  height: 64px;
  display: block;
  margin-bottom: 16px;
}
.values-row .value-card .v-label{ margin-top: 6px; }

/* Colores por orden (Respeto, Excelencia, Honestidad, Agradecimiento, Compromiso) */
.values-row .value-card:nth-child(1){ background: #49B89D; }            /* Verde */
.values-row .value-card:nth-child(2){ background: #FFD200; color:#333;} /* Amarillo */
.values-row .value-card:nth-child(3){ background: #C2146C; }            /* Magenta */
.values-row .value-card:nth-child(4){ background: #F26722; }            /* Naranja */
.values-row .value-card:nth-child(5){ background: #67C3E9; color:#143B4A;} /* Azul */

/* Responsivo */
@media (max-width: 1024px){
  .values-row{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
  .values-row{ grid-template-columns: repeat(2, 1fr); }
  .values-row .value-card{ height: 260px; }
}
@media (max-width: 480px){
  .values-row{ grid-template-columns: 1fr; }
  .values-row .value-card{ height: 240px; }
}

/* ===============================================
   PATCH: Burbujas detrás del texto (Filosofía + Comunidad)
   =============================================== */
.bubbles-mask{
  z-index:0;                 /* siempre debajo */
  pointer-events:none;       /* no bloquea clics del contenido */
}
/* Asegura contexto y orden de capas en las bandas */
.filo-band .band-top,
.band-section .band-top{
  position:relative;
  z-index:1;
}
/* Contenido por encima de la máscara */
.filo-band .filo-copy,
.filo-band .filo-copy *{
  position:relative;
  z-index:2;
}
.band-section .band-grid,
.band-section .band-copy,
.band-section .col-logo{
  position:relative;
  z-index:2;
}

/* Ajuste responsivo opcional para máscara */
@media (max-width: 640px){
  .bubbles-mask{
    top:-100px;
    height:300px;
  }
}

/* Filosofía: bloque de 3 columnas (icono + título + texto) */
.filo-features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  align-items:start;
  margin:40px 0;
}
.feature-icon{
  width:220px;               /* ajusta si quieres más/menos grande */
  max-width:100%;
  height:auto;
  display:block;
  margin-bottom:12px;
}

.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 10px;
}
.button1 {background-color: #04AA6D;} /* Green */


@media (max-width:1024px){ .filo-features{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){  .filo-features{ grid-template-columns:1fr; } }


/* form handles styles*/
/* Estilos para mensajes del formulario */
.form-msg {
  display: none;
  padding: 12px;
  margin-top: 15px;
  border-radius: 4px;
  font-size: 14px;
}

.form-msg.error {
  background-color: #fee;
  color: #c33;
  border: 1px solid #fcc;
}

.form-msg.success {
  background-color: #efe;
  color: #3c3;
  border: 1px solid #cfc;
}

/* Estilos para campos con error */
.field input.error,
.field textarea.error {
  border-color: #c33;
  background-color: #fff5f5;
}

/*

### 3. **Estructura de archivos en tu servidor**
```
tu-proyecto/
├── index.html (tu página con el formulario)
├── send-mail.php (el archivo PHP corregido)
├── form-handler.js (el JavaScript nuevo)
└── PHPMailer/ (carpeta que ya existe en tu servidor)
    └── PHPMailerAutoload.php
	
	*/