/* ====== TIPOGRAFÍA (opcional corporativa) ====== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');

body,
.navbar,
.navbar * {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .2px;
}

/* ====== HERO VIDEO CARRUSEL ====== */
#hero-video {
  position: relative;
  overflow: hidden;
  background: #000;
}

/* Pila de videos ocupando todo el header */
#videoCarousel {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Videos full-bleed con fade (usa clase .active) */
#videoCarousel .hero-video-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease;
  pointer-events: none;
}

#videoCarousel .hero-video-item.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Overlay centrado con leve oscurecido */
#hero-video .hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 1rem;
  background: rgba(0, 0, 0, .35);
  z-index: 3;
}

/* Indicadores (dots) centrados abajo */
#hero-video .hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 4;
  padding: 0 1rem;
}

/* Botoncitos circulares mejorados */
#hero-video .hero-dot {
  position: relative;
  /* para el ::after */
  appearance: none;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  opacity: .85;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  transition: transform .2s ease, background-color .2s ease, opacity .2s ease, box-shadow .2s ease;
}

/* Área clickeable ampliada */
#hero-video .hero-dot::after {
  content: "";
  position: absolute;
  inset: -8px;
}

#hero-video .hero-dot:hover {
  transform: scale(1.12);
  opacity: 1;
}

#hero-video .hero-dot.active {
  background: #fff;
}

#hero-video .hero-dot:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .45);
}

/* Accesibilidad: reducir animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  #videoCarousel .hero-video-item {
    transition: none;
  }
}

/* Ajustes responsive (si usabas títulos) */
@media (max-width: 576px) {
  #hero-video .hero-overlay h1 {
    font-size: 1.75rem;
  }

  #hero-video .hero-overlay .lead {
    font-size: 1rem;
  }
}

/* ====== NAVBAR ( igual a CTA "Sobre mí") ====== */
.navbar {
  background-color: #111 !important;
}

.navbar-brand {
  font-weight: 600;
  font-size: 1.50rem;
}

/* texto de todos los ítems igual y un poco más grande */
.navbar .nav-link {
  color: #6c757d !important;
  /* blanco sobre fondo oscuro */
  font-size: 1.12rem;
  /* más grande */
  font-weight: 500;
  letter-spacing: .2px;
  transition: color .2s ease;
}

/* hover/activo con el mismo gris del btn-outline-secondary */
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: #ffffff !important;
  /* gris "secondary" del CTA Sobre mí */
  text-decoration: none;
}
/* === Sección Cómo trabajo (scoped) === */
#como-trabajo .feature-icon{
  width: 64px; height: 64px; object-fit: contain;
  filter: none; /* aseguramos color original navy */
}
@media (min-width: 992px){
  #como-trabajo .feature-icon{ width:72px; height:72px; }
}

/* ==== Flip cards ==== */
.flip-card {
  perspective: 1000px;
  cursor: pointer;
  outline: none;
}
.flip-inner {
  position: relative;
  width: 100%;
  height: 240px; /* ajustá altura según necesidad */
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}
.flip-card:hover .flip-inner,
.flip-card:focus-within .flip-inner {
  transform: rotateY(180deg);
}
.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  background: #fff;
}
.flip-back {
  transform: rotateY(180deg);
}
.feature-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
/* === HERO a altura de pantalla (restando navbar) === */
:root { --nav-h: 72px; }  /* ajustá a 68–80 según tu navbar real */

#hero-video,
#hero-video .carousel,
#hero-video .carousel-inner,
#hero-video .carousel-item {
  height: calc(100vh - var(--nav-h));
  min-height: 520px; /* opcional para desktop */
}

/* el video llena el slide sin deformarse */
#hero-video video.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* centra el texto/CTA del hero verticalmente */
#hero-video .carousel-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
  padding: 0 1.25rem;
}

/* oscurecido leve para mejorar lectura del texto */
#hero-video .carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 576px) {
  :root { --nav-h: 64px; }  /* navbar un poco más bajo en mobile */
  #hero-video,
  #hero-video .carousel,
  #hero-video .carousel-inner,
  #hero-video .carousel-item {
    min-height: 430px;
  }
}
/* Que los controles e indicadores queden por encima de la caption */
#hero-video .carousel-control-prev,
#hero-video .carousel-control-next,
#hero-video .carousel-indicators { z-index: 5; }

/* La caption no bloquea clics, salvo sus propios botones/enlaces */
#hero-video .carousel-caption { pointer-events: none; }
#hero-video .carousel-caption a,
#hero-video .carousel-caption button { pointer-events: auto; }

#video-1 {
  object-position: center 20%; /* mueve el foco hacia abajo */
}
/* Íconos opcionales en áreas (coherentes con los de “Cómo trabajo”) */
.area-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
@media (min-width: 992px) {
  .area-icon {
    width: 72px;
    height: 72px;
  }
}

/* Espaciado entre secciones */
#areas-practica {
  margin-top: 3rem; /* antes 7rem: más cerca del navbar */
}

#presentacion {
  margin-top: 4rem;
}

#como-trabajo {
  margin-top: 4rem;
}

/* ------------------------------
   Animación título "Áreas de práctica"
--------------------------------*/

#areas-practica .areas-title {
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.6s ease-out;
}

#areas-practica .text-center.aos-animate .areas-title {
  opacity: 1;
  transform: translateY(0);
}

/* Subrayado animado del título */

#areas-practica .areas-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 3px;
  background-color: #198754; /* mismo verde btn-success, igual al modelo */
  transition: width 0.6s ease-out 0.3s;
}

#areas-practica .text-center.aos-animate .areas-title::after {
  width: 100%;
}

/* ------------------------------
   Animación subtítulo
--------------------------------*/

#areas-practica .areas-subtitle {
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.6s ease-out 0.15s; /* entra apenas después del título */
}

#areas-practica .text-center.aos-animate .areas-subtitle {
  opacity: 1;
  transform: translateY(0);
}
/* ----------------------------------------
   Cards de práctica (hover)
-------------------------------------------*/

.card-practica {
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
  background-color: #ffffff;
}

.card-practica:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  border-color: inherit;
  background-color: #fcfcfc;
}

.icon-practica {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin: 1.5rem auto 0;
  display: block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.card-practica:hover .icon-practica {
  transform: scale(1.06);
  opacity: 0.95;
}

.card-practica .card-body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.card-practica .card-title {
  margin-bottom: 0.5rem;
}

.card-practica .card-text {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ----------------------------------------
   CTA animado (línea que se dibuja)
-------------------------------------------*/

.cta-line-wrapper {
  display: inline-block;
}

.cta-line {
  position: relative;
  display: inline-block;
  font-size: 0.95rem;
  text-decoration: none;
  color: inherit;   /* mismo color del texto */
  padding-bottom: 4px;
}

.cta-line .line {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0%;
  background: currentColor;   /* MISMO color del texto */
  transition: width 0.3s ease;
}

/* línea se dibuja al hacer hover en la CARD */
.card-practica:hover .cta-line .line {
  width: 100%;
}
.testimonial-card {
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.testimonial-quote {
  font-size: 1rem;
  line-height: 1.6;
  font-style: italic;
}

.testimonial-author {
  font-size: 0.95rem;
  margin-top: 0.5rem;
  color: #6c757d;
}
/* ---------- Testimonios: controles ---------- */
.custom-control {
  width: 45px;
  height: 45px;
  background: rgba(0, 0, 0, 0.08);
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: 0.2s ease;
  z-index: 5;
}

.custom-control:hover {
  background: rgba(0, 0, 0, 0.15);
}

.carousel-control-prev.custom-control {
  left: -20px; /* ajustá si querés separarlo más o menos */
}

.carousel-control-next.custom-control {
  right: -20px;
}

.custom-arrow {
  font-size: 1.4rem;
  color: #333;
  line-height: 1;
  font-weight: 600;
}
/* ============================
   FOOTER – iconos de redes
============================ */

footer .footer-social-link .bi {

  transition:
    color .25s ease,
    text-shadow .25s ease,
    transform .25s ease;
}

footer .footer-social-link:hover .bi {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}
/* Botón flotante — Volver arriba */
.btn-top {
  position: fixed;
  bottom: 90px;         /* un poco arriba del footer */
  left: 50%;            /* CENTRADO */
  transform: translateX(-50%);
  z-index: 999;
  background: #79757573;  /* mismo color que el footer */
  color: #fff;
  border: 1px  #7a797981;
  padding: 10px 14px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.3rem;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.btn-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1.05);
}

.btn-top:hover {
  background: #333;
  transform: translateX(-50%) scale(1.12);
}
/* ===============================
   NAVBAR – subrayado animado
================================*/

.navbar-nav .nav-link {
  position: relative;
  padding-bottom: 4px;
  transition: color .25s ease;
}

/* línea oculta inicialmente */
.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 0%;
  height: 2px;
  background: #eef0efe3;     /* mismo verde de tus cards */
  box-shadow: 0 0 6px#eef0efe3;
  transition: width .30s ease, box-shadow .3s ease;
}

/* al pasar el mouse */
.navbar-nav .nav-link:hover::after {
  width: 100%;
  box-shadow: 0 0 10px #eef0efe3;
}

/* cuando el link está activo */
.navbar-nav .nav-link.active::after {
  width: 100%;
  box-shadow: 0 0 10px #eef0efe3;
}/* ------------------------------
   Animación combinada para el título "Preguntas frecuentes"
--------------------------------*/

/* Estado inicial del título */
#preguntas .preguntas-title {
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.6s ease-out;
}

/* Activación por AOS */
#preguntas .text-center.aos-animate .preguntas-title {
  opacity: 1;
  transform: translateY(0);
}

/* Subrayado animado (mismo verde #198754) */
#preguntas .preguntas-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 3px;
  background-color: #198754; /* mismo verde del botón y del sobre mí */
  transition: width 0.6s ease-out 0.3s;
}

#preguntas .text-center.aos-animate .preguntas-title::after {
  width: 100%;
}

/* ------------------------------
   Animación del subtítulo / texto
--------------------------------*/

#preguntas .preguntas-subtitle {
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.6s ease-out 0.15s;
}

#preguntas .text-center.aos-animate .preguntas-subtitle {
  opacity: 1;
  transform: translateY(0);
}
/* ------------------------------
   Animación para el título Contacto
--------------------------------*/

#contacto .contacto-title {
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.6s ease-out;
}

/* Cuando AOS activa la sección */
#contacto .bg-white.aos-animate .contacto-title {
  opacity: 1;
  transform: translateY(0);
}

/* Subrayado animado */
#contacto .contacto-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 3px;
  background-color: #198754; /* mismo verde */
  transition: width 0.6s ease-out 0.3s;
}

#contacto .bg-white.aos-animate .contacto-title::after {
  width: 100%;
}

/* ------------------------------
   Animación subtítulo
--------------------------------*/

#contacto .contacto-subtitle {
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.6s ease-out 0.15s;
}

#contacto .bg-white.aos-animate .contacto-subtitle {
  opacity: 1;
  transform: translateY(0);
}
.foto-about {
  width: 100%;
  max-width: 260px;     /* tamaño perfecto para la tarjeta */
  border-radius: 16px;  /* borde moderno */
  object-fit: cover;
  object-position: center;
  box-shadow: 0 3px 14px rgba(0,0,0,0.10);
  filter: none;         /* SIN filtros que arruinen la foto */
  transition: transform .3s ease, box-shadow .3s ease;
}

.foto-about:hover {
  transform: scale(1.015);
  box-shadow: 0 5px 18px rgba(0,0,0,0.18);
}
@media (hover: none) {
  .flip-card.flip-mobile .flip-inner {
    transform: rotateY(180deg);
  }
}