/* =========================================================================
   Fertilidad Multidosis (Ferring) — reconstrucción estática propia
   CSS limpio que sustituye a Bootstrap 3 + video.js del original.
   Implementa solo las clases que el marcado heredado necesita + estilos
   propios (cabecera/pie/opciones/modales/cookies), replicando el diseño.
   ========================================================================= */

:root {
  --azul: #004e75;
  --azul-link: #337ab7;
  --azul-hover: #004e75;
  --naranja: #EB7829;     /* hover Menopur 600 */
  --azul-1200: #163D66;   /* hover Menopur 1200 */
  --red: #fff;            /* el original usaba var(--red) sin definir → blanco */
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
  line-height: 1.5;
  /* deja sitio al footer fijo */
  padding-bottom: 140px;
}

a { color: var(--azul-link); }
a:hover { color: var(--azul-hover); }

h1, h4 { font-family: Arial, Helvetica, sans-serif; }

/* ---- Layout / utilidades (sustituto mínimo de la grid de Bootstrap) ---- */
.container { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 15px; min-height: 200px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.row > [class^="col"] { padding: 0 15px; }
.col-xs-12 { flex: 0 0 100%; max-width: 100%; }
.text-center { text-align: center; }
.pull-right { float: right; }
.img-responsive { display: block; max-width: 100%; height: auto; }

@media (min-width: 768px) {
  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  .col-sm-offset-3 { margin-left: 25%; }
}

/* Separación horizontal entre Menopur 600 y 1200 (centradas con hueco) */
@media (min-width: 768px) {
  .opciones .row { justify-content: center; gap: 60px; }
  .opciones .col-sm-offset-3 { margin-left: 0; }

  /* Contenido centrado vertical y horizontalmente entre cabecera y pie */
  body { padding-bottom: 0; }
  .container {
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    min-height: calc(100vh - 135px - 122px); /* 100vh − cabecera − pie */
  }
  .opciones { margin: 0; width: 100%; transform: translateY(-40px); }
}

/* ---- Botones (sustituto de .btn .btn-primary) ---- */
.btn {
  display: inline-block; cursor: pointer; border: 1px solid transparent;
  padding: 8px 16px; border-radius: 4px; font-size: 14px; line-height: 1.4;
  text-align: center; text-decoration: none; -webkit-appearance: none;
}
.btn-primary { background: var(--azul-link); border-color: #2e6da4; color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: #286090; color: #fff; }

/* ---- Formulario (sustituto de .form-control / .form-group / .has-warning) ---- */
.form-group { margin-bottom: 15px; }
.form-control-label { display: block; margin-bottom: 5px; }
.form-control {
  display: block; width: 100%; padding: 6px 12px; font-size: 14px; line-height: 1.4;
  color: #555; background: #fff; border: 1px solid #ccc; border-radius: 4px;
}
.has-warning .form-control { border-color: #8a6d3b; }
.help-block { display: none; color: #a94442; font-size: 13px; margin-top: 6px; }

/* =========================  Cabecera y pie  ============================= */
header {
  height: 135px; width: 100%;
  background: url("../images/cabecera2.png") no-repeat center top;
  background-size: auto 100%; position: relative;
}

.lang-switcher {
  position: fixed; top: 10px; right: 50px; z-index: 1060; font-size: 14px;
  background: #fff; padding: 4px 8px; border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.lang-switcher a { color: var(--azul-link); text-decoration: none; padding: 2px 6px; }
.lang-switcher a:hover { text-decoration: none; color: var(--azul-hover); }
.lang-switcher a.active { font-weight: bold; color: var(--azul-hover); }
.lang-switcher span { color: #999; }

footer {
  height: 122px; width: 100%;
  background: url("../images/pie.png") no-repeat center top;
  position: fixed; bottom: 0; left: 0;
}
footer ul { list-style: none; padding-top: 46px; padding-left: 150px; margin: 0; }
footer ul li { display: inline; margin-right: 20px; }
footer .logo { position: absolute; bottom: 32px; left: 10px; }
.ref { position: absolute; bottom: 22px; right: 5px; font-size: 8px; }

/* =========================  Opciones de producto  ====================== */
.opciones { margin: 0 0 50px; display: none; }
.opciones .col { margin-bottom: 15px; }
.opciones h1 { color: var(--azul); margin-bottom: 20px; font-size: 20px; }
.opciones img { max-width: 240px; display: block; margin: 0 auto; border: 2px solid #fff; }
.opciones img:hover { border-width: 2px; border-style: dashed; border-radius: 10px; }
.opciones img.m600:hover { border-color: var(--naranja); }
.opciones img.m1200:hover { border-color: var(--azul-1200); }
a.video-trigger + a,
a.video-trigger + p { margin-top: 10px; display: block; white-space: nowrap; font-size: 13px; font-weight: 800; }
/* PT: toda la línea de FT en azul (no solo los enlaces FI/IECRCM) */
a.video-trigger + p { color: var(--azul-link); }

.button-privacidad {
  display: inline-block; margin-top: 20px; background: var(--azul-link);
  color: #fff !important; padding: 8px 25px; border-radius: 7px; text-decoration: none;
}

/* =============================  Modales  =============================== */
/* Sustituto ligero de los modales de Bootstrap 3 */
.modal {
  display: none; position: fixed; inset: 0; z-index: 1050;
  overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.modal.is-open { display: block; }
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1040; background: #000; opacity: 0.5;
}
.modal-dialog { position: relative; width: auto; margin: 30px auto; max-width: 600px; }
.modal-lg { max-width: 900px; }
.modal-sm { max-width: 360px; }
.modal-content {
  position: relative; background: #fff; border-radius: 6px;
  box-shadow: 0 3px 9px rgba(0,0,0,0.5); padding: 0;
}
.modal-header { padding: 15px; border-bottom: 1px solid #e5e5e5; position: relative; }
.modal-footer { padding: 15px; border-top: 1px solid #e5e5e5; text-align: right; }
.modal-title { margin: 0; font-size: 18px; color: var(--azul); }
.modal-body { position: relative; padding: 15px; max-height: calc(100vh - 160px); overflow-y: auto; }
.modal-body h4 { color: var(--azul); }
.close {
  position: absolute; top: 10px; right: 15px; font-size: 24px; font-weight: bold;
  line-height: 1; color: #000; opacity: 0.4; background: none; border: 0; cursor: pointer;
}
.close:hover { opacity: 0.8; }
body.modal-abierto { overflow: hidden; }

/* Todas las ventanas (modales) centradas vertical y horizontalmente.
   El scroll interno de .modal-body evita que los modales largos se salgan. */
.modal.is-open { display: flex; align-items: center; justify-content: center; padding: 15px; }
.modal .modal-dialog { margin: 0; width: 100%; }

/* Reproductor de vídeo nativo (sustituye video.js) */
#video_player { width: 100%; height: auto; display: block; background: #000; }
/* Aspa de cierre visible sobre el vídeo */
#video_modal .close {
  top: -14px; right: -14px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--azul); color: #fff; opacity: 1; font-size: 20px;
  line-height: 30px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.4); z-index: 2;
}
#video_modal .close:hover { background: var(--azul-link); opacity: 1; }

/* Tabla de cookies */
.table-cookies { width: 100%; border-collapse: collapse; margin: 2rem 0; border-top: 1px solid #d3d3d3; border-left: 1px solid #d3d3d3; }
.table-cookies td { width: 20%; padding: 5px; text-align: center; border-bottom: 1px solid #d3d3d3; border-right: 1px solid #d3d3d3; }
.table-cookies td:nth-of-type(4) { width: 40%; }

#modal p { margin: 0 0 8px; }

/* =========================  Banner de cookies  ========================= */
#gdpr-cookie-message {
  display: none; position: fixed; left: 0; top: 0; width: 100%; z-index: 1070;
  background-color: #2D91BF; padding: 20px; box-shadow: 0 6px 6px rgba(0,0,0,0.25);
  font-family: system-ui, Arial, sans-serif;
}
#gdpr-cookie-message.is-open { display: block; }
#gdpr-cookie-message h4 { color: #fff; font-size: 18px; font-weight: 500; margin: 0 0 10px; }
#gdpr-cookie-message p { color: #fff; font-size: 15px; line-height: 1.5em; margin: 0 0 10px; }
#gdpr-cookie-message p:last-child { margin-bottom: 0; text-align: right; }
#gdpr-cookie-message a { color: #fff; text-decoration: underline; }
#gdpr-cookie-message button {
  border: none; background: #fff; color: #2D91BF; font-size: 15px; padding: 7px 14px;
  border-radius: 3px; margin-left: 15px; cursor: pointer;
}
#gdpr-cookie-message button:hover { background: #e6f2f8; }

/* ==============================  Responsive  =========================== */
@media screen and (max-width: 767px) {
  header { height: 100px; }
  body { padding-bottom: 0; }
  footer { position: relative; height: auto; padding: 10px 0 15px; }
  footer ul { padding-left: 15px; padding-top: 10px; }
  .opciones h1 { font-size: 16px; }
  .modal-dialog { margin: 10px; }
  .modal-body p { font-size: 13px; }
  #gdpr-cookie-message p { font-size: 13px; line-height: 1.2em; }
}