:root {
  --orange: #fa6400;
  --dark: #2a2a2c;
  --body: #212529;
  --card: #91c8d7;
  --grey-btn: #ebebeb;
  --footer: #393a3f;
  --input-border: rgba(33, 37, 41, .15);
  /* Tipografía fluida, con tope en el tamaño de escritorio a partir de 1200px (misma curva que el original) */
  --fs-h1: min(44px, calc(1.4rem + 1.8vw));
  --fs-h2: min(42px, calc(1.3875rem + 1.65vw));
  --fs-h3: min(36px, calc(1.35rem + 1.2vw));
  --fs-d3: min(26px, calc(1.2875rem + .45vw));
}
* { box-sizing: border-box; }
main section, footer section { display: flow-root; }
html { scroll-behavior: smooth; scroll-padding-top: 66px; }
body {
  margin: 0;
  font-family: Ubuntu, sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: #000;
  background: #fff;
}
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; }
p { margin: 2px 0 16px; }
h1, h2, h3 { margin: 4px 0 16px; line-height: 1.2; font-weight: 500; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
strong, b { font-weight: 700; }
.fs-h2 { font-size: var(--fs-h2); }
.fs-h3 { font-size: var(--fs-h3); }
.fs-d3 { font-size: var(--fs-d3); }
.fs-20 { font-size: 20px; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.left { text-align: left; }

/* Rejilla (márgenes de 30px; el contenedor cambia en 576/768/992/1200/1400) */
.container { width: 100%; padding: 0 15px; margin: 0 auto; }
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.row > * { width: 100%; max-width: 100%; flex-shrink: 0; padding: 0 15px; }
@media (min-width: 992px) {
  .col-lg-2 { width: 16.66666667%; }
  .col-lg-3 { width: 25%; }
  .col-lg-5 { width: 41.66666667%; }
  .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.33333333%; }
  .col-lg-8 { width: 66.66666667%; }
  .offset-lg-2 { margin-left: 16.66666667%; }
}
/* Separador invisible (el original usa un <hr> sin borde dentro de contenedores con relleno) */
.hr { padding: 8px 0; }
.hr hr { margin: 0; border: 0; height: 1px; }

/* Botones */
.btn {
  display: inline-block;
  padding: 6px 20px;
  border: 2px solid var(--orange);
  border-radius: 30px;
  background: var(--orange);
  color: var(--dark);
  font: 700 16px/1.5 Ubuntu, sans-serif;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  transition: color .5s ease-in-out, background-color .5s ease-in-out, border-color .5s ease-in-out, box-shadow .5s ease-in-out;
}
.btn:hover, .btn:focus-visible { background: var(--dark); border-color: var(--dark); color: var(--orange); outline: 0; }
.btn-grey {
  background: var(--grey-btn); color: var(--body); border: 1px solid transparent;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn-grey:hover { background: var(--grey-btn); border-color: transparent; color: var(--body); filter: invert(.2); }
.btn-grey:focus-visible { background: var(--grey-btn); border-color: transparent; color: var(--body); }
.btn-submit { border-color: var(--dark); }
.mb-2 { margin-bottom: 8px; }

/* Cabecera */
header { position: sticky; top: 0; z-index: 50; }
.nav-desktop { background: var(--orange); padding: 10px 16px; }
.nav-desktop .container { display: flex; align-items: center; }
.brand img { display: block; width: 46px; height: 46px; object-fit: contain; }
.brand { font-size: 30.667px; line-height: 1.2; text-decoration: none; transition: margin .2s, font-size .2s, opacity .2s ease-out; }
.nav-desktop .brand { margin-right: 24px; }
.menu { list-style: none; display: flex; margin: 0; padding: 0; }
.menu a {
  display: block; padding: 8px 24px; border-radius: 160px;
  font-weight: 600; line-height: 1.2; text-decoration: none; color: var(--dark);
  transition: color .25s ease-in-out, background-color .25s ease-in-out, border-color .25s ease-in-out;
}
.menu a:hover, .menu a:focus-visible { background: var(--dark); color: var(--orange); outline: 0; }
.nav-mobile { display: none; background: var(--orange); padding: 10px 0; }
.nav-mobile .container { display: flex; align-items: center; justify-content: space-between; }
.nav-mobile .brand img { width: auto; height: 46px; }
.toggler { padding: 8px; background: none; border: 1px solid transparent; border-radius: 30px; cursor: pointer; line-height: 1; }
.toggler span {
  display: block; width: 24px; height: 24px;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / 100% no-repeat;
}
.offcanvas {
  position: fixed; inset: 0; z-index: 1045; background: var(--orange);
  display: flex; flex-direction: column;
  transform: translateX(100%); visibility: hidden;
  transition: transform .3s ease-in-out, visibility 0s .3s;
}
.offcanvas.show { transform: none; visibility: visible; transition: transform .3s ease-in-out; }
.offcanvas-header { display: flex; justify-content: flex-end; padding: 16px; }
.btn-close {
  width: 32px; height: 32px; padding: 8px; border: 0; border-radius: 6.4px; cursor: pointer; opacity: .5;
  filter: invert(1) grayscale(1) brightness(2);
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center / 16px no-repeat;
  margin: -8px -8px -8px auto;
}
.btn-close:hover { opacity: .75; }
.offcanvas-body { padding: 16px; }
.offcanvas-body .menu { flex-direction: column; }
@media (max-width: 991.98px) {
  .nav-desktop { display: none; }
  .nav-mobile { display: block; }
}

/* Las secciones de media pantalla centran su contenido en vertical */
.half-screen { display: flex; flex-direction: column; justify-content: center; min-height: 70vh; }

/* Portada */
.hero {
  padding: 128px 0 144px;
  background: #fff url("../hero-bg.webp") 50% 30% / cover no-repeat;
}
.hero-card { background: rgba(255, 255, 255, .85); border-radius: 20px; padding: 32px !important; text-align: left; }

/* Why VR */
.s-title { padding-top: 88px; }
.features { padding-top: 40px; background: #fff; }
.features .row { align-items: stretch; }
.card-col { padding-top: 16px !important; padding-bottom: 16px !important; }
.card { height: 100%; display: flex; flex-direction: column; background: var(--card); border-radius: 30px; color: var(--body); }
.card-body { flex: 1 1 auto; padding: 16px; background: rgba(255, 255, 255, .9); border-radius: 5.4px; text-align: center; }
.card-body img { width: 60px; height: 60px; }
.lead { font-size: 18px; font-weight: 300; }

/* Texto + imagen */
.text-image .row { align-items: stretch; }
.text-image .col { padding-top: 16px; padding-bottom: 16px; }
.rounded-img { display: block; width: 100%; border-radius: 20px; }
.about { padding: 56px 0 40px; }
.elearning { padding: 48px 0 80px; }

/* Llamada a la acción */
.cta { padding: 24px 0 40px; }
.cta > .container { background: var(--card); border-radius: 20px; padding: 20px; }
.cta .row { align-items: center; }
.cta .icon img { display: block; width: 84px; margin: 0 auto; border-radius: 20px; }
@media (max-width: 991.98px) { .cta .icon { display: none; } }

/* Productos */
.products { position: relative; }
.products > .container { background: rgba(255, 255, 255, .95); border-radius: 20px; padding: 0 64px; }
.media-item .row { margin: 0; align-items: center; }
.media-item .row > * { padding: 0; }
.media-item.reverse .row { flex-direction: row-reverse; }
.media-img { align-self: stretch; position: relative; }
.media-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
@media (min-width: 992px) { .media-img img { position: absolute; inset: 0; } }
.media-body { padding: 32px !important; }

/* Formulario de contacto */
.form-cta { background: url("../form-bg.webp") 50% 30% / cover no-repeat; }
@media (max-width: 991.98px) { .hero, .form-cta { background-position: 50% 50%; } }
.form-cta > .row { margin: 0; }
.form-cta .gap { padding: 160px 15px; }
@media (max-width: 767.98px) { .form-cta .gap { display: none; } }
.form-panel { background: var(--orange); padding: 72px 48px !important; }
.form-panel .container.form-wrap { padding: 0 30px; }
.form-rows { margin: 0 -15px; }
.field { margin-bottom: 16px; }
@media (min-width: 992px) { .field.half { width: 50%; } }
.form-control {
  display: block; width: 100%; padding: 6px 12px;
  font: 400 16px/1.5 Ubuntu, sans-serif; color: var(--body);
  background: #fff; border: 1px solid var(--input-border); border-radius: 6.4px;
  transition: background-color .05s ease-in-out, border-color .05s ease-in-out, box-shadow .05s ease-in-out;
}
.form-control::placeholder { color: rgba(33, 37, 41, .75); }
.form-control:focus { outline: 0; box-shadow: none; }
textarea.form-control { resize: vertical; }
.field-row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.field-row > * { padding: 0 15px; width: 100%; }
.field-label { line-height: 1.2; }
.field-label.col-form { padding-top: 7px; padding-bottom: 7px; line-height: 1.5; }
@media (min-width: 576px) {
  .field-row > .field-label { width: 200px; flex: 0 0 auto; }
  .field-row > .field-input { flex: 1 0 0; width: auto; }
}
.form-select {
  display: block; width: 100%; padding: 6px 36px 6px 12px;
  font: 400 16px/1.5 Ubuntu, sans-serif; color: var(--body); cursor: pointer;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 12px center / 16px 12px;
  border: 1px solid var(--input-border); border-radius: 6.4px;
  appearance: none; -webkit-appearance: none;
  transition: border-color .05s ease-in-out, box-shadow .05s ease-in-out;
}
.form-select:focus { outline: 0; box-shadow: none; }
.check-row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.check-row > div { width: 100%; padding: 0 15px; }
.form-check { min-height: 24px; padding-left: 24px; margin-bottom: 2px; }
.form-check label { display: inline-block; cursor: pointer; }
.mark { font-size: .85em; }
.form-check-input {
  appearance: none; float: left; width: 16px; height: 16px; margin: 4px 0 0 -24px;
  background: #fff center / contain no-repeat; border: 1px solid rgba(0, 0, 0, .15); border-radius: 0;
  cursor: pointer; vertical-align: top;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-check-input:hover { border-color: var(--orange); }
.form-check-input:focus { outline: 0; border-color: #fdb280; box-shadow: 0 0 0 4px rgba(250, 100, 0, .25); outline-offset: 2px; }
.form-check-input:checked {
  background-color: var(--orange); border-color: var(--orange);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-submit { padding-top: 8px !important; padding-bottom: 8px !important; text-align: center; }
.form-msg { display: block; margin-top: 8px; font-weight: 500; }
.form-msg:empty { display: none; }

/* Pie */
footer { background: var(--footer); color: #fff; }
footer a { color: #fff; text-decoration: none; }
footer a:hover { color: #d9d9d9; text-decoration: underline; }
.logos { padding: 48px 0 24px; }
.logos img { display: block; height: 80px; width: auto; max-width: 100%; margin: 25px auto; }
.funding { padding: 0 0 24px; }
.funding .row > div { padding-top: 16px; text-align: center; }
/* Bloque del Gobierno de Canarias: logo y texto centrados */
.canarias .row > div { padding-top: 16px; text-align: center; }
.canarias-logo { padding-bottom: 16px; }
.canarias-logo img { display: inline-block; height: 80px; width: auto; max-width: 100%; margin: 25px 0; vertical-align: middle; }
.canarias-texto { padding-bottom: 64px; }
.copyright { background: var(--footer); }
.copyright .container { padding-top: 16px; padding-bottom: 16px; color: rgba(255, 255, 255, .7); }
.copyright .name { margin-right: 8px; }
@media (min-width: 576px) { .copyright .row > * { width: 50%; } }
@media (max-width: 991.98px) {
  .copyright { text-align: center; }
  .logos img, .canarias-logo img { margin-top: 48px; margin-bottom: 48px; }
}
@media (min-width: 992px) { .copyright { text-align: left; } }

/* Animaciones al hacer scroll */
.anim { opacity: 0; transition: opacity .6s ease, transform .6s ease; }
.anim.zoom-out { transform: scale(1.22); }
.anim.zoom-in { transform: scale(.9); }
.anim.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .anim { opacity: 1; transform: none; transition: none; } }

/* Campo trampa del formulario: fuera de la vista para las personas */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }