@charset "UTF-8";
:root {
  --blue-1: #0A80DC;
  --blue-2: #00C3F9;
}

* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f5f9fd;
  color: #08304a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* NAV / HERO (sin cambios estructurales) */
.nav-logo {
  height: 64px;
  object-fit: contain;
}

.hero {
  background: linear-gradient(135deg, #0A80DC 0%, #00C3F9 100%);
  color: white;
  padding: 3.5rem 0;
  text-align: center;
}

/* --- DIAPOSITIVAS / TARJETAS --- */
.tutorial-card {
  /* apariencia "slide" */
  min-height: 420px; /* altura tipo diapositiva */
  padding: 2.25rem; /* más espacio alrededor */
  border-radius: 14px;
  background: #fff;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  overflow: hidden;
}
.tutorial-card .content-wrapper {
  display: flex;
  flex-direction: row; /* horizontal desktop */
  align-items: center; /* centra verticalmente */
  justify-content: center; /* centra horizontalmente todo el bloque dentro del card */
  gap: 10rem; /* separación entre imagen y texto */
  width: 100%;
  max-width: 1000px; /* opcional: limita ancho total del bloque */
  margin: 0 auto; /* centra el bloque dentro del card */
}
.tutorial-card .content-wrapper .col-md-4,
.tutorial-card .content-wrapper .col-md-8 {
  flex: 0 0 auto; /* evita que se estiren a todo el ancho */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tutorial-card .content-wrapper .col-md-4 {
  max-width: 46%;
}
.tutorial-card .content-wrapper .col-md-8 {
  max-width: 46%;
}
.tutorial-card {
  /* Texto: mantenemos alineado a la izquierda dentro del bloque */
}
.tutorial-card .content-wrapper .text-block {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 60ch;
  text-align: left;
}
.tutorial-card .col-md-4 {
  padding: 0.5rem;
}
.tutorial-card .col-md-8 {
  padding: 1.25rem;
}
.tutorial-card {
  /* layout: hacemos que la fila interna actúe como flex container */
}
.tutorial-card .row {
  display: flex;
  align-items: center;
  justify-content: center; /* centra el conjunto de columnas dentro del card */
  gap: 2rem; /* más separación entre imagen y texto */
  width: 100%;
}
.tutorial-card {
  /* columnas internas (adaptan al diseño con col-md-4 / col-md-8) */
}
.tutorial-card .col-md-4 {
  padding: 1rem;
  flex: 0 0 46%;
  max-width: 46%;
  display: flex; /* centra la imagen dentro de su columna */
  justify-content: center;
  align-items: center;
}
.tutorial-card .col-md-8 {
  padding: 1.25rem;
  flex: 0 0 46%;
  max-width: 46%;
  display: flex; /* centra el bloque de texto dentro de su columna */
  flex-direction: column;
  justify-content: center;
}
.tutorial-card {
  /* suavizado al pasar por encima */
}
.tutorial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 70px rgba(2, 24, 50, 0.1);
}

/* Imagen: más protagonista */
/* Imagen: más protagonista */
.card-media {
  width: 100%;
  height: 400px; /* mantiene la imagen más grande en desktop */
  object-fit: contain;
  border: 4px solid #00C4F8;
  border-radius: 12px;
  display: block;
  background-color: #fff;
  box-shadow: 0 8px 20px rgba(10, 128, 220, 0.06);
  box-sizing: border-box;
  /* evita que la imagen "pegue" al borde del card al quedar centrada en la columna */
  max-width: 100%;
}

/* TEXTO: bloque "cuadrado" y más aire interno */
.card-body {
  display: flex;
  align-items: center; /* centra verticalmente el texto dentro del slide */
  height: 100%;
  padding: 0;
}

.text-block {
  max-width: 60ch;
  margin-left: 2rem !important; /* separa el texto de la imagen */
  margin-right: 0 !important;
  margin-bottom: 0;
}

/* label / título grande */
.label-title {
  color: #0A80DC;
  font-weight: 800;
  font-size: 1.5rem;
  margin-bottom: 0.6rem;
  letter-spacing: 0.02em;
}

/* párrafo: no más pequeño, pero líneas más compactas */
.card-text.small {
  color: rgba(8, 48, 74, 0.94);
  font-size: 1rem;
  line-height: 1.45;
  margin: 0;
}

/* Borde azul siempre en el lado de la imagen */
.tutorial-card.media-left {
  border-left: 10px solid #0A80DC;
  border-right: 2px solid rgba(10, 128, 220, 0.06);
}
.tutorial-card.media-left .col-md-4 {
  margin-right: 18px;
}

.tutorial-card.media-right {
  border-right: 10px solid #0A80DC;
  border-left: 2px solid rgba(10, 128, 220, 0.06);
  /* invertir la fila para que la imagen quede a la derecha sin tocar HTML */
}
.tutorial-card.media-right .col-md-4 {
  margin-right: 18px;
}
.tutorial-card.media-right .row {
  flex-direction: row-reverse;
}

/* RESPONSIVE: en pantallas pequeñas apilamos */
@media (max-width: 767px) {
  .tutorial-card {
    min-height: 320px; /* espacio extra para imagen grande */
    padding: 1rem;
  }
  /* Reset del content-wrapper para que desaparezca visualmente */
  .tutorial-card .content-wrapper {
    display: block !important; /* ya no es flex, columnas apiladas naturalmente */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    gap: 0 !important; /* elimina el espacio horizontal */
  }
  .tutorial-card .row {
    flex-direction: column;
    gap: 1.25rem !important;
    align-items: center;
    justify-content: center;
  }
  .col-md-4, .col-md-8 {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .card-media {
    height: 360px !important; /* imagen grande en móvil */
    width: auto !important;
    max-width: 92% !important; /* margen lateral */
    margin: 0 auto !important;
  }
  /* restauramos el borde superior en móvil */
  .tutorial-card.media-left,
  .tutorial-card.media-right {
    border-left: 2px solid rgba(10, 128, 220, 0.06) !important;
    border-right: 2px solid rgba(10, 128, 220, 0.06) !important;
    border-top: 8px solid #0A80DC !important;
  }
  .text-block {
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 0.75rem;
    text-align: center; /* opcional: centra el texto en móvil */
  }
}
/* Animación reveal */
.card-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: all 450ms ease;
}

.card-reveal.show {
  opacity: 1;
  transform: translateY(0);
}

/* Botón / footer */
.btn-outline-primary, .btn-primary {
  --bs-btn-bg: linear-gradient(90deg, $blue-1, $blue-2);
}

/* FOOTER - fondo azul, texto blanco */
.footer-full {
  width: 100%;
  padding: 2.25rem 0;
  text-align: center;
  background: linear-gradient(90deg, #0A80DC 0%, #00C3F9 100%);
  color: #fff;
  margin-top: 3.5rem;
}

.footer-full .container {
  max-width: 1140px; /* igual que bootstrap */
}

.footer-full small {
  color: rgba(255, 255, 255, 0.95);
  display: block;
}

@media print {
  #btnExportPdf, #heroVideoWrap {
    display: none !important;
  }
  .no-pdf {
    display: none !important;
  }
}
/* Tarjeta especial "0" - fondo degradado, texto blanco, logo centrado */
.special-card {
  /* anulamos bordes de .tutorial-card */
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: 0 12px 30px rgba(2, 24, 50, 0.06); /* opcional: ligera sombra */
  background: linear-gradient(135deg, #0A80DC 0%, #00C3F9 100%);
  color: #ffffff;
  border-radius: 14px;
  padding: 2rem;
  /* forzar que el layout sea vertical y centrado */
}
.special-card .tutorial-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.75rem;
}
.special-card {
  /* logo centrado grande */
}
.special-card .special-logo {
  height: 80px;
  width: auto;
  object-fit: contain;
  display: block;
}
.special-card {
  /* título en blanco */
}
.special-card .special-title {
  color: #ffffff;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}
.special-card {
  /* texto: más "horizontal" (bloque ancho centrado), blanco y con buen interlineado */
}
.special-card .special-text {
  color: rgba(255, 255, 255, 0.98);
  max-width: 80ch; /* controla anchura para un párrafo ancho y "cuadrado" */
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.6;
}
.special-card {
  /* eliminar el borde que la regla .tutorial-card.media-left añadía */
}
.special-card.media-left, .special-card.media-right {
  border-left: none !important;
  border-right: none !important;
}

/*# sourceMappingURL=style.css.map */