/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.5.1765395004
Updated: 2025-12-10 19:30:04

*/

/* =========================================================
   tabs menu (estilo solicitado)
   ========================================================= */

html, body{
  width: 100%;
  overflow-x: hidden;
}

#menu-tabs{
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ECD4BC;
}

#menu-tabs .tabs-menu{
  position: relative;
  width: 100%;
}

#menu-tabs .tabs-menu__inner{
  display: flex;
  gap: 10px;

  justify-content: center;
  align-items: center;

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;

  padding: 12px 18px;
}

#menu-tabs .tabs-menu__inner::-webkit-scrollbar{
  display: none;
}

#menu-tabs .tabs-menu__item{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;
  border-radius: 999px;

  font-family: "Aboreto", serif;
  font-size: 14px;
  line-height: 1;

  text-transform: uppercase;
  letter-spacing: 0.06em;

  background: transparent;
  border: 1px solid rgba(96,48,48,0.35);

  color: #603030;
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

#menu-tabs .tabs-menu__item:hover{
  transform: translateY(-1px);
  border-color: rgba(96,48,48,0.65);
}

#menu-tabs .tabs-menu__item.is-active{
  background: #603030;
  border-color: #603030;
  color: #ECD4BC;
}

/* fades laterales */
#menu-tabs .tabs-menu::before,
#menu-tabs .tabs-menu::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25%;
  pointer-events: none;
  z-index: 2;
}

#menu-tabs .tabs-menu::before{
  left: 0;
  background: linear-gradient(to right, #ECD4BC 0%, rgba(236,212,188,0) 100%);
}

#menu-tabs .tabs-menu::after{
  right: 0;
  background: linear-gradient(to left, #ECD4BC 0%, rgba(236,212,188,0) 100%);
}

/* =========================================================
   tabs panels: solo 1 visible
   fallback: si el js no corre, se ve belleza
   ========================================================= */

/* fallback sin js */
#tab-belleza{ display: block; }
#tab-cabello,
#tab-tecnologia,
#tab-alimentacion,
#tab-otros{ display: none; }

/* cuando el js está listo, manda body.tabs-ready y controlamos por .is-active */
body.tabs-ready #tab-belleza,
body.tabs-ready #tab-cabello,
body.tabs-ready #tab-tecnologia,
body.tabs-ready #tab-alimentacion,
body.tabs-ready #tab-otros{
  display: none !important;
}

body.tabs-ready #tab-belleza.is-active,
body.tabs-ready #tab-cabello.is-active,
body.tabs-ready #tab-tecnologia.is-active,
body.tabs-ready #tab-alimentacion.is-active,
body.tabs-ready #tab-otros.is-active{
  display: block !important;
  animation: tabsFade .18s ease-in;
}

@keyframes tabsFade{
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

#menu-tabs .tabs-menu__inner{
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}


#menu-tabs .tabs-menu__inner{
  touch-action: pan-x;
}

@media (max-width: 767px){
  #menu-tabs .tabs-menu__inner{
    padding-left: 60px !important;
    padding-right: 60px !important;
    justify-content: flex-start; /* para que se note el padding */
  }
}

input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {border: 1px solid #ECD4BC!important;background: transparent!important;border-radius:25px;color:#ECD4BC!important;margin: 5px 0;}
label {color:#ECD4BC!important;}
/* placeholder en todos los inputs/textarea (incluye contact form 7) */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder{
  color: #ECD4BC !important;
  opacity: 1 !important; /* evita que se vea “apagado” en algunos navegadores */
}

/* compatibilidad extra */
.wpcf7 input::-webkit-input-placeholder,
.wpcf7 textarea::-webkit-input-placeholder{
  color: #ECD4BC !important;
}

.wpcf7 input::-moz-placeholder,
.wpcf7 textarea::-moz-placeholder{
  color: #ECD4BC !important;
  opacity: 1 !important;
}

.wpcf7 input:-ms-input-placeholder,
.wpcf7 textarea:-ms-input-placeholder{
  color: #ECD4BC !important;
}

.wpcf7 input::-ms-input-placeholder,
.wpcf7 textarea::-ms-input-placeholder{
  color: #ECD4BC !important;
}

/* solo el select "select-nicho" */
.wpcf7 select[name="select-nicho"]{
  margin-top: -20px;
}

textarea {margin:20px 0;}
[type=button], [type=submit], button {
    background-color: #ECD4BC!important;
    border: 1px solid #ECD4BC!important;
    border-radius: 25px!important;
    color: #603030!important;
	width:100%;
	margin-top:20px;
}

.wpcf7 input[type="date"][name="date-entrega"]::-webkit-calendar-picker-indicator{
  filter: invert(88%) sepia(20%) saturate(250%) hue-rotate(350deg);
}

/* wrap solo cuando dentro hay un select */
.wpcf7 .wpcf7-form-control-wrap:has(select.wpcf7-select){
  position: relative;
  display: block;
}

/* quitar flecha nativa y dejar hueco */
.wpcf7 select.wpcf7-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
}

/* flecha custom con 10px al borde derecho (solo en selects) */
.wpcf7 .wpcf7-form-control-wrap:has(select.wpcf7-select)::after{
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 10px;
  height: 6px;
  transform: translateY(-50%);
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 10px 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23ECD4BC' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
}

.wpcf7 form.sent .wpcf7-response-output {
    text-align: center;
    color: #ECD4BC!important;
}

/* CALL TO ACTION */
.cta-bottom-bar {
   mask-image: url('https://lauraroyougc.com/wp-content/uploads/2025/12/background-call-to-action-lauraroyougc.svg');
  -webkit-mask-image: url('https://lauraroyougc.com/wp-content/uploads/2025/12/background-call-to-action-lauraroyougc.svg');
  mask-repeat: no-repeat;
  mask-size: cover;
  -webkit-mask-position-x: center;
  mask-position: center;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px) brightness(0.97);
  -webkit-backdrop-filter: blur(10px) brightness(0.97);
  box-shadow: 0 0 20px rgba(0,0,0,0.15);
}

/* iOS: estabilizar input date CF7 */
.wpcf7 input[type="date"][name="date-entrega"]{
  -webkit-appearance: none;
  appearance: none;

  display: block;
  width: 100%;
  box-sizing: border-box;

  /* Ajusta estos 3 valores a tu diseño */
  min-height: 52px;
  padding: 0 0px 0 18px;
  line-height: 52px;

  /* Mantén tu look */
  border: 1px solid #ECD4BC !important;
  background: transparent !important;
  border-radius: 25px !important;
  color: #ECD4BC !important;
}

/* Alinear el valor interno en iOS */
.wpcf7 input[type="date"][name="date-entrega"]::-webkit-date-and-time-value{
  text-align: left;
  line-height: 52px;
}

/* Calendario: tamaño y posición más consistentes */
.wpcf7 input[type="date"][name="date-entrega"]::-webkit-calendar-picker-indicator{
  width: 18px;
  height: 18px;
  margin-right: 16px;
  opacity: 1;
}