/* Ajustes de interfaz de Tio Guitar
   Novamira, 16-08-2026.
   Solo tocan las tripas de widgets v3, que no se pueden alcanzar con estilos
   de elemento de Elementor v4. Nada de maquetado de paginas. */

/* El desplegable del menu v3 se dibuja con el ancho del widget y se sale de
   la pantalla. Se suelta del widget y se ancla a la caja de la cabecera. */
@media (max-width: 1024px) {
  .cabecera .elementor-element-cab-nav,
  .cabecera .elementor-element-cab-menu {
    position: static;
    width: auto;
  }
  .cabecera .elementor-nav-menu--dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    width: auto;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    background: #FFFFFF;
    border: 1px solid #E5E1D8;
    border-radius: 15px;
    box-shadow: 0 12px 28px rgba(242, 172, 65, 0.14);
  }
  .cabecera .elementor-nav-menu--dropdown ul ul {
    width: 100%;
  }
  .cabecera .elementor-nav-menu--dropdown a.elementor-item {
    padding: 14px 20px;
  }
}

/* El carro de la cabecera es un desplegable (mini-cart). El marcado lo dibuja
   Elementor Pro; lo que no tiene control nativo se ajusta aqui. */
.elementor-menu-cart__container .elementor-button--checkout,
.elementor-menu-cart__container .elementor-button--view-cart {
  border-radius: 15px;
  transition: background-color 200ms, color 200ms, border-color 200ms;
}
.cabecera .elementor-menu-cart__container {
  z-index: 300;
}
.cabecera .elementor-menu-cart__main {
  max-height: min(70vh, 560px);
}
.cabecera .elementor-menu-cart__product-image img,
.cabecera .elementor-menu-cart__product-image .attachment-woocommerce_thumbnail {
  border-radius: 8px;
}
.cabecera .s-cab-cuenta {
  transition: color 200ms;
  position: relative;
}
/* El icono mide 22px: se amplia el area tactil a 44px sin mover el diseno. */
.cabecera .s-cab-cuenta::after {
  content: "";
  position: absolute;
  inset: -11px;
}
@media (max-width: 767px) {
  .cabecera .elementor-menu-cart__container {
    width: calc(100vw - 32px);
    max-width: 340px;
  }
}

/* WPForms: el formulario de venta usa el marcado del plugin. */
.wpforms-container .wpforms-field-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #0A0A0A;
}
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container input[type="number"],
.wpforms-container select,
.wpforms-container textarea {
  border: 1px solid #E5E1D8;
  border-radius: 15px;
  padding: 12px 14px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  color: #0A0A0A;
  background: #FFFFFF;
}
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  outline: 2px solid #F2AC41;
  outline-offset: 1px;
  border-color: #F2AC41;
}
.wpforms-container button[type="submit"] {
  background: #F2AC41;
  color: #0A0A0A;
  border: 0;
  border-radius: 15px;
  padding: 16px 28px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 200ms;
}
.wpforms-container button[type="submit"]:hover {
  background: #A4916D;
}


/* En telefono el carrito es solo el icono: el subtotal ensancha la cabecera
   de forma variable y se sale de la pantalla. */
@media (max-width: 767px) {
  .cabecera .elementor-menu-cart__toggle .elementor-button-text {
    display: none;
  }
  .cabecera .elementor-menu-cart__toggle .elementor-button {
    padding: 0;
  }
}

/* Piel de WooCommerce para Tio Guitar. Novamira, 16-08-2026.
   Marcado de terceros: no hay via nativa de Elementor v4 para alcanzarlo. */
:root{--wc-primary:#F2AC41;--wc-primary-text:#0A0A0A;--wc-secondary:#FFFFFF;--wc-secondary-text:#0A0A0A;--wc-highlight:#F2AC41;--wc-highlight-text:#0A0A0A;--wc-content-bg:#FFFFFF;--wc-subtext:#5F5F5F;--wc-green:#A4916D;--wc-red:#B3261E;--wc-orange:#F2AC41;}
.woocommerce,.woocommerce-page{font-family:"Montserrat",sans-serif;color:#0A0A0A;}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.woocommerce #place_order,.wc-block-components-button{background:#F2AC41;color:#0A0A0A;border:0;border-radius:15px;padding:15px 28px;font-family:"Montserrat",sans-serif;font-weight:700;font-size:15px;line-height:1.2;text-transform:none;box-shadow:none;transition:background-color 200ms;}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce #respond input#submit:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,.woocommerce #place_order:hover,.wc-block-components-button:hover{background:#A4916D;color:#0A0A0A;}
.woocommerce a.button.disabled,.woocommerce button.button:disabled{background:#E5E1D8;color:#5F5F5F;}
.woocommerce .price,.woocommerce span.amount,.woocommerce .woocommerce-Price-amount{font-family:"Playfair Display",serif;font-weight:500;color:#F2AC41;}
.woocommerce div.product p.price,.woocommerce div.product span.price{font-size:32px;line-height:1.1;}
.woocommerce del span.amount{color:#5F5F5F;}
/* Solo el marcado que dibuja WooCommerce: los enlaces de los widgets atomicos v4 llevan su propio color de clase global. */
.woocommerce a:not(.button):not(.elementor-button):not(.e-button-base):not(.e-paragraph-base):not(.e-paragraph-link-base):not(.e-heading-base):not(.e-link-base):not(.e-image-base),.woocommerce-page a:not(.button):not(.elementor-button):not(.e-button-base):not(.e-paragraph-base):not(.e-paragraph-link-base):not(.e-heading-base):not(.e-link-base):not(.e-image-base){color:#917A4D;text-decoration:none;}
.woocommerce a:not(.button):not(.elementor-button):not(.e-button-base):not(.e-paragraph-base):not(.e-paragraph-link-base):not(.e-heading-base):not(.e-link-base):not(.e-image-base):hover,.woocommerce-page a:not(.button):not(.elementor-button):not(.e-button-base):not(.e-paragraph-base):not(.e-paragraph-link-base):not(.e-heading-base):not(.e-link-base):not(.e-image-base):hover{color:#F2AC41;}
.woocommerce .woocommerce-breadcrumb{font-family:"Lato",sans-serif;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#5F5F5F;margin-bottom:24px;}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,.woocommerce .select2-container--default .select2-selection--single,.woocommerce table.cart td.actions .coupon .input-text{border:1px solid #E5E1D8;border-radius:15px;padding:12px 14px;font-family:"Montserrat",sans-serif;font-size:15px;color:#0A0A0A;background:#FFFFFF;line-height:1.4;height:auto;}
.woocommerce form .form-row label{font-weight:700;font-size:14px;color:#0A0A0A;margin-bottom:6px;}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus,.woocommerce form .form-row select:focus{outline:2px solid #F2AC41;outline-offset:1px;border-color:#F2AC41;}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:1.4;color:#0A0A0A;padding-left:0;}
.woocommerce .select2-dropdown{border-color:#E5E1D8;border-radius:15px;overflow:hidden;}
.woocommerce .quantity .qty{border:1px solid #E5E1D8;border-radius:15px;padding:13px 10px;font-family:"Montserrat",sans-serif;font-weight:700;color:#0A0A0A;background:#FFFFFF;}
.woocommerce table.shop_table{border:1px solid #E5E1D8;border-radius:15px;border-collapse:separate;border-spacing:0;overflow:hidden;background:#FFFFFF;}
.woocommerce table.shop_table th{font-family:"Lato",sans-serif;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#5F5F5F;border-bottom:1px solid #E5E1D8;padding:16px;}
.woocommerce table.shop_table td{border-top:1px solid #E5E1D8;padding:16px;font-size:15px;}
.woocommerce table.shop_table tbody tr:first-child td{border-top:0;}
.woocommerce table.shop_table img{border-radius:8px;}
.woocommerce-cart table.cart img{width:64px;}
.woocommerce .cart_totals,.woocommerce-checkout #order_review,.woocommerce-account .woocommerce-MyAccount-navigation{background:#FFFFFF;border:1px solid #E5E1D8;border-radius:15px;padding:24px;}
.woocommerce #payment{background:transparent;border-radius:15px;}
.woocommerce #payment ul.payment_methods{border-bottom:1px solid #E5E1D8;padding:0 0 16px;}
.woocommerce #payment div.payment_box{background:#FCFCFC;border-radius:15px;color:#5F5F5F;font-size:14px;}
.woocommerce #payment div.payment_box::before{display:none;}

.woocommerce-error{border-left-color:#B3261E;}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{color:#F2AC41;}
.woocommerce h2,.woocommerce h3,.woocommerce-page h2,.woocommerce-page h3{font-family:"Montserrat",sans-serif;font-weight:700;color:#0A0A0A;letter-spacing:0;}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin-bottom:0;}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border-bottom:1px solid #E5E1D8;}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:transparent;border:0;border-radius:0;padding:0;margin:0 24px 0 0;}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none;}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-family:"Lato",sans-serif;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#5F5F5F;padding:14px 0;display:inline-block;}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:#0A0A0A;box-shadow:inset 0 -2px 0 #F2AC41;}
.woocommerce ul.products li.product a img{border-radius:15px;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:"Montserrat",sans-serif;font-weight:700;font-size:17px;color:#0A0A0A;}
.woocommerce div.product div.images img{border-radius:15px;}
/* Hello Elementor no da margenes a las paginas que no construye Elementor
   (carrito, pago, mi cuenta, producto). Se les da el mismo contenedor y el
   mismo ritmo que al resto del sitio. */
body:not(.elementor-page) .site-main{max-width:1288px;margin-left:auto;margin-right:auto;padding:clamp(36px,4vw,56px) 24px clamp(44px,4.5vw,72px);}
@media (max-width:767px){body:not(.elementor-page) .site-main{padding-left:20px;padding-right:20px;}}
body:not(.elementor-page) .site-main > .woocommerce{max-width:1240px;margin:0 auto;}
.woocommerce div.product{display:block;}
.woocommerce div.product div.summary{margin-bottom:0;}
.woocommerce div.product .woocommerce-tabs{padding-top:24px;}
.woocommerce div.product .related.products{margin-top:clamp(32px,4vw,56px);padding-top:clamp(32px,4vw,56px);border-top:1px solid #E5E1D8;}
.woocommerce div.product .related.products > h2{font-size:clamp(24px,3vw,30px);margin-bottom:24px;}
.woocommerce ul.products{gap:24px;display:grid;grid-template-columns:repeat(4,1fr);margin:0;}
@media (max-width:1024px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.woocommerce ul.products{grid-template-columns:repeat(1,1fr);}}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;display:flex;flex-direction:column;gap:10px;align-items:flex-start;border:1px solid #E5E1D8;border-radius:15px;padding:16px;background:#FFFFFF;}
.woocommerce ul.products li.product::before,.woocommerce ul.products li.product::after{display:none;}
.woocommerce ul.products li.product .price{margin:0;font-size:22px;}
.woocommerce ul.products li.product a.button{margin-top:auto;}
.woocommerce-cart .cart-collaterals,.woocommerce-cart .cart_totals{width:100%;float:none;}
@media (min-width:900px){.woocommerce-cart .cart-collaterals{display:flex;justify-content:flex-end;}.woocommerce-cart .cart_totals{max-width:420px;}}
.woocommerce .woocommerce-customer-details,.woocommerce .woocommerce-order-details{margin-top:32px;}
/* Checkout a dos columnas: el formulario a la izquierda y el resumen del
   pedido a la derecha, pegajoso. Por defecto Woo los apila y deja media
   pantalla vacia. */
@media (min-width:1000px){
  .woocommerce-checkout form.checkout{display:grid;grid-template-columns:1.15fr 0.85fr;gap:48px;align-items:start;}
  .woocommerce-checkout form.checkout{grid-template-rows:auto 1fr;}
  .woocommerce-checkout form.checkout #customer_details{grid-column:1;grid-row:1 / span 2;width:auto;}
  .woocommerce-checkout form.checkout > h3#order_review_heading{grid-column:2;grid-row:1;margin:0 0 16px;}
  .woocommerce-checkout form.checkout > #order_review{grid-column:2;grid-row:2;position:sticky;top:110px;}
  .woocommerce-checkout form.checkout .col2-set .col-1,
  .woocommerce-checkout form.checkout .col2-set .col-2{width:100%;float:none;}
}
.woocommerce-checkout form.checkout .col2-set{display:flex;flex-direction:column;gap:24px;}
.woocommerce-checkout #order_review_heading{font-size:clamp(22px,2.4vw,26px);}
.woocommerce-checkout h3{font-size:clamp(22px,2.4vw,26px);}
.woocommerce-checkout .woocommerce-billing-fields h3{margin-bottom:16px;}
/* La caja del Servicio Express se lee como un campo mas, no como un fieldset
   del navegador. */
.woocommerce-checkout fieldset{border:1px solid #E5E1D8;border-radius:15px;padding:16px 18px;margin:0 0 8px;}
.woocommerce-checkout fieldset legend{font-family:"Lato",sans-serif;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#5F5F5F;padding:0 6px;}
.woocommerce-checkout fieldset label{font-weight:400;display:inline;}
/* El detalle de la guitarra es un bloque propio dentro del formulario. */
.woocommerce-checkout .form-row #billing_informacion_de_la_guitarra_field,
.woocommerce-checkout #billing_video_coordinacion_field{margin-top:16px;}
.woocommerce-checkout h2.wpdesk-heading,.woocommerce-checkout .wpdesk-checkout-heading{font-family:"Montserrat",sans-serif;font-weight:700;font-size:20px;color:#0A0A0A;margin:24px 0 8px;}
/* Mi cuenta: la navegacion venia como lista con vinetas. */
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.woocommerce-account .woocommerce-MyAccount-navigation li{margin:0;}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:10px 12px;border-radius:8px;font-family:"Montserrat",sans-serif;font-size:15px;color:#5F5F5F;}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:#FCFCFC;color:#0A0A0A;}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:#FCFCFC;color:#0A0A0A;font-weight:700;box-shadow:inset 3px 0 0 #F2AC41;}
/* MI CUENTA. WooCommerce maqueta esta pagina con floats. Se reemplaza por una
   rejilla, pero SOLO cuando existe la navegacion de la cuenta: con la sesion
   cerrada el shortcode pinta el par acceder/registrarse y una rejilla de
   280px + resto lo aplastaba a 134px por columna. */
@media (min-width: 900px) {
  .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
  .woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  /* El clearfix de WooCommerce (::before/::after con content) se convierte en
     item de rejilla y empuja la navegacion a la segunda columna. */
  .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
  .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::after { content: none; }
  .woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: 100%; max-width: 280px; display: block; }
  .woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; display: block; min-width: 0; }
}
/* Vacio ocupa una fila entera de la rejilla y abre un hueco de 40px. */
.woocommerce-notices-wrapper:empty { display: none; }

/* Sesion cerrada: acceder y registrarse, uno al lado del otro. */
.woocommerce-account #customer_login {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
/* Mismo clearfix que en la rejilla de la cuenta. */
.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after { content: none; }
.woocommerce-account #customer_login > .col-1,
.woocommerce-account #customer_login > .col-2 {
  float: none;
  width: auto;
  background: #FFFFFF;
  border: 1px solid #E5E1D8;
  border-radius: 15px;
  padding: 28px;
}
.woocommerce-account #customer_login h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #0A0A0A;
  margin: 0 0 18px;
}
.woocommerce-account #customer_login form.login,
.woocommerce-account #customer_login form.register {
  border: 0;
  padding: 0;
  margin: 0;
}
.woocommerce-account #customer_login .form-row { padding: 0; margin: 0 0 16px; }
.woocommerce-account #customer_login label { display: block; margin-bottom: 6px; }
.woocommerce-account #customer_login input.input-text { width: 100%; }
.woocommerce-account #customer_login .woocommerce-form-login__rememberme,
.woocommerce-account #customer_login .tg-newsletter-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
}
.woocommerce-account #customer_login .woocommerce-form-login__rememberme span,
.woocommerce-account #customer_login .woocommerce-form-login__rememberme,
.woocommerce-account #customer_login .woocommerce-privacy-policy-text {
  font-size: 14px;
  color: #5F5F5F;
}
.woocommerce-account #customer_login .woocommerce-privacy-policy-text p { margin: 14px 0 18px; line-height: 1.6; }
.woocommerce-account #customer_login .woocommerce-LostPassword { margin: 14px 0 0; font-size: 14px; }
.woocommerce-account #customer_login button.button { width: auto; }
@media (max-width: 767px) {
  .woocommerce-account #customer_login { grid-template-columns: minmax(0, 1fr); }
}

/* Los botones "Ver servicios" bajan a la seccion de tarjetas de su propia pagina. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* La tarjeta de servicio entera lleva al detalle. La capa la extiende el enlace
   "Ver detalle", asi que no hay anclas anidadas y el texto del enlace sigue
   siendo el destino real para lectores de pantalla. El boton "Contratar" queda
   por encima y sigue anadiendo al carro. */
.tarjeta-servicio {
  position: relative;
}
.tarjeta-servicio > .e-flexbox-base,
.tarjeta-servicio .boton-secundario,
.tarjeta-servicio .enlace-flecha,
.tarjeta-servicio .enlace-flecha > a {
  position: static;
}
.tarjeta-servicio .boton-secundario::after,
.tarjeta-servicio .enlace-flecha > a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.tarjeta-servicio .boton-primario {
  position: relative;
  z-index: 2;
}
.tarjeta-servicio:focus-within {
  outline: 2px solid #F2AC41;
  outline-offset: 3px;
}

/* VISTA MOVIL: todo el contenido construido en v4 va centrado.
   Se deja fuera la cabecera (logo a la izquierda, iconos a la derecha), el marcado
   que dibujan WooCommerce y WPForms, y las dos paginas legales, donde centrar
   parrafos largos y listas numeradas hace ilegible el texto. */
@media (max-width: 767px) {
  body:not(.page-id-7):not(.page-id-2695) .elementor .e-con,
  body:not(.page-id-7):not(.page-id-2695) .elementor .e-flexbox-base,
  body:not(.page-id-7):not(.page-id-2695) .elementor .e-div-block-base {
    align-items: center;
    text-align: center;
  }
  body:not(.page-id-7):not(.page-id-2695) .elementor .e-grid-base {
    justify-items: center;
  }

  /* La cabecera conserva su reparto. */
  .cabecera .e-con,
  .cabecera .e-flexbox-base {
    text-align: start;
  }

  /* Carrito, pago, mi cuenta y formularios conservan su alineacion propia. */
  .elementor .elementor-shortcode,
  .elementor .elementor-shortcode *,
  .elementor .wpforms-container,
  .elementor .wpforms-container * {
    text-align: initial;
  }
}

/* AVISOS DE WOOCOMMERCE. El icono es un ::before absoluto que Woo coloca a 22px del
   borde, y el padding izquierdo estaba en 24px: se montaba encima de la primera letra.
   Ademas, un borde de 3px solo a la izquierda con radio de 15px se dibuja como un
   parentesis curvo; con el borde izquierdo recto queda una barra limpia. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  position: relative;
  border: 1px solid #E5E1D8;
  border-left: 3px solid #F2AC41;
  border-radius: 0 15px 15px 0;
  background: #FFFFFF;
  color: #0A0A0A;
  font-size: 15px;
  line-height: 1.5;
  padding: 18px 22px 18px 58px;
  margin: 0 0 18px;
  list-style: none;
  overflow: hidden;
}
.woocommerce-error { border-left-color: #B3261E; }
.woocommerce-message li,
.woocommerce-info li,
.woocommerce-error li {
  list-style: none;
  margin: 0;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  color: #F2AC41;
  font-size: 20px;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}
.woocommerce-error::before { color: #B3261E; }
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  float: right;
  margin: -2px 0 0 16px;
  padding: 10px 18px;
  font-size: 13px;
}

/* IMPORTES EN TABLAS Y TOTALES. Playfair en ambar sobre blanco da 1.94:1 y sus cifras
   bailan de altura: en una tabla de dinero eso se lee mal. Aqui van en Montserrat con
   cifras tabulares y en tinta. El precio decorativo de las tarjetas y de la ficha no se
   toca: solo cambian carrito, pago y mi cuenta. */
.woocommerce table.shop_table .amount,
.woocommerce table.shop_table .price,
.woocommerce table.shop_table .woocommerce-Price-amount,
.woocommerce .cart_totals .amount,
.woocommerce-checkout #order_review .amount {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  color: #0A0A0A;
}
.woocommerce table.shop_table del .amount,
.woocommerce .cart_totals del .amount {
  color: #5F5F5F;
  font-weight: 400;
}
.woocommerce table.shop_table .order-total .amount,
.woocommerce .cart_totals .order-total .amount {
  font-size: 18px;
  font-weight: 700;
}


/* Iconos de los avisos. El glifo \e028 de la fuente WooCommerce sale como cuadro vacio
   en este sitio (la fuente carga, el codepoint no dibuja). Se reemplazan por dos SVG
   enmascarados: el color lo pone background-color, asi que siguen la paleta. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  background-color: #F2AC41;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20Zm4.7%207.7-5.6%205.6a1%201%200%200%201-1.4%200l-2.4-2.4a1%201%200%201%201%201.4-1.4l1.7%201.7%204.9-4.9a1%201%200%200%201%201.4%201.4Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20Zm4.7%207.7-5.6%205.6a1%201%200%200%201-1.4%200l-2.4-2.4a1%201%200%201%201%201.4-1.4l1.7%201.7%204.9-4.9a1%201%200%200%201%201.4%201.4Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.woocommerce-error::before {
  background-color: #B3261E;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20Zm1%2015h-2v-2h2Zm0-4h-2V7h2Z%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20Zm1%2015h-2v-2h2Zm0-4h-2V7h2Z%27%2F%3E%3C%2Fsvg%3E");
}

/* Los botones de los avisos no dependen de que el <body> traiga la clase woocommerce:
   en mi-cuenta el body es woocommerce-account woocommerce-page y el enlace se quedaba
   con el rosa del reset. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  display: inline-block;
  float: right;
  margin: -2px 0 0 16px;
  padding: 10px 18px;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: #0A0A0A;
  background: #F2AC41;
  border: 0;
  border-radius: 15px;
  text-decoration: none;
  transition: background-color 200ms;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
  background: #A4916D;
  color: #0A0A0A;
}

/* AVISOS EN MOVIL. El boton flotado a la derecha se sube por encima del texto y el aviso se
   lee al reves: primero la accion y despues el motivo. En pantalla angosta deja de flotar,
   se centra debajo del texto y el icono se ancla arriba en vez de al medio. */
@media (max-width: 767px) {
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error {
    padding: 18px 20px 18px 52px;
  }
  .woocommerce-message::before,
  .woocommerce-info::before,
  .woocommerce-error::before {
    left: 18px;
    top: 20px;
    transform: none;
  }
  .woocommerce-message .button,
  .woocommerce-info .button,
  .woocommerce-error .button {
    float: none;
    display: block;
    width: fit-content;
    margin: 14px auto 0;
  }
}

/* ORDEN DE LOS AVISOS EN MOVIL. Woo no siempre imprime el enlace despues del texto: en el
   aviso de confirmar correo el <a> va primero, asi que al quitarle el float quedaba el boton
   arriba y el motivo abajo. Con la caja en columna y el boton en order:1 el texto siempre
   queda primero, sin importar como venga el marcado. */
@media (max-width: 767px) {
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error {
    display: flex;
    flex-direction: column;
  }
  .woocommerce-message .button,
  .woocommerce-info .button,
  .woocommerce-error .button {
    order: 1;
  }
}

/* PESO DE LAS REGLAS DE AVISOS EN MOVIL. El widget de avisos de Elementor fuerza display:block
   con dos clases y WooCommerce fuerza float:right con tres, asi que las reglas de arriba no
   alcanzaban a ganar. Se repiten las mismas clases para subir la especificidad, sin !important. */
@media (max-width: 767px) {
  .woocommerce-message.woocommerce-message.woocommerce-message,
  .woocommerce-info.woocommerce-info.woocommerce-info,
  .woocommerce-error.woocommerce-error.woocommerce-error {
    display: flex;
    flex-direction: column;
  }
  .woocommerce-message.woocommerce-message .button.button,
  .woocommerce-info.woocommerce-info .button.button,
  .woocommerce-error.woocommerce-error .button.button {
    float: none;
    display: block;
    width: fit-content;
    margin: 14px auto 0;
    order: 1;
  }
}

/* CABECERA PEGADA. El documento de cabecera se imprime en <header class="elementor-location-header">,
   hijo directo del body y sin ningun ancestro con overflow, asi que position:sticky basta y no hace
   falta JavaScript ni reservar alto con padding. Con la barra de admin arriba hay que descontarla:
   es fija a 32px, sube a 46px en tablet y a <=600px pasa a absoluta y ya no estorba. */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 400;
}
body.admin-bar .elementor-location-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .elementor-location-header { top: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar .elementor-location-header { top: 0; }
}

/* Con la cabecera pegada, el boton "Ver servicios" dejaba la seccion justo debajo de ella.
   scroll-margin-top le da el aire de la cabecera al destino del ancla. */
.elementor .e-con[id] { scroll-margin-top: 95px; }


/* --- Marketplace: tarjeta de aviso --- */
.tarjeta-aviso{position:relative}
.tarjeta-aviso .cuerpo-aviso,.tarjeta-aviso .chips-aviso{position:static}
.tarjeta-aviso .titulo-aviso a{color:inherit;text-decoration:none}
.tarjeta-aviso .titulo-aviso a::after{content:"";position:absolute;inset:0;z-index:1}
.tarjeta-aviso:focus-within{outline:2px solid #F2AC41;outline-offset:3px}

/* --- Marketplace: barra de filtros --- */
/* La pagina del archivo va centrada, pero el formulario no: sus etiquetas van
   sobre cada campo y el texto que se escribe dentro de un input hereda text-align. */
.tgf{text-align:start;display:flex;flex-direction:column;gap:14px;background:#FFFFFF;border:1px solid #E5E1D8;border-radius:15px;padding:18px 20px;margin:0 0 32px}
.tgf-fila{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.tgf-campo{display:flex;flex-direction:column;gap:5px;flex:1 1 180px;min-width:0}
.tgf-busca{flex:2 1 260px}
.tgf-num{flex:0 1 130px}
.tgf-lab{font-family:'Lato','Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#917A4D}
.tgf-select,.tgf-input{font-family:'Montserrat',sans-serif;font-size:14px;line-height:1.4;color:#0A0A0A;background:#FCFCFC;border:1px solid #E5E1D8;border-radius:8px;padding:9px 12px;width:100%;min-width:0}
.tgf-select:focus,.tgf-input:focus{outline:2px solid #F2AC41;outline-offset:1px;border-color:#F2AC41}
.tgf-acciones{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.tgf-boton{border:0;cursor:pointer;font-family:'Montserrat',sans-serif;min-width:240px;justify-content:center}
.tgf-limpiar{font-family:'Montserrat',sans-serif;font-size:13px;color:#5F5F5F;text-decoration:underline}
.tgf-limpiar:hover{color:#0A0A0A}
@media (max-width:600px){.tgf-campo{flex:1 1 100%}.tgf-num{flex:1 1 calc(50% - 6px)}}

/* --- Marketplace: galeria de la ficha ---
   La caja principal es 3:4 con object-fit:contain para que la foto de portada (normalizada a 3:4)
   la llene por completo y las fotos de detalle en horizontal se vean enteras, sin recorte. */
.tg-galeria{display:flex;flex-direction:column;gap:12px}
.tg-galeria-principal{background:#FCFCFC;border:1px solid #E5E1D8;border-radius:15px;overflow:hidden}
.tg-galeria-principal img{display:block;width:100%;height:auto;aspect-ratio:3/4;max-height:620px;object-fit:contain}
.tg-galeria-miniaturas{list-style:none;margin:0;padding:0;display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin}
.tg-galeria-mini{flex:0 0 auto}
.tg-galeria-mini button{padding:0;border:1px solid #E5E1D8;border-radius:10px;background:#FCFCFC;cursor:pointer;overflow:hidden;display:block;line-height:0}
.tg-galeria-mini img{display:block;width:72px;height:72px;object-fit:cover}
.tg-galeria-mini button:hover{border-color:#917A4D}
.tg-galeria-mini button:focus-visible{outline:2px solid #F2AC41;outline-offset:2px}
.tg-galeria-mini.tg-activa button{border-color:#F2AC41;box-shadow:0 0 0 1px #F2AC41 inset}
@media (max-width:600px){.tg-galeria-mini img{width:60px;height:60px}}


/* --- Marketplace: precio de los planes durante la promo ---
   El shortcode [tg_precio_plan] saca el precio normal tachado y el $0 al lado.
   Van dentro del titulo con la clase global "precio" (Playfair, ambar), asi que
   el tachado se baja de tamano y se apaga para que el $0 sea lo que se lee. */
.tg-precio-antes{display:inline-block;font-size:.52em;font-weight:400;color:#5F5F5F;text-decoration:line-through;margin-inline-end:10px;vertical-align:middle;}
.tg-precio-ahora{display:inline-block;vertical-align:middle;}


/* tg-checkout-ajustes */
body.woocommerce-checkout #order_review_heading{margin-block-start:32px !important;}
body.woocommerce-checkout .woocommerce-billing-fields .form-row textarea{min-height:120px;}

/* tg-checkout-movil */
@media (max-width:767px){
  body.woocommerce-checkout .woocommerce form .form-row-first,
  body.woocommerce-checkout .woocommerce form .form-row-last,
  body.woocommerce-checkout .form-row-first,
  body.woocommerce-checkout .form-row-last{float:none !important;width:100% !important;}
}

/* tg-ayuda-fotos */
.tg-ayuda-fotos{display:block;margin:6px 0 12px;padding:14px 16px;border:1px solid #E3DDD2;border-radius:10px;background:#FBF8F3;font-size:14px;line-height:1.55;color:#5F5F5F;}
.tg-ayuda-fotos > span{display:block;}
.tg-ayuda-fotos > span + span{margin-top:6px;padding-inline-start:16px;position:relative;}
.tg-ayuda-fotos > span + span::before{content:'';position:absolute;inset-inline-start:2px;inset-block-start:9px;width:5px;height:5px;border-radius:50%;background:#F2AC41;}
.tg-ayuda-fotos .tg-ayuda-titulo{font-weight:700;color:#1A1A1A;margin-block-end:8px;}
.tg-ayuda-fotos b{color:#1A1A1A;font-weight:600;}

/* tg-enlace-en-texto
   Un enlace escrito DENTRO del texto de un parrafo. Elementor v4 no tiene forma
   nativa de darle estilo: el esquema estiliza el elemento, no sus hijos en linea.
   El :not() distingue esto de un parrafo que ES un enlace (los del pie), que
   Elementor marca con .e-paragraph-link-base y ya tienen su propio estilo. */
.e-paragraph-base a:not(.e-paragraph-link-base){color:#0A0A0A;text-decoration:underline;text-decoration-color:#F2AC41;text-decoration-thickness:2px;text-underline-offset:3px;transition:color 200ms;}
.e-paragraph-base a:not(.e-paragraph-link-base):hover{color:#B87E1E;text-decoration-color:#B87E1E;}

/* tg-descripcion-aviso
   El vendedor escribe la descripcion en un textarea, con sus saltos de linea y sus
   vinetas. Los saltos SI llegan al HTML; lo que los borra es que el navegador
   colapsa el espacio en blanco. 'white-space' no existe en el esquema de Elementor
   v4, asi que no hay forma nativa de ponerlo y tiene que ir aqui.
   Ojo con el selector: en v4 un widget NO lleva .elementor-element-<id>, solo sus
   clases y data-id. Se engancha a .s-fic-desc, que es el estilo local del propio
   elemento (el que le da text-align:start), asi que vive y muere con el. */
.s-fic-desc{white-space:pre-line;}

/* tg-menu-movil-submenus
   Los submenus del menu v3 llevan la misma clase que el panel, asi que heredaban
   position:absolute y flotaban sobre los demas items en vez de empujarlos: el
   panel no crecia y parecia que no se habian abierto. Aqui vuelven al flujo, y
   el panel abierto se limita a la pantalla con scroll propio. */
@media (max-width: 1024px) {
  .cabecera .elementor-nav-menu--dropdown ul.sub-menu {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
  .cabecera .elementor-nav-menu--dropdown ul.sub-menu a {
    padding-inline-start: 38px !important;
  }
  .cabecera .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
    max-height: calc(100vh - 96px) !important;
    overflow-y: auto !important;
  }
}