/* ============================================================
   extra.css — complementos a style.css del tema
   (cosas que en WP estaban inline en header.php o las generaba
   un plugin, reescritas para la versión estática)
   ============================================================ */

/* --- Estrella en el dot activo del nav lateral (estaba inline en header.php) --- */
#fp-nav ul li a.active::after {
  content: url('../media/bullet.png');
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-name: destello;
  animation-duration: 3s;
}
#fp-nav ul li a[href="#curso"].active::after {
  content: url('../media/buletazul.png');
}

/* --- Chevron del hero (antes era un icono FontAwesome) --- */
.contenedor-icono a { color: #fff; }
.contenedor-icono svg { width: 34px; height: 34px; }

/* --- "Proyectos en desarrollo": carousel de proyectos (reemplaza SmartSlider3) --- */
.dev-carousel { list-style: none; padding: 0; margin: 0; }
.dev-carousel.cs-hidden { visibility: hidden; }

/* más aire entre el título de sección y el slider */
.proyectos-curso .lSSlideOuter { margin-top: 52px; }

.dev-card {
  border-radius: 10px;
  overflow: hidden;
  max-width: 1140px;
  margin: 0 auto;
  box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .35);
}
.dev-card__media { position: relative; }
.dev-card__media > img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Encuadre por proyecto */
.dev-card__media > img[src*="udaondo"]    { object-position: center bottom; } /* se ve la entrada */
.dev-card__media > img[src*="luciernagas"]{ object-position: center 60%; }    /* se ve más el árbol/parque */

/* Overlay azul + botón al hacer hover */
.dev-card__cta {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(47, 47, 104, .6);
  opacity: 0;
  transition: opacity .3s ease;
  text-decoration: none;
}
.dev-card__media:hover .dev-card__cta { opacity: 1; }
.dev-card__cta span {
  background: #fff;
  color: #2F2F68;
  font-weight: 500;
  padding: 12px 28px;
  border-radius: 50px;
}

/* Banda blanca translúcida DENTRO de la imagen (título + ubicación, a la izquierda) */
.dev-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(255, 255, 255, .82);
  padding: 16px 32px;
  text-align: left;
}
.dev-card__title {
  color: #2F2F68;
  font-weight: 700;
  font-size: 1.35rem;
  margin: 0;
  text-align: left;
}
.dev-card__body hr.separador {
  width: 46px;
  margin: 6px 0 8px 0;
  border: solid 1px #2F2F68;
}
.dev-card__loc { display: flex; align-items: flex-start; }
.dev-card__loc img { width: 24px; margin-right: 8px; }
.dev-card__loc span { color: #2F2F68; font-size: .92rem; }

/* Flechas: cuadrados azules de marca con chevron blanco (distintas a las de finalizados) */
.proyectos-curso .lSAction > a {
  width: 52px !important;
  height: 96px !important;
  margin-top: -48px !important;
  top: 42% !important;
  background: #2F2F68 !important;
  opacity: 1 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.proyectos-curso .lSAction > a:hover { background: #26265a !important; }
.proyectos-curso .lSAction > .lSPrev { left: 0; }
.proyectos-curso .lSAction > .lSNext { right: 0; }
.proyectos-curso .lSAction > a::after {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
}
.proyectos-curso .lSAction > .lSPrev::after { transform: rotate(135deg); margin-left: 4px; }
.proyectos-curso .lSAction > .lSNext::after { transform: rotate(-45deg); margin-right: 4px; }

/* Dots propios (el pager nativo de lightSlider falla con 2 slides + loop) */
.dev-dots { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }
.dev-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #9696B3;
  cursor: pointer;
  transition: background .2s ease;
}
.dev-dot.is-active { background: #26265A; }

@media (max-width: 600px) {
  .dev-card__media > img { height: 260px; }
  .proyectos-curso .lSAction > a { width: 40px !important; height: 68px !important; margin-top: -34px !important; }
}

/* La <ul> del carousel de finalizados arranca oculta hasta que carga */
#autoWidth.cs-hidden { visibility: hidden; }

/* Botón Enviar del form de contacto (réplica del CF7 original) */
.form-contacto .btn-enviar {
  color: #2F2F68;
  background-color: #fff;
  border: none;
  border-radius: 50px;
  padding: 12px 34px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 30px;
}
.form-contacto .btn-enviar:hover { opacity: .9; }
.form-contacto .row-campos { margin-bottom: 10px; }

/* ============================================================
   Formulario DataCrush — estilado para igualar el diseño Landmark
   Markup real que genera form.js:
   .form-datacrush > #z-form-container.span12 > form.z-form-horizontal
     fieldset.z-fieldset  (#fieldset_first_name / _email / _phone / _consulta )
       .z-control-group > label.z-label + .z-controls > input/textarea.z-form-control
     .z-control-button > button.z-btn.z-btn-primary
   ============================================================ */

/* Contenedor a lo ancho (span12 es grid viejo de Bootstrap con float/width fijo) */
.form-datacrush #z-form-container.span12 {
  width: 100% !important;
  margin-left: 0 !important;
  float: none !important;
}

/* El form como grilla flexible */
.form-datacrush .z-form-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 30px;
  align-items: flex-end;
}

/* Reset de los fieldset (traen borde/margen/padding propios) */
.form-datacrush .z-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.form-datacrush .z-control-group { margin: 0; }

/* Nombre / Teléfono / Email → 3 columnas */
.form-datacrush #fieldset_first_name,
.form-datacrush #fieldset_email,
.form-datacrush #fieldset_phone {
  flex: 1 1 calc(33.333% - 20px);
}

/* Consulta y botón → fila completa */
.form-datacrush #fieldset_consulta ,
.form-datacrush .z-control-button {
  flex: 1 1 100%;
  width: 100%;
}

/* Orden visual como la captura 2: Nombre · Teléfono · Email
   (si reordenás los campos en el portal DataCrush, borrá estas 5 líneas) */
.form-datacrush #fieldset_first_name            { order: 1; }
.form-datacrush #fieldset_phone                 { order: 2; }
.form-datacrush #fieldset_email                 { order: 3; }
.form-datacrush #fieldset_consulta  { order: 4; }
.form-datacrush .z-control-button               { order: 5; }

/* Labels en blanco, arriba del campo */
.form-datacrush .z-label,
.form-datacrush .z-control-label {
  display: block;
  float: none !important;
  width: auto !important;
  color: #fff !important;
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
  margin: 0 0 10px !important;
  padding: 0 !important;
}

.form-datacrush .z-controls { margin: 0 !important; }

/* Inputs y textarea: solo línea inferior, fondo transparente, texto blanco */
.form-datacrush .z-form-control {
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .6) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 !important;
  color: #fff !important;
  font-size: 1rem;
  outline: none !important;
  -webkit-appearance: none;
          appearance: none;
}
.form-datacrush .z-form-control:focus {
  border-bottom-color: #fff !important;
}
.form-datacrush .z-form-control::placeholder { color: rgba(255, 255, 255, .5); }

/* Matar el fondo blanco del autocompletar del navegador */
.form-datacrush .z-form-control:-webkit-autofill,
.form-datacrush .z-form-control:-webkit-autofill:hover,
.form-datacrush .z-form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 9999s ease-in-out 0s;
}

/* Textarea */
.form-datacrush textarea.z-form-control {
  min-height: 56px;
  resize: vertical;
}

/* Botón Enviar: pill blanco con texto navy */
.form-datacrush .z-control-button { margin-top: 8px; }
.form-datacrush .z-btn,
.form-datacrush .z-btn-primary {
  display: inline-block;
  background: #fff !important;
  color: #2F2F68 !important;
  border: 0 !important;
  border-radius: 50px !important;
  padding: 12px 42px !important;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none !important;
  transition: opacity .2s ease;
}
.form-datacrush .z-btn:hover { opacity: .85; }

/* Ocultar el <p id="help"> vacío para que no meta espacio de más */
.form-datacrush .z-help-block:empty { display: none; }

/* Mobile: los 3 campos pasan a una columna */
@media (max-width: 767px) {
  .form-datacrush #fieldset_first_name,
  .form-datacrush #fieldset_email,
  .form-datacrush #fieldset_phone {
    flex: 1 1 100%;
  }
}