/* =====================================================
   ICE - Página "Tecnicaturas"
   Se carga después de css/estilo-index.css, que aporta los
   tokens, el header, el footer, .cabecera, .seccion, .mapa y .reveal.

   Índice
   1. Portada
   2. Carreras
   3. Testimonios (título)
   4. Responsive

   Los carruseles, tarjetas de foto/video y el visor están en
   css/estilo-galeria.css (compartido).
   ===================================================== */

/* ---------- 1. Portada ---------- */
.tc-hero,
.tc-carreras { --solape: 64px; }   /* cuánto baja la barra de beneficios sobre la sección siguiente */

.tc-hero {
    position: relative;
    display: flow-root;
    padding-top: clamp(32px, 4vw, 56px);
    color: #fff;
    background: linear-gradient(135deg, var(--azul-900) 0%, var(--azul) 55%, var(--azul-600) 100%);
}

/* Capa decorativa (recortada para que los brillos no generen scroll) */
.tc-hero__fondo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tc-hero__puntos {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .10) 1.3px, transparent 1.3px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 65%);
    mask-image: linear-gradient(100deg, transparent 0%, #000 65%);
}
.tc-hero__orbe { position: absolute; border-radius: 50%; }
.tc-hero__orbe--naranja {
    top: -220px; right: -120px;
    width: 640px; height: 640px;
    background: radial-gradient(circle, rgba(241, 155, 36, .42) 0%, rgba(241, 155, 36, 0) 68%);
}
.tc-hero__orbe--claro {
    bottom: -260px; left: -180px;
    width: 620px; height: 620px;
    background: radial-gradient(circle, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 68%);
}

.tc-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);   /* la foto ocupa la columna más ancha */
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
    /* El texto se alinea con el contenedor (1400px) y la foto llega hasta el borde derecho de la pantalla */
    max-width: none;
    margin: 0;
    padding-right: 0;
    padding-left: max(24px, calc((100vw - 1400px) / 2 + 24px));
}

.tc-hero__titulo {
    font-family: var(--fuente-titulo);
    font-size: clamp(2.7rem, 7vw, 6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    text-shadow: 0 6px 30px rgba(0, 0, 0, .3);
    animation: aparecer .9s var(--ease) backwards;
}
.tc-hero__acento {
    display: block;
    color: var(--naranja);
    background: linear-gradient(90deg, var(--naranja) 0%, #ffc46b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tc-hero__subtitulo {
    max-width: 30ch;
    margin-top: clamp(22px, 3vw, 34px);
    padding-left: 18px;
    font-size: clamp(1.2rem, 2.5vw, 1.75rem);
    font-style: italic;
    line-height: 1.35;
    color: rgba(255, 255, 255, .94);
    border-left: 5px solid var(--naranja);
    animation: aparecer .9s .15s var(--ease) backwards;
}
.tc-hero__boton {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    margin-top: clamp(22px, 3vw, 32px);
    padding: 15px 30px;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--azul);
    background: var(--naranja);
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(241, 155, 36, .4);
    transition: background .25s, color .25s, transform .25s var(--ease), box-shadow .25s;
    animation: aparecer .9s .3s var(--ease) backwards;
}
.tc-hero__boton i { font-size: .85em; transition: transform .25s var(--ease); }
.tc-hero__boton:hover { color: #fff; background: var(--azul-600); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 0, 0, .35); }
.tc-hero__boton:hover i { transform: translateY(4px); }
#carreras { scroll-margin-top: 96px; }       /* que el menú fijo no tape el comienzo de las carreras */

.tc-hero__visual {
    position: relative;
    isolation: isolate;
    container-type: inline-size;                /* permite usar cqw en la altura de la foto */
    animation: aparecer 1s .25s var(--ease) backwards;
}
.tc-hero__visual::before {                     /* marco naranja desplazado detrás de la foto */
    content: '';
    position: absolute;
    inset: 24px 0 -22px 24px;
    z-index: -1;
    border: 3px solid var(--naranja);
    border-right: 0;
    border-radius: 44px 0 0 160px;
    opacity: .85;
}
.tc-hero__foto {
    /* Altura = alto de la ventana menos header, barra de beneficios y aire; nunca más alta que ~62% de su ancho (más horizontal) */
    height: clamp(260px, calc(100vh - 340px), 560px);
    height: clamp(260px, min(calc(100svh - 340px), 62cqw), 560px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .28);
    border-right: 0;
    border-radius: 44px 0 0 160px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
}
.tc-hero__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 22%;
}
.tc-hero__sello {
    position: absolute;
    top: -26px;
    right: clamp(24px, 6vw, 110px);
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    font-size: 2rem;
    color: var(--azul);
    background: var(--naranja);
    border: 5px solid var(--azul);
    border-radius: 50%;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .4);
    animation: tc-flotar 5s ease-in-out infinite;
}
@keyframes tc-flotar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* Barra de beneficios: queda a caballo entre la portada y la sección siguiente */
.tc-ventajas-caja {
    position: relative;
    max-width: 1400px;
    z-index: 3;
    margin-top: clamp(28px, 3.4vw, 48px);
    margin-bottom: calc(-1 * var(--solape));
    animation: aparecer 1s .4s var(--ease) backwards;
}
.tc-ventajas {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    background: linear-gradient(180deg, #16305c 0%, var(--azul-900) 100%);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radio-l);
    box-shadow: 0 30px 70px rgba(13, 26, 51, .5);
}
.tc-ventajas::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--naranja), #ffc46b, var(--naranja));
}
.tc-ventajas li {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 24px 26px;
}
.tc-ventajas li + li { border-left: 1px solid rgba(255, 255, 255, .12); }
.tc-ventajas img { display: block; width: auto; max-width: 100%; height: auto; }

/* ---------- 2. Carreras ---------- */
.tc-carreras { padding: calc(var(--solape) + clamp(48px, 6vw, 88px)) 0 clamp(64px, 8vw, 112px); }

.tc-carreras__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);      /* 2 grandes arriba + 3 abajo */
    gap: 24px;
}

.tc-carrera {
    position: relative;
    grid-column: span 2;
    display: flex;
    min-height: 380px;
    overflow: hidden;
    color: #fff;
    background: var(--azul);
    border-radius: var(--radio-l);
    box-shadow: var(--sombra-m);
    isolation: isolate;
    transition: transform .4s var(--ease), box-shadow .4s;
}
.tc-carrera:nth-child(-n+2) { grid-column: span 3; min-height: 450px; }
.tc-carrera:hover { transform: translateY(-8px); box-shadow: var(--sombra-l); }
.tc-carrera:focus-within { outline: 3px solid var(--naranja); outline-offset: 3px; }

.tc-carrera__img {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease);
}
.tc-carrera:hover .tc-carrera__img { transform: scale(1.08); }

.tc-carrera::before {                          /* degradado azul desde abajo para leer el texto */
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(180deg, rgba(13, 26, 51, .05) 0%, rgba(13, 26, 51, .5) 45%, rgba(13, 26, 51, .94) 100%);
}
.tc-carrera::after {                           /* al pasar el mouse el velo vira al naranja */
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(241, 155, 36, .08) 0%, rgba(190, 119, 20, .55) 40%, rgba(112, 62, 4, .95) 100%);
    opacity: 0;
    transition: opacity .5s;
}
.tc-carrera:hover::after,
.tc-carrera:focus-within::after { opacity: 1; }

.tc-carrera__contenido {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 12px;
    width: 100%;
    padding: clamp(24px, 3vw, 36px);
    text-align: left;
}
.tc-carrera__contenido::before {               /* filete naranja sobre el título */
    content: '';
    width: 44px;
    height: 5px;
    margin-bottom: 4px;
    background: var(--naranja);
    border-radius: 999px;
    transition: width .4s var(--ease), background .4s;
}
.tc-carrera:hover .tc-carrera__contenido::before { width: 76px; background: #fff; }

.tc-carrera__titulo {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    font-weight: 800;
    line-height: 1.2;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .4);
}
.tc-carrera:nth-child(-n+2) .tc-carrera__titulo { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.tc-carrera__detalle { max-width: 44ch; line-height: 1.55; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }

.tc-carrera__boton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    margin-top: 8px;
    padding: 12px 24px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--azul);
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
    transition: background .25s, color .25s;
}
.tc-carrera__boton::after { content: ''; position: absolute; inset: 0; }   /* toda la tarjeta es clickeable */
.tc-carrera__boton i { font-size: .8em; transition: transform .25s var(--ease); }
.tc-carrera:hover .tc-carrera__boton { color: var(--azul); background: var(--naranja); }
.tc-carrera:hover .tc-carrera__boton i { transform: translateX(6px); }

/* ---------- 3. Testimonios (título) ---------- */
.tc-testimonios__sub { font-style: italic; }

/* ---------- 4. Responsive ---------- */
@media (max-width: 1100px) {
    .tc-hero__grid { grid-template-columns: 1fr; max-width: 1400px; margin: 0 auto; padding: 0 24px; }
    .tc-hero__visual { max-width: 780px; }
    .tc-hero__visual::before { inset: 22px -20px -20px 22px; border-right: 3px solid var(--naranja); border-radius: 40px 40px 40px 150px; }
    .tc-hero__foto { height: auto; aspect-ratio: 16 / 10; border-right: 1px solid rgba(255, 255, 255, .28); border-radius: 40px 40px 40px 150px; }
    .tc-hero__sello { right: 8px; }

    .tc-carreras__grid { grid-template-columns: repeat(2, 1fr); }
    .tc-carrera,
    .tc-carrera:nth-child(-n+2) { grid-column: auto; min-height: 400px; }
    .tc-carrera:last-child { grid-column: 1 / -1; }

}

@media (max-width: 767px) {
    .tc-hero,
    .tc-carreras { --solape: 40px; }
    .tc-hero { padding-top: 44px; }
    .tc-hero__foto { aspect-ratio: 4 / 3; border-radius: 28px 28px 28px 90px; }
    .tc-hero__visual::before { inset: 16px -10px -14px 16px; border-radius: 28px 28px 28px 90px; }
    .tc-hero__sello { top: -22px; width: 68px; height: 68px; font-size: 1.6rem; border-width: 4px; }

    .tc-ventajas { grid-template-columns: 1fr; }
    .tc-ventajas li { justify-content: flex-start; padding: 20px 24px; }
    .tc-ventajas li + li { border-top: 1px solid rgba(255, 255, 255, .12); border-left: 0; }

    .tc-carreras__grid { grid-template-columns: 1fr; gap: 20px; }
    .tc-carrera,
    .tc-carrera:nth-child(-n+2) { min-height: 360px; }
    .tc-carrera:last-child { grid-column: auto; }
    .tc-carrera:hover { transform: none; }
    .tc-carrera:nth-child(-n+2) .tc-carrera__titulo { font-size: 1.4rem; }


}

@media (prefers-reduced-motion: reduce) {
    .tc-hero__sello { animation: none; }
    .tc-carrera:hover,
    .tc-carrera:hover .tc-carrera__img { transform: none; }
}