/* assets/formulario.css */

/* ===== Variables de color ===== */
:root{
  --ov-orange: #FF7A00;
  --ov-orange-2:#FF6A00;
  --ov-peach:#F7B48B;
  --ov-gray:#CCCCCC;
  --ov-gray-mid:#D3D3D3;
  --ov-dark:#1E1E1E;
  --ov-bg:#EBECED;
}

@font-face {
  font-family: 'Sora';
  src: url('Sora-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; /* ya que es variable, cubre de Thin a Black */
  font-style: normal;
}

h1, h2, h3, h4 {line-height: 1.2 !important;}

/* Wrapper */

.et_pb_code_inner {
    padding-left: 12px;
    padding-right: 12px;
}
.ov-wrapper{
  width:100%;
  background:#fff;
  border-radius:20px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    padding: 10px;
}

p#ov-intro-desc {
    padding-left: 16px;
    padding-right: 16px;
    margin-bottom: 50px;
}
.textod {
    font-family: Nunito Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: 0.3px;
    color: #000000;
}

/* Progreso 100% */
/* ====== BARRA DE PROGRESO POR PORCENTAJE ====== */
.ov-progressbar{
  background: #ffffff;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}
.ov-progressbar-track{
   background: linear-gradient(90deg, #ff9966 0%, #ff6600 100%);
  border-radius: 10px;
  height: 12px;
  position: relative;
  overflow: hidden;
}
.ov-progressbar-fill{
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff9966 0%, #ff6600 100%);
  transition: width .25s ease;
}
.ov-progressbar-label{
  text-align: right;
  margin-top: 6px;
  font-weight: 700;
  color: #ff7a00;
}
.ov-progressbar-percent{ font-variant-numeric: tabular-nums; }

/* capcha */
.captcha-group { 
  text-align: center;          /* centra contenido inline/inline-block */
}
.captcha-group .cf-turnstile { 
  display: inline-block;       /* permite que text-align lo centre */
}
#captchat{
  text-align: center;
}

/* Titulares y copy */

.et_pb_row.et_pb_row_2 {
    width: 100%;
    position: relative;
    overflow: hidden;
}

h2{font-size:24px;font-weight:700;color:#2E2E2E;text-align:center;margin-bottom:10px; font-family: Nunito Sans;}
p.desc{font-size:14px;color:#000000;text-align:left;margin-bottom:25px; font-family: Nunito Sans;}

/* Formulario */
#orientador-contacto{display:flex;flex-direction:column;gap:15px;}

#orientador-contacto {
Align-items: center;
}
p.desc {
text-align: center;
}

.field-group{position:relative;margin-bottom:10px;}
.field-group input{
  width:100%;padding:17px 12px 18px;border:1px solid #000000;border-radius:12px;
  font-size:16px;outline:none;background:#fff;
  font-family: Nunito Sans;
}
.field-group label{
  position:absolute;top:0;left:16px;background:#fff;transform:translateY(-50%);
  font-size:12px;color:#000;padding:0 4px;font-weight:500;
}
.field-group .placeholder{
  position:absolute;top:50%;left:16px;transform:translateY(-50%);
  color:#b3b3b3;font-size:13px;pointer-events:none;transition:.2s ease;
}

.field-group input:focus+label{color:#FF6B00;}
.field-group input:focus~.placeholder,
.field-group input:not(:placeholder-shown)~.placeholder{opacity:0;visibility:hidden;}

.field-group {
width: 100%;
max-width: 690px;
}


/* Teléfono prefijo */
.phone-group{position:relative;}
.phone-prefix{position:absolute;top: 51%;left:12px;transform:translateY(-50%);font-size:16px;color:#333;pointer-events:none; font-family: Nunito Sans;}
.phone-group input{padding-left:58px;}

/* Legal */
.legal{
  
 color:#000;
 margin-top:10px;
 line-height:1.4;
font-family: Nunito Sans;
font-weight: 400;
font-style: Regular;
font-size: 14px;
leading-trim: NONE;
line-height: 120%;
letter-spacing: 0%;

}
.field-group.phone-group.has-error .phone-prefix {
    top: 36%;
}

/* Botones base del form */
.btns{
  display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}
.btn-volver{
  
    background: #fff;
    color: #343A40;
    min-width: 168px;
    border-radius: 50px;
    padding-top: 8px;
    padding-right: 24px;
    padding-bottom: 8px;
    padding-left: 24px;
    gap: 10px;
    angle: 0 deg;
    opacity: 1;
    border-width: 2px;
    border: 2px solid #343A40;
    font-family: Nunito Sans;
    font-weight: 800;
    font-style: ExtraBold;
    font-size: 20px;
    leading-trim: NONE;
    line-height: 34px;
    letter-spacing: 0px;

}
.btn-volver:hover{background:#f5f5f5;}
.btn-enviar{
    background: var(--ov-orange);
    color: #fff;
    min-width: 168px;
    border-radius: 50px;
    padding-top: 8px;
    padding-right: 24px;
    padding-bottom: 8px;
    padding-left: 24px;
    gap: 10px;
    angle: 0 deg;
    opacity: 1;
    border-width: 1px;
    border: 1px solid #F96B06;
    font-family: Nunito Sans;
    font-weight: 800;
    font-style: ExtraBold;
    font-size: 20px;
    leading-trim: NONE;
    line-height: 34px;
    letter-spacing: 0px;

}
.btn-enviar:hover{background:#e45f00;}

/* ===== Resultados ===== */
.ov-result{
  display:none;text-align:center;background:#fff;border-radius:16px;border:1px solid #eee;padding:24px 16px;margin-top:10px;
}
.ov-result[hidden]{display:none!important;}
.ov-result:not([hidden]){display:block;}
.ov-result-icon{width:96px;height:auto;margin:0 auto 12px;display:grid;place-items:center;}
.ov-result h3{margin:8px 0 6px;font-size:22px;line-height:1.25;font-weight:800;color:#2E2E2E;}
.ov-success h3{color:#0097A1;}           /* teal título éxito */
.ov-success-sub{font-size:14px;color:#000;margin:0 0 16px; text-align: left;}
.ov-error h3{color:#2E2E2E;}             /* título gris oscuro */

.ov-result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px;}

/* Botón outlined pill (como mock) */
.btn-outline{
  display:block;width:100%;
  text-align:center;text-decoration:none;
  color:#2E2E2E;background:#fff;border:2px solid #2E2E2E;
  padding:12px 18px;border-radius:9999px;font-weight:800;font-size:20px;
}
.btn-outline:hover{background:#f7f7f7;}
/* ... (todo lo anterior que ya tenías) ... */

/* Estado de error en campo */
.field-group.has-error input {
  border-color: #e42727 !important;
}

/* Mensaje de error bajo el campo */
.ov-error-msg {
  display: none;            /* oculto si no hay error */
  gap: 8px;
  align-items: flex-start;
  color: #e42727;           /* rojo/magenta corporativo */
  font-size: 12px;
  line-height: 1.25;
  margin-top: 6px;
}
.ov-error-msg svg {
  width: 16px;              /* icono pequeñito */
  height: auto;
  flex: 0 0 auto;
  margin-top: 1px;
}
.ov-error-msg.show {
  display: inline-flex;     /* se muestra cuando hay error */
}

.ov-wrapper {
Padding: 10px 64px 64px 64px !important;
}


.ov-wrapper .ov-error-msg {
  color: #e42727 !important;     /* rojo/magenta corporativo del ícono */
}

/* Borde del input en error */
.ov-wrapper .field-group.has-error input {
  border-color: #e42727 !important;
  box-shadow: 0 0 0 1px rgba(232, 32, 133, .12);
}

/* Asegurar color del ícono inline */
.ov-wrapper .ov-error-msg svg path,
.ov-wrapper .ov-error-msg svg line {
  stroke: #e42727 !important;
}

/* ===== Select (mismo estilo que input) ===== */
.field-group select {
  width: 100%;
  padding: 17px 36px 18px 12px;
  border: 1px solid #000000;
  border-radius: 12px;
  font-size: 16px;
  outline: none;
  background: #fff;
  font-family: Nunito Sans;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  color: #333;
}
.field-group select:focus {
  border-color: #FF6B00;
}
.field-group select:focus + label {
  color: #FF6B00;
}
/* El label del select siempre está flotado (select siempre muestra algo) */
.field-group:has(select) label {
  position: absolute;
  top: 0;
  left: 16px;
  background: #fff;
  transform: translateY(-50%);
  font-size: 12px;
  color: #000;
  padding: 0 4px;
  font-weight: 500;
}
/* Error en select */
.ov-wrapper .field-group.has-error select {
  border-color: #e42727 !important;
  box-shadow: 0 0 0 1px rgba(232, 32, 133, .12);
}

@media (max-width: 500px) {
div#menu-orientador {
    width: px;
    /* position: absolute; */
    /* z-index: 1; */
    left: 0;
    border-radius: 0px 99px 99px 0px;
    width: -webkit-fill-available;
}
.et_pb_module.et_pb_code.et_pb_code_0 {
    padding-right: 20px;
}
.ov-radio {
    width: 60px;
}
.ov-actions, .btns {
    flex-direction: column-reverse;
}

.et_pb_row_0 {
    min-height: 200px !important;
}
.et_pb_column.et_pb_column_4_4.et_pb_column_0.et_pb_css_mix_blend_mode_passthrough.et-last-child {
    margin-bottom: 20px;
}
  .ov-wrapper .ov-progressbar .ov-progressbar-fill{ width:100% !important; }
  .ov-wrapper .ov-progressbar .ov-progressbar-track{ background:#F0F0F0 !important; }
  .phone-prefix{top: 50%; }

  .ov-wrapper {
Padding: 10px 24px 64px 24px !important;
}


}