@charset "UTF-8";
/*
 * Diseño del sitio: el mismo lenguaje visual que ComprobApp y CitMed (letra Figtree, fondo claro,
 * menú blanco, etiquetas chicas en mayúsculas sobre los títulos, tarjetas blancas redondeadas con
 * sombra suave, franja oscura abajo), con los colores del logo: azul marino y celeste.
 * Todo autohospedado: sin CDN (la conexión del servidor no es confiable).
 * Bootstrap sigue cargado por la grilla, el menú móvil y el carrusel de la galería.
 */

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(fonts/figtree-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(fonts/figtree-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --marino: #0b1c30;          /* el azul del logo */
    --celeste: #2ec4d6;         /* acento del logo */
    --celeste-oscuro: #0e8fa0;  /* para texto y botones (contraste) */
    --celeste-claro: #e6f8fa;
    --naranja: #f5a623;
    --tinta: #1c2433;
    --gris: #5a6577;
    --fondo: #f4f6f8;
    --borde: #e7ebef;
    --sombra: 0 10px 30px -12px rgba(16, 32, 56, .18);

    --bs-body-font-family: 'Figtree', system-ui, sans-serif;
    --bs-link-color: var(--celeste-oscuro);
    --bs-link-hover-color: var(--marino);
}

html { font-size: 16px; scroll-behavior: smooth; }
/* Al saltar a #contacto o #desarrollos, que el menú fijo no tape el título. */
[id] { scroll-margin-top: 5rem; }

body {
    font-family: 'Figtree', system-ui, sans-serif;
    color: var(--tinta);
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4 { font-weight: 700; color: var(--tinta); letter-spacing: -.01em; }

/* ---------------- Botones (píldoras, como ComprobApp) ---------------- */
.boton, .boton-borde, .boton-claro {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .7rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: .95rem;
    text-decoration: none; transition: background-color .2s, color .2s, border-color .2s;
    border: 1px solid transparent; white-space: nowrap;
}
.boton { background: var(--celeste-oscuro); color: #fff; }
.boton:hover { background: var(--marino); color: #fff; }
.boton-borde { border-color: #bfe9ef; color: var(--celeste-oscuro); background: #fff; }
.boton-borde:hover { background: var(--celeste-claro); color: var(--celeste-oscuro); }
.boton-claro { background: #fff; color: var(--marino); }
.boton-claro:hover { background: var(--celeste-claro); color: var(--marino); }

/* ---------------- Menú (blanco, fijo arriba) ---------------- */
.sitio-header {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--borde);
}
.sitio-header .navbar { padding: .7rem 0; }
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.marca img { width: 2.4rem; height: 2.4rem; }
.marca span { font-weight: 700; font-size: 1.2rem; color: var(--tinta); letter-spacing: -.01em; }
.marca span b { color: var(--celeste-oscuro); font-weight: 700; }
.sitio-header .nav-link {
    color: var(--tinta); font-weight: 500; font-size: .95rem; padding: .5rem .85rem !important;
    display: flex; align-items: center; gap: .45rem;
}
.sitio-header .nav-link i { color: var(--celeste-oscuro); font-size: .95rem; }
.sitio-header .nav-link:hover, .sitio-header .nav-link.active { color: var(--celeste-oscuro); }
.sitio-header .navbar-toggler { border: 0; font-size: 1.6rem; color: var(--tinta); }
.sitio-header .navbar-toggler:focus { box-shadow: none; }
@media (max-width: 991.98px) {
    .sitio-header .navbar-collapse { padding: .75rem 0 .5rem; }
    .sitio-header .boton { margin-top: .5rem; }
}

/* ---------------- Títulos de sección ---------------- */
.etiqueta {
    display: block; color: var(--celeste-oscuro); font-weight: 700; font-size: .8rem;
    letter-spacing: .25em; text-transform: uppercase; margin-bottom: .75rem;
}
.titulo-seccion { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 1rem; }
.bajada { color: var(--gris); max-width: 42rem; margin: 0 auto; }
.seccion { padding: 5rem 0; }
.seccion-gris { background: var(--fondo); }
.encabezado-seccion { text-align: center; margin-bottom: 3rem; }

/* ---------------- Hero: la foto de los racks con un degradé azul marino encima ---------------- */
.hero {
    position: relative; overflow: hidden; color: #fff;
    background-image:
        linear-gradient(100deg, rgba(11, 28, 48, .88) 0%, rgba(11, 28, 48, .62) 42%, rgba(11, 28, 48, .18) 75%, rgba(14, 143, 160, .10) 100%),
        url(../images/hero-servidores.jpg);
    background-size: cover; background-position: center;
    padding: 6.5rem 0 7rem;
}
.hero .etiqueta { color: var(--celeste); }
.hero h1 {
    text-shadow: 0 .15rem .8rem rgba(0, 0, 0, .35);
    color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.12; text-transform: uppercase;
    letter-spacing: -.02em; margin-bottom: 1.25rem;
}
.hero h1 span { color: var(--celeste); display: block; margin-top: .3rem; }
.hero .bajada { color: rgba(255, 255, 255, .82); margin: 0 0 2rem; font-size: 1.1rem; }
.hero .boton { background: var(--celeste); color: var(--marino); }
.hero .boton:hover { background: #fff; color: var(--marino); }
.hero .boton-borde { background: rgba(11, 28, 48, .42); color: #fff; border-color: rgba(255, 255, 255, .75); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.hero .boton-borde:hover { background: rgba(11, 28, 48, .62); color: #fff; border-color: #fff; }
.hero-ilustracion {
    width: 100%; max-width: 24rem; height: auto; display: block; margin: 0 auto;
    filter: drop-shadow(0 1.5rem 2rem rgba(0, 0, 0, .45));
}
@media (min-width: 992px) { .hero { background-attachment: fixed; } }
/* En el celular el texto ocupa todo el ancho: el degradé, parejo y un poco más oscuro. */
@media (max-width: 991.98px) {
    .hero { background-image: linear-gradient(180deg, rgba(11, 28, 48, .78) 0%, rgba(11, 28, 48, .62) 100%), url(../images/hero-servidores.jpg); }
}

/* ---------------- Tres virtudes (como Rapidez / Cumplimiento / Historial) ---------------- */
.virtud { text-align: center; padding: 0 1rem; }
.virtud .icono {
    width: 3rem; height: 3rem; border-radius: 1rem; background: var(--celeste-claro); color: var(--celeste-oscuro);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 1rem;
}
.virtud h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.virtud p { color: var(--gris); font-size: .92rem; margin: 0; }

/* ---------------- Tarjetas ---------------- */
.tarjeta {
    background: #fff; border: 1px solid var(--borde); border-radius: 1.75rem; box-shadow: var(--sombra);
    padding: 2rem; height: 100%; display: flex; flex-direction: column;
}
.tarjeta-logo {
    width: 4rem; height: 4rem; border-radius: 1.1rem; background: var(--fondo); display: flex;
    align-items: center; justify-content: center; margin-bottom: 1.25rem; overflow: hidden;
}
.tarjeta-logo img { max-width: 2.9rem; max-height: 2.9rem; object-fit: contain; }
.tarjeta h3 { font-size: 1.35rem; margin-bottom: .25rem; }
.tarjeta .subtitulo { color: var(--celeste-oscuro); font-weight: 600; font-size: .92rem; margin-bottom: .9rem; }
.tarjeta p { color: var(--gris); font-size: .95rem; }
.lista-bondades { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.lista-bondades li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; font-size: .93rem; color: var(--tinta); }
.lista-bondades li::before {
    content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: .1rem;
    color: var(--celeste-oscuro); font-size: .8rem;
}
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.chip { font-size: .75rem; font-weight: 500; color: var(--gris); background: var(--fondo); border-radius: 999px; padding: .3rem .7rem; }
.tarjeta .acciones { margin-top: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.sin-sitio { font-size: .85rem; color: var(--gris); background: var(--fondo); border-radius: 999px; padding: .55rem 1.1rem; }

/* ---------------- Trayectoria (texto + números) ---------------- */
.numero {
    background: #fff; border: 1px solid var(--borde); border-radius: 1.5rem; box-shadow: var(--sombra);
    text-align: center; padding: 1.75rem 1rem; height: 100%;
}
.numero b { display: block; font-size: 2rem; color: var(--celeste-oscuro); line-height: 1.1; }
.numero span { color: var(--gris); font-size: .88rem; }

/* ---------------- Tecnologías ---------------- */
.tira-tecnologias { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 2.5rem; }
.tira-tecnologias a { display: flex; flex-direction: column; align-items: center; gap: .6rem; width: 6.5rem; text-decoration: none; color: var(--tinta); font-size: .88rem; font-weight: 500; }
.tira-tecnologias-icono {
    width: 5.5rem; height: 5.5rem; background: #fff; border: 1px solid var(--borde); border-radius: 1.4rem;
    display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra); transition: transform .15s;
}
.tira-tecnologias a:hover .tira-tecnologias-icono { transform: translateY(-3px); }
.tira-tecnologias img { width: 3.4rem; height: 3.4rem; object-fit: contain; }
.tarjeta-tecnologia { text-align: center; }
.tarjeta-tecnologia img { width: 4.5rem; height: 4.5rem; object-fit: contain; margin: 0 auto 1rem; }

/* ---------------- Mi familia (foto con degradé) ---------------- */
.seccion-familia {
    background-image: linear-gradient(135deg, rgba(11, 28, 48, .82) 0%, rgba(14, 143, 160, .55) 100%), url(../images/familia-fondo.jpg);
    background-size: cover; background-position: center 62%; color: #fff; text-align: center; padding: 7rem 0;
}
.seccion-familia h2, .seccion-familia .etiqueta { color: #fff; }
.seccion-familia p { color: rgba(255, 255, 255, .85); max-width: 36rem; margin: 0 auto 2rem; }

/* ---------------- Páginas internas ---------------- */
.cabecera-pagina { background: var(--fondo); padding: 3.5rem 0 3rem; text-align: center; border-bottom: 1px solid var(--borde); }
.cabecera-pagina h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0; }
.contenido-pagina { padding: 3rem 0 4rem; }
.titulo-pagina-claro { color: var(--tinta); }   /* lo usaba el fondo azul anterior */
.tarjeta-fondo { background: #fff; border: 1px solid var(--borde); border-radius: 1.75rem; box-shadow: var(--sombra); padding: 2rem; }

/* Currículum */
.curriculum dt { font-weight: 600; color: var(--marino); }
.curriculum dd { margin-bottom: .6rem; color: var(--gris); }
.curriculum h2 {
    font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: var(--celeste-oscuro);
    border-bottom: 1px solid var(--borde); padding-bottom: .6rem; margin-top: 2.25rem; margin-bottom: 1rem;
}

/* ---------------- Galería ---------------- */
.migas-de-pan { background: #fff; border: 1px solid var(--borde); border-radius: 999px; padding: .55rem 1.25rem; }
.migas-de-pan .breadcrumb-item { font-weight: 600; }
.migas-de-pan a { text-decoration: none; }
.tarjeta-carpeta {
    text-decoration: none; color: inherit; display: block; background: #fff; border: 1px solid var(--borde);
    border-radius: 1.25rem; overflow: hidden; box-shadow: var(--sombra); transition: transform .15s; height: 100%;
}
.tarjeta-carpeta:hover { transform: translateY(-4px); color: inherit; }
.tarjeta-carpeta .miniatura {
    aspect-ratio: 4 / 3; background: var(--celeste-claro) center/cover no-repeat; display: flex;
    align-items: center; justify-content: center; font-size: 2.5rem; color: var(--celeste-oscuro);
}
.tarjeta-carpeta .miniatura-icono-img { width: 3rem; height: 3rem; object-fit: contain; }
.tarjeta-carpeta .nombre-carpeta { padding: .7rem .75rem; font-weight: 600; font-size: .95rem; text-align: center; word-break: break-word; }
.carrusel-galeria { background: #fff; border: 1px solid var(--borde); border-radius: 1.5rem; box-shadow: var(--sombra); padding: 1rem; }
.carrusel-galeria .carousel-item { text-align: center; }
.carrusel-galeria .carousel-item img, .carrusel-galeria .carousel-item video { max-height: 32rem; width: auto; max-width: 100%; margin: 0 auto; border-radius: .75rem; }
.carrusel-galeria .embed-instagram { max-height: 40rem; overflow-y: auto; display: flex; justify-content: center; }
.carrusel-galeria .embed-instagram iframe { margin: 0 auto !important; }
.carrusel-galeria .carousel-control-prev, .carrusel-galeria .carousel-control-next { width: 4rem; }
.carrusel-galeria .carousel-control-prev-icon, .carrusel-galeria .carousel-control-next-icon { background-color: rgba(11, 28, 48, .45); border-radius: 50%; padding: 1.2rem; }

/* ---------------- Formulario de contacto (el formato del de Sicat 3) ---------------- */
.formulario-contacto { max-width: 46rem; }
.formulario-contacto .col-form-label { font-weight: 600; color: var(--tinta); }
.formulario-contacto .form-control { border-radius: .9rem; border-color: var(--borde); padding: .7rem 1rem; }
.formulario-contacto .form-control:focus { border-color: var(--celeste); box-shadow: 0 0 0 .2rem rgba(46, 196, 214, .2); }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso-contacto { border-radius: .9rem; padding: .8rem 1rem; margin-bottom: 1.25rem; font-weight: 500; font-size: .95rem; }
.aviso-ok { background: var(--celeste-claro); color: var(--celeste-oscuro); }
.aviso-error { background: #fdecea; color: #b42318; }

/* ---------------- Pie (franja oscura) ---------------- */
.sitio-footer { background: var(--marino); color: rgba(255, 255, 255, .75); padding: 2.5rem 0 2rem; flex-shrink: 0; }
.sitio-footer .marca span { color: #fff; }
.sitio-footer .marca span b { color: var(--celeste); }
.footer-contacto { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; padding: 0; margin: 0; }
.footer-contacto li { display: flex; align-items: center; gap: .5rem; font-size: .92rem; }
.footer-contacto i { color: var(--celeste); width: 1.1rem; text-align: center; }
.footer-contacto a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.footer-contacto a:hover { color: #fff; text-decoration: underline; }
.footer-lugar { font-size: .85rem; color: rgba(255, 255, 255, .6); }
.footer-lugar b { color: #fff; font-size: 1rem; }
.footer-legal { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 1.75rem; padding-top: 1.25rem; font-size: .8rem; color: rgba(255, 255, 255, .5); }

/* ---------------- Impresión / PDF del CV ---------------- */
@media print {
    .sitio-header, .sitio-footer, .cabecera-pagina { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .curriculum .text-center.mt-4 { display: none !important; }
    .tarjeta-fondo.curriculum { border: 0 !important; box-shadow: none !important; padding: 0 !important; }
    .contenido-pagina { padding: 0 !important; }
    .curriculum h2, .curriculum dt { color: #000 !important; }
}