/**
Theme Name: UMAMI Hosting
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: umami-hosting
Template: astra
*/


/* ===== Landing Alojamiento Web (WPBakery) ===== */

.ld-section { padding: 56px 18px; }
.ld-center { text-align: center; }
.ld-maxw { max-width: 860px; margin: 0 auto; }
.ld-h1 { font-weight: 800; letter-spacing: -0.02em; }
.ld-h2 { font-weight: 800; letter-spacing: -0.02em; }
.ld-h3 { font-weight: 400; letter-spacing: -0.01em; margin: 0 0 8px; }

.ld-lead { font-size: 18px; line-height: 1.55; }
.ld-micro { font-size: 13px; opacity: .85; }

.ld-card {
  background: #ffffff;
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(17,17,17,.06);
}

.xxxld-hero {
  position: relative;
  overflow: hidden;
}

/* Overlay sobre la imagen */
.xxxld-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 1;
}

/* Contenido por encima del overlay */
.xxxld-hero .wpb_column,
.xxxld-hero .vc_column-inner,
.xxxld-hero .wpb_wrapper {
  position: relative;
  z-index: 2;
}

/* Curva inferior con barriga + sombra elegante */
.xxxld-hero::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: -5%;
  width: 110%;
  height: 80px;
  background: #ffffff;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 3;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
}

.ld-formcard h2 { margin: 0 0 8px; }
.ld-formcard .ld-sub { margin: 0 0 14px; opacity: .9; }
.ld-formnote { margin-top: 10px; font-size: 12.5px; opacity: .8; }

.ld-checklist { margin: 14px 0 0; padding-left: 0; list-style: none; color:#fff}
.ld-checklist li { position: relative; padding-left: 26px; margin: 10px 0; }
.ld-checklist li:before {
  content: "✓"; color:#fff;
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
}

.ld-list { margin: 14px 0 0; padding-left: 18px; }
.ld-list li { margin: 8px 0; }

.ld-trustbar { margin-top: 14px; }
.ld-trust {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  font-size: 13px;
  opacity: .85;
}
.ld-trust span:nth-child(2n) { opacity: .35; }

.ld-benefits { background: #ffffff; }
.ld-benefits .ld-card { height: 100%; }

.ld-plans { background: #f7f7f8; }
.ld-plan { height: 100%; position: relative; }
.ld-plan__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ld-price { font-size: 14px; opacity: .9; }
.ld-price__from { display: block; font-size: 12px; opacity: .75; }

.ld-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #111111;
  color: #ffffff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
}

.ld-plan--featured {
  border: 2px solid rgba(17,17,17,.35);
  box-shadow: 0 14px 40px rgba(17,17,17,.10);
}

.ld-migration { background: #ffffff; }
.ld-steps__list { margin: 12px 0 0; padding-left: 18px; }
.ld-steps__list li { margin: 10px 0; }

.ld-domains { background: #f7f7f8; }
.ld-miniquote p { margin: 10px 0; }
.ld-tel { font-weight: 800; text-decoration: underline; }

.ld-local { background: #ffffff; }

.ld-testimonials { background: #f7f7f8; }
.ld-quote { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }
.ld-quote__who { margin: 0; font-size: 13px; opacity: .9; }

.ld-faq { background: #ffffff; }
.ld-accordion .vc_tta-panel-title a { font-weight: 700; }

.ld-blog { background: #f7f7f8; }
.ld-recentposts ul { list-style: none; padding-left: 0; margin: 0; }
.ld-recentposts li { margin: 10px 0; }
.ld-recentposts a { font-weight: 700; text-decoration: underline; }

.ld-finalcta { background: #111111; color: #ffffff; }
.ld-finalcta .ld-card { background: #ffffff; color: #111111; }
.ld-formcard--center { max-width: 720px; margin: 18px auto 0; }

#lead-form { scroll-margin-top: 90px; }
#planes { scroll-margin-top: 90px; }
#faq { scroll-margin-top: 90px; }
#blog { scroll-margin-top: 90px; }

/* Buttons inside WPBakery */
.ld-section .vc_btn3.vc_btn3-size-lg { padding: 14px 22px; border-radius: 999px; font-weight: 800; }
.ld-section .vc_btn3.vc_btn3-size-md { padding: 12px 18px; border-radius: 999px; font-weight: 800; }

/* Mobile bar */
.ld-bottom-spacer { display: none; }
.ld-mobilebar { display: none; }

@media (max-width: 767px) {
  .ld-section { padding: 44px 16px; }
  .ld-lead { font-size: 16.5px; }
  .ld-bottom-spacer { display: block; height: 78px; }
  .ld-mobilebar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    padding: 10px 12px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(17,17,17,.10);
  }
  .ld-mobilebar__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ld-mobilebar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 12px;
    border-radius: 999px;
    font-weight: 900;
    text-decoration: none;
  }
  .ld-mobilebar__btn--primary { background: #111111; color: #ffffff; }
  .ld-mobilebar__btn--outline { background: transparent; color: #111111; border: 2px solid #111111; }
}


.ld-btn-llamar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #1A3FD4;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none !important;
  padding: 14px 28px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease;
  width: fit-content;
  margin: 0 auto;
}

.ld-btn-llamar:hover {
  background: #1433B0;
  color: #ffffff;
  transform: translateY(-1px);
  text-decoration: none;
}

.ld-btn-llamar:active {
  transform: translateY(0);
  background: #0F278A;
}


#hero {
  box-shadow: 0 -8px 50px rgba(0, 0, 0, 0.40);
}


/* =============================================
   Gravity Forms — esumami.com v3
   Pega en Apariencia > Personalizar > CSS adicional
   ============================================= */

/* ── Contenedor: borde turquesa + sombra ── */
.gform_wrapper {
  background: #fff !important;
  border: 2px solid #00a8a8 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 24px rgba(0, 168, 168, 0.15) !important;
  padding: 0 !important;
  max-width: 560px;
  margin: 0 auto;
}

/* ── Barra superior turquesa ── */
.gform_wrapper form::before {
 content: "● Respuesta en menos de 24h";
  display: block;
  color: #00a8a8;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  padding: 0px 24px 20px 0;
  margin: 0;
}

/* ── Cuerpo del formulario ── */
.gform_wrapper form {
  padding: 28px 24px !important;
  background: #fff !important;
}

/* ── Quitar margen del título integrado ── */
.gform_wrapper .gform_heading {
  margin-bottom: 20px !important;
}

.gform_wrapper .gform_title {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  margin: 0 0 4px !important;
}

.gform_wrapper .gform_description {
  font-size: 13px !important;
  color: #888 !important;
  margin: 0 !important;
}

/* ── Campos ── */
.gform_wrapper .gform_body .gform_fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

#input_1_1_3 { width:248px !important}

.gform_wrapper .gfield {
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Etiquetas ── */
.gform_wrapper .gfield_label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #666 !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  margin-bottom: 5px !important;
}

/* Ocultar el texto "(OBLIGATORIO)" — se muestra con asterisco */
.gform_wrapper .gfield_required_text {
  display: none !important;
}

.gform_wrapper .gfield_required {
  color: #00a8a8 !important;
}

/* ── Inputs, selects, textarea ── */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper select,
.gform_wrapper textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #f5f8f8 !important;
  border: 1.5px solid #e0e8e8 !important;
  border-radius: 8px !important;
  padding: 11px 13px !important;
  font-size: 14px !important;
  color: #1a1a1a !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
  color: #aaa !important;
}

/* Focus */
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="password"]:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
  border-color: #00a8a8 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.13) !important;
}

/* Hover */
.gform_wrapper input[type="text"]:hover,
.gform_wrapper input[type="email"]:hover,
.gform_wrapper input[type="tel"]:hover,
.gform_wrapper input[type="number"]:hover,
.gform_wrapper input[type="url"]:hover,
.gform_wrapper input[type="password"]:hover,
.gform_wrapper select:hover,
.gform_wrapper textarea:hover {
  border-color: #00a8a8 !important;
  background: #fff !important;
}

/* Textarea */
.gform_wrapper textarea {
  min-height: 110px !important;
  resize: vertical !important;
  line-height: 1.55 !important;
}

/* ── Descripción / contador ── */
.gform_wrapper .gfield_description {
  font-size: 11px !important;
  color: #aaa !important;
  margin-top: 4px !important;
}

/* ── Errores de validación ── */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  border-color: #e53935 !important;
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.1) !important;
}

.gform_wrapper .validation_message {
  font-size: 12px !important;
  color: #e53935 !important;
  margin-top: 4px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.gform_wrapper .gform_validation_errors {
  background: #fff5f5 !important;
  border: 1px solid #f5c6cb !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
}

/* ── Botón ── */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
  margin-top: 8px !important;
  padding: 0 !important;
}

.gform_wrapper input[type="submit"],
.gform_wrapper .gform_button {
  display: block !important;
  width: 100% !important;
  background: #00a8a8 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 13px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  transition: background 0.18s ease, transform 0.15s ease !important;
}

.gform_wrapper input[type="submit"]:hover,
.gform_wrapper .gform_button:hover {
  background: #007a7a !important;
}

.gform_wrapper input[type="submit"]:active,
.gform_wrapper .gform_button:active {
  transform: scale(0.98) !important;
}

/* ── Señales de confianza ── */
.gform_wrapper .gform_footer::after {
  content: "🔒 Datos protegidos  ·  Sin compromiso  ·  Soporte 24/7";
  display: block;
  text-align: center;
  font-size: 11px;
  color: #bbb;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 0.5px solid #eee;
}

/* ── Confirmación ── */
.gform_confirmation_wrapper .gform_confirmation_message {
  background: #e6f7f7 !important;
  border: 1px solid #00a8a8 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  font-size: 14px !important;
  color: #007a7a !important;
}

/* ── Nombre en dos columnas ── */
.gform_wrapper .ginput_complex.ginput_container_name {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}