:root{
  --radius: 14px;
}
html{scroll-behavior:smooth}
body{
  font-feature-settings: "liga","kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.navbar-brand{letter-spacing:.5px}
.hero-card{border-radius: var(--radius)}
.border-bottom{border-color:#eee!important}
section{scroll-margin-top: 80px}

/* Timeline sencilla */
.timeline {
  position: relative;
  margin-left: 1rem;
  padding-left: 1.5rem;
  border-left: 2px solid rgba(255,255,255,.3);
}
.timeline-item { position: relative; padding: .5rem 0 .5rem 0; }
.timeline-year { font-weight: 700; opacity: .9; padding-left: 10px;}
.timeline-dot {
  position: absolute; left: -9px; top: 16px;
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: 2px solid rgba(0,0,0,.2);
}
.timeline-text { opacity: .85; }

/* Collage — mesa con solape + sombras direccionales (60% size) */
.collage--ribbon{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: clamp(6px, .8vw, 12px);
  width:100%;
  min-height: clamp(252px, 30vw, 384px);  /* era 420/50vw/640 → 60% */
  padding-block: clamp(6px, .8vw, 12px);
}

.collage-item{
  /* 60% del tamaño anterior */
  height: clamp(168px, 21.6vw, 312px);     /* era 280/36vw/520 */
  width:auto;                               /* respeta proporción real */
  max-width: 22.8vw;                        /* era 38vw → 60% */
  border-radius: calc(var(--radius) + 10px);
  object-fit: cover;                         /* recorte moderado */
  box-shadow: 0 8px 22px rgba(0,0,0,.12);    /* sombra base */
  outline: 0;                                /* limpio, sin marco */
  position: relative;
}

/* solape y “levantadas por una esquina” */
.collage-1{
  transform: rotate(-1.6deg) translateY(2%);
  margin-right: -4%;
  z-index: 1;
  filter: drop-shadow(-10px 14px 18px rgba(0,0,0,.18)); /* levanta esquina izq. */
}
.collage-2{
  transform: rotate(1.3deg);
  margin-left: -4%;
  margin-right: -4%;
  z-index: 2; /* arriba */
  filter: drop-shadow(16px 20px 28px rgba(0,0,0,.22));  /* levanta esquina dcha. */
}
.collage-3{
  transform: rotate(-0.7deg) translateY(4%);
  margin-left: -4%;
  z-index: 1;
  filter: drop-shadow(10px 14px 18px rgba(0,0,0,.18)); /* levanta esquina izq. */
}

/* Tablet */
@media (max-width: 991.98px){
  .collage-item{
    height: clamp(156px, 26.4vw, 276px);   /* era 260/44vw/460 → 60% */
    max-width: 27.6vw;                     /* era 46vw → 60% */
  }
  .collage-2{ margin-left:-3.5%; margin-right:-3.5%; }
}

/* Móvil: apilado sin solape ni sombras pesadas */
@media (max-width: 575.98px){
  .collage--ribbon{
    flex-direction: column;
    gap: 12px;
    min-height: auto;
    padding-block: 0;
  }
  .collage-item{
    height:auto; width:100%; max-width:100%;
    transform:none !important;
    margin:0; z-index:0;
    box-shadow: 0 10px 20px rgba(0,0,0,.10);
    filter:none;
  }
}

/* ===== Mejora de modal y vista previa para evitar scroll general ===== */
.modal .box{
  max-height:88vh;              /* un pelín más alta */
  padding:14px;                 /* menos padding para ganar espacio */
}

/* El contenido de la vista previa tendrá su propio scroll,
   así no empuja hacia abajo el bloque de contacto */
#preview-contenido{
  max-height:40vh;
  overflow:auto;
  margin-bottom:10px;
  border:1px solid var(--line);
  border-radius:12px;
}

/* En móviles, recorta un poco más la vista previa */
@media (max-width:720px){
  #preview-contenido{ max-height:34vh; }
}

/* ===== Estilos específicos para el input de archivo ===== */
input[type="file"]{
  display:block;
  width:100%;
  padding:8px 10px;   
  border:1px solid #dfe3ef;
  border-radius:10px;
  font-size:14px;
  background:#fff;
  color:var(--ink);
}

input[type="file"]:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(90,45,244,.15);
}


.label-file{ display:block; font-weight:600; margin-bottom:6px; }