/* =====================================================================
   STYLESHEET ORDENADO (SIN ALTERAR DECLARACIONES NI SU ORDEN ORIGINAL)
   ---------------------------------------------------------------------
   Nota: Para respetar tu requisito de "sin quitar ni alterar nada",
   NO he cambiado el orden de las reglas ni la posición de propiedades.
   ÚNICAMENTE añadí comentarios de sección y un índice al inicio para
   facilitar la navegación y el mantenimiento. El CSS renderiza igual.

   ÍNDICE RÁPIDO
   00) Import & Reset
   10) Base (html, body, main)
   20) Header & Branding (logo, nav)
   30) Secciones generales y Home/Bio/Projects básicos
   40) Hero / Títulos y subtítulos de portada
   50) Utilidades (links destacados, scroll, section spacing)
   60) Destacados (highlight cards)
   70) Tipografía global (h1–h6, p, description)
   80) Botones
   90) Tarjetas de Proyecto (listado)
   100) Detalle de Proyecto
   110) Grillas / Grid helpers
   120) Lightbox / Imágenes expandibles
   130) Bio / Textos / Secciones varias
   140) Footer
   150) Responsive (bloques generales)
   160) Home (estructura y CTA)
   170) Efectos de scroll / Separadores / Flecha
   180) Header ancho completo / Animaciones (keyframes)
   190) Header layout + Mobile nav (hamburguesa)
   200) Video thumbnail
   210) Párrafos proyecto / Título hero (otra vez) / Mobile first
   220) Breakpoints extras (480px)
   230) Cierre text
   ===================================================================== */



/* ========== INTER (Variable Font) ========== */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable-Italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

/* ========== MONUMENT EXTENDED ========== */
@font-face {
  font-family: 'Monument Extended';
  src: url('../fonts/MonumentExtended-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Monument Extended';
  src: url('../fonts/MonumentExtended-Ultrabold.woff2') format('woff2');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

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


/* =========================
   00) Import & Reset
   ========================= */
/* General Reset */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

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

/* =========================
   10) Base (html, body, main)
   ========================= */
/* Estilos generales */
body {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    overflow-y: scroll;
    padding: 2rem; /* Consistencia en padding */
    position: relative; /* Para permitir el uso de pseudoelementos */
    margin: 0;
    padding: 0;
    background-color: #ebebe0; /* Fondo blanco puro */
    overflow-x: hidden; /* Evita scroll horizontal no deseado */
}

body::before {
    content: '';
    position: fixed; /* Fijo para que no se desplace con el contenido */
    top: 0;
    left: 0;
    width: 100vw; /* Ancho completo de la ventana */
    height: 100vh; /* Alto completo de la ventana */
    background-size: cover; /* Ajusta la imagen para que ocupe toda la pantalla */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repeticiones */
    opacity: 0.2; /* Opacidad del 50% */
    z-index: -1; /* Envía el fondo detrás del contenido */
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0rem 2rem;
}

/* =========================
   20) Header & Branding (logo, nav)
   ========================= */
/* Full-width header con contenido alineado */
header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(247, 247, 247, 1), rgba(247, 247, 247, 0.9));
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    /* OJO: sin max-width ni margin auto aquí */
  }

.logo img {
    max-height: 60px;
    width: auto;
}

@media (max-width: 768px) {
    .logo img {
        max-height: 40px;
    }
}

.logo-text {
    font-family: 'Monument Extended', sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: #575656;
  text-decoration: none;
  letter-spacing: 1px;
  display: inline-block;
  text-transform: uppercase;
}

.logo-text:hover {
    color: #FF712E; /* mismo color de acento */
    transition: color 0.3s ease;
}

@media (max-width: 768px) {
    .logo-text {
        font-size: 20px;
        line-height: 22px;
    }
}

/* Otras secciones regulares */
section:not(.hero-section) {
  margin: 3rem 0;
}



/* Navigation Menu */
.nav-links {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    transition: transform 0.3s ease-in-out;
}

.nav-links a {
    text-decoration: none;
    color: #333;
    padding: 0.5rem 1rem;
    transition: color 0.3s ease, background-color 0.3s ease;
    font-weight: 500;
    font-size: 15px;
    border: 3px solid rgb(231, 68, 27, 0.0)
    
}

.nav-links a.active {
    color: #fff;
    background-color: #FF712E;
    border-radius: 5px;
    border: 3px solid rgb(231, 68, 27, 0.0)
}

.nav-links a:hover {
    border-radius: 5px;
    border: 3px solid #FF712E;
}

/* Full-screen menu for mobile */
@media (max-width: 1000px) {
    .nav-links {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(100, 116, 139, 0.9);
        justify-content: center;
        align-items: center;
        transform: translateY(-100%);
    }

    .nav-links.active {
        transform: translateY(0);
    }

    .nav-links a {
        color: #fff;
        font-size: 1.5rem;
    }

}

/* =========================
   30) Secciones generales y Home/Bio/Projects básicos
   ========================= */
/* Responsive Adjustments */
@media (max-width: 768px) {
    body {
        padding: 1rem;
    }
}

.home, .bio, .projects {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.home img, .bio img, .project img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}


@media (max-width: 768px) {
    .home img, .bio img, .project img {
        max-width: 100%;
    }
}

/* =========================
   40) Hero / Títulos y subtítulos de portada
   ========================= */
.title-hero-sub {
  color: #fff;
  font-family: 'Monument Extended', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 50px;
  text-align: center;
}

.home_subtitle {
  font-size: 26px;
  line-height: 28px;
  font-weight: 150;
  color: #fff;
  font-family: "Inter", sans serif;
  width: 875px;
  text-align: center;
  max-width: 90%;
  margin: 50px auto;
  padding: 0 1rem;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .cierre-content {
    flex-direction: column;
    align-items: center;
  }

  .cierre-img, .cierre-text {
    width: 100%;
    text-align: center;
    padding: 1rem;
  }


  
}

/* =========================
   50) Utilidades (links destacados, scroll, section spacing)
   ========================= */
.highlight-hover {
  color: inherit;               /* Mismo color que el texto normal */
  text-decoration: none;        /* Quita el subrayado */
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

.highlight-hover:hover {
  text-decoration: underline;
  color: #fff;               /* Contraste para el texto */
  text-decoration-color: #ff5500; /* Color de relleno */
  padding: 0.2rem 0.4rem;
  border-radius: 5px;
}

.highlight-hover:visited {
  color: inherit;               /* Mismo color también después de haber hecho clic */
}

html {
  scroll-behavior: smooth;
}

#proyectos {
  scroll-margin-top: 450px; /* Ajustalo según la altura de tu navbar */
}

/* Section Spacing */
section {
    margin-top: 2rem; /* Reducido el espacio superior */
    margin-bottom: 2rem;
}

/* =========================
   60) Destacados (highlight cards)
   ========================= */
.highlight-container {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  padding: 32px 0 32px 0 ;
}

.highlight-card {
  flex: 1 1 250px;
  border: 4px solid #3C3C39;
  border-radius: 16px;
  padding: 30px 20px;
  color: #3C3C39;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  width: 430px;
}

.highlight-icon {
  width: 80px;
  margin-bottom: 15px;
}

.home-card {
  color: #20201E;
  line-height: 30px;
  text-align: center;
  font-weight: 200;
  font-size: 26px;
  padding: 0 15px;
}

.section-title {
  text-align: center !important;
  width: 100%;
  display: block;
  font-size: 2.9rem;
  font-weight: 200;
  color: #1d1d1d;
  text-transform: none !important;
  font-family: 'Inter', sans-serif;
}

.highlight-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* =========================
   70) Tipografía global
   ========================= */
h1, h2, h3, h4 {
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

h1 {
    font-family: 'Monument Extended', sans-serif;
  font-size: 3.5rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  color: #353535;
  text-transform: uppercase;
  line-height: 48px;
}

h2 {
    font-size: 3.2rem;
    color: #555555;
    font-family: "Monument Extended", serif;
    text-transform: uppercase;
}

h3 {
    font-size: 2.5rem;
    line-height: 27px;
    font-weight: 200;
    color: #555555;
    font-family: "Inter", sans serif;
}

h4 {
    font-size: 2rem;
    line-height: 35px;
    font-weight: 400;
    margin-bottom: 25px;
    font-weight: 600;
    color: #555555;
}

h6 {
  font-size: 20px;
  line-height: 35px;
  font-weight: 200;
  margin-bottom: 25px;
  color: #64748b;
  font-family: "Inter", sans serif;
  text-align: left;

}

p {
    font-size: 18px;
    margin-bottom: 1rem;
    color: #222;
    font-weight: 200;
    line-height: 1.8em;
    text-align: left;
}

.description {
    font-size: 18px;
    margin-bottom: 1rem;
    color: #222;
    font-weight:400;
    line-height: 1.7em;
    text-align: left;
}

/* =========================
   80) Botones
   ========================= */
button, .download-cv {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    padding: 0.75rem 1.5rem;
    background-color: #ff5512;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

button:hover, .download-cv:hover {
    background-color: #e7441b;
}

/* =========================
   90) Tarjetas de Proyecto (listado)
   ========================= */

.project-card {
  background-color: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  max-width: 520px;
  transition: transform 0.3s ease;
  border: 6px solid rgb(235, 235, 224, 1.0);
  box-shadow: 1px 0px 31px 4px rgba(0,0,0,0.12);
-webkit-box-shadow: 1px 0px 31px 4px rgba(0,0,0,0.12);
-moz-box-shadow: 1px 0px 31px 4px rgba(0,0,0,0.12);
}

.project-card:hover {
  border: 6px solid #FF712E;
}

.project-image img {
  width: 100%;
  height: auto;
  display: block;
}

.project-info {
  background-color: #222;
  color: white;
  padding: 1.5rem 1.8rem 2.8rem 1.8rem;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
}

.project-title {
  font-size: 1.40rem;
  font-weight: 700;
  margin: 0;
  flex: 1;
  color: white;
}

.project-link {
  color: white;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.project-link:hover {
  opacity: 0.7;
}

.external-icon {
  width: 28px;
  height: 28px;
  fill: white;
}

.project-subtitle {
  font-size: 1.2rem;
  margin-top: 0rem;
  margin-bottom: 1.5rem;
  color: #eee;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.project-tags span {
  background-color: #333;
  border: 1px solid #444;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
  color: #ccc;
  white-space: nowrap;
}


.project-title-link {
  color: inherit;
  text-decoration: none;
}

.project-title-link:hover .project-title {
  text-decoration: underline;
  color: #fff;
}

.project-image {
  display: block;
}




/* =========================
   100) Detalle de Proyecto
   ========================= */
/* Project Detail Page */
.project {
    /* background-color: #fff; /* Fondo blanco 
    border-radius: 10px; /* Bordes redondeados */
    overflow: hidden; /* Ocultar desbordes */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 2px 0;
    padding: 35px 15px 40px 20px;
    width: 70%;
    border-bottom: #ff712e solid 1px;
    /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); */
}


.project-1 {
    /*background-image: repeating-linear-gradient(45deg, #e1e1e1 0, #e1e1e1 1px, transparent 0, transparent 50%);
    background-size: 10px 10px;
    background-color: #ffffff;
    border-radius: 10px; /* Bordes redondeados */
    overflow: hidden; /* Ocultar desbordes */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 2px 0;
    padding: 35px 15px 90px 20px;
    width: 70%;
    /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); */
}

.projects-preview {
    /*background-image: repeating-linear-gradient(45deg, #e1e1e1 0, #e1e1e1 1px, transparent 0, transparent 50%); 
    background-size: 10px 10px;*/
    background-color: #ebebe0;
    /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); */
    padding: 0px 0px 00px 0px;
}

.projects-preview a {
    /*background-image: repeating-linear-gradient(45deg, #e1e1e1 0, #e1e1e1 1px, transparent 0, transparent 50%); 
    background-size: 10px 10px;*/
    /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); */
    padding: 0px 0px 0px 0px;
    color:#555;
    text-decoration: none;
}

.projects-preview a:hover {
    /*background-image: repeating-linear-gradient(45deg, #e1e1e1 0, #e1e1e1 1px, transparent 0, transparent 50%); 
    background-size: 10px 10px;*/
    /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); */
    padding: 0px 0px 0px 0px;
    color:#7c7b7b;
    text-decoration: none;
}


.project-display {
    margin: 2rem auto;
    max-width: 100%;
    padding: 1rem;
}

.project img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease; /* Efecto de zoom en hover */
    align-items: center;
    border-radius: 2%;
}

.project-1 img {
    width: 70%;
    height: auto;
    transition: transform 0.3s ease; /* Efecto de zoom en hover */
    align-items: center;
    border-radius: 2%;
}

.project h3, .project p {
    padding: 20px 0 0 0;
    text-align: left;
}

/* DETALLE DE LOS PROYECTOS */

.project-detail {
    padding: 0 30px 30px 30px;
}



.divisor {
     height: 2px;
  background: #1818180d;
  margin: 2rem 0;
}

/* Contenido agrupado dentro de las columnas */
.content-block {
    display: flex;
    flex-direction: column;
    
    justify-content: flex-start; /* Alinea los elementos al inicio vertical */
    gap: 1rem; /* Espacio entre elementos internos */
}

/* Títulos y párrafos dentro del bloque */
.content-block {
    margin-bottom: 0.5rem;
    font-size: 2.8rem;
    color: #555;
    padding-left: 30px;
}
  
  /* Nivel 1 - Título de Proyecto */
.content-block h1 {
  font-family: 'Monument Extended', sans-serif;
  font-size: 3.5rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
    color: #181818;
    text-transform: uppercase;
    line-height: 48px;
}

/* Nivel 2 - Subtítulo de Proyecto */
.content-block h2 {
  font-size: 33px;
  color: #555;
  line-height: 27px;
  font-weight: 200;
  font-family: "Inter", sans serif;
  text-transform: none;
  margin-top: 15px;
}

/* Nivel 3 - Títulos de secciones */
.content-block h3 {
  font-family: 'Monument Extended', sans-serif;
  font-size: 3rem;
  font-weight: 100;
  margin-top: 4rem;
  margin-bottom: 1rem;
  color: #181818;
    text-align: center;
    text-transform: uppercase;
    line-height: 40px;

}

/* Nivel 4 - Subtítulos de secciones */
.content-block h4 {
  font-family: 'Inter', sans-serif;
  margin-bottom: 0.5rem;
  font-size: 2.2rem;
  color: #333;
  border-left: #ff712e solid 8px;
  padding-left: 30px;
  font-weight: 300;

}

/* Nivel 5 - Subtítulos de secciones */
.content-block h5 {
  margin-bottom: 0.5rem;
  font-size: 24px;
  color: #181818;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -1px;
}

.content-block h6 {
    margin-bottom: 0.5rem;
    font-size: 22px;
    color: #181818;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    line-height: 28px;
    letter-spacing: -1px;
}
.content-block {
    font-size: 1.1rem;
    color: #555;
    font-weight: lighter;
    line-height: 1.6;
    
}

.content-block ul {
    font-size: 18px;
  color: #222;
  font-weight: 200;
  line-height: 1.6;
  padding: 0 10px 0 50px;
  width: 80%; 
}

.content-block li {
    margin-bottom: 20px;
    text-align: left;
}

.content-block .text-description {
  font-size: 18px;
  color: #222;
  font-weight: 200;
  line-height: 1.8;
  padding: 12px 10px 0 30px;
  text-align: justify;

}

.project:hover img {
    transform: scale(1.1); /* Zoom en la imagen */
    
}

.project-1:hover img {
    transform: scale(1.1); /* Zoom en la imagen */
}

.project-image {
    width: 100%;
    max-width: 1920px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}



/* =========================
   110) Grillas / Grid helpers
   ========================= */
/* Contenedor general de la grilla */
.grid-container {
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
}

/* Estilo base para cada bloque */
.grid-block {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

/* 1 columna */
.grid-block.col-1 {
    grid-template-columns: 1fr;
}

/* 2 columnas */
.grid-block.col-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* 3 columnas */
.grid-block.col-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* 4 columnas */
.grid-block.col-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Ajuste de imágenes */
.grid-block img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.grid-block img:hover {
    transform: scale(1.05);
}

/* Texto alineado a la izquierda */
.grid-block p, .grid-block h4 {
    text-align: left;
    
}

/* 🔲 Imágenes sin sombra */
.img-no-shadow {
    box-shadow: none !important; /* Elimina cualquier sombra */
    border-radius: 0; /* Opcional: elimina el borde redondeado */
}

/* Responsivo: En móviles, todos los bloques ocupan una columna */
@media (max-width: 768px) {
    .grid-block.col-2,
    .grid-block.col-3 {
        grid-template-columns: 1fr;
    }
}

/* =========================
   120) Lightbox / Imágenes expandibles
   ========================= */
/* Fondo oscuro al abrir la imagen */
#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    visibility: hidden; /* Oculto por defecto */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Imagen ampliada */
#lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Botón de cierre (X) */
#lightbox .close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    transition: color 0.3s ease;
}

#lightbox .close-btn:hover {
    color: #D9A74E; /* Color mostaza en hover */
}

/* Mostrar el lightbox */
#lightbox.active {
    visibility: visible;
    opacity: 1;
}

/* Cambiar el cursor al pasar sobre imágenes expandibles */
.expandable-img {
    cursor: pointer; /* Manito al pasar el cursor */
    transition: transform 0.3s ease; /* Suaviza el efecto hover */
}

/* Opcional: efecto de zoom al pasar el cursor */
.expandable-img:hover {
    transform: scale(1.03); /* Ligerísimo zoom para indicar interacción */
}



.bajada {
    border-left: #666 solid 10px;
    color: #666;
    font-weight: 400;
    padding-left: 15px;
    margin: 1.4rem 0;
    line-height: 50px;
    }

.bio-description {
    max-width: 800px;
    margin: 0 auto;
    font-size: 18px;
    font-weight: 400;
    color: #555;
}

.bio-description ul {
    padding-left: 60px;
    line-height: 2.3;
}

.bio-title {
    font-family: 'Inter', Sans Serif;
  font-size: 27px;
  color: #394250;
  font-weight: 200;
  padding-bottom: 20px;
}

.contact-info {
    text-align: center;
    margin-top: 50px;
}

.bio {
    margin-top: 60px;
    margin-bottom: 50px;
    border-radius: 10px;
    line-height: 1.8;

}

/* =========================
   140) Footer
   ========================= */
/* Footer */
footer {
    padding: 0;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
  }


.footer h4 {
    margin-bottom: 0.5rem;
    font-size: 22px;
    color: #555;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -1px;
  }

.social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.social-links a img {
    filter: grayscale(100%) brightness(1.1); /* Blanco y negro + leve aclarado */
    transition: filter 0.3s ease, transform 0.3s ease;
  }
  
  .social-links a:hover img {
    filter: none; /* Color completo */
    transform: scale(1.05);
  }
  
.project-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  padding: 0 2rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    body {
        padding: 1rem;
    }

    header,
    main,
    footer {
        padding: 1rem;
    }

    .project-cards {
        grid-template-columns: 1fr; /* 1 columna en móviles */
    }

    .nav-links {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .cta-button:active {
        transform: scale(0.98);
    }
    .project-card:active {
        filter: brightness(0.9);
    }
}

/* =========================
   160) Home (estructura y CTA)
   ========================= */
/* Sección de Home */
.home {
    display: flex;
    flex-wrap: wrap; /* Permite apilar elementos */
    justify-content: center;
    align-items: center;
    gap: 2rem;
    text-align: center;
}


.intro-content {
    
    width: 80%;
    
}

.intro-text {
    flex: 1;  /* Ocupa el ancho completo en móviles */
    width: 100%;
    text-align: center;
    align-items: center;
}

.cierre-text {
    flex: 1;  /* Ocupa el ancho completo en móviles */
    width: 100%;
    text-align: center;
    align-items: center;
}

.intro-image {
    flex: 1; /* Igual ancho que el texto */
    display: flex;
    justify-content: center;
    align-items: center;
}

.intro-image img {
    max-width: 50%;
    height: auto;
    border-radius: 10px;
}

/* Responsive: Imagen arriba o abajo del texto */
@media (max-width: 768px) {
    .home {
        flex-direction: column; /* Apilar contenido verticalmente */
    }
}

button, .download-cv {
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
    margin: 0 25px;
    font-size: 20px;
    text-transform: none;
    font-weight: 400;
    font-family: 'Inter', sans serif;
}

button:hover, .download-cv:hover {
    background-color: #f53d05; /* Color más oscuro */
    transform: scale(1.05); /* Ligero aumento de tamaño */
}

button:visited {
        color: #fff;
}

.home-cierre {
text-align: center;
  font-size: 40px;
  font-weight: 400;
  color: #FF712E;
  line-height: 40px;
  padding: 0px 0px 35px 0px;
  margin: 0px 0;
  font-family: 'Mynerve', sans-serif;
}


.hero_subtitle {
  color: #333;
  text-align: left;
  margin-left: 0px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 350; 
}

.cierre_subtitle {
  color: #333;
  text-align: left;
  margin-left: 0px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 350;
  
}

.cta {
    background-color: #FF712E; /* Amarillo */
    padding: 1rem 1.3rem;
    font-weight: 500;
    font-size: 20px;
    border-radius: 10px;
    display: inline-block;
    text-align: center;
    transition: background-color 0.3s ease, filter 0.3s ease;
    color: #fff;
    margin-bottom: 35px;
    text-decoration: none; 
}

/* Estilo para el enlace dentro del botón */
.cta a {
    color: #fff !important; /* Texto blanco */
    text-decoration: none; /* Sin subrayado */
    display: block; /* Para que el área clickeable cubra todo el botón */
    padding: 10px 20px;
}

/* : aclarar fondo */
.cta:hover {
    background-color: #e7441b;
    transition: background-color 0.3s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0px 4px 10px rgba(251, 68, 36, 0.3);
}

/* Enlace visitado */
.cta a:visited {
    color: #fff !important; 
}

.cta2 {
    background-color: #3C3C39; /* Amarillo */
    padding: 1rem 1.3rem;
    font-weight: 500;
    font-size: 20px;
    border-radius: 10px;
    display: inline-block;
    text-align: center;
    transition: background-color 0.3s ease, filter 0.3s ease;
    color: #fff;
    margin-bottom: 35px;
    text-decoration: none; 
}

/* Estilo para el enlace dentro del botón */
.cta2 a {
    color: #fff !important; /* Texto blanco */
    text-decoration: none; /* Sin subrayado */
    display: block; /* Para que el área clickeable cubra todo el botón */
    padding: 10px 20px;
}

/* : aclarar fondo */
.cta2:hover {
    background-color: #20201f;
    transition: background-color 0.3s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0px 4px 10px rgba(5, 5, 5, 0.3);
}

/* Enlace visitado */
.cta2 a:visited {
    color: #fff !important; 
}



html {
    scroll-behavior: smooth; /* Desplazamiento suave */
}

.scroll-into-view {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.scroll-into-view.visible {
    opacity: 1;
    transform: translateY(0);
}

.section-divider {
    height: 2px;
    background: linear-gradient(to right, #181818, transparent);
    margin: 2rem 0;
}

/* Flecha */ 

.downArrow{
	position:sticky;
	bottom: 5%;
	text-align: center;
    color:#555;
    opacity: 0.2;
}
.bounce {
	-moz-animation: bounce 3s infinite;
	-webkit-animation: bounce 3s infinite;
	animation: bounce 3s infinite;
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
/* Demo Purpose Only*/
.demo {
  font-family: 'Raleway', sans-serif;
	color:#fff;
    display: block;
    margin: 0 auto;
    padding: 15px 0;
    text-align: center;
}

/* Estilo para el contenedor del iframe */
.grid-block iframe {
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra similar a las imágenes */
    overflow: hidden; /* Evita que el contenido sobresalga en las esquinas */
}

/* Estilo adicional para mejorar el diseño */
.grid-block {
    margin-top: 2rem; /* Separación adicional entre los bloques */
}

.grid-block iframe:hover {
    transform: scale(1.02); /* Zoom ligero */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Aumenta la sombra */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suaviza el efecto */
}


.tag {
    display: inline-block;
    background-color: #fff; /* Color gris oscuro */
    color: #757575;; /* Texto en blanco */
    font-size: 14px;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 30px; /* Bordes redondeados */
    text-align: center;
    text-decoration: none;
    white-space: nowrap; /* Evita que el texto se corte */
    margin: 20px 0 0 10px;
    border: 2px solid #757575;
}

.tag_1 {
    display: inline-block;
    background-color: transparent;
    border: 2px solid #ff712E;
    color: #ff712E ;/* Texto en blanco */
    font-size: 14px;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 30px; /* Bordes redondeados */
    text-align: center;
    text-decoration: none;
    white-space: nowrap; /* Evita que el texto se corte */
    width: intrinsic; /* Safari/WebKit usa un nombre no estándar */
    width: -moz-max-content; /* Firefox/Gecko */
    width: -webkit-max-content; /* Chrome */
    width: max-content;
}


.subtitulo {
  margin-bottom: 0.5rem;
  font-size: 18px;
  color: #333;
  font-family: "Inter", sans serif;
  font-weight: 400;
  line-height: 28px;
}

/*
.subtitulo {
  margin-bottom: 0.5rem;
  font-size: 18px;
  color: #333;
  font-family: "Inter", sans serif;
  font-weight: 400;
  line-height: 28px;
}
*/

.resaltado {
    background: yellow; /* Resaltado amarillo */
    padding: 2px 4px; /* Espaciado interno */
    border-radius: 2px; /* Bordes suavemente redondeados */
    display: inline; /* Para que solo cubra el texto */
    box-decoration-break: clone; /* Permite que el efecto siga en saltos de línea */
    font-weight: 900;
    font-size: 26px;
    font-family: "Mynerve";
}

  .project_title {
    font-size: 3rem;
    line-height: 46px;
    font-weight: 600;
    color: #464242;
    font-family: "Inter", sans serif;
    margin-top: 1.25rem;
    letter-spacing: -3px;
  }

  .project_subtitle {
    margin-bottom: 0.5rem;
    font-size: 2rem;
    color: #FF712E;
    font-family: "Inter", sans serif;
    font-weight: 200;
    line-height: 28px;
  }

  .submenu {
    display: none;
    position: absolute;
    background: white;
    list-style: none;
    padding: 10px 0;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.dropdown:hover .submenu {
    display: block;
}

.titulo-final {
    font-size: 65px;
    font-weight: 200;
    line-height: 1.5;
    text-align: left;
    font-family: "Inter", sans serif;
    padding: 20px 0 40px 0;
    color: #181818;
}

.final {
    font-size: 25px;
    line-height: 1.5;
    padding: 12px 10px 0 0px;
    text-align: left;
    font-family: "Mynerve";
    font-style: italic;
    color: #181818;
}

.cta-text-project {
    text-align: center;
    font-weight: 200;
    font-size: 33px;
    color: #fb4424;
    line-height: 33px;
}

/* Aplica el ícono solo a los enlaces de texto */
.project a:not(:has(img)) {
    color: var(--black);
    font-size: 18px;
    font-weight: 400;
    transition: background-position 0.6s cubic-bezier(.23, 1, .32, 1), border-color 0.2s, color 0.2s, opacity 0.2s;
    text-decoration: none;
    color: #fff;
    background-color: #ff5512;
    border-radius: 5px;
    text-align: center;
    padding: 1.2rem 1.5rem;
    font-family: "Inter", sans serif;
    margin-top: 30px;
}

/* Hover solo para enlaces de texto */
.project a:not(:has(img)):hover {
    text-decoration: none;
    font-size: 16px;
    font-family: "Inter", sans serif;
    font-weight: 700;
    color: #fff;
    background-color: #e7441b;
    border-radius: 5px;
    padding: 1.2rem 1.5rem;
    box-shadow: 0 0 10px rgb(231, 68, 27, 0.8);
}

.sub-seccion-project-title {
    font-family: "Inter", sans serif;
    font-size: 40px;
}

.sub-seccion-project {
    font-size: 2rem;
    line-height: 22px;
    font-weight: 600;
    color: #1c1c1a;
    font-family: "Inter", san serif;
    letter-spacing: -2px;
}

/* Subrayado solo en hover */
.sub-seccion-project:hover {
    color: #ff712e; /* Cambia de color opcionalmente */

}

.sub-seccion-text {
    font-size: 1.55rem;
    line-height: 28px;
    font-weight: 200;
    color: #181818;
    font-family: "Inter", sans serif;
    padding-left: 35px;
}

.divisor1 {
    height: 4px;
    background:  hsl(0, 4%, 85%, 0.5);;
    margin: 2rem 0;
}

.cta-button {
    background-color: #ff5512;; /* Color de acento fuerte */
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 6px;
    text-align: center;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

.cta-button:hover {
    background-color: #e7441b; /* Un tono más oscuro en hover */
    transform: scale(1.05); /* Efecto sutil de crecimiento */
    box-shadow: 0px 4px 10px rgba(251, 68, 36, 0.3);
}

.cta-container {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

#contact-form {
    max-width: 600px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-family: inherit;
  }
  
  #contact-form select {
    background-color: #fff;
    padding: 0.75rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Inter', Sans serif;
    font-weight: 200;
  }


  #contact-form input,
  #contact-form textarea {
    padding: 0.75rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Inter', Sans serif;
    font-weight: 200;
  }
  
  #send-button {
    background-color: #ff712e;
    color: #fff;
    padding: 0.8rem 1.5rem;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  
  #send-button:hover {
    background-color: #e7441b;
    color: white;
  }
  
  .consent {
    font-size: 0.9rem;
  }
  
  
  .hallazgo {
    background-color: #FF712E21;
    padding: 20px;
    border-radius: 12px;
    color: fff;
    border: 1px solid #ff712e;

  }

  .propuesta {
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #181818;
    background-color: #ffffff47;
  }

  .social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    padding-bottom: 35px;
  }
  
  .social-icons a img {
    width: 64px;
    height: 64px;
    filter: grayscale(50%) brightness(1); /* Desaturado */
    transition: filter 0.3s ease, transform 0.3s ease;
  }
  
  .social-icons a:hover img {
    filter: none; /* Vuelve a color completo */
    transform: scale(1.1);
    filter: brightness(1.2) drop-shadow(0 0 5px rgba(0,0,0,0.1)); /* Efecto brillo suave */
  }

  .popup {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
  }
  
  .popup-content {
    background-color: #ffdf61;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    text-align: center;
    max-width: 90%;
    font-family: 'Inter', sans-serif;
  }
  
  .popup-content button {
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background-color: #FFF0A1;
    border: none;
    border-radius: 5px;
    color: #d3b94f;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .popup-content button:hover {
    background-color: #d3b94f;
    color: #fff;
  }
  
  .intereses-bg {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
   /* background-color: #fffbe9; */
    background-image: url(../images/about-background.jpg);
    padding: 3rem 2rem;
    border-radius: 0px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.intereses-text {
    font-family: 'Mynerve';
    font-size: 30px;
    font-weight: bolder;
    font-style: italic;
    color: #9e9a91;
    max-width: 1000px;
    margin: 0 auto;
    line-height: 1.8;
    text-shadow: 2px 2px 9px rgba(0,0,0,0.8);
}

.bio-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 2rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}
 
.site-footer {
  background-color: #1c1c1a;
  color: #ccc;
  padding: 40px 20px 70px 20px;
  font-size: 16px;
}

.site-footer a:hover {
  font-weight: bolder;
  color: #ff712e;
}

.site-footer a {
  color: #ffffff;
  text-decoration: none;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.footer-name {
  font-weight: 700;
  font-family: 'Monument Extended', sans-serif;
  font-size: 1.3rem;
  text-align: center;
  color: #ccc;
  letter-spacing: 2px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  padding: 20px 40px;
}

.footer-column {
  flex: 1;
  min-width: 200px;
  text-align: center;
}

.footer-column.left {
  text-align: center;
}

.footer-column.right {
  text-align: center;
}

.footer-social a {
  margin: 0 5px;
  display: inline-block;
}

.footer-social img {
  width: 32px;   /* antes 20px aprox */
  height: auto;
  margin: 0 8px;
  transition: transform 0.3s ease;
}

.footer-social img:hover {
  transform: scale(1.1);
}

  /* Asegura que el header ocupe el ancho completo */
.full-width-header {
    width: 100%;
    background: linear-gradient(to bottom, rgba(247, 247, 247, 1), rgba(247, 247, 247, 0.9));
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    min-height: 115px;
    padding-top: 30px;
}


/* =========================
   180) Animaciones (keyframes) / Header ancho
   ========================= */
/* 1. KEYFRAMES ---------------------------------------------------------- */
@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

.text-focus-in {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.1s both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.1s both;
}

.text-focus-in-2 {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.5s both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.5s both;
}

.text-focus-in-3 {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.8s both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.8s both;
}

.text-focus-in-4 {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s both;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center; /* ✔️ centra verticalmente */
}
  
  .footer-final {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #20201F;
    color: white;
    padding: 2rem 2rem 2.7rem 2rem;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    font-size: 14px;
    font-weight: 100;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .footer-section {
    flex: 1;
  }
  
  .footer-left {
    text-align: left;
    margin-left: 7%;
  }
  
  .footer-center {
    text-align: center;
  }
  
  .footer-right {
    text-align: right;
    margin-right: 7%;
  }
  
  .footer-social a {
    margin: 0 10px;
  }
  
  .footer-social img {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
  }
  
  .footer-social img:hover {
    transform: scale(1.15);
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .footer-final {
      flex-direction: column;
      text-align: center;
      margin-left: 0;
    }
  
    .footer-left,
    .footer-right {
      text-align: center;
      margin: 0;
    }
  }
  
  @media (min-width: 769px) {
    .language-switcher {
      display: inline-block;
    }
  }

  @media (max-width: 768px) {
    .language-switcher {
      display: none !important;
    }
  }  
    
  .language-switcher {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin-left: 2rem;
  }
  
  .language-switcher .lang {
    color: #333;
    text-decoration: none;
    padding: 5px 8px;
    transition: all 0.3s ease;
  }
  
  .language-switcher .lang:hover {
    background-color: #818181;
    color: #fff;
    border-radius: 5px;
  }
  
  .language-switcher .active {
    font-weight: 600;
    background-color: #c4c4c4;
    color: white;
    border-radius: 5px;
  }

  .main-nav {
    justify-self: center;
  }
  
  .right-header-elements {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
 
  
  .logo {
    justify-self: start;
  }
  
  
  .header-controls {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  .center-nav {
    flex: 1;
    display: flex;
    justify-content: center;
  }
 
  
  @media (max-width: 1000px) {
    .nav-links {
      display: none !important;
    }
  }
 
  /* Hamburguesa visible solo en mobile y solo cuando el menú está cerrado */
  #hamburgerOpen {
    display: flex;
    position: absolute;
    top: 20px;
    right: 20px;
  }
  
  @media (min-width: 999px) {
    #hamburgerOpen {
      display: none;
    }
  }
  
  /* "X" para cerrar dentro del menú */
  #hamburgerClose {
    position: absolute;
    top: 20px;
    right: 20px;
  }

  /* =========================
     190) Header layout + Mobile nav (hamburguesa)
     ========================= */
  /* Header layout */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    position: relative;
    z-index: 1001;
  }
  
  /* Hamburguesa */
  .hamburger-menu {
    width: 30px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 1100;
  }
  
  .hamburger-menu span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #797979;
    border-radius: 2px;
    transition: all 0.3s ease;
  }
  
  /* Animación "X" */
  .hamburger-menu.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .hamburger-menu.open span:nth-child(2) {
    opacity: 0;
  }
  .hamburger-menu.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
  
  /* Menú móvil */
  .mobile-nav {
    position: fixed;
    top: 0;
    left: -100vw;
    width: 100vw;
    height: 100vh;
    background-color: #575656;
    color: white;
    padding: 4rem 2rem;
    transition: left 0.3s ease;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .mobile-nav.active {
    left: 0;
  }
  
  .nav-links-mobile {
    list-style: none;
    text-align: center;
    padding: 0;
  }
  
  .nav-links-mobile li {
    margin: 1.5rem 0;
  }
  
  .nav-links-mobile a {
    color: rgb(209, 209, 209);
  font-size: 3.6rem;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
  font-weight: 100;
  line-height: 96px;
  }

  .nav-links-mobile a:hover {
    color: #ff9065;
  }
  
  /* Idiomas */
  .lang-switch-mobile {
    font-size: 1.2rem;
    margin-top: 2rem;
  }
  .lang-switch-mobile a {
    background: #c2c2c2;
  color: rgb(100, 100, 100);
  font-weight: 200;
  text-decoration: none;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  margin: 0 0.4rem;
  font-size: 1.5rem;
  border: 6px solid #c2c2c2;
  }
  .lang-switch-mobile a:hover {
  border: 6px solid #ff633c;
  color: white;
  font-weight: 500;
  background-color: #ff633c;
  }

  .lang-switch-mobile a.active {
    background-color: #e7441b;
    color: white;
    font-weight: 500;
    border: 6px solid #e7441b;
}
  
  /* Responsive: ocultar hamburguesa en desktop */
  @media (min-width: 1000px) {
    .mobile-nav,
    .hamburger-menu {
      display: none;
    }
  }
  
  .video-thumbnail {
    position: relative;
    width: 100%;
    max-width: 1200px; /* O el ancho que vos quieras */
    margin: auto;
    cursor: pointer;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    aspect-ratio: 16/9; /* 🎯 Proporción fija de video */
  }
  
  .video-thumbnail img,
  .video-thumbnail iframe {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Para imagen */
    border: none;
    display: block;
  }
  
  
  .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    color: white;
    border-radius: 50%;
    padding: 0.5rem 1rem;
    transition: background 0.3s ease;
  }
  
  .video-thumbnail:hover .play-button {
    font-size: 7rem;
    color: #fff;
    transition: background 0.3s ease;
  }




/* =========================
   210) Párrafos proyecto / Title hero / Mobile first
   ========================= */
/* Párrafos */
.project-text {
  font-size: 19px;
  color: #222;
  line-height: 1.7;
  padding: 12px 10px 0 30px;
  text-align: justify;
  font-weight: 300;
}

/* Proyect Divisor */
.project-divisor {
  height: 2px;
  background: #1818180d;
  margin: 2rem 0;
}

  .title-hero {
    font-size: 4.7rem;
    line-height: 62px;
    color: #fff;
    font-family: 'Monument Extended', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
      text-align: center;
  }

  .project-text {
    font-weight: 300;  
    color: #181818; 
    padding: 0 70px; 
    font-size: 18px;
  }


/* === MOBILE FIRST BREAKPOINTS === */
@media screen and (max-width: 768px) {

  .intro-content {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .footer-bottom {
    width: 300px;
  }

  .intro-text, .intro-image {
    width: 100%;
    text-align: center;
  }

  .intro-image img {
    max-width: 80%;
    height: auto;
  }

  .highlight-container, .project-cards {
    flex-direction: column;
    align-items: center;
  }

  .highlight-card, .project-card {
    width: 100%;
    max-width: 90%;
    margin-bottom: 2rem;
  }

  .home_subtitle, .cierre_subtitle {
    font-size: 1.1rem;
    padding: 0 1rem;
    line-height: 33px;
  }

  .home-card {
  font-size: 1.4rem;
  line-height: 23px;
  }   

  .cierre-text {
    margin: 0 auto;
    width: 100%;
    padding: 0 1rem;
  }

  .section-title {
    font-size: 2.4rem;
    padding: 1rem;
    text-align: center;
    line-height: 36px;
  }

  .cta, .cta2 {
    font-size: 1.3rem;
    padding: 0.75rem 1.5rem;
    line-height: 25px;
  }

  .footer-column.right, .footer-column.left {
  text-align: center;
  }

  .titulo-proyecto {
  font-size: 3rem;
  }

  .title-hero {
    font-size: 3.1rem;
    line-height: 43px;
  }

  .bajada {
    border-left: #666 solid 2px;
    padding-left: 8px; 
    line-height: 30px;
  }

  .li {
    padding-bottom: 3px;
  }

  .cta-text-project {
    font-weight: 300;
    font-size: 25px;
    line-height: 33px;
}

  }

  /* Footer */
  .footer-bottom {
    align-items: center;
    text-align: center;
    gap: 1rem;
  }

  .footer-column {
    width: 100%;
  }





@media screen and (max-width: 480px) {
  .title-hero {
    font-size: 2.6rem;
    line-height: 35px;
  }
  .home-cierre {
    font-size: 2.2rem;
  }
  h2 {
    font-size: 2.2rem;
  }

  .intro-image img {
    max-width: 130%;
    height: auto;
  }

  .section-title {
    font-size: 2.5rem;
  }

  .titulo-proyecto {
  font-size: 2.5rem;
  }

  .project-text {
    font-weight: 300;  
    color: #181818; 
    padding: 0 0px; 
    font-size: 18px;
    text-align: left;
    text-align: 29px;
  }
  .home-card {
  font-size: 1.2rem;
  line-height: 23px;
  } 
  .project_title {
  font-size: 1.7rem;
  line-height: 30px;
  font-weight: 800;
  letter-spacing: 0px;
  }   
  .project_subtitle {
  font-size: 1.5rem;
  font-weight: 300;
  }
  .tag {
  font-size: 11px;
  }
  .content-block h1 {
  font-size: 2.4rem;
  line-height: 35px;
  hyphens: auto; 
  word-break: break-word;  
  }
  .content-block h2 {
  font-size: 25px;
  }
  .content-block h3 {
  font-size: 2.5rem;
    line-height: 36px;
    hyphens: auto;
    word-break: break-word;     
  }
  .content-block h4 {
  font-size: 1.4rem;
  }  
  .content-block h5 {
  font-size: 1.4rem;
  }
  .cta-text-project {
    font-weight: 300;
    font-size: 23px;
    line-height: 33px;
}

h1 {
  font-size: 3rem;
}
h3 {
  font-size: 2rem;
  line-height: 30px;
}
.intereses-text {
  font-size: 22px;
}
}

.cierre-text {
  max-width: 875px;
  margin: 15px auto 50px;
  text-align: center;
  padding: 0 1rem;
}