.elementor-448 .elementor-element.elementor-element-30494e7{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for shortcode, class: .elementor-element-0514312 *//* ========================================================
   1. ETIQUETA PERSONALIZADA (Tu código mejorado)
   ======================================================== */
label[for="pods-form-ui-pods-field-post-title"] {
    font-size: 0;
    display: block;
    margin-bottom: 8px;
}

label[for="pods-form-ui-pods-field-post-title"]::before {
    content: "Nombre del producto";
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50; /* Gris oscuro para mejor lectura */
}

/* ========================================================
   2. CONTENEDORES Y ETIQUETAS GENERALES
   ======================================================== */
.pods-field__container {
    margin-bottom: 24px; /* Mayor separación entre campos */
}

.pods-form-ui-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
}

/* Color rojo para el asterisco de campo obligatorio */
.pods-form-ui-label abbr.required {
    color: #e74c3c;
    text-decoration: none;
    border: none;
}

/* ========================================================
   3. CAMPOS DE ENTRADA (Inputs)
   ======================================================== */
.pods-form-ui-field input[type="text"],
.pods-form-ui-field input[type="number"],
.pods-form-ui-field input {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    color: #333333;
    background-color: #f8f9fa; /* Fondo ligeramente gris */
    border: 1px solid #dce1e6;
    border-radius: 8px; /* Bordes redondeados modernos */
    box-sizing: border-box;
    transition: all 0.3s ease; /* Transición suave */
}

/* Efecto visual al hacer clic/escribir en el campo */
.pods-form-ui-field input:focus {
    background-color: #ffffff;
    border-color: #f2295b; /* Tu color de acento */
    box-shadow: 0 0 0 4px rgba(242, 41, 91, 0.15); /* Halo brillante alrededor */
    outline: none;
}

/* ========================================================
   4. TEXTOS DE AYUDA (Ej: "Precio del producto")
   ======================================================== */
.pods-form-ui-comment {
    font-size: 13px;
    color: #7f8c8d;
    margin-top: 6px;
    font-style: italic;
}

/* ========================================================
   5. BOTÓN DE ENVÍO
   ======================================================== */
.pods-submit {
    margin-top: 10px;
}

.pods-submit-button {
    background-color: #f2295b; 
    color: #ffffff;
    border: none;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    width: 100%; /* Botón de ancho completo */
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(242, 41, 91, 0.25);
}

/* Efecto al pasar el mouse por el botón */
.pods-submit-button:hover {
    background-color: #d11b4a; /* Tono más oscuro al pasar el cursor */
    transform: translateY(-2px); /* Efecto de levitación */
    box-shadow: 0 6px 15px rgba(242, 41, 91, 0.35);
}

/* Efecto al hacer clic en el botón */
.pods-submit-button:active {
    transform: translateY(0);
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-2f6b97c *//* ========================================================
   1. CONTENEDOR DE LA TABLA (Para evitar desbordes en móvil)
   ======================================================== */
.elementor-widget-shortcode {
    overflow-x: auto; /* Permite scroll horizontal en móviles si la tabla es ancha */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Sombra suave para dar relieve */
}

/* ========================================================
   2. ESTILOS BASE DE LA TABLA
   ======================================================== */
.elementor-widget-shortcode table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    text-align: left;
    margin: 0;
}

/* ========================================================
   3. ENCABEZADOS DE LA TABLA (Títulos de las columnas)
   ======================================================== */
.elementor-widget-shortcode table th {
    background-color: #2c3e50; /* Fondo oscuro elegante */
    color: #ffffff;
    font-weight: 600;
    padding: 16px 20px;
    font-size: 15px;
    border-bottom: 3px solid #f2295b; /* Línea de acento con tu color corporativo */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Redondear las esquinas superiores de los encabezados */
.elementor-widget-shortcode table th:first-child {
    border-top-left-radius: 8px;
}
.elementor-widget-shortcode table th:last-child {
    border-top-right-radius: 8px;
}

/* ========================================================
   4. CELDAS DEL CUERPO (Datos de los productos)
   ======================================================== */
.elementor-widget-shortcode table td {
    padding: 14px 20px;
    font-size: 15px;
    color: #4a5568; /* Gris oscuro para buena lectura */
    border-bottom: 1px solid #edf2f7; /* Línea separadora muy sutil */
}

/* ========================================================
   5. EFECTO CEBRA Y HOVER (Interactividad visual)
   ======================================================== */
/* Filas pares con un fondo ligeramente gris */
.elementor-widget-shortcode table tbody tr:nth-of-type(even) {
    background-color: #f8fafc;
}

/* Resaltar la fila al pasar el ratón */
.elementor-widget-shortcode table tbody tr:hover {
    background-color: #fff1f4; /* Un tono rosado muy suave derivado de tu fucsia */
    transition: background-color 0.3s ease;
}/* End custom CSS */