/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/***INDICE***/
/*---Colores principales---*/
/*---Arco foto---*/
/*---Formulario de contacto---*/


/*---Colores principales---*/
.red {
	color: var( --e-global-color-primary );
}

.green {
	color: var( --e-global-color-accent );
}

/*---Arco foto---*/
/*Para crear el efecto de arco a las fotografías*/

.arco-hero {
  --desfase: 18px;                 /* cuánto se desplaza la línea */
  --linea: #d9b8b3;                /* rosa empolvado del marco */
  position: relative;
  isolation: isolate;              /* el marco queda detrás de la foto, pero visible */
  margin: var(--desfase) 0 0 var(--desfase); /* hueco para que el marco no se corte */
}

/* La línea del marco */
.arco-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--linea);
  border-radius: 50% 50% 16px 16px / 40% 40% 16px 16px;
  transform: translate(calc(var(--desfase) * -1), calc(var(--desfase) * -1));
  z-index: -1;
  pointer-events: none;
}

/* La foto en arco */
.arco-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 50% 50% 16px 16px / 40% 40% 16px 16px;
}

@media (max-width: 767px) {
  .arco-hero { 
    --desfase: 10px; 
  }
}

/*---Formulario de contacto---*/
/* Formulario CF7 a 2 columnas responsive */

#responsive-form {
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


.column-half,
.column-full {
  position: relative;
  padding: 0.65rem;
  width: 100%;
  box-sizing: border-box;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.padding-0 .column-full {
	padding: 0 0.65rem;
}

#responsive-form p {
  margin-bottom: 0;
}

.wpcf7-list-item-label a {
	font-size: 14px;
}

.wpcf7 .field-label {
  display: block;
  margin-bottom: 8px;
}

.wpcf7-list-item {
	margin-left: 0!important;
}
.wpcf7-list-item-label {
	margin-left: 4px;
}

.wpcf7 [type=submit] {
	border: 0;
}
#responsive-form p > label,
#responsive-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

#responsive-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.wpcf7 select.wpcf7-select {
  /* Quitar el estilo nativo del navegador */
  -webkit-appearance: none;
  appearance: none;

  /* Igualar al resto de campos */
  width: 100%;
  height: 38px;
  padding: 0 40px 0 12px;
  font-family: inherit;
  font-size: 16px;
  color: inherit;
  background-color: #fff;
  border: 1px solid var( --e-global-color-v4-borde ); 
  border-radius: 8px;
  box-sizing: border-box;
  cursor: pointer;

  /* Flecha personalizada */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b08a7e' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}

/* Mismo estado de foco que los demás campos */
.wpcf7 select.wpcf7-select:focus {
  outline: none;
  border-color: #c4958a;
}

/*mensaje output*/

.wp-theme-hello-elementor .wpcf7 form .wpcf7-response-output {
  margin: 8px 8px 0px 8px;
  border-radius: 8px;
  padding: 4px 12px;
}

/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) {
  .column-half {
    width: 50%;
  }
}