/*
Theme Name: Themify Stack Child - Bitubi.Pro
Theme URI: https://bitubi.pro
Author: Bitubi Development Team
Author URI: https://bitubi.pro
Description: Tema hijo oficial de Bitubi.Pro basado en Themify Stack. Incluye personalizaciones visuales, estilos propios y componentes frontend. Toda la lógica, compatibilidad y funciones dinámicas se gestionan desde el plugin BTB2B Private Area.
Version: 1.4.3
Template: themify-stack
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: b2b, minimal, responsive, clean, professional, corporate
Text Domain: bitubi
*/


/* ==========================================================================
   COLORES BITUBI MARCA
   ========================================================================== */
/* Rojo=#f05b2d;   azul=#29a0f5;   verde=#25d366 */

/* ==========================================================
   OCULTAR FOOTER PERSONALIZADO EN ADMIN Y LOGIN
   Evita que se superponga en el backend de WordPress
   ========================================================== */

/* 1. Ocultar en el Panel de Administración (Backend) */
body.wp-admin #bitubi-global-footer {
    display: none !important;
}

/* 2. Ocultar en la pantalla de Login (wp-login.php) */
/* Por si acaso también te molesta al iniciar sesión */
body.login #bitubi-global-footer {
    display: none !important;
}



/* ==========================================================================
   CARGA LOCAL DE ROBOTO (Thin 100 a Black 900 + Italic)
   ========================================================================== */

/* --- THIN (100) --- */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('./fonts/roboto-v30-latin-100.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url('./fonts/roboto-v30-latin-100italic.woff2') format('woff2');
}

/* --- LIGHT (300) --- */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('./fonts/roboto-v30-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('./fonts/roboto-v30-latin-300italic.woff2') format('woff2');
}

/* --- REGULAR (400) --- */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/roboto-v30-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/roboto-v30-latin-italic.woff2') format('woff2');
}

/* --- MEDIUM (500) --- */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/roboto-v30-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/roboto-v30-latin-500italic.woff2') format('woff2');
}
/* --- BOLD (700) --- */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/roboto-v30-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/roboto-v30-latin-700italic.woff2') format('woff2');
}

/* --- BLACK (900) --- */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('./fonts/roboto-v30-latin-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('./fonts/roboto-v30-latin-900italic.woff2') format('woff2');
}
/* .................................................................................... */



/* ==========================================================================
   2. CONFIGURACIÓN DE VARIABLES GLOBALES
   ========================================================================== */
:root {
    /* Definimos nuestra variable maestra con Roboto */
    --font-main: 'Roboto', sans-serif;

    /* --- VARIABLES DE ELEMENTOR (Sobreescritura) --- */
    --e-global-typography-primary-font-family: var(--font-main) !important;
    --e-global-typography-secondary-font-family: var(--font-main) !important;
    --e-global-typography-text-font-family: var(--font-main) !important;
    --e-global-typography-accent-font-family: var(--font-main) !important;
    
    /* --- VARIABLES HEREDADAS (Compatibilidad) --- */
    --fuente-titulos: var(--font-main) !important;
    --fuente-cuerpo:  var(--font-main) !important;
    --font-primary:   var(--font-main) !important;
    
    /* A. PRIMITIVAS (La Paleta Cruda) */
    --color-black: #0a0a0a;
    --color-white: #ffffff;
    --gray-100: #f5f5f5;
    --gray-200: #e5e5e5;
    --gray-400: #a3a3a3;
    --gray-600: #525252;
    --gray-800: #262626;

    /* B. SEMÁNTICAS (El Uso/Función) */
    --bg-body: var(--color-white);       /* Fondo de página */
    --text-main: var(--color-black);     /* Texto principal */
    --text-muted: var(--gray-600);       /* Texto secundario */
    --border-subtle: var(--gray-200);    /* Bordes de tarjetas */
    --code-bg: var(--gray-100);          /* Fondo para bloques de código */
}


/* ==========================================================================
   3. APLICACIÓN GLOBAL (Fuerza bruta para toda la web)
   ========================================================================== */

/* Configuración Base */
html {
  -webkit-text-size-adjust: 100%; /* Evita inflado de fuente en móvil */
  text-size-adjust: 100%;
  font-size: 16px; /* Definido una sola vez aquí */
}

body {
    font-family: var(--font-main) !important;
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
    /* font-size lo hereda del html */
}

/* --- MEJORA DE LEGIBILIDAD ROBOTO --- */

/* 1. Aumentamos tamaño y peso solo en párrafos de texto */
body p {
    font-size: 1.2em !important;   /* Aumenta el tamaño como pediste */
    line-height: 1.6 !important;   /* Aumenta el aire entre líneas para que no se amontone */
    font-weight: 500 !important;   /* Fuerza el peso "Regular". Evita el 300 (Light) */
    color: var(--gray-600, #525252); /* Asegura contraste gris oscuro, no gris claro */
}

/* 2. Listas (ul, ol) también necesitan crecer para coincidir con los párrafos */
body li {
    font-size: 1.15em; /* Un pelín menos que el párrafo para jerarquía */
    font-weight: 500 !important;
}

/* 3. EXCEPCIÓN CRÍTICA: Spans */
/* No aumentamos spans globales, pero aseguramos que los que están DENTRO
   de un párrafo hereden el tamaño grande sin multiplicarlo */
p span, li span {
    font-size: inherit !important;
    font-weight: inherit !important;
    font-weight: 500 !important;
}

/* 4. EXCEPCIONES DE MAQUETACIÓN (Para que no rompa el diseño) */

/* Footer: suele requerir texto más pequeño */
#bitubi-global-footer {background-color: transparent !important;}
#bitubi-global-footer p, 
footer p, 
.copyright p {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}
/* ==========================================================
   OCULTAR FOOTER PERSONALIZADO EN ADMIN Y LOGIN
   Evita que se superponga en el backend de WordPress
   ========================================================== */

/* 1. Ocultar en el Panel de Administración (Backend) */
body.wp-admin #bitubi-global-footer {
    display: none !important;
}

/* 2. Ocultar en la pantalla de Login (wp-login.php) */
/* Por si acaso también te molesta al iniciar sesión */
body.login #bitubi-global-footer {
    display: none !important;
}
/* Tablas de precios: Ya tienen su propio tamaño ajustado, no lo toquemos */
.price-card p, 
.features-list li {
    font-size: 1rem !important; /* Mantenemos el tamaño original del diseño de precios */
    font-weight: 500 !important;
}

/* Textos legales pequeños */
.legal-note, 
.small-text, 
small {
    font-size: 0.85em !important;
    font-weight: 500 !important;
}

/* Aplicación general a textos básicos */
p, span, div, a, li,
input, select, textarea, label,
blockquote, strong, b, i, em {
    font-family: var(--font-main) !important;
    font-weight: 500 !important;
}

/* Aplicación a todos los encabezados y títulos */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.post-title,
.themify_builder_content .module-title,
.btb2b-budget-title {
    font-family: var(--font-main) !important;
}

/* --- ESTILOS TIPOGRÁFICOS ESPECÍFICOS --- */

h1 { 
    margin-bottom: 10px; 
    letter-spacing: -1px; 
}

/* H2 UNIFICADO (Antes tenías dos bloques separados) */
h2 { 
    font-size: 1.4rem; 
    line-height: 1.2; 
    color: var(--gray-800);
    
    /* Espaciado y decoración */
    margin: 50px 0 0.8em 0; /* Arriba 50px, Abajo 0.8em */
    border-bottom: 1px solid var(--border-subtle); 
    padding-bottom: 10px; 
}

/* Span destacado dentro de H2 */
h2 .destacado { 
    font-size: 1.5rem; 
}

h3 { 
    font-size: 1.1rem; 
    margin-top: 0; 
}

p { 
    color: var(--text-muted); 
    margin-bottom: 20px; 
}

/* --- Caja de Explicación Técnica --- */
.tech-explanation {
    background-color: var(--code-bg); /* Usamos la variable semántica mejor */
    border-left: 4px solid var(--color-black);
    padding: 20px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 40px;
}






/* Aplicación a botones y navegación */
button, .button, input[type="submit"],
.bitubi-cta-btn,
#main-nav a,
.main-nav li a {
    font-family: var(--font-main) !important;
}

/* ==========================================================================
   4. CORRECCIONES ESPECÍFICAS
   ========================================================================== */
   
/* Asegurar que las tablas de precios usen Roboto */
.pagos-table th, 
.pagos-table td,
.pricing-container {
    font-family: var(--font-main) !important;
}

/* .................................................................................... */


/* EXCEPCIONES: Asegurar que los iconos no se rompan */
.fa, .fas, .far, .fab, [class*="icon-"], .neon-icon {
    font-family: "FontAwesome", sans-serif !important; 
    /* O la fuente de iconos que use tu tema, para evitar cuadros vacíos */
}

/* ==========================================================================
   1. ESTILOS BASE Y CORRECCIONES
   ========================================================================== */
/* Ocultar títulos en páginas específicas */
#page-3218 .page-title, #page-2584 .page-title, #page-3027 .page-title, 
#page-1997 .page-title, #page-15 .page-title, #page-2911 .page-title, 
#page-750 .page-title {
  display: none !important;
}

/* 1. Ocultar panel lateral Themify en página específica */
body.page-id-3915 #headerwrap {
    display: none !important;
}

/* 2. Resetear layout que deja hueco */
body.page-id-3915 #layout,
body.page-id-3915 #pagewrap,
body.page-id-3915 #body,
body.page-id-3915 #content,
body.page-id-3915 #page-wrap,
body.page-id-3915 #main,
body.page-id-3915 #main-content,
body.page-id-3915 .content-wrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
    left: 0 !important;
}

/* 3. Asegurar que ocupa todo el ancho */
body.page-id-3915 #content,
body.page-id-3915 #main,
body.page-id-3915 #main-content {
    width: 100% !important;
    max-width: 100% !important;
}

/* Clases de utilidad tipográfica (REM) */
.rem2 {font-size:2rem;line-height:1rem !important}
.rem15 {font-size:1.5rem !important;line-height:1rem !important}
.rem1 {font-size:1rem; line-height:1rem !important}
.rem09 {font-size:0.9rem !important;line-height:1rem !important}
.rem08 {font-size:0.8rem !important;line-height:1rem !important}
.rem07 {font-size:0.7rem !important;line-height:0.9rem !important}


/* Ocultar “Powered by WordPress · Themify WordPress Themes” */
.footer-text.tf_clearfix .two{ display: none !important; }

/* Inputs sin borde: foco visible por accesibilidad */
.wpcf7-form-control,
.wpcf7-text{ border: none !important; }
.wpcf7-form-control:focus{
  outline: 2px solid #4069AF;
  outline-offset: 2px;
}

/* ===========================
   Utilidades y ajustes base
   =========================== */
#logo-almohada { background-color: #fff; padding: 0 !important; }
.size-30   { font-size: 30px; line-height: 1em; }
.size-15em { font-size: 1.5em; line-height: 1em; }
.negro  { color: black; }
.naranja{ color: orange; }
.blau   { color: CornflowerBlue; }

.u-hide{ display:none !important; }

.social-widget { display: none !important; }
#content { padding: 1% 0; }
.floatleft { float: left; }
.post { border: 0.5em solid #fff; }

.single #content > .post {
  background-color: #fff !important;
  padding: 1em !important;
}

.post-title {
  font-size: 1.5em !important;
  font-weight: bold !important;
}
.post-content {
  font-size: 1em !important;
  font-weight: normal !important;
  line-height: 1.4em !important;
}

/* ===========================
   Blockquote
   =========================== */
blockquote{
  font-size: 1rem;
  line-height: 1.3em;
  margin-top: 0.8em;
  position: relative;
  border-bottom: 1px solid #f3f6f4;
  font-style: italic;
}

/* ===========================
   Formularios / avisos
   =========================== */
.akismet_comment_form_privacy_notice p { display: none !important; }

/* ===========================
   Footer (estructura + menú)
   =========================== */
footer#footer.pagewidth,
footer#footer .pagewidth{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1em;
}
footer#footer .footer-widgets.tf_clearfix{
  flex: 1;
  display: flex;
  justify-content: center;
}
footer#footer #menu-footer-menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5em;
}
footer#footer #menu-footer-menu > li{ margin: 0; }
footer#footer #menu-footer-menu a{
  color: gray;
  text-decoration: none;
}
footer#footer #menu-footer-menu a:hover{
  color: #4069AF;
  font-weight: normal;
}
footer#footer .footer-text.tf_clearfix{
  white-space: nowrap;
  margin: 0 1em;
}
footer#footer .whatsapp-icon{ margin-left: auto; }
.footer-widgets.tf_clearfix .col3-1.first{
  width: 100% !important;
  float: none !important;
  margin-right: 0 !important;
}
.footer-widgets.tf_clearfix .col3-1.first ~ .col3-1{
  display: none !important;
}

/* ===========================
   Tipografía / bloques
   =========================== */
#site-description{
  letter-spacing: 1px;
  color: gray;
  font-weight: bold;
  line-height: 1em;
  font-size: 150%;
  text-transform: uppercase;
}
.titol{ font-size: 1.1em; color: #4069AF; }

/* 1. CUADRO ALMOHADA */
#cuadro-almohada{
  background-color: #fff;
  padding: 5px !important;
}

/* 2. TILE STYLING (IDs/clases autogeneradas por Builder) */
.themify_builder_content-13 .tb_03fd61d.module-tile .tile-flip-box-wrap{
  padding: 10px;
}

/* 3. TIPOGRAFÍA utilidades */
.font-size-media  { font-size: 1.1em; line-height: 1.1em; }
.font-size-grande { font-size: 1.3em; line-height: 1.1em; }

/* 4. OCULTAR SCROLLBAR (con scroll activo) */
.scroll-no{ overflow: auto; -ms-overflow-style: none !important; }
.scroll-no::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* ===========================
   Tiles / módulos específicos
   =========================== */
#tb_tpxa318,
#tb_fa795c0{
  height: auto !important;
  min-height: 450px !important;
}

/** TABLAS SOLUCIONES o SERVICIOS **/
.tabla-comparativa table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
.tabla-comparativa th, 
.tabla-comparativa td {
  padding: 12px;
  border: 1px solid #ddd;
}
.tabla-comparativa thead th {
  color: #fff;
  font-weight: bold;
}

.tabla-comparativa .rescate { background: #F2814B;}
.tabla-comparativa .adaptaciones { background: #A5C87D;}
.tabla-comparativa .prepress { background: #4FC39B;}
.tabla-comparativa .proyectos { background: #E46D75;}
.tabla-comparativa td:first-child {
  font-weight: bold;
  text-align: left;
  background: #f9f9f9;
}
.tabla-comparativa th a {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 12px 0;
}

.tabla-comparativa th a:hover {
  text-decoration: underline;
}

.bitubi-solicita-presupuesto-link { 
  display:inline-block;
  background:#4f80ff;
  color:#fff;
  font-size:0.7em;
  padding:.50em;
  border-radius:36px;
  text-decoration:none;
  font-weight:400;
  width:99%;
  height:60%;
  line-height: 1.5em;
}
.bitubi-solicita-presupuesto-link:hover{ background:#25d366 !important;color:#fff !important; }


/* Estilo general */
.tabla-servicios {
  overflow-x: auto;
  margin: 20px auto;
  max-width: 900px;
  font-size: 15px;
  color: #222;
}
.tabla-servicios table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border-radius: 6px;
  overflow: hidden;
  table-layout: fixed; /* fuerza columnas iguales */
}
.tabla-servicios thead {
  text-align: left;
  color: #fff;
}
.tabla-servicios th {
  padding: 12px 15px;
  font-size: 16px;
}
.tabla-servicios td {
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
  vertical-align: top;
}
.tabla-servicios tbody tr:last-child td {
  border-bottom: none;
}

/* Fijar ancho consistente para la columna "Características" */
.tabla-servicios td:first-child,
.tabla-servicios th:first-child {
  width: 35%;        /* todas las tablas tendrán la misma proporción */
  font-weight: bold; /* negrita permanente en la primera columna */
}

/* Colores de cabecera personalizados por tabla */
.rescate-24h thead { background: var(--color-black) !important;}  
.adaptaciones-24h thead { background: var(--color-gray-100)!important;}  
.prepress-qa thead { background: var(--color-gray-400) !important;}  
.proyectos-medida thead { background: var(--color-gray-800) !important;}  


/* Semántica símbolos */
.tabla-servicios td:contains("✓") { color: #15803d; font-weight: 600; }
.tabla-servicios td:contains("✕") { color: #dc2626; font-weight: 600; }
.tabla-servicios td:contains("⊕") { color: #7c3aed; font-weight: 600; }
.tabla-servicios td:contains("ⓘ") { color: #2563eb; font-weight: 600; }

/* Responsive */
@media (max-width: 640px) {
  .tabla-servicios table,
  .tabla-servicios thead,
  .tabla-servicios tbody,
  .tabla-servicios th,
  .tabla-servicios td,
  .tabla-servicios tr {
    display: block;
    width: 100%;
  }
  .tabla-servicios thead { display: none; }
  .tabla-servicios tr {
    margin-bottom: 12px;
    border-bottom: 2px solid #f3f4f6;
  }
  .tabla-servicios td {
    padding: 10px;
    text-align: left;
    border-bottom: none;
    position: relative;
  }
  .tabla-servicios td:first-child {
    font-weight: bold;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    width: 100% !important; /* en móvil ocupa todo */
  }
}

/* ***********************************************************************************************
   HOME PAGE (page-13)
*********************************************************************************************** */
#page-13 #cuadro01 h2 span {font-size: 2.5rem; line-height: 1.1; font-weight: bold;}

#page-13 #cuadro01 a.shortcode.button.large {font-size: 132%;  text-shadow: 1px 0px 4px #000;  font-weight: normal;  padding: 15px;  width: 90%;  text-align: center;}

#page-13 #cuadro02 button,
.tile .tile-content button{
  border: 0;
  background: transparent;
  padding: 0;
  display: block;
  width: 100%;
  line-height: 0; /* evita huecos bajo la imagen */
}

#page-13 #cuadro03-back p {font-size:1.7rem;line-height:1.5;}
#page-13 #cuadro03-front img {margin-top:2rem;}
#page-13 #cuadro03-front {margin-top:-1rem;}

#page-13 #cuadro06 p {font-size:1.7rem !important; line-height:2.1rem !important;}

#page-13 #cuadro07 img { max-width: 100% !important; width:100% !important;  height: auto !important; display: block !important;}

#page-13 #cuadro08 p {font-size:1.2rem !important;line-height:1.1 !important; color:white !important;}
#page-13 #cuadro08 h6 {font-size:2rem !important;line-height:1.2 !important;font-weight:bold !important; color: yellow !important;}
#page-13 #cuadro08 a h4 .tile-title {font-size:1rem !important;line-height:1.2 !important; font-weight:bold !important; color: yellow !important;}
#page-13  #cuadro08-texte h4 {font-size:75% !important;line-height:1 !important;font-weight:bold !important;}

#page-13 #cuadro09 {height: 200px !important; max-height:200px !important;min-height:200px !important;padding-left:2rem !important;padding-top: 1rem !important; margin:0 !important;} 

#tb_fa795c0 {height:390px !important;min-height:390px !important;max-height:390px !important;}
#tb_fa795c0 .module.tb_fa795c0 {height:390px !important;min-height:390px !important;max-height:390px !important;}
#tb_tpxa318 {height:390px !important;min-height:390px !important;max-height:390px !important;}

#page-13 #cuadro10-reloj {width: 100% !important;height:auto !important;min-width: 100% !important; max-width: 100% !important;padding:0 !important;}
#page-13 #decimo .tile-inner {padding:0 !important;}
/* Aplica al módulo visto en la captura */
#page-13 #decimo.module-tile{
  /* asegura que el height tiene efecto */
  display: block;
  min-height: 470px;                /* MIN: ajusta si necesitas */
  height: clamp(300px, 321px, 420px); /* +15% respecto a 278.25px ≈ 321px */
  max-height: 470px;                /* MAX: ajusta si necesitas */
}
/* #page-13 #onceavo .tile-inner {padding:1% 1% 1% 1% !important;} */
#page-13 #onceavo.module-tile{
  /* asegura que el height tiene efecto */
  display: block;
  min-height: 470px;                /* MIN: ajusta si necesitas */
  height: clamp(300px, 321px, 420px); /* +15% respecto a 278.25px ≈ 321px */
  max-height: 470px;                /* MAX: ajusta si necesitas */
}

/* #page-13 #onceavo .wpcf7-response-output {color:white;margin-top:10px;font-size:80%;} */

#page-13 #f0b3411 .uacf7-wrapper-default  {padding:.65em .8em;}
#page-13 #f0b3411 .wpcf7-email{border:1px solid green !important;padding:.65em .8em;}

  input.wpcf7-form-control.wpcf7-submit.has-spinner[type="submit"]{
    padding:1.1em !important; float:none; display:inline-block; background-color:#25D366;color:white; width: 100% !important;border-radius:30px; font-size:90%;text-align:center !important;  }
  input.wpcf7-form-control.wpcf7-submit.has-spinner[type="submit"]:hover{float:none; display:inline-block; background-color:#6BE387;color:white; width: 100% !important;  }
  
#page-13 #cuadro06 p {font-size: 1.6em; line-height: 1.1em;}  


/** BOTONES CTA **/
#bitubi-section-cta {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
}
#bitubi-section-cta .bitubi-cta-btn {
  background-color: #1b1b1b;
  color: #ffffff;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.5s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  display: inline-block;
}
#bitubi-section-cta .bitubi-cta-btn:hover {
  background-color: #e5e5e5;
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(243, 246, 246,0.8);
}

/* ================================
   ESTILOS PERSONALIZADOS FAQ BITUBI.PRO
   ================================ */
/* CONTENEDOR GENERAL */
.elementor-accordion {
  border-top: 1px solid #e5e5e5;
  font-size: 1em;
  line-height: 1.3;
  color: #333;
}

/* CADA BLOQUE DE PREGUNTA */
.elementor-accordion-item {
  border-bottom: 1px solid #e5e5e5;
  background-color: #fff;
  transition: background-color 0.3s ease;
}

/* TITULO (PREGUNTA) */
.elementor-tab-title {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  padding: 18px 20px;
  background-color: #f9f9f9;
  color: #222;
  transition: all 0.3s ease;
}

.elementor-tab-title:hover {
  background-color: #f1f1f1;
  color: #000;
}

/* TITULO ACTIVO (CUANDO SE ABRE) */
.elementor-tab-title.active {
  background-color: #0073e6;
  color: #fff;
}

/* CONTENIDO (RESPUESTA) */
.elementor-tab-content {
  display: none;
  padding: 18px 22px;
  background-color: #fff;
  border-left: 3px solid #0073e6;
  animation: fadeIn 0.4s ease;
}

/* ANIMACIÓN DE APERTURA */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* MOSTRAR CUANDO ESTÁ ACTIVO */
.elementor-tab-content.active {
  display: block;
}

/* LINKS DENTRO DEL CONTENIDO */
.elementor-tab-content a {
  color: #0073e6;
  text-decoration: none;
  border-bottom: 1px dotted #0073e6;
}

.elementor-tab-content a:hover {
  text-decoration: underline;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .elementor-tab-title {
    font-size: 15px;
    padding: 15px 16px;
  }
  .elementor-tab-content {
    padding: 15px 18px;
  }
}

/* ==========================================================
   BITUBI.PRO – ESTILOS EXCLUSIVOS PARA PAGOS Y SUSCRIPCIONES
   Namespace: pagos-
   ========================================================== */
#pagos-hero, #pagos-planes, #pagos-metodos, #pagos-flex, #pagos-facturacion, #pagos-cta {
  background-color: #fff;
  color: #333;
  padding: 20px 20px;
  border-bottom: 1px solid #bbb;
}
.pagos-container {
  max-width: 1100px;
  margin: 0 auto;
}
#pagos-hero {
  background: #fff;
  border-bottom: 2px solid #bbb;
  text-align: left;
}
#pagos-hero h1 {
  color: #ddd;
  font-size: 2.4em;
  font-weight: 800;
}

#pagos-hero .pagos-subtitle {
  font-size: 1.1em;
  color: #000;
  margin-bottom: 1em;
}
.pagos-section h2 {
  color: #777;
  font-size: 1.5em;
  font-weight: 500;
  border-bottom: 2px solid #aaa;
  display: inline-block;
  padding-bottom: 1px;
  margin-bottom: 5px;
  border: 0px ;
}

.pagos-section p {
  color: #000;
  margin-bottom: 15px;
  font-size:1em !important;
  font-weight: 200;
  font-style: italic;
    
}

.pagos-section ul {
  margin-left: 20px;
  list-style: disc;
}
.pagos-section ul li {
  margin-bottom: 8px;
  font-weight: 500;
  font-size:1em;
}

#pagos-metodos img {padding-left:10px;height:auto; width:50px !important;}

/* TABLAS */
/* ==========================================================
   ESTILO ACTUALIZADO DE TABLA DE PRECIOS .pagos-table
   Inspirado en el diseño tipo “pricing tiers” (gpldl.com)
   ========================================================== */
.pagos-table {
  width: 100%;
  border-collapse: collapse;
  margin: 40px auto;
  font-size: 0.95em;
  text-align: center;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
/* ================= CABECERA ================= */
.pagos-table thead th {
  padding: 18px 10px;
  color: #fff;
  font-weight: 600;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.pagos-table thead th:first-child {
  background: #f5f5f5;
  color: #333;
  text-transform: none;
}
/* Colores diferenciados por plan */
.pagos-table thead th:nth-child(2) { background-color: #f05b2d; }  /* Naranja */
.pagos-table thead th:nth-child(3) { background-color: #29a0f5; }  /* Azul */
.pagos-table thead th:nth-child(4) {
  background-color: #25d366;/* Verde */
  color: #fff; /* texto blanco para legibilidad */
}
/* ================= CELDAS ================= */
.pagos-table td {
  font-family: var(--fuente-principal) !important;
  border: 1px solid #e5e5e5;
  padding: 7px 7px;
  vertical-align: middle;
  background: #fff;
  color: #333;
}
/* Primera columna (características) */
.pagos-table td:first-child {
  background-color: #f7f7f7;
  font-weight: 600;
  text-align: left;
  color: #000;
  width: 25%;
  padding-left: 14px;
}
/* Alternancia visual */
.pagos-table tbody tr:nth-child(even) td {
  background-color: #fafafa;
}
/* ================= CHECKMARKS ================= */
.pagos-table td:contains("✓") {
  color: #3fbf76;
  font-weight: 700;
}
/* ================= PRECIOS ================= */
.pagos-table-precio {
  font-size: 1.5em;
  font-weight: 700;
  color: #111;
}
.pagos-cta-row td {
  padding: 18px 10px;
  border-top: 2px solid #e5e5e5;
  background: #fafafa;
}
/* ================ 3 BOTONES =============== */
.bitubi-subscribe-link{
  display:inline-block;
  background:#0b3b70;
  color:#fff;
  padding:.75em 1.5em;
  border-radius:28px;
  text-decoration:none;
  font-weight:600;
}
.bitubi-subscribe-link:hover{ background:#25d366; }


.pagos-btn-plan {
  display: inline-block;
  background-color: #0a3b72;
  color: #fff;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.pagos-btn-plan:hover {
  background-color: #25d366;
  transform: translateY(-1px);
}
.pagos-table td small {
  font-size: 0.85em;
  color: #777;
}
/* ================= CTA FINAL ================= */
.pagos-cta {
  background-color: #0a3b72;
  text-align: center;
  color: #fff;
  padding: 25px 5px;
}
.pagos-cta h2 {
  color: #fff;
  font-size: 1.8em;
  margin-bottom: 8px;
}
.pagos-cta p {
  color: #e2e8f0;
  font-size: 1em;
}
.pagos-btn, .pagos-btn-sec {
  display: inline-block;
  margin: 12px;
  padding: 12px 28px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}
.pagos-btn {
  background-color: #fff;
  color: #0a3b72;
}
.pagos-btn:hover {
  background-color: #e6ecf5;
}
.pagos-btn-sec {
  border: 2px solid #fff;
  color: #fff;
  background: transparent;
}
.pagos-btn-sec:hover {
  background-color: #fff;
  color: #0a3b72;
}
/* ================= RESPONSIVE PAGOS ================= */
@media (max-width: 768px) {
  .pagos-table {
    font-size: 0.85em;
  }
  .pagos-table td:first-child {
    font-size: 0.9em;
  }
  .pagos-table thead th {
    padding: 14px 8px;
  }
}

/* ==========================================================
   ESTILOS PERSONALIZADOS — SECCIÓN CONDICIONES
   Compatible con Elementor | Página: Pagos y Suscripciones
   ========================================================== */

.pagos-condiciones {
  width: 100%;
  max-width: 1100px;
  margin: 60px auto;
  padding: 40px 40px 60px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 3px 15px rgba(0,0,0,0.05);
  line-height: 1.7em;
  color: #222;
}

/* Títulos principales */
.pagos-condiciones h2 {
  font-size: 1.9em;
  color: #0a3b72;
  margin-bottom: 25px;
  border-left: 5px solid #0078ff;
  padding-left: 12px;
  font-weight: 700;
}

/* Subtítulos */
.pagos-condiciones h3 {
  font-size: 1.3em;
  color: #0050b8;
  margin-top: 40px;
  margin-bottom: 15px;
  border-bottom: 2px solid #e0e7ff;
  padding-bottom: 6px;
  font-weight: 600;
}

/* Párrafos */
.pagos-condiciones p {
  margin-bottom: 14px;
  color: #333;
  font-size: 1em;
}

/* Negritas dentro del texto */
.pagos-condiciones strong {
  color: #111;
  font-weight: 600;
}

/* Enlaces */
.pagos-condiciones a {
  color: #0078ff;
  text-decoration: none;
  border-bottom: 1px solid #0078ff33;
  transition: all 0.2s ease;
}

.pagos-condiciones a:hover {
  color: #0056b3;
  border-color: #0056b3;
}

/* Nota final */
.pagos-condiciones-nota {
  margin-top: 30px;
  font-size: 0.95em;
  color: #666;
  border-top: 1px solid #e6e6e6;
  padding-top: 15px;
  line-height: 1.6em;
}

/* Responsive */
@media (max-width: 768px) {
  .pagos-condiciones {
    padding: 30px 20px;
    font-size: 0.95em;
  }

  .pagos-condiciones h2 {
    font-size: 1.6em;
  }

  .pagos-condiciones h3 {
    font-size: 1.1em;
  }
}

/* ==========================================================
   ESTILO PERSONALIZADO PARA COMPLEMENTOS — Bitubi.pro
   ========================================================== */

.pagos-complementos {
  width: 100%;
  max-width: 1200px;
  margin: 60px auto;
  padding: 40px 30px 60px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 15px rgba(0,0,0,0.05);
  color: #222;
}

.pagos-complementos h2 {
  font-size: 1.9em;
  color: #0a3b72;
  margin-bottom: 25px;
  border-left: 5px solid #0078ff;
  padding-left: 12px;
  font-weight: 700;
}

.pagos-complementos p {
  margin-bottom: 25px;
  font-size: 1em;
  line-height: 1.7em;
  color: #333;
}

/* Tabla */
.pagos-complementos-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  font-size: 0.95em;
}

.pagos-complementos-table th,
.pagos-complementos-table td {
  font-family: var(--fuente-principal) !important;    
  border: 1px solid #e0e0e0;
  padding: 12px 14px;
  vertical-align: top;
}
.pagos-complementos-table th {
  background-color: #f7f9fc;
  color: #0a3b72;
  font-weight: 700;
  text-align: left;
}

.pagos-complementos-table tr:nth-child(even) td {
  background-color: #fafafa;
}

/* Nota inferior */
.pagos-complementos-nota {
  font-family: var(--fuente-principal) !important;      
  margin-top: 30px;
  font-size: 0.9em;
  color: #666;
  border-top: 1px solid #e6e6e6;
  padding-top: 15px;
  line-height: 1.6em;
}

/* Responsive */
@media (max-width: 768px) {
  .pagos-complementos {
    padding: 30px 15px;
    font-size: 0.9em;
  }

  .pagos-complementos-table th, 
  .pagos-complementos-table td {
    display: block;
    width: 100%;
  }

  .pagos-complementos-table th {
    background-color: #0a3b72;
    color: #fff;
    border: none;
    border-radius: 4px 4px 0 0;
    margin-top: 20px;
  }

  .pagos-complementos-table td {
    border: none;
    border-bottom: 1px solid #e0e0e0;
    padding-left: 10px;
  }
}

/* ==========================================================
   ESTILO PERSONALIZADO — PROCESOS DE TRABAJO (Bitubi.pro)
   ========================================================== */

.pagos-procesos {
  width: 100%;
  max-width: 1200px;
  margin: 10px auto;
  padding: 40px 30px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
  color: #222;
}

.pagos-procesos h2 {
  font-size: 1.9em;
  color: #0a3b72;
  margin-bottom: 20px;
  border-left: 5px solid #0078ff;
  padding-left: 12px;
  font-weight: 700;
}

.pagos-procesos p {
  font-size: 1em;
  line-height: 1.7em;
  color: #333;
  margin-bottom: 20px;
}

/* Lista numerada */
.pagos-procesos-list {
  counter-reset: step-counter;
  list-style: none;
  padding-left: 0;
  margin-top: 30px;
}

.pagos-procesos-list li {
  counter-increment: step-counter;
  background: #f8f9fb;
  margin-bottom: 14px;
  padding: 15px 20px;
  border-left: 5px solid #0078ff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.pagos-procesos-list li:hover {
  background: #eef5ff;
  transform: translateY(-2px);
}

.pagos-procesos-list li::before {
  content: counter(step-counter) ". ";
  font-weight: 700;
  color: #0078ff;
  font-size: 1.1em;
}

.pagos-procesos-list strong {
  color: #0a3b72;
  font-weight: 600;
}

.pagos-procesos-list em {
  font-style: normal;
  color: #0078ff;
  font-weight: 500;
}

.pagos-procesos-final {
  margin-top: 0px;
  font-size: 0.95em;
  color: #444;
  border-top: 1px solid #e6e6e6;
  padding-top: 15px;
  line-height: 1.6em;
}

/* Responsive */
@media (max-width: 768px) {
  .pagos-procesos {
    padding: 25px 15px;
    font-size: 0.9em;
  }

  .pagos-procesos-list li {
    padding: 12px 15px;
  }

  .pagos-procesos h2 {
    font-size: 1.5em;
  }
}

/* ==========================================================
   ESTILO PERSONALIZADO — DESTACADOS CON ICONOS Bitubi.pro
   ========================================================== */

.pagos-destacados {
  width: 100%;
  max-width: 1200px;
  margin: 10px auto;
  padding: 80px 15px 60px;
  background-color: #ffffff;
  text-align: center;
  color: #222;
}

.pagos-destacados-header h2 {
  font-size: 2em;
  font-weight: 700;
  color: #0a3b72;
  margin-bottom: 10px;
}

.pagos-destacados-header p {
  font-size: 1.1em;
  color: #555;
  margin-bottom: 50px;
  line-height: 1.6em;
}

/* GRID */
.pagos-destacados-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.pagos-destacados-item {
  background: #f8f9fb;
  border-radius: 10px;
  padding: 30px 25px 35px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
}

.pagos-destacados-item:hover {
  background: #eef5ff;
  transform: translateY(-4px);
}

.pagos-destacados-icon {
  margin-bottom: 15px;
  color: #0a3b72;
}

.pagos-destacados-item h3 {
  font-size: 1.25em;
  font-weight: 700;
  color: #0a3b72;
  margin-bottom: 10px;
}

.pagos-destacados-item p {
  font-size: 0.98em;
  color: #333;
  line-height: 1.6em;
}

/* Responsive */
@media (max-width: 768px) {
  .pagos-destacados-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pagos-destacados-header h2 {
    font-size: 1.6em;
  }

  .pagos-destacados-icon svg {
    width: 32px;
    height: 32px;
  }
}

/** FRONTEND SUSCRIPCIONES **/
.bitubi-config-wrapper {
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.bitubi-config-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.bitubi-field label {
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 5px;
}
.bitubi-field input, .bitubi-field select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 15px;
}
.bitubi-btn-submit {
    background: #0b3b70;
    color: #fff;
    padding: 12px;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    transition: background .3s ease;
}
.bitubi-btn-submit:hover {
    background: #072b56;
}
.bitubi-options {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.option-card {
    flex: 1 1 calc(33.333% - 10px);
    position: relative;
    cursor: pointer;
    border: 2px solid #ddd;
    border-radius: 10px;
    transition: all 0.25s ease;
    text-align: center;
}

.option-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.option-card .option-content {
    padding: 15px;
}

.option-card strong {
    display: block;
    font-size: 1.1em;
    color: #0b3b70;
}

.option-card p {
    margin: 5px 0 0;
    color: #444;
    font-size: 0.9em;
}

.option-card:hover {
    border-color: #0b3b70;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.option-card input:checked + .option-content,
.option-card input:checked ~ .option-content {
    background-color: #0b3b70;
    color: #fff;
    border-radius: 8px;
}

.option-card input:checked + .option-content strong,
.option-card input:checked + .option-content p {
    color: #fff;
}

.option-card .desc {
    color: #4caf50;
    font-weight: bold;
}

/* ===============================================
   ESTILOS PARA PÁGINA DE POLÍTICA DE REEMBOLSOS
   ID/clases exclusivos para evitar conflictos
   =============================================== */
.refund-policy {
  background-color: #fff;
  padding: 40px 20px;
  line-height: 1.6;
  color: #222;
}
.refund-container {
  max-width: 900px;
  margin: 0 auto;
}
.refund-policy h2 {
  font-size: 1.8em;
  color: #0a3b72;
  text-align: center;
  margin-bottom: 25px;
  font-weight: 700;
}
.refund-policy h3 {
  color: #0a3b72;
  font-size: 1.2em;
  margin-top: 25px;
  font-weight: 600;
}
.refund-policy p {
  margin: 10px 0;
}
.refund-policy ul {
  list-style-type: disc;
  padding-left: 25px;
  margin: 10px 0 20px 0;
}
.refund-policy li {
  margin-bottom: 6px;
}
.refund-policy a {
  color: #1b66c2;
  text-decoration: none;
}

.refund-policy a:hover {
  text-decoration: underline;
}
.refund-policy hr {
  border: none;
  border-top: 1px solid #e5e5e5;
  margin: 25px 0;
}

/** ESTILS PER WOOCOMERCE PRODUCTE FITXA **/
.woocommerce #content div.product p.price {display:none;}
.woocommerce #content div.product span.price {color:blue;padding-bottom:2em;}
.variations_form .value select {
    display: none;
}
.variations_form .value .label {
    display: inline-block;
    border: 1px solid #ddd;
    padding: 8px 20px;
    margin-right: 10px;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.2s;
}
.variations_form .value .label:hover,
.variations_form .value .label.selected {
    background: #0047FF;
    color: #fff;
    border-color: #0047FF;
}
.woocommerce .elementor-4238 .elementor-element.elementor-element-414d3e5b form.cart table.variations label {padding-right:2em;}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {font-size:1.6em;color:black;}

/* --- Estilo general del área de Mi Cuenta --- */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.woocommerce-MyAccount-navigation li {
    margin-bottom: 10px;
}
.woocommerce-MyAccount-navigation a {
    display: flex;
    align-items: flex-end;    
    justify-content: center;  
    text-align: center;
    width: 220px;
    height: 40px;
    background: #f7f7f8;
    color: #111;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    line-height: 1.2;
    padding-bottom: 8px;      
    box-sizing: border-box;
}
.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a {
    background: #0073aa;
    color: #fff;
}
.woocommerce-MyAccount-navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.woocommerce-result-count {
    display: none !important;
}
@media (max-width: 768px) {
    .woocommerce-MyAccount-navigation a {
        width: 100%;
    }
}

/* ===============================================
   AREA PRIVADA B2B
   =============================================== */

body.b2b-area .u-column1.col-1,
body.b2b-area .woocommerce-form-login-toggle {
    display: none !important;
}

.btb2b-header-logo { margin-left: 15px !important; padding-bottom:15px !important;}

.eael-lr-form-wrapper.style-2 {padding:0.6em;}

.btb2b-account-wrapper .u-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  align-items: flex-start;
  margin-top: 20px;
}
.btb2b-account-wrapper .u-column1,
.btb2b-account-wrapper .u-column2 {
  flex: 1 1 360px;
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.btb2b-account-wrapper .woocommerce form .form-row label {
  text-align: left;
  font-weight: 600;
  margin-bottom: 4px;
}
.btb2b-account-wrapper .woocommerce form input.input-text {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #ccc;
  padding: 10px;
}
.btb2b-account-wrapper button.button {
  background-color: #005cff;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
}
.btb2b-account-wrapper button.button:hover {
  background-color: #0040b8;
}

.btb2b-area-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  align-items: flex-start;
  margin: 40px auto;
  max-width: 1100px;
}
.btb2b-col {
  flex: 1 1 480px;
  background: #fff;
  padding: 30px 35px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.btb2b-col h3 {
  font-size: 1.3em;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  color: #222;
}
.btb2b-col form {
  display: block;
}
.btb2b-col label {
  text-align: left !important;
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}
.btb2b-col input.input-text {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #ccc;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.btb2b-col button.button {
  background-color: #005cff;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
}
.btb2b-col button.button:hover {
  background-color: #0040b8;
}
@media (max-width: 768px) {
  .btb2b-area-wrapper {
    flex-direction: column;
    gap: 30px;
  }
}

.btb2b-col form.woocommerce-form {
  background: #fff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

#btb2b-area-section {
  background: #f7f8fa;
  padding: 0px 20px;
}
#btb2b-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
#btb2b-logo {
  width: 100%;
  max-width: 200px;
  height: auto;
  margin-bottom: 20px;
}
#btb2b-title {
  font-size: 2rem;
  color: #005cff;
  margin-bottom: 10px;
  font-weight: 700;
}
#btb2b-subtitle {
  font-size: 1rem;
  color: #555;
  margin-bottom: 40px;
}
#btb2b-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}
#btb2b-legal {
  font-size: 0.9rem;
  color: #666;
  margin-top: 30px;
}
#btb2b-legal a {
  color: #005cff;
  text-decoration: none;
  font-weight: 600;
}
#btb2b-legal a:hover {
  text-decoration: underline;
}
@media (max-width: 768px) {
  #btb2b-columns {
    flex-direction: column;
  }
}

/* ==========================================================
   AJUSTE VISUAL: MENSAJES DE ÉXITO ("Guardado correctamente")
   ========================================================== */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info, 
.woocommerce-account .woocommerce-error {
    padding-left: 30px !important;  /* Más espacio a la izquierda */
    padding-right: 20px !important; /* Espacio derecha */
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    
    /* Opcional: Asegurar que el icono no se coma el texto */
    display: flex !important;
    align-items: center;
    margin-bottom: 25px !important; /* Separación con el formulario */
}

/* Si el mensaje es un texto suelto que aparece vía AJAX cerca del botón */
.bitubi-b2b-success-msg, 
.b2b-save-success {
    margin-left: 20px !important;
    padding-left: 10px !important;
}


/* ==========================================================
   ESTILOS GLOBALES BOTONES ÁREA PRIVADA B2B (Bitubi)
   ========================================================== */

/* 1. Estilo ESTÁNDAR para todos los botones de Mi Cuenta (Rojo Corporativo) */
.woocommerce-account .button,
.woocommerce-account input.button,
.woocommerce-account button.button,
.woocommerce-account .woocommerce-Button {
    background-color: #d32f2f !important; /* Rojo Bitubi */
    color: #ffffff !important;            /* Texto Blanco */
    font-weight: 600 !important;
    font-size: 1.1em !important;
    padding: 15px 35px !important;        /* Botón Grande */
    border: 1px solid white !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16) !important; /* Sombra elegante */
    transition: all 0.5s ease;
    cursor: pointer;
    line-height: normal !important;
    display: inline-block;
    text-decoration: none !important;
}

/* Efecto al pasar el ratón (Hover) */
.woocommerce-account .button:hover,
.woocommerce-account input.button:hover,
.woocommerce-account button.button:hover {
    background-color: #000 !important; /* Negre más oscuro */
    color:#fff !important;
    transform: translateY(-2px);          /* Pequeña elevación */
    box-shadow: 0 5px 12px rgba(0,0,0,0.25) !important;
}

/* 2. CLASE ESPECIAL: Botón Blanco (Para fondos oscuros/rojos como la alerta) */
.bitubi-btn-white {
    background-color: #ffffff !important; /* Fondo Blanco */
    color: #d32f2f !important;            /* Texto Rojo */
}

.bitubi-btn-white:hover {
    background-color: #f9f9f9 !important;
    color: #a50000 !important;
}








/* ==========================================================
   MI CUENTA: FIX DEFINITIVO (Romper Columnas + Centrado)
   ========================================================== */

/* 1. LIENZO Y CENTRADO VERTICAL */
body.woocommerce-account {
    background-color: var(--gray-100, #f9f9f9) !important;
    margin: 0 !important;
}

body.woocommerce-account #main, 
body.woocommerce-account .entry-content {
    width: 100% !important;
    min-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Centra verticalmente */
    align-items: center !important;     /* Centra horizontalmente */
    background: transparent !important;
    border: none !important;
}

/* 2. LA TARJETA (Tu ancho de 700px) */
.woocommerce-account .woocommerce {
    width: 100% !important;
    max-width: 700px !important;
    background-color: #fff !important;
    padding: 60px 50px !important;
    border-radius: 12px !important;
    border: 1px solid var(--gray-200, #eee) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08) !important;
    
    /* CENTRADO CLAVE */
    margin: 0 auto !important; 
    float: none !important;
    display: block !important;
}

/* 3. ¡IMPORTANTE! ROMPER LAS COLUMNAS INTERNAS DE WOOCOMMERCE */
/* Esto arregla que el formulario se pegue a la izquierda */
.woocommerce-account .woocommerce .col2-set,
.woocommerce-account .woocommerce .u-columns,
.woocommerce-account .woocommerce .col-1,
.woocommerce-account .woocommerce .col-2 {
    width: 100% !important;
    float: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}

/* 4. ESTILO DE LOS CAMPOS Y BOTONES */
.woocommerce form.woocommerce-form-login {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Título */
.woocommerce-account h2 {
    text-align: center !important;
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    color: #000 !important;
    margin-bottom: 30px !important;
}

/* Inputs */
.woocommerce form .form-row {
    width: 100% !important;
    float: none !important;
    margin-bottom: 20px !important;
}

.woocommerce form .form-row input.input-text {
    width: 100% !important;
    padding: 15px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    height: auto !important;
}

/* Botón Negro */
.woocommerce button.button.woocommerce-form-login__submit {
    width: 100% !important;
    background-color: #000 !important;
    color: #fff !important;
    padding: 18px !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    border-radius: 6px !important;
    margin-top: 10px !important;
    display: block !important;
}

/* 5. OCULTAR REGISTRO (Opcional - Si solo quieres Login) */
/* Si aparecen dos formularios uno debajo del otro y solo quieres Login, descomenta esto: */
/* .woocommerce .col-2 { display: none !important; }
*/

/* RESPONSIVE */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce {
        max-width: 90% !important;
        padding: 30px 20px !important;
    }
}



































/* ==========================================================
   TIPOGRAFÍA RESPONSIVA POR RANGOS (SE MANTIENEN IGUAL)
   ========================================================== */
/* ... (Los bloques @media para XS, SM, MD, LG, XL, XXL se mantienen intactos aquí abajo) ... */
/* Por brevedad, he omitido copiar todo el bloque de @media querys, pero DEBES mantenerlos 
   en el archivo final, ya que contienen ajustes de tamaño específicos para tu diseño. 
   La única diferencia es que ya no necesitan declarar font-family: Roboto porque lo heredan del body. */


/* ******************************************************************************* */
/** GLOBALES Totes les resolucions                                                 */
/* ******************************************************************************* */
/* --- FIX global: las imágenes dentro de módulos/tiles nunca se salen --- */
.module img,
.tile .tile-content img{
  max-width: 100%;
  height: auto;
  display: block;
  margin-top:-1em !important;
}

/* Modo CUBRIR: llena el cuadro, recortando lo que sobre */
.btb-imgbox > img.btb-fit-cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Si no quieres fijar un ratio, al menos centra y limita el ancho */
.btb-img--fluid{
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* ===== CF7 “Contacto Home” — compacto y pegado arriba ===== */
/* (Mantengo tus estilos de CF7 intactos) */
.form-home .wpcf7-form{
  --cf7-fs: 14px;
  --cf7-pad-y: .45em;
  --cf7-pad-x: .75em;
  --cf7-radius: 0;
  --cf7-gap: .40em;
}
.form-home .wpcf7-form p{
  margin: var(--cf7-gap) 0 !important;
}
.form-home .wpcf7-form .wpcf7-form-control-wrap{
  display: block;
  margin: calc(var(--cf7-gap) - .15em) 0 !important;
}
.form-home .wpcf7-form .wpcf7-form-control:not(.wpcf7-submit),
.form-home input:not([type="submit"]):not([type="button"]):not([type="reset"]),
.form-home textarea,
.form-home select{
  font-size: 14px;
  font-size: var(--cf7-fs, 14px);
  padding: .45em .75em;
  padding: var(--cf7-pad-y, .45em) var(--cf7-pad-x, .75em);
  line-height: 1.25;
  min-height: 2.1em;
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
}
.form-home textarea.wpcf7-form-control{
  min-height: 3.2em;
  max-height: 6em;
  resize: vertical;
}
.form-home input.wpcf7-submit,
.form-home .wpcf7-submit{
  font-size: 14px;
  padding: .35em 1.1em;
  border-radius: var(--cf7-radius);
  display: inline-block;
  float: none;
  margin-top: .45em !important;
}
.form-home .wpcf7-spinner{ transform: scale(.85); margin-left: .4em; }
.form-home ::placeholder{ font-size: .92em; opacity: .9; }
.tile-content .form-home{ margin-top: -10px; }
@media (max-width:500px){
  .form-home .wpcf7-form .wpcf7-form-control:not(.wpcf7-submit){
    font-size: 13.5px;
    padding: .40em .7em;
    min-height: 2.05em;
  }
  .form-home textarea.wpcf7-form-control{ min-height: 3.0em; }
  .form-home input.wpcf7-submit{ padding: .42em 1.05em; }
}

form.wpcf7-form {
  max-width: 700px;
  margin: 0 auto;
}
form.wpcf7-form input,
form.wpcf7-form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  transition: border 0.3s ease;
}
form.wpcf7-form input:focus,
form.wpcf7-form textarea:focus {
  border-color: #009688;
  outline: none;
}
form.wpcf7-form .wpcf7-submit {
  background: #00c853;
  color: #fff;
  border: none;
  padding: 14px 32px;
  border-radius: 30px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.3s ease;
  display: block;
  margin: 0 auto;
}
form.wpcf7-form .wpcf7-submit:hover {
  background: #009624;
}

/********** TARJETAS COMO COLABORAR CON LOS CLIENTES *************/
.colaboracion-box {
  width: 100%;
  padding: 20px 25px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  color: #333;
  line-height: 1.6;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  height: auto;
  min-height: 700px;
}
.colaboracion-box h4 {
  font-size: 2em;
  font-weight: 700;
  color: #d32f2f;
  margin-bottom: 25px;
}
.colaboracion-item {
  display: flex;
  align-items: flex-start;
  margin: 20px 0 8px;
}
.colaboracion-item .icon {
  font-size: 2em;
  font-weight: bold;
  color: #d32f2f;
  margin-right: 10px;
  line-height: 1;
}
.colaboracion-item h3 {
  font-size: 1.4em;
  font-weight: bold;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
}
.colaboracion-box p {
  font-size: 1em;
  margin: 0 0 15px;
  color: #d32f2f;
  padding-left: 3em;
}
.colaboracion-box .nota {
  font-size: 0.9em;
  color: #666;
  margin-top: 25px;
  text-align: justify;
  padding-left: 0;
}
.colaboracion-box .nota strong {
  color: #d32f2f;
}

.colaboracion-box.ficha-2 {
  width: 100%;
  max-width: 600px;
  margin: 40px auto;
  padding: 25px 30px;
  border: 2px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
  line-height: 1.6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  height: 600px;
  min-height: 600px;
  max-height: auto;
}
.ficha-2 .colaboracion-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}
.ficha-2 .colaboracion-header .icon {
  font-size: 24px;
  color: #d32f2f;
  margin-right: 8px;
  line-height: 1;
}
.ficha-2 .colaboracion-header h3 {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #555;
  margin: 0;
}
.ficha-2 .intro {
  font-size: 1.6em;
  color: #d32f2f;
  margin-bottom: 20px;
  padding-left: 3em;
}
.ficha-2 .nota {
  font-size: 0.9em;
  color: #666;
  margin-top: 25px;
  text-align: justify;
}
.ficha-2 .nota strong {
  color: #d32f2f;
}

.ficha-2 {
  width: 100%;
  padding: 20px 25px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  color: #333;
  line-height: 1.6;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  height: auto;
  min-height: 700px;
}

.ficha-header {
  font-size: 1.4em;
  font-weight: 700;
  letter-spacing: 1px;
  color: #aaa;
  margin-bottom: 10px;
  position: relative;
  padding-left: 1.5em;
}
.ficha-header::before {
  font-family: "FontAwesome";
  content: "\f061";
  position: absolute;
  left: 0;
  top: 4px;
  color: #e63312;
  font-size: 1em;
}
.ficha-subheader {
  background: #e63312;
  color: #fff;
  padding: 12px 16px;
  font-size: 1em;
  line-height: 1.3;
  margin-bottom: 15px;
}
.ficha-subheader h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.ficha-subheader h2 span {
  font-weight: 400;
}
.ficha-subheader.curva h2 {padding-left:0.6em;}
.ficha-texto-intro {
  font-size: 14px;
  color: #777;
  margin-bottom: 15px;
  line-height: 1.4;
  padding-left:2em;
}
.ficha-lista {
  list-style: none;
  padding-left: 2em;
  margin: 0;
  flex-grow: 1;
}
.ficha-lista li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 0.95em;
  color: #e63312;
  line-height: 1.4;
  font-weight: normal;
}
.ficha-lista li::before {
  font-family: "FontAwesome";
  content: "\f061";
  position: absolute;
  left: 0;
  top: 2px;
  color: #e63312;
  font-size: 13px;
}
.ficha-subheader.curva {
  background: #e63312;
  color: #fff;
  padding: 14px 20px;
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 15px;
  width:100%;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  display: inline-block;
}
.ficha-subheader.curva h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.ficha-subheader.curva h2 span {
  font-weight: 400;
}

@media (max-width: 1000px) {
  .colaboracion-box {
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    color: #333;
    line-height: 1.6;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    height: auto;
    min-height: 700px;
  }
  .colaboracion-box h2 {
    font-size: 1.8em;
    font-weight: 700;
    color: #d32f2f;
    margin-bottom: 25px;
  }
  .colaboracion-item {
    display: flex;
    align-items: flex-start;
    margin: 20px 0 8px;
  }
  .ficha-lista li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 8px;
    font-size: 1.1em;
    color: #e63312;
    line-height: 1.4;
    font-weight: normal;
  }
  .ficha-2 {
    max-width: 100%;
    padding: 10px;
    height: auto;
    min-height: auto;
    max-height: none;
  }
  .ficha-subheader {
    font-size: 14px;
    padding: 10px;
  }
  .ficha-texto-intro,
  .ficha-lista li {
    font-size: 1.2em;
  }
  .colaboracion-box .nota {
    font-size: 1.1em;
    color: #666;
    margin-top: 25px;
    text-align: left;
    padding-left: 0;
  }
}

/* === Área Privada B2B (versión integrada en child) === */
body.b2b-area #b2b-dashboard {
    background: #f3f4f6;
    color: #222;
    line-height: 1.5;
    --color-bg-header: #111;
    --color-bg-sidebar: #1c1c1c;
    --color-bg-content: #ffffff;
    --color-text-sidebar: #eee;
    --color-text-light: #ccc;
    --btn-primary-bg: #c00;
    --btn-primary-text: #fff;
}
body.b2b-area #b2b-dashboard header {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: var(--color-bg-header);
    color: #fff;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
}
body.b2b-area #b2b-dashboard .sidebar {
    width: 240px;
    background: var(--color-bg-sidebar);
    color: var(--color-text-sidebar);
    padding-top: 25px;
    position: fixed;
    top: 70px; bottom: 0; left: 0;
    overflow-y: auto;
}
body.b2b-area #b2b-dashboard .sidebar a:hover {
    background: #333;
}
body.b2b-area #b2b-dashboard .main {
    margin-left: 240px;
    padding: 30px;
    background: var(--color-bg-content);
}
body.b2b-area #b2b-dashboard footer {
    background: var(--color-bg-header);
    color: #999;
    text-align: center;
    padding: 15px;
    position: fixed;
    bottom: 0; left: 240px; right: 0;
}
body.b2b-area .btn-primary {
    display: inline-block;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
}
body.b2b-area #b2b-menu-toggle {
    display: none;
    position: absolute;
    right: 18px; top: 18px;
    width: 36px; height: 26px;
    background: none;
    border: none;
    cursor: pointer;
}
body.b2b-area #b2b-menu-toggle .bar {
    display: block;
    width: 100%; height: 3px;
    margin: 5px 0;
    background-color: #00b3b3;
    border-radius: 2px;
    transition: all 0.3s ease;
}
body.b2b-area #b2b-menu-toggle.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
body.b2b-area #b2b-menu-toggle.active .bar:nth-child(2) {
    opacity: 0;
}
body.b2b-area #b2b-menu-toggle.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
@media (max-width: 768px) {
    body.b2b-area #b2b-menu-toggle { display: block; }
    body.b2b-area #b2b-dashboard .sidebar {
        left: -260px;
        transition: left 0.3s ease;
    }
    body.b2b-area #b2b-dashboard .sidebar.open { left: 0; }
    body.b2b-area #b2b-dashboard .main { margin-left: 0; padding: 20px; }
}

/* ============================================================
   ESTILOS PERFIL B2B — TOTALMENTE AISLADOS (namespaced)
   ============================================================ */
.btb2b-profile-wrapper {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 20px;
  background-color: #ffffff;
}
.btb2b-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.btb2b-tab-link {
  border: 1px solid #cbd5e1;
  background-color: #f8fafc;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95em;
}
.btb2b-tab-link.active {
  background-color: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}
.btb2b-tab-panel { display: none; }
.btb2b-tab-panel.active { display: block; }

.btb2b-field-row { margin-bottom: 14px; }
.btb2b-field-row label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}
.btb2b-field-row input,
.btb2b-field-row select,
.btb2b-field-row textarea {
  width: 100%;
  padding: 7px 9px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  font-size: 0.95em;
}
.btb2b-field-inline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.btb2b-verifactu-block {
  margin-top: 20px;
  padding: 15px;
  border-radius: 4px;
  background-color: #f1f5f9;
  border: 1px dashed #64748b;
}
.btb2b-verifactu-block h4 {
  margin-top: 0;
  margin-bottom: 6px;
}
.btb2b-hint {
  font-size: 0.85em;
  color: #64748b;
}
.btb2b-profile-actions {
  margin-top: 24px;
  text-align: right;
}
.btb2b-profile-save {
  background-color: #0f172a;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 10px 22px;
  font-weight: 600;
  cursor: pointer;
}
.btb2b-profile-save:hover {
  background-color: #111827;
}
@media (max-width: 768px) {
  .btb2b-field-inline { grid-template-columns: 1fr; }
}

/* Corrección WooCommerce: cuando NO existe formulario de registro */
.woocommerce .col2-set .col-1 { width: 100% !important; float: none !important; }
.woocommerce .col2-set .col-2 { display: none !important; }
.woocommerce form.login { max-width: 480px; margin: 0 auto !important; }
div[class*="guf-"], div[class*="google"], div[class*="g_id_"] { display: none !important; visibility: hidden !important; }

/* ==========================================================
   SIDEBAR BITUBI · BOLD CREATIVE DIRECTION (2025)
   ========================================================== */
#headerwrap::after {
    content:"";
    position:absolute;
    top:0; right:-2px;
    width:2px; height:100%;
    background: linear-gradient(180deg,#ff2aad 0%,#00c8ff 50%,#ffcc00 100%);
    opacity:0.6;
}
#headerwrap #header { padding: 22px 20px 14px; }
#headerwrap #site-description {
   /* font-size: 1.2rem;
    line-height: 1.1;
    font-weight: 600;
    color: #979696;
    margin-top: 4px; */
    
}



/* ==========================================================
   TEXTO NEUMORPHISM: DESCRIPCIÓN DEL SITIO
   Elemento: #site-description
   ========================================================== */

#header #site-description,
#header #site-description span {
    /* 1. COLOR DEL TEXTO: Gris Técnico */
    /* Es vital que no sea negro ni blanco puro para ver las luces */
    color: #67748e !important; 

    /* 2. TIPOGRAFÍA */
    /* El efecto se nota mejor en fuentes gruesas */
    font-weight: 800 !important; 
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important; /* Un poco de aire ayuda a la lectura */
    
    /* 3. FONDO TRANSPARENTE */
    background: transparent !important;

    /* 4. LA MAGIA: Doble Sombra de Texto */
    text-shadow: 
        3px 3px 6px rgba(163, 177, 198, 0.6),  /* Sombra oscura (abajo-derecha) */
        -3px -3px 6px rgba(255, 255, 255, 1) !important; /* Brillo blanco (arriba-izquierda) */
        
    /* Ajuste de márgenes para que respire */
    display: block !important;
    margin-top: 0px !important;
    padding: 5px !important;
}





#main-nav-wrap #main-nav {
    margin: 0;
    padding: 6px 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
#main-nav-wrap #main-nav > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e3e3e8;
    color: #1f1f25;
    transition: transform 120ms ease, border-color 120ms ease, box-shadow 160ms ease, background 140ms ease;
}
#main-nav-wrap #main-nav > li > a:hover {
    border-color: #c0c0ff;
    background: #fafaff;
    box-shadow: 0 0 8px rgba(122,95,255,0.25);
    transform: translateX(3px);
}
#main-nav-wrap #main-nav > li.current-menu-item > a {
    background: #f0efff;
    border-color: #8d7aff;
    color: #2d1d92;
    box-shadow: 0 0 6px rgba(92,70,255,0.28);
}
.neon-icon {
    width: 20px !important;
    height: 20px !important;
    display: inline-block !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex-shrink: 0 !important;
    margin-right: 8px !important;
}
#main-nav li > a > .neon-icon {
    background-image: var(--neon-icon-img) !important;
}

/* ==========================================================
   PÁGINA SHOP y PRODUCTOS
   ========================================================== */
.woocommerce ul.products li.product .price { display:none !important; }

/* ============================================================
   FORMULARIOS B2B – SOLICITAR PRESUPUESTO
   ============================================================ */
#btb2b-budget-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 5px;
    box-sizing: border-box;
}
.btb2b-budget-header h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: #111827;
}
.btb2b-budget-subtitle {
    margin-bottom: 18px;
    color: #4b5563;
    font-size: 0.95rem;
}
.btb2b-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
}
.btb2b-card h3 {
    font-size: 1.1rem;
    margin: 0 0 5px;
    font-weight: 600;
    color: #111827;
}
.btb2b-card-sub {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0 0 12px;
}
.btb2b-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 10px;
}
@media (max-width: 800px) {
    .btb2b-grid-2 { grid-template-columns: 1fr; }
}
.btb2b-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 2px;
}
.btb2b-field input,
.btb2b-field select,
.btb2b-field textarea {
    width: 100%;
    border: 1px solid #d1d5db;
    background: #fff;
    padding: 7px 9px;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-bottom: 6px;
    transition: all 0.15s ease-out;
}
.btb2b-field input:focus,
.btb2b-field select:focus,
.btb2b-field textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,.18);
    outline: none;
}
.btb2b-field select {
    background-color: #fff !important;
    color: #111 !important;
}
.btb2b-field input[type="file"] { padding: 5px; font-size: 0.88rem; }
.btb2b-actions { margin-top: 15px; }
.btb2b-submit-btn {
    width: 100%;
    padding: 14px;
    background: #2563eb;
    color: white;
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease-out;
}
.btb2b-submit-btn:hover { background: #1d4ed8; }
#btb2b-budget-message {
    margin-top: 10px;
    padding: 10px;
    border-radius: 6px;
    display: none;
    font-size: 0.9rem;
}
#btb2b-budget-message.success { background: #d1fae5; color: #047857; display: block; }
#btb2b-budget-message.error { background: #fee2e2; color: #b91c1c; display: block; }

/* ==========================================================
   FORMULARIOS B2B – PRESUPUESTOS (VERSIÓN OPTIMIZADA)
   ========================================================== */
.btb2b-budget-wrapper {
    background: #fff;
    border: 1px solid #e2e2e2;
    padding: 28px 32px;
    border-radius: 12px;
    max-width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
}
.btb2b-budget-title {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.btb2b-budget-date {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 8px;
}
.btb2b-budget-intro {
    font-size: 0.95rem;
    color: #444;
    margin-bottom: 25px;
}
.btb2b-budget-section {
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 20px;
    margin-bottom: 22px;
}
.btb2b-budget-section h3 {
    font-size: 1.05rem;
    margin: 0 0 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}
.btb2b-budget-section h3 i { font-size: 1.2rem; color: #111827; }
.btb2b-field-group label {
    display: block;
    margin-bottom: 3px;
    font-size: 0.85rem;
    font-weight: 600;
}
.btb2b-field-group input,
.btb2b-field-group textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #f5f7fa;
    font-size: 0.93rem;
    box-sizing: border-box;
}
.btb2b-field-group textarea { resize: vertical; }
.btb2b-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}
.btb2b-switch input { display: none; }
.btb2b-slider {
    position: relative;
    width: 42px;
    height: 22px;
    background: #d1d5db;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s;
}
.btb2b-slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
}
.btb2b-switch input:checked + .btb2b-slider { background: #2563eb; }
.btb2b-switch input:checked + .btb2b-slider::before { transform: translateX(20px); }
.btb2b-switch-label { font-size: 0.9rem; color: #374151; }
.btb2b-budget-submit {
    width: 100%;
    background: #2563eb;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    padding: 12px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}
.btb2b-budget-submit:hover { background: #1e40af; }
@media(max-width: 768px){
    .btb2b-grid-2 { grid-template-columns: 1fr; }
}

/* SISTEMA DE SUBIDA DE ARCHIVOS (VERSIÓN FINAL) */
.btb2b-file-upload {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}
.btb2b-file-upload input[type="file"].btb2b-input-files {
    position: absolute;
    left: -9999px;
    visibility: hidden;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}
.btb2b-file-btn {
    background: #1e293b;
    color: #fff;
    padding: 8px 14px;
    font-size: 0.9rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}
.btb2b-file-btn:hover { background: #0f172a; }
.btb2b-file-count { color: #4b5563; font-size: 0.85rem; }
.btb2b-file-preview { margin-top: 12px; min-height: 70px; }
@keyframes btb2bFadeInUp {
    0% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}
.btb2b-file-item {
    position: relative;
    padding: 12px 14px;
    background: #f7f7f7;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid #e2e2e2;
    font-size: 14px;
    color: #333;
    display: flex;
    flex-direction: column;
    word-break: break-all;
    animation: btb2bFadeInUp 0.18s ease-out;
}
.btb2b-file-name { flex: 1; color: #333; }
.btb2b-remove-file {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    background: #d9534f;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
}
.btb2b-remove-file:hover { background: #c9302c; transform: scale(1.15); }
.btb2b-remove-file::before,
.btb2b-remove-file::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
}
.btb2b-remove-file::before { transform: rotate(45deg); }
.btb2b-remove-file::after { transform: rotate(-45deg); }

/* CAMPOS DE ENTRADA Y SELECCIÓN – COLOR MEJORADO */
.btb2b-field-group input,
.btb2b-field-group select,
.btb2b-field-group textarea,
.btb2b-field input,
.btb2b-field select,
.btb2b-field textarea {
    background-color: #f7f6f6 !important;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 0.93rem;
    box-sizing: border-box;
    color: #333;
}
.btb2b-field-group input::placeholder,
.btb2b-field-group textarea::placeholder,
.btb2b-field input::placeholder,
.btb2b-field textarea::placeholder {
    color: #999;
}
.btb2b-field-group select,
.btb2b-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #f7f6f6 !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23999' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}
.btb2b-field-group input:focus,
.btb2b-field-group select:focus,
.btb2b-field-group textarea:focus,
.btb2b-field input:focus,
.btb2b-field select:focus,
.btb2b-field textarea:focus {
    background-color: #efeeee !important;
    border-color: #b8b8b8 !important;
    outline: none !important;
    transition: background-color .15s ease, border-color .15s ease;
}

/* Ajustes finales de subida */
.btb2b-file-preview { display: flex; flex-wrap: wrap; gap: 12px; }
.btb2b-file-item { width: 140px; flex-direction: column; align-items: flex-start; }
.btb2b-upload-section { margin-top: 24px; padding-top: 16px; border-top: 1px solid #e6e6e6; }
.btb2b-upload-section label:first-of-type { font-weight: 600; font-size: 0.95rem; color: #111; }
.btb2b-file-rules { margin: 6px 0 14px 0; font-size: 0.82rem; color: #666; }

/* MODO ULTRACOMPACTO */
.btb2b-field-group label, .btb2b-field label { margin-bottom: 1px !important; font-size: 0.8rem; line-height: 1.1; }
.btb2b-field-group, .btb2b-field { margin-bottom: 6px !important; }
.btb2b-field-group input,
.btb2b-field-group select,
.btb2b-field-group textarea,
.btb2b-field input,
.btb2b-field select,
.btb2b-field textarea {
    padding: 5px 9px !important;
    height: 34px;
    background-color: #f7f6f6 !important;
}
.btb2b-field-group textarea, .btb2b-field textarea { height: auto; min-height: 80px !important; padding-top: 6px !important; padding-bottom: 6px !important; }
.btb2b-grid-2 { gap: 10px 14px !important; }
.btb2b-budget-section { padding: 16px 18px !important; margin-bottom: 18px !important; }
.btb2b-upload-section { margin-top: 20px !important; padding-top: 12px !important; }
.btb2b-budget-submit { padding: 10px !important; font-size: 0.95rem !important; }

/* ESTILO CARD (Stripe-like) */
.btb2b-card,
.btb2b-upload-stripe-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 22px 24px;
    margin-bottom: 26px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.04);
}
.btb2b-card::before, .btb2b-upload-stripe-card::before { display: none !important; }
.btb2b-icon-title,
.btb2b-upload-stripe-card label {
    position: relative;
    display: block;
    padding-bottom: 10px;
    margin-bottom: 16px;
    font-weight: 600;
}
.btb2b-icon-title::after,
.btb2b-upload-stripe-card label::after {
    content: "";
    display: block;
    height: 1px;
    background: #e5e7eb;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

/* HEADER PREMIUM */
.btb2b-budget-header {
    border-radius: 14px 14px 0 0;
    padding: 30px 36px 24px 36px;
    margin: -32px -32px 24px -32px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    background-color: #eee;
}
.btb2b-budget-header::before {
    content: "";
    position: absolute;
    top: -40px; left: -40px;
    width: 180%; height: 110px;
    background: rgba(255,255,255,0.32);
    filter: blur(35px);
    opacity: 0.35;
    transform: rotate(-8deg);
}
.btb2b-budget-title {
    font-size: 2.15rem;
    font-weight: 700;
    margin: 0 0 14px 0;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.btb2b-budget-date, #btb2b-fecha-hora {
    font-size: 1rem;
    margin-bottom: 12px;
    color: #ffffff !important;
    opacity: 0.92 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.16);
}
.btb2b-budget-intro {
    font-size: 0.92rem;
    margin: 0;
    color: #ffffff;
    opacity: 0.92;
    text-shadow: 0 1px 2px rgba(0,0,0,0.14);
}
.btb2b-file-btn.disabled { background: #9ca3af; cursor: not-allowed; opacity: 0.6; }
.btb2b-file-icon svg { display: block; width: 18px; height: 18px; }

/* Variantes Header */
.btb2b-header--rescate { background: linear-gradient(135deg, #f78b3b 0%, #ff9b55 100%); }
.btb2b-header--adaptaciones { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); }
.btb2b-header--prepress { background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%); }
.btb2b-header--proyectos { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); }

.btb2b-field--privacy { margin: 18px 0 14px; font-size: 0.9rem; }
.btb2b-checkbox-label { display: flex; align-items: center; gap: 8px; color: #374151; }
.btb2b-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: #2563eb; cursor: pointer; }
.btb2b-checkbox-label a { color: #2563eb; text-decoration: underline; }

/* Floating Timestamp */
.btb2b-budget-datetime {
    position: absolute;
    top: 12px; right: 12px;
    background: #FFFFFF;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.2px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    z-index: 20;
    pointer-events: none;
    transition: all 0.25s ease;
}
.btb2b-budget-datetime:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
    box-shadow: 0 3px 6px rgba(0,0,0,0.06);
}
@media (max-width: 768px) {
    .btb2b-budget-datetime { top: 10px; right: 10px; font-size: 12px; padding: 5px 8px; }
}



/* Estilo para el mensaje de ahorro */
.bitubi-ahorro-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 8px;
    background-color: #d4edda; /* Verde clarito fondo */
    color: #155724;            /* Verde oscuro texto */
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: bold;
    vertical-align: middle;
}


.woocommerce-price-suffix {font-size:0.5em !important;}
.elementor-4238 .elementor-element.elementor-element-53f5caed.elementor-wc-products ul.products li.product .button {color: blue !important;}
.onsale {display: none !important;}


/* ==========================================================
   19. MENSAJES WOOCOMMERCE BLINDADOS (Prioridad Máxima)
   ========================================================== */

/* Usamos "html body" y "#body" para ganar a cualquier estilo del tema */
html body .woocommerce-error, 
html body .woocommerce-info, 
html body .woocommerce-message,
#body .woocommerce-error, 
#body .woocommerce-info, 
#body .woocommerce-message {
    /* FORZAMOS EL ESPACIO IZQUIERDO: 85px para asegurar que no toque el icono */
    padding: 18px 20px 18px 85px !important; 
    
    margin-bottom: 25px !important;
    border: none !important;            
    border-radius: 6px !important;      
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    font-weight: 500 !important;
    font-size: 1.05em !important;
    line-height: 1.5 !important;
    position: relative !important;
    list-style: none !important;        
    width: 100%;
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    color: #ffffff !important;
    text-indent: 0 !important; /* Evita que el texto se mueva raro */
}

/* 2. ICONOS SVG (Aseguramos posición fija) */
html body .woocommerce-error::before, 
html body .woocommerce-info::before, 
html body .woocommerce-message::before {
    content: "" !important;
    position: absolute !important;
    left: 25px !important; /* Un poco más separado del borde */
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;   /* Icono un pelín más grande */
    height: 32px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* 3. IMÁGENES DE LOS ICONOS (SVG BLANCO) */

/* A) INFO (Azul) */
html body .woocommerce-info { background-color: #29a0f5 !important; }
html body .woocommerce-info::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");

    background-color: transparent !important;
}

/* B) ÉXITO (Verde) */
html body .woocommerce-message { background-color: #25d366 !important; }
html body .woocommerce-message::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}

/* C) ERROR (Rojo) */
html body .woocommerce-error { background-color: #f05b2d !important; }
html body .woocommerce-error::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
}

/* Limpieza de listas en errores */
html body .woocommerce-error li {
    padding-left: 0 !important; margin-left: 0 !important; list-style: none !important;
}

/* 4. ENLACES */
html body .woocommerce-error a, 
html body .woocommerce-info a, 
html body .woocommerce-message a {
    color: #ffffff !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
    margin-left: 10px;
}
html body .woocommerce-error a:hover, 
html body .woocommerce-info a:hover, 
html body .woocommerce-message a:hover {
    text-decoration: none !important; opacity: 0.9;
}

/* Ocultar botón 'Explorar' */
html body .woocommerce-info .button { display: none !important; }

.woocommerce .woocommerce-message::before {background-color: transparent !important;}


/* ==========================================================================
   ESTILOS DE LA TABLA DE PRECIOS (PLANES & PRICING)
   ========================================================================== */

/* Variables locales para la tabla */
.pricing-container {
  --color-azul: #29a0f5;
  --color-verde: #25d366;
  --color-naranja: #f05b2d;
  --color-oscuro: #333;
  --bg-claro: #f9f9f9;
  --borde-gris: #e0e0e0;
  --altura-celda: 48px; /* Altura compacta */
}

/* Contenedor Principal */
.pricing-container {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  font-family: var(--font-main); 
}

/* --- ESTRUCTURA DE COLUMNAS --- */
.pricing-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 180px;
}

/* Columna de Etiquetas (Izquierda) */
.pricing-column.labels {
  flex: 0 0 200px; 
  background: #fff;
  z-index: 2;
}

/* --- ESTILOS DE CELDAS --- */
.pricing-cell {
  height: var(--altura-celda);
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--borde-gris);
  border-bottom: 1px solid var(--borde-gris);
  padding: 4px 8px;
  font-size: 1rem; 
  font-weight: 400; 
  color: #000;
  text-align: center;
  background: #fff;
  box-sizing: border-box;
}

/* Celdas de la columna etiquetas */
.pricing-column.labels .pricing-cell {
  justify-content: flex-start;
  font-weight: 700; 
  color: #000;
  background: #fff;
  text-align: left;
  padding-left: 15px;
  border-left: 1px solid var(--borde-gris);
}

/* --- CELDAS VACÍAS (ESQUINAS) --- */
.pricing-column.labels .pricing-cell.corner-empty-top {
    background: transparent !important;
    border-top: none !important;
    border-left: none !important;
}
.pricing-column.labels .pricing-cell.corner-empty-bottom {
    background: transparent !important;
    border-bottom: none !important;
    border-left: none !important;
}

/* --- CABECERAS (HEADER) --- */
.header-cell {
  height: 70px;
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  text-transform: none; 
}
/* Borde superior para cerrar la tabla en las columnas de planes */
.pricing-column:not(.labels) .header-cell {
     border-top: 1px solid rgba(0,0,0,0.1); 
}

/* Colores de cabecera por plan */
.plan-estandar .header-cell     { background-color: var(--color-verde); }
.plan-profesional .header-cell  { background-color: var(--color-naranja); }
.plan-plus .header-cell         { background-color: var(--color-azul); }
.plan-a-medida .header-cell     { background-color: var(--color-oscuro); } 

/* --- PRECIOS Y CTA --- */
.price-cell {
  height: 80px;
  flex-direction: column;
  justify-content: center;
  color: #000;
  font-size: 1.3rem;
  font-weight: 900; /* Roboto Black */
}
.price-sub { 
  font-size: 0.7rem; 
  font-weight: 400; 
  color: #000; 
  margin-top: 3px; 
}

.cta-cell {
  height: 80px;
  border-bottom: 1px solid var(--borde-gris);
}

/* Botones */
.bitubi-btn {
  display: inline-block;
  padding: 8px 15px;
  background-color: var(--color-azul);
  color: #fff !important;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.8rem;
  transition: 0.3s;
  font-family: var(--font-main);
}
.bitubi-btn:hover { background-color: #1c80c7; opacity: 0.9; }
.bitubi-btn.dark { background-color: #000; }

/* Fondo destacado (Profesional) */
.highlight-bg { background-color: #fff5f2 !important; }

/* --- RESPONSIVE: MÓVIL (TARJETAS) --- */
@media (max-width: 991px) {
  .pricing-container {
    display: block; 
    border: none;
  }

  .pricing-column.labels { display: none; }

  .pricing-column {
    width: 100%;
    margin-bottom: 25px;
    border: 1px solid var(--borde-gris);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    overflow: hidden;
  }

  .pricing-cell {
    border-right: none;
    height: auto; 
    min-height: 45px;
    justify-content: space-between; 
    padding: 12px 15px;
    text-align: right;
    font-weight: bold;
  }
  
  .header-cell {
    height: auto;
    padding: 15px;
    font-size: 1.3rem;
    justify-content: center;
    border-top: none; 
  }
  
  .price-cell { 
    height: auto; 
    padding: 15px; 
    border-bottom: 2px solid #eee;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }

  .cta-cell { 
    height: auto; 
    padding: 20px; 
    justify-content: center; 
    border-bottom: none; 
  }
  
  .bitubi-btn { 
    width: 100%; 
    text-align: center; 
    padding: 12px; 
    font-size: 1rem; 
  }

  /* Etiquetas generadas automáticamente en móvil */
  .pricing-cell::before {
    content: attr(data-label);
    font-weight: 700;
    color: #000;
    text-align: left;
    font-size: 0.85rem;
    margin-right: 15px;
  }
  
  .header-cell::before, .cta-cell::before { content: none; }
}



/* ==========================================================================
   NUEVOS ESTILOS: PLANES & PRICING (GRID MONOCROMO)
   ========================================================================== */

/* Variables locales para esta sección */
.pricing-section-wrapper {
    --card-border: var(--gray-200, #e5e5e5);
    --card-bg: #ffffff;
    --card-shadow-hover: 0 10px 20px rgba(0,0,0,0.08);
}

/* Contenedor Grid (4 columnas automáticas) */
.pricing-grid {
    display: grid;
    /* AQUÍ ESTÁ LA CLAVE: 4 columnas fraccionarias iguales */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem; 
    width: 100%;
    max-width: 100%; 
    margin: 10px auto;
    font-family: var(--font-main);
}

/* --- TARJETA BASE (Estilo Blanco) --- */
.price-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px; /* Bordes ligeramente redondeados, pero serios */
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.price-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--color-black, #000); /* Al pasar el ratón, borde negro */
}

/* Títulos y Encabezados */
.plan-name {
    font-size: 0.85rem;
    font-weight: 900; /* Roboto Black */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    display: block;
    color: var(--gray-600, #666);
}

.plan-price {
    font-size: 2.8rem;
    font-weight: 700; /* Roboto Bold */
    color: var(--color-black, #000);
    line-height: 1;
    margin-bottom: 5px;
}

.plan-period {
    font-size: 0.9rem;
    color: var(--gray-600, #666);
    font-weight: 400;
}

.plan-discount {
    font-size: 1rem;
    color: var(--gray-600);
    margin-bottom: 1.5rem;
    font-style: italic;
    min-height: 20px; /* Para alinear alturas */
}

/* Lista de Características (Checkmarks) */
.features-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    flex-grow: 1; 
    border-top: 1px solid var(--gray-100, #f5f5f5);
    padding-top: 1.5rem;
}

.features-list li {
    margin-bottom: 0.85rem;
    display: flex;
    align-items: baseline; /* Alinea texto y check aunque sea largo */
    color: var(--gray-600, #555);
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 400;
}

.features-list li strong {
    color: var(--color-black, #000);
    font-weight: 700;
}

/* Icono Check (Simulado con CSS para no cargar imágenes) */
.check-icon {
    margin-right: 12px;
    color: var(--color-black, #000);
    font-weight: 900;
    font-size: 1.1em;
}

/* --- BOTONES --- */
.btn-pricing {
    display: block;
    padding: 1rem;
    border-radius: 4px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    width: 100%;
    text-decoration: none !important;
    transition: all 0.2s;
    font-size: 0.9rem;
    
    /* Estilo por defecto (Outline Negro) */
    background-color: transparent;
    color: var(--color-black, #000);
    border: 1px solid var(--color-black, #000);
}

.btn-pricing:hover {
    background-color: var(--color-black, #000);
    color: #fff;
}

/* --- VARIANTE: DESTACADO (PROFESIONAL) --- */
/* Esta tarjeta será NEGRA con texto BLANCO */
.price-card.featured {
    background-color: var(--color-black, #000);
    color: #fff;
    border-color: var(--color-black, #000);
    transform: scale(1.02); /* Un pelín más grande */
    z-index: 2;
}

.price-card.featured:hover {
    transform: scale(1.02) translateY(-5px);
}

.price-card.featured .plan-name { color: #aaa; }
.price-card.featured .plan-price { color: #fff; }
.price-card.featured .plan-period { color: #aaa; }
.price-card.featured .features-list { border-top-color: #333; }
.price-card.featured .features-list li { color: #ccc; }
.price-card.featured .features-list li strong { color: #fff; }
.price-card.featured .check-icon { color: #fff; }

/* Botón en tarjeta Negra (Invertido: Blanco solido) */
.price-card.featured .btn-pricing {
    background-color: #fff;
    color: #000;
    border-color: #fff;
}
.price-card.featured .btn-pricing:hover {
    background-color: #e5e5e5;
    border-color: #e5e5e5;
}

/* Ajuste Responsive para móvil */
@media (max-width: 768px) {
    .pricing-grid { 
        grid-template-columns: 1fr; /* 1 columna (pila vertical) */
        max-width: 400px; 
    }
    
    /* Ajustes visuales para móvil */
    .price-card.featured { transform: scale(1); }
    .price-card.featured:hover { transform: translateY(-5px); }
}


/* Icono Check (Ajustado el margen derecho) */
.check-icon {
    margin-right: 8px; /* Reducido de 12px a 8px */
    color: var(--color-black, #000);
    font-weight: 900;
    font-size: 1.1em;
}

/* Texto en negrita dentro de la lista (NUEVOS MÁRGENES) */
.features-list li strong {
    color: var(--color-black, #000);
    font-weight: 700;
    /* FUERZA bruta de espacios alrededor del dato en negrita */
    margin-left: 2px;  
    margin-right: 5px; 
}





/* PAG: PAGOS Y SUSCRIPCIONES*/
/* Estilos para el Encabezado de Precios */
.pricing-header-container {
    text-align: center;
    max-width: 100%;
    margin: 0 auto 50px auto;
}

.pricing-main-title {
    font-size: 2.5rem !important;
    margin-bottom: 15px !important;
    font-weight: 900 !important;
    color: var(--color-black) !important;
    letter-spacing: -1px !important;
    border-bottom: none !important; /* Quitamos el borde por defecto de h2 si existe */
}

.pricing-main-subtitle {
    color: var(--text-muted) !important;
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
}

/* Ajustes específicos para los planes */
.custom-price {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
}

.feature-disabled {
    opacity: 0.6;
}

.pricing-legal-notice {
    font-size: 0.85rem !important;
    padding-top: 2rem !important;
    text-align: center !important;
    color: var(--gray-400) !important;
}

/* Forzar que el descuento en el plan destacado siempre sea blanco */
.price-card.featured .plan-discount {
    color: var(--color-white) !important;
}




/* --- FORZADO DE ESTILOS SAAS (Grid de Precios) --- */

/* Usamos 'body' para ganar prioridad sobre Elementor */
body .pricing-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 40px auto !important;
}

/* Tarjetas */
body .price-card {
    background-color: var(--color-white, #fff) !important;
    border: 1px solid var(--gray-200, #e5e5e5) !important;
    border-radius: 8px !important;
    padding: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: none !important; /* Reseteamos sombras antiguas */
    transition: all 0.3s ease !important;
}

body .price-card:hover {
    transform: translateY(-5px) !important;
    border-color: var(--color-black, #000) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
}

/* Tarjeta Destacada (Negra) */
body .price-card.featured {
    background-color: var(--color-black, #0a0a0a) !important;
    color: #ffffff !important;
    border-color: var(--color-black, #0a0a0a) !important;
    z-index: 2 !important;
}

/* Textos */
body .plan-name {
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 800 !important;
    color: var(--gray-600, #666) !important;
}

body .price-card.featured .plan-name {
    color: #ccc !important;
}

body .plan-price {
    font-size: 3rem !important;
    font-weight: 700 !important;
    color: inherit !important; /* Hereda del padre (negro o blanco) */
    line-height: 1.1 !important;
    margin: 10px 0 !important;
}

/* Botones */
body .btn-pricing {
    margin-top: auto !important; /* Empuja el botón al final */
    padding: 15px !important;
    text-align: center !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: 1px solid var(--color-black, #000) !important;
    background: transparent !important;
    color: var(--color-black, #000) !important;
    transition: all 0.2s !important;
}

body .price-card.featured .btn-pricing {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}

body .price-card.featured .btn-pricing:hover {
    background: #e6e6e6 !important;
}

/* ==========================================================
   ESTILOS: MÉTODOS DE PAGO Y GARANTÍA (SaaS Clean)
   ========================================================== */

/* Contenedor General de estas secciones */
body .pagos-section {
    padding: 40px 20px;
    background-color: var(--color-white, #fff);
    border-bottom: 1px solid var(--gray-200, #e5e5e5);
    text-align: center; /* Centramos todo por defecto para limpieza visual */
}

/* Variante compacta para la sección de Garantía (elimina borde superior y reduce padding) */
body .pagos-section.section-compact {
    border-top: none;
    padding-top: 10px;
}

body .pagos-container {
    max-width: 800px; /* Ancho de lectura cómodo */
    margin: 0 auto;
}

/* Títulos H3 Unificados */
body .pagos-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--color-black, #0a0a0a) !important;
    margin-bottom: 25px !important;
    border: none !important;
}

/* --- LOGOS DE PAGO --- */
body .pagos-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

body .payment-logo {
    height: 35px; /* Altura estándar para Visa/Mastercard */
    width: auto;
    object-fit: contain;
    /* Opcional: Filtro para que sean grises hasta pasar el mouse (estilo SaaS muy pro) */
    /* filter: grayscale(100%); opacity: 0.6; transition: all 0.3s; */
}
/* body .payment-logo:hover { filter: grayscale(0%); opacity: 1; } */

/* Ajuste específico para SEPA (suele ser más alto y descompensa) */
body .logo-sepa {
    height: 22px !important; /* Ajuste óptico */
}

/* --- LISTA Y TEXTOS --- */
body .pagos-lista {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto 30px auto !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    color: var(--gray-600, #525252);
    font-size: 0.95rem;
}

body .pagos-lista li {
    position: relative;
    /* Añadimos un punto separador visual o estilo de etiqueta suave */
}
body .pagos-lista li::after {
    content: "•";
    margin-left: 15px;
    color: var(--gray-200);
}
body .pagos-lista li:last-child::after { content: ""; }

body .pagos-texto-seguridad {
    font-size: 0.9rem;
    color: var(--gray-600, #666);
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

body .texto-destacado-seguridad {
    margin-top: 15px;
    color: var(--color-black, #000);
    font-weight: 600;
}

/* --- CAJA DE GARANTÍA (Box Style) --- */
body .garantia-box {
    background-color: var(--gray-100, #f5f5f5); /* Variable de superficie */
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 8px;
    padding: 25px;
    margin-top: 30px;
    text-align: left; /* El contenido legal se lee mejor a la izquierda */
}

body .garantia-header {
    margin-bottom: 10px;
    font-size: 1.05rem;
    color: var(--color-black);
}

body .garantia-body {
    font-size: 1rem;
    color: var(--gray-600);
    margin-bottom: 15px;
}

body .garantia-legal-small {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0,0,0,0.05);
}

body .garantia-legal-small p {
    font-size: 0.85rem;
    color: var(--gray-400, #999);
    margin-bottom: 4px;
    line-height: 1.4;
}

/* ==========================================================
   ESTILOS: FACTURACIÓN Y TRANSPARENCIA (Grid Dual)
   ========================================================== */

/* Contenedor Grid (2 Columnas Responsivas) */
body .billing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 1000px; /* Un poco más estrecho que precios para lectura */
    margin: 40px auto;
    padding: 0 10px; /* Margen de seguridad móvil */
}

/* Tarjeta Base */
body .billing-card {
    background-color: var(--color-white, #fff);
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 8px;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

/* Variante: Tarjeta Gris (Highlight) */
body .billing-card.highlight {
    background-color: var(--gray-100, #f5f5f5); /* Tu gris de superficie */
    border-color: var(--gray-200, #e5e5e5);
}

/* Títulos */
body .billing-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--color-black, #0a0a0a) !important;
    margin-bottom: 20px !important;
    border: none !important;
    padding: 0 !important;
}

/* Lista de detalles */
body .billing-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 25px 0 !important;
    flex-grow: 1; /* Empuja el footer hacia abajo */
}

body .billing-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    color: var(--gray-600, #525252);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Viñeta personalizada cuadrada (Estilo SaaS técnico) */
body .billing-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    background-color: var(--gray-400, #a3a3a3); /* Gris suave */
    border-radius: 1px; /* Ligeramente cuadrado */
}

/* Nota pequeña al pie (Verifactu) */
body .billing-footer-note {
    margin-top: auto; /* Se pega al fondo */
    padding-top: 15px;
    border-top: 1px solid var(--gray-200, #e5e5e5);
    font-size: 0.85rem;
    color: var(--gray-400, #9ca3af);
    line-height: 1.4;
}

body .billing-footer-note strong {
    color: var(--gray-600, #525252);
}

/* Textos de la tarjeta destacada */
body .billing-lead {
    font-size: 1.1rem !important;
    color: var(--color-black, #000) !important;
    line-height: 1.4 !important;
    margin-bottom: 15px !important;
}

body .billing-text {
    font-size: 1rem !important;
    color: var(--gray-600, #444) !important;
    line-height: 1.6 !important;
}

/* Ajuste móvil */
@media (max-width: 768px) {
    body .billing-grid {
        grid-template-columns: 1fr;
    }
    body .billing-card {
        padding: 25px;
    }
}


/* ==========================================================
   ESTILOS: CONDICIONES EN FORMATO CARDS (Grid System)
   ========================================================== */

/* Contenedor Grid Inteligente */
body .conditions-grid {
    display: grid;
    /* Crea columnas automáticas de mínimo 350px. 
       Esto hace que sean 3 columnas en PC y 1 en móvil automáticamente */
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); 
    gap: 30px;
    margin-bottom: 50px;
}

/* Estilo de la Tarjeta Individual */
body .condition-card {
    background-color: var(--color-white, #fff);
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 8px;
    padding: 30px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%; /* Para que todas tengan la misma altura visual */
}

/* Efecto Hover estilo SaaS (Elevación sutil) */
body .condition-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border-color: var(--gray-400, #ccc); /* El borde se oscurece un poco */
}

/* Título de la Tarjeta */
body .condition-card-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important; /* Roboto Black/Bold */
    color: var(--color-black, #000) !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid var(--gray-100, #f5f5f5) !important;
    line-height: 1.3 !important;
}

/* Cuerpo de texto dentro de la tarjeta */
body .condition-card-body p {
    font-size: 0.95rem !important; /* Un poco más pequeño que el lead para que quepa bien */
    color: var(--gray-600, #555) !important;
    margin-bottom: 12px !important;
    line-height: 1.5 !important;
}

body .condition-card-body strong {
    color: var(--color-black, #222);
    font-weight: 700;
}

body .condition-card-body a {
    color: var(--color-black);
    text-decoration: underline;
    font-weight: 600;
}

body .condition-card-body p:last-child {
    margin-bottom: 0 !important;
}

/* Ajuste Responsive para móviles pequeños */
@media (max-width: 480px) {
    body .conditions-grid {
        grid-template-columns: 1fr; /* Una sola columna */
    }
    body .condition-card {
        padding: 20px;
    }
}

/* ==========================================================
   ESTILOS: COMPLEMENTOS (Add-ons Grid)
   ========================================================== */

body .addons-section {
    padding: 0px 20px;
    background-color: var(--color-white, #fff);
    /* Opcional: fondo muy sutilmente gris para separar secciones */
    /* background-color: #fafafa; */ 
}

/* Títulos */
body .addons-main-title {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: var(--color-black, #000) !important;
    margin-bottom: 15px !important;
    text-align: center;
    border: none !important;
}

body .addons-lead {
    font-size: 1.05rem;
    color: var(--gray-600, #555);
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
    line-height: 1.6;
}

/* --- GRID SYSTEM --- */
body .addons-grid {
    display: grid;
    /* Columnas flexibles: mínimo 320px de ancho */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* --- TARJETA DE SERVICIO --- */
body .addon-card {
    background-color: var(--color-white, #fff);
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 8px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}

body .addon-card:hover {
    border-color: var(--color-black, #000);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}

/* Cabecera de Tarjeta (Flex para título y etiqueta) */
body .addon-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    gap: 10px;
    flex-wrap: wrap; /* Para que baje en móviles muy pequeños */
}

body .addon-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--color-black, #000) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    border: none !important;
    flex: 1; /* Ocupa el espacio disponible */
}

/* Etiqueta de Precio (Badge) */
body .addon-badge {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    background-color: var(--gray-100, #f5f5f5);
    color: var(--gray-600, #555);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--gray-200, #e0e0e0);
    white-space: nowrap; /* Evita que se rompa en dos líneas */
}

body .addon-badge.alert {
    background-color: #fff5f5; /* Fondo rojizo muy suave */
    color: #c00;
    border-color: #ffcccc;
}

body .addon-badge.dark {
    background-color: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

/* Descripciones */
body .addon-desc {
    font-size: 0.95rem;
    color: var(--color-black, #222);
    margin-bottom: 10px;
    line-height: 1.5;
}

body .addon-note {
    font-size: 0.85rem;
    color: var(--gray-400, #888); /* Gris más claro para notas */
    font-style: italic;
    margin-top: auto; /* Empuja la nota al final de la tarjeta */
    line-height: 1.4;
    padding-top: 10px;
    border-top: 1px dashed var(--gray-200, #eee);
}

/* --- TARJETA DESTACADA (Archivos Editables) --- */
body .addon-card.featured-addon {
    border-color: var(--color-black, #000);
    background-color: #fafafa; /* Ligeramente diferente */
    grid-column: 1 / -1; /* Ocupa todo el ancho si quieres destacarla mucho */
}

/* Si prefieres que ocupe solo su celda, quita la línea 'grid-column: 1 / -1;' */

body .addon-pricing-detail {
    background-color: var(--color-white);
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--gray-200);
    margin-top: 10px;
    font-size: 0.9rem;
}

body .addon-pricing-detail p {
    margin: 3px 0;
}

/* Nota final de sección */
body .addons-footer-note {
    text-align: center;
    margin-top: 40px;
    font-size: 0.9rem;
    color: var(--gray-600);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive */
@media (max-width: 600px) {
    body .addons-grid {
        grid-template-columns: 1fr; /* 1 columna en móvil */
    }
    body .addon-card.featured-addon {
        grid-column: auto; /* Vuelve a comportamiento normal */
    }
}






/* ==========================================================
   ESTILOS: COMPLEMENTOS (Burbujas Rectangulares)
   ========================================================== */

body .addons-bubbles-section {
    padding: 0px 20px;
    background-color: var(--color-white, #fff);
}

/* Grid para las burbujas */
body .bubbles-grid {
    display: grid;
    /* Burbujas compactas y rectangulares */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px; /* Espacio entre burbujas */
    margin-bottom: 40px;
}

/* LA BURBUJA (Contenedor) */
body .bubble-item {
    display: flex;
    align-items: flex-start;
    background-color: var(--gray-100, #f8f9fa); /* Fondo burbuja */
    border: 1px solid var(--gray-200, #e9ecef);
    border-radius: 6px; /* Esquinas poco redondeadas (rectangular) */
    padding: 15px;
    /* Importante: Sin cursor pointer ni sombras de elevación */
}

/* Icono SVG a la izquierda (fijo) */
body .bubble-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-right: 15px;
    color: var(--color-black, #000);
    opacity: 0.6;
    margin-top: 2px; /* Alinear con el título */
}

/* Contenido de la burbuja */
body .bubble-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Título */
body .bubble-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--color-black, #000) !important;
    margin: 0 0 5px 0 !important;
    border: none !important;
    line-height: 1.2 !important;
}

/* LA BURBUJA DE PRECIO (El "tag" rectangular) */
body .bubble-price-tag {
    display: inline-block;
    align-self: flex-start;
    background-color: #ffffff; /* Blanco sobre el gris de la burbuja */
    border: 1px solid var(--gray-200, #ddd);
    color: var(--gray-600, #555);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 8px;
    margin-bottom: 8px;
    border-radius: 4px; /* Rectángulo suave */
    letter-spacing: 0.5px;
}

/* Variante Alerta (Recargo) */
body .bubble-price-tag.alert {
    border-color: #ffcccc;
    color: #d32f2f;
    background-color: #fff5f5;
}

/* Variante Oscura (Editables) */
body .bubble-price-tag.dark {
    background-color: var(--color-black, #000);
    color: #fff;
    border-color: #000;
}

/* Descripción */
body .bubble-desc {
    font-size: 0.9rem !important;
    color: var(--gray-600, #444) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Burbuja Destacada (Editables) */
body .bubble-item.featured-bubble {
    background-color: #ffffff; /* Invertido: fondo blanco */
    border: 1px solid var(--color-black, #000); /* Borde negro */
    grid-column: 1 / -1; /* Ocupa todo el ancho si se desea, o quitar para grid normal */
}

/* Responsive */
@media (max-width: 600px) {
    body .bubbles-grid {
        grid-template-columns: 1fr;
    }
    body .bubble-item.featured-bubble {
        grid-column: auto;
    }
}





/* ==========================================================
   ESTILOS: PROCESOS DE TRABAJO (Step Cards)
   ========================================================== */

body .process-section {
    padding: 0px 20px;
    background-color: var(--color-white, #fff);
    border-bottom: 1px solid var(--gray-200, #e5e5e5);
}

body .process-main-title {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: var(--color-black, #000) !important;
    margin-bottom: 15px !important;
    text-align: center;
    border: none !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

body .process-lead {
    font-size: 1.05rem;
    color: var(--gray-600, #555);
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
    line-height: 1.6;
}

/* --- GRID DE PROCESOS --- */
body .process-grid {
    display: grid;
    /* Grid de 4 columnas en pantallas grandes */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}

/* Tarjeta de Paso */
body .process-card {
    background-color: var(--color-white, #fff);
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 6px;
    padding: 25px 20px;
    position: relative;
    overflow: hidden; /* Para contener el número decorativo */
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

body .process-card:hover {
    border-color: var(--color-black, #000);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Número Gigante (Decorativo) */
body .process-number {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--gray-200, #e5e5e5); /* Gris muy suave */
    line-height: 1;
    margin-bottom: 15px;
    font-family: var(--font-main);
    /* Opcional: Posicionamiento absoluto para estilo "marca de agua" */
    /* position: absolute; top: 10px; right: 20px; font-size: 4rem; opacity: 0.3; */
}

/* Contenido */
body .process-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--color-black, #000) !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
}

body .process-text {
    font-size: 0.95rem !important;
    color: var(--gray-600, #555) !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

/* Footer Técnico (Normas ISO) */
body .process-footer-tech {
    background-color: var(--gray-100, #f8f9fa);
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

body .process-footer-tech p {
    font-size: 0.9rem !important;
    color: var(--gray-600, #444) !important;
    margin: 0 !important;
}

body .process-footer-tech strong {
    color: var(--color-black, #000);
}

/* Responsive */
@media (max-width: 600px) {
    body .process-grid {
        grid-template-columns: 1fr; /* 1 columna */
    }
    body .process-card {
        padding: 20px;
        flex-direction: row; /* En móvil, número al lado del texto */
        align-items: flex-start;
        gap: 15px;
    }
    body .process-number {
        margin-bottom: 0;
        font-size: 1.5rem; /* Más pequeño en móvil */
        min-width: 30px;
    }
}





/* ==========================================================
   ESTILOS: FAQ ACORDEÓN (Clean SaaS)
   ========================================================== */

body .faq-section {
    padding: 0px 20px 80px; /* Un poco más de espacio abajo */
    background-color: var(--color-white, #fff);
}

/* Títulos */
body .faq-main-title {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: var(--color-black, #000) !important;
    margin-bottom: 10px !important;
    text-align: center;
    border: none !important;
}

body .faq-lead {
    font-size: 1.05rem;
    color: var(--gray-600, #555);
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px auto;
}

/* Contenedor del Acordeón */
body .faq-wrapper {
    max-width: 800px; /* Ancho de lectura óptimo */
    margin: 0 auto;
    border-top: 1px solid var(--gray-200, #e5e5e5); /* Línea superior de cierre */
}

/* --- ITEM DEL ACORDEÓN --- */
body .faq-item {
    border-bottom: 1px solid var(--gray-200, #e5e5e5);
    overflow: hidden; /* Necesario para la animación */
}

/* Botón Pregunta (Header) */
body .faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 10px;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 700; /* Roboto Bold */
    color: var(--color-black, #000);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-family: var(--font-main) !important;
}

body .faq-question:hover {
    background-color: var(--gray-100, #f9f9f9);
    color: var(--color-black); /* Asegura negro puro al hover */
}

/* --- ICONO ANIMADO (+ / -) --- */
body .faq-toggle-icon {
    position: relative;
    width: 16px;
    height: 16px;
    margin-left: 15px;
    flex-shrink: 0;
}

/* Línea horizontal del más */
body .faq-toggle-icon::before {
    content: "";
    position: absolute;
    top: 50%; left: 0;
    width: 100%; height: 2px;
    background-color: var(--color-black, #000);
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

/* Línea vertical del más (se oculta al abrir) */
body .faq-toggle-icon::after {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    width: 2px; height: 100%;
    background-color: var(--color-black, #000);
    transform: translateX(-50%);
    transition: transform 0.3s ease;
}

/* --- ESTADO ACTIVO (ABIERTO) --- */
body .faq-item.active .faq-question {
    background-color: var(--gray-100, #f5f5f5); /* Fondo gris claro activo */
}

/* Transformar + en - (Rotamos la vertical para que coincida con la horizontal) */
body .faq-item.active .faq-toggle-icon::after {
    transform: translateX(-50%) rotate(90deg); /* Se tumba y fusiona */
}
/* Opcional: rotar todo el icono para efecto X */
/* body .faq-item.active .faq-toggle-icon { transform: rotate(45deg); } */


/* --- CONTENIDO RESPUESTA (Animación) --- */
body .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out; /* Animación de deslizamiento */
    background-color: var(--color-white, #fff);
}

body .faq-content-box {
    padding: 20px 25px 30px; /* Espacio interior */
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--gray-600, #444);
}

body .faq-content-box p {
    margin-bottom: 10px;
}
body .faq-content-box p:last-child {
    margin-bottom: 0;
}

/* Listas dentro de la respuesta */
body .faq-content-box li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 5px;
}



/* ==========================================================
   ESTILOS: HERO SOLUCIONES (Minimalist Header)
   ========================================================== */

body .solutions-hero {
    padding: 80px 20px 60px;
    background-color: var(--color-white, #fff);
    text-align: center;
    border-bottom: 1px solid var(--gray-200, #e5e5e5); /* Línea sutil de cierre */
}

/* Título H1 Impactante */
body .hero-title {
    font-size: 4rem !important;
    font-weight: 900 !important; /* Roboto Black */
    color: var(--color-black, #000) !important;
    margin-bottom: 25px !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
    text-transform: none !important; /* Eliminamos mayúsculas forzadas si las hubiera */
}

/* Texto descriptivo */
body .hero-lead {
    font-size: 1.25rem !important;
    line-height: 1.6 !important;
    color: var(--gray-600, #555) !important;
    max-width: 800px;
    margin: 0 auto 40px auto !important;
    font-weight: 300 !important; /* Roboto Light para contraste con el título */
}

body .hero-lead strong {
    color: var(--color-black, #000);
    font-weight: 700;
}

/* --- BOTONES HERO --- */
body .hero-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

body .btn-hero {
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-block;
    min-width: 200px; /* Ancho mínimo para uniformidad */
}

/* Botón Primario (Negro Sólido) */
body .btn-hero.primary {
    background-color: var(--color-black, #000);
    color: var(--color-white, #fff);
    border: 2px solid var(--color-black, #000);
}
body .btn-hero.primary:hover {
    background-color: #333;
    border-color: #333;
    transform: translateY(-2px);
}

/* Botón Secundario (Blanco con Borde Negro) */
body .btn-hero.secondary {
    background-color: transparent;
    color: var(--color-black, #000);
    border: 2px solid var(--color-black, #000);
}
body .btn-hero.secondary:hover {
    background-color: var(--color-black, #000);
    color: var(--color-white, #fff);
}

/* Botón Outline (Gris sutil para FAQ) */
body .btn-hero.outline {
    background-color: transparent;
    color: var(--gray-600, #555);
    border: 2px solid var(--gray-200, #ccc);
}
body .btn-hero.outline:hover {
    border-color: var(--gray-600, #666);
    color: var(--color-black, #000);
}

/* --- SUB-NAVEGACIÓN (Links inferiores) --- */
body .hero-subnav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--gray-100, #f5f5f5);
    max-width: 1000px;
    margin: 0 auto;
}

body .hero-subnav a {
    font-size: 0.95rem;
    color: var(--gray-600, #666);
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: color 0.2s;
}

/* Efecto hover subrayado animado */
body .hero-subnav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: var(--color-black, #000);
    transition: width 0.3s;
}

body .hero-subnav a:hover {
    color: var(--color-black, #000);
}

body .hero-subnav a:hover::after {
    width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
    body .hero-title {
        font-size: 2rem !important;
    }
    body .hero-actions {
        flex-direction: column;
        align-items: center;
    }
    body .btn-hero {
        width: 100%;
        max-width: 320px;
    }
    body .hero-subnav {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
}

/* ==========================================================
   ESTILOS: CAJA CRÍTICA B2B (Mission Box)
   ========================================================== */

body .mission-critical-box {
    background-color: var(--color-black, #0a0a0a); /* Fondo Negro Puro */
    color: var(--color-white, #ffffff);             /* Texto Blanco */
    padding: 40px 30px;
    border-radius: 8px;
    margin: 40px auto;
    max-width: 900px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Sombra elegante */
}

/* Contenedor interno */
body .mission-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    position: relative;
}

/* Badge decorativo */
body .mission-badge {
    display: inline-block;
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    background-color: rgba(255,255,255,0.15); /* Blanco translúcido */
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.2);
}

/* Texto Principal (Agencias...) */
body .mission-primary {
    font-size: 1.35rem !important;
    line-height: 1.4 !important;
    font-weight: 300 !important; /* Roboto Light */
    color: #ffffff !important;
    margin: 0 !important;
    max-width: 800px;
}

body .mission-primary strong {
    font-weight: 700 !important; /* Roboto Bold */
    color: #ffffff !important;
}

/* Separador visual pequeña línea */
body .mission-separator {
    width: 60px;
    height: 2px;
    background-color: var(--gray-600, #555);
    margin: 25px auto;
    opacity: 0.5;
}

/* Texto Secundario (No Paid Media...) */
body .mission-secondary {
    font-size: 1.1rem !important;
    color: var(--gray-400, #ccc) !important; /* Un poco más gris para jerarquía */
    margin: 0 !important;
    font-weight: 400 !important;
}

body .mission-secondary strong {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.3); /* Subrayado sutil */
    text-underline-offset: 4px;
}

/* Resalte final "Solo empresas" */
body .highlight-text {
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 5px;
}

/* Ajuste móvil */
@media (max-width: 600px) {
    body .mission-critical-box {
        padding: 30px 20px;
        margin: 20px 10px;
    }
    body .mission-primary {
        font-size: 1.15rem !important;
    }
    body .mission-secondary {
        font-size: 1rem !important;
    }
}


/* ==========================================================
   ESTILOS: GRID DE SOLUCIONES (4 COLUMNAS FIJAS)
   ========================================================== */

/* Contenedor Principal de la Sección */
body .solutions-section {
    padding: 0px 20px;
    background-color: var(--color-white, #fff);
    width: 1200px !important;
    max-width: 1400px !important;
    overflow-x: hidden; /* Evita scroll horizontal indeseado */
}

/* Títulos */
body .solutions-section-title {
    font-size: 3rem !important;
    font-weight: 800 !important;
    color: var(--color-black, #000) !important;
    text-align: center;
    margin-bottom: 10px !important;
    border: none !important;
}

body .solutions-lead {
    font-size: 1.1rem;
    color: var(--gray-600, #555);
    text-align: center;
    max-width: 1140px;
    margin: 0 auto 50px auto;
}

/* --- GRID SYSTEM: LA CLAVE DEL 4 EN LÍNEA --- */
body .solutions-grid {
    display: grid !important;
    /* Forzamos 4 columnas iguales (1 fracción cada una) */
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 10px !important;
    
    /* Aseguramos que ocupe todo el ancho */
    width: 100% !important;
    max-width: 100% !important; /* Tope de ancho para que no se estire infinito */
    margin: 0 auto !important;
    
    /* Alineación */
    justify-content: center !important;
    align-items: stretch !important; /* Todas las tarjetas de la misma altura */
}

/* --- TARJETA INDIVIDUAL --- */
body .solution-card {
    background-color: var(--color-white, #fff);
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 8px;
    padding: 25px 15px; /* Reducimos un poco el padding lateral para que quepa bien el texto */
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    height: 100%;
    width: 100% !important; /* La tarjeta llena su columna */
    box-sizing: border-box; /* Evita que el padding sume al ancho */
}

body .solution-card:hover {
    border-color: var(--color-black, #000);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    z-index: 2; /* Se pone por encima al hacer hover */
}

/* Cabecera de Tarjeta */
body .solution-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--gray-100, #f5f5f5);
    min-height: 100px; /* Altura mínima para alinear títulos */
}

body .solution-title {
    font-size: 1.1rem !important; /* Ajustado para que no parta la línea */
    font-weight: 800 !important;
    color: var(--color-black, #000) !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.2 !important;
}

body .solution-subtitle {
    font-size: 0.8rem !important;
    color: var(--gray-600, #666) !important;
    font-style: italic;
    margin: 5px 0 0 0 !important;
}

/* Badge */
body .solution-badge {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 4px;
    background-color: var(--gray-100, #f5f5f5);
    color: var(--color-black, #333);
    white-space: nowrap; /* Evita que el badge se rompa */
}

body .solution-badge.dark {
    background-color: var(--color-black, #000);
    color: var(--color-white, #fff);
}

/* Lista de Características */
body .solution-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 25px 0 !important;
    flex-grow: 1;
}

body .solution-features li {
    font-size: 0.85rem; /* Texto un poco más compacto */
    color: var(--color-black, #333);
    padding: 8px 0;
    border-bottom: 1px dashed var(--gray-200, #eee);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

body .solution-features li:last-child {
    border-bottom: none;
}

body .solution-features li strong {
    color: var(--gray-600, #666);
    font-weight: 500;
    text-align: left;
}

/* Footer y Botón */
body .solution-footer {
    margin-top: auto;
}

body .btn-solution {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 5px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none !important;
    color: var(--color-black, #000);
    background-color: transparent;
    border: 1px solid var(--color-black, #000);
    border-radius: 4px;
    transition: all 0.2s;
    white-space: nowrap; /* Evita que el texto del botón se parta */
}

body .btn-solution:hover {
    background-color: var(--color-black, #000);
    color: var(--color-white, #fff);
}

body .btn-solution.primary {
    background-color: var(--color-black, #000);
    color: var(--color-white, #fff);
}
body .btn-solution.primary:hover {
    background-color: #333;
}

/* --- TARJETA DESTACADA --- */
body .solution-card.featured-solution {
    background-color: var(--gray-100, #fafafa);
    border-color: var(--color-black, #000);
}

/* =========================================================
   RESPONSIVE (Adaptación inteligente)
   ========================================================= */

/* Tablet (2 columnas) */
@media (max-width: 992px) {
    body .solutions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 800px !important;
    }
}

/* Móvil (1 columna) */
@media (max-width: 600px) {
    body .solutions-grid {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }
    body .solution-header {
        min-height: auto; /* Altura automática en móvil */
    }
}


/* ==========================================================
   AJUSTE FONDOS CABECERAS TARJETAS (Grises y Negro)
   ========================================================== */

/* 1. Ajuste estructural para que el color llene la cabecera */
body .solution-header {
    /* Márgenes negativos para compensar el padding de la tarjeta padre */
    margin: -25px -15px 20px -15px !important; 
    padding: 25px 15px 20px 15px !important;
    
    /* Bordes redondeados solo arriba para encajar en la tarjeta */
    border-radius: 7px 7px 0 0 !important; 
    border-bottom: none !important; /* El cambio de color ya hace de separador */
}

/* 2. TARJETA 1: RESCATE 24H (Gris Muy Claro) */
#anchor-solucion-rescate24h .solution-header {
    background-color: var(--gray-100, #f5f5f5) !important;
}

/* 3. TARJETA 2: ADAPTACIONES (Gris Claro) */
#anchor-solucion-adaptaciones24h .solution-header {
    background-color: var(--gray-100, #f5f5f5) !important; /* Usamos el mismo para uniformidad */
}

/* 4. TARJETA 3: PREIMPRESIÓN (Gris Medio) */
#anchor-solucion-preimpresion .solution-header {
    background-color: var(--gray-200, #e5e5e5) !important; /* Un tono más oscuro */
}

/* 5. TARJETA 4: A MEDIDA (Negro Intenso - Invertido) */
#solucion-proyectos-a-medida .solution-header {
    background-color: var(--color-black, #0a0a0a) !important;
}

/* Ajustes de texto para la tarjeta NEGRA (Para que se lea) */
#solucion-proyectos-a-medida .solution-header .solution-title {
    color: var(--color-white, #fff) !important;
}

#solucion-proyectos-a-medida .solution-header .solution-subtitle {
    color: var(--gray-400, #a3a3a3) !important; /* Gris claro para el subtítulo */
}

/* Invertimos el badge de la tarjeta negra para que destaque */
#solucion-proyectos-a-medida .solution-badge.dark {
    background-color: var(--color-white, #fff) !important;
    color: var(--color-black, #000) !important;
}




/* ==========================================================
   ESTILOS: FICHA TÉCNICA SERVICIO (Spec Sheet)
   ========================================================== */

body .spec-card-container {
    max-width: 800px;
    margin: 40px auto;
}

/* Tarjeta Principal */
body .spec-card {
    background-color: var(--color-white, #fff);
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 8px;
    overflow: hidden; /* Para que la cabecera no se salga */
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}

/* Cabecera de Ficha */
body .spec-header {
    padding: 20px 25px;
    border-bottom: 1px solid var(--gray-200, #e5e5e5);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Color específico para RESCATE (Igual que en el Grid anterior) */
body .spec-card.rescate-theme .spec-header {
    background-color: var(--gray-100, #f5f5f5) !important;
}

body .spec-title {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: var(--color-black, #000) !important;
    margin: 0 !important;
}

body .spec-badge {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gray-600, #666);
    background-color: rgba(255,255,255,0.5);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.05);
}

/* Lista de Especificaciones */
body .spec-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body .spec-item {
    display: grid;
    /* Columna etiqueta (30%) - Columna valor (70%) */
    grid-template-columns: 180px 1fr; 
    padding: 15px 25px;
    border-bottom: 1px solid var(--gray-100, #f5f5f5);
    align-items: center; /* Centrado vertical */
}

body .spec-item:last-child {
    border-bottom: none;
}

/* Etiqueta (Izquierda) */
body .spec-label {
    font-weight: 700;
    color: var(--color-black, #333);
    font-size: 0.95rem;
}

/* Valor (Derecha) */
body .spec-value {
    color: var(--gray-600, #555);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Iconos tipográficos */
body .icon-check { color: var(--color-black, #000); font-weight: bold; margin-right: 5px; }
body .icon-cross { color: var(--gray-400, #999); font-weight: bold; margin-right: 2px; }
body .icon-info  { color: var(--gray-600, #666); font-family: monospace; margin-right: 5px; font-weight: bold; }
body .sep { color: var(--gray-200); margin: 0 5px; }

/* Estilos especiales para filas concretas */
body .spec-item.info-row {
    background-color: #fafafa; /* Fondo muy sutil para info */
}

body .spec-item.exclude-row .spec-value {
    color: var(--gray-400, #888); /* Texto más claro para lo que NO incluye */
}

body .spec-item.options-row .spec-value {
    font-style: italic;
    color: var(--gray-600);
}

/* Responsive para móvil */
@media (max-width: 600px) {
    body .spec-item {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: 5px;
        padding: 15px 20px;
    }
    body .spec-label {
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--gray-400, #999);
    }
    body .spec-value {
        font-size: 1rem;
        color: var(--color-black, #222);
    }
}

/* ==========================================================
   ESTILOS: CONTENIDO DE TEXTO DETALLADO
   ========================================================== */

body .service-text-content {
    max-width: 800px; /* Mismo ancho que la ficha técnica para alinear */
    margin: 50px auto;
    color: var(--gray-600, #525252);
    font-size: 1rem;
    line-height: 1.7;
}

/* Bloques de texto separados */
body .text-block {
    margin-bottom: 40px;
}

/* Títulos de sección (H3) */
body .text-title {
    font-size: 1.2rem !important;
    font-weight: 700 !important; /* Roboto Bold */
    color: var(--color-black, #000) !important;
    margin-bottom: 15px !important;
    border-bottom: 2px solid var(--gray-100, #f5f5f5); /* Subrayado sutil */
    padding-bottom: 8px;
    display: inline-block; /* El subrayado ocupa solo el texto */
}

/* Párrafos */
body .service-text-content p {
    margin-bottom: 15px !important;
    font-size: 1rem !important; /* Asegura lectura cómoda */
}

body .service-text-content strong {
    color: var(--color-black, #000);
    font-weight: 600;
}

/* Listas dentro del texto */
body .text-list {
    list-style: disc outside !important;
    margin-left: 20px !important;
    margin-top: 10px !important;
}

body .text-list li {
    margin-bottom: 8px;
    padding-left: 5px;
}

/* CAJA DE RESUMEN FINAL */
body .service-summary-box {
    background-color: var(--gray-100, #f9f9f9);
    border-left: 4px solid var(--color-black, #000); /* Acento de marca */
    padding: 25px;
    border-radius: 0 6px 6px 0;
    margin-top: 50px;
}

body .service-summary-box p {
    margin: 0 !important;
    font-size: 1.05rem !important;
    color: var(--color-black, #222) !important;
    line-height: 1.6 !important;
}

/* Responsive */
@media (max-width: 600px) {
    body .service-text-content {
        padding: 0 10px;
    }
}


/* ==========================================================
   TEMA ESPECÍFICO: ADAPTACIONES (Gris Claro)
   ========================================================== */

/* Reutilizamos el gris claro del Rescate para Adaptaciones */
body .spec-card.adaptaciones-theme .spec-header {
    background-color: var(--gray-100, #f5f5f5) !important;
}


/* ==========================================================
   TEMA ESPECÍFICO: PREIMPRESIÓN (Gris Técnico)
   ========================================================== */

/* Usamos un gris un poco más oscuro (--gray-200) para denotar tecnicismo */
body .spec-card.prepress-theme .spec-header {
    background-color: var(--gray-200, #e5e5e5) !important;
}

/* Ajuste opcional: si el texto sobre gray-200 queda con poco contraste,
   podemos forzar el título a negro puro (aunque ya debería serlo por defecto) */
body .spec-card.prepress-theme .spec-title {
    color: var(--color-black, #000) !important;
}


/* ==========================================================
   TEMA ESPECÍFICO: A MEDIDA (Negro Intenso)
   ========================================================== */

/* Fondo Negro para la cabecera */
body .spec-card.custom-theme .spec-header {
    background-color: var(--color-black, #0a0a0a) !important;
}

/* Título en Blanco */
body .spec-card.custom-theme .spec-title {
    color: var(--color-white, #fff) !important;
}

/* Badge Invertido (Fondo blanco, texto negro) para contraste máximo */
body .spec-card.custom-theme .spec-badge {
    background-color: var(--color-white, #fff) !important;
    color: var(--color-black, #000) !important;
    border: none !important;
    font-weight: 700 !important;
}


/* ==========================================================
   ESTILOS: GLOSARIO RÁPIDO (Technical Footnote)
   ========================================================== */

body .glossary-box {
    background-color: var(--gray-100, #f9f9f9); /* Fondo gris técnico */
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 6px;
    padding: 20px 25px;
    margin: 40px auto 20px auto; /* Separación superior */
    max-width: 900px;
}

/* Título pequeño y discreto */
body .glossary-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--gray-800, #666) !important;
    margin-bottom: 15px !important;
    border-bottom: 1px solid var(--gray-200, #e0e0e0);
    padding-bottom: 10px;
}

/* Grid de definiciones */
body .glossary-grid {
    display: grid;
    /* Columnas automáticas: mínimo 300px de ancho cada una */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px 30px; /* Gap vertical 10px, horizontal 30px */
}

/* Ítem individual */
body .glossary-item {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--gray-800, #555);
}

/* El término en negrita */
body .glossary-item .term {
    color: var(--color-black, #000);
    font-weight: 700;
    margin-right: 4px;
}

/* La definición en cursiva suave (como pedías) */
body .glossary-item .def {
    font-style: italic;
    font-size:1em;
    color: var(--gray-800, #666);
    font-weight: 400;
}

/* Responsive: en móvil reduce el padding */
@media (max-width: 600px) {
    body .glossary-box {
        padding: 15px;
    }
    body .glossary-grid {
        grid-template-columns: 1fr; /* 1 sola columna en móvil */
    }
}



/* ==========================================================
   ESTILOS: COMPROMISOS (Value Cards)
   ========================================================== */

body .commitments-section {
    padding: 0px 20px;
    background-color: var(--color-white, #fff);
    /* Opcional: un fondo muy sutil si quieres separarlo de la sección anterior */
    /* background-color: #fafafa; */
}

/* Títulos */
body .commitments-title {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: var(--color-black, #000) !important;
    text-align: center;
    margin-bottom: 10px !important;
    border: none !important;
}

body .commitments-lead {
    font-size: 1.1rem;
    color: var(--gray-600, #555);
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
}

/* --- GRID DE COMPROMISOS --- */
body .commitments-grid {
    display: grid;
    /* 2 columnas equilibradas */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Tarjeta Individual */
body .commitment-card {
    background-color: var(--color-white, #fff);
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 8px;
    display: flex;
    flex-direction: column; /* Para empujar el footer abajo */
    overflow: hidden; /* Para que el footer no se salga de las esquinas */
    transition: all 0.3s ease;
    height: 100%;
}

body .commitment-card:hover {
    border-color: var(--color-black, #000);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Cabecera (Número + Título) */
body .comm-header {
    padding: 25px 25px 15px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px dashed var(--gray-200, #eee);
}

body .comm-number {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--gray-200, #e0e0e0); /* Número decorativo gris suave */
    line-height: 1;
}

body .comm-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--color-black, #000) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Cuerpo de texto */
body .comm-body {
    padding: 20px 25px;
    flex-grow: 1; /* Ocupa todo el espacio disponible */
    color: var(--gray-600, #555);
    font-size: 0.95rem;
    line-height: 1.6;
}

body .comm-body p {
    margin-bottom: 15px;
}

body .comm-subtitle {
    font-weight: 700;
    color: var(--color-black, #333);
    margin-bottom: 10px !important;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Listas internas */
body .comm-list {
    list-style: disc outside !important;
    margin-left: 20px !important;
    margin-bottom: 0 !important;
}

body .comm-list li {
    margin-bottom: 6px;
    padding-left: 5px;
}

/* Footer Destacado (El Beneficio) */
body .comm-footer {
    background-color: var(--gray-100, #f8f9fa); /* Fondo gris claro */
    padding: 20px 25px;
    border-top: 1px solid var(--gray-200, #e5e5e5);
}

body .comm-footer p {
    margin: 0 !important;
    color: var(--gray-600, #666);
    font-size: 0.95rem;
    line-height: 1.4;
}

body .comm-footer strong {
    color: var(--color-black, #000);
    display: block; /* Fuerza salto de línea para el título del beneficio */
    margin-bottom: 4px;
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 600px) {
    body .commitments-grid {
        grid-template-columns: 1fr; /* 1 columna en móvil */
    }
}



body .faq-category-title {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: var(--color-black, #000) !important;
    margin-top: 50px !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gray-200, #e5e5e5);
}


/* ==========================================================
   ESTILOS: PÁGINA COLABORACIÓN
   ========================================================== */

body .colab-section {
    padding: 60px 20px;
    background-color: var(--color-white, #fff);
}

/* Encabezado Principal */
body .colab-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
}

body .colab-main-title {
    font-size: 3rem !important;
    font-weight: 900 !important;
    color: var(--color-black, #000) !important;
    margin-bottom: 15px !important;
}

body .colab-lead {
    font-size: 1.1rem;
    color: var(--gray-600, #555);
    line-height: 1.6;
}

/* --- GRID DE TARJETAS (Modelos) --- */
body .colab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

/* Tarjeta Individual */
body .colab-card {
    background-color: var(--color-white, #fff);
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
}

body .colab-card:hover {
    border-color: var(--color-black, #000);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transform: translateY(-3px);
}

/* Header de Tarjeta */
body .colab-header {
    padding: 25px;
    background-color: var(--gray-100, #f9f9f9);
    border-bottom: 1px solid var(--gray-200, #eee);
}

body .colab-number {
    font-size: 3rem;
    font-weight: 900;
    color: var(--gray-200, #e0e0e0);
    line-height: 1;
    display: block;
    margin-bottom: 10px;
}

body .colab-title {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: var(--color-black, #000) !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.2 !important;
}

body .colab-badge {
    display: inline-block;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    background-color: var(--color-black, #000);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Cuerpo de Tarjeta */
body .colab-body {
    padding: 25px;
    flex-grow: 1;
}

body .colab-desc {
    font-size: 1rem;
    color: var(--gray-600, #444);
    margin-bottom: 20px;
    line-height: 1.5;
}

body .colab-divider {
    height: 1px;
    background-color: var(--gray-200, #eee);
    margin: 20px 0;
}

body .colab-subtitle {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--color-black, #000) !important;
    margin-bottom: 15px !important;
    text-transform: uppercase;
    font-size: 0.85rem !important;
    letter-spacing: 1px;
}

body .mt-3 { margin-top: 20px !important; }

/* Listas */
body .colab-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body .colab-list li {
    font-size: 0.95rem;
    color: var(--gray-600, #555);
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;
}

/* Bullet personalizado (punto negro) */
body .colab-list li::before {
    content: "•";
    color: var(--color-black, #000);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

/* Footer de Tarjeta */
body .colab-footer {
    padding: 20px 25px;
    background-color: #fff;
    border-top: 1px solid var(--gray-200, #eee);
}

body .colab-footer p {
    margin: 0 !important;
    font-size: 0.9rem;
    color: var(--gray-600, #666);
    font-style: italic;
}

/* --- BLOQUE MARCA BLANCA (Dark Box) --- */
body .white-label-box {
    background-color: var(--color-black, #0a0a0a);
    color: #fff;
    border-radius: 8px;
    padding: 40px;
    margin-top: 40px;
    position: relative;
    overflow: hidden;
}

body .wl-header {
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 20px;
}

body .wl-badge {
    color: var(--gray-400, #aaa);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}

body .wl-title {
    font-size: 1.8rem !important;
    font-weight: 900 !important;
    color: #fff !important;
    margin: 0 !important;
}

body .wl-lead {
    font-size: 1.1rem;
    color: #ddd;
    margin-bottom: 30px;
    max-width: 900px;
    line-height: 1.6;
}

body .wl-highlight {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.3);
}

/* Grid de características Marca Blanca */
body .wl-grid-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

body .wl-feature {
    background-color: rgba(255,255,255,0.05); /* Fondo translúcido */
    padding: 20px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
}

body .wl-feature p {
    font-size: 0.9rem;
    color: #ccc;
    margin: 0;
    line-height: 1.4;
}

body .wl-feature strong {
    color: #fff;
    display: block;
    margin-bottom: 5px;
    font-size: 1rem;
}

/* Iconos emoji simples para no cargar librerías */
body .icon-lock, body .icon-ghost, body .icon-sync, body .icon-doc {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 10px;
    opacity: 0.8;
}

body .wl-note {
    font-size: 0.9rem;
    color: #888;
    text-align: center;
    margin-top: 20px;
    border-top: 1px dashed rgba(255,255,255,0.1);
    padding-top: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    body .colab-grid {
        grid-template-columns: 1fr;
    }
    body .white-label-box {
        padding: 25px;
    }
    body .wl-title {
        font-size: 1.5rem !important;
    }
}

/* ==========================================================
   ESTILOS: ¿POR QUÉ BITUBI? (Versión Compacta 4 Cols)
   ========================================================== */

body .why-section {
    padding: 0px 20px;
    background-color: var(--color-white, #fff);
}

/* Encabezado */
body .why-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px auto;
}

body .why-title {
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    color: var(--color-black, #000) !important;
    margin-bottom: 5px !important;
}

body .why-lead {
    font-size: 1.1rem;
    color: var(--gray-600, #555);
}

/* --- GRID DE 4 COLUMNAS --- */
body .why-grid {
    display: grid;
    /* Ajuste clave: minmax(220px, 1fr) permite que quepan 4 tarjetas en pantallas estándar */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px; /* Espacio un poco más ajustado */
    max-width: 1200px; /* Ancho suficiente para 4 columnas */
    margin: 0 auto;
}

/* Tarjeta */
body .why-card {
    display: flex;
    flex-direction: column; /* Cambiamos a vertical para ahorrar espacio horizontal */
    align-items: flex-start;
    justify-content: center;
    background-color: var(--color-white, #fff);
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 6px;
    padding: 20px 15px; /* Padding lateral reducido */
    transition: all 0.2s ease;
    height: 100%; /* Para que todas tengan la misma altura */
}

body .why-card:hover {
    border-color: var(--color-black, #000);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Número arriba */
body .why-number {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--gray-200, #e0e0e0);
    margin-bottom: 10px; /* Separación vertical */
    line-height: 1;
}

/* Contenidos */
body .why-content {
    width: 100%;
}

body .why-item-title {
    font-size: 0.95rem !important; /* Título compacto */
    font-weight: 700 !important;
    color: var(--color-black, #000) !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.3 !important;
}

body .why-item-desc {
    font-size: 0.85rem !important; /* Texto descriptivo pequeño */
    color: var(--gray-600, #666) !important;
    margin: 0 !important;
    line-height: 1.4;
}

/* Responsive: en móvil pasan a 1 o 2 columnas automáticamente */
@media (max-width: 600px) {
    body .why-grid {
        grid-template-columns: 1fr; /* 1 columna en móvil */
    }
    body .why-card {
        flex-direction: row; /* En móvil volvemos a horizontal para que no queden muy altas */
        align-items: center;
        padding: 15px;
    }
    body .why-number {
        margin-bottom: 0;
        margin-right: 15px;
        font-size: 1.8rem;
    }
}


/* ==========================================================
   ESTILOS: LAS 10 RAZONES (Iconos Lineales)
   ========================================================== */

body .reasons-section {
    padding: 0px 20px;
    background-color: var(--color-white, #fff);
}

/* Cabecera */
body .reasons-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 50px auto;
}

body .reasons-main-title {
    font-size: 2rem !important;
    font-weight: 300 !important;
    color: var(--gray-600, #555) !important;
    line-height: 1.3 !important;
}

/* Números y énfasis en el título (Azul o Negro) */
body .highlight-number {
    font-weight: 400;
    color: #4b5cf6; /* Azul similar al de la imagen original, o usa var(--color-black) */
}

body .highlight-text {
    font-weight: 900 !important;
    color: #4b5cf6; /* Mismo azul para consistencia */
}

/* --- GRID DE 5 COLUMNAS --- */
body .reasons-grid {
    display: grid;
    /* Ajuste para que quepan 5 tarjetas en pantallas grandes (min 220px por tarjeta) */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px; 
    max-width: 1400px; /* Ancho completo para permitir 5 cols */
    margin: 0 auto;
}

/* Tarjeta Individual */
body .reason-card {
    background-color: var(--color-white, #fff);
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 8px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.3s ease;
    height: 100%;
}

body .reason-card:hover {
    border-color: var(--color-black, #000);
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

/* --- ESTILO DE ICONOS SVG --- */
body .reason-icon {
    margin-bottom: 15px;
    /* Contenedor del icono */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

/* Propiedades del SVG para que sea "Outline" (Línea fina) */
body .reason-icon svg {
    width: 32px;
    height: 32px;
    fill: none; /* Sin relleno, transparente */
    stroke: var(--color-black, #222); /* Color de línea negro/gris oscuro */
    stroke-width: 1.5; /* Grosor fino como en tu imagen de referencia */
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Título de la tarjeta */
body .reason-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--gray-400, #999) !important; /* Gris claro para título */
    letter-spacing: 0.3px;
    margin: 0 0 10px 0 !important;
    line-height: 1.3 !important;
}

/* Texto descriptivo */
body .reason-text {
    font-size: 0.95rem !important;
    color: var(--color-black, #222) !important; /* Texto oscuro */
    line-height: 1.5 !important;
    margin: 0 !important;
}

body .reason-text strong {
    font-weight: 700;
    color: var(--color-black, #000);
}

/* Responsive */
@media (max-width: 1024px) {
    /* En tablets bajamos a 3 o 2 columnas */
    body .reasons-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 600px) {
    /* En móvil 1 columna */
    body .reasons-grid {
        grid-template-columns: 1fr;
    }
    body .reasons-main-title {
        font-size: 1.5rem !important;
    }
}

/* ==========================================================
   ESTILOS: PROPUESTAS DE VALOR AÑADIDO
   ========================================================== */

body .value-prop-section {
    padding: 0px 20px; /* Padding de sección memorizado */
    background-color: var(--color-white, #fff);
    margin-bottom: 60px;
}

/* Cabecera */
body .value-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 50px auto;
    padding-top: 60px;
}

body .value-main-title {
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    color: var(--color-black, #000) !important;
    margin-bottom: 20px !important;
}

body .value-lead {
    font-size: 1.1rem;
    color: var(--gray-600, #555); /* Azul/Gris oscuro del texto original o gris neutro */
    line-height: 1.6;
    font-weight: 500;
}

/* --- GRID DE PROPUESTAS --- */
body .value-grid {
    display: grid;
    /* Configuración para 2 columnas en escritorio, adaptable */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Tarjeta Individual */
body .value-card {
    background-color: var(--color-white, #fff); /* Fondo blanco */
    /* Opcional: fondo gris muy suave si prefieres destacar del fondo blanco de la sección */
    /* background-color: #fafafa; */
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 8px;
    padding: 30px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

body .value-card:hover {
    border-color: var(--color-black, #000);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transform: translateY(-3px);
}

/* Cabecera de Tarjeta */
body .value-card-header {
    display: flex;
    align-items: baseline;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--gray-100, #f0f0f0);
    padding-bottom: 15px;
}

body .value-number {
    font-size: 1.5rem;
    font-weight: 900;
    color: #4b5cf6; /* Azul del texto original */
    margin-right: 15px;
    font-family: monospace; /* Toque técnico opcional */
}

body .value-title {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #4b5cf6 !important; /* Títulos en azul según imagen */
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* Cuerpo de Tarjeta */
body .value-card-body {
    flex-grow: 1;
}

body .value-list {
    list-style: disc outside !important;
    margin-left: 20px !important;
    margin-bottom: 0 !important;
    color: var(--gray-600, #444);
}

body .value-list li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    line-height: 1.5;
    padding-left: 5px;
}

body .value-list li strong {
    color: var(--color-black, #000);
    font-weight: 700;
}

/* Clase especial para ancho completo (ej. último elemento impar) */
/* Solo aplica si el grid tiene espacio, útil para centrar o destacar la última */
@media (min-width: 800px) {
    body .value-card.full-width {
        grid-column: 1 / -1; /* Ocupa todas las columnas */
        max-width: 800px; /* Pero no te estires infinito */
        margin: 0 auto;   /* Centrada */
        width: 100%;
    }
}

/* Responsive */
@media (max-width: 768px) {
    body .value-grid {
        grid-template-columns: 1fr;
    }
    body .value-card {
        padding: 20px;
    }
    body .value-main-title {
        font-size: 1.8rem !important;
    }
}


/* ==========================================================
   ESTILOS: PÁGINA DE CONTACTO (SaaS Layout)
   ========================================================== */

/* Contenedor Principal */
body .contact-page-container {
    padding: 60px 20px;
    background-color: var(--gray-100, #f9f9f9); /* Fondo gris muy suave para toda la sección */
    min-height: 80vh; /* Asegura que ocupe buena parte de la pantalla */
    display: flex;
    align-items: center;
    justify-content: center;
}

body .contact-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% - 50% */
    gap: 60px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    align-items: start;
}

/* --- COLUMNA IZQUIERDA (INFO) --- */
body .contact-title {
    font-size: 2.8rem !important;
    font-weight: 900 !important;
    color: var(--color-black, #000) !important;
    margin-bottom: 20px !important;
    line-height: 1.1 !important;
}

body .contact-lead {
    font-size: 1.1rem;
    color: var(--gray-600, #555);
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 450px;
}

/* Ítems de beneficio (Icono + Texto) */
body .cb-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

body .cb-icon {
    font-size: 1.5rem;
    background-color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--gray-200, #e5e5e5);
}

body .cb-text strong {
    display: block;
    color: var(--color-black, #000);
    font-size: 1rem;
    margin-bottom: 2px;
}

body .cb-text p {
    margin: 0;
    color: var(--gray-600, #666);
    font-size: 0.9rem;
}

/* --- COLUMNA DERECHA (FORMULARIO) --- */
body .form-card {
    background-color: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08); /* Sombra elegante */
    border: 1px solid var(--gray-200, #eee);
}

body .form-header {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-black, #000);
}

body .form-footer-note {
    font-size: 0.8rem;
    color: #999;
    margin-top: 20px;
    text-align: center;
}

/* ==========================================================
   ESTILOS ESPECÍFICOS PARA CONTACT FORM 7 (CF7)
   Esto sobreescribe el estilo por defecto feo
   ========================================================== */

/* Ocultar el contenido antiguo del Themify Builder en la página de contacto */
#themify_builder_content-15 {
    display: none !important;
}

/* 1. Etiquetas (Labels) */
body .wpcf7-form label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-black, #333);
    margin-bottom: 5px;
    display: block;
}

/* 2. Inputs (Texto, Email, Area) */
body .wpcf7-form-control-wrap input,
body .wpcf7-form-control-wrap textarea,
body .wpcf7-form-control-wrap select {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid var(--gray-200, #ccc) !important;
    background-color: #fff !important;
    border-radius: 6px !important;
    font-size: 1rem !important;
    color: #333 !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease;
    margin-bottom: 5px; /* Espacio para mensajes de error si salen */
}

/* Estado Focus (Al hacer clic) */
body .wpcf7-form-control-wrap input:focus,
body .wpcf7-form-control-wrap textarea:focus,
body .wpcf7-form-control-wrap select:focus {
    border-color: var(--color-black, #000) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05) !important;
}

/* Textarea altura */
body .wpcf7-form textarea {
    height: 120px !important;
    resize: vertical;
}

/* 3. Botón de Enviar (Submit) */
body input.wpcf7-submit {
    width: 100% !important;
    background-color: var(--color-black, #000) !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 15px !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    transition: all 0.3s ease;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body input.wpcf7-submit:hover {
    background-color: #333 !important; /* Gris muy oscuro al pasar ratón */
    transform: translateY(-2px);
}

/* 4. Spinner de carga (ocultar o estilizar) */
body .wpcf7-spinner {
    margin: 10px auto 0 auto;
}

/* 5. Mensajes de error/éxito */
div.wpcf7-response-output {
    margin: 20px 0 0 0 !important;
    padding: 10px !important;
    border-radius: 4px !important;
    font-size: 0.9rem !important;
    text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
    body .contact-grid-wrapper {
        grid-template-columns: 1fr; /* Una columna en tablet/móvil */
        gap: 40px;
    }
    
    body .contact-page-container {
        padding: 40px 20px;
    }

    body .form-card {
        padding: 25px; /* Menos padding en móvil */
    }
}
/* Estilos para los items de la izquierda */
body .cb-item {
    display: flex;
    align-items: center; /* Centrado vertical perfecto */
    gap: 20px;
    margin-bottom: 30px;
}

/* Contenedor del Icono (Círculo o Cuadrado suave) */
body .cb-icon {
    width: 45px;
    height: 45px;
    min-width: 45px; /* Evita que se aplaste */
    background-color: #fff;
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 8px; /* O 50% si los prefieres redondos */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilo del SVG (Línea fina) */
body .cb-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--color-black, #000); /* Color de la línea */
    stroke-width: 1.5; /* Grosor fino elegante */
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Textos */
body .cb-text strong {
    display: block;
    color: var(--color-black, #000);
    font-size: 1rem;
    margin-bottom: 3px;
    font-weight: 700;
}

body .cb-text p {
    margin: 0;
    color: var(--gray-600, #666);
    font-size: 0.95rem;
    line-height: 1.4;
}


/* ==========================================================
   ESTILOS: FOOTER DE CONTACTO (Datos + Legal)
   ========================================================== */

body .contact-footer-section {
    padding: 0 20px 60px 20px;
    background-color: var(--gray-100, #f9f9f9); /* Mismo fondo gris que la sección superior */
}

body .contact-footer-container {
    max-width: 1100px; /* Mismo ancho que el grid de arriba */
    margin: 0 auto;
}

/* --- GRID DE 2 COLUMNAS (Dirección / Teléfono) --- */
body .cf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

/* Tarjeta individual */
body .cf-card {
    background-color: #fff;
    border: 1px solid var(--gray-200, #eee);
    border-radius: 8px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Todo centrado */
    text-align: center;
    transition: all 0.3s ease;
}

body .cf-card:hover {
    border-color: var(--color-black, #000);
    transform: translateY(-3px);
}

/* Iconos SVG */
body .cf-icon {
    margin-bottom: 15px;
    color: var(--color-black, #000);
}

body .cf-icon svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Títulos y Textos */
body .cf-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-black, #000);
    margin: 0 0 10px 0;
}

body .cf-text {
    font-size: 1rem;
    color: var(--gray-600, #555);
    line-height: 1.6;
    margin: 0;
}

body .cf-text a {
    color: var(--gray-600, #555);
    text-decoration: none;
    transition: color 0.2s;
}

body .cf-text a:hover {
    color: var(--color-black, #000);
    text-decoration: underline;
}

/* --- BLOQUE LEGAL --- */
body .cf-legal {
    border-top: 1px solid #e0e0e0;
    padding-top: 30px;
    color: #888;
}

body .legal-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #666;
}

body .legal-text {
    font-size: 0.75rem; /* Letra pequeña legal */
    line-height: 1.5;
    text-align: justify;
    margin: 0;
}

body .legal-text strong {
    color: #555;
}

/* Responsive */
@media (max-width: 768px) {
    body .cf-grid {
        grid-template-columns: 1fr;
    }
    body .cf-card {
        padding: 20px;
        align-items: flex-start; /* En móvil alineado a la izquierda se lee mejor */
        text-align: left;
    }
}

/* --- ESTILOS BOTÓN AGENDAR CITA (Con Icono SVG) --- */

body .contact-cta-wrapper {
    margin-top: 35px;
    display: block;
}

/* El Botón */
body .btn-schedule {
    /* Usamos inline-flex para alinear icono y texto */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espacio entre el icono SVG y el texto */
    
    padding: 12px 25px;
    background-color: transparent;
    border: 2px solid var(--color-black, #000);
    color: var(--color-black, #000) !important;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* Estilo del SVG dentro del botón */
body .btn-schedule svg {
    /* El color se hereda automáticamente del texto gracias a stroke="currentColor" en el HTML */
    display: block;
}

/* Efecto Hover */
body .btn-schedule:hover {
    background-color: var(--color-black, #000);
    color: #fff !important; /* Al cambiar el texto a blanco, el icono también cambia a blanco automáticamente */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Ajuste móvil */
@media (max-width: 768px) {
    body .btn-schedule {
        width: 100%;
    }
}








@media screen and (min-width: 981px) {
    #main-nav-wrap {
        /* Permitimos el movimiento */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        
        /* Ocultar barra en Firefox */
        scrollbar-width: none !important; 
        
        /* Ocultar barra en IE y Edge antiguo */
        -ms-overflow-style: none !important; 
    }

    /* Ocultar barra en Chrome, Safari y Opera */
    #main-nav-wrap::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        background: transparent !important;
    }
}











/* ==========================================================
   REDISEÑO BARRA LATERAL (THEME STACK) - ESTILO SAAS
   Aplica solo en Escritorio (> 980px)
   ========================================================== */

@media screen and (min-width: 981px) {

    /* 1. EL CONTENEDOR PRINCIPAL (La columna izquierda real) */
    #header {
        background-color: #fff !important; /* Fondo blanco limpio */
        border-right: 0px solid var(--gray-200, #eee) !important; /* Línea de separación fina */
        padding-top: 0px !important;
        padding-left: 35px !important;
        padding-right: 20px !important;
        /* Aseguramos que ocupe el alto y ancho correcto */
        height: 80vh !important;
        box-shadow: 5px 0 5px rgba(0,0,0,0.01) !important; /* Sombra muy sutil hacia la derecha */
    }

    /* 2. EL MENÚ DE NAVEGACIÓN (#main-nav) */
    /* Limpiamos estilos antiguos del tema */
    #main-nav {
        margin-top: 30px !important;
    }

    #main-nav li {
        border: none !important; /* Quitamos bordes del tema por defecto */
        margin-bottom: 2px !important;
        background: transparent !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* ESTILO DE LOS ENLACES (Botones limpios) */
    #main-nav li a {
        display: block !important;
        padding: 5px 4px !important;
        color: var(--gray-600, #666) !important; /* Texto Gris Oscuro */
        font-size: 0.80rem !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        border-radius: 8px !important; /* Bordes redondeados modernos */
        transition: all 0.2s ease-in-out !important;
        background-color: transparent !important;
        border-left: 3px solid transparent !important; /* Preparamos para hover */
    }

    /* HOVER (Al pasar el ratón) */
    #main-nav li a:hover {
        background-color: var(--gray-100, #f5f5f5) !important; /* Gris muy suave */
        color: var(--color-black, #000) !important; /* Texto Negro */
        transform: translateX(5px); /* Pequeño desplazamiento elegante */
    }

    /* ÍTEM ACTIVO (Página actual) */
    #main-nav li.current-menu-item a,
    #main-nav li.current_page_item a {
        background-color: var(--color-black, #000) !important; /* Fondo Negro */
        color: #fff !important; /* Texto Blanco */
        box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
        border-left: none !important;
    }

    /* 3. WIDGETS ADICIONALES (Si tienes buscador, redes, etc. debajo) */
    .header-widgets {
        margin-top: 50px !important;
        border-top: 1px solid #eee !important;
        padding-top: 30px !important;
    }

    .header-widgets .widget-title {
        font-size: 0.75rem !important;
        text-transform: uppercase !important;
        color: #999 !important;
        margin-bottom: 15px !important;
        letter-spacing: 1px !important;
    }
    
    /* 4. LOGOTIPO */
    #site-logo {
        margin-bottom: 10px !important;
        padding-left: 10px !important; /* Alinear visualmente con los botones del menú */
        margin-top: 0px !important;
    }
}




/* ==========================================================
   AJUSTE PARA MÓVIL (Menú Hamburguesa)
   ========================================================== */
/* Aseguramos que en móvil el header se comporte como barra superior normal */
@media screen and (max-width: 980px) {
    #header {
        border-right: none !important;
        border-bottom: 1px solid #eee !important;
        background-color: #fff !important;
        /* El resto de la magia de ocultar/mostrar lo hace el JS del tema */
    }
}

/* ************************* NEUMORPHISM *******************************
/* ==========================================================
   DISEÑO BARRA LATERAL: NEUMORPHISM LIMPIO (Corregido)
   ========================================================== */

@media screen and (min-width: 981px) {

    /* 1. EL PANEL LATERAL */
    #header {
        background-color: #eef0f5 !important; 
        border-right: 1px solid rgba(255,255,255, 0.4) !important;
        
        /* CORRECCIÓN: Aumentamos el padding izquierdo para que quepan las sombras */
        padding: 30px 20px 30px 30px !important; 
        
        width: 270px !important; /* Un pelín más ancho para compensar el padding */
        height: 100vh !important;
        position: fixed !important;
        top: 0; left: 0; z-index: 1000;
        
        display: flex !important;
        flex-direction: column !important;
        box-shadow: 5px 0 15px rgba(0,0,0,0.01) !important;
        
        border-top: none !important;
        border-bottom: none !important;
        box-sizing: border-box !important; /* Asegura que el padding no rompa el ancho */
    }

    /* Empujamos el cuerpo de la web para que no se solape con el menú más ancho */
    #body { padding-left: 270px !important; }

    /* 2. LOGOTIPO */
    #site-logo {
        margin-bottom: 5px !important;
        padding-left: 5px !important; /* Ajustado */
        /* opacity: 0.9; */
        /* transform: scale(0.9); */
        transform-origin: left;
        border: none !important;
    }

    /* 3. MENÚ DE NAVEGACIÓN */
    #main-nav-wrap {
        flex-grow: 1 !important;
        overflow-y: auto !important;
        padding-right: 5px;
        border-top: none !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #main-nav { 
        margin: 0 !important; 
        padding: 0 !important; 
        border: none !important;
        width: 100% !important;
    }
    
    /* Limpieza profunda de estilos del tema */
    #main-nav::before, #main-nav::after,
    #main-nav li::before, #main-nav li::after {
        display: none !important; content: none !important; border: none !important;
    }

    #main-nav li {
        list-style: none !important;
        margin-bottom: 3px !important; 
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        
        /* CORRECCIÓN: Un pequeño margen extra a la izquierda para la sombra */
        margin-left: 5px !important; 
        width: calc(100% - 10px) !important; /* Ajuste para que no se salga por la derecha */
    }
    
    #main-nav li:first-child {
        border-top: none !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* --- BOTONES --- */
    #main-nav li a {
        display: flex !important;
        align-items: center !important;
        padding: 8px 15px !important; 
        
        font-family: 'Roboto', sans-serif !important;
        font-size: 0.85rem !important; 
        font-weight: 600 !important;
        letter-spacing: 0.3px !important;
        color: #7a8294 !important;
        text-decoration: none !important;
        
        border-radius: 8px !important;
        background-color: #eef0f5 !important;
        
        /* Sombra Neumorphism */
        box-shadow: 
            4px 4px 8px #d1d9e6, 
            -4px -4px 8px #ffffff !important;
            
        transition: all 0.2s ease !important;
        border: 1px solid rgba(255,255,255,0.1) !important; 
        box-sizing: border-box !important;
    }

    /* HOVER */
    #main-nav li a:hover {
        color: #333 !important;
        transform: translateY(-1px);
        box-shadow: 
            5px 5px 10px #d1d9e6, 
            -5px -5px 10px #ffffff !important;
    }

    /* ACTIVO */
    #main-nav li.current-menu-item a,
    #main-nav li.current_page_item a {
        color: #4b5cf6 !important;
        box-shadow: 
            inset 3px 3px 6px #ced5e0, 
            inset -3px -3px 6px #ffffff !important;
        background-color: #eef0f5 !important;
        font-weight: 700 !important;
    }

    /* Footer / Widgets */
    .header-widget, #footer-text {
        margin-top: auto !important;
        padding-top: 15px !important;
        border-top: 1px solid rgba(0,0,0,0.03) !important;
        font-size: 0.7rem !important;
        color: #aab;
        padding-left: 5px !important;
    }
}

/* MÓVIL (Reset) */
@media screen and (max-width: 980px) {
    #header {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        background-color: #fff !important;
        box-shadow: none !important;
        border-bottom: 1px solid #eee !important;
        flex-direction: row !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }
    #body { padding-left: 0 !important; }
}

/* ==========================================================
   FORMULARIO HOME: NEUMORPHISM (Ancho Total + Contenedor Cuadrado)
   ========================================================== */

/* 1. EL CONTENEDOR DEL FORMULARIO */
.home .wpcf7-form {
    background-color: #eef0f5 !important; /* Color base */
    padding: 10% 15% 15% 15% !important;
    
    /* CAMBIOS SOLICITADOS: */
    width: 100% !important;      /* Ocupa todo el ancho */
    max-width: 100% !important;  /* Elimina la restricción de 600px */
    border-radius: 0 !important; /* Esquinas totalmente cuadradas */
    margin: 0 !important;
    box-sizing: border-box !important; /* Asegura que el padding no rompa el ancho */

    /* Sombra externa del bloque (Se mantiene el efecto neumorphism en la caja) */
    box-shadow: 
        8px 8px 16px rgba(163, 177, 198, 0.2), 
        -8px -8px 16px rgba(255, 255, 255, 0.8) !important;
}

/* Etiquetas (Labels) - INTACTO */
.home .wpcf7-form label {
    font-family: 'Roboto', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #67748e !important; 
    margin-bottom: 8px !important;
    display: block !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* 2. LOS CAMPOS (INPUTS Y TEXTAREA) - INTACTO */
.home .wpcf7-form input[type="text"],
.home .wpcf7-form input[type="email"],
.home .wpcf7-form input[type="tel"],
.home .wpcf7-form textarea {
    background-color: #eef0f5 !important;
    width: 100% !important;
    border: none !important;
    padding: 15px 20px !important;
    border-radius: 12px !important; /* Se mantiene redondeado */
    
    font-size: 0.95rem !important;
    color: #333 !important;
    
    /* Sombra Interna (Inset) */
    box-shadow: 
        inset 4px 4px 8px #d1d9e6, 
        inset -4px -4px 8px #ffffff !important;
        
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    outline: none !important;
}

/* Efecto al escribir (Foco) - INTACTO */
.home .wpcf7-form input:focus,
.home .wpcf7-form textarea:focus {
    color: #000 !important;
    box-shadow: 
        inset 2px 2px 4px #d1d9e6, 
        inset -2px -2px 4px #ffffff !important;
    background-color: #f1f3f6 !important;
}

/* Ajuste para el Textarea - INTACTO */
.home .wpcf7-form textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* 3. EL BOTÓN DE ENVIAR - INTACTO */
.home .wpcf7-form input[type="submit"] {
    display: inline-block !important;
    width: 100% !important;
    margin-top: 20px !important;
    padding: 15px 30px !important;
    
    font-family: 'Roboto', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #000 !important;
    
    /* Forma de Píldora (Se mantiene) */
    border-radius: 30px !important;
    background-color: #eef0f5 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    cursor: pointer !important;
    
    /* Sombra Externa */
    box-shadow: 
        5px 5px 10px #d1d9e6, 
        -5px -5px 10px #ffffff !important;
        
    transition: all 0.2s ease !important;
}

/* Hover del Botón - INTACTO */
.home .wpcf7-form input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 
        6px 6px 12px #ced4da, 
        -6px -6px 12px #ffffff !important;
}

/* Clic del Botón - INTACTO */
.home .wpcf7-form input[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 
        inset 4px 4px 8px #d1d9e6, 
        inset -4px -4px 8px #ffffff !important;
}

/* Limpieza de márgenes extraños de CF7 - INTACTO */
.home .wpcf7 p {
    margin-bottom: 20px !important;
    padding: 0 !important;
}

/* ==========================================================
   FIX PADDING: Solo para el tile del formulario en la Home
   ========================================================== */

/* Usamos :has() para detectar qué caja contiene el formulario y quitarle el relleno */
.home .tile-type-text:has(.wpcf7) .tile-inner {
    padding: 0 !important;   /* Eliminamos el 7% por defecto */
    width: 100% !important;  /* Aseguramos ancho total */
}

/* Forzamos que el formulario aproveche el espacio liberado */
.home .tile-type-text:has(.wpcf7) .wpcf7,
.home .tile-type-text:has(.wpcf7) form {
    margin: 0 !important;
    width: 100% !important;
}
/* ==========================================================
   FIX MENSAJES CF7: Neumorphism + Posicionamiento Flotante
   ========================================================== */

/* 1. CONTENEDOR RELATIVO (Para que el mensaje sepa dónde flotar) */
.home .wpcf7-form {
    position: relative !important;
}

/* 2. ESTILO DEL MENSAJE (NEUMORPHISM) */
.home .wpcf7-response-output {
    /* POSICIONAMIENTO ABSOLUTO (La Clave para que no mueva nada) */
    position: absolute !important;
    margin-bottom: 20% !important; /* Lo colocamos flotando abajo */
    left: 50% !important;
    transform: translateX(-50%) !important; /* Centrado horizontal exacto */
    width: 90% !important; /* Ancho para que no toque los bordes */
    margin: 0 !important;
    z-index: 100 !important; /* Aseguramos que se vea encima de todo */
    /* ESTILO VISUAL */
    background-color: transparent !important; /* Fondo gris base */
    color: #000000 !important; /* TEXTO NEGRO (Solicitado) */
    font-family: 'Roboto', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: none !important;
    text-align: center !important;
        /* Quitamos los bordes de colores por defecto de CF7 */
    border:none !important;
        /* SOMBRA NEUMORPHISM (Efecto Levantado) */
    box-shadow: none !important;

}

/* ==========================================================
   AJUSTE FINAL: Reducir Textarea + Mensaje Compacto
   ========================================================== */

/* 1. REDUCIR ALTURA DEL CAMPO MENSAJE */
/* Pasamos de 120px a 60px para liberar espacio vertical */
.home .wpcf7-form textarea {
    min-height: 70px !important; 
    height: 70px !important;
    margin-bottom: 5px !important; /* Menos margen debajo */
}

/* 2. MENSAJE DE RESPUESTA (Más compacto y ajustado) */
.home .wpcf7-response-output {
    position: absolute !important;
    bottom: 10px !important; /* Muy pegado al borde inferior */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 95% !important; /* Casi todo el ancho */
    z-index: 999 !important;
    
    /* Estilo Neumorphism Compacto */
    background-color: #eef0f5 !important;
    color: #000000 !important; /* TEXTO NEGRO */
    font-size: 0.75rem !important; /* Texto más pequeño */
    line-height: 1.2 !important;
    font-weight: 600 !important;
    text-align: center !important;
    
    padding: 8px 12px !important; /* Padding reducido */
    border-radius: 8px !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    
    /* Sombra fuerte para que destaque encima de todo */
    box-shadow: 
        0px 4px 10px rgba(0,0,0,0.1), 
        0px -4px 10px rgba(255,255,255,0.8) !important;
}

/* Bordes de color para estado (más finos) */
.home .wpcf7-response-output.wpcf7-validation-errors,
.home .wpcf7-response-output.wpcf7-invalid {
    border-left: 4px solid #ff4d4d !important;
}

.home .wpcf7-response-output.wpcf7-mail-sent-ok {
    border-left: 4px solid #2ecc71 !important;
}

/* 3. PEQUEÑO AJUSTE AL BOTÓN ENVIAR */
/* Le quitamos un poco de margen superior para compactar más */
.home .wpcf7-form input[type="submit"] {
    margin-top: 10px !important;
    padding: 12px 30px !important; /* Un poco menos alto */
}

/* Ajuste del enlace de privacidad */
.home .wpcf7-form .mi-enlace,
.home .wpcf7-form a {
    font-size: 1rem !important;
    display: inline-block !important;
    margin-top: 1px !important;
    margin-bottom: 15px !important; /* Espacio extra abajo para que quepa el mensaje */
}
/* ==========================================================
   OCULTAR BARRAS DE SCROLL (Estética Limpia)
   ========================================================== */

/* 1. Ocultar scroll en el Textarea y en el contenedor del formulario */
.home .wpcf7-form textarea,
.home .wpcf7-form,
.home .tile-inner, 
.home .tile-content {
    /* Firefox */
    scrollbar-width: none !important;
    /* Internet Explorer y Edge antiguo */
    -ms-overflow-style: none !important;
    /* Evitar que aparezca scroll horizontal */
    overflow-x: hidden !important; 
}

/* 2. Ocultar scroll en Chrome, Safari y Opera (Webkit) */
.home .wpcf7-form textarea::-webkit-scrollbar,
.home .wpcf7-form::-webkit-scrollbar,
.home .tile-inner::-webkit-scrollbar,
.home .tile-content::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    background: transparent !important;
}

/* 3. ASEGURAR QUE EL TEXTAREA NO MUESTRE SCROLL INNECESARIO */
.home .wpcf7-form textarea {
    overflow-y: auto !important; /* Permite scroll si escriben mucho, pero sin barra visible */
    resize: none !important; /* Quita la esquina de redimensionar que a veces parece un scroll */
}




/* ==========================================================
   FOOTER GLOBAL: FONDO BLANCO + BOTONES "BLANCO NUBE"
   ========================================================== */

/* 1. CONTENEDOR PRINCIPAL (Fondo Blanco Puro) */
#bitubi-global-footer {
    background-color: #ffffff !important; 
    padding: 50px 20px !important;
    border-top: 1px solid rgba(0,0,0,0.03) !important;
    position: relative !important;
    z-index: 10 !important;
}

/* 2. MENÚ CENTRADO */
#bitubi-global-footer .bitubi-footer-nav ul,
#menu-footer-menu {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 35px 0 !important;
}

#bitubi-global-footer .bitubi-footer-nav li,
#menu-footer-menu li {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* 3. ENLACES: EL "BLANCO MÁS BONITO" (Estilo Activo Permanente) */
#bitubi-global-footer .bitubi-footer-nav li a,
#menu-footer-menu li a {
    display: inline-block !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    
    /* EL COLOR CLAVE: Un blanco grisáceo muy elegante ("Nicer White") */
    background-color: #f2f4f8 !important; 
    
    /* Texto gris medio para contraste suave */
    color: #67748e !important; 

    /* FORMA DE PÍLDORA */
    padding: 12px 28px !important; /* Un poco más ancho para elegancia */
    border-radius: 50px !important;
    
    /* Borde casi invisible para definición */
    border: 1px solid rgba(255,255,255,0.8) !important; 
    
    /* SOMBRA SUAVE (Volumen sobre el fondo blanco) */
    box-shadow: 
        6px 6px 12px rgba(163, 177, 198, 0.2), /* Sombra oscura muy sutil */
        -6px -6px 12px #ffffff !important;     /* Brillo blanco puro */
        
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 4. HOVER: LEVANTAR AL PASAR EL RATÓN */
#bitubi-global-footer .bitubi-footer-nav li a:hover,
#menu-footer-menu li a:hover {
    color: #000000 !important; /* Texto negro */
    background-color: #f2f4f8 !important; /* Mantiene el color bonito */
    transform: translateY(-4px); /* Se eleva notablemente */
    
    /* La sombra crece para dar sensación de altura */
    box-shadow: 
        10px 10px 20px rgba(163, 177, 198, 0.3), 
        -10px -10px 20px #ffffff !important;
}

/* 5. TEXTOS DEL COPYRIGHT */
#bitubi-global-footer .bitubi-copyright,
#bitubi-global-footer .bitubi-copyright p,
#bitubi-global-footer p {
    text-align: center !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 0.75rem !important;
    color: #a0aab8 !important; 
    margin: 0 !important;
}




/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< AHORA <<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

/* ==========================================================
   BUSCADOR "FINDER" NEUMORPHIC (Ancho Corregido)
   ========================================================== */

/* 1. EL CONTENEDOR EXTERNO (La tarjeta que sobresale) */

.header-padding {padding:0 !important;}

#header #searchform-wrap {
    /* ESTÉTICA VISUAL (Igual que antes) */
    border: 0px solid #fff !important;
    background-color: transparent !important;
    border-radius: 15px !important;
    padding: 8px !important;
    /* CORRECCIÓN DE MEDIDAS (Para igualar al menú) */
    width: 100% !important; /* Mismo cálculo que los botones */
    margin-left: 0px !important;          /* Mismo margen izquierdo */
    margin-right: 0 !important;
    margin-top: 20px !important;
    margin-bottom: 30px !important;       /* Separación con el menú */
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    display: block !important;
    transform: scale(0.8);
}

/* 2. EL FORMULARIO (El canal hundido "Inset") */
#header #searchform {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: .3rem .5rem !important;
    border-radius: 10px !important;
    box-shadow: 
        inset 10px 10px 15px -10px #c3c3c3,
        inset -10px -10px 15px -10px #ffffff !important;
    background-color: transparent !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* 3. EL INPUT (Transparente y limpio) */
#header #searchform input#s {
    flex: 1 !important;
    height: auto !important;
    border: none !important;
    background-color: transparent !important;
    outline: none !important;
    font-size: 1.1rem !important;
    /* letter-spacing: 0.75px !important; */
    color: #292929 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-width: 0 !important; /* Evita desbordamientos en flexbox */
}

/* 4. EL ICONO (Reconstrucción total con CSS) */
#header #searchform .icon-search,
#header #searchform i {
    width: 35px !important;
    height: 35px !important;
    margin-right: 1rem !important;
    transition: all 0.2s !important;
    box-shadow: inset 0 0 0 20px #979696 !important;
    border-radius: 50% !important;
    position: relative !important;
    display: block !important;
    color: transparent !important; 
    font-size: 0 !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    pointer-events: none !important;
    flex-shrink: 0 !important; /* Evita que el icono se aplaste */
}

/* Elementos Pseudo para la animación (Lente y Mango) */
#header #searchform .icon-search:before,
#header #searchform .icon-search:after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* La Lente (Centro) */
#header #searchform .icon-search:after {
    width: 10px !important;
    height: 10px !important;
    background-color: #979696 !important;
    border: 3px solid #f6f5f0 !important;
    top: 50% !important;
    position: absolute !important;
    transform: translateY(-50%) !important;
    left: 0px !important;
    right: 0 !important;
    margin: auto !important;
    border-radius: 50% !important;
}

/* El Mango */
#header #searchform .icon-search:before {
    width: 4px !important;
    height: 13px !important;
    background-color: #f6f5f0 !important;
    top: 50% !important;
    left: 20px !important;
    transform: rotateZ(45deg) translate(-50%, 0) !important;
    transform-origin: 0 0 !important;
    border-radius: 4px !important;
}

/* -----------------------------------------------------------
   ESTADOS ACTIVOS Y PROCESANDO (Controlados por JS)
   ----------------------------------------------------------- */

/* ESTADO ACTIVE: El icono se transforma */
#header #searchform-wrap.active .icon-search {
    transform: translateY(-5px) !important;
}

#header #searchform-wrap.active .icon-search:after {
    border-width: 10px !important;
    background-color: #f6f5f0 !important;
}

#header #searchform-wrap.active .icon-search:before {
    background-color: #292929 !important;
    width: 6px !important;
    transform: rotateZ(45deg) translate(-50%, 25px) !important;
}

/* ESTADO PROCESSING: Animación de carga */
#header #searchform-wrap.processing .icon-search {
    transform-origin: 50% !important;
    animation: spinner 0.3s linear infinite !important;
    animation-delay: 0.5s !important;
}

@keyframes spinner {
    0% { transform: rotateZ(45deg); }
    100% { transform: rotateZ(405deg); }
}





/* Aplicar estilo Marco al Logo del Sidebar */
#header #site-logo a {
    display: inline-block !important;
    padding: 15px !important;
    background-color: #eef0f5 !important;
    border-radius: 10px !important;
    box-shadow: 
        9px 9px 16px rgba(163, 177, 198, 0.6), 
        -9px -9px 16px rgba(255, 255, 255, 0.5) !important;
    transition: transform 0.3s ease !important;
}

#header #site-logo a:hover {
    transform: scale(0.98) !important; /* Efecto de "pulsar" al pasar el ratón */
}







/* ================= TARJETA PRINCIPAL ================= */
    .pricing-card {
        background-color: #e0e5ec;
        padding: 20px;
        border-radius: 30px;
        max-width: 370px;
        width: 100%;
        /* Doble sombra hardcodeada para efecto flotante */
        box-shadow: 20px 20px 60px #bec3c9, -20px -20px 60px #ffffff;
        text-align: left;
        color: #333333;
    }

    /* ================= CABECERA Y PRECIO ================= */
    .plan-title {
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        color: #7d8999;
        text-transform: uppercase;
        margin-bottom: 15px;
    }

    .price-container {
        display: flex;
        align-items: baseline;
        margin-bottom: 5px;
    }

    .price {
        font-size: 2.5rem;
        font-weight: 700;
        color: #333333;
        line-height: 1;
    }

    .period {
        font-size: 1.1rem;
        color: #7d8999;
        margin-left: 5px;
    }

    .discount {
        font-size: 0.9rem;
        color: #7d8999;
        font-style: italic;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 2px solid rgba(0,0,0,0.05);
    }

    /* ================= LISTA ================= */
    .features-list {
        list-style: none;
        padding: 0;
        margin: 0 0 40px 0;
        padding-top: 1.5rem !important
    }

    .features-list li {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        font-size: 1rem;
        color: #333333;
    }

    .icon {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin-right: 15px;
        font-size: 1.1rem;
        min-width: 24px; 
    }

    .icon.check {
        color: #333333;
    }

    .icon.cross {
        color: #7d8999;
        font-size: 1rem;
    }
    
    .features-list li.inactive {
        color: #7d8999;
        /*text-decoration: line-through;*/
    }

    .features-list strong {
        font-weight: 700;
        margin-right: 4px;
    }
/* Estado normal (Repos y saliente) */
.pricing-card .btn-neumorphic {
    /* FORZAMOS EL COLOR DE FONDO CLARO (Mismo que la tarjeta) */
    background-color: #e0e5ec !important;
    /* FORZAMOS EL COLOR DE TEXTO OSCURO */
    color: #333333 !important;
    
    /* Sombra saliente pronunciada */
    box-shadow: 9px 9px 16px #b8b9be, -9px -9px 16px #ffffff !important;

    /* Resto de estilos base */
    display: block;
    width: 100%;
    padding: 18px 0;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Estado Hover (Al pasar el ratón) */
.pricing-card .btn-neumorphic:hover {
     /* Aseguramos que siga siendo claro al pasar el ratón */
     background-color: #e0e5ec !important;
     color: #333333 !important;
     
     /* Animación de bajada */
     transform: translateY(2px);
     box-shadow: 6px 6px 10px #b8b9be, -6px -6px 10px #ffffff !important;
}

/* Estado Activo (Al hacer clic) */
.pricing-card .btn-neumorphic:active {
    /* Aseguramos que siga siendo claro al hacer clic */
    background-color: #e0e5ec !important;
    color: #333333 !important;
    
    /* Efecto hundido (inset) */
    box-shadow: inset 6px 6px 12px #b8b9be, inset -6px -6px 12px #ffffff !important;
    transform: translateY(2px);
}



/* ============================================================
   SECCIÓN DE SOLUCIONES (Estilo Neumorphism)
   Adaptado al HTML proporcionado.
   ============================================================ */

/* 1. CONFIGURACIÓN DEL CONTENEDOR PRINCIPAL */
/* Aseguramos que el fondo de la sección coincida con el efecto */
.solutions-section {
    background-color: transparent !important;
    padding: 0px 10px !important;
}

.solutions-section-title {
    text-align: center !important;
    font-size: 3rem !important;
    color: #333333 !important;
    margin-bottom: 10px !important;
    font-weight: 700 !important;
}
.solutions-section-title h2 {
    text-align: center !important;
    font-size: 3rem !important;
    color: #333333 !important;
    font-weight: 700 !important;
}
.solutions-lead {
    text-align: center !important;
    color: #7d8999 !important;
    margin-bottom: 50px !important;
    font-size: 1.1rem !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.soluciones-container {
  max-width: 1100px;
  width:100%;
  margin: 0 auto;
}



/* 2. GRID DE SOLUCIONES */
.solutions-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 40px !important;
}

/* 3. TARJETA DE SOLUCIÓN (BASE NEUMORPHIC) */
.solution-card {
    background-color: #e0e5ec !important;
    padding: 40px 30px !important;
    border-radius: 12px !important;
    max-width: 300px !important;
    width: 100% !important;
    
    /* EFECTO FLOTANTE (Igual que en Suscripciones) */
    /* box-shadow: 20px 20px 60px #bec3c9, -20px -20px 60px #ffffff !important;*/
    
    text-align: left !important;
    color: #333333 !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.3s ease !important;
}

/* Hover suave */
.solution-card:hover {
    transform: translateY(-5px) !important;
    z-index: 10 !important;
    border:1px solid white !important;
}

/* 4. CABECERA DE LA TARJETA */
.solution-header {
    margin-bottom: 25px !important;
    border-bottom: 2px solid rgba(0,0,0,0.05) !important;
    padding-bottom: 20px !important;
}

.solution-title {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #333333 !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
}

/* Badge (Etiqueta pequeña: "Tiempo < 72h") */
.solution-badge {
    display: inline-block !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #7d8999 !important;
    background-color: #e0e5ec !important;
    padding: 5px 10px !important;
    border-radius: 10px !important;
    /* Sombra hundida (inset) para diferenciarlo */
    box-shadow: inset 3px 3px 6px #bec3c9, inset -3px -3px 6px #ffffff !important;
    margin-bottom: 10px !important;
}

.solution-subtitle {
    font-size: 0.9rem !important;
    color: #7d8999 !important;
    font-style: italic !important;
    margin: 0 !important;
}

/* 5. LISTA DE CARACTERÍSTICAS */
.solution-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 40px 0 !important;
    flex-grow: 1 !important; /* Empuja el footer hacia abajo */
}

.solution-features li {
    font-size: 0.95rem !important;
    color: #333333 !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
}

/* Elementos deshabilitados (con clase .disabled) */
.solution-features li.disabled {
    color: #a0aab8 !important;
    text-decoration: line-through !important;
    opacity: 0.7 !important;
}

.solution-features strong {
    font-weight: 700 !important;
    margin-right: 5px !important;
}

/* 6. BOTÓN DE SOLUCIÓN (Reutilizando estilo Neumorphic) */
.solution-footer {
    margin-top: auto !important;
}

.btn-solution {
    display: block !important;
    width: 100% !important;
    padding: 15px 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    color: #333333 !important;
    background-color: #e0e5ec !important;
    border-radius: 50px !important;
    border: none !important;
    
    /* Sombra Saliente (Estado Reposo) */
    box-shadow: 9px 9px 16px #b8b9be, -9px -9px 16px #ffffff !important;
    
    transition: all 0.3s ease !important;
}

.btn-solution:hover {
    transform: translateY(2px) !important;
    box-shadow: 6px 6px 10px #b8b9be, -6px -6px 10px #ffffff !important;
    background-color: #e0e5ec !important;
    color: #333333 !important;
}

.btn-solution:active {
    box-shadow: inset 6px 6px 12px #b8b9be, inset -6px -6px 12px #ffffff !important;
    transform: translateY(2px) !important;
}

/* 7. TARJETA DESTACADA ("A Medida" - Opcional: Estilo Oscuro) */
/* Si quieres que la tarjeta "A Medida" sea oscura como la "Profesional" de los planes */

.solution-card.featured-solution {
    background-color: #333333 !important;
    color: #ffffff !important;
    box-shadow: 20px 20px 60px #2a2a2a, -20px -20px 60px #4a4a4a !important; /* Sombras oscuras */
}

.solution-card.featured-solution .solution-title {
    color: #ffffff !important;
}

.solution-card.featured-solution .solution-badge {
    background-color: #333333 !important;
    color: #ffffff !important;
    box-shadow: inset 3px 3px 6px #1a1a1a, inset -3px -3px 6px #4d4d4d !important;
}

.solution-card.featured-solution .solution-features li {
    color: #e0e0e0 !important;
}

.solution-card.featured-solution .solution-features strong {
    color: #ffffff !important;
}

/* Botón dentro de la tarjeta oscura */
.solution-card.featured-solution .btn-solution {
    background-color: #333333 !important;
    color: #ffffff !important;
    box-shadow: 9px 9px 16px #1a1a1a, -9px -9px 16px #4d4d4d !important;
}

.solution-card.featured-solution .btn-solution:hover {
    background-color: #333333 !important;
}

.solution-card.featured-solution .btn-solution:active {
    box-shadow: inset 6px 6px 12px #1a1a1a, inset -6px -6px 12px #4d4d4d !important;
}



/* ============================================================
   SECCIÓN DE SOLUCIONES (Estilo Neumorphism)
   Adaptado al HTML proporcionado.
   ============================================================ */
.woocommerce-account .woocommerce .col-1 {padding:10px !important;}


.woocommerce-variation-price {margin-bottom:20px !important; font-size:1.3em !important;}

/* Ocultar desglose extra de "Pagar ahora" en suscripciones */
.woocommerce-checkout .recurring-totals {
    display: none !important;
}



/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< AQUI >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/* Ocultar filas específicas que digan "pagar ahora" si no usan la clase anterior */
.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {display:none !important;}
.wc-block-components-product-price {font-size:2em !important;}