/* ===== FUENTES ===== */
/* Regular 400 */
@font-face {
  font-family: 'Nohemi';
  src: url('fuente/Nohemi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium 500 (si tienes Nohemi-Medium.woff2) */
@font-face {
  font-family: 'Nohemi';
  src: url('fuente/Nohemi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nohemi';
  src: url('fuente/Nohemi-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold 700 */
@font-face {
  font-family: 'Nohemi';
  src: url('fuente/Nohemi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}



/* Bold 700 */
@font-face {
  font-family: 'Nohemi';
  src: url('fuente/Nohemi-ExtraBold.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}






/* ===== VARIABLES / BASE ===== */
:root {
  --color-bg: #111C02;
  --color-text: #F8FFE6;
  --color-muted: #6c7b5f;
  --color-accent: #FCFDE9;
  --color-line: #1D3003;

  /* espaciados fluidos */
  --section-y: clamp(48px, 8vw, 120px);
  --gap: clamp(12px, 2vw, 28px);

  /* LATERALES: 80px @1440 → ~120px @1920+ (mín 24px) */
  --pad-inline: clamp(24px, 5.56vw, 120px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nohemi','Poppins',sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

/* LATERALES para toda sección y header/footer */
.header,
section,
footer {
  padding-left: var(--pad-inline);
  padding-right: var(--pad-inline);
}

/* ===== CONTENEDOR ===== */
/* SIN límites de ancho ni padding lateral (para no duplicar) */
.contenedor {
  width: 100%;
  margin-inline: auto;
  /* no padding aquí */
}

/* ============================
   Escala tipográfica fluida
   ============================ */
h1, .titulo-principal {
  font-size: clamp(2.5rem, 6.67vw, 7rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-accent);
  
}
h2, .titulo-seccion {
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-accent);
}
h3, .subtitulo {
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: #F7FBC6;
}
p, .texto-principal {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--color-text);
}
.texto-secundario {
  font-size: clamp(0.875rem, 1vw, 1rem);
  line-height: 1.45;
  color: var(--color-muted);
}
.chip, .etiqueta, .btn-peque {
  font-size: clamp(0.75rem, 0.9vw, 0.875rem);
  font-weight: 600;
}
.btn, .boton {
  font-size: clamp(0.875rem, 1vw, 1rem);
  font-weight: 600;
}

/* ===== HEADER ===== */
.header{
  position: static;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}
.header .contenedor{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: clamp(64px, 8vw, 88px);
  
}
.logo img{
  height: clamp(32px, 3vw, 48px);
  display: block;
}
.nav ul{
  list-style: none;
  display: flex;
  gap: clamp(16px, 2.6vw, 40px);
  font-family: 'Poppins', sans-serif;
}
.nav a{
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
  font-size: clamp(0.875rem, 1.1vw, 1rem);
}

/* Botón hamburguesa por defecto oculto en desktop */

.header { position: relative; }

/* === Botón Burger (oculto en desktop) === */
.burger{
  display: none;
  width: 32px; height: 24px;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  z-index: 60; /* para que esté encima del panel móvil */
}
.burger span{
  display: block; width: 100%; height: 3px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.burger span + span{ margin-top: 5px; }

/* === Mobile (≤900px) === */

@media (max-width: 900px){
  /* contenedor relativo para que el nav absoluto se ancle ahí */


  
  .header .contenedor{ position: relative; } /* ancla del absoluto */

  .burger{ display:block; z-index:60; }

  /* Estado base: oculto visualmente pero medible (para animar) */
   .header .nav{
     display: block !important;               /* clave: no usar display:none */
    position: fixed;                          /* <- antes: absolute */
    inset: 0;                                 /* top/right/bottom/left:0 */
    background: #0E1A06;                      /* fondo del wireframe (ajusta si tienes var) */
    z-index: 50;
    padding: clamp(20px,5vw,28px) var(--pad-inline);
    padding-left: 0;

    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
  }

 /* Abierto: visible + clicable */
   .header .nav.is-open{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    width: 100%;
    
    
  }


 /* “MENÚ” y la línea divisoria */
  .header .nav::before{
    content: "MENÚ";
    display: block;
    color: #B1ED26;                           /* acento/dorado */
    font-weight: 600;
    font-size: clamp(2rem, 5.2vw, 2.5rem);
    letter-spacing: 0.1cap;
    line-height: 1.5;
    margin-top: clamp(64px, 10vw, 72px);      /* aire bajo la franja superior */
    margin-bottom: clamp(40px, 3.5vw, 48px);
    text-align: right;
  padding: clamp(20px,5vw,28px) var(--pad-inline);
  padding-top: 0px;
  border-bottom: 2px solid #cfd7c8;
  }


  .header .nav ul{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0; padding: 0; list-style: none;
    width: 100%;
    text-align: right;
    padding: clamp(20px,5vw,28px) var(--pad-inline);
    padding-top: 0px;
    
  }
  /* Lista vertical ocupando ancho */
  .nav ul{
    display:flex; flex-direction:column;
    gap:16px;
    margin:0; padding:0; list-style:none;
    width:100%;
    text-align:center;
  }

 .header .nav li{ display:block; }
 
  .header .nav a{
    display:block;
    padding: 16px 0;
    text-decoration: none;
    color: #F9FFE6;
    font-size:32px ;
    font-family: 'Nohemi', sans-serif;
    font-weight: 700;
    letter-spacing: 0.1cap;

  }

.header .overlay{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 40; /* debajo del panel (50) y del burger (60) */
  }
  .header .overlay.is-active{
    opacity: 1;
    pointer-events: auto;
  }
}









/* Desktop explícito (opcional, por claridad) */
@media (min-width: 901px){
    .nav{
    position: static;         /* vuelve a fluir dentro del flexbox */
    display: block;           /* siempre visible en desktop */
    margin-left: auto;        /* lo empuja a la derecha */
    background: none;         /* limpia estilos mobile */
    border: none;
    padding: 0;
    box-shadow: none;
    width: auto;
  }

  .nav ul{
    display: flex;            /* horizontal en desktop */
    gap: clamp(16px, 2.6vw, 40px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .burger{
    display: none;            /* oculta burger en desktop */
  }
}


/* El botón por encima del panel */
.burger{ z-index: 60; }

/* === Animación burger → “X” === */
.burger.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity: 0; }
.burger.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }




















/* ===== HERO ===== */



#hero{
  padding-block: var(--section-y);
  padding-bottom: 0;
  padding-top: 64px;

}

/* el contenedor del hero NO re-agrega padding ni se centra */
#hero .contenedor{
  margin-inline: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 64px; /* nuevo padding superior */
}

/* Título y textos del hero */
#hero h1{
  font-size: clamp(3rem, 6.67vw, 7rem);
  margin-bottom: clamp(0.875rem, 2.2vw, 1.5rem);
}


#hero .hero-desc.desktop{

  max-width: 90ch;
  color: var(--color-text);
  margin-bottom: clamp(24px, 2.4vw, 32px);
  font-family: 'Poppins', sans-serif;

  /* 16px (1rem) → 20px (1.25rem) a 1440px → 24px (1.5rem) a 1920px */
  font-size: clamp(
    1rem,
    calc(1.25rem + 0.25rem * ((100vw - 1440px) / 480)),
    1.5rem
  );
}

.hero-desc.mobile { display: none; }

/* ===== HERO: video full-bleed (sin vw) ===== */
/* el bloque del video se “sale” exactamente el padding lateral del section */

#hero .video-hero{
  /* extiende a los bordes reales del viewport sin 100vw/100dvw */
  width: calc(100% + var(--pad-inline) * 2);
  margin-left: calc(var(--pad-inline) * -1);
  margin-right: calc(var(--pad-inline) * -1);

  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
#hero .video-hero video{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}


/* =========================
   SECCIÓN: NOSOTROS
   ========================= */

/* Opción A (dejas tu 72px fijo): */
#nosotros {
  padding-top: 72px;
  padding-bottom: 72px;
  border-top: 4px solid #F0FEC9;
  border-bottom: 4px solid #F0FEC9;
}

/* Opción B (coherente con el resto, fluido):
#nosotros { 
  padding-block: var(--section-y);
  border-top: 4px solid #3A5512;
  border-bottom: 4px solid #3A5512;
}
*/

#nosotros .contenedor {
  display: flex;
  flex-direction: row;           /* columnas horizontales */
  align-items: flex-start;       /* pegados arriba */
  justify-content: space-between;
  gap: clamp(40px, 5vw, 80px);
  flex-wrap: nowrap;
  margin-inline: 0;              /* no centrar */
  padding-left: 0; 
  padding-right: 0;              /* el section ya tiene padding lateral */
}

#nosotros h2{
  color: var(--color-accent);
  font-weight: 500;
  margin: 0;
}

#nosotros .texto { 
  flex: 1 1 50%; 
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);   /* espacio fluido entre h2 y p */
}

#nosotros p {
  margin: 0;
  color: var(--color-text);
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}

/* El CONTENEDOR de la imagen controla el tamaño */
#nosotros .imagen {
  flex: 0 0 clamp(360px, 37.08vw, 960px); /* 534px @1440 ≈ 37.08vw; crece hasta 960px */
  display: flex;
  justify-content: flex-end;     /* imagen a la derecha */
}

/* La IMAGEN se adapta al contenedor */
#nosotros .imagen img {
  display: block;
  width: 100%;                   /* <- clave para que escale */
  height: auto;
  aspect-ratio: 534 / 306;       /* mantiene proporción */
  object-fit: cover;
  border: none;
  box-shadow: none;
}


/* ============ 
   PROYECTOS 
   ============ */


#proyectos { 
  
  padding-block: var(--section-y); 
  padding-bottom: 72px;
  padding-top: 72px;
}

#proyectos h2{
  /* cambio 3: clamp con valor medio lógico para que no se achate */
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 500;
  color:  var(--color-accent);
}

#proyectos .texto-secundario{
  /* cambio 3: clamp corregido */
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  padding-top: 24px;
  color: var(--color-text);
  font-family:'Poppins', sans-serif ;
}

#proyectos .galeria{
  /* cambio 2: aseguramos que siempre sea flex horizontal */
  display: flex !important;
  flex-direction: row;
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;  /* evita saltos de layout */
  scroll-padding-left: var(--pad-inline); /* cambio 4: primer snap alineado */
  padding-bottom: 32px;
  padding-top: 40px;

 -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable both-edges;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #73a9075b #93A8700d; /* thumb / track (con transparencia) */

  /* Peek de la siguiente card */
  margin-right: calc(var(--pad-inline) * -1);
  padding-right: var(--pad-inline);

}


#proyectos .galeria.is-autoscrolling{
  scroll-snap-type: none;  /* evita “saltos” mientras avanza solo */
}



/* WebKit (Chrome, Edge, Safari de escritorio) */
#proyectos .galeria::-webkit-scrollbar{ height: 8px; }
#proyectos .galeria::-webkit-scrollbar-track{
  background: rgba(147,168,112,0.08);
  border-radius: 999px;
}
#proyectos .galeria::-webkit-scrollbar-thumb{
  background: rgba(147,168,112,0.55);   /* verde suave */
  border-radius: 999px;
}
#proyectos .galeria::-webkit-scrollbar-thumb:hover{
  background: rgba(147,168,112,0.8);
}



/* ---------- Cards NORMALES ---------- */
#proyectos .card{
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  flex: 0 0 clamp(
    300px,
    calc(380px + (520 - 380) * ((100vw - 1440px) / (1920 - 1440))),
    520px
  );
  gap: 0; /* fuerza que no haya separación en flex */
}

/* cambio 1: proporción horizontal en lugar de vertical */
#proyectos .thumb{
  width: 100%;
  /* quitamos aspect-ratio y usamos altura fluida ligada al viewport (como tu card) */
  height: clamp(
    320px, 
    calc(520px + (720 - 520) * ((100vw - 1440px) / (1920 - 1440))),
    720px
  );
  overflow: hidden;
   margin: 0; /* anula margen por defecto de <figure> */
   padding: 0;
   line-height: 0;  /* <-- clave: elimina espacio de línea */
   display: block;
}

#proyectos .thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;                       /* rellena todo el alto del card */
  object-position: center;
  
}

#proyectos .meta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-top: 2px solid #FCFDF8;
  border-bottom: 2px solid #FCFDF8;
  padding-top: 16px;
  padding-bottom: 16px;
   margin-top: 0;     /* elimina márgenes accidentales */
  

}

#proyectos .titulo{
  margin: 0; 
  font-weight: 500; 
  font-family: 'Poppins',sans-serif;
  font-size: clamp(1rem, .9vw, 2rem);
}

#proyectos .tag{
  display: inline-block;
  padding: .4em .8em;
  background: #1D3003;
  font-size: clamp(.75rem, .9vw, .875rem);
  white-space: nowrap;
  font-family: 'Poppins',sans-serif;
  font-weight: 400;
  color: var(--color-text);
}

/* ---------- Card ANCHA ---------- */
#proyectos .card--wide{
  flex: 0 0 auto;
  max-width: min(900px, 75vw);
}

#proyectos .card--wide .thumb{
  width: auto;
  aspect-ratio: auto;
}

#proyectos .card--wide .thumb img{
  height: clamp(
    360px,
    calc(520px + (720 - 520) * ((100vw - 1440px) / (1920 - 1440))),
    720px
  );
  width: auto;
  object-fit: cover;
  display: block;
}



/* ====== SERVICIOS ====== */
#servicios{
  padding-block: var(--section-y);
  padding-inline: var(--pad-inline);
  padding-top: 0;
  padding-bottom: 0px;
}

#servicios h2{
  font-size: clamp(
    2rem, /* tamaño mínimo en móviles */
    calc(4rem + (5rem - 4rem) * ((100vw - 1440px) / (1920 - 1440))), /* base 4rem @1440 → 5rem @1920 */
    5rem  /* tamaño máximo */
  );
  font-weight: 400;
  color: var(--color-accent);
  margin: 0 0 clamp(12px, 1.5vw, 16px);
}

#servicios > p{
  max-width: 80ch;
  font-family: 'Poppins',sans-serif; ;;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  margin: 0 0 clamp(40px, 2.5vw, 60px);
}

/* Fila de servicio (separadores como en el wireframe) */
#servicios article{
  display: flex;
  align-items: center; /* centra verticalmente la imagen y el texto */
  gap: 0; /* inicialmente sin separación */
  padding-block: clamp(32px, 2vw, 40px);
  border-top: 1px solid var(--color-line);
  transition: gap .35s ease; /* transición suave del espacio */
}

#servicios article:hover {
  gap: clamp(14px, 2vw, 24px); /* aparece el gap al hover */
}

#servicios article:last-of-type{ 
  
border-bottom: 1px solid var(--color-line); }

/* Miniatura: oculta por defecto, aparece en hover */
#servicios .thumb{
  width: 0;                     /* oculta ocupando 0 ancho */
  overflow: hidden;
  flex: 0 0 auto;
  opacity: 0;
  transform: translateX(-6px);
  transition:
    width .35s ease,
    opacity .25s ease,
    transform .35s ease;
  line-height: 0;               /* anti-gap */
}


/* Tamaño objetivo de la miniatura */
/* 296×140 @1440, escala hacia arriba hasta, por ejemplo, 400×189 @1920 */
@media (min-width: 0px){
  #servicios .thumb{            /* ancho objetivo calculado */
    --thumb-w: clamp(
      200px,
      calc(296px + (400 - 296) * ((100vw - 1440px) / (1920 - 1440))),
      400px
    );
    --thumb-h: clamp(
      94px,
      calc(140px + (189 - 140) * ((100vw - 1440px) / (1920 - 1440))),
      189px
    );
  }
}




/* Mostrar en hover (sin cambiar el layout base del wireframe) */
#servicios article:hover .thumb{
  width: var(--thumb-w);
  opacity: 1;
  transform: translateX(0);
}

/* Imagen interna */
#servicios .thumb img{
  display: block;
  width: var(--thumb-w);
  height: var(--thumb-h);
  aspect-ratio: 296 / 140;
  object-fit: cover;
}

/* Contenido textual (como en el wireframe) */
#servicios .contenido{
  flex: 1 1 auto;
  display: grid;
  gap: clamp(6px, .9vw, 10px);


}
#servicios .contenido h3{
  font-size: clamp(
    1.5rem, 
    calc(2rem + (0.5rem * ((100vw - 1440px) / (1920 - 1440)))), 
    2.5rem
  );
  text-transform: uppercase;
  font-family:'Poppins',sans-serif; 
  font-weight: 300;
  color: #F7FBC6;
  margin: 0;
}
#servicios .contenido p{
  font-size: clamp(
    1rem,
    calc(1.125rem + (0.125rem * ((100vw - 1440px) / (1920 - 1440)))),
    1.25rem
  );
  margin: 0;
  font-family:'Poppins',sans-serif;
  color: #FCFDF8;
}



@media (max-width: 768px){
  /* Apila: imagen arriba, textos abajo */
  #servicios article{
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* texto a la izquierda */
    gap: 16px;                 /* separación visible en mobile */
    padding-block: 24px;       /* un poco menos denso en móvil */
  }

  /* En mobile la miniatura SIEMPRE visible y a ancho completo */
  #servicios .thumb{
    width: 100% !important;    /* ignora el “0” de desktop */
    height: 140px;             /* alto fijo solicitado */
    opacity: 1;
    transform: none;
    overflow: hidden;
    /* anulamos variables desktop para evitar sorpresas */
    --thumb-w: 100%;
    --thumb-h: 140px;
  }

  /* La imagen debe rellenar el thumb: 100% x 100% con recorte */
  #servicios .thumb img{
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    aspect-ratio: auto;        /* anulamos el ratio fijo */
  }

  /* Si tienes imagen directa sin .thumb, cúbrela también */
  #servicios article > img{
    display: block;
    width: 100% !important;
    height: 140px !important;
    max-width: none !important;
    object-fit: cover;
  }

  /* Desactiva el “hover” de desktop en mobile (no hace falta) */
  #servicios article:hover{
    gap: 16px;                 /* mantiene el mismo gap en hover */
  }
  #servicios article:hover .thumb{
    width: 100%;
    transform: none;
    opacity: 1;
  }
}





/* =========================
   SECCIÓN: CONTACTO
   ========================= */

#contacto {
  padding-block: var(--section-y);
  padding-inline: var(--pad-inline);
  padding-top: 72px;
  padding-bottom: 0;
}

/* Título principal */
#contacto h2 {
  /* 2.25rem en móvil → 4rem en 1440px → 5rem en 1920px */
  font-size: clamp(
    2.25rem,
    calc(4rem + (1rem * ((100vw - 1440px) / (1920 - 1440)))),
    5rem
  );
  font-weight: 500;
  color: #C9F85E;
  padding-bottom: 16px;
}

/* Bajada */
#contacto > p {
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  color: var(--color-accent);
  margin: 0 0 clamp(24px, 3vw, 40px);
  font-family: 'Poppins',sans-serif;
}

#contacto .info-contacto{
  grid-template-columns: 1fr 1fr;
  border-bottom: 2px solid #939393;
  padding-bottom: 16px;
}

#contacto .info-contacto h3{
  grid-column: 1 / 2;          /* ← ya NO 1 / -1 en desktop */
  justify-self: start;
  text-align: left;
  font-size: clamp(1.25rem, 1.67vw, 2.5rem);
  font-weight: 600;
  color: var(--color-accent);
  font-family: 'Poppins', sans-serif;

  padding-bottom: 8px;
}

#contacto .info-contacto .email{
  grid-column: 2 / 3;
  justify-self: end;
  text-align: right;
  padding-top: 8px;
  padding-bottom: 8px;
  
}

#contacto .info-contacto .email a {
  color: var(--color-accent); /* color de tu diseño */
  text-decoration: none; /* quita el subrayado */
  border: none; /* asegura que no haya bordes */
  outline: none; /* quita contorno de foco en algunos navegadores */
  color:var(--color-accent);
}


#contacto .info-contacto .telefono{
  grid-column: 2 / 3;
  justify-self: end;
  text-align: right;
  color: var(--color-accent);
    padding-top: 8px;
  padding-bottom: 8px;
}

#contacto .info-contacto .email,
#contacto .info-contacto .telefono{
  font-size: clamp(1.25rem, 2.22vw, 3rem);
}


/* ===== MOBILE (≤900px): 1 columna, h3 izq — mail/teléfono der ===== */

@media (max-width: 900px){

  #contacto{

    padding-top: 48px;
  }

  #contacto .info-contacto{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  #contacto .info-contacto h3{
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
    padding-bottom: 16px;
    font-weight: 500;
  }
  #contacto .info-contacto a, p{
  
    font-family:'Poppins', sans-serif;
   


  }
  #contacto .info-contacto .email,
  #contacto .info-contacto .telefono{
    grid-column: 1 / -1;
    justify-self: end;
    text-align: right;
  }
  
}


#contacto .redes {
  display: grid;
  grid-template-rows: auto auto; /* 2 filas */
  gap: clamp(12px, 2vw, 20px);
  padding-block: clamp(18px, 2.2vw, 24px);
  position: relative;
  border-bottom: 2px solid #939393;
  padding-bottom: 16px
}

/* Línea divisoria */
#contacto .redes::after {
  content:"";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--color-line);
}

/* Título */
#contacto .redes h3 {
  font-weight: 500;
  color: var(--color-accent);
  font-family: 'Poppins', sans-serif;
  margin: 0;
  font-size: clamp(1.25rem, 1.8vw, 2.5rem);
}

/* Lista de iconos */
#contacto .redes ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  margin: 0; padding: 0;
  justify-content: flex-end; /* a la derecha */
  padding-bottom: 16px;
}

/* Enlaces con icono debajo del texto */
#contacto .redes li a {
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  flex-direction: column; /* icono arriba, texto abajo */
  align-items: center;
  gap: 6px;
  font-family: 'Poppins', sans-serif;
}

#contacto .redes li a:hover {
  color: var(--color-accent);
}

/* Iconos más grandes */
#contacto .redes .icono-red {
  width: 40px;
  height: 40px;
  display: inline-block;
}


@media (max-width: 768px) {
  #contacto .redes .icono-red {
    width: 32px;
    height: 32px;
  }

  #contacto .redes{
    gap: 24px;
  }
}


/* ----- FULL BLEED: rompe padding izq/der del layout ----- */

.fullbleed{
   width: 100vw; /* ocupa todo el viewport */
  margin-inline: calc(50% - 50vw); /* centra sin desbordar */
  overflow-x: clip; /* evita barras horizontales */
  padding-left: 0;
  padding-right: 0;
}

/* ----- TICKER ----- */
#ticker{
  background: transparent; /* deja tu fondo de página */
  padding-block: clamp(24px, 4vw, 48px);
  padding-bottom: 88px;
  padding-top: 88px;
}

.marquee{
  overflow: hidden;            /* oculta el exceso a los costados */
  white-space: nowrap;
}

.marquee__track{
  display: inline-flex;
  gap: clamp(24px, 4vw, 48px); /* espacio entre repeticiones visuales */
  will-change: transform;
  animation: ticker-left var(--ticker-speed, 30s) linear infinite;
}

/* Pausa opcional al hover (quítalo si no quieres) */
.marquee:hover .marquee__track{ animation-play-state: paused; }

/* La tipografía enorme y fluida */
#ticker span{
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: .02em;
  color: #E0FD99;              /* beige del wireframe (ajústalo) */
  font-size: clamp(2rem, 10vw, 10rem); /* grande y responsive */
  line-height: 1;
}

#ticker {
  --ticker-speed: 40s; /* más lento que 30s */
}

/* Animación: avanza hacia la izquierda de forma continua */
@keyframes ticker-left{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* se mueve el ancho de la 1ª mitad */
}

/* Accesibilidad: reduce movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
}

@supports (width: 100dvw) {
  .fullbleed {
    width: 100dvw; /* dynamic viewport width */
    margin-inline: calc(50% - 50dvw);
  }
}

/* ===== FOOTER ===== */
:root{
  --footer-bg: #3b5718;          /* verde oscuro del wireframe */
  --footer-text: #eef3e8;        /* texto claro */
  --footer-muted: #cfd7c8;       /* gris verdoso para secundarios */
}

#footer{
  background: var(--footer-bg);
  color: var(--footer-text);
}

#footer .footer__wrap{
  padding-top: 72px;
  padding-bottom: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto; /* logo | columnas | top */
  grid-template-rows: auto auto;        /* filas: contenido + copy */
  align-items: start;
  gap: clamp(16px, 3vw, 24px);
}

/* Logo */
#footer .footer__logo img{
  width: clamp(80px, 12vw, 140px);
  height: auto;
  display: block;
}

/* Columnas interiores */
#footer .footer__cols{
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: clamp(20px, 4vw, 80px);
  align-items: start;
}

#footer .footer__col h4{
  margin: 0 0 clamp(6px, .9vw, 10px);
  font-weight: 500;
  color: var(--footer-text);
  font-size: clamp(0.95rem, 1.1vw, 1.125rem);
  font-family: 'Poppins', sans-serif;;
}

#footer .footer__col ul{
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: clamp(6px, .9vw, 12px);
}

#footer .footer__col a{
  color: var(--footer-muted);
  text-decoration: none;
  font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
  font-family: 'Poppins', sans-serif;;
}
#footer .footer__col a:hover{ color: var(--footer-text); text-decoration: underline; }

/* Botón Top */
/* Botón Top */
#footer .footer__top {
  align-self: start;
  justify-self: end;
  color: var(--footer-text);
  text-decoration: none;
  font-weight: 600;
  font-family: 'Poppins', sans-serif; /* Fuente Poppins */
  font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
  display: flex;
  align-items: center;
  gap: 8px; /* Espacio entre texto y flecha */
}



#footer .footer__top:hover {
  text-decoration: underline;
}


 #footer .footer__copy{
  font-size: 12px;
  color: #D9D9D9;
  font-family: 'Poppins', sans-serif;
 }



/* 
------------------
-------------------
PAGINA DE SERVICIOS 
-------------------
-------------------

*/

#hero-servicios{
  padding-inline: var(--pad-inline);
  padding-block: clamp(32px, 6vw, 72px);
  padding-bottom: 0;
}
#hero-servicios h1{
  font-family: 'Nohemi', sans-serif;
  font-size: clamp(
    2.5rem,   /* ~40px en móviles */
    calc(4rem + (2rem * ((100vw - 1440px) / (1920 - 1440)))), 
    6rem      /* tope máximo en pantallas grandes */
  );
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 clamp(10px, 2vw, 16px);
}
#hero-servicios .intro{
  max-width: 70ch;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--color-text);
  margin: 0;
  font-weight: 400;
}



/* ===== Bloques Servicios ===== */
/* ===== Bloques Servicios ===== */
#servicios-page {
 /* top/bottom mantienen tu escala normal */
  padding-top: clamp(32px, 6vw, 72px);
  padding-bottom: clamp(32px, 6vw, 72px);

  /* left/right: 0px ≤1920, →80px a 2560+ */
  padding-left: clamp(0px, calc((100vw - 1920px) * 0.125), 80px);
  padding-right: clamp(0px, calc((100vw - 1920px) * 0.125), 80px);

}

#servicios-page .contenedor {
  max-width: 1800px;
  margin-inline: auto;
}

/* Fila: 12 columnas → texto e imagen */
.serv-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  border-top: 2px solid var(--color-text);
  
}
.serv-row:last-child {
  border-bottom: 2px solid var(--color-text);
}

/* Ubicación por defecto: texto izq (1–7), imagen der (7–13) */
.serv-row .col-text {
  grid-column: 1 / 7;
  grid-row: 1; /* fuerza misma fila */
  display: flex;
  flex-direction: column;
}
.serv-row .col-media {
  grid-column: 7 / -1;
  grid-row: 1; /* fuerza misma fila */
}

/* Alternado: .invert invierte columnas */
.serv-row.invert .col-text {
  grid-column: 7 / -1;
  grid-row: 1; /* misma fila */
  display: flex;
  flex-direction: column;
}
.serv-row.invert .col-media {
  grid-column: 1 / 7;
  grid-row: 1; /* misma fila */
}



/* Barra de título dentro de la columna de texto */
.serv-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding-block: clamp(12px, 2vw, 16px);
  border-bottom: 2px solid var(--color-text);
   padding-left:  clamp(
    32px, 
    calc(32px + (80 - 32) * ((100vw - 320px) / (1440 - 320))), 
    80px
  );
}



.serv-head h2{
  font-family:'Nohemi', sans-serif; 
  font-weight: 400;
  color: var(--color-text);
  margin: 0;
  font-size: clamp(
    1.5rem,                         /* 24px min en móvil */
    calc(16px + 1.6667vw),          /* 40px @1440 → 48px @1920 */
    3rem                            /* 48px tope */
  );
  
}

 .serv-ico { width: 64px; height: 64px; display: block !important;}


.serv-row.invert .serv-head{
  padding-left: 80px;
}



/* Texto y bullets */
.serv-body {
  display: grid;
  gap: 32px;
  padding-top: clamp(10px, 1.2vw, 12px);
  padding-right:  clamp(
    32px, 
    calc(32px + (80 - 32) * ((100vw - 320px) / (1440 - 320))), 
    80px
  );
   padding-left:  clamp(
    32px, 
    calc(32px + (80 - 32) * ((100vw - 320px) / (1440 - 320))), 
    80px
  );
  padding-bottom: 32px;
  margin-top: auto; /* siempre al fondo */
}


.serv-row.invert .serv-body {
  display: grid;
  gap: 32px;
  padding-top: clamp(10px, 1.2vw, 12px);
  padding-left:  clamp(
    32px, 
    calc(32px + (80 - 32) * ((100vw - 320px) / (1440 - 320))), 
    80px
  );
  padding-right: clamp(
    32px, 
    calc(32px + (80 - 32) * ((100vw - 320px) / (1440 - 320))), 
    80px
  );
  padding-bottom: 32px;
  margin-top: auto; /* siempre al fondo */
}


.serv-body p {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.125rem, 1.2vw, 1.5rem);
  color: var(--color-text);
}
.serv-bullets {
  margin: 0;
  padding-left: 1em;
  display: grid;
  gap: 4px;
  font-size: clamp(.95rem, 1.1vw, 1rem);
  color: var(--color-text);
  font-family:'Poppins', sans-serif ;
  font-weight: 300;
}

/* Imagen: comportamiento por viewport */
.col-media{
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* aquí defines el alto base escalable */
  height: clamp(
    680px,
    calc(680px + (200px * ((100vw - 1440px) / (1920 - 1440)))),
    880px
  );
}

/* La caja rellena la columna */
.col-media .media-box{
  width: 100%;
  height: 100%;     /* ocupa todo el alto del figure */
  overflow: hidden;
}

/* La imagen rellena la caja */
.col-media .media-box img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* recorta sin deformar */
  display: block;
}





/* ===== Responsive ===== */
@media (max-width: 900px) {
  /* apila: imagen arriba, luego texto */

/* Apilar todo igual (sin importar si tiene .invert) */
  .serv-row,
  .serv-row.invert{
    display: flex;              /* pasamos de grid a flex */
    flex-direction: column;
    
  }

  /* Desactivar columnas/filas de desktop */
  .serv-row .col-text,
  .serv-row .col-media,
  .serv-row.invert .col-text,
  .serv-row.invert .col-media{
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100%;
  }

  /* “Aplana” la columna de texto para poder intercalar imagen */
  .serv-row .col-text,
  .serv-row.invert .col-text{
    display: contents;          /* permite reordenar serv-head / serv-body */
  }

  /* Orden único en mobile: H2 → IMG → BODY */
  .serv-row .serv-head,
  .serv-row.invert .serv-head{ 
    
    order: 1; 
  padding-left: 24PX;
  
  
  }

  .serv-row .col-media,
  .serv-row.invert .col-media{ order: 2; }

  .serv-row .serv-body,
  .serv-row.invert .serv-body{
    order: 3;
    margin-top: 0;              /* por si en desktop usas margin-top:auto */
    padding-top: 24PX;
    padding-left: 24px;
  }



  .col-media {
    height: 240px;
  }
  .col-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


  .serv-head h2 { font-size: 1.5rem; } /* ~24px */
  .serv-body p  { font-size: 1rem; }   /* 16px */


.serv-ico{
  height: 48px;
  width: 48px;
}


}







@media (max-width: 900px){
  .col-media{
    height: 240px;    /* override del alto */
  }
  .col-media .media-box{
    height: 100%;
  }
}




/* ===== FORMULARIO SERVICIOS ===== */
#formulario-servicios {
padding-bottom: 72px;
}

#formulario-servicios .form-wrapper {
  padding: 72px 80px;
  max-width: 1200px; /* opcional para limitar ancho */
  margin-inline: auto; /* lo centra en el section */
  color: var(--color-text);
  background-color: #001510;
}

#formulario-servicios h2 {
  font-family: 'Nohemi', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 3vw, 3rem);
  color: var(--color-accent);
  margin-bottom: 12px;
}

#formulario-servicios p {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.25rem, 1.25vw, 1.5rem);
  margin-bottom: clamp(56px, 5vw, 64px);
  max-width: 70ch;
}

.form-servicios {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 4vw, 48px);
}

.form-row.full {
  grid-template-columns: 1fr;
}

label {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  color: var(--color-text);
  font-family: 'Poppins', sans-serif;
}

input,
textarea {
  background: transparent;
  border: none;
  border-bottom: 2px solid #d4ddc5;
  padding: 8px 4px;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: var(--color-text);
}

input:focus,
textarea:focus {
  outline: none;
  border-bottom: 1px solid var(--color-accent);
}

.form-check.oneline{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Checkbox fijo */
.form-check.oneline input[type="checkbox"]{
  flex-shrink:0;
  width:18px; height:18px; margin:0;
}

/* Texto en una sola línea (y sus descendientes) */
.form-check.oneline .oneline-text,
.form-check.oneline .oneline-text *{
  white-space: nowrap !important;   /* 🔑 no partir */
  display: inline !important;        /* 🔑 evita 'a{display:block}' global */
}

/* Estética */
.form-check.oneline label{
  font-family:'Poppins',sans-serif;
  font-size:0.95rem;
  line-height:1.3;
  cursor:pointer;
}
.form-check.oneline a{
  color:var(--color-accent);
  text-decoration:underline;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.form-servicios button {
  background: transparent;
  width: 293px;
  border: 2px solid #B1ED2E;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  color: #B1ED2E;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  
}

.form-servicios button:hover {
  background: #B1ED2E;
  color: var(--color-bg-dark, #0c1910);
}

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

#formulario-servicios {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 48px;
  padding-bottom: 16px;
}


  #formulario-servicios .form-wrapper {
    padding: 48px 24px; /* menos padding en mobile */
  }


  #formulario-servicios .form-wrapper h2{
    color: #B2DD52;
  }

  #formulario-servicios .form-wrapper p{
    font-size: 1.125rem;
  }

  .form-row {
    grid-template-columns: 1fr;   /* una sola columna */
    gap: 24px;                    /* menos separación vertical */
    border-radius: 0;
  }

  .form-actions {
    justify-content: center;
  }

.form-wrapper .input{
  border-radius: 0;
}


}





/* Mobile: permite salto y mantiene alineación limpia */
@media (max-width: 600px) {
 .form-check.oneline{
    align-items:flex-start;
  }
  .form-check.oneline .oneline-text,
  .form-check.oneline .oneline-text *{
    white-space: normal !important;  /* ahora sí puede bajar a 2+ líneas */
  }
}



/* Modal base oculto */
.modal[aria-hidden="true"] { display: none; }
.modal[aria-hidden="false"] { display: grid; }

/* Layout modal */
.modal {
  position: fixed;
  inset: 0;
  place-items: center;
  z-index: 999;
}
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
}
.modal__content {
  position: relative;
  background: var(--color-bg, #0E1A06);
  color: var(--color-text, #F9FFE6);
  border: 1px solid var(--color-line, #cfd7c8);
  border-radius: 12px;
  padding: 24px clamp(20px, 4vw, 32px);
  width: min(520px, 90vw);
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  text-align: left;
}
.modal__close {
  position: absolute;
  top: 10px; right: 12px;
  width: 36px; height: 36px;
  border: 0; background: transparent; color: currentColor;
  font-size: 24px; line-height: 1; cursor: pointer;
}
.modal__btn {
  margin-top: 16px;
  background: transparent;
  border: 2px solid var(--color-accent, #D99100);
  color: var(--color-accent, #D99100);
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
.modal__btn:hover {
  background: var(--color-accent, #D99100);
  color: var(--color-bg, #0E1A06);
}
























 

/* Responsive original*/
@media (max-width: 900px){
  #footer .footer__wrap{
    grid-template-columns: 1fr;      /* todo en una columna */
    grid-template-rows: auto auto auto auto;
    text-align: left;
  }
  #footer .footer__logo{ order: 1; }
  #footer .footer__cols{
    order: 2;
    grid-template-columns: 1fr;      /* columnas apiladas */
    gap: clamp(16px, 3vw, 24px);
  }
  #footer .footer__top{
    order: 3;
    justify-self: end;               /* a la derecha en mobile */
  }
  #footer .footer__copy{
    order: 4;
    grid-column: 1 / -1;
  }
}

/* Suaviza el scroll del botón Top (opcional si no lo tienes ya) */
html{ scroll-behavior: smooth; }










/* Móvil: carrusel horizontal */
@media (max-width: 768px) {
  #proyectos .galeria {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--gap);
    padding-bottom: 8px;
  }

  #proyectos .card {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
}





/* ===== Responsive ===== */
@media (max-width: 900px) {
  #nosotros .contenedor { 
    flex-direction: column; 
  }
  #nosotros .imagen { 
    flex: 0 0 auto; 
    max-width: 100%; 
    justify-content: center;
  }
}

/* Control de longitud de línea en desktop grande */
@media (min-width: 1920px) {
  #nosotros h2 { max-width: 20ch; }  /* mantiene el h2 en ~2 líneas */
  #nosotros p  { max-width: 48ch; }  /* legibilidad */

}



/* ===== Responsive ===== */


/* Móvil: una columna */
@media (max-width: 900px) {
  #nosotros .contenedor { flex-direction: column; }
  #nosotros .imagen { flex: 0 0 auto; max-width: 100%; }
}




@media (min-width: 1920px) {
  #nosotros p {
    max-width: 48ch;
  }
}

@media (max-width: 1024px){
  #nosotros .imagen{ order: -1; }
}

@media (max-width: 600px){
  #nosotros .texto{
    gap: clamp(10px, 3vw, 16px);
  }
  #nosotros .texto h2{
    /* ya tienes escalas globales; si quieres, fuerza un poco menos grande */
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }
}

/* ===== RESPONSIVE LIGERO ===== */
@media (max-width: 900px){
  .nav ul{ display: none; }



  #hero{ 
    
  text-align: left;
    padding-top: 40px;

}

  

  #hero h1{

  margin-bottom: 8px;
  font-weight: 700;
  font-family: 'Nohemi', sans-serif;


  }

  
  .hero-desc.desktop { display: none; }


  .hero-desc.mobile { 
    
    display: block;
    padding-bottom: 24px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
  
  }

  
  .video-hero{ 
    margin-inline: auto; 

  
  } 
    

#hero video {
    width: 100%;
    height: 480px;
    object-fit: cover;  /* asegura que el video llene el espacio */
    display: block;
  }
  
#hero .video-hero video {
    width: 100%;
    height: 480px;       /* fuerza la altura en mobile */
    object-fit: cover;   /* mantiene proporción, recorta exceso */
  }

}


/* === FIX RENDERIZADO IOS/ANDROID === */
html, body {
  font-synthesis: none;
  -webkit-font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}