/* Keepy · /contacto/ (página 2058) — familia kcon-*
   Escrito por el snippet "Keepy · CSS de /contacto/". No editar a mano: se sobrescribe.
   v1 · 2 de agosto de 2026 */

/* 1 · Rejilla. Sin esto Divi sirve las filas al 80 % (1.037 px en vez de 1.180,
   281 en vez de 351 en móvil) y con un gap de 5,5 % (~57 px). El ancho de columna
   sale de calc() sobre --horizontal-gap-parent: hay que fijar las tres variables. */
.kcon .et_pb_row{
  --row-gutter-horizontal:16px;
  --horizontal-gap:16px;
  --horizontal-gap-parent:16px;
  column-gap:16px!important;
  row-gap:16px!important;
  max-width:1180px!important;
  width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* 1b · La sección con formulario nativo tiene una regla propia de Divi
   (.et-db .et_pb_section:has(.et_pb_contact_form) .et_flex_row) con max-width 1200
   y sin width, que gana por especificidad. Se iguala al resto. */
.et-db .kcon.et_pb_section:has(.et_pb_contact_form) .et_flex_row,
.et-db .et_pb_section.kcon:has(.et_pb_contact_form) .et_pb_row{
  max-width:1180px!important;
  width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* 2 · Tarjetas: que todas midan lo mismo dentro de su fila */
.kcon .et_pb_row > .et_pb_column{display:flex;flex-direction:column}
.kcon .et_pb_row > .et_pb_column > .et_pb_module{width:100%}

/* 3 · Enlaces: foco visible y área táctil suficiente */
.kcon a:focus-visible,
.kcon button:focus-visible,
.kcon input:focus-visible,
.kcon select:focus-visible,
.kcon textarea:focus-visible{
  outline:3px solid #616B00!important;
  outline-offset:2px!important;
  border-radius:6px;
}
.kcon .et_pb_text a{text-underline-offset:2px}

/* 4 · Formulario nativo. A 1.180 px de ancho los campos son incómodos de leer
   y de rellenar: se limita a una medida de formulario. */
.kcon-form .et_pb_contact_form_container{max-width:760px!important;margin:0 auto!important}
.kcon-form .kcon-form-pie{max-width:760px;margin-left:auto;margin-right:auto}
.kcon .et_pb_contact_form_container .et_pb_contact_field{padding:0 0 12px!important}
.kcon .et_pb_contact_form input[type=text],
.kcon .et_pb_contact_form input[type=email],
.kcon .et_pb_contact_form select,
.kcon .et_pb_contact_form textarea{
  background:#ffffff!important;
  border:1px solid #D1D5DB!important;
  border-radius:12px!important;
  padding:14px 16px!important;
  font-size:16px!important;          /* menos de 16 px hace que iOS haga zoom al enfocar */
  color:#212529!important;
  line-height:1.4!important;
}
.kcon .et_pb_contact_form ::placeholder{color:#6B7280!important;opacity:1}
.kcon .et_pb_contact_form select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235B6470' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 16px center!important;padding-right:44px!important}

/* 4a · Las etiquetas. Divi las oculta con display:none y eso las saca del árbol
   de accesibilidad: los cinco <select> se quedan SIN nombre accesible (axe:
   select-name, crítico). Se ocultan con la técnica visually-hidden, que sí cuenta.
   De paso desaparece la etiqueta duplicada de la casilla. */
.kcon .et_pb_contact_form .et_pb_contact_form_label{
  display:block!important;
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;border:0!important}
.kcon .et_pb_contact_form .et_pb_contact_field_options_title{display:none!important}

/* 4b · La casilla de consentimiento. El input nativo mide 0x0 y el cuadro visible
   es el <i> de dentro de su <label>: el objetivo táctil se construye ahí. */
.kcon .et_pb_contact_form .et_pb_contact_field_checkbox{display:block}
.kcon .et_pb_contact_form .et_pb_contact_field_checkbox label{
  display:flex!important;align-items:center;gap:12px;
  min-height:44px;padding:8px 2px;cursor:pointer;
  font-size:15px!important;color:#212529!important;line-height:1.45}
.kcon .et_pb_contact_form .et_pb_contact_field_checkbox label i{
  flex:0 0 24px;width:24px!important;height:24px!important;
  border-radius:6px!important;border:2px solid #6B7280!important;
  background:#fff!important;margin:0!important;position:relative;top:0!important}
.kcon .et_pb_contact_form .et_pb_contact_field_checkbox input[type=checkbox]:checked+label i:before{
  border-color:#616B00!important;color:#616B00!important}
.kcon .et_pb_contact_form .et_pb_contact_field_checkbox input[type=checkbox]:focus-visible+label i{
  outline:3px solid #616B00;outline-offset:3px}

/* 4b-bis · El texto legal y el "qué pasa después" van bajo el formulario:
   se alinean a su misma medida, no a los 1.180 de la fila. */
.kcon-form .et_pb_row + .et_pb_row .et_pb_text .et_pb_text_inner{
  max-width:760px;margin-left:auto;margin-right:auto}

/* 4c · Botón de envío. Divi lo flota a la derecha; centrado bajo un formulario
   de una columna se lee mejor. */
.kcon .et_pb_contact_form .et_contact_bottom_container{
  float:none!important;width:100%!important;text-align:center!important;margin-top:6px}
.kcon .et_pb_contact_form .et_pb_button,
.kcon .et_pb_contact_form button[type=submit]{
  background:#C2D500!important;color:#212529!important;
  border:0!important;border-radius:12px!important;
  padding:15px 30px!important;font-size:17px!important;font-weight:800!important;
  letter-spacing:0!important;transition:background .15s ease}
.kcon .et_pb_contact_form .et_pb_button:hover{background:#B0C100!important}
.kcon .et_pb_contact_form .et_pb_button:after{display:none!important}

/* 5 · Acordeón: que el título ocupe toda la fila y sea cómodo de pulsar */
.kcon .kcon-acordeon .et_pb_toggle_title{padding:16px 46px 16px 18px!important;font-size:17px!important}
.kcon .kcon-acordeon .et_pb_toggle_content{padding:0 18px 16px!important}

/* 6 · Móvil */
@media(max-width:767px){
  .kcon .et_pb_row{--horizontal-gap-parent:14px;column-gap:14px!important;row-gap:14px!important}
  .kcon-hero .et_pb_text a{width:100%;justify-content:center}
  .kcon .et_pb_contact_form .et_pb_button{width:100%!important}
}