/* ============================================================
   FOTOGRAFÍA — RESTAURADA Y BLINDADA
   ============================================================ */
body.fotografia-page {
  background: #000;
  font-family: 'Urbanist', sans-serif;
  color: #fff;
  overflow-x: hidden;
}

/* ====== SECCIÓN EDITORIAL (Slideshow 16:9) ====== */
.editorial {
  position: relative;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(3rem, 8vw, 4rem) 0;
  overflow: hidden;
  z-index: 1;
}

.editorial .slideshow {
  position: relative;
  width: min(92vw, 1200px);
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 35px rgba(0,0,0,.6);
}

.editorial .slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
}

.editorial .slideshow img.active {
  opacity: 1;
  z-index: 1;
}

/* ====== TÍTULO VERTICAL ====== */
.editorial h2 {
  position: absolute;
  left: calc(50% - min(600px, 46vw)); /* margen izquierdo del slideshow */
  top: 50%;                          /* centrado vertical */
  transform: translateY(-50%) rotate(180deg);
  transform-origin: center;
  writing-mode: vertical-rl;

  /* evita salto de línea */
  white-space: nowrap;

  /* estilo visual */
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 2.8rem + 1vw, 3.3rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 0 8px rgba(255,255,255,0.25);
  margin: 0;
  z-index: 2;
  pointer-events: none;
}


/* ====== SECCIÓN ÁLBUM (Carrusel horizontal) ====== */
.album {
  position: relative;
  background: #000;
  color: #fff;
  padding: clamp(2.5rem, 7vw, 3rem) 0 5rem;
  text-align: center;
  overflow: hidden;
  z-index: 1;
  isolation: isolate;
}
.album h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2.7rem, 2.5rem + 1vw, 3.0rem);
  font-weight: 700;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.album .viewport {
  position: relative;
  width: min(1200px, 92vw);
  height: min(70vh, 78svh);
  margin: 0 auto;

  /* ✅ permitir desplazamiento horizontal con touchpad/gesto */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;  /* inercia en iOS */

  scroll-snap-type: x mandatory;
  display: flex;
  scroll-behavior: smooth;

  /* ocultar barra sin desactivar scroll */
  scrollbar-width: none;
}
.album .viewport::-webkit-scrollbar { display: none; }

.album .track {
  display: flex;
  gap: 2rem;
  align-items: center;
  height: 100%;
  will-change: transform;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.album figure {
  position: relative;
  flex: 0 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.album figure:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 35px rgba(0,0,0,.65);
}
.album figure img {
  height: 100%;
  width: auto;
  max-height: 65vh;
  border-radius: inherit;
  object-fit: contain;
}

/* Orientaciones (compatibles con mayúsculas de tu HTML) */
.album figure.horizontal img,
.album figure.Horizontal img { max-width: 60vw; }

.album figure.vertical img,
.album figure.Vertical img { max-width: 35vw; max-height: 70vh; }

.album figure.square img,
.album figure.Square img   { max-width: 45vw; max-height: 65vh; }

/* Overlay / leyendas */
.album figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 85%);
  opacity: 0;
  transition: opacity .25s ease;
}
.album figure:hover figcaption { opacity: 1; }
.album .badge {
  background: rgba(0,0,0,.35);
  padding: .25rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(2px);
  margin-right: .4rem;
}

/* Navegación (arreglado padding y bloque completo) */
.album .nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;                 /* ← antes estaba truncado */
}
.album button.arrow {
  pointer-events: auto;
  cursor: pointer;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.album button.arrow:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.45);
  transform: scale(1.05);
}
.album button svg { width: 22px; height: 22px; stroke: #fff; }
.album .counter {
  position: absolute;
  bottom: 10px; right: 14px;
  font-size: .85rem;
  color: rgba(255,255,255,.7);
}

/* Responsivo álbum */
@media (max-width: 820px){
  .album .track{ gap: 1.2rem; }
  .album figure{ border-radius: 12px; }
  .album figure.horizontal{ width: 90vw; }
  .album figure.vertical  { width: 60vw; }
  .album figure.square    { width: 75vw; }
}

/* ============================================================
   GENERALES — base común del sitio (seguro para Fotografía)
   ============================================================ */

:root{
  --brand-yellow: #FFEE58;
  --fg: #111;
  --bg: #fff;
}

/* Tipografía y reset suave */
html, body { margin:0; padding:0; overflow-x:hidden; }
body{
  font-family: 'Urbanist', sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.6;
  cursor: url("images/cursor_lorena_minimal_24.png") 2 2, auto;
  padding-top: 90px; /* para header fijo */
}

/* ===== HEADER FIJO ===== */
#main-header{
  position: fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; justify-content:space-between; align-items:center;
  padding: 1.2rem 2rem;
  font-size: 1.2rem;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(5px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease, opacity .25s ease;
  opacity:1; transform: translateY(0);
}
#main-header.hide{ transform: translateY(-100%); opacity:1; pointer-events:none; }
header.solid{ background: rgba(255,255,255,0.95); box-shadow: 0 3px 12px rgba(0,0,0,0.10); }

.logo{
  margin:0;
  font-weight:700; font-size:2rem; letter-spacing:1px;
  font-family:'Urbanist', sans-serif;
  color: #000 !important;

}

/* Navegación (desktop) */
#primary-nav a{
  margin-left:1.5rem; text-decoration:none; color:#333; font-weight:700; display:inline-block;
  transition: transform .3s ease, color .3s ease;
}
#primary-nav a:hover{ color:#000; transform: scale(1.08); }

/* Botón CTA en header */
.btn-contacto{
  padding:.6rem 1.2rem; border:1.5px solid #111; border-radius:6px; margin-left:1.5rem;
  font-weight:bold; display:inline-block;
  transition: all .3s ease;
  background-color: var(--brand-yellow); color:#000;
}
.btn-contacto:hover{
  background:#111; color:#fff; transform: scale(1.08);
  color: #fff !important;  /* fuerza el texto blanco */
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* ===== HEADER móvil (≤ 899.98px) ===== */
@media (max-width: 899.98px){

  #main-header{
    position: sticky; top:0; z-index:100;
    display:grid !important;
    grid-template-columns: 1fr auto;
    grid-auto-rows: min-content;
    align-items:center;
    padding:12px 16px;
    background:#fff;
    border-bottom:none; /* sin línea que se quedaba colgando */
  }

  #main-header .logo{
    margin:0; line-height:1.1; font-weight:700; font-size:0;
    white-space:nowrap; color:transparent; position:relative;
  }
  #main-header .logo::before{
    content:"Lorena Gómez";
    font-size:1.06rem; font-weight:700; color:#111; position:absolute; inset:0;
  }

  .menu-toggle{
    justify-self:end;
    appearance:none; border:0; background:transparent; cursor:pointer;
    line-height:1; padding:6px 8px; margin:0;
    font-weight:800; font-size:1.9rem; color:#FFC300;
  }
  .menu-toggle:focus-visible{ outline:2px solid #FFC300; outline-offset:2px; }
  .menu-toggle[aria-expanded="true"] .menu-icon{ display:none; }
  .menu-toggle[aria-expanded="true"]::after{ content:"×"; }

  #primary-nav{
    grid-column: 1 / -1;
    overflow:hidden;
    max-height:0;
    transition:max-height .35s ease;
    width:100%;
    text-align:center;
    border-bottom:none; /* sin línea final */
    margin-top: 6%;
    margin-bottom: 6%;
  }

  /* enlaces normales */
  #primary-nav a{
    display:block;
    padding:12px 16px;
    text-decoration:none;
    color:#111;
    font-weight:600;
    border-top:1px solid #f5f5f5;
  }
  #primary-nav a:first-of-type{ border-top:none; }

  /* botón contacto igual al menú anterior */
  #primary-nav .btn-contacto{
    display:inline-block;
    background:#FFEE58;
    color:#000;
    border:1px solid #000;
    border-radius:6px;
    padding:0.55rem 1.2rem;
    margin-top:0.7rem;
    margin-bottom: 0.1rem;
    font-size:1rem;
    font-weight:600;
    letter-spacing:0.05em;
    border-top:1px solid #000000; /* separador justo antes */
  }
  #primary-nav .btn-contacto:hover{
    background:#ffe02f;
    transform:scale(1.04);
  }
}

/* mostrar el nav cuando aria-expanded="true" */
.menu-toggle[aria-expanded="true"] + #primary-nav{
  max-height:600px;
}

/* Escritorio: oculta botón */
@media (min-width:900px){
  #main-header .menu-toggle{ display:none; }
}

/* ===== PRELOADER ===== */
#preloader{
  position: fixed; inset:0; z-index:9999;
  display: grid; place-items: center;
  background: #000; transition: opacity .6s ease, visibility .6s ease;
}
#preloader.hide{ opacity: 0; visibility: hidden; pointer-events: none; }
.dots{ display: inline-flex; gap: .6rem; }
.dot{
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--brand-yellow);
  transform: scale(0.6);
  animation: dotPulse 1s infinite ease-in-out;
}
.dot:nth-child(2){ animation-delay: .15s; }
.dot:nth-child(3){ animation-delay: .3s; }
@keyframes dotPulse{
  0%, 80%, 100% { transform: scale(0.6); opacity: .6; }
  40% { transform: scale(1); opacity: 1; }
}

/* Texto accesible oculto visualmente */
.sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* Accesibilidad: menos movimiento */
@media (prefers-reduced-motion: reduce){
  .dot{ animation: none; }
  #preloader{ transition: none; }
}

/* ===== Footer genérico ===== */
footer{
  text-align:center; padding:1.5rem; background:#000000;
  font-size:.9rem; color:#ffffff;
}

/* Utilidades */
a{ color: inherit; }
img{ max-width:100%; height:auto; display:block; }
.container{ max-width:1100px; margin:0 auto; padding:0 20px; }


/* Lightbox */
.lightbox{
  position: fixed; inset: 0;
  display: none;            /* se activa con .open */
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.88);
  z-index: 2147483000;
  padding: 4vh 4vw;
}
.lightbox.open{ display: flex; }

.lightbox-img{
  max-width: min(1200px, 92vw);
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  object-fit: contain;
}

.lightbox-close{
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.45);
  color: #fff; font-size: 28px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.lightbox-close:hover{
  transform: scale(1.05);
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.6);
}

/* Evita que el título vertical tape gestos/clic (ya lo tienes en muchos sitios, lo recuerdo) */
.album > h2{ pointer-events: none; }

/* Deja pasar los clics a la imagen */
.album figcaption { pointer-events: none; }

/* === REDES CONTACTO (iconos SVG integrados) === */
.redes-contacto {
  margin-top: 3rem;
  text-align: center;
  font-size: 1rem;
  color: #ffffff;
  background: transparent;
}

.redes-contacto p {
  margin-bottom: 1rem;
  font-weight: 500;
}

.iconos-redes {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.iconos-redes a svg {
  transition: transform 0.25s ease, stroke 0.25s ease;
  opacity: 0.85;
  stroke: #fff;           /* trazo claro */

}

.iconos-redes a:hover svg {
  transform: scale(1.15);
  stroke: #ffffff;
  opacity: 1;
}

/* ===== IA Zigzag ===== */
.ia-zigzag{
  position: relative;
  background:#000;
  color:#fff;
  overflow: hidden;
  /* “de una en una” al hacer scroll */
  scroll-snap-type: y mandatory;
}
.ia-zigzag .ia-title{
  font-family: 'Orbitron', sans-serif;
  font-size: 52px;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  color:#fff;
}

.ia-shot{
  position: relative;
  min-height: 100svh;                 /* pantalla completa */
  display: flex;
  align-items: center;
  justify-content: flex;        /* por defecto: imagen a la izq */
  padding: clamp(4px, 0.5vw, 8px) clamp(16px, 2.5vw, 28px);
  scroll-snap-align: start;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
  isolation: isolate;
  margin-bottom: 2%;
}
.ia-shot.is-in{ opacity:1; transform: translateY(0); }

.ia-shot img{
  width: min(75vw, 1200px);
  height: 86svh;              /* o 90svh / 100svh */
  object-fit: contain;        /* ajusta sin cortar */
  object-position: center top;
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0,0,0,.65);
  display: block;
}


/* Lado contrario para la tarjeta */
.ia-card{
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: clamp(260px, 24vw, 420px);
  background:#fff;
  color:#111;
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  border: 1px solid rgba(0,0,0,.06);

  /* Estado oculto por defecto */
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

/* IZQUIERDA: tarjeta sale a la derecha */
.ia-shot.left .ia-card{
  right: clamp(16px, 3vw, 32px);
  transform: translateX(16px);
}

/* DERECHA: imagen al borde dcho, tarjeta al izq */
.ia-shot.right{
  justify-content: flex-end;
}
.ia-shot.right img{
  /* mismo ancho; alinear al borde derecho por el flex */
}
.ia-shot.right .ia-card{
  left: clamp(16px, 3vw, 32px);
  transform: translateX(-16px);
}

/* Mostrar tarjeta en hover/focus */
.ia-shot:hover .ia-card,
.ia-shot:focus-within .ia-card,
.ia-shot.show-card .ia-card{
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Detalles de la tarjeta */
.ia-card h3{
  margin:0 0 .4rem 0;
  font-weight: 800;
  font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem);
  font-family: 'Orbitron', sans-serif;

}
.ia-card .prompt{
  margin:.15rem 0 .65rem 0;
  font-family: 'Urbanist', sans-serif;
  font-size:1.1rem;
  line-height:1.45;
  text-align: justify;
}
.ia-card .meta{
  list-style: none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.45rem .6rem;
  font-size:.85rem; color:#333;
}
.ia-card .meta li{
  background:#f6f6f6; border:1px solid #eee; border-radius:999px; padding:.18rem .6rem;
}

/* Acento de marca */
.ia-card h3::after{
  content:""; display:inline-block; width:.55rem; height:.55rem; margin-left:.4rem;
  background:#FFEE58; border-radius:2px; vertical-align: middle;
}

/* Responsivo */
@media (max-width: 900px){
  .ia-shot{
    padding: 14px;
  }
  .ia-shot img{
    width: 92vw;                       /* que respire más en móvil */
    max-height: 70svh;
    border-radius: 12px;
  }
  .ia-card{
    position: static;                   /* debajo de la imagen */
    translate: 0 0;
    width: auto;
    margin-top: .8rem;
    opacity: 1;                         /* siempre visible en móvil */
    transform: none !important;
    pointer-events: auto;
  }
}

/* Accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce){
  .ia-shot{ transition: none; }
  .ia-card{ transition: none; }
}

/* ===== IA Zigzag — multi toma dentro de un shot ===== */
.ia-shot .ia-frame{
  position: relative;
  width: min(75vw, 1200px);
  max-height: 86svh;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,.65);
}

.ia-shot .stack{
  position: relative;
  width: 100%; height: 100%;
}

.ia-shot .stack img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transform: scale(1.01);
  transition: opacity .35s ease, transform .35s ease;
}
.ia-shot .stack img.is-active{
  opacity: 1; transform: scale(1);
  position: absolute;
}

/* Flechas */
.ia-shot .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
  pointer-events: auto;
  line-height: 0.8; /* sube un poco el símbolo */
}

.ia-shot .nav:hover {
  transform: translateY(-50%) scale(1.06);
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .6);
}

.ia-shot .nav.prev { left: 10px; }
.ia-shot .nav.next { right: 10px; }

/* Contador */
.ia-shot .count{
  position: absolute; bottom: 10px; right: 12px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.35);
  color:#fff; font-size:.85rem;
  padding:.25rem .55rem; border-radius: 999px;
}

/* Mostrar controles solo cuando hay varias (o siempre en touch) */
.ia-shot.has-multi .nav,
.ia-shot.has-multi .count{ opacity: .95; }

/* En móvil: que todo se adapte */
@media (max-width:900px){
  .ia-shot .ia-frame{
    width: 92vw; max-height: 70svh; border-radius: 12px;
  }
  .ia-shot .nav{ width: 40px; height: 40px; font-size: 18px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .ia-shot .stack img{ transition: none; }
  .ia-shot .nav{ transition: none; }
}

.ia-shot .ia-frame{
  position: relative;
  width: min(75vw, 1200px);
  aspect-ratio: 16 / 10;   /* o 4/5, 3/2… la que use tu serie */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,.65);
}
@media (max-width:900px){
  .ia-shot .ia-frame{
    width: 92vw;
    aspect-ratio: 4 / 5;  /* por ejemplo más vertical en móvil */
    border-radius: 12px;
  }
}

/* Aplica el hover solo en dispositivos que soportan hover real */
@media (hover:hover){
  .ia-shot:hover .ia-card{
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
}

/* Si el foco te la deja clavada, puedes quitarlo: */
.ia-shot:focus-within .ia-card{
  /* comenta si no quieres que el foco mantenga la tarjeta visible */
  /* opacity: 1; transform: translateX(0); pointer-events:auto; */
}

/* === Efecto máquina: cursor solo en la línea activa, sin residuos === */
.typewriter{
  max-width: 110ch;
  margin: 0 auto;
  text-align: center;
}

.tw-line{
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1rem, .95rem + .25vw, 1.15rem);
  color: #ffffff;
  line-height: 1.6;
  display: block;         /* punto y aparte real */
  margin-bottom: 1rem;
  /* CANCELA cualquier resto anterior */
  border-right: 0 !important;
  animation: none !important;
  position: relative;
}

/* Cursor solo cuando la línea está activa */
.tw-line.cursor::after{
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #ffffff;
  margin-left: 2px;
  animation: caret-blink .9s step-end infinite;
  vertical-align: -0.15em; /* ajusta a tu gusto */
}

@keyframes caret-blink { 50% { opacity: 0; } }

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .tw-line.cursor::after { animation: none; }
}

/* Estado inicial: oculto + leve desplazamiento */
.album .album-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

/* Al entrar en viewport */
.album .album-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respeta usuarios que reducen animaciones */
@media (prefers-reduced-motion: reduce) {
  .album .album-reveal {
    transition: none;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* INICIO DE ABOUT */
/* ===== Trayectoria en S ===== */
.trayectoria-s{
  background:#000; color:#fff;
  padding: clamp(16px,3vw,24px) 0;
  margin-bottom: 20%;
}

.s-wrap{
  position: relative;
  width: 100%;
  height: min(1200px, 120svh); /* altura visible de la escena */
  overflow: visible;
}

.s-svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}

/* milestones (puntos + tarjeta) */
.milestone{
  position:absolute;
  transform: translate(-50%, -50%);
  opacity:0; filter: blur(6px);
  transition: opacity .4s ease, filter .4s ease, transform .25s ease;
  /* se recolocan por JS con top/left */
}

.milestone.visible{
  opacity:1; filter: blur(0);
}

/* Punto amarillo */
.milestone .dot{
  width:16px; height:16px; border-radius:999px;
  background:#FFEE58; box-shadow:0 0 0 0 rgba(255,238,88,.55);
  display:block; margin:auto;
  animation: pulseDot 1.3s ease-in-out infinite;
}
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(255,238,88,.55) }
  70%{ box-shadow:0 0 0 12px rgba(255,238,88,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,238,88,0) }
}

/* Tarjeta */
.milestone .card{
  margin-top: .65rem;
  background:#fff; color:#111;
  border-radius:14px;
  padding:.9rem 1rem;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  width: clamp(240px, 26vw, 360px);
}

.milestone .card h4{
  margin:0 0 .35rem 0; font-weight:800; font-size: clamp(1rem, .9rem + .4vw, 1.15rem);
}
.milestone .card h4::after{
  content:""; display:inline-block; width:.55rem; height:.55rem; margin-left:.4rem;
  background:#FFEE58; border-radius:2px; vertical-align:middle;
}
.milestone .card p{ margin:0; line-height:1.45; color:#333; }

/* alterna lado de las tarjetas automáticamente */
.milestone:nth-child(odd) .card{ transform: translateX(-8px) }
.milestone:nth-child(even) .card{ transform: translateX(8px) }

@media (max-width: 900px){
  .s-wrap{ height: 100svh; }
  .milestone .card{ width: min(80vw, 360px); }
}

.trayectoria-s { position: relative; z-index: 1; }
.about-hero    { position: relative; z-index: 2; }
.trayectoria-s .s-wrap { overflow: hidden; }

.about-hero .btn{
  background: var(--accent, #FFEE58);
  color: #111;
  border: 1px solid #E6D94E;
}
.about-hero .btn:hover{
  background: #f7e542;
  transform: translateY(-1.5px);
}
.about-hero .btn:active{
  background: #f0da2f;
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(255, 238, 88, .30) inset,
              0 4px 12px rgba(0,0,0,.15);
}
.about-hero .btn:focus-visible{
  outline: 2px solid #111;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px #FFEE58;
}

details{ border-top:1px solid rgba(0,0,0,.08); padding:.6rem 0 }
details:first-of-type{ border-top:0 }
summary{ cursor:pointer; font-weight:700; outline:none }
summary::-webkit-details-marker{ display:none }
summary::after{ content:"+"; float:right; transition: transform .2s ease }
details[open] summary::after{ content:"–" }
details p{ margin:.5rem 0 0 0; color:#333 }

/* ===== IG Clean Cards (sin iframes) ===== */
.ig-clean-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .9rem;
}

.ig-card{
  position:relative;
  aspect-ratio: 1 / 1;            /* cuadrado perfecto */
  border-radius:12px;
  overflow:hidden;
  background:#111;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

.ig-card img{
  width:100%; height:100%;
  object-fit: cover; display:block;
  filter: saturate(1.02) contrast(1.02);
  transition: transform .28s ease;
}

.ig-card a{
  position:absolute; inset:0; display:block; text-decoration:none;
}

.ig-card a::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,0));
  opacity:.0; transition: opacity .2s ease;
}

/* Badge con usuario */
.ig-badge{
  position:absolute; left:.55rem; bottom:.55rem;
  background: rgba(255,255,255,.95);
  color:#111; font-weight:800; font-size:.8rem;
  padding:.22rem .5rem; border-radius:999px;
  display:flex; align-items:center; gap:.35rem;
  opacity:0; transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.ig-badge svg{ width:14px; height:14px; }

.ig-card:hover img{ transform: scale(1.03); }
.ig-card:hover a::after{ opacity: 1; }
.ig-card:hover .ig-badge{ opacity:1; transform: translateY(0); }

/* Estado de carga / placeholder */
.ig-card .ph{
  position:absolute; inset:0; display:grid; place-items:center;
  color:#888; font-size:.9rem;
}

/* Responsive */
@media (max-width: 980px){
  .ig-clean-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .ig-clean-grid{ grid-template-columns: 1fr; }
}

/* Centrar botón de llamada a la acción */
.ig-follow {
  display: flex;
  justify-content: center;
  margin-top: 1.4rem;
  align-items: center;
  text-align: center;
}

.btn--accent {
  background: var(--accent);
  color: #000;
  font-weight: 700;
  transition: background .25s ease, color .25s ease, transform .15s ease;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.btn--accent:hover {
  background: #fff97a;
  transform: translateY(-1px);
}

/* ===== FAQ — Estética alineada (ajustada) ===== */
.faq-wrap{
  /* + ancho y sin solapar secciones */
  width: min(980px, 92vw);            /* antes: min(820px, 86vw) */
  margin-inline: auto;
  text-align: left;
  margin-top: 0%;                      /* antes: -21% (podía tapar otras secciones) */
  margin-bottom: 7%;
}

.faq-title{
  font-family: 'Urbanist', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .5px;
  font-size: clamp(1.8rem, 1.1rem + 2.2vw, 2.6rem);
  margin: 0 0 1rem 0;
  color: var(--fg);
}
.faq-title::after{
  content:""; display:inline-block; width:.6rem; height:.6rem; margin-left:.5rem;
  background: var(--accent); border-radius:2px; vertical-align: middle;
}

.faq-item{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1rem 0;                    /* un pelín más de aire vertical */
}
.faq-item:last-of-type{
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Pregunta */
.faq-item > summary{
  list-style: none;
  cursor: pointer;
  font-weight: 800;
  color: var(--accent);
  font-size: clamp(1.06rem, .98rem + .35vw, 1.28rem); /* muy leve + */
  outline: none;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.faq-item > summary::-webkit-details-marker{ display:none; }

/* Icono + / – */
.faq-item > summary::before{
  content: "+";
  display: inline-grid; place-items:center;
  width: 1.2rem; height: 1.2rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px;
  font-weight: 800; line-height: 1;
  color: #111; background: var(--accent);
  transform: translateY(-1px);
  transition: transform .15s ease;
}
.faq-item[open] > summary::before{ content: "–"; }

/* Respuesta */
.faq-item .answer{
  color: #fff;
  font-size: 1.02rem;
  line-height: 1.6;
  padding: .7rem 0 0 1.4rem;          /* menos sangrado izquierdo (antes 1.8rem) */
  max-width: 100ch;                    /* antes 65ch; hazlo 90ch o quítalo si quieres todo el ancho */
  /* si lo quieres ocupar TODO el ancho: comenta la línea de max-width */
}

/* Hover/focus accesible */
.faq-item > summary:hover{ opacity: .95; }
.faq-item > summary:focus-visible{
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
}

/* Móvil */
@media (max-width: 900px){
  .faq-wrap{ width: min(94vw, 800px); }
  .faq-item .answer{ max-width: 100%; padding-left: 1rem; }
}

/* ===== Certificados ===== */
.certificados{
  width: min(820px, 90vw);
  margin: clamp(40px, 6vh, 80px) auto;
  text-align: left;
  color: var(--fg);
  margin-top: -19%;
  margin-bottom: 8%;
}

.cert-title{
  font-family: 'Urbanist', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.3rem, 0.6.rem + 2vw, 1.9rem);
  margin-bottom: 1.8rem;
  letter-spacing: .5px;
  position: relative;
}

.cert-title::after{
  content:"";
  display:inline-block;
  width:.6rem;
  height:.6rem;
  margin-left:.5rem;
  background: var(--accent);
  border-radius:2px;
  vertical-align:middle;
}

.cert-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.2rem, 2vw, 2rem);
  align-items: center;
}

.cert-item{
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #111;
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  transition: transform .2s ease, background .2s ease;
}

.cert-item:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,.05);
}

.cert-logo{
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 8px;
  background: #fff;
  padding: 6px;
}

.cert-info h4{
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
}

.cert-info p{
  margin: 4px 0 0;
  color: #ccc;
  font-size: .95rem;
}

/* ===== Pilares — mismo ancho y título que el FAQ ===== */
.pilares { background:#000; color:var(--fg); }
.pilares-wrap{
  width: min(980px, 92vw); /* antes: min(980px, 92vw) */
  margin-inline: auto;
  text-align: left;
  margin-top: clamp(40px, 6vh, 80px);
  margin-bottom: clamp(40px, 6vh, 80px);
  margin-bottom: 5%;
}

/* Título calcado al de FAQ */
.pilares-title{
  font-family: 'Urbanist', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .5px;
  font-size: clamp(1.8rem, 1.1rem + 2.2vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 1rem 0;
  color: var(--fg);
}
.pilares-title::after{
  content:""; display:inline-block; width:.6rem; height:.6rem; margin-left:.5rem;
  background: var(--accent); border-radius:2px; vertical-align: middle;
}

/* Tarjetas */
.pilares-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(3rem, 2.5vw, 3rem); /* un poco más de aire entre ellas */
}

.pilar-box{
  background:#111;
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  padding: 2rem 2rem;
  transition: transform .25s ease, background .25s ease;
}
.pilar-box:hover{ transform: translateY(-4px); background: rgba(255,255,255,.05); }

.pilar-box h4{
  margin:0 0 .5rem 0;
  font-weight: 700;
  font-size: clamp(1.25rem, 1.15rem + .3vw, 1.4rem);
  letter-spacing:.3px;
  color: var(--accent);
  justify-self: center;
}
.pilar-box p{ margin:0; color:#e5e5e5; line-height:1.55; font-size:1rem; text-align: justify;}

@media (max-width: 900px){
  .pilares-wrap{ width: min(92vw, 720px); }
}

/* Espaciado entre párrafos dentro de cada pilar */
.pilar-box p + p {
  margin-top: 0.9rem;  /* separa el segundo párrafo = punto y aparte visual */
}

@media (max-width: 899.98px){
  body{
    padding-top: 0 !important;
  }
}

@media (max-width: 1024px){
  .editorial h2 {
    display: none !important;
  }
}

@media (max-width: 1024px){
  .editorial .slideshow{
    margin-top: 20px; /* ajusta entre 60–100px */
  }
}

/* ===== IA ZIGZAG — MÓVIL & TABLET ===== */
@media (max-width: 1024px){

  /* 1. Mejorar el título y la introducción */
  .ia-title,
  .typewriter {
    width: 90% !important;
    margin: 0 auto 2rem auto !important;
    text-align: center !important;
  }

  .ia-title {
    font-size: clamp(1.8rem, 1.6rem + 1vw, 2.2rem) !important;
    padding-top: 2rem;
  }

  .typewriter .tw-line {
    font-size: 1rem !important;
    line-height: 1.45 !important;
  }

  /* 2. Cada bloque se apila vertical */
  @media (max-width: 1024px){

  /* Apilar SIEMPRE imagen arriba + tarjeta abajo */
  .ia-shot {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 1rem !important;
    padding: 2.rem 0 !important;
  }

  /* Cancelar por completo el zigzag lateral */
  .ia-shot.left .ia-card,
  .ia-shot.right .ia-card {
    position: static !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }

  /* Imagen GRANDE arriba */
  .ia-frame {
    width: 92vw !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .ia-frame .stack img {
    border-radius: 16px !important;
  }

  /* Tarjeta más compacta y centrada */
  .ia-card {
    width: 88vw !important;
    max-width: 380px !important;
    margin: 0 auto !important;
    padding: 1.4rem 1.2rem !important;
    border-radius: 14px !important;
    text-align: center !important;
  }

  .ia-card h3 {
    font-size: 1.1rem !important;
    margin-bottom: 0.4rem !important;
  }

  .ia-card .prompt {
    font-size: 0.96rem !important;
    line-height: 1.45 !important;
  }

  .ia-card .meta {
    justify-content: center !important;
  }
}

/* ===== IA ZIGZAG — ULTRA COMPACTO EN MÓVIL ===== */
@media (max-width: 767px){

  /* Sección sin aire extra */
  .ia-zigzag,
  section.ia {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Título y texto, pegados pero legibles */
  .ia-title {
    margin: 0.2rem auto 0.4rem auto !important;
  }
  .typewriter {
    margin: 0 auto 0.6rem auto !important;
  }
  .typewriter .tw-line {
    margin: 0.15rem 0 !important;
  }

  /* GRUPO IMAGEN + TARJETA = casi sin aire */
  .ia-shot {
    margin: 0 !important;
    padding: 0.1rem 0 !important;
    gap: 0.6rem !important;
  }

  /* Imagen arriba sin margen */
  .ia-frame {
    margin: 0 !important;
    border-radius: 14px !important;
    width: 94vw !important;
    max-width: 600px !important;
  }
  .ia-frame .stack img {
    border-radius: 14px !important;
  }

  /* Tarjeta justo debajo */
  .ia-card {
    margin: 0 !important;
    padding: 0.9rem 1rem !important;
    border-radius: 12px !important;
    width: 88vw !important;
    max-width: 380px !important;
  }

  .ia-card h3 {
    margin: 0 0 0.2rem 0 !important;
  }
  .ia-card .prompt {
    margin: 0 0 0.2rem 0 !important;
  }
  .ia-card .meta {
    margin: 0 !important;
  }

  /* Flechas centradas verticalmente en la imagen */
  .ia-shot .nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(0,0,0,.4) !important;
    border-radius: 999px !important;
    width: 38px !important;
    height: 38px !important;
  }
  .ia-shot .nav.prev { left: 10px !important; }
  .ia-shot .nav.next { right: 10px !important; }
}

@media (max-width: 599.98px){

  /* El carrusel se vuelve 1 foto por pantalla */
  .album .viewport {
    width: 100% !important;
    overflow: hidden !important;
  }

  .album .track {
    display: flex !important;
    transition: transform .35s ease !important;
    gap: 0 !important;
  }

  .album .slide {
    flex: 0 0 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* La foto se hace protagonista */
  .album .slide img {
    width: 90% !important;
    max-width: 90% !important;
    height: auto !important;
    border-radius: 12px !important;
    object-fit: cover !important;
  }

  /* Flechas centradas verticalmente en la propia foto */
  .album .nav {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    justify-content: space-between !important;
    pointer-events: none !important;
  }

  .album .nav .arrow {
    pointer-events: auto !important;
    background: rgba(255,255,255,0.6) !important;
    backdrop-filter: blur(6px) !important;
    border-radius: 50% !important;
    padding: 0.45rem !important;
  }

  /* Contador bajo la foto, centrado */
  .album .counter {
    margin-top: 1.2rem !important;
    text-align: center !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
  }
}

/* ===== CARRUSEL MÓVIL — sin flechas, 1 imagen, scroll táctil ===== */
@media (max-width: 599.98px){

  /* Ocultar flechas */
  .album .nav {
    display: none !important;
  }

  /* Hacer el carrusel deslizable con el dedo */
  .album .viewport {
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .album .viewport::-webkit-scrollbar {
    display: none;
  }

  /* Pista de slides */
  .album .track {
    display: inline-flex;
    gap: 0;
  }

  /* Cada slide ocupa toda la pantalla */
  .album .slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    justify-content: center;
  }

  /* Foto protagonista */
  .album .slide img {
    width: 90%;
    height: auto;
    border-radius: 14px;
    object-fit: cover;
  }

  /* Contador centrado debajo */
  .album .counter {
    text-align: center;
    margin-top: 1rem;
    font-weight: 600;
  }
}

@media (max-width: 899.98px){
  .about-hero {
    padding-top: calc( clamp(18px, 3.5vw, 40px) + 2.5rem ) !important;
  }
}

/* ===== TRAYECTORIA RESPONSIVE PROPORCIONAL ===== */

/* TABLET (600–899px) */
@media (max-width: 899.98px){
  .trayectoria-s {
    padding: 4.5rem 0;
  }

  .trayectoria-s .s-wrap {
    transform: scale(.80);
    transform-origin: top center;
    margin-left: auto;
    margin-right: auto;
    padding-left: 3rem;
    padding-right: 3rem;
    max-width: 100%;
    overflow: visible;
  }

  .trayectoria-s .card {
    transform: scale(.88);
    transform-origin: center;
  }
}

/* MÓVIL (≤599px) */
@media (max-width: 599.98px){
  .trayectoria-s {
    padding: 5rem 0;
    margin-top: 10%;
  }

  .trayectoria-s .s-wrap {
    height: 90svh !important;
    transform: scale(.64);
    transform-origin: top center;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    max-width: 100%;
    overflow: visible;
  }

  .trayectoria-s .card {
    transform: scale(.98);
    transform-origin: center;
  }

  .trayectoria-s .card h4 {
    font-size: 1.8rem;
  }

  .trayectoria-s .card p {
    font-size: 1.7rem;
    line-height: 1.44;
  }
}

@media (max-width: 599.98px){
  .s-svg {
    height: 130svh !important; /* prueba valores 115–150 */
  }
}

/* ===== RECOLOCACIÓN MANUAL / TABLET ===== */
@media (min-width: 600px) and (max-width: 899.98px){

  /* 2021 */
  .trayectoria-s .milestone[data-at="6"] {
    transform: translate(-235px, -132px);
  }

  /* 2020 — 2022 */
  .trayectoria-s .milestone[data-at="20"] {
    transform: translate(-40px, -130px);
  }

  /* 2023 */
  .trayectoria-s .milestone[data-at="35"] {
    transform: translate(-500px, 10px);
  }

  /* 2020 — 2024 */
  .trayectoria-s .milestone[data-at="40"] {
    transform: translate(-210px, 20px);
  }

  /* 2023 — 2025 */
  .trayectoria-s .milestone[data-at="67"] {
    transform: translate(-320px, 40px);
  }

  /* 2025 — actualidad */
  .trayectoria-s .milestone[data-at="79"] {
    transform: translate(-210px, 90px);
  }
}

/* ===== RECOLOCACIÓN MANUAL / MÓVIL ===== */
@media (max-width: 599.98px){

  .trayectoria-s .milestone[data-at="6"] {
    transform: translate(-210px, -105px);
  }

  .trayectoria-s .milestone[data-at="20"] {
    transform: translate(-135px, -175px);
  }

  .trayectoria-s .milestone[data-at="35"] {
    transform: translate(-350px, -40px);
  }

  .trayectoria-s .milestone[data-at="40"] {
    transform: translate(-255px, 60px);
  }

  .trayectoria-s .milestone[data-at="67"] {
    transform: translate(-185px, 80px);
  }

  .trayectoria-s .milestone[data-at="79"] {
    transform: translate(-120px, 170px);
  }
}

/* CORRECCIÓN DEL CONFLICTO DE TRANSFORMACIÓN */

/* TABLET (600–899px) */
@media (min-width: 600px) and (max-width: 899.98px){
  .trayectoria-s .milestone[data-at="6"]  { transform: scale(.88) translate(-235px, -132px); }
  .trayectoria-s .milestone[data-at="20"] { transform: scale(.88) translate(-40px, -130px); }
  .trayectoria-s .milestone[data-at="35"] { transform: scale(.88) translate(-500px, 10px); }
  .trayectoria-s .milestone[data-at="40"] { transform: scale(.88) translate(-210px, 20px); }
  .trayectoria-s .milestone[data-at="67"] { transform: scale(.88) translate(-320px, 40px); }
  .trayectoria-s .milestone[data-at="79"] { transform: scale(.88) translate(-210px, 90px); }
}

/* MÓVIL (≤599px) */
@media (max-width: 599.98px){
  .trayectoria-s .milestone[data-at="6"]  { transform: scale(.78) translate(-280px, -185px); }
  .trayectoria-s .milestone[data-at="20"] { transform: scale(.78) translate(-35px, -115px); }
  .trayectoria-s .milestone[data-at="35"] { transform: scale(.78) translate(-660px, 170px); }
  .trayectoria-s .milestone[data-at="40"] { transform: scale(.78) translate(-325px, 240px); }
  .trayectoria-s .milestone[data-at="67"] { transform: scale(.78) translate(-195px, 350px); }
  .trayectoria-s .milestone[data-at="79"] { transform: scale(.78) translate(-140px, 500px); }
}

.trayectoria-s,
.trayectoria-s .s-wrap,
.trayectoria-s .milestone,
.trayectoria-s .card {
  overflow: visible !important;
}

/* Quitar hueco extra debajo de la trayectoria en móvil */
@media (max-width: 599.98px){
  .trayectoria-s {
    padding-bottom: 0.2rem !important; /* antes era 5rem */
  }

@media (max-width: 599.98px){
  .trayectoria-s {
    overflow: hidden;
  }
}

  /* Opcional: si la sección siguiente tiene margen/padding extra */
  .trayectoria-s + section,
  .trayectoria-s + .formacion,
  .trayectoria-s + .certificaciones,
  .trayectoria-s + * {
    margin-top: 1.1rem !important;  /* baja el salto */
    padding-top: 0 !important;
  }
}

/* ===== PILARES → 3 columnas en tablet ===== */
@media (min-width: 600px) and (max-width: 899.98px){
  .pilares-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* tres columnas iguales */
    gap: 1.8rem; /* aire entre cajas */
  }

  .pilar-box {
    padding: 1.4rem 1.6rem;
  }
}

/* ===== GRID INSTAGRAM — 3 columnas en tablet y escritorio ===== */

.ig-clean-grid {
  display: grid;
  gap: 1rem; /* separación entre posts */
}

/* Tablet en adelante: 3 columnas en la misma fila */
@media (min-width: 600px) {
  .ig-clean-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Si quieres que las imágenes siempre rellenen sin deformarse */
.ig-clean-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.magazine:fullscreen .mag-viewport,
.magazine:-webkit-full-screen .mag-viewport {
  width: 100vw;
  height: 100vh;
}

.magazine:fullscreen .mag-page img,
.magazine:-webkit-full-screen .mag-page img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

#mag-fullscreen {
  font-size: 18px;
  padding: 4px 8px;
  cursor: pointer;
}

@media (max-width: 599.98px){
  .certificados {
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
  }
}

@media (max-width: 599.98px){
  .trayectoria-s {
    display: flow-root; /* elimina el colapso sin cortar nada visual */
  }
}