/* ===== Contact Form 7 – Estilo moderno 2 columnas (tipografía tipo Apple) ===== */
:root{
  --cf7-primary: #0B84FE;         /* color principal (puedes cambiarlo) */
  --cf7-accent:  #5AC8FA;         /* acento suave */
  --cf7-bg:      #ffffff;
  --cf7-text:    #0f0f0f;
  --cf7-muted:   #6b7280;
  --cf7-border:  #e5e7eb;
  --cf7-focus:   rgba(11,132,254,.25);
  --cf7-radius:  14px;
}

/* Contenedor */
.wpcf7 form .cf7-modern{
  /* Pila de fuentes tipo Apple/SF */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               Segoe UI, Roboto, Inter, system-ui, Helvetica, Arial, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

  font-size: 22px;               /* un poco más grande */
  line-height: 1.5;
  background: var(--cf7-bg);
  border: 1px solid var(--cf7-border);
  border-radius: 18px;
  padding: 26px;
  color: var(--cf7-text);
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
}

/* Grid 2 columnas */
.wpcf7 form .cf7-modern.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.wpcf7 form .cf7-modern .field{ display: flex; flex-direction: column; gap: 8px; }
.wpcf7 form .cf7-modern .field-full{ grid-column: 1 / -1; }

.wpcf7 form .cf7-modern label{
  font-weight: 650;
  font-size: 15.5px;
  color: var(--cf7-text);
  letter-spacing: .2px;
}
.wpcf7 form .cf7-modern .req{ color: #e11d48; }

/* Inputs */
.wpcf7 form .cf7-modern input[type="text"],
.wpcf7 form .cf7-modern input[type="email"],
.wpcf7 form .cf7-modern input[type="tel"],
.wpcf7 form .cf7-modern select,
.wpcf7 form .cf7-modern textarea{
  width: 100%;
  border: 1px solid var(--cf7-border);
  border-radius: var(--cf7-radius);
  padding: 15px 16px;
  font-size: 16.5px;
  background: #FAFAFA;
  color: var(--cf7-text);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .06s ease;
  outline: none;
}

.wpcf7 form .cf7-modern textarea{ min-height: 150px; resize: vertical; }

/* Focus */
.wpcf7 form .cf7-modern input:focus,
.wpcf7 form .cf7-modern select:focus,
.wpcf7 form .cf7-modern textarea:focus{
  border-color: var(--cf7-primary);
  box-shadow: 0 0 0 6px var(--cf7-focus);
  background: #fff;
}

/* Placeholder */
.wpcf7 form .cf7-modern ::placeholder{ color: var(--cf7-muted); opacity: .95; }

/* Select con flecha minimal */
.wpcf7 form .cf7-modern select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cf7-muted) 50%),
    linear-gradient(135deg, var(--cf7-muted) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 22px) calc(50% - 4px),
    calc(100% - 16px) calc(50% - 4px),
    calc(100% - 2.2em) .6em;
  background-size: 6px 6px, 6px 6px, 1px 2.6em;
  background-repeat: no-repeat;
}

/* Consentimientos (acceptance) */
.wpcf7 form .cf7-modern .consent-wrapper{
  display: grid;
  gap: 8px;
}
.wpcf7 form .cf7-modern .acceptance-group{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  background: #fbfbfb;
}

/* Estilo del checkbox nativo con accent-color (compatible y accesible) */
.wpcf7-acceptance input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--cf7-primary);
  cursor: pointer;
}
.wpcf7 form .cf7-modern .acceptance-group label{
  font-weight: 500;
  color: #1f2937;
}

/* Enlaces */
.wpcf7 form .cf7-modern a{
  color: var(--cf7-primary);
  text-underline-offset: 2px;
}

/* Botón grande, centrado, con icono 💳 */
.wpcf7 form .cf7-modern .actions{
  display: flex;
  justify-content: center;  /* centrado */
}
.wpcf7 form .cf7-modern .btn.btn-primary.btn-big{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;             /* más grande */
  min-width: 240px;               /* ancho mínimo cómodo */
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--cf7-primary), var(--cf7-accent));
  color: #fff;
  font-weight: 760;
  font-size: 17px;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 18px 36px rgba(0,0,0,.10), 0 8px 16px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.wpcf7 form .cf7-modern .btn.btn-primary.btn-big:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 44px rgba(0,0,0,.12), 0 10px 20px rgba(0,0,0,.08);
  filter: saturate(1.03);
}
.wpcf7 form .cf7-modern .btn.btn-primary.btn-big:active{
  transform: translateY(0);
}

/* Mensajes de validación */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.sent .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output{
  border-radius: var(--cf7-radius);
  padding: 12px 14px;
  margin-top: 10px;
  font-size: 15px;
}
.wpcf7-form.invalid .wpcf7-response-output{ border-color: #f59e0b; background: #FFF7E6; }
.wpcf7-form.sent .wpcf7-response-output{ border-color: #10b981; background: #ECFDF5; }
.wpcf7-form.failed .wpcf7-response-output{ border-color: #ef4444; background: #FEF2F2; }
.wpcf7-not-valid-tip{ font-size: 12.5px; margin-top: 6px; color: #ef4444; }

/* Responsive: 1 columna en móviles */
@media (max-width: 640px){
  .wpcf7 form .cf7-modern.two-col{ grid-template-columns: 1fr; }
}

/* Checkbox + texto en la misma línea */
.wpcf7 .acceptance-inline .wpcf7-list-item{
  display: inline-flex;
  align-items: center;
  gap: 10px;            /* separa casilla y texto */
}

/* Opcional: separación entre los dos consentimientos */
.wpcf7 .consent-wrapper .wpcf7-form-control-wrap{
  display: block;
  margin-bottom: 8px;
}

/* Que los consentimientos ocupen todo el ancho del grid de 2 columnas */
.wpcf7 form .cf7-modern .field-full{ grid-column: 1 / -1; }

/* Checkbox + texto en la misma línea */
.wpcf7 form .cf7-modern .acceptance-group .wpcf7-list-item label{
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
}

/* Separación vertical entre ambos consentimientos */
.wpcf7 form .cf7-modern .consent-wrapper .acceptance-group{
  margin-bottom: 10px;
}

:root{
  --cf7-primary:#0a2a6c; /* azul oscuro */
  --cf7-accent:#0a2a6c;  /* mismo tono para evitar degradado */
}
.wpcf7 form .cf7-modern .btn.btn-primary.btn-big{
  background: var(--cf7-primary) !important;
  background-image: none !important;
}

/* ——— Tipografía elegante y grande ——— */

/* (opcional) usa una fuente moderna */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

.wpcf7 form .cf7-modern{
  /* si no quieres Google Fonts, quita la línea de Plus Jakarta Sans */
  font-family: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont,
               "SF Pro Text", "SF Pro Display", Segoe UI, Roboto, system-ui,
               Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
  font-size: 18px;             /* base más grande */
  line-height: 1.65;           /* más aire */
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Títulos dentro del form */
.wpcf7 form .cf7-modern h3{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .2px;
  margin: 2px 0 6px;
  text-wrap: balance;
}
.wpcf7 form .cf7-modern h5{
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .15px;
  margin: 0 0 6px;
  text-wrap: balance;
}

/* Etiquetas y consentimientos */
.wpcf7 form .cf7-modern label{ font-size: 22px; font-weight: 600; }
.wpcf7 form .cf7-modern .acceptance-group{ font-size: 16.8px; }

/* Campos */
.wpcf7 form .cf7-modern input[type="text"],
.wpcf7 form .cf7-modern input[type="email"],
.wpcf7 form .cf7-modern input[type="tel"],
.wpcf7 form .cf7-modern select,
.wpcf7 form .cf7-modern textarea{
  font-size: 17.5px;
  padding: 16px 18px;          /* acorde al tamaño */
  border-radius: 16px;
}
.wpcf7 form .cf7-modern ::placeholder{ font-size: 15.5px; }

/* Botón grande (azul oscuro ya aplicado) */
.wpcf7 form .cf7-modern .btn.btn-primary.btn-big{
  font-size: 18px;
  letter-spacing: .4px;
  font-weight: 760;
  padding: 18px 30px;
}

/* Ajuste móvil: evita que se vea demasiado grande */
@media (max-width:640px){
  .wpcf7 form .cf7-modern{ font-size: 17px; }
  .wpcf7 form .cf7-modern h3{ font-size: 21px; }
  .wpcf7 form .cf7-modern .btn.btn-primary.btn-big{ font-size: 17px; }
}
/* —— Alinear y unificar tamaño de las casillas —— */

/* El contenedor no hace grid; lo hace el label interno */
.wpcf7 form .cf7-modern .acceptance-group{
  display: block;                       /* antes estaba en grid */
  padding: 14px 16px;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  background: #fbfbfb;
}

/* Elimina márgenes/variaciones del wrapper y del list-item */
.wpcf7 form .cf7-modern .acceptance-group .wpcf7-form-control-wrap,
.wpcf7 form .cf7-modern .acceptance-group .wpcf7-form-control,
.wpcf7 form .cf7-modern .acceptance-group .wpcf7-list-item{
  display: block;
  margin: 0;
}

/* Aquí sí hacemos la rejilla: checkbox + texto, siempre igual */
.wpcf7 form .cf7-modern .acceptance-group .wpcf7-list-item > label{
  display: inline-grid;
  grid-template-columns: 20px 1fr;      /* 1ª col: checkbox, 2ª: texto */
  gap: 12px;
  align-items: start;
  line-height: 1.6;
}

/* Tamaño idéntico del checkbox en todos los acceptances */
.wpcf7 form .cf7-modern .acceptance-group input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--cf7-primary);
}

/* 1) Foco más sutil (adiós aro azul gigante) */
:root{ --cf7-focus: rgba(10,42,108,.18); }           /* mismo azul oscuro, más suave */
.wpcf7 form .cf7-modern select:focus{
  outline: none;                                     /* quita el borde del navegador */
  box-shadow: 0 0 0 3px var(--cf7-focus);            /* halo fino */
}

/* 2) Normalizar el <select> y quitar la flecha rara */
.wpcf7 form .cf7-modern select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color:#FAFAFA;
  background-image:none;                             /* elimina los triángulos previos */
  border: 1px solid var(--cf7-border);
  border-radius: var(--cf7-radius);
  padding: 14px 44px 14px 16px;                      /* espacio para la flecha */
  line-height: 1.35;
}
select::-ms-expand{ display:none; }                  /* IE/Edge legacy */

/* 3) Flecha minimal hecha con CSS (no depende del SO) */
.wpcf7 form .cf7-modern .wpcf7-form-control-wrap{ position: relative; }
.wpcf7 form .cf7-modern .wpcf7-form-control-wrap > select + i.select-arrow{
  position:absolute; right:16px; top:50%; transform:translateY(-50%) rotate(45deg);
  width:8px; height:8px; border-right:2px solid var(--cf7-muted);
  border-bottom:2px solid var(--cf7-muted); pointer-events:none; content:"";
}

/* Si no puedes insertar el <i>, usa :has como alternativa moderna: */
@supports(selector(:has(*))){
  .wpcf7 form .cf7-modern .wpcf7-form-control-wrap:has(> select)::after{
    content:""; position:absolute; right:16px; top:50%; transform:translateY(-50%) rotate(45deg);
    width:8px; height:8px; border-right:2px solid var(--cf7-muted);
    border-bottom:2px solid var(--cf7-muted); pointer-events:none;
  }
}

/* ================== SUBMENÚS DIVI ================== */
@media only screen and (min-width: 981px) {

  /*** Estilos sub menú Divi corregidos ***/
  .et_pb_menu .sub-menu {
    margin-top: 0;                 /* sin hueco entre el padre y el submenú */
    border-radius: 6px;
    border-top: none;
    box-shadow: 0px 2px 16px rgb(0 0 0 / 20%);
    padding: 12px 0 !important;
  }

  /* Fondo blanco en TODO el desplegable */
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .nav li ul,
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .nav li ul li,
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .nav li ul li a {
    background-color: #ffffff !important;
  }

  /* >>> COLOR DEL TEXTO SUBMENÚ <<< */
  .et_pb_menu .sub-menu li a,
  .et_pb_menu .sub-menu li a:link,
  .et_pb_menu .sub-menu li a:visited {
    width: 100%;
    padding: 14px 25px;
    color: #333333 !important;  /* cambia a tu color */
  }

  .et_pb_menu .sub-menu li a:hover {
    color: #ff6923 !important;
    background-color: #f9f9f9 !important;  /* blanco roto suave */
    opacity: 1;
  }

  /* Icono marcador arriba del submenu */
  .et_pb_menu nav > ul > li > .sub-menu:after {
    position: absolute;
    content:'';
    left: 36px;
    top: -14px;                         /* más pegado al dropdown */
    border-style: solid;
    border-width: 14px;
    border-color: transparent transparent #ffffff;
  }
}

/* Icono indicador sub menu */
.et-menu .menu-item-has-children>a:first-child:after {
  content: "\43";
}
.et-menu li ul .menu-item-has-children>a:first-child:after {
  content: "\45" !important;
}

/* ================== CORRECCIÓN ESTADOS ACTIVOS SUBMENÚS (SOLO ESCRITORIO) ================== */
@media only screen and (min-width: 981px) {

  /* Color por defecto de TODOS los enlaces de submenú, aunque el padre esté activo */
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .nav li ul li a,
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .nav li ul li a:link,
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .nav li ul li a:visited {
    color: #333333 !important;
    background-color: #ffffff !important;
  }

  /* Estado ACTIVO del submenú (página actual dentro del dropdown) */
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .nav li ul li.current-menu-item > a,
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .nav li ul li.current_page_item > a,
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .nav li ul li.current-menu-ancestor > a {
    color: #ff6923 !important;          /* color destacado para el activo */
    background-color: #f9f9f9 !important;
    font-weight: 600;
  }

  /* Hover en submenú */
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .nav li ul li a:hover {
    color: #ff6923 !important;
    background-color: #f9f9f9 !important;
  }

  /* Color del item PADRE activo solo en el nivel superior */
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .nav > li.current-menu-item > a,
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .nav > li.current_page_item > a,
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .nav > li.current-menu-ancestor > a {
    color: #ffffff !important;          /* o cambia a #0a2a6c si no lo quieres blanco */
  }
}

/* =========== ESTILOS MENÚ MÓVIL DIVI =========== */
@media (max-width: 980px) {

  /* Fondo y color de texto del panel móvil */
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu,
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li,
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li a {
    background-color: #ffffff !important;   /* panel y items en blanco */
    color: #0a2a6c !important;              /* azul oscuro de la web */
  }

  /* Hover en móvil (cuando se pulsa) */
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li a:hover {
    color: #ff6923 !important;              /* el naranja que usas en desktop */
  }

  /* Items activos en móvil (página actual) */
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li.current-menu-item > a,
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li.current_page_item > a,
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li.current-menu-ancestor > a {
    color: #ff6923 !important;
    font-weight: 600;
  }

  /* Subniveles de móvil (submenús desplegados dentro del panel) */
  #page-container .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li li a {
    padding-left: 30px;                     /* un poco de sangría para hijos */
    background-color: #ffffff !important;
    color: #0a2a6c !important;
  }

}
/* Fin de los submenús */

/* Centrar definitivamente el botón de CONTACTAR del CF7 */
.wpcf7 form .cf7-modern div.actions.field-full{
  display: block !important;         /* dejamos de complicarnos con flex */
  text-align: center !important;     /* centramos el contenido */
}

.wpcf7 form .cf7-modern div.actions.field-full .btn.btn-primary.btn-big,
.wpcf7 form .cf7-modern div.actions.field-full .wpcf7-submit{
  display: inline-block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;            /* por si Divi lo flota a la derecha */
}

/* Color personalizado del botón de CONTACTAR */
.wpcf7 form .cf7-modern .btn.btn-primary.btn-big {
  background-color: #2a2a35f0 !important;
  background-image: none !important;   /* por si Divi intenta poner degradado */
}

/* Color al pasar el ratón */
.wpcf7 form .cf7-modern .btn.btn-primary.btn-big:hover {
  background-color: #2a2a35 !important;   /* mismo color sin transparencia */
  transform: translateY(-1px);
}