/* ── Tipografía base ── */
p {
    font-family: 'Computer Modern Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
}

/* ── Enlaces ── */
a {
    text-decoration: none;
    color: #181818;
    border-bottom: solid thin #d6ceba;
    font-weight: bold;
}

a:visited { color: #000000; }
a:hover { color: #fff; background: #181818; border-bottom: none; }
a:active { color: #fff; background: #000; border-bottom: dotted thin #d6ceba; }

/* ── Body ── */
body {
    margin-top: 50px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    min-width: 320px;
    max-width: 800px;
    font-family: 'Computer Modern Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
    background-image: url(resources/Iguazu.jpg);
    background-size: cover;
    background-attachment: fixed;
    line-height: 1.4;
    color: #181818;
    padding: 0 1em;
}

/* ── Contenedor ── */
.container {
    position: relative;
    max-width: 100%;
    margin: 2em auto;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* ── Cabecera ── */
header {
    border: solid #597091;
    border-bottom: none;
    padding: 40px;
    background: #ffffff;
    text-align: center;
}

h1 { font-size: 2em; margin: 0; }
.career { font-style: italic; margin: 0.5em 0; }
nav { margin-top: 1em; }
nav a:hover { text-decoration: underline; }

/* ── Separador entre bloques ── */
hr {
    border: 0;
    border-top: 1px solid #597091;
    width: 100%;
    margin: 0;
}

/* ── Secciones ── */
.bio {
    border: solid #597091;
    border-top: none;
    padding: 40px;
    background: #ffffff;
}

.content {
    border: solid #597091;
    border-top: none;
    padding: 40px;
    background: #ffffff;
}

.project-detail {
    border: solid #597091;
    border-top: none;
    padding: 40px;
    background: #ffffff;
}

.contact {
    border: solid #597091;
    border-top: none;
    padding: 32px 40px;
    background: #ffffff;
}

.contact h2 { margin-top: 0; }

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    margin-top: 1em;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.75em;
    font-weight: normal;
    border-bottom: none;
    color: #181818;
    width: fit-content;
    padding: 2px 4px;
}

.contact-item:hover { color: #fff; background: #181818; border-bottom: none; }
.contact-item:hover .contact-icon { color: #fff; border-color: #fff; }

.contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid #597091;
    font-size: 0.82em;
    font-weight: bold;
    color: #597091;
    flex-shrink: 0;
}

/* ── Imágenes ── */
.image-container { text-align: center; }

img {
    max-width: 70%;
    height: auto;
    margin-top: 1em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.image-description { font-style: italic; margin: 0em 0.5em; }

video {
    max-width: 70%;
    height: auto;
    margin-top: 0.5em;
    margin-bottom: 2em;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* ── Selector de idioma ── */
.language-switcher { text-align: left; margin-bottom: 0; }

.language-switcher button {
    font-family: 'Computer Modern Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
    font-weight: bold;
    font-size: 1em;
    background: none;
    border: none;
    border-bottom: solid thin #d6ceba;
    color: #181818;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.language-switcher button:hover { color: #fff; background: #181818; border-bottom: none; }

/* ── Tipografía ── */
h2 {
    font-size: 1.25em;
    margin: 1.8em 0 0.4em;
    border-bottom: 1px solid #d6ceba;
    padding-bottom: 0.2em;
    font-family: 'Computer Modern Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
}

h2:first-child { margin-top: 0; }
.subtitle { font-style: italic; margin: 0.3em 0 1em; color: #444; }

.meta {
    font-size: 0.85em;
    color: #666;
    font-style: italic;
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid #d6ceba;
}

/* ── Grid de tarjetas ── */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2em;
    border: solid #597091;
    border-top: none;
    padding: 24px;
    background: #f7f5f0;
}

.project-card {
    background: #ffffff;
    border: 1px solid #d6ceba;
    text-decoration: none;
    color: #181818;
    display: flex;
    flex-direction: column;
    font-weight: normal;
    box-shadow: 0 2px 8px rgba(89,112,145,0.10);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.project-card:last-child { border-right: 1px solid #d6ceba; }

.project-card:hover {
    border-color: #597091;
    box-shadow: 0 6px 20px rgba(89,112,145,0.22);
    transform: translateY(-3px);
}

.project-card:hover .card-arrow { transform: translateX(5px); }

.card-image {
    width: 100%;
    aspect-ratio: 16/9;
    background: #e8e3d8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid #d6ceba;
    flex-shrink: 0;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    margin: 0;
}

.card-image-placeholder {
    color: #aaa;
    font-size: 0.78em;
    font-style: italic;
    font-family: 'Computer Modern Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
    text-align: center;
    padding: 1em;
}

.card-body {
    padding: 16px 18px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-tag {
    font-size: 0.70em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #597091;
    font-weight: bold;
    margin-bottom: 0.35em;
    font-family: 'Computer Modern Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
}

.card-title {
    font-size: 0.95em;
    font-weight: bold;
    margin: 0 0 0.45em;
    line-height: 1.3;
    font-family: 'Computer Modern Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
}

.card-desc {
    font-size: 0.85em;
    color: #444;
    margin: 0;
    line-height: 1.4;
    flex: 1;
    font-family: 'Computer Modern Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
}

.card-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.8em;
    color: #597091;
}

.card-arrow {
    display: inline-block;
    transition: transform 0.15s ease;
    font-size: 1em;
}

/* ── Detalle de proyecto ── */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: 0.88em;
    margin-bottom: 1.5em;
    color: #597091;
    border-bottom: 1px solid #d6ceba;
    font-weight: bold;
}

.back-link:hover { color: #fff; background: #597091; border-bottom: none; }

.project-badge {
    display: inline-block;
    margin: 0.8em 0;
    font-size: 0.85em;
    color: #597091;
    font-style: italic;
    font-family: 'Computer Modern Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
}

.placeholder-note {
    font-size: 0.9em;
    color: #888;
    margin-top: 0.5em;
    font-style: italic;
    font-family: 'Computer Modern Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
}

.project-detail h2 { margin-top: 1.6em; }
.project-detail .project-h2-main {
    margin-top: 0.3em;
    border-bottom: none;
    padding-bottom: 0;
    font-size: 1.3em;
}

/* ── Responsive ── */
@media only screen and (max-width: 600px) {
    .language-switcher { position: static; text-align: left; margin: 10px 0; }

    header, .bio, .content, .contact, .project-detail { padding: 24px 18px; }

    img, video { max-width: 100%; }

    .projects-grid {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 1em;
    }
    .project-card { border-right: 1px solid #d6ceba; }
}