/* ============================
   RESET BÁSICO
============================ */
@media screen and (max-width: 1450px), 
       screen and (orientation: landscape) and (max-height: 500px) {
        
    body {
        margin: 0;
        padding: 0;
    }
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    body {
    font-family: 'Arial', sans-serif;
    line-height: 1.5;
    color: #111;
    background-color: #fff;
    }

    a {
    text-decoration: none;
    color: inherit;
    }

    img {
    max-width: 100%;
    height: auto;
    display: block;
    }

    /* ============================
    HEADER
    ============================ */
    /* HEADER MÓVIL */
    header {
        position: relative;
        background-color: white;  /* fondo blanco */
        width: 100%;
        height: 120px;  /* Usamos min-height en lugar de height para darle más flexibilidad */
        /*height: 120px; */            /* altura fija del header para móvil */
        display: flex;
        align-items: center;      /* centra verticalmente el contenido */
        padding: 0;          /* padding lateral mínimo */
        box-sizing: border-box;   /* para que el padding no aumente la altura total */
    }
    .header-content {
        display: flex;
        /*justify-content: flex-start;*/
        align-items: center;
        padding: 0;
        width: 100%;
        margin: 0;
    }

    
    .home-link {
        display: flex;
        align-items: center;
        width: 100%;
        padding-left: 0.3rem;    /* casi pegado a la izquierda */
        padding-right: 1.2rem;   /* margen derecho de seguridad */
        box-sizing: border-box;
    }

        /* Nombre */
    .home-link h1 {
        margin: 0;
        font-size: 1.8rem;
        white-space: nowrap;
    }

        /* Logo */
    .home-link img {
        height: 60px;
        margin-left: 1.2rem;
    }

    nav {
    display: none; /* ocultamos el menú completo en móvil */
    }

    .btn-contacto {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #3b82f6;
    color: #fff;
    border-radius: 0.5rem;
    font-weight: bold;
    }

    .hamburger {
        position: absolute;
        right: 2.5rem;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        cursor: pointer;
        
    }

    .hamburger span {
        display: block;
        height: 3px;
        background-color: rgba(9, 9, 121, 1);
        border-radius: 0px;
    }

    .mobile-nav.open {
        display: flex;
    }

    /* BOTÓN HAMBURGUESA */
    .menu-toggle {
        display: inline-block;
        font-size: 1.5rem;
        cursor: pointer;
        background: none;
        border: none;
    }

    .mobile-nav {
        position: absolute;
        top: 120px;              /* justo debajo del header */
        left: 0;
        width: 100%;
        background-color: #fff;
        display: none;
        flex-direction: column;
        padding: 1.5rem 1rem;
        box-shadow: 0 4px 12px rgb(5, 5, 73);
        z-index: 99;
    }

    .mobile-nav a {
        padding: 1rem 0;
        font-size: 1.2rem;
        font-weight: 600;
        color: rgb(5, 5, 73);
        border-bottom: 1px solid #eee;
    }


    /* ============================
    HERO
    ============================ */
   /* HERO MÓVIL: ocupa toda la pantalla y centra contenido */
    .hero {
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* centra vertical */
        align-items: center;     /* centra horizontal */
        text-align: center;
        /*height: 100vh; */          /* toda la altura del viewport */
        padding-top: 0.001rem;       /* menos espacio arriba que antes */
        padding-bottom: 0;       /* opcional, reduce abajo */
        margin: 0;
        height: auto;
        min-height: calc(100vh - 120px); /* viewport menos header */
        overflow: hidden;
    }

    /* Contenedor del texto */
    .hero-content {
        max-width: 100%;   /* limita ancho para que no se estire demasiado */
        width: 100%; 
        /*margin: -1.5rem 0 4rem 0;*/     /* ocupa todo el ancho disponible */
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: center; /* centra vertical dentro del div si hiciera falta */
        align-items: center;     /* centra horizontal dentro del div */
    }

    /* Títulos y subtítulos */
    .hero-content h2 {
        font-size: 2.5rem;
        margin-top: 0.5rem;
        margin-bottom: none;
        margin: 0;          /* quita márgenes por defecto de h2/p */
        padding: 0;         /* quita padding si existía */
        width: 100%;        /* ocupa todo el ancho del contenedor */
        text-align: center; /* centrado horizontal */
    }

    .hero-content p {
        font-size: 1.6rem;
        margin-bottom: 2.5rem;
        margin: 1.9rem 0 0 0;          /* quita márgenes por defecto de h2/p */
        padding: 0;         /* quita padding si existía */
        width: 100%;        /* ocupa todo el ancho del contenedor */
        text-align: center; /* centrado horizontal */
    }



    /* ============================
    SECCIONES
    ============================ */
    .sections-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem;
    }

    .section {
    display: block;
    background-color: #f8f8f8;
    padding: 1rem;
    border-radius: 0.5rem;
    transition: transform 0.2s ease;
    }

    .section:hover {
    transform: translateY(-3px);
    }

    .section h3 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    }

    .section hr {
    border: none;
    border-top: 2px solid #3b82f6;
    margin-bottom: 0.5rem;
    }

    .section p {
    font-size: 1.4rem;
    }

    /* ============================
    CALL TO ACTION FINAL
    ============================ */
    .new-section {
        text-align: center;
        background-color: #e0f2fe;
        padding: 2rem 1rem;
        margin: 2rem 0rem;
        border-radius: 0.5rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        position: relative;
        margin-left: calc(-50vw + 6%);
    }
    
    .new-section h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    }

    .new-section p {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    }

    .new-section .button {
    display: inline-block;
    background-color: #4DB8B1;
    color: #fff;
    padding: 0.8rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: bold;
    }

    /* ============================
    FOOTER
    ============================ */
    footer {
    background-color: #061736;
    color: #fff;
    padding: 1rem 0.5rem;
    }

    .footer-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    }

    .footer-column h4 {
    margin-bottom: 0.3rem;
    font-size: 1.2rem;
    }

    .footer-column p, .footer-column a {
    font-size: 1.15rem;
    color: #fff;
    }

    .footer-column ul {
    list-style: none;
    padding-left: 0;
    }

    .footer-bottom {
    text-align: center;
    margin-top: 1rem;
    font-size: 1rem;
    }

    /* ============================
    BOTÓN FLOTANTE Y MODAL
    ============================ */
    #subscribe-btn {
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        background-color: #4DB8B1;
        color: #fff;
        border: none;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        font-size: 0.9rem;
        cursor: pointer;
        z-index: 100;
    }

    /* ============================
    BOTÓN SUSCRIPCIÓN – MÓVIL
    ============================ */
    #subscribe-btn {
        width: 50px;
        height: 50px;
        padding: 0;
        border-radius: 50%;
        font-size: 1.2rem;

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

    .btn-text {
        display: none; /* ocultamos texto en móvil */
    }

    .btn-icon {
        display: inline; /* mostramos icono */
    }

    .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    padding: 1rem;
    }

    .modal-content {
    background-color: #fff;
    padding: 1.0rem;
    border-radius: 0.5rem;
    max-width: 400px;
    width: 100%;
    text-align: left;
    }

    .modal-content input {
    width: 100%;
    padding: 0.5rem;
    margin: 0.5rem 0;
    }

    .modal-content button {
    background-color: #3b82f6;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
}

/* ============================
ROBOTICA ESPACIAL
============================ */
.hero1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* centra vertical */
    align-items: center;     /* centra horizontal */
    text-align: center;
    /*height: 100vh; */          /* toda la altura del viewport */
    padding-top: 0rem;       /* menos espacio arriba que antes */
    padding-bottom: 0;       /* opcional, reduce abajo */
    margin: 0;
    height: auto;
    min-height: calc(100vh - 120px); /* viewport menos header */
    overflow: hidden;
}

    /* Títulos y subtítulos */
.hero1 h2 {
    font-size: 2.4rem;
    margin-top: 0rem;
    margin-bottom: none;
    margin: 0;          /* quita márgenes por defecto de h2/p */
    padding: 0;         /* quita padding si existía */
    width: 100%;        /* ocupa todo el ancho del contenedor */
    text-align: center; /* centrado horizontal */
    line-height: normal;
}

.hero1 p {
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
    margin: 1.9rem 0 0 0;          /* quita márgenes por defecto de h2/p */
    padding: 0;         /* quita padding si existía */
    width: 100%;        /* ocupa todo el ancho del contenedor */
    text-align: center; /* centrado horizontal */
    line-height: 1.8;
}

 /* Ajustar el ancho de las secciones para que el texto ocupe más espacio */
    .robotics-section .section-container {
        display: flex;
        flex-direction: column; /* Coloca los elementos en una columna */
        justify-content: flex-start;
        align-items: stretch;
        padding: 1px;
    }

    /* Hacer que el contenedor de texto ocupe más espacio */
    .robotics-section .text-container {
        width: 100%; /* Asegura que el texto ocupe todo el ancho disponible */
        max-width: 95vw;
        margin: 0 auto 20px; /* Separación entre los textos */
        padding: 0px;
    }

    /* Hacer que el encabezado ocupe más espacio */
    .robotics-section h2 {
        font-size: 2.0rem; /* Aumentar tamaño de los encabezados */
        line-height: 1.3; /* Ajustar la altura de línea */
        margin-bottom: 10px; /* Separación entre título y párrafo */
        text-align: center;
    }

    /* Aumentar el tamaño de los párrafos */
    .robotics-section p {
        font-size: 20px; /* Aumentar tamaño de los párrafos */
        margin-bottom: 15px; /* Separación entre párrafos */
        text-align: justify;
    }

    /* Mejorar el botón para que se vea más ancho */
    .btn {
        width: 100%; /* Hacer que el botón ocupe todo el ancho */
        font-size: 16px;
        padding: 12px;
        text-align: center;
    }

    /* Hacer que las imágenes se ajusten al contenedor y ocupen más espacio */
    .image-container img {
        width: 100%;
        height: auto;
    }

    /* Asegurar que el contenedor de texto y de imagen esté bien alineado */
    .section-container .image-container, 
    .section-container .text-container {
        padding: 0 15px; /* Agregar un poco de espacio entre imagen y texto */
    }

/* Reducir el tamaño de los encabezados */
    /* Reducir el tamaño de los botones */
    .btn {
        font-size: 14px; /* Reducir el tamaño de los botones */
        padding: 8px 16px; /* Ajustar el tamaño del botón */
    }

    /* Hacer que las imágenes se adapten mejor a la pantalla */
    .image-container img {
        width: 100%; /* Hacer que las imágenes ocupen el 100% del ancho disponible */
        height: auto; /* Mantener la relación de aspecto */
    }

    /* Reducir márgenes y padding en los contenedores de las secciones */
    .section-container {
        padding: 8px; /* Reducir el espacio alrededor de cada sección */
        margin-bottom: 20px; /* Reducir el espacio entre secciones */
    }

    /* Mejorar la disposición del contenido */
    .section-container .text-container, .section-container .image-container {
        width: 100%; /* Hacer que los contenedores ocupen todo el ancho disponible */
        text-align: center; /* Centrar el texto */
    }

    /* Asegurarse de que los textos largos no se desborden */
    .section-container .text-container p, .section-container .text-container h2 {
        word-wrap: break-word; /* Permitir que las palabras largas se rompan */
        word-break: break-word; /* Evitar desbordes */
    }

    /* Reducir márgenes de las imágenes */
    .image-container {
        margin: 0; /* Eliminar márgenes en imágenes */
    }

    body.modal-open {
    overflow: hidden; /* bloquea scroll de fondo */
    }

#learnMoreModal {
    position: fixed;
    inset: 0;
    display: none;              /* ⬅️ CLAVE */
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 9999;
}


#modalText {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body.modal-open {
    overflow: hidden;
    height: 100vh;
}


/* Título principal */
.chronology-title {
    font-size: 2.0rem;           /* Tamaño grande */
    font-weight: 700;          /* Más contundente */
    margin-bottom: 20px;
}

/* Texto descriptivo */
.chronology-description {
    font-size: 1.2rem;         /* Más grande de lo normal */
    font-weight: 300;          /* Elegante y ligero */
    max-width: 900px;          /* Limita el ancho para que sea legible */
    margin: 0 auto 80px auto;  /* Centrado + separación inferior */
    line-height: 1.6;
}

  .cubo {
      width: 64px;
      height: 64px;
  }

  .cubo .cara {
      width: 66px;     /* ⬅️ más grande que el cubo */
      height: 66px;
      border-radius: 6px;
  }

  .mesa-airhockey {
    margin-left: -30px; /* Ajusta el valor según sea necesario */
    overflow: visible;  /* Para asegurarte de que no se oculte contenido si se desborda */
}

  .cubo .front  { transform: translateZ(32px); }
  .cubo .back   { transform: rotateY(180deg) translateZ(32px); }
  .cubo .left   { transform: rotateY(-90deg) translateZ(32px); }
  .cubo .right  { transform: rotateY(90deg) translateZ(32px); }
  .cubo .top    { transform: rotateX(90deg) translateZ(32px); }
  .cubo .bottom { transform: rotateX(-90deg) translateZ(32px); }

.cubo[data-mes="NOV"] { top:80px;  left: 6%; }
.cubo[data-mes="DIC"] { top: 265px; left: 8%; }
.cubo[data-mes="ENE"] { top: 185px;  left: 25%; }
.cubo[data-mes="FEB"] { top: 94px;  left: 40%; }
.cubo[data-mes="MAR"] { top: 285px; left: 40%; }
.cubo[data-mes="ABR"] { top: 170px; left: 55%;  }
.cubo[data-mes="MAY"] { top: 240px; left: 75%;  }
.cubo[data-mes="JUN"] { top: 104px; left: 75%; }

/* Hero Mes */
    .mes-hero h1 {
        font-size: 2.4rem; /* Reducción del tamaño de la fuente */
        margin-bottom: 10px;
        color: #fff;
    }

    .mes-hero p {
        font-size: 1.4rem; /* Ajuste en el tamaño del texto */
        color: #fff;
    }

    /* Tarjetas de semanas */
    .semanas-vertical {
        display: block; /* Cambiar a bloque para que las tarjetas se apilen */
    }

    .semana-fila {
        display: flex;
        flex-direction: column; /* Colocar las tarjetas en columna */
        align-items: flex-start; /* Alinear a la izquierda */
        margin-bottom: 20px;
    }

    .semana-card-vertical {
        width: 100%; /* Las tarjetas ocupan todo el ancho */
        margin-bottom: 15px; /* Espacio entre las tarjetas */
        padding: 15px;
    }
    .semana-card-vertical h1 {
        font-size: 1.7rem;  /* Ajusta el tamaño según lo desees */
        font-weight: bold;
        margin: 0;
    }
    .semana-resumen {
        width: 100%; /* Asegurarse de que la descripción ocupe todo el ancho */
        padding: 10px;
    }
    /* Estilos para los párrafos dentro de las tarjetas de semana */
    .semana-resumen p {
        font-size: 1.3rem;  /* Ajusta el tamaño según lo desees */
        line-height: 1.6;
        margin-top: 10px;
    }


    /* Semana Sección */
    .semana-section h2 {
        font-size: 2rem; /* Ajuste en el tamaño del título */
        color: #fff;
    }

    .semana-section h3 {
        font-size: 1.8rem; /* Ajustar el tamaño del subtítulo */
    }

    .semana-section p {
        font-size: 1.2rem; /* Tamaño de párrafo ajustado */
    }

    /* Imágenes */
    .imagenes-row {
        display: block; /* Cambiar a bloque para que las imágenes se apilen */
    }

    .img-box {
        width: 100%; /* Las imágenes ocupan todo el ancho */
        height: auto; /* Ajustar la altura automáticamente */
        margin-bottom: 15px;
        text-align: center;
        line-height: 150px; /* Centramos el texto dentro de las imágenes */
    }

/* ROBÓTICA CONSCIENTE */
.robotica-consciente-hero .hero-content h2 {
    font-size: 2.5rem;
    margin-top: 0.1rem;
    margin-bottom: none;
    margin: 0;          /* quita márgenes por defecto de h2/p */
    padding: 0;         /* quita padding si existía */
    width: 100%;        /* ocupa todo el ancho del contenedor */
    text-align: center; /* centrado horizontal */
    line-height: normal;
}

.robotica-consciente-hero .hero-content .hero-subtitle {
    font-size: 1.6rem;
    margin-bottom: 2.5rem;
    margin: 1.9rem 0 0 0;          /* quita márgenes por defecto de h2/p */
    padding: 0;         /* quita padding si existía */
    width: 100%;        /* ocupa todo el ancho del contenedor */
    text-align: center; /* centrado horizontal */
    line-height: 1.6;
}

/* BLOG */
.blog-page .hero1{
    margin-top: 4rem;
    margin-bottom: 1px;
}

.blog-page .hero1 .hero-content h2 {
    font-size: 2.5rem;
    margin-top: 0.1rem;
    margin-bottom: none;
    padding: 0;         /* quita padding si existía */
    width: 100%;        /* ocupa todo el ancho del contenedor */
    text-align: center; /* centrado horizontal */
    line-height: normal;
}

.blog-page .hero1 .hero-content p {
    font-size: 1.6rem;
    margin-bottom: 1px;
    margin: 1.9rem 0 0 0;          /* quita márgenes por defecto de h2/p */
    padding: 0;         /* quita padding si existía */
    width: 93%;        /* ocupa todo el ancho del contenedor */
    text-align: center; /* centrado horizontal */
    line-height: 1.8;
}
.blog-page .blog-intro {
    margin-top: 1px;
}

.blog-intro .intro-text h2 {
    font-size: 2.2rem;  /* Ajusta el tamaño del título */
}

.blog-intro .intro-text p {
    font-size: 1.5rem;  /* Ajusta el tamaño del subtítulo */
}

.blog-intro .intro-text .intro-link a {
    font-size: 1.5rem;  /* Ajusta el tamaño del subtítulo */
}

.blog-intro .intro-link {
    font-size: 1.0rem;
}
/* Pre Artículos */
.articulos-page .hero-articulos .breadcrumb {
    font-size: 1.3rem; /* Ajusta el tamaño del texto del breadcrumb */
    color: #ffffff;  /* Cambiar el color de los enlaces */
}

.articulos-page .hero-articulos .hero-titulo h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.articulos-page .hero-articulos .hero-titulo p {
    font-size: 1.3rem;
    color: #cfcfcf;
}

.articulos-page .search-bar input {
    flex: 1;
    padding: 16px 16px;
    border-radius: 8px;
    border: none;
    font-size: 1.4rem;
}

.no-results-message {
    font-size: 1.4rem;
}

.articulos-page .articulo-card h3 {
    font-size: 1.8rem;
}

.articulos-page .articulo-card p {
    font-size: 1.3rem;
    color: #cfcfcf;
}

.articulos-page .articulo-card a {
    font-size: 1.3rem;
    padding: 8px 16px;
}

/* BLOG ARTÍCULOS */
.articulo-page .hero-articulo {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* alinea a la izquierda */
    padding: 40px 0px; 
    margin-left: 0;
}

.articulo-page .hero-articulo h1 {
    font-size: 2.8rem;
    margin-bottom: 12px;
}

.articulo-page .hero-articulo p {
    font-size: 1.3rem;
    color: #cfcfcf;
}

.articulo-page .hero-articulo .breadcrumb {
    font-size: 1.3rem; /* Ajusta el tamaño del texto del breadcrumb */
    color: #cfcfcf;  /* Cambiar el color de los enlaces */
    margin-left: 20px;
}

.articulo-page .hero-articulo .hero-overlay {
    padding: 0 50px;
    width: 100vw; /* Ocupa el 100% del ancho del viewport */
    height: 80vh; /* Ocupa el 100% del alto del viewport */
}

.articulo-page .hero-articulo .hero-overlay h1 {
font-size: 1.7rem;
}

.articulo-page .hero-articulo .hero-overlay p {
font-size: 1.0rem;
}

.articulo-page .contenido-articulo  {
    padding: 0 8px;
}

.articulo-page .contenido-articulo .contenido-texto {
    padding: 2rem 2rem;
}

.articulo-page .contenido-articulo .contenido-texto p {
    font-size: 1.2rem;
    text-align: justify;
}

.articulo-page .comentarios-articulo {
    max-width: 900px;
    margin: 60px auto 80px;
    padding: 0 20px;
}


.articulo-page .comentarios-articulo h2 {
    font-size: 2rem;
    color: #ffffff;
}

.articulo-page .comentarios-articulo p {
    font-size: 1.2rem;
    color: #ffffff;
    margin-bottom: 20px;
}

.articulo-page .comentarios-articulo button {
    font-size: 1.1rem;
}

.articulo-page .comentarios-articulo textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border-radius: 0px;
    border: none;
    margin-bottom: 12px;
    font-family: inherit;
    font-size: 1.2rem;
}

.articulo-page {
    margin-top: -50px;

}

.articulo-page .comentarios-articulo .comentario p {
    padding: 12px;
}

.articulo-page .comentario {
    width: 100%; /* Reduce el ancho al 90% en móviles */
}
/* GALERIA */
  .projects-section {
    display: flex;
    flex-direction: column;
    gap: 60px; /* separación entre tarjetas */
    margin-bottom: 60px;
  }

  .project-card {
    width: 100%;
  }

  .galeria-detalle-tag {
    padding: 40px 30px;
    width: 80%;
    margin-right: -60px; 
    margin-left: -5px;
  }
  .galeria-detalle-top {
    margin-left: -40px;
}
.fotos-grid {
    grid-template-columns: repeat(2, 1fr); /* 4 fotos por fila */
}

/* ********** */
/* SOBRE MÍ */
/* ********** */

.sobre-mi-hero .hero-content h2 {
    font-size: 2.5rem;
    margin-top: 4.5rem;
    margin-bottom: none;
    margin-left: 1.5rem;          /* quita márgenes por defecto de h2/p */
    margin-right: 1.5rem;
    padding: 0;         /* quita padding si existía */
    width: 90%;
    line-height: 1.1;
}
.hero-content .hero-subtitle {
    font-size: 1.5rem;
    line-height: 1.7;
    color: #ffffff;
    margin-bottom: 10.5rem;
    margin-left: 1.5rem;          /* quita márgenes por defecto de h2/p */
    margin-right: 1.5rem;        /* quita márgenes por defecto de h2/p */
    padding: 0;         /* quita padding si existía */
    width: 90%;        /* ocupa todo el ancho del contenedor */
    text-align: center; /* centrado horizontal *//
}


/* QUIEN SOY */
.card-tag {
    font-size: 15px;
}
.card-text {
    font-size: 20px;
}
.sobre-mi-card {
    background-color: #05003a;
    color: #ffffff;
    border-radius: 22px;
    padding: 50px 50px;
    
    width: 100%;
    margin-left: 5px;   /* 2–3 dedos desde el borde izquierdo */
    margin-right: 5px;
    margin-top: 25px;
    box-sizing: border-box;
}

.card-extra {
  display: none;
  max-height: 200px;  /* Esto limita la altura */
  overflow: hidden;   /* Esto oculta el texto adicional */
}

.card-extra.open {
  display: block;
  max-height: none;   /* Elimina el límite de altura */
  overflow: visible;  /* Hace que todo el texto se muestre */
}

.card-tag {
    font-size: 20px;
}

.historia-detras-card {
    background-color: #05003a;
    color: #ffffff;
    border-radius: 22px;
    padding: 50px 50px;
    
    width: 100%;
    margin-left: 5px;   /* 2–3 dedos desde el borde izquierdo */
    margin-right: 5px;
    margin-top: 50px;
    box-sizing: border-box;
}

.card-extra {
  display: none;
  max-height: 200px;  /* Esto limita la altura */
  overflow: hidden;   /* Esto oculta el texto adicional */
}

.card-extra.open {
  display: block;
  max-height: none;   /* Elimina el límite de altura */
  overflow: visible;  /* Hace que todo el texto se muestre */
}


.actualidad-card {
    background-color: #05003a;
    color: #ffffff;
    border-radius: 22px;
    padding: 50px 50px;
    
    width: 100%;
    margin-left: 5px;   /* 2–3 dedos desde el borde izquierdo */
    margin-right: 5px;

    box-sizing: border-box;
}

.card-extra {
  display: none;
  max-height: 200px;  /* Esto limita la altura */
  overflow: hidden;   /* Esto oculta el texto adicional */
}

.card-extra.open {
  display: block;
  max-height: none;   /* Elimina el límite de altura */
  overflow: visible;  /* Hace que todo el texto se muestre */
}

.frase-transmitir p {
    color: #ffffff;
}

/* AMBAS TARJETAS SOLAPADAS */
.info-card {
    padding: 22px 26px;
    box-sizing: border-box;
    box-shadow: 0px 14px 40px rgba(0, 0, 0, 0.18);
}

.historia-card {
    width: 100%;
    padding: 50px 50px;
}


.historia-card .card-tag-dark {
    font-size: 20px;
}

.filosofia-card {
    /* Mantén tu colocación lateral (NO TOCAR) */
    left: 2%;
    width: 100%;
    /* Solape VERTICAL sin tocar transform */
    margin-top: 50px;
    padding: 50px 50px;
}

.filosofia-card .card-tag-dark {
    font-size: 20px;
}


/* CONTACTO */


.contacto-head{
  width: 90%;         /* mismo ancho que el grid */
  margin-top: 60px;       /* nada de centrar, a la izquierda */
  margin-left: 14px;
  margin-right: 14px;
  text-align: center;
}

.contacto-container {
  padding: 0 25px; /* Reducir márgenes laterales */
}

.contacto-container .contacto-head .contacto-titulo{
  font-size: 50px;
  line-height: 1.02;
  letter-spacing: -1px;
  margin: 0 0 25px 0;
  color:#ffffff;
}


.contacto-container .contacto-head .contacto-subtitulo{
  font-size: 26px;
  line-height: 1.55;
  max-width: 760px;
  margin: 0 auto;
  color: #ffffff;
}

/* Email destacado en texto */

.contacto-email{
    font-size: 23px;
}
.contacto-grid{
  grid-template-columns: 1fr

}

.contacto-card-title{
  font-size: 29px;
}

.contacto-field label{
  font-size: 24px;
}

.contacto-field input{
  font-size: 20px;
}

.contacto-field textarea{
  font-size: 20px;
}



.contacto-info-icon{
  font-size: 20px;
}

.contacto-info-label{
  font-size: 22px;
}

.contacto-info-link,
.contacto-info-value{

  font-size: 20px;

}
.contacto-mini{
  font-size: 20px;
}

.btn-enviar{
  font-size: 20px;
}

.legal-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    color: #ffffff; /* Texto blanco */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
}

.legal-container h1, .legal-container h2, .legal-container h3 {
    color: #ffffff;
    border-bottom: 1px solid #444; /* Una línea sutil para separar secciones */
    padding-bottom: 10px;
    margin-top: 30px;
}

.legal-container a {
    color: #00d4ff; /* Un azul neón/robótico para los enlaces de email */
    text-decoration: none;
}

.legal-container a:hover {
    text-decoration: underline;
}

.legal-container ul {
    margin-left: 20px;
}

/* Arreglo específico para los enlaces del footer */
.footer-bottom nav a, 
.footer-bottom nav a:visited {
    color: rgba(255, 255, 255, 0.677); /* El azul robótico */
    text-decoration: none !important;
}

.footer-bottom nav a:hover {
    color: #4DB8B1 !important; /* Blanco al pasar el ratón */
    text-decoration: underline !important;
}

/* Para que la barra separadora "|" no se vea rara si está fuera del enlace */
.footer-bottom nav {
    color: rgba(255, 255, 255, 0.677); 
}

.footer-bottom nav {
        display: flex;
        flex-direction: column; /* Los ponemos uno debajo del otro */
        align-items: center;    /* Los centramos */
        gap: 10px;              /* Espacio entre ellos */
        margin-bottom: 20px;
    }

    /* Quitamos la barra separadora "|" que en vertical no queda bien */
    .footer-bottom nav span, 
    .footer-bottom nav::after {
        display: none; 
    }

    /* Si el separador es texto plano entre los enlaces, lo mejor es quitarlo del HTML o envolverlo en un span para ocultarlo en móvil */

    .footer-bottom p {
        font-size: 12px;       /* Un pelín más pequeño para que no ocupe tanto */
        padding: 0 20px;       /* Margen a los lados para que no toque los bordes */
    }

    .separador {
        display: none !important; /* ¡Adiós barra en móvil! */
    }
    
    .footer-bottom nav a {
        display: block; /* Para que cada uno ocupe su línea */
        margin: 1px 0;
    }

}